920: How to Build MCP Servers

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data 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. 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 3:38 - What is state? 4:58 - What kind of things are kept in state? Data Temporary client side data From forms, button clicks, etc. Cached server data Data from API UI status AKA isModalOpen isToggled 12:48 - Global state vs. Local state Ask yourself: does the data need to be accessed outside this component? If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”. Do you count Apollo API calls as global state? 21:15 - Managing Local state useState, setState Passing state & update functions down State machines 31:12 - Approaches to Global state Redux Complicated, hard to learn Very useful, organized and structured Actions, reducers and more Time traveling do to nature of store Immutability Tons of Redux based hooks libs Mobx Based on Observables An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. Context Functions just work and update global state. Downside is there are no fancy tools Apollo Apollo quires for data in global cache Apollo client for global UI state Not quite there, isn’t super elegant Links Thinkso Learn Node! Meteor Session xstate-react React Context Mobx easy-peasy hype.codes providerCompose.js Relay React Podcast ××× SIIIIICK ××× PIIIICKS ××× Scott: Command Line Heroes Wes: MASSDROP CTRL MECHANICAL KEYBOARD Shameless Plugs Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up! 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

14 Elo 201955min

In this Hasty Treat, Scott and Wes talk about remote internet! Remote internet is an important because it opens up living options to developers as the industry moves toward more remote work. 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 for more info. Show Notes 4:31 - Remote internet options 7:55 - Modems and routers 10:52 - Antennas 13:47 - Boosters 14:54 - Plans, data and speeds 20:11 - Other things to think about Links Deadmau5 house ZTE MF288 Netgear LB1120 Mofi Routers ZBT WE826T Rogers Ubiquiti Networks Tomato Firmware 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

12 Elo 201924min

In this episode of Syntax, Scott and Wes talk about blogging — both the specifics of content (how to make great content), as well as the mechanics of where and how to publish blog posts. 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”. 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. Show Notes 7:06 - What are some of the different platforms for publishing a blog? 23:41 - How to structure a blog post? 29:10 - How to direct traffic to a blog post? 38:51 - How do you make technical content in-depth and also succinct? Links WordPress Gatsby Squarespace Netlify Tumblr Medium Hacker Noon Freedcamp Devtoo Smashing Magazine Net Magazine Gridsome GraphQL Vuepoint Next Nuxt Everything I wish I knew running a sole proprietorship business @peterc JavaScript Weekly Cooperpress Seth Godin Overreacted - Dan Abramov ××× SIIIIICK ××× PIIIICKS ××× Scott: Business Wars Wes: Spectacular Failures Shameless Plugs Scott: Level Up Tutorials Pro — Subscribe before price goes up! 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

7 Elo 201949min

It’s another VSCode episode! In this Hasty Treat, Scott and Wes talk all the things they love about VSCode — things to learn, how to get around more quickly, using keyboard commands, being more efficient, using snippets 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 and using the coupon code “tastytreat”. Show Notes 2:14 - Things to learn Jump by word, line Select by word Command Palette (cmd + shift + p) Move and copy lines - option up down or with shift Multi cursor Find and replace in files Use the Insiders build if you like updates every day 11:03 - Keyboard commands Cmd + b to hide sidebar Cmd + shift + x 13:55 - Snippets Snippet Generator Get to know defaults as well as tabs Mongo Snippets for Node-js Links VSCode Marketplace VSCode Insiders Build React Snippets JavaScript (ES6) Code Snippets HTML Snippets ES7 React/Redux/GraphQL/React-Native snippets Vue VSCode Snippets Atom Snippets Text Expander 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

5 Elo 201918min

