Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general. 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:50 - CCS Preprocessor parable 6:09 - Efficiency 10:40 - When to learn new systems 13:03 - Common pain points 14:42 - Pushing yourself to foster growth 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 Jun 201925min

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG! 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. Show Notes 6:05 - What are SVGs? It’s an image you can edit 16:17 - Icon fonts Better tools Fails in certain areas SVG sprite icons Grunticon 24:24 - SVG files / Build tools SVGO / SVGOMG 31:50 - Where to find SVGs Noun project Exporting from Sketch/Illustrator/Figma Freepik Iconmoon 33:48 - What is the viewbox? 40:39 - Animating SVG 43:41 - Accessibility & text with SVG 45:44 - Graphing with SVG D3.js 47:58 - Filters Links Font Awesome Grunticon Grunt gulp.js React Vue.js Sketch Illustrator Figma imagemin gulp-imagemin Gatsby.js gatsby-plugin-sharp jakearchibald/svgomg Noun Project Freepik Icomoon GreenSock Snap.svg SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner Codrops D3.js ××× SIIIIICK ××× PIIIICKS ××× Sara: Netlify Wes: Wise Contact Sensors Shameless Plugs Sara’s Website & Workshop Dates 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 Sara’s Twitter

19 Jun 20191h 1min

In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more! Log Rocket - 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 5:48 - Intl.NumberFormat 9:17 - Intl.ListFormat 12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat 14:27 - Intl.PluralRules Links Standard built-in objects Language Subtag Registry 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

17 Jun 201918min

In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible. 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/syntaxfor more info. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:41 - Tools CLDD - console.log driven development How To Pause Your Code With Breakpoints In Chrome DevTools Other types of break points XHR DOM break on attribute change DOM break on children Conditional break Break on exception Break on event listener 21:49 - Network requests Doesn’t take place in your site/dom, so might not always have all info in your console, debugger Network tab in dev tools shows you all requests going in and out of your app Filters by type, sees length in request Sees headers, responses and more Failed requests will be red 26:50 - Debugging mindset Check different browsers Check the docs/examples Isolate when possible “What has changed?” Get minimal working code Rubber Duck Debug Step back and re-think Links Debugging Visual Studio Code (Node) - James Q Quick CodePen Spencer Carli’s Youtube ××× SIIIIICK ××× PIIIICKS ××× Wes: DeWALT Lawn Mower Scott: Cold Brew Coffee Maker Shameless Plugs Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off! Level 2 React Native with GraphQL 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 Jun 201948min

In this Hasty Treat, Scott and Wes discuss the Javascript standard library proposal — what it is, how it could influence dev, and what they’d like to see. 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 1:38 - What is a Standard Lib? Still experimental Built-in modules don’t have to be downloaded because they ship with the browser Not exposing built-in modules globally has a lot of advantages: They won’t add any overhead to starting up a new JavaScript runtime context (e.g. a new tab, worker, or service worker) They won’t consume any memory or CPU unless they’re actually imported They don’t run the risk of naming collisions with other variables defined in your code 6:47 - Key Value Storage is the first one: KV Storage: the Web’s First Built-in Module 8:36 - What do we want to see? Deep clone Basically all of Lodash util.isDeepScrictEqual Async json.parse() / json.stringify UUID URL Lib for building and parsing URLs Missing Array Methods Most of underscore JS 15:53 - International Currency Formatting Lists DateTimeFormat RelativeTimeFormat Links JavaScript Standard Library Proposal Add remaining Underscore / Lodash features JavaScript standard library contents 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

10 Jun 201918min

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 Jun 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 Jun 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 Mai 201949min