2021 Predictions

In this episode of Syntax, Scott and Wes talk with Jason Lengstorf from the Gatsby team about Gatsby themes, and the future of Gatsby in general. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbook and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:18 - Jason Lengstorf - What do you do? 9:37 - Gatsby refresher Gatsby is statically generated gatsby-config.js file determines which plugins you use gatsby-node.js allows us to hook into Gatsby at different points and do things like source content and dynamically create pages gatsby-browser.js contains code that should hook into browser events 13:54 - Gatsby themes Layouts in Gatsby are done the same way in React - simply create a component with children How is this different than a plugin? Is it a collection of plugins? How do you share themes? Can they include functionality (plugins?) Like Markdown rendering? What about a theme that needs a UI once activated? What about custom fields for Gatsby? Do you foresee a marketplace like WordPress themes? Are there some themes already out there? What will come for themes soon? 34:07 - Questions about Gatsby What do you think about WordPress? E-commerce? How do you make money? Suggested way of doing dynamic things What is the future of Gatsby? Links Gatsby Jason Lengstorf Livestream Progressive Disclosure of Complexity Gatsby Themes Sanity Gatsby + Sanity.io Snipcart Axios Algolia Netlify Airtable Hope in Source - Henry Zhiu ××× SIIIIICK ××× PIIIICKS ××× Jason: Kamado Joe Grill Scott: Zojirushi Hybrid Water Boiler and Warmer Wes: Waterproof Digital Instant Read Meat Thermometer Shameless Plugs Jason’s Weekly Live stream Scott’s Courses Wes’ 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

5 Juni 201957min

In this Hasty Treat, Scott and Wes talk about how to give a killer workshop, as well as benefits and best practices! 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 3:00 - Types of workshops Public Private 4:29 - Choosing a topic Create original content Create custom content for companies 5:55 - Building content Choose seven to eight different little things ES6 Progressive web apps Build a single application throughout the day, introducing a new feature or two at a time and then implementing it into your own application Gatsby website React Beer application React Notes Application Process: Build the app Rewind back to starter files Build it again while writing notes Follow your own notes to see if it makes sense 13:25 - General information How long should it be? Fixed price vs split cost How many people? 16:46 - Other Tips: Break away from your app and show other apps using - gives better context Stop often and ask if anyone needs help Give large breaks Give challenges for those who need more to do 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

3 Juni 201923min

It’s another Potluck! In this episode, Scott and Wes answer your questions about CSS, Angular, Svelte, dev job preparation 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”. 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. Get an awesome supercharged free developer plan on Sanity. Show Notes 3:23 - Q: 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 frontend of my site, but the list of items won’t be updated very often. What is the most efficient way to store these items and deliver them to the browser? Would you use state, a JSON object, a MongoDB document or some other way I haven’t thought of? 7:17 - Q: How much do I need to know before I start applying for dev jobs? 9:26 - Q: Do you folks have any opinions on Skeleton loaders, and any thoughts on how best to implement them? At my day job we’ve recently implemented skeleton loaders in a way that inherits the parent styles. Would love to know if there’s any best practices for this or ways we can improve our setup. 13:01 - Q: Do you think we still need to use CSS resets like normalize and sanitizer? 14:56 - Q: Scott, can you tell the story of how you landed an interview for a job in Japan? I am moving to Japan next year and wondering how that opportunity arose for you. 20:04 - Q: Do you guys have an opinion on angular good or bad? Or is it that you’re more comfortable and have used React and Vue more often, so they’re largely at the center of any framework discussions? 22:54 - Q: Could you talk about naming and structuring files/folders in your applications? How do you name components and folders? Do you follow some sort of path of how to structure files in a web app? 29:01 - Q: Do you think that Node is almost too powerful to handle some of the simpler tasks (a site that just needs a contact form for instance), or am I just missing some very simple configuration? It seems like other languages, such as PHP, might be better suited for some of these simple tasks and Node is really just meant for larger scale application? I guess what my question really boils down to is, for a freelancer, I understand that I need to have my hands in a lot of different tech stacks, but should I really dive in on PHP (or something else) to handle some of these simpler features a client might need? 33:24 - Q: What do you guys think about Svelte? Before everything goes WASM will Svelte be the future of web programming? 37:24 - Q: What smart phones and laptops do you use for work? (specific model and why) 42:38 - Q: Should I apply for other jobs even if my contract might get renewed? Should I feel loyal to a company? ××× SIIIIICK ××× PIIIICKS ××× Scott: DaVinci Resolve 16 Wes: Affinity Photo Shameless Plugs Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. Scott: Scott’s Crouses 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 Maj 201949min

