920: How to Build MCP Servers

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

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

In this Hasty Treat, Scott and Wes wrap up season one of the podcast and talk about what’s coming. 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 01:32 - Plans for the Fall 06:59 - Fav Hasty Scott Ep 161: Hasty Treat - VSCode Extensions & Themes Ep 165: Hasty Treat - VSCode Treats Part 2 Ep 167: Hasty Treat - VSCode Love Part 3 Ep 277: Hasty Treat - 5 Things That Make Your Site Slow Wes Ep 211: Hasty Treat - Modules in Node 08:55 - Fav Tasty Scott Ep 236: Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout Ep 250: Scott Teaches Wes Svelte and Sapper Wes Ep 224: Serverless / Cloud Functions - Part 1 Ep 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy 10:22 - Top Episodes of 2020 10: Ep 214: 2020 Fitness 09: Ep 228: More on Severless - Databases × Files × Secrets × Auth × More! 08: Ep 220: The Synology Show - Backups and Home Server 07: Ep 222: Are Web Dev GUIs Going to Replace Us? 06: Ep 210: Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More! 05: Ep 212: Pika Pkg 04: Ep 224: Serverless / Cloud Functions Part 1 03: Ep 218: Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More! 02: Ep 226: Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More! 01: Ep 216: Tech to Watch in 2020 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

31 Aug 202016min

It’s another potluck! In this episode, Scott and Wes answer your questions about MDX, portfolio projects for junior devs, code commenting, CSS property order, 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. 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:18 - I’m curious to know what you guys think of MDX. I’d love to learn more about pros and cons, if you guys had a chance to use it. 08:49 - Where would you put business logic in Vue.js middle- or large-scale applications? I try to put business logic in store but it makes hard to maintain such store, even with splitting to actions/getters/mutations files. I ended up using vanilla JavaScript files, where each file is a class singleton. I was wondering: is it a good solution or do you have better alternatives in mind? 12:07 - I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises that I need to explain them and remember why I did them a certain way. How can I get better at conceptualizing intricate design patterns or functions as well as have better memory recall for these abstractions? 18:02 - Can I get recommendations for a junior dev portfolio? What five projects you would recommend to build that will significantly help in getting a job as a front-end web dev and why? 21:13 - I am now working on building a minesweeper game with React. You know how on a computer you right click to flag and disable a cell? I am thinking of doing a press and hold on a mobile device instead. I am not sure how to do either (the right click logic or the press and hold). How can you listen for these events in React? Can you help with some guidance or resources? :) 30:00 - What are your thoughts on SailsJS as a Rails-equivalent framework in Javascript? They recently released version 1.0 and I’m wondering if I should start using it in projects or if I should wait to see if it pans out. 34:35 - 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 for components that you will likely need to use again? 38:33 - Thoughts on shadow dom / custom elements? Would you use them in your own projects? 40:49 - How do you organize CSS properties within a rule and why? Random, alphabetical, logical groupings, etc. 46:04 - Have u ever used the 2nd parameter of JSON.stringify for anything useful? 48:00 - Getting my first 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 code bases. I’ve also learned the importance of writing code that will be readable later - ensuring any hacky workaround is replaced with a pattern seen elsewhere in the code base, etc. My question is - are there resources on these sorts of topics for folks trying to break into the industry? A lot of tech topics revolve around how to get your code to run, which feels to me like only half the battle. Where can juniors find resources on robustness? Links https://github.com/jxnblk/mdx-deck https://mdsvex.com/ Spectacle MDsveX Vue.js Redux VueX Better Comments Kap Redwood.js Blitz.js GraphQL https://github.com/ryanmcdermott/clean-code-javascript ××× SIIIIICK ××× PIIIICKS ××× Scott: Easy Snippet Wes: WOW Pool Noodles Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - 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

26 Aug 202057min