Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about React Suspense — what it is, how it works, support 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”. Show Notes Not live yet - it may/will change. Be warned! 3:59 - The problem we have with React right now API calls Image loading Code splitting 7:16 - What is React Suspense? First we convert our async data fetching functions into resources Resources can then be read inside render - above the return Resources can be read from cache Resources can be preloaded into a cache if you anticipate needing them Resources reads are blocking for that function - you can’t return JSX until the resource is read In your component that fetches data, there is no need to maintain a loading state Then, anywhere higher up in that tree, you can introduce a suspense component The suspense component can detect if any of it’s children are currently loading data If they are, we can then choose to show a loader via the fallback prop We can also choose to show nothing via the maxDelay prop — this is helpful for fast connections that shouldn’t see the spinner for a short split-second 15:20 - Support React.lazy and suspense for code splitting is already here The React.lazy function lets you render a dynamic import as a regular component Loadable Components is recommended if you need splitting with SSR Data Resources is not here yet Links React 16.x Roadmap 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

18 Mar 201921min

In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 3:59 - Our experiences Scott: Went to college - Go Blue! Worked odd jobs while self teaching Was mentored and taught more while working at my first job Self directed since then Started teaching via LUT in 2012 Wes: Went to university for Business Tech - entirely self-taught Led and created part-time HTML + CSS program at HackerYou Led and created first bootcamp at HackerYou Led and created first JS part-time at HackerYou Been offered jobs at colleges + universities 10:02 - School - $$$ Pros The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding Co-ops can help you find what you like and what you don’t like Life skills that involve you being on your own and figuring things out more You are exposed to interesting people and ideas CS Degree work can open more career doors Professional networking Many companies wont hire you without some sort of bachelor’s degree (this might change) Cons Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying Potentially outdated staff and course material Wes was often asked to lead a video editing course, print design course and a web development course Lot’s of distractions 23:10 - Bootcamp - $$ Pros Very fast, lots of info, but can be a bit overwhelming You can get up-to-speed extremely quickly Focused on hire-ability and job-ready skills Focused information Personality is really the deciding factor here - lots of people do well, and some don’t Cons Hit or miss — quality of bootcamps aren’t vetted, so do your research Talk to someone who took it, find out who the instructors are You absolutely must continue learning after the bootcamp The bootcamp is just a push and you are expected to continue learning once you are done Not great for individuals that can’t handle the pace You have to quit your job 37:09 - Self-Taught - $ Pros Self-directed people will prevail here Can be drip-fed while earning money at another job Can be supplemented by a job (e.g. you are front-end and want to go full stack) Can get real world experience as a freelancer while you evolve Cons Not for everyone Can be difficult to self-motivate Hard to get help - sometimes you can be stuck for hours on a two-second fix Potentially discouraging You might go down the wrong path without guidance on what you should learn 47:11 - Part Time Programs - $ Pros Fantastic way to get up to speed with a new tech Goes at a good pace - twice a week usually Offered on weekends and evenings where you can maintain a regular job Very low risk - you can try it out Cons Might not be as fast as you like it Quality is all over the map 49:55 - Mentored Self Learning - $ Pros Best to do with a mentor on the job Mentor can help steer what to learn in your free time Good feedback and a place to ask lots of questions Cons Can’t be done without someone willing to mentor you Only as good as your mentor 52:55 - What approach would we take? Bootcamp > then immediately supplement with courses Links Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Digital Minimalism by Cal Newport Wes: American Kingpin Shameless Plugs Scott’s React Hooks For Everyone Wes’ All Courses 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 Mar 20191h 1min

In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools 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”. Show Notes 3:59 - Why it’s important Projects can live or die by the team’s communication Project timelines can be disrupted leading to big problems with scheduling 5:53 - How to improve communication skills PRACTICE Pay attention to what works Have a system – standups, weekly meetings, etc. Over communicating can be annoying but effective Realize that people can’t read your mind, so having your intentions and timelines public and known is important 9:12 - Building good habits Need to practice Build systems to support new habits 11:04 - Tools we use to communicate Email / Standups Notion GitHub Issues Slack Missive Links Syntax 075: Hasty Treat - Feedback and Criticism 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

11 Mar 201916min

It’s another potluck episode in which Wes and Scott answer your questions! This month - are classes dead?, tutorials vs real life, the smart home, developers and mental health, and more! 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. 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:30 Q: What advice would you give to someone wanting to get involved with the open source community, coming from closed-source full-time work? How do people make time to code on the side and balance a life/family? 5:38 Q: In Syntax 060, you mentioned making your life easier as a motivation. How do you get your data from sites that may not have an API? Web scraping? Any tools you’d recommend? 11:34 Q: Do you think React aims toward a world with functional components only or will class based components always play a role? 17:10 Q: Just feedback on the recent Smart Home podcast…I really enjoyed it! I have about 48 (color) HUE lights throughout my home, and use an IFTTT applet for my Ring PRO doorbell, so when someone rings the doorbell, all the lights in the home blink (e.g. so I can see when an Amazon Prime package arrives, or know someone is at the front door, etc…while I’m working and wearing my Bose QC35II’s, and of course listening to your podcast)! I’m a huge fan of the podcast since early last summer (I rarely comment, but you guys are great)! 21:37 Q: What would you do in the event your clients sends you a “thank you” card along with cash that is MUCH lower than you are preparing to invoice them? Would you remove it from the invoice, ask them what they would prefer, etc? I’m stuck in an awkward situation and it doesn’t even cover the hosting costs. 24:39 Q: I’ve heard a lot of good things about Next.js, but what exactly is it? How does it compare to just using the create-react-app? Is it worth it to migrate a small side project that I have to Next.js? 28:26 Q: I take tutorials all the time for web dev. I have taken many of both of your courses. Thank you, they are great! I am completely self taught and have zero computer science education whatsoever. As well as your courses and other tutorials have taught me various languages and libraries, they do not prepare me for real work interviews or jobs. No offense. How do I make the jump from tutorials to real life? 34:39 Q: Do you have exercises to warm up your brain before you start coding? I always find it a bit difficult to jump straight into a project. I would never start working out before warming up and I feel that’s also true about development! 36:42 Q: How should developers deal with depression and mental health? Links Sentry Freshbooks Syntax 060: The Undocumented Wed Syntax 118: The Smart Home IFTTT Hue/Ring applet Syntax 120: Gatsby vs Next Next.js ××× SIIIIICK ××× PIIIICKS ××× Scott: Clarity Money Wes: Wyze Camera Shameless Plugs Scott’s React Hooks For Everyone 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