In this Hasty Treat, Scott and Wes talk about how to identify and work on your weaknesses. 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:45 - Why care about weaknesses? If we avoid the things we’re afraid of or bad at we’ll always grow in lopsided ways 7:32 - As a developer What skills / languages are you not good at or afraid of? 14:06 - As an employee Communication Company and personal goals Efficiency Compatibility 16:54 - As a human How you treat people Sharing your time What you’re neglecting Your living space 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

27 Maj 201922min

In this episode Wes and Scott talk about the cool parts of CSS! From filters to variables, here are some cool (and amazing) things you can do with CSS in 2019. 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 2:28 - Clip path 6:35 - Filters 16:24 - Background mix blend mode 21:47 - Border images 25:46 - Multiple background images 27:47 - Multiple background gradients 28:25 - Radial gradients 29:06 - Multiple box-shadows 34:30 - HEX + Alpha 40:41 - Viewport units 42:17 - Calc 44:32 - CSS variables 47:44 - Text decoration Links Can I use Clippy - CSS clip generator CSS Filters Tweet: Using mix-blend-mode:multiply CSS blend mode generator Lea Verou Codepen - Scott’s digital text animations Steve Schoger Mother-effing HSL Diana Adrianne ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar string lights Wes: Digital Calipers Shameless Plugs Wes: Wes’ Courses — use coupon code “syntax” at checkout and get and extra $10 off. Scott: Animating React 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 Maj 201958min

In this Hasty Treat, Scott and Wes are back with another AMA. This time they talk about their spouses, careers outside of tech, lots of favorites (movies, colors, clothes), and more! Clubhouse - Sponsor 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. Check out https://clubhouse.io/syntaxpodcast and get your first two months free. Show Notes 2:58 - What do your wives do? 6:40 - If you had to choose a different career, what would you do? If you started learning another (programming) language today, what would it be? 11:50 - Favorites (e.g. colors, movies, brands, etc.) 18:08 - Who inspires you? 26:19 - What’s your ratio of client work, learning new tech, and teaching via your courses, talks or Syntax.fm? You guys seem awfully busy, and it’s making me feel kinda lazy. Links Pigeonhole Live 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

20 Maj 201929min

In this episode of Syntax, Scott and Wes talk all about side hustles with special guest Courtland Allen, from Indie Hackers! They talk about the story behind Indie Hackers, how to start your own side hustle, where to find ideas, listener questions, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:05 - What’s the back story behind Indie Hackers? 5:30 - What is a side hustle? 11:21 - How do you validate your idea? 13:15 - What are some different types of side hustles? 31:55 - What about people who don’t like marketing? 33:57 - What are some important pieces of side hustles? 39:04 - How do you sell a business? 42:40 - Listener Questions: Q: How do you stop the side hustle from affecting your main job in regards to things like overtime, sleep and commitment? Q: Should you frame yourself as a one-man-band or as a company? Q: Have you heard stories of people living in cheap places, making bank? Are there any white whales you have been chasing to interview? Links Carrd Balsamiq Mockups Flickity Nomad List Evan You Evan You Patreon Park.io Making $125,000 a Month as a Solo Founder with Mike Carson of Park.io Patreon Drift Stripe ××× SIIIIICK ××× PIIIICKS ××× Courtland: Post-it Notes and Poor Charlie’s Almanack: The Wit and Wisdom of Charles T. Munger Scott: Akimbo Wes: Elastic Wallet Shameless Plugs Courtland: IndieHackers Podcast Scott: Animating React Wes: CSS Grid 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

15 Maj 201957min

In this Hasty Treat, Scott and Wes talk about Shadow Doms - what they are, the individual pieces involved with them, why they’re important, and how to get started using them. 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:41 What is the shadow DOM? 4:25 What elements are shadow DOM? 5:47 Styling shadow DOM elements 8:54 Creating your own 9:22 Frameworks Links Using shadow DOM Shadow DOM v1: Self-Contained Web Components Polymer Svelte 3 Wildhoney - ReactShadow 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

13 Maj 201914min