Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, and more! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes ??? - 02:42 - Immutability 05:08 - Records Immutable object Syntax #{x: 1, y: 2} 05:56 - Tuples Immutable array Syntax #[1,2,3,4] 07:18 - For both Referred to as a compound primitive Can contain only primitives, not objects They are compared deeply by their contents rather than their identity assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 }); Potential for optimizations Optimizations for making deep equality checks fast Optimizations for manipulating data structures Works well with type systems Better integration with the debugger Accessed through normal record.scott object like syntax 13:39 - Stage 2 Links https://github.com/tc39/proposal-record-tuple Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

28 Syys 202017min

In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, best practices, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - What is Git? 04:16 - Why do you need it? 06:31 - UI vs command line 09:03 - Commands 101 https://git-scm.com/ init .gitignore file is key right off the bat add add -p - quick review of all the changes you’ve made commit Multiple adds and commits Commit messages should be descriptive push What are origins? pull clone checkout merge fetch stash fork Merge vs pull request Git vs GitHub / Alternatives Bitbucket GitLab 44:25 - Common issues Merge conflicts Files being tracked unintentionally “How do I delete file from GitHub?” git rm -r alias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r" Databases in Git? 49:10 - Git clients https://git-scm.com/downloads/guis CLI “Hub” Github CLI GitHub desktop app VS Code integration Source tree Kraken Tower Links VS Code GitLens GitHub Bitbucket GitLab Drupal GitKraken Tower ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: Yeti Products Shameless Plugs Scott: React For Everybody - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

23 Syys 202058min

In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes Wes: First money: check for $300 First website: Pool company First ad sense income: Craigonomics First YouTube: import large SQL database with bigdump First online Product: Sublime Text - Ryan Christiani First in-person teaching: HackerYou First project at agency: Jet Cooper Scott: First dev gig: parents tea store First design gig: Perpetual First YouTube video: Adobe Premier 101 First BIG YouTube video: Sass Tutorials First ad sense income: scotttolinski.com blog post about music promotion sites First online product: Sass Mastery First project at agency: Nu Step Links https://twitter.com/wesbos/status/1276500155789910016 Audiojungle Themeforest Juno College @steveschoger Smashing Mag Css Tricks Packt Publishing Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

21 Syys 202022min

In this episode of Syntax, Scott and Wes talk about writing good CSS. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:11 - Frameworks Utility: Tailwind, Taycons, Bulma Frameworks: Foundation, Bootstrap Classless base starters: https://github.com/dbohdan/classless-css HTML5 UP / A template 13:37 - Preprocessors Sass Stylus Less Regular CSS Variables Color functions - not yet 19:42 - Tools PostCSS is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins CSS min/max for clamp Autoprefixer Autoreset - reset a component Gap instead of grid-gap Simple-vars Postcss-modules SugarSS Preset env 34:19 - Stylint Stylint More than just a basic linter Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable 36:37 - Removing unwanted CSS PurgeCSS - Tailwind uses this PurifyCSS 41:17 - Writing maintainable CSS / scoping solutions Component-based CSS Modules Naming Convention Based BEM SMACSS CSS Variables Powerful when utilized with things like calc() to avoid out of sync values Know which browsers you need to support Links Syntax 197: Hasty Treat - Tips For Writing Good CSS Compass Susy Grunt Gulp Linaria Astroturf Houdini Svelte Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings Wes: Class Action Park Documentary Shameless Plugs Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

16 Syys 202056min

In this Hasty Treat, Scott and Wes talk about time block planning — what it is and how it can help you increase your productivity! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 01:50 - What is time block planning 03:12 - How TBP has helped Scott stay focused 04:46 - How it helps family life 05:57 - How to plan your week 11:00 - How to deal with setbacks Links Cal Newport Todoist Deep Work Deep Questions Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

14 Syys 202016min