6 Mar 201945min

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens 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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. Show Notes 4:20 - How should we track users? Token based - generally stored in the client Session based - stored on the server Token Based (JWT) 6:00 - Token-based auth Stateless - the server does not maintain a list of logged in users Scalable - you can use serverless functions easily Cross domain Data can be stored in JWT Easy to use on non-web sites like mobile apps Hard to expire tokens — you must maintain a list of blacklisted tokens 7:48 - Session-based auth Stateful - generally you maintain a list of session IDs Passive - once signed in, no need to send token again Easy to destroy sessions 10:48 - How do we identify the user on each request? localStorage or Cookies? A common misconception is that localStorage is for tokens while cookies is for sessions With localStorage, we need to grab the token and send them along on each request With cookies, the data is sent along on each request 11:25 - Security Issues XSS for Tokens - make sure bad actors can’t run code on your site Sanitize inputs XSRF - CSRF tokens are needed Links Cookies vs Tokens: The Definitive Guide 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

4 Mar 201916min

In this episode, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work. 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. 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 5:00 - Todos GTD philosophy Todoist Things 12:31 - Focusing Focus app Turn off all notifications on iOS and desktop Rename apps Ask yourself why you feel the way you do Should be doing email? Do I need to eat that frog? Why do I not enjoy this? Sticky note on screen or desk 21:27 - How we track ideas, thoughts, and notes Get everything out of your head Markdown files Evernote Notion 27:23 - Calendar and schedule Google calendar USB light switch 33:30 - Goal tracking / Life progression Keep concepts and ideas in Notion Milestones (bigger ideas) are separated Use the system that works best for you 36:58 - Fun things with Notion What is Notion? Cross-linking/referencing between boards Episode calendar and possible episodes kanban Links Freshbooks Sentry Todoist Things Getting Things Done: The Art of Stress-Free Productivity Focus Notion Evernote Bryant Electric USB light switch Bear app Airtable ××× SIIIIICK ××× PIIIICKS ××× Scott: LG Ultrawide Monitor Wes: LG 4k 32" Monitor Shameless Plugs Scott’s React Hooks For Everyone Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter

27 Feb 201954min

In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube! 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 1:55 How YouTube has affected our careers 3:45 YouTube money is just OK 6:28 SEO is king 7:15 The title is most important 8:59 Description is important 11:00 Use Tags. All of them. 12:00 Scheduled content works 13:26 Keeping Viewers 15:20 Pinning comments 15:41 Liking Comments 17:00 Practice Finishing Sentences 17:34 Collaborate when you can 19:00 Use all the features YouTube has to offer 20:44 Don’t get sucked into the BS Links TubeBuddy 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

25 Feb 201923min

In this episode, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, 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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 5:07 - Server Side Rendering Next.js will render on demand — this allows you to have server rendered pages on demand. Think of a blog website — publish a new blog post and it will immediately start working. Authenticated pages can be server rendered, and thus, pre-loaded for better performance. Gatsby runs at build time only — so you need to have all of your data ready at build time. Pro: This makes for very fast page load. Con: Large websites can take a long time to build. Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR. Ease of SSR: Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component. This will probably get easier with Suspense. Demos are simple, but any real application requires harder config. Gatsby is Easy Peeezy! 11:09 - Data Next.js is unopinionated. Like React, it doesn’t care where your data comes from. getInitalProps(); Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL. 22:50 - Routing and Creating Pages Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a ?query=string. There are several third-party options for getting around this that require a node server. Gatsby allows you to programmatically create pages with their createPage API. For both navigating between pages, they make a Link Component available. 30:49 - Plugins In Gatsby, everything goes through the Gatsby pipeline. This makes things like image compression, pagination, sass, service workers and many other progressive web app pieces very easy. Gatsby makes building a really good website easy. Gatsby Image is SOOOOO amazing. The scope of Next.js is much smaller. They give you a few things, but you generally bring your own approach for most things Routing Linking and prefetching Dynamic Importing 38:42 - Deploying and Hosting Gatsby is just HTML, CSS, and JS at the end of the day, so it can be deployed almost anywhere — Netlify, Github Pages, cheap PHP hosting, etc. Next.js is a Node app. It can be integrated into an existing Express app, or run by itself. Requires a Node server to run it. Next.js has a static generation option, but you’re better off using Gatsby for that. 44:41 - The verdict? Us Next.js for Apps, Gatsby for Websites Links LogRocket The Armoury Next.js Gatsby Netlify Node Express ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion LED Lights Wes: The Dream Podcast Shameless Plugs Scott’s Pro Gatsby 2 Course Wes’ Courses 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 Feb 201952min