Big Deno Changes

In this episode of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, 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. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 03:00 - iFrames Sidebar menu target 05:42 - JavaScript image hovers Dreamweaver Photoshop Slice and Select Tool 08:24 - CSS Pie 09:42 - Animated gifs of people and construction http://textfiles.com/underconstruction/ 11:20 - CSS Zoom 1 / IE CSS Hacks Forced IE 7 to redraw floats 13:42 - Layout trends 800x600 fixed websites 960gs Golden Grid 12-col grid creators 16:26 - Sprite maps Spritecow ☠️ Killed icon fonts ☠️ Killed by SVG icons 18:40 - Firebug and Firebug Lite Lite was a bookmarklet 20:14 - Image maps / Background gradients 1px wide and 2000px tall image to make repeating gradients Squidfingers Subtle Patterns Hero Patterns CSS3 Patterns 25:53 - Web rings 27:41 - Glossy buttons 28:09 - Flaming text FlamingText.com 30:01 - Marquee tags Staggered Speed attribute 31:26 - Spacer gifs 34:30 - AngelFire / GeoCities 36:11 - Xanga / LiveJournal 37:29 - Above the fold content Abovethefold.fyi 39:36 - Homestar Runner Links Drupal Omega theme Syntax 032: Designing, Templating, Inlining and Sending Email Mailchimp Litmus Email on Acid Herman Miller Aeron ××× SIIIIICK ××× PIIIICKS ××× Scott: New Rustacean Podcast Wes: Autonomous Ergo Chair 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

30 Sep 202049min

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 Sep 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 Sep 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 Sep 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 Sep 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 Sep 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 Sep 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 Sep 202020min