In this episode of Syntax, Scott and Wes talk about tales from web dev past — clearfix, floats, flash, cufon, guestbooks, hit counters, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 04:28 - Float-based layouts Clearfix ☠️ Killed by Flexbox, and then Grid 09:29 - Loading Screens: Two websites - one flash and one HTML Splash screen 11:22 - Hit counters 12:28 - Guestbooks 13:28 - Flash 3rd party player Media dragged its feet FOREVER ☠️ Killed by Steve Jobs 18:46 - Fonts The Golden Layout Cufon / sIFR / Images of text Typekit ☠️ Killed by font-face 24:15 - Folder-based version control ☠️ Killed by Git 26:22 - FTP ☠️ Killed by Git, then many other things 28:40 - CSS Zen Garden CSS Zen Garden ☠️ Killed by CSS being better 32:02 - TextMate Coda Notepad++ Adobe GoLive FrontPage Macromedia / Dreamweaver ☠️ Killed by Sublime Text, then VSCode 33:58 - Sliding doors A technique for rounded corners on buttons ☠️ Killed by CSS 35:29 - PNG Fix ☠️ Killed by the death of IE6 37:53 - 9-Panel layouts ☠️ Killed by CSS 39:20 - CSS 3 Please CSS 3 Please Paul Irish ☠️ Killed by modern CSS Links Silverlight Chris Coyier ××× SIIIIICK ××× PIIIICKS ××× Scott: Fancierstudio 600 LED Light Panel Kit Wes: Allen Key Drill Bit Set Shameless Plugs Scott: React 3D and Advanced Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Master Gatsby Course - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

9 Syys 202049min

In this Hasty Treat, Scott and Wes talk about home offices, backyard offices, costs, and pros and cons! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 03:40 - Structure options: Existing sheds Build your own likely not allowed Drop-in offices Rubbermaid shed 07:18 - Electrical 07:58 - Insulation 09:01 - Heating 11:30 - Cooling 16:01 - Interior 16:42 - WiFi 17:12 - Costs ~ $4k Electrical - $2k Flooring - $600 Paneling- $900 AC - $1000 Fan - $100 Links https://twitter.com/bradwestfall/status/1284299864210210817 https://bradfrost.com/blog/post/brad-frost-web-headquarters/ Technology Connections - Space Heater Nonsense Technology Connections - Personal “air conditioners” aren’t what they seem Technology Connections - Cassette adapters are remarkably simple Caldigit Ubiquity Outdoor Access Point Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

7 Syys 202020min

It’s another potluck! In this episode, Scott and Wes answer your questions about the recent Mozilla layoffs, Safari, finding time to learn coding, Google Analytics alternatives, malicious Github users, and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:15 - What are your guy’s thoughts on Mozzila’s layoffs and how it will affect developers? 08:42 - Right now I am a math teacher. I am married with 2 kids (3 and 1) so finding time to code is difficult. My current situation includes waking up at 4:30 am everyday just to get in some time before the kids wake up. Do either of you have any tips about finding a 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? 13:23 - If you had to use a drag-n-drop framework using React, which one would you choose? 15:49 - E2E vs Visual Regression Testing? At which web-app development cycle to implement each? Best tools open source vs purchase? 20:36 - I teach a Highschool course in web development. For a group of students who have a solid knowledge of HTML/CSS and a decent understanding of JavaScript, would Svelte be a good framework for entering into component-based development for the first time? 22:33 - What’s a good Google Analytics alternative in 2020? I have a site on Netlify that the $9/mo seems a bit steep for, for what the site is, and flipping the domain through Cloudflare just for the analytics seems crazy; but is it worth it? Alternatives would be awesome, as I’d love to get off the Google overlords. 29:22 - 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, picture added or the readme updated. The repos are still cloned. The traffic section shows the views to my repo at 1 sometimes 2. Is this normal? Is this how interested employers keep tabs on you? Are there a lot of malicious git users? What is happening? 32:30 - With Apple switching to their own processors is it silly for anyone to buy a Mac for development before that releases? Do you guys have experience with Windows, and which would you still prefer today if you needed to buy? 40:28 - Have you ever been approached by or heard of GitAds.io? They’re trying to pay developers to put ads onto popular open source libraries on Github, and they approached me recently, and I wasn’t sure what to think about them. What do you think? 45:16 - I just listened to your TLD game. It made me wonder your opinions on personal site domain names? Should it always try to be yourname.dev? What about .me or other domains? 47:53 - What’s the best way to introduce new technology or processes to a team? Links Rust Firefox MDN Jen Simmons Safari React DnD React Beautiful DnD React Spring Framer Motion Cypress Percy.io Svelte Heap Fathom GitAds.io .TECH Syntax 179: Hasty Treat - The TLD Game Javascript30 Syntax 206: Hasty Treat - The New MacBook Pro for Web Development ××× SIIIIICK ××× PIIIICKS ××× Scott: Turbo Boost Switcher for Mac OS X Wes: Roller Blade Wheels for your chair Shameless Plugs Scott: React 3D - Sign up for the year and save 25%! Wes: Master Gatsby Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

2 Syys 202059min