It’s another Syntax potluck! In this episode, Scott and Wes answer your questions about remote work, AI agendas, motivation, fitness, the future of coding, and much 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 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 2:03 - Q: I hear you both talk about “state” a lot in your podcasts. And while I understand a little about it, I never understand it in the context you both use it. Can you enlighten us? 6:52 - Q: I have an idea for a project that is suited for web sockets, push text/images/documents to a bunch of users in real time. I just learned about Firebase’s real-time database, and it looks like it would be pretty easy to implement my idea. What are your thoughts, pros/cons, of these two technologies? 10:42 - Q: How’s your fitness going? 12:15 - Q: Let’s say both of you gents were junior developers that had basic knowledge and skills in HTML, CSS and JavaScript but you had all the experience and knowledge of how to best master those skills and where the industry was heading. What would be the outline and focus of your road-map knowing what you do now? 17:22 - Q: Is it worth it to find a remote dev job at an early stage of your career? Considering the stuff I learn from my seniors and other devs on the team, I wonder if I will lose the opportunity to learn stuff from my team members? 19:49 - Q: How do I keep myself motivated in coding? 22:47 - Q: What’s y’all’s opinion on using some obscure (at least in my opinion) features of a language, such as Javascript bitwise operators, in a production app that dozens of other engineers maintain, and will continue to maintain long after you leave the company? It seems hard to read and immediately understand, which possibly makes it harder to debug/refactor in the future. Is it the responsibility of future devs to learn if they don’t know, or should you find a different way to code the solution in the first place? 26:00 - Q: Wes, I keep hearing you talk about working from your Dropbox. Do you sync up everything? Even things like your node module folders? 29:26 - Q: Have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can’t quite make the transition. 32:58 - Q: Hey guys, what your opinion of CSS naming convention methodologies such as BEM? 35:04 - Q: I would like to refer to the question from ep 140 about fronted development possibly dying. I don’t feel satisfied with the answer, so maybe I could state the question differently: With the machine learning being developed rapidly in recent years, will the web change, causing reduction of front-end jobs? Maybe we will just be training smart algorithms and developing them instead? What do you think? 40:32 - Q: 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? Links FeathersJS Syntax 020: Fitness, Nutrition, and Losing Weight Syntax 084: Fitness for Developers Syntax 164: A Story About Kanye West and Learning to Code Syntax 140: Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More! FireBase Slack Dropbox Backblaze FireFox developer edition Brave Wix Squarespace How you can train an AI to convert your design mockups into HTML and CSS How AI And Machine Learning Are Transforming Front-End Development? ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze Sense Wes: Arthur on CBC kids Shameless Plugs Wes: CSS Grid Course Scott: Gatsby Ecommerce Course, and Dev Tools & Debugging Course 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 Heinä 201955min

In this Hasty Treat, Scott and Wes talk about more of their favorite VSCode tasty treats - extensions, features, keyboard shortcuts and more! 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 for more info. Show Notes 3:45 - Extensions Git Blame Apollo GraphQL VS Code Spell Checker 9:36 - Features Indent lines in explorer - Workbench > Tree Indent & Guides Breadcrumbs Commit all & visual git commands Change branch in lower left Rename Symbol Links Syntax 161: Hasty Treat - VSCode Extensions & Themes Alfred Playlist.js 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

29 Heinä 201918min

In this episode of Syntax, Scott and Wes talk with Harry Dry about the crazy story behind his Kanye West dating site, how he taught himself to code, and how to come up with cool side projects! 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 and using the coupon code “tastytreat”. 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. Show Notes 2:30 - How did you get into web dev and come up with the idea for the Kanye West dating website? 10:29 - Do you have a background in design? 13:05 - What’s your story? 15:28 - Do you wear yeezys? 36:26 - What made you decide to take this story and make a bit site out of it? What was the plan? 40:45 - How did you learn to code? How did you decide what to learn next? 45:30 - How do you push through hard problems? 48:50 - Any final advice to offer? Links The Kanye Story TheNetNinja @rogerfederer Refactoring UI @GonzoVice Dang That’s Delicious Puck @joerogan Code Academy ChatKit by Pusher @grantimahara Mythbusters @elonmusk Marketing Examples @goodmarketinghq @harrydry ××× SIIIIICK ××× PIIIICKS ××× Scott: BattleBots Wes: Logitech MX Master 2S Wireless Mouse Harry: Twitter Demetricator Harry: CAMP LIFE: BIG JOHN FURY GIVES TOUR OF VINTAGE CARAVAN Shameless Plugs Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: Dev Tools and Debugging and Gatsby and E-commerce 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

24 Heinä 201957min

In this Hasty Treat, Scott and Wes talk about all of their favorite web dev resources — a full episode of sick picks! 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. Show Notes 2:03 - Twitter Accounts Scott: HeyDesigner Wes: Mathias Bynens 5:00 - Web Dev Resources Scott: Scotch.io Wes: Webgems.io 7:37 - Design Resources Scott: UI Movement Wes: Creative Market 11:36 - Desktop Tools Scott: Pock Wes: MongoDB Compass 14:59 - YouTube Scott: JSConf stance Wes: Andrew Camarata dotconferences Links Studio3t 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

22 Heinä 201921min