DiscoverSyntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats
Claim Ownership

Syntax - Tasty Web Development Treats

Author: Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Subscribed: 10,648Played: 393,496
Share

Description

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
255 Episodes
Reverse
In this episode of Syntax, Scott and Wes talk about headless content management systems — why you might want to use one, things you should take into account, 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. 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 02:38 - What and why A headless CMS doesn’t mean you have to use a static site generator A headless CMS has an API: REST GraphQL GROQ A headless CMS can pipe its content into: Static Site on build - like Gatsby An app on run/refresh An existing website - widget What makes a CMS? Do you need a UI? What is the threshold? Is a hotdog a sandwich? Things to think about when choosing an API Auth - Rules + roles + levels How easy is it to create new data types? Is it code or UI? Can my mom use it? Can you create one-off content types? (e.g. settings pages) Custom workflows dRafts, revisions, roll backs How are images handled? Do you need another service for that? Pre-determined UI Is custom UI possible? Two-way relationships? Tags? Data validation? UI + API? Hosting? Pricing? Content movability? Can you get your data out? Schemas Users Revisions CORS or realtime API? APIs Can you insert data via the API? (or just pull) Node API Importing data 24:37 - Hosted Sanity Prismic Contentful Dato CMS Storyblok 8Base Agility CMS Seems to be making a big corporate play 36:59 - Self-Hosted WordPress WordPress REST API GraphQL API WP GraphQL Advanced Custom Fields for custom UI Most things in WordPress are custom post types and taxonomies, so data from plugins can often be surfaced The theme UI from plugins is often lost Drupal contentacms.org Craft CMS Ghost Strapi Keystone Joomla (JK!) 44:33 - API (BYOUI) Hasura Prisma Firebase 47:37 - Git Based Netlify Forestry 50:30 - Other Google Sheets Sheety Airtable Tina CMS Not a CMS Markdown under the hood Notion Links https://twitter.com/wesbos/status/1254772936935739393 Pixel & Tonic GraphCool GraphCMS Sapper ××× SIIIIICK ××× PIIIICKS ××× Scott: DEWALT Random Orbit Sander Wes: Shelf Brackets Shameless Plugs Scott: New course on Sapper - Sign up for the year and save 25%! Wes: Wes’ YouTube Channel 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
In this Hasty Treat, Scott and Wes talk about how to develop for slow internet connections. 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 02:26 - Types of Slow connections Slow upload Slow download This could be that your kids are watching a show and your partner is on a zoom call High latency Intermittent 07:47 - Loading UI Show loading UI for everything, but after X seconds Page transitions on SPAs Form switches - enter country, get list of provinces/shipping/whatever 11:58 - Account for XHR failures Sometimes I’m in a loading state forever State machines will account for this 13:26 - “Still working” timeouts Some sort of timeout so the user can get feedback Links Sentry Sapper Backblaze 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
It’s another potluck! In this episode, Scott and Wes answer your questions about kids learning to code, React sub-components, why it’s so hard to scale, new frameworks, data structures, 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. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 03:11 - Q: Do you think Selenium could get replaced by Cypress in the future? 16:16 - Q: When blogging about code, you need a good way to display snippets of code in your blog post. What are good ways to do that? Should you embed something like a GitHub Gist, or setup something specific for your blog? 11:13 - Q: Do my students NEED to understand recursion to be effective JS devs? 15:41 - Q: What do you think about developing using just an iPad + keyboard + external monitor? To try this, I just moved all my environment to a VM on the cloud and configured code-server (a VSCode accessed by the web https://github.com/cdr/code-server). Works pretty well! The only problem now is that the iPad has a bad resolution on the external monitor when I’m using the browser. 22:43 - Q: I often find myself refactoring sub-components out of a component once it gets too big. This however is very tedious, especially if the sub-component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow bigger in a case like that? 26:15 - Q: [Insert Hoser related greeting here], during quarantine I’ve tried to come up with an outline for creating a goofy Pokémon app with my boys (age 8 and 5). They’re obsessed with Pokémon right now and I figure this could be a fun little group activity. I see how much they struggle focusing on some of the online instruction they have through school, and they’re a bit fatigued with “learning” right now. We tried doing a bit of scratch/scratch jr. I figured a fun-themed project could help them stay engaged with learning, but I’m struggling with where to start. How would you go about creating a course/activities (like Wes’ Javascript 30 course) specifically designed for primary/elementary aged kids? 30:52 - Q: How much should someone who wants to work as a web developer (starting in a junior position) know about data structures and algorithms? Should I practice algorithms and do questions before applying for jobs? 33:53 - Q: I’m working with a friend to start up a website for our YouTube channel, and we’re getting into podcasts too (not tech-related so no competition, no worries). I’m thinking about trying to host my own RSS feed for podcasts to save some bucks. Am I crazy? 36:27 - Q: Do you guys name your colors in terms of the color or the use of the color. For example, say you styled all your links to be purple. Would you name that color “purple” or “link”? 41:00 - Q: I’ve been listening to you for about a month and really dig it. I’m working on an app that will require a couple of different databases. I’ll need a database for user information, and a larger database for application data. The app does some analytics stuff, so data is critical. I’m getting lost in the world of hosted database options (mLab, Digital Ocean, etc.) and big cloud providers (AWS, Google, etc.). Could you guys talk a little bit about how you choose database hosting? Bonus question - have you ever used Auth0 or Okta for user authentication? 45:09 - Q: I’m a bit confused about using GitHub. What happens to the files that are ignored, but required for development? What’s the best practice for backing up both? I have used .env files, but not too sure how it works if it’s in the gitignore and the site is deployed via GitHub (like with Netlify). Right now I have a backup folder on my hard drive and I back up both the dev and the live versions with a timestamp, whenever I do a new ‘release’. Also, you spoke about Jetpack, and I’d be curious what’s the best way to do this with a cronjob for example. 48:50 - Q: I was laid off in early April because of COVID-19. I’ve been trying to file unemployment since then. The state unemployment office said they were launching an updated website for filing claims on Friday, April 24th. At 9:00am that day, they ran a banner saying demand has been so high that it’s affecting the process ‘despite rigorous testing.’ Why is this so hard to scale? 55:57 - Q: What is your take on all of these rails-like server side rendered React and GraphQL frameworks? Here is another one built by Michael Jackson, Ryan Florence and some others: https://twitter.com/remix_run. This of course is in addition to Redwood and Blitz. Links Prism VS Code gatsby-remark-vscode CodeSandbox vscode-textmate System76 Linux Laptop JS Refactor ScratchJr Javascript30 GraphiQL Pokedex AWS Auth0 Okta mLab Jetpack Backup Remix Redis Redwood Blitz Next.js Encarta ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO battery-powered lawn gear Wes: AmazonBasics Notebook Laptop Stand Arm Mount Tray Shameless Plugs Scott: Level Up Tutorials Pro - 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
In this Hasty Treat, Scott and Wes talk about IE11 — should you support it, what to be aware of if you do, and what data is important in making that decision. 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 03:21 - When was IE11 made? 03:48 - When is it deprecated? 04:44 - How to make the decision? Look at your analytics Look at your users Is a 2% drop in sales worth it? 09:00 - What doesn’t IE11 have? What can you start using now that IE11 is gone? Modern Flexbox CSS Grid CSS Variables 10:26 - Can you partially support it? Major features Progressive enhancement Gracefully degrade Polyfill 11:16 - What about testing? Links wesbos.com VirtualBox modern.ie IE11 Surface Book 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
In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, 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. Stackbit - Sponsor Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com Show Notes 03:14 - General premise Sapper compiles away, removing framework code from build Component & Props based Easy reactivity Built-in tools like animation Template-based 07:57 - Svelte 101 .svelte files Files can include
In this Hasty Treat, Scott and Wes talk about Scott’s new website! 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 02:25 - Relaxed fit development Not concerned with it being perfect Will act as a loose digital garden, so it needs to be flexible Keep my talks and podcast appearances somewhere 04:40 - The stack Svelte / Sapper CSS variables Static generation with markdown No API Hosted on Netlify 08:15 - Why? I dropped that db life in 2015 and never looked back I’m a developer - markdown is good for me I like a playground for ideas, so the new site throws out any idea of formality and dives into being a playground for myself. Full page animations. Orchestration. Fully SSG. Code is painless to add to — adding a blog post is as easy as creating a markdown file Links ScottTolinski.com Svelte Sapper Maggie Appleton Shawn Swyx 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
What's New in Javascript

What's New in Javascript

2020-05-1348:082

In this episode of Syntax, Scott and Wes talk about what is new in Javascript — a whole bunch of new stuff that you can use now and in the next sixth months or so. 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 ES2019 04:03 - Array.flatMap() 05:30 - Array.flat() 07:37 - Array.fromEntries() 09:50 - String.trimStart() and String.trimEnd() 11:23 - Function.toString() 11:57 - Object Key Order Integer keys in ascending order (and strings like “1” that parse as ints) String keys, in insertion order (ES2015 guarantees this and all browsers comply) Symbol names, in insertion order (ES2015 guarantees this and all browsers comply) ES2020 14:50 - Big int 18:09 - Nullish coalescing 20:57 - Optional Chaining 24:55 - promise.allSettled 25:33 - Dynamic import 27:14 - string.matchAll(regex) and string.replaceAll 29:30 - globalThis 30:44 - Module Namespace Exports 33:11 - Navigator.share() API 36:34 - Async Hooks 37:39 - Pipline Operator 39:59 - Top Level Await Links https://twitter.com/wesbos/status/1181584047144878080 https://twitter.com/wesbos/status/1238472679893671938 https://twitter.com/wesbos/status/1230515254687301635 Regex101 Regexr https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare Sketch CloudApp Figma https://nodejs.org/api/async_hooks.html Gulp https://v8.dev/features/top-level-await https://github.com/tc39/proposal-pipeline-operator ××× SIIIIICK ××× PIIIICKS ××× Scott: Sapper Wes: Dewalt Oscillating Multitool Shameless Plugs Scott: Level Up Tutorials Pro - 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
In this Hasty Treat, Scott and Wes talk about Wes’ new website - its first update since 2014! 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 05:04 - The stack Gatsby Styled components React MDX 07:04 - The content Blog posts Twitter Hot Tips 09:54 - Styling Styled components Less 16:54 - MDX 17:45 - Serverless functions Links wesbos.com bos.af WordPress ACF Netlify Gatsby React MDX My New Website! Here are the deets Next Operator Mono Mono Lisa Puppeteer gatsby-image Jason Lengstorf gatsby-plugin-prettier-build Cloudinary 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
In this episode of Syntax, Scott and Wes talk with Heather Payne about bootcamps — how to get the most out of them and what to look out for! 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”. Guests Heather Payne Show Notes 07:52 - Bootcamps What do you teach in the bootcamp? How long is it? SHow do you validate and pick topics? What makes a good bootcamp student? Do bootcamps work? How do you get the most out of a bootcamp? 20:45 - Finding a job How do you prepare for an interview? What qualities, outside of technical skill, do you see in developers who get jobs easily out of the bootcamp? Do you see any common traits in the few that don’t get jobs? What about getting a job in the current climate? 43:30 - Other How do income share agreements work? Pay what you can income share agreements How do you tell if a bootcamp is good? Links Heather Payne Juno College WordPress React Council on Integrity in Results Reporting Zoom ××× SIIIIICK ××× PIIIICKS ××× Heather: Whereby Scott: Original Grind Coffee Co. Cold Brew Coffee Maker (1 Gallon) Wes: iStat Menus Shameless Plugs Heather: Juno’s Continuing Education Online Courses Scott: Design Systems In Figma - Sign up for the year and save 25%! Wes: Wes’ New Website - 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
In this Hasty Treat, Scott and Wes talk about javascript events, and how to avoid some common pitfalls! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 02:23 - Event bubbling Some events bubble, some don’t Clicks bubble Mouseevents bubble Focus doesn’t bubble 04:10 - Event capturing Capture: down, bubble up Canceling: prevent default target` vs currentTarget currentTarget is what got clicked target is what you listened for the click on event.isTrusted addEventListener once: true Links Javascript30 BeginnerJavascript 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
It’s another potluck! In this episode, Scott and Wes answer your questions about custom hooks, static site generators, code management, CSS, 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 04:02 - Q: Could you do a quick overview of how to effectively use a platform like Cloudinary? I have a Gatsby site with a lot of images and want to use something like Cloudinary to help with optimization, but the docs aren’t completely clear to me how to get the most out of their service. 10:58 - Q: What kind of CSS pre/post-processor you usually use? What are the pros and cons of pre-processor (SASS, SCSS, LESS) and post-processor (PostCSS)? 16:22 - Q: What is the most effective way to share a project with the internet and get feedback? I’m in a phase right now where I’m building loads of new web things with React and JavaScript, but the only place I can think to share them is my Twitter, where only like 3 people will see them. 18:35 - Q: What are your thoughts on classes in JavaScript? Do we still need them in 2020, or has the functional programming paradigm made them largely unnecessary? Does the answer change based on the size of the project and/or team? 23:56 - Q: Does ES2020 have var? Also, is ES2020 a real spec or just a term people are using? 27:37 - Q: Have you tried gqless, a graphql client alternative to something like Apollo client? Very interesting idea for clean and maintainable code. 29:15 - Q: What are the main differences in working for a software agency and a software product company? Pros and cons of each? 33:53 - Q: Advice for having static blog with minimal moving parts? I used to have a static blog but I eventually got sick of touching it because instead of writing content I often got stuck keeping up with all the dependencies involved. 38:18 - Q: Micro Frontends—is it the solution to rewriting legacy components? 42:16 - Q: I am relatively new to web development and I feel like it is very difficult to “catch up” with JavaScript. It seems like whenever I try to contribute an open source, I can’t figure out the code because they’re using newer (and presumably better) ways of doing things. How can I get up to date with everything that’s going on in the JavaScript world? Also, at what point should I start learning a front-end framework? 46:56 - Q: My team and I are starting to write pretty complicated custom hooks gathering data from a number of different endpoints and/or polling certain endpoints on a continuous interval timer before returning it to the component that needs the data. Since this is the case some hooks have gotten fairly large with multiple functions inside of them getting called to get/manipulate all the data, or multiple hooks using those same functions to get slightly different data. Is it a best practice to keep all those hooks together in one file if they support all the hooks? Or should we break the hooks into separate files and move the helper functions into another file and just have one hook per file? 51:10 - Q: Any tips for navigating projects with bad project managers? Working with non-technical agency project managers makes it pretty difficult to effectively plan and allocate time to ensure that all of the projects are done on time, on budget, and done well. It’s important to me to maintain an optimistic attitude in the organization, but sometimes I’d love to just hit 'em with the 'ol “Peace out” and go smoke some pork butt. Wondering if you guys have any good experience managing these types of projects? 55:45 - Q: I’m committing often and early, but this means that I end up writing the same vague git commit message over and over again. I know the solution to the problem is to just be more verbose, but it’s a difficult habit to break. Any advice? Links imgIX Netlify Sass Less Bootstrap Stylus PostCSS WordPress Reddit StaticGen Gridsom Vue Laravel Hugo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jelle’s Marble Runs Wes: Hyundai HHC2GNK Vertical Style Electric Air Compressor Shameless Plugs Scott: Level Up Tutorials Pro - 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
In this Hasty Treat, Scott and Wes talk about getting buy-in from your team when using new tools. 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 02:53 - Q: "I wrote a long message to our architect asking if I could install prettier into our component generator for new projects moving forward, and the response I got was: “Don’t auto-format, not all devs want that and prettier doesn’t always format the way I like, I don’t want to enforce that on devs.” This sucks because I know the codebase would benefit so much. Right now every time I visit a project so much of the code is not spaced out that it makes it hard to read quickly for me, lots of the React code is bunched up with no spacing - it’s a mess to read for me especially because I am very organized. If this was your situation where you know a new tool/standard is something that can help a lot but it’s shot down, do you just give up? I don’t know how to respond to this because I am the only dev who has ever proposed this at my company and I just started here. 05:03 - Lots to unpack here Some senior devs don’t like getting suggestions from other devs. There is a sense that these things change quickly and I bet there is some anxiety over that at play here. Senior devs know better than to slap new tools into the codebase because they have probably done it and regretted it. What if it broke your code. 08:20 - So what can you do? Ask for their thoughts on a tool instead of suggesting it - it seems you have done this already Show the dev that even though it looks weird, it’s better for readability. Look at existing guidelines and try to match the settings as close as possible (not always an option with prettier). Put together a solid argument for it, written down. Use it in a smaller project. Everyone is against prettier at first, but once they use it, they realize how amazing it is. Can you just Prettier the code yourself and then format it otherwise before you check it in? This depends on if you have existing formats. Links Prettier js-beautify 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
It’s another potluck! In this episode, Scott and Wes answer your questions about mobile first development, ES6 arrow functions, Deno.js, tips for refactoring your code, best e-commerce platforms 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 02:50 - Q: Wondering about your take on mobile first design and implementation? Do you throw the desktop styles or the mobile styles in media queries? Any opinions about that? I’m switching a lot between projects that do it differently, and it really makes my head melt. 08:24 - Q: What is the difference between the ES6 arrow functions and a normal function? When would you use a normal function instead of an arrow function or the other way around? 13:54 - Q: What are your opinions or experiences on developing 360/VR experiences on the web? There are a few frameworks out there for building such experiences, like A-Frame and React 360. I was wondering if you had any experience using such frameworks or building these types of things, and do you think that this could become a big thing for web development in the future? 19:02 - Q: How do you define senior developer? What is the difference between intermediate and senior developers? 21:37 - Q: I was curious knowing your opinions regarding json:api and its consumption in React. Is it still a good pick compared to GraphQL or normal rest/json? 27:30 - Q: What’s your take on Blitz.js and RedwoodJS? Would you use a framework like this to build a large & scalable web app? 30:54 - Q: What do you think of Deno.js reaching version 1.0? Is it really going to be a Node successor, or is that just marketing hype? 34:34 - Q: When you are looking to refactor code, do you have a process you like to follow? 41:35 - Q: Which technology stack would you choose in 2020 for an e-commerce website and why? 46:32 - Q: I’m confused about developing a website for a client. I feel like most, if not all, clients want to take administrative control at the end of the project to be able to handle things themselves. Does this mean the only option for client projects is WordPress? I got really excited about making a client’s site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here? 49:52 - Q: How do I use prop types to check a component when getting the props from context instead of passing them down? 51:51 - Q: Should I use the mongoDB or mongoose node module in my project? What are the differences? 55:48 - Q: Is it a bad practice if I mix up React Bootstrap and Material UI in one React project? Links gqless Prisma The Blitz.js Manifesto (A New Fullstack React Framework) Begin Shopify Snipcart Magento Sanity Gatsby Syntax 157: Hasty Treat - What is a Headless CMS? @dog_rates Wondery - Joe Exotic ××× SIIIIICK ××× PIIIICKS ××× Scott: Jackbox Games - Murder Party Two Wes: Tiger King Shameless Plugs Scott: Custom React Hooks - Currently 50% off! - Use the coupon code ‘Syntax’ for an additional 10% off! 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
In this Hasty Treat, Scott and Wes continue their discussion of website page speed — five more things that make your site slow! 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 03:01 - Shipping too much JS Code splitting Webpack Bundle Analyzer Look at dependencies of libraries Use fewer libraries 06:38 - Not bundling code Build process 08:24 - Not compressing code Google Closure Compiler Gzip via your server serving assets Minify CSS + JS 11:45 - Loading JS asynchronously Where should I put
In this episode of Syntax, Scott and Wes talk about emergency UI when building a website. During an emergency, you need to relay information to your website visitors as quickly and efficiently as possible. How do you do that? What do you need in place on your website? 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 5:40 - Banners and popups Interfere Static Dismissible Cookie/localstorage When that popup is updated, it should show again. Maybe use a hash of the content? Or length? Something that resets itself every time the content is updated. Private client-side-only PWAs are hard 14:35 - Good styling What happens if they add an image? Do they have access to the branded fonts and colors in their WYSIWYG? Can you revoke 100px red Times New Roman? 18:32 - Page alerts Yellow, green, red Alerts on existing pages 21:08 - New pages Is there a good template for new pages? Can they easily set the slug? whatever.com/covid19 Can they add it to the nav? 23:52 - Google’s “Hours of Operation” Is that easy to change? Meta tags: https://schema.org/OpeningHoursSpecification 25:43 - Other Own your audience! Email newsletter ready to rock Online pickup? Basic scheduling software https://www.cityhive.net/ https://snipcart.com/ Live streaming - have a YouTube account ready to go, even if empty 34:38 - Deployment Detail how to deploy everything It might have been years and the CSS will only compile on Node 6 and Gulp 3 Do any caches need clearing? Does the CSS need to be cache busted? Links 1Password Cloudflare ××× SIIIIICK ××× PIIIICKS ××× Scott: Mellow Groovy Sounds YouTube Channel Mellow Grovvy AOR / West Coast Mix #4 Wes: Used projectors are cheap and can be a great deal Shameless Plugs Scott: All Courses - 50% everything! 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
In this Hasty Treat, Scott and Wes talk about five things that could potentially be making your website slow. 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 3:00 - TTFB Slow DNS lookup Server on the other side of the world Slow server processing Network speed back to the browser 6:21 - Requests Too many requests Too large Waterfalling your requests 9:44 - Assets are too large Images are the biggest bloat in a site Compress and optimize via build tool or ImageOptim Make smaller Picture fill for mobile 14:48 - Lazy loading lazy=“true” Intersection observer Preload slider images two ahead 18:03 - Not using a CDN What is a CDN? Cloudflare is free, others are very cheap - we used Cloudfront Netlify is free and comes with a CDN Links WordPress Webpack Gulp gatsby-image Cloudinary Cloudflare Cloudfront Netlify 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
In this episode of Syntax, Scott and Wes talk about working from home. How do we do our best in these unprecedented times? Here are our tips for working from home and staying productive and sane! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 2:39 - Your space You need a table Card table or dining room table Keyboard + monitor Don’t work from your bed or couch Headphones can get you in the zone (noise-canceling ftw) 16:36 - Routine Shower, shave, makeup Clear start and stop times - even if that means it’s 5am to 11am because you are splitting Taking breaks is important 25:24 - Focus TODO list - write a list of what you hope to do at the start of the day, check things off, feel good about yourself Eat That Frog - for the 100th time Don’t watch or check the news during work hours Block the terms related to the pandemic or politics on social media - you don’t need that info there DOOM Scrolling 30:11 - Self care Video games or relaxing things post work Exercise Kettlebells, spin bike, bodyweight workouts Stronger by Science has a great episode about this - https://www.strongerbyscience.com/podcast-episode-38/ Zoom Happy Hours Don’t overly rely on substances to get you through Get your VD (vitamin D) Don’t stress out yourself at night - don’t look up news before bed 43:20 - Managing kids and sharing time with your partner First of all, props to you all - this is really hard, mentally and physically This will vary greatly depending on your SO’s job, number and age of kids Our SOs have work and jobs of their own Watching young kids is hard work Give each other 30 min brakes Kids need routine - put something in place Some times Uncle Mickey needs to take over, and that’s ok Communication is key Schedule Examples: 6-12 and 12-6 4 hours each 2 hour trade off Focus time (calls, deep work) and half-focus time (emails, etc.) Have empathy with everyone: co-workers, SO, kids Check in on your peeps Keep an eye on your co-workers, even the extroverted ones Links Super Strong Neodymium Magnets Elgato Cam Link 4k Keychron K1 Eat That Frog! uses.tech Animal Crossing Love Is Blind Powerblocks Peloton Strange Brew Wes’ Twitter thread - How are you managing child care? Syntax Twitter thread - Send us your work from home tips! ××× SIIIIICK ××× PIIIICKS ××× Scott: Oculus Quest Wes: Slumberpod Shameless Plugs Scott: All Courses - 50% off! 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
In this Hasty Treat, Scott and Wes talk about abstraction in general as well as javascript programming. 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 1:48 - What the heck is abstraction? I like to think of it as sweeping under the rug Vue and React devs should be very familiar with the concept 4:44 - When to abstract When things are getting too heavy Personal preference Some people have an arbitrary line limit 7:25 - When not to abstract When savings are minimal When it just adds a pointless layer 9:40 - Personal code abstractions vs public My personal focus is on API simplicity and baked-in smart defaults More specific Public APIs need to be more flexible or at least for some components Links React Vue Svelte Max MSP chakra UI 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
In this episode of Syntax, Scott and Wes talk with Dr. Courtney Tolinski about mental health and web development. 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. 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:20 - Depression Honestly just explaining depression would be great. Too many times I’ve heard “but you don’t look sad” As someone who struggles with depression, what are some things I can do to rekindle and things I enjoy like developing and hobbies? This would greatly benefit me for learning more dev related things outside of doing it for work. My depression is due to some other cause in personal life - two years into it. Coding has bought me little life back as this is the only thing I have to do. What can we do from an outsider's view to someone who might have depression? 12:23 - Anxiety Imposter Syndrome x 1000 How to deal with increased anxiety during these times? How to avoid anxiety and feel useless when working products that you don’t appeal to you? Wanted to ask the Dr about why do I feel that I have to work on 1000 projects that seem to never finish? 😣This is inducing a lot of anxiety sometimes. I am on depression medication. Sometimes, I feel scared that I am so slow and don’t feel accomplished enough like people working at FANG, etc, being a SE. How to deal with the anxiety caused by today’s events around the world and the need to isolate yourself from society even though we crave human interaction? 29:12 - Focus and job performance How to keep motivation and focus? I find myself enjoying work but having a hard time focusing on it. All the “distraction-free” apps don’t work because I can turn them off and I feel they literally have no power over me. Hardcore mode Pomodoro technique 35:10 - Motivation and remote work Bore-out Burnout How do you deal with loss of focus and happiness in web development (especially on remote jobs)? Working for yourself at home, you don’t get a chance to bounce ideas and encouragement from others in an office. What’re some good ways to compensate for that to ensure you maintain a positive mindset? Work on new things Find ways to try new things 40:38 - Stress Correctly identifying source of (negative?) stress. Not lashing out when under stress. How to avoid eating to cope with stress? Links Eat That Frog! - Brian Tracy Pomodoro technique Healthline How to Talk so Little Kids Will Listen: A Survival Guide to Life with Children Ages 2-7 ××× SIIIIICK ××× PIIIICKS ××× Courtney: Animal Crossing: New Horizons, How to Talk So Kids Will Listen & Listen So Kids Will Talk, The Whole-Brain Child: 12 Revolutionary Strategies to Nurture Your Child’s Developing Mind Scott: The Engineering Mindset YouTube Channel Wes: Toca Boca Shameless Plugs Scott: All Courses - Sign up for the year and save 50%! Wes: All Courses - Eveything is 50% off! 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
In this Hasty Treat, Scott and Wes talk about security and how to get good at passwords. 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 7:35 - Setting passwords Absolutely 100% must be unique for EVERY SINGLE WEBSITE 9:38 - Generated passwords Make a sentence: lovetoEatPizza Decide on casing Make your own algorithm: 3rd letter replaced by 4th letter of domain number on end is double the number of chars in the domain 13:52 - Use a password Manager Have the password manager generate the password for you Get it on your phone You must go 100% all in 1password Dashlane Bitwarden - open source version of Dashlane LastPass - awful 17:45 - Password manager tips Turn off your browser password manager - this is a crutch and causes them to become out of sync and this is why I see people annoyed by them For the love of god, make you master password something you can remember You can add family members to your plan that will approve it 1password’s Watchtower feature 20:50 - Biometrics Face ID, Touch ID Blood 21:37 - 2FA codes Authy Google Authenticator Authenticator + 1Password for 2FA codes Backup codes You can also backup the QR code 29:55 - Text message codes Don’t My sister got sim jacked, PayPal drained, phone number was gone for 7 days Lock transfer - ask your phone provider - mine has voice recognition Links Have I been pwned? Shop Talk Show: One on One with a Hacker Mailchimp 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
loading
Comments (46)

Josh Saint Jacque

The discussion of data structures and algorithms completely missed the number one reason web devs do need to learn them: interviews. It's frustrating because you're unlikely to use them, but if you want the job you'll likely need to know them.

May 27th
Reply

Mile Balenović

ive enjoyed the talk so much, thanks!

May 12th
Reply

Farshad Hasanpour

speaking of Iran I live here and it's challenging to do bussiness -_-

Apr 9th
Reply

James Lau

There needs to be more mental health episodes/podcasts for developers in general.

Apr 7th
Reply

Beatrix Ducz

hi guys, Brad Traversy recommended this podcast, and I can tell I'm eager to learn react. I come from php. I have listened to about 40 episodes so far and I've learned a lot! Still at Sep 19, a lot to go. Thank you for spreading the knowledge.

Apr 5th
Reply

Beatrix Ducz

traffic lights work differently in different countries. :)

Mar 26th
Reply

Beatrix Ducz

omg geocities, nearly forgot :D

Mar 14th
Reply

Sai Besabella

I think im gonna switch to tea! Thanks guys!

Jan 4th
Reply

Samane Yaghoobi

Such a Great subject for the show!

Nov 28th
Reply

eric wyns

hey guys i got a question. Have you ever coded while drunk/high?? #420 #darkpurp

Sep 26th
Reply

Hitesh Batra

lots of good stuff to listen. thanks for this podcast

Aug 21st
Reply

Akshay Kumar

and this will apply even for messages. people need to understand while chatting with anyone, it should be spot on

Aug 9th
Reply

Vanessa Naja

Loved this episode. When will you do the hooks follow up episode?

Aug 8th
Reply (1)

Al Gaines

One of my favorite episodes. Thanks for the great info, guys!

Jul 13th
Reply

Trizo Za

Brilliant again.

Jun 25th
Reply

Tiago Mesquita

using it to learn English. 😅

Jun 18th
Reply

Trizo Za

These guys are the best! So much knowledge in 48 minutes!

Jun 13th
Reply

Joel H

Great!

Jun 6th
Reply

Shan Two 3

😍

Mar 27th
Reply

gg

thanks

Mar 23rd
Reply
Download from Google Play
Download from App Store