265 episodes

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.

Syntax - Tasty Web Development Treats Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

    • Technology
    • 4.7, 15 Ratings

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.

    Jerome Hardaway + Vets Who Code

    Jerome Hardaway + Vets Who Code

    In this episode of Syntax, Scott and Wes talk with Jerome Hardaway about web dev, vets who code, diversity in tech, and more!
    .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.
    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 Jerome Hardaway Show Notes 01:50 - Captain America of Tech
    03:25 - Where do you work and what type of stuff do you work on?
    08:03 - What was your introduction to programming?
    15:46 - When did you start Vets Who Code?
    24:13 - What is the stack behind Vets Who Code?
    29:56 - How do you help prep vets to get jobs?
    41:32 - How can you be an ally and amplify black voices in tech?
    50:05 - Everybody against racism
    Links Vets Who Code Quicken Loans Eventbrite Animate.css Laws of UX react-spring General Assembly Code Bootcamps uses.tech keycode.info Tech Talent Pipeline @vetswhocode ××× SIIIIICK ××× PIIIICKS ××× Jerome: 1: HBO’s Watchmen 2: https://vidr.io/ Scott: Explained on Netflix Wes: Jeremy Fielding YouTube Channel Shameless Plugs Jerome: Vets Who Code Scott: Design Systems with CSS Variables - 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

    • 1 hr 2 min
    Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

    Hasty Treat - Forms, Captchas, Honeypots, Dealing With Malicious Users and the Sad State of Contact Forms

    In this Hasty Treat, Scott and Wes talk about forms, captchas, dealing with malicious users, 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.
    Show Notes 02:00 - So you made a form:
    Contact form Sales form Email signup for newsletter Bug report Sign up for an account Password reset 03:00 - Now someone is going to:
    Have a bot that submits it Maliciously write a bot that submits thousands 04:14 - So what can you do?
    4:54 - Honey pot
    This is a field that is either hidden or you tell the user not to fill in Can goof up autofill Works in many cases 07:37 - IP Throttle
    Only allow each IP to do an action a certain number or times inside a window You may only try signing up once per 10 mins 09:48 Block known ASN
    12:37 - Captcha
    Soft captcha: “What is 1 plus 1?” Annoying captcha: Type these letters Google captcha: Train our self driving cars Hidden captcha Cloudflare hCaptcha Links Cloudflare Digital Ocean Google reCaptcha Cloudflare hCaptcha 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

    • 20 min
    Our React Wish List

    Our React Wish List

    In this episode of Syntax, Scott and Wes talk about what they wish existed in React!
    DevLifts - Sponsor Refactor your body with DevLifts. They have a few different programs: 1) fit.start (normally $19/month) has a few options (lean, bodyweight, and strong). Workouts are delivered via email each month, with access to a Slack community for questions and accountability. 2) Premium (normally $199/month) is a custom-tailored option, where you get your workouts and nutrition advice after answering a questionnaire. They also check in with you each week via Slack to see how it's going and make changes if necessary. Get 50% off fit.Start plans with code SYNTAX and 50% off Premium with code TASTY.
    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 React 03:53 - Unmount delay for animation
    06:20 - Suspense with SSR released (or not because I think they are shelving it)
    Dan's tweet: https://twitter.com/dan_abramov/status/1259614150386425858 09:24 - File based components
    Like Svelte and Vue This would look like a file with a special scoped tag per page. 11:50 - Prevent Default shortcuts
    13:00 - No more useIsoLayoutEffect
    useLayoutEffect on SSR should just work without a custom hook Simple data fetching strategy based on promises 15:52 - Recommended hooks
    E.g. "here is the best way to do things" Official list of best practice hooks 18:25 - A good form strategy
    Bind inputs to state directly without any change handlers Inputs and forms all around need more magic - it's painful 20:43 - Write once deploy everywhere
    Not likely ever E.g. automatic transformation into react-native (obviously not going to happen) 22:28 - Compile time directives
    https://github.com/bukharim96/directive-x 25:11 - Slots instead of children
    Allows for things like named slots more explicit than children JSX 26:44 - Removal of htmlFor, className and all other abominations of html
    29:09 - Import Raact from React for JSX to work
    Soon will be fixed https://github.com/babel/babel/pull/11154 react-require 32:31 - Better conditional / if statement syntax
    33:09 - Fragments by default
    Just do it for us - the error message already knows 33:54 - Automatic key ids
    If mapping an object, check for common _id or id 36:36 - Simple scoped CSS built in
    37:29 - Short hand for props with same name is prop={prop}
    39:00 - Prop interpolation without backticks: name="$first $last"
    Or just backticks without brackets name=${first} ${last} instead of name={${first} ${last}} Tooling 39:43 - Story for typescript/prettier/babel
    40:11 - Automatic a href client side routing
    41:51 - Scaffolding and component generation
    Links Svelte Vue React Native NativeScript react-spring Paul Henschel Scream Sneeze: https://twitter.com/morganc_smith/status/1235332301044801538 ××× SIIIIICK ××× PIIIICKS ××× Scott: Software Engineering Daily Podcast Wes: PicQuic Screwdriver Shameless Plugs Scott: Sapper For Everyone - Sign up for the year and save 25%! Wes: Wes' New Gatsby Course - 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

    • 51 min
    Hasty Treat - Rural and Mobile Internet Revisited

    Hasty Treat - Rural and Mobile Internet Revisited

    In this Hasty Treat, Scott and Wes talk about rural and mobile internet — options, tools, and things to be aware of.
    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 05:04 - Satellite
    High latency Satellite congestion Oneweb Starlink 08:43 - WISP
    Can be different techs - LTE, LOS, Long range WiFi Local towers put up in town 900mhz, 5 + 2.5gz Pretty cowboy 12:09 - Cellular LTE
    Goes over the cell signal Can be super fast or slow depending on your reception Cell plans can be rate limited 12:52 - Routers
    WE826-T2 Rooter / Golden Orb / Wifix Based on Open WRT https://www.ofmodemsandmen.com/ Nighhawk M1 ZTE MF288 17:03 - Modem
    Two types of modems: Host modems PCI-e / M2 Cards Sierra Wireless AT Commands Band locking Enable carrier aggregation Get detailed values on modem power See cell tower IDs 23:16 - Antennas
    Omni Yagi Gotta get them high Lots of connectors - Type N, SMA, RP SMA 25:47 - Boosters
    Adds noise 26:04 - Plans
    Some plans are phone only Some plans are tower restricted Most Hot spot plans are a rip off Calyx Institute Canada: Bell Internet Five Telus Smart Hub 29:27 - Speeds
    Depends on tower, congestion Depends on pre paid, post paid or first responder Depends on if you hit the cap or not 30:15 - Tools:
    Cell Mapper LTE Hacks Facebook group LTE Fix website Links Syntax 169: Hasty Treat - Remote Internet 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

    • 34 min
    Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

    Potluck - Libraries vs Frameworks × Firefox × Career Advice For Teenagers × Who Would Win a Thumb War × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more!
    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.
    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 01:37 - Q: Why does React bill itself as a library instead of a framework?
    03:14 - Q: Are y’all still using Firefox now that it has been six months?
    06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace!
    09:34 - Q: Who would win in a thumb war, Wes or Scott?
    10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache.
    14:53 - Q: Should I start a new project with jQuery or React?
    17:21 - Q: I’m a young teen (npm install can be agonizing sometimes, not to mention the amount of space node_modules take up on a device with 16GB of storage! So basically, any pointers on getting income (and practice!) in the web development field when your under 16? And just in general, what advice do you have to young teen learning to code? Thanks in advance! P.S. You know you’ve got something going when a teenaged boy would rather listen to your podcast than watch Star Wars or Marvel with his friends! ;) So keep up the amazing work.
    22:12 - Q: Is it worth my time to learn design patterns in JavaScript?
    24:28 - Q: I have a question regarding Figma design to HTML/CSS conversion. When translating the design into code, do you keep the font-size, padding, height of images the same as defined in design or do you take something different? Let’s suppose top nav bar is 115px, then do you make it the same as well, or something else?
    29:03 - Q: You both are great at technical communication — how do you get better at technical communication when self-learning?
    33:06 - Q: What tools (or other methods) do y’all use to manage spinning up new projects with all the assorted directory structures, tools, and configs, you prefer? For example, when I start a new project, these days I like TS, Prettier, ESLint, and want those to play nicely together. I find I’m constantly copying files from one project to the other but haven’t found a good abstraction that allows me to setup a new project with the assorted files. Bonus points for a solution that can keep shared configs and deps up to date.
    36:10 - Q: I am 26 years old and working a full-time job. I am currently looking at the possibility between work and spending time with my partner. I get maybe an hour a week (maybe two) to focus on learning Javascript. I feel like it is taking me literally forever to get anywhere, and when I do learn something, there is always a better way of doing it! And then when I do sit down and get the time I just feel like I have no direction. Your podcast has been giving me small boosts of motivation, so thanks for that. But is 26 too old to make a move into development?
    39:39 - Q: How do you step up a web development project to an enterprise-level? There are so many simple tutorials and quick wins all over the internet, but how do you get more knowledge about bigger enterprise-ready technical stuff. E.g. How to org

    • 51 min
    Hasty Treat - Some Neat CSS Functions That You Should Know About

    Hasty Treat - Some Neat CSS Functions That You Should Know About

    In this Hasty Treat, Scott and Wes talk about CSS functions, what they are, how to use them, 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.
    Show Notes 02:13 - attr()
    04:14 - calc()
    06:05 - :is()
    07:20 - sin, cos, tan, acos, asin, sqrt, pow
    08:52 - clamp()
    12:13 - minmax()
    14:24 - fit-content()
    15:35 - filter
    blur() grayscale() sepia() opacity() contrast() url() Links https://twitter.com/wesbos/status/1256229763225657348/photo/1 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

    • 19 min

Customer Reviews

4.7 out of 5
15 Ratings

15 Ratings

Top Podcasts In Technology

Listeners Also Subscribed To