Detailed
Compact
Art
Reverse
August 12, 2020
In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS. 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. Guests Adam Argyle Show Notes 01:48 - Who are you and what do you do? 04:13 - How does stuff get added to CSS? 06:44 - Github issue proposal or public document Shares use case Problem made succinct StrawMan solution JS demo 10:12 - Time Multiple proposals Comments Back and forth Bikeshedding 20:00 - Editor’s draft spec (Stage 1) CSS typed Examples Provided code logic Implementor interest Can go stale Explainer Implementor Prototype behind flags in browser Intent to Prototype (I2P) 24:42 - Working Draft (Stage 2) WPTs Prototype behind flags in browser Needs two or more to graduate Intent to Ship (I2S) 24:54 - Conference Calls Around 10 items to discuss Issues or proposals Flexible list Things can be injected as emergency Things can get punted to the next call 25:26 - Face 2 Face (F2F) Four times a year Presentations Breakout sessions Houdini focus groups, etc Try to resolve as many Github issues as possible 27:34 - Candidate Recommendation (Stage 3) Could still be behind a flag Edge cases are being worked through WPTs and standards are being nudged into a final state 44:20 - Roles Spec author Community Member Print Color Internationalization Box Model AOM JS APIs Renderers etc Implementor It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real 46:32 - Questions What language is CSS written in? What's the deal with Houdini? Links https://github.com/w3c/csswg-drafts @rachelandrew @hj_chen Incomplete List of Mistakes in the Design of CSS 10 Things I Regret About Node https://ishoudinireadyyet.com/ ××× SIIIIICK ××× PIIIICKS ××× Adam Wok Scott: Balance Pad Wes: Security Bit Set Shameless Plugs Adam: The CSS Podcast Scott: CSS Design Systems - 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
August 10, 2020
In this Hasty Treat, Scott and Wes talk about refining your processes, how to evaluate them, make them better, 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 04:18 - Find slow process Getting through email Cleaning my desk 06:29 - Set clear goals (smart goals) Is my inbox less crazy? Don’t spend too much time Do a 30-day challenge 09:46 - Ask around What are people you know using and why Time-blocking Batching Eat that frog Links Streaks Matt Cutts — Try something new for 30 days 1Writer Notable Dropbox Notion Obsidian Todoist 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
August 5, 2020
In this episode of Syntax, Scott and Wes talk about React State libraries, should you use them, pros, cons, 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. 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 01:24 - Context Have we used? Scott: Yes Wes: Yes Pros Built into React As simple or complex as you want Cons Takes effort to optimize Takes effort to plan and organize aka can get out of hand quickly 08:49 - Redux Have we used? Scott: Yes Wes: Yes Pros Huge user base Legacy of growth and improvements Modern API Even though it’s hard to learn, it has a clear “how to build with it” path Dev tools Cons Complex Thing that calls a thing that calls a thing that calls a thing Confusion around what additional packages are needed, e.g. ducks, saga, whatever 17:08 - XState Have we used? Scott: Yes Wes: No Pros Enforces solid design patterns Very safe Awesome tooling like UI to see state machines https://xstate.js.org/viz/ Cons Knowledge overhead - having to understand state machines Complex syntax 23:26 - Zustand Have we used? Scott: Yes Wes: No Pros Fast, scalable, easy to use Simpler No context providers Cons Smaller community 2.6k stars on Github Can inform components transiently (without causing render) 27:04 - Apollo Client Have we used? Scott: Yes Wes: Yes Pros Fits in well with your GraphQL API Dev tools Cons Complex, large syntax for simple operations Dev tools SSR story is really complex. It’s hard because they aren’t also the framework. 31:35 - RXJS Have we used? Scott: No Wes: No Observable based 33:02 - React Query Have we used? Scott: No Wes: Pros Fast growing community Awesome dev tools Cons Not sure if this can be used for application state or just data 35:37 - Recoil Have we used? Scott: Yes Wes: No Pros Very good for complex, splintered state needs Cons Overly complex for most use cases 38:34 - MobX Have we used? Scott: No Wes: No Pros Big community Not just React Powerful Observable capabilities Cons Uses decorators, but doesn’t have to? 43:15 - Easy Peasy Have we used? Scott: No Wes: No Pros Simple API (easy peasy) Redux dev tools supported 45:06 - Meteor ReactiveDict / ReactiveVar Have we used? Scott: Yes Wes: No Pros Very simple Get, set Is Reactive Cons Lock-in to Meteor 46:19 - Final Thoughts On State Wes: Go for simpler solutions Scott: I think application state should be separate from application data, but maybe that’s because there isn’t a solution that does both how I want Links Svelte Meteor Syntax 206: State Machines, CSS and Animations with David K Piano Syntax 268: Potluck - Beating Procrastination × Rollup vs Webpack × Leadership × Code Planning × Styled Components × More! Zustand CodeSandbox swr ××× SIIIIICK ××× PIIIICKS ××× Scott: Becoming Bond Wes: IRWIN VISE-GRIP GrooveLock Pliers Set Shameless Plugs Scott: Modern CSS Design Systems - 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
August 3, 2020
In this Hasty Treat, Scott and Wes talk about their experience upgrading Syntax.fm and some of the site’s big changes. 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 - The old Syntax site Next.js Custom server for API - shows, Latest shows, sick picks On-demand page builds Custom routing 06:41 - The new Syntax site Next.js has solved those things now, no need for a custom server. API Routes On-demand page builds: SSG with Next.js. It’s a server, but caches the page builds. Releasing the shows happens with revalidation. It’s statically generated like Gatsby, but you can also choose Custom routing is now done with [pages] Very fast to load Very fast to build Very fast to deploy It’s now a “dynamic static site” Zeit Now 1 to “Vercel” Huge thanks to Tim Neutkens and Luis Alvarez from Vercel for making it happen. 13:23 - Why not: Gatsby Entire site would need to be regenerated exactly at 9am eastern API of the site would need to be done with something else like Netlify Functions - not nearly as nice as Next API routes Sapper Links Next.js Gatsby Sapper Vercel 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
July 29, 2020
In this episode of Syntax, Scott and Wes talk with Filipe Névola about Meteor and the exciting things happening in the Meteor world! 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. 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 Filipe Névola @filipenevola Show Notes 01:20 - What is your background? 03:41 - What exactly is Meteor? 12:00 - What are the biggest misconceptions of modern meteor? 18:20 - What do you say to people who think Meteor is dead? 21:33 - How does data get from your Meteor into your React app? Example of getting data on client side import { useTracker } from 'meteor/react-meteor-data' // Hook, basic use, everything in one component const MyProtectedPage = (pageId) => { const { user, isLoggedIn, page } = useTracker(() => { // The publication must also be secure const subscription = Meteor.subscribe('page', pageId) const page = Pages.findOne({ _id: pageId }) const user = Meteor.user() const userId = Meteor.userId() const isLoggingIn = Meteor.loggingIn() return { page, isLoading: !subscription.ready(), user, userId, isLoggingIn, isLoggedIn: !!userId } }, [pageId]) if (!isLoggedIn) { return Create an Account Log in } return {page.title} {page.content} { e.preventDefault(); Meteor.logout(); }}>Log out ({user.username}) } 27:50 - What do you think is the ideal usecase for Meteor? 31:09 - Why did Meteor 1.0 fail to maintain hype? 36:41 - What does Meteor’s future look like? 45:27 - Are there any plans to integrate serverless into Meteor? 46:55 - Any little known features of Meteor that people might be interested in? Links Meteor Tiny Capital Deno Meteor Galaxy Mongoose Parcel Apollo MongoDB Svelte Meteor repo Meteor Up https://howtocreateanapp.dev/ https://www.youtube.com/channel/UC8A0hHUaCBvuBs0eA5g_q3A Cordova Missive Meteor Forums ××× SIIIIICK ××× PIIIICKS ××× Filipe: 1: Galaxy 2: Terere Scott: Amplifi Alien Router Wes: Parcel - Global Package Tracking Shameless Plugs Filipe: @filipenevola Scott: All Courses - 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
July 27, 2020
In this Hasty Treat, Scott and Wes talk about noopener and noreferrer and why you should use them with links that have blank targets. 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:35 - What’s the big deal? If you have a link that is target="_blank" you should add rel=“noopener” and rel=“noreferrer” Retail Me Not uses it Valid use cases: Same domain change the page from a popup Cross domain changing page data Example: https://mathiasbynens.github.io/rel-noopener/ 05:39 - Why doesn’t the browser just fix it? Safari did - You can use rel=“opener” to allow it Firefox did Chrome hasn’t yet https://twitter.com/HugoGiraudel/status/801475801397030912 10:48 - Does this hurt SEO? It breaks analytics of the recipient site, turning a referral visit from your site into direct traffic, unless the link has UTM or similar tracking parameters. If you have a site where passing traffic offsite is part of the business model, links need an affiliate id instead. Links @argyleink 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
July 22, 2020
It’s another potluck! In this episode, Scott and Wes answer your questions about transitioning to backend dev, tips for beating procrastination, Rollup vs Webpack, code planning, growing as a leader 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. 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:33 - I am a junior dev, coming up on two years at my current agency. I have been primarily on the frontend using Angular and templating with Handlebars and other HTML and CSS. I have been asked if I would be interested in moving more into backend, with a focus on Node.js. Outside of creating APIs, what else should I do to learn “backend”? 06:08 - I work as a web master and would like to be a frontend developer someday. Currently I am working on a MERN stack app on my own to enhance my skills, but have problems focusing and tend to procrastinate a lot. How do you tackle distractions and get things done? I would appreciate some tips. 11:00 - Rollup or Webpack? Webpack 5 still doesn’t seem to support ES6 module output, as described by Philip Walton, so instead of upgrading to Webpack 5, this might be a good time to think about switching to Rollup (or Parcel). 13:46 - I have been learning web development (HTML, CSS and JS) and am at a place where I can build simple websites for small businesses, but I feel like a beginner and am wondering if you have any recommendations on courses to get to a more intermediate/advanced level? 18:01 - Why should you choose Styled Components over other ways of writing CSS? 22:56 - What are your thoughts on companies that make senior developer roles require leadership responsibilities? A great technical person does not always make a great leader or visa versa. 26:36 - I am often not good at planning out code from the start. I find that it’s easier to start coding, write a few lines, run it to see where I’m at, and carry on. This technique doesn’t work when I need to wait for a deploy to finish before I can view the result, as it greatly increases dev time. Do you have any advice for what I can do better? 31:43 - I have a very random question. for context I’m a Mac and Linux user myself. However, recently while building our company application I’ve noticed that Windows does extremely weird things with font sizes. Since we have a pretty decent Windows user base, obviously this is something my partner and I want to solve. However I’m very unsure of the best way to handle it. It seems entirely different from user to user. How in the world do we as developers account for these inconsistencies? We have tried vertical media queries that more or less kick them to tablet mode. Obviously this is less than optimal. 37:50 - Are side projects common among developers? I recently mentioned to my boss that I have a few side projects - nothing serious, just for learning mostly - and he said he would rather I didn’t, and instead focus on my work. He said he hadn’t really heard of developers doing side projects, and that if I want to work on things that aren’t our work he has other things I can do. Links inputmag.com Focus app TSdx Rollup Webapck Parcel Beginner Javascript Typescript Darknet Diaries ××× SIIIIICK ××× PIIIICKS ××× Scott: Malicious Life Podcast Wes: LaCie Rugged USB-C External HDD Shameless Plugs Scott: Modern CSS Design Systems - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
July 20, 2020
In this Hasty Treat, Scott and Wes talk about turbolinks — what it is, how to use is, popular apps using is, 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. Show Notes 02:50 - What is turbolinks? Generate HTML on the server Send it over the ajax request Load it in the page 03:55 - Who is using Turbolinks? GitHub Basecamp Hey.com 05:24 - Turbo Links javascript browser bundle Intercepts any link click Fetches the page HTML 09:19 - JS Sprinkles Vanilla JS jQuery Stimulus Alpine JS Links Turbolinks Syntax 254: Headless CMS Break Down & Roundup pjax Svelte Next.js 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
July 15, 2020
In this episode of Syntax, Scott and Wes talk about the future of video for the web! 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 08:19 - Scott’s Background in video Started editing in middle school Worked professionally as an editor and production assistant for magazine Created specialty flash video players Have been hosting video content since the start of my web career 09:12 - Terminology Transcoding - digital to digital conversion of one format to another Ingest - bringing a video to a new facility (ie uploaded video file or data stream to server) 10:51 - Streaming vs Downloading Streaming is basically chunks of content at a time, while download is waiting for the entire file to be downloaded before playing. 11:16 - Formats MP4 WebM DASH HLS (HTTP Live Streaming) m3u8 21:35 - Players shaka-player - https://github.com/google/shaka-player/ hls.js - https://hls-js.netlify.app/demo/ dash.js - https://github.com/Dash-Industry-Forum/dash.js video.js - https://videojs.com/ jw player - https://www.jwplayer.com/ Bit Movin player - https://bitmovin.com/docs/player Ooyala Brightcove - https://www.brightcove.com/en/ 27:48 - Services Roundup 🐴 YouTube - free Vimeo - $ MUX - $$ Wistia -  Cloudflare - $$ JW Player - $ Cloudinary - $$$ Brightcove - $$$ Azure - $$ Bit Movin - $$ AWS - $$ 46:59 - What Scott did and how/why upchunk Mux Video.js Custom uploader Using polling Links Basecamp Hey Inbox YouTube Wistia Drip ConvertKit Vimeo https://fronteers.nl/congres/2015/sessions/jsmpeg-by-dominic-szablewski https://www.vidbeo.com/blog/hls-vs-dash HLS Can I Use youtube-dl Syntax Ep 254: Headless CMS Break Down & Roundup Cloudflare Mux Framer Motion Cloudinary upchunk ××× SIIIIICK ××× PIIIICKS ××× Scott: Flexibility Focus Podcast Wes: Mustie1 YouTube Channel Shameless Plugs Scott: CSS Variables Course - 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
July 13, 2020
In this Hasty Treat it’s another edition of the Top Level Domain Game! 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:25 - How it works We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? +5 points What country, business, or type of business is it for? +5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ https://www.101domain.com/ Is scott._ and wes._ available? -10 points for each 04:00 - .sd Scott: 5 + -5 + -126 + -10 + 10 = -126 05:46 - .ong Wes: 5 + -5 + -30 + 20 = -10 07:53 - .koeln Scott: 5 + -5 + -20 + 20 = -126 09:23 - .co.ke Wes: 10 + -15 + 0 = -15 11:00 - .tr Scott: 5 + -5 + 0 + 0 = -126 12:25 - .ist Wes: -5 + 5 + -10 + 0 = -25 13:57 - .xn—45q11c Scott: 5 + 5 + -295 + 10 = 20 = -401 16:40 - .reit Wes: 10 + -1460 + 10 = -1465 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
July 8, 2020
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
July 6, 2020
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
July 1, 2020
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
June 29, 2020
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
June 24, 2020
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 (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links React Firefox Brave CodeSandbox VS Code in the browser CodePen Source Making Design Patterns Figma Auto Layout ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Myths and Legends Podcast 2: Fictional Podcast Wes: Parchment Paper Baking Sheets Shameless Plugs Scott: Sapper For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript 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
June 22, 2020
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
June 17, 2020
In this episode of Syntax, Scott and Wes continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, 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. 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:17 - Typing Take an online typing test or skills - https://www.keybr.com/ 07:02 - Bash / Terminal WSL What directory am I in? SSH How to copy / paste / remove files and folders z Nice prompt (ZSH or fish) Know how to get out of VIM/VI and how to use it for fast editing Know how to make an alias 13:19 - Text editors Command Palette Keyboard shortcuts (just look them up!) Click through to source Multiple cursors Find/replace master Find and replace across files 18:37 - Regex Regex101 https://regexone.com will teach you just enough 22:03 - OS Basics Switching apps Unzipping File organization Searching for/in files 28:50 - Googling Learn how to google well What words to use and what not to Basic operators “-”, ", Use Reddit: for opinions Add dates - example: Library has been out for 6 months, and you can filter out 33:08 - Navigating GitHub Explore for finding interesting projects and creators Know how to clone a repo Create repo and push to it https://octolinker.now.sh/ to click through to files Use Octotree to navigate 36:20 - Navigating source View source Where to start in a repo (ie the entrance to a project) Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills Access to the minds of other developers 37:31 - Knowing how to pick the right dev tools pane Is it network based? Does it happen once you click something? Toggling CSS on/off When console logging makes sense vs using a better tool Links TypingTest.com Wes’ Command Line Power User Karabiner BetterTouchTool Alfred ××× SIIIIICK ××× PIIIICKS ××× Scott: The Fabric of the Cosmos Wes: Cosmonaut Stylus Shameless Plugs Scott: All Courses - 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
June 15, 2020
In this Hasty Treat, Scott tells Wes about his new Linux laptop — what it is, why he did it, pros and cons, 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 01:38 - Why? 04:20 - What is System76? System76 Lemur Pro 08:53 - What is Pop OS? Pop OS 09:41 - How has Linux compared to Mac? Pop OS is a great distro with lots of features, but command line knowledge is still necessary 10:07 - I can still run: Alfred Figma VSCode DaVinci Resolve Zoom Brave Chrome Firefox 10:43 - I can’t run: ScreenFlow Logic Sketch 13:46 - What do I miss? Trackpad gestures It’s not as polished of an experience Links Dell Toughbook 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
June 10, 2020
In this episode of Syntax, Scott and Wes talk with Ian Ramzy about ZipCall.io — how he built it, why, and some of the surprising choices he made along the way. 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”. 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 Guests Ian Ramzy Show Notes 02:08 - Who are you and what’s your background? 05:34 - Why did you build this? 13:55 - What is it built in? Express server Web sockets 16:10 - Why is there no tooling? GetUserMedia WebRTC Twilio STUN/TURN/ICE infrastructure https://www.twilio.com/docs/stun-turn/faq VideoChat.peerConnection = new RTCPeerConnection({ iceServers: token.iceServers, }); 24:31 - How does your server deal with an influx of users? 27:11 - How do each of these features work? Auto-scaling video quality Text chat Screen sharing Picture in picture Live captions Loading animation No download required, entirely browser based Direct peer to peer connection ensures lowest latency Single use disposable chat rooms 41:32 - Have you looked into any of the recording APIs? Links ZipCall Zoom jQuery WebTorrent Heroku Adopter.js Figma ××× SIIIIICK ××× PIIIICKS ××× Ian: Notion Scott: Summoning Salt Wes: 4 Channel WiFi Momentary Inching Relay Self-Lock Switch Module Shameless Plugs Ian ZipCall Scott: All Courses - 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
June 8, 2020
In this Hasty Treat, Scott and Wes are back with part 2 on how to develop for slow internet connections. Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%. Show Notes 03:27 - Images Resize client-side when uploading Lazy load or progressive JPG Width + height so the content doesn’t shift with placeholders Compress your images - lossless and lossy Use SVG where possible 08:33 - Scripts + CSS assets Hasty Treat - 5 Things That Make Your Site Slow Hasty Treat - 5 More Things That Make Your Site Slow 08:51 - Video Variable-rate video is key 09:13 - Connections that go in-n-out a lot Save form state on page refresh Show UI when user goes offline window.addEventListener('offline', updateOnlineStatus); window.addEventListener('online', updateOnlineStatus); Retrying in _____ 10:27 - Service workers! Serves up local cache initially 12:05 - Fonts Font-display CSS https://css-tricks.com/font-display-masses/ Sometimes possible: tree shake your fonts - load only the characters you need font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 14:04 - CSS tricks Text over background image — make sure you also set a color so the text will show while the image is loading 14:37 - Testing slow connections Dev tools Mimic a speed, or 3G Links ImageOptim Slack Discord Cloudflare Workbox by Google Chrome Dev Tools Firefox Dev Tools 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
June 3, 2020
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
June 1, 2020
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
May 27, 2020
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
May 25, 2020
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
May 20, 2020
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 , , and straight-up CSS Variables are used in templates via {var} - even works Import component and use just like React and Vue 10:49 - Stylin’ All styles are scoped by default global() to wrap around global declarations Language type sass to use sass 12:22 - Reactivity Baked in let count = 0 count = count + 1 will reactively update in template variables are essentially state $: double = count + 2 - to create a reactive variable that updates when another variable updates $: console.log(count) = will run whenever count is update a-la useEffect $: if (count >10) = same… reactive if  updates let name in script 15:55 - Props Same was React, but need to be exported before they can be used Seems counterintuitive, but you get over it quickly EZ defaults export let answer = 'a mystery'; import Nested from './Nested.svelte'; export let answer = 'a mystery'; The answer is {answer} 20:08 - Template logic If statements {#if user._id} {/if} Loops {#each cats as kittens} Promise tags {#await promise} ...waiting {:then number} The number is {number} {:catch error} {error.message} {/await} 23:12 - Events On directive Functions can also be inline Modifiers Click me 26:11 - Baked-in goodies Animation Dimensions {text} Lifecycle methods Advanced State Via Stores A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes. import { writable } from ‘svelte/store’; export const count = writable(0); count.update(0) Slots React helmet like stuff, ie 36:39 - Sapper Similar to Next.js Folder routes Static export with all of the good stuff like service workers and preloading Links Svelte Sapper r/webdev Vue.js ScottTolinski.com WesBos.com Next.js ScottTolinski.com Github Repo Gatsby.js Shawn Swyx ××× SIIIIICK ××× PIIIICKS ××× Scott: Lewisia Battery Backup Solar Fountain Pump Wes: Firefox Containers Shameless Plugs Scott: LevelUpTuts YouTube Channel Wes: Wes’ New Website 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
May 18, 2020
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
May 13, 2020
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
May 11, 2020
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
May 6, 2020
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
May 4, 2020
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
April 29, 2020
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
April 27, 2020
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
April 22, 2020
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
April 20, 2020
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 tags in HTML markup? Solution: Lazy load JS as needed Solution: Show HTML first, load JS in the footer Solution: Use Async + Defer 16:42 - Missing indexes on DB What is a DB index? Where should you add them? MongoDB Compass Links Syntax 239: Hasty Treat - 5 Things That Make Your Site Slow Google PageSpped 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
April 15, 2020
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
April 13, 2020
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
April 8, 2020
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
April 6, 2020
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
April 1, 2020
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
March 30, 2020
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
March 25, 2020
It’s another potluck! In this episode, Scott and Wes answer your questions about bootcamps, Figma, Gatsby, AMP, Mongoose, imposter syndrome, 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. 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:02 - Q. Scott, you talk a lot about your workflow with Figma. As a designer going to programming it sounds like the workflow was natural to you. As a programmer trying to move into design, I have no idea how to get started. Could you explain your workflow on starting a new project in Figma through starting to implement in VSCode? 5:36 - The dreaded monitor question, flat or curved? 8:34 - I am relatively new to web development and have learned HTML, CSS, Node and Mongo. I planned on taking your GatsbyJS e-commerce course, however, I have no experience in React whatsoever. Should I learn React first? 12:35 - What is AMP and should I be using it? 16:07 - What are the advantages and disadvantages of building a web app using a framework such as Blitz.js? 21:46 - Would you ever consider moving from Mongo / Mongoose? 24:47 - I am very new to the dev world. Went to college 15 years ago for Comp Sci, but dropped out halfway through to become an electrician. (Wasn’t sure if I could sit in an office all day.) Long story, but I’m wanting to change my career path and I’m very interested in software development. I’ve heard about Modern Labor’s bootcamp and I’m intrigued. I’d like to know what your take is on their program. 33:15 - Loved your recent episode(s) on serverless functions. I’ve implemented a few myself, but I always come back to the same question: how exactly do I secure these endpoints? Because you are charged for compute time, and those endpoints are publicly available, couldn’t anyone just send requests to them and run up your bill? 36:53 - I’ve decided to make a career out of coding and programming and I’m an absolute beginner starting out in HTML and CSS. It might be a weird question but how many/what percentage elements and declaratives do I need to memorize? It’s not that the info is necessarily difficult to parse, it’s the amount of tags that I’m bombarding my brain with is muddying my progress. I’m more of a theory-driven learner so it’s not the biggest obstacle in the world but I’m starting to see the breadth of this endeavor and I’m not sure how to focus my mental acuity. 40:39 - Do you have a standard folder structure that you follow for placing “utility” function JS files? Is there an “industry standard”? I’ve just been using utils or utilities inside src, but curious if there is a more common way. 44:12 - Is figuring out new techs/modules/plugins/whatever really as easy as reading the docs for most people? A common response to “what’s a good way to learn x” seems to be “the docs are good”. I then open the docs and am absolutely clueless. Are these people just giving bad advice, or do the docs actually give most people enough to go on? For example, I tried to implement username login with Passport using their docs, and a lot seemed to be left out, implying you’re supposed to just already know all this other stuff. It’s a bit demoralizing to feel like I can’t figure out much of anything on my own, and I’ve been doing web dev for a few years now, albeit not professionally, but I have done some big projects that are used regularly. So anyway, just wondering what your take on this common advice is, your experience with being able to figure out things on your own without needing an hour-long tutorial, and so on. I know you’re both tutorial makers, but I don’t get the impression that you two have to take a course to understand something new. 48:19 - Do you have any tips for getting over “code shyness” or “imposter syndrome”? I find myself struggling with this issue from time to time and was curious to know your suggestions for dealing with it. 53:36 - If I rename my GitHub repo, will all the links that are in the wild still work. For instance will github.com/webruin map to github.com/newname? Links Cloudflare AMP Blitz.js Brandon Blitz Meteor Mongoose DynamoDB uses.tech Course Report - Modern Labor Passport.js Syntax 058: Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More Syntax 015: Advice for New Developers, Imposter Syndrome and Interviewing at Google Syntax 075: Hasty Treat - Feedback and Criticism Brendan Eich ××× SIIIIICK ××× PIIIICKS ××× Scott: Stronger by Science Podcast Wes: iStat Menus Shameless Plugs Scott: Animating React with Framer Motion - 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
March 23, 2020
In this Hasty Treat, Scott and Wes talk about purchasing power parity — what it is, and how Wes has implemented it on his course website. 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:36 - What is it? 5:43 - How do you calculate it? Big Mac Index Purchasing Power Parity Spotify Pricing Index Glassdoor Just ask developers what they make 8:04 - How do you implement it? Cloudflare headers Dealing with VPNs Does it work with sales? 16:09 - Is it client-side only? Links country-emoji npm package 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
March 18, 2020
In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, 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. 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:26 - Hooks vs Render Props Hooks win hands down useState useReducer useRef useContext useEffect Custom hooks to hide and encapsulate functionality 35:06 - How we use them Scott Index that imports all custom hooks Babel alias to hooks folder Import { useHook } from ‘hooks’ useContextState Wes useResizeObserver useForm useGridRower useWickedFavIcon 45:54 - Which built-in hooks do we not use? useImperativeHandle useCallback useDebugValue 48:22 - Are hooks harder to learn? Wes: Yes — but easier to maintain after the fact Scott: Yes — harder conceptually and initially but easier after concepts are understood 50:29 - Are classes going away? Wes: I say yes Scott: Double yes Links Syntax Ep 092: React Hooks Making setInterval Declarative with React Hooks - Dan Abramov babel-plugin-module-resolver awesome-uses uses.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: Ars Technica War Stories Wes: Mpow CH1 Kids Headphones Shameless Plugs Scott: All Courses - 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
March 16, 2020
In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer. 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 2:34 - Finding someone Virtual Assistant Offset timezones can be handy Flexible is great - two hours here, two hours there 5:55 - Types of tasks to delegate Support Email replies Mail and shipping items Invoicing Expenses Research - find emails for X Blog post edits Sponsorships 14:50 - Standard Operating Procedures If something happens more than once, make an SOP Common questions that come up 18:07 - Tools 1Password Missive Custom backend tools for: Managing courses Issuing refunds Chromebook Google Docs 21:52 - Hours Links 1Password Missive Notion Freshbooks Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase 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
March 11, 2020
In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, 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 2:20 - Productivity Make a todo list and prioritize Get ideas out of your brain Use a tool like Notion as a second brain Batch related things together Recharge when you need it Have a system and stick to it 16:34 - Finishing projects Start Do a little every day Go all-in for a few days Clearly identify what needs to be done (Github issues, todo app) 23:30 - Planning tips I use Mind Node Whimsical Write it down when you have an idea Put everything in a calendar 30:24 - Communication Be honest and upfront with deadlines Give yourself padding — many people are overly optimistic Don’t let people expect communication from you, at all, or at all times Assume good intentions Don’t be a jerk to clients or coworkers 40:28 - Skill and career advancement FDD — fun driven development Share what you learn Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff Solve your own problems Apply and interview for anything that’s interesting Track your progress I want to ___, I wish I could ____, You are lucky that you get to _____ Just start! Seriously. Plan on doing something. Links Todoist Things Notion Evernote Notable Beginner Javascript Level 1 Electron uses.tech Rework Jason Freid David Heinemeier Hanson It Doesn’t Have To Be Crazy At Work Mind Node Whimsical Javascript30 CodeSandbox Streaks Xerf Xpec YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: Katsumi Horii Project - Sky Cruisin’ Album Wes: AmpliFi ALIEN Router Shameless Plugs Scott: Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
March 9, 2020
In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, 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 2:45 - What do you personally use Cloudflare for? DNS provider Domain registration at cost Caching DDoS protection Hiding server IP address Free HTTPS Firewall rules Scrape shield Lightweight stats Serverless functions DNS Cloudflare Warp 16:40 - What are you not using? KV storage Video streaming Deep customization around blocking/errors 19:49 - How do you set it up? Links Cloudflare Beginner Javascript Digital Ocean DNS Simple Let’s Encrypt Syntax Ep 224: Serverless / Cloud Functions - Part 1 Begin 7-Eleven hit “Dance The Slurp” 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
March 4, 2020
In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, 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 2:47 - Wes tried Cloudflare Workers Also this is so cool: Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc. A word on Digital Ocean Kubernetes + FAAS allows you to scale up/down 13:54 - Secret management Some have a great UI Some have a CLI Some only have production Some have dev/staging/prod 16:24 - Vendor lock-in Two kinds of vendor lock-in Lock into a low-level provider (Like AWS, or MongoDB) Lock into a framework Questions to ask: Can I go, take my app as-is, and host it on another provider? Can I refactor the config and run my code as-is? Do I need to refactor my code for it to run on other platforms? Next.js will only run on Now There is a community package Begin all runs on Arc.codes Firebase is locked in? 25:12 - Sharing dependencies Each function will have its own package.json, which can be a pain Publish utils a private module AWS Layers Import/export Bundle and tree shake 30:26 - Local development Now dev NPX sandbox Wrangler for Cloudflare workers 36:40 - Existing applications Difficult to move with many routes, but easy to move a Graphql API that has one single route Maybe do piece by piece instead of all at once Begin has http express method 45:21 - Data Any DB you want Dynamo DB integrated into many Firebase KV Storage for Cloudflare workers Fauna 48:14 - File storage Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary Many also have this integrated as well 52:18 - Auth Serverless is ephemeral and stateless JWT likely as sessions will work, but doesn’t really make sense Links Cloudflare Workers Akamai MongoDB Stitch Hitler uses Kubernetes Digital Ocean Kubernetes Firebase Google Cloud Architect Next.js Now.sh Begin Netlify Now Wrangler Apollo Federation Monaco Postman Codesandbox DynamoDB Amazon S3 Backblaze B2 Cloudinary ××× SIIIIICK ××× PIIIICKS ××× Scott: The Power of Bad by John Tierney Wes: Socket Organizer Shameless Plugs Scott: Animating React with Framer Motion - 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
March 2, 2020
In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 4:30 - The General Idea Toward Responsive Elements — Brian Kardell 6:20 - Problems It’s not as easy as, “how do we write them” Some of the requirements may need a fundamental change to browser engines May be very impractical and take a long time “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell 8:56 - What’s been happening? Lots of conversations Dead ends “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years 12:00 - Progress Lot’s of discussion Goog, Moz, Apple, smart people Not there yet Big ideas that could go somewhere .foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); } “A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell Or a system based on resizeObserver “In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell https://github.com/ZeeCoder/container-query https://github.com/FreddyFY/styled-container-query Links uses.tech Ian Kilpatrick Jared Palmer’s tsdx 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
February 26, 2020
It’s another potluck! In this episode, Scott and Wes answer your questions about Gastby vs everything, Next, Vue, Rails, working with agencies, CSS, 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. Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelaning. Use the coupon “SYNTAX” and get 25%. Show Notes 1:39 - This may be a crazy question but I need to build a similar system to Level Up Tutorials where people can access content based on a monthly subscription. Any recommendations where to start with either Next.js or Gastby.js? How do I check to see if a person is up-to-date with payment? 4:14 - What's your favorite new tab page? 6:19: CSS vs SCSS vs Styled Components? When you are developing a React or Next.js application which styling method do you guys use and why? Which one is “best practice”, or a more efficient way of going about it? 11:14 - What do you think of lit-html? 15:25 - I’m relatively new to React, and primarily learning the create-react-app way. When do you go for the create-react-app approach when building an application, and when do you customize the config? I’m uncertain when it’s time to escape the ‘create-react-app’ approach. Also, when escaping it, which main configurations are you grabbing? 18:19 - Is there a reason hasty treat intros are 2.5x the length of normal episodes? Now that Overcast has intro skipping it’d be nice if the intros were uniform in length. 21:23 - I see Kyle Matthews coming out with a lot of input on how Gatsby can be used for web applications as well. After listening to several of your podcasts, where you talk about Gatsby, it doesn’t seem like you agree, and would go for Next.js instead. In your opinion is the development at Gatsby really heading in the direction of SSG and web application? 27:17 - I’ve hopped on the Vue train from jQuery land, and am loving both Nuxt and Gridsome. However, I keep hearing all these good things about Gatsby. Would you guys say that it is worth it to learn Gatsby (and the whole react ecosystem for that matter) over Gridsome? This is mostly for small-medium-ish side-project web sites that connect to a headless CMS. 30:04 - What are your thoughts on CSS pre-processors nowadays? With all the advance and new features from CSS, do you guys really think that it is still worthy to use it those? 32:11 - Scott, can you talk a bit about why you decided to switch back to Meteor after putting in all the effort to convert LUT to Next.js? I am about to start a new fullstack project and was considering Next until I heard you switched back. Maybe I should consider Meteor instead? 40:21 - I’ve recently started an internship at one of my favorite tech companies where I’m using EmberJS and Ruby on Rails. I love the team I’m on (the people are so nice) but I’m not super passionate about the tech stack. I’d much rather be using something like React and NodeJS/Express in my day-to-day coding. Do you think it’s worth staying in a position (if I were to try and get a full-time gig in this role) if you don’t like the tech stack, but really like the people? 40:51 - I’m thinking of doing a bootcamp that teaches Ruby on Rails for backend. I hear a lot that Ruby is a dying language, but at the same time, I know it’s used for a lot of big-timers, such as Airbnb and Shopify. Could you please explain the relevance that Ruby/Ruby on Rails will have in 2020 forward, as well as if it’s worth learning for newer web developers at this point? 45:15 - What is the deal with CMSs/headless CMSs? I hear you guys talk about them all the time (Sanity, Keystone, Prisma?) but I’m not sure what they are good for. To me, they just seem like a UI to my database, but isn’t that what my application is? It just seems like it would be easier to have my frontend talk to my backend talk to my database instead of learning how each CMS wants things to be done and programming for that? Am I missing the point? 48:11 - What does Svelte needs for each of you to use it instead of React in personal and future developments? 50:38 - I freelance on the side as well as have a 9-5. The other dev I work with mentioned he’d help if I ever needed/wanted help on a client project. What are your thoughts on doing freelance work with someone who you also work with at your job? 52:01 - My team is currently in the design phase for a rewrite of our biggest product. We are switching from perl backend (y i k e s) to node (yay) but for some reason, our tech lead decided on hapi for the node framework. I have spent a little time with hapi and it seems cool but I am not sure about its longevity when compared to more established frameworks like express. How do you feel about hapi and should I push for a different framework? 54:29 - I’m a lead dev that recently joined an agency for the first time. What 🔥tips do you have for livin’ and devin’ in that agency life? Especially around time management, time estimation and dealing with clients. Links Stripe Braintree Recurly Firefox lit-html Overcast @kylemathews Gatsby Build Vue.js Nuxt.js Gridsome postcss-preset-env Meteor Ember Ruby on Rails Personal Capital Airbnb Shopify Missive Sanity Keystone Prisma Svelte hapi koa Express Matt Stauffer's Blog ××× SIIIIICK ××× PIIIICKS ××× Scott: Caffeine by Michael Pollan Wes: Matt Stauffer - Setting Up Your Webcam, Lights, and Audio for Remote Work, Podcasting, Videos, and Streaming Shameless Plugs Scott: New course on Framer Motion - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
February 24, 2020
In this Hasty Treat, Scott and Wes talk about how to make servers fast! 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:58 - Ram / Memory Things like variables, functions, callstacks, application cache, sessions are all stored in memory Large processes can eat up lots of memory Reading 1,000,000 lines of a CSV npm installing Swap Memory If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection) Garbage collection can take up CPU resourced High-performance databases 7:52 - CPU The processor on your server - the brains of the computer A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks A faster CPU means your node app will start more quickly 9:26 - GPU Most servers don’t have a GPU GPUs are not only good for graphics, but they are great at solving complex tasks Bitcoin mining is fast on a GPU Machine Learning 11:47 - Disk Space SSD vs HDD The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written SSD is more expensive but makes for a much faster application HDD is cheaper and is better for storing larger files that aren’t as time-sensitive An SSD will mean your node app will start faster and serve up files more quickly Links Atlas Digital Ocean 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
February 19, 2020
In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers 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. 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 4:05 - What is Serverless? URL driven Startup/shut down (Heroku works this way) Digital Ocean droplet works differently 8:15 - What are the benefits? Scale up specific functions rather than everything - aka potentially cheaper Security - your singular server instance being hacked is not a possibility Less knowledge overhead required You don’t need to manage your own server Empowers front-end devs to do more Faster deploys Only re-deploy the code that changed 17:05 - What can you host on Serverless? Static Files - SPA (React) Single functions It can be in JS, Python, GO, PHP 18:07 - What can’t you host on Serverless? Entire applications Large apps have slow coldstarts 500mb limit 23:40 - Raw Providers Google Cloud Azure AWS Lambda SAP Red Hat IBM Cloud Functions Cloudflare Workers Kind of cool because they work like service workers where you can intercept any HTTP request 27:33 - Easy Providers + Frameworks Begin + Arc.codes Zeit Now + Next.js Anything + Serverless Netlify AWS Amplify Apex Up - TJ Holowaychuk Open Faas + Digital Ocean Links Heroku Digital Ocean Meteor Galaxy Codepen Radio: Preprocessors and Lambda Zeit Now Wes’ tweet about serverless @maxsteenbergen uses.tech Google Cloud Azure AWS Lambda SAP Red Hat IBM Cloud Functions Cloudflare Workers Begin Arc.codes Severless Netlify AWS Amplify Apex Up Open Faas @tjholowaychuk Scott tries Begin.com SyntaxFM Reddit ××× SIIIIICK ××× PIIIICKS ××× Scott: Matt McMuscles YouTube Channel Wes: Modern Vintage Gamer Shameless Plugs Scott: Scott’s YouTube Channel Wes: Beginner Javascript 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
February 17, 2020
In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects. 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 4:53 - The 411 Previous knowns as Pop Motion Pose Animation library with focus on ease of use Utilizes both spring and duration based animations 7:19 - Pose Pose was previously more pose based - aka you made scenes and toggled between them This still exists within Motion as variants, but isn’t the main way 8:06 - The New New motion.div animate prop is basically a live value for the animation initial for initial state exit for animating out with use of animatePresence Hard stuff made easy drag prop Full control over properties like duration and easing Orchestration features, this then that Variants Multiple scenes allow you to orchestrate many animations with a single state change Handles hover and tap easily Scroll values SVG path animations 19:45 - Final Thoughts Framer Motion is easier React Spring is much smaller React Spring makes very complex animation possible Links Framer Motion React Spring Framer Motion Examples Framer X 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
February 12, 2020
In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more! Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io. 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:30 - What is “codeless”? The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern? All types of jobs are being replaced by computers Truckers Cashiers Lawnmowers Doctors Why not web developers? 7:22 - First experience building sites with a GUI? Dreamweaver 10:18 - Entire website builders: Wix Squarespace Webflow Modulz Grid.io Wordpress Builders 13:17 - When are GUIs useful? Brochure site Basic e-commerce 20:26 - Is a GUI/Codeless always better? It depends what you’re capable of doing 25:21 - Levels of hell GUI assistance in builders CMS - Just modifying content and basic markup Access to code, drag blocks into place No or minimal access to code No modification outside of options 31:36 - Are there GUIs for making applications? Native Mobile Zapier 36:54 - Are jobs at risk? Yes I think a lot of WordPress tinkering has already been replaced The guy who knows what buttons to push is at risk? Webmaster jobs where the roll was just occasionally updating HTML and text No Government Educational institutions Major corporations that can’t have their content stored via a service 39:55 - Our favorite GUIs to help development Scott: Netlify Heroku Studio 3T VS Code Wes: Sketch CSS Export Digital Ocean Cyberduck Transmit ZSH VS Code Links Roomba’s first autonomous lawnmower Notepad++ Geocities Angelfire Sketch Figma Gatsby Excel Meteor Recurly Gumroad Begin.com ××× SIIIIICK ××× PIIIICKS ××× Scott: Baron of Botox Wes: Owlet Smart Sock Shameless Plugs Scott: How To Build A GraphQL API - 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
February 10, 2020
In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy. 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:19 - What are our hobbies? Wes: Focus on one thing, learn it, move along Kombucha, Fermentation and Curing Projects Bike flipping Kids ride on repairs + hacks ATV fixing ICE to Battery conversion Scott: Dance - 15+ years Weightlifting / fitness Video games Watching hockey Design Computing / coding Snowboarding Kung fu movies 9:00 - Why are they good? Fuel your coding project Maybe could even become your key to a job you love They keep your mind sharp Good for downtime Good for mental health and mood Can be meditative Be cognizant of what they do to your mental state Promotes creativity and critical thinking Fun man 17:54 - How do you find a hobby? Wes I always need an end game I want to grow hot peppers I want a wicked ATV for cheap I think batteries are fascinating but I need something real to do Scott - I start with the fascination I think dancing is cool, but I could never learn I think _____ is cool, but I don’t know where to start Deep dark YouTube holes YouTube has an endless selection of educational content Facebooks groups or forums Meetups / volunteering Introverts will have a hard time with this, push yourself 22:50 - What is your hobby? Tweet us @syntaxfm SyntaxFM Reddit Links Oculus Quest 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
February 5, 2020
In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, 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 2:03 - What is it? A little headless computer 5:07 - Drives WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$ 6:25 - RAID 11:17 - Power Backup Time Machine over the network You can upgrade the memory SSDs 22:40 - Backing up your Backups Mirror folders to Backblaze B2 Slow, but worth it 30:53 - Apps Plex + Emby Storage Analyzer Docker - anything really Node js ;) Security cameras Pi-hole or custom DNS server Moments Drive Links Screenflow Synology DS918+ DS219+ WD Red Drives Seagate Iron Wolf Govee Thermometer Now Squizzy Backblaze B2 Plex Emby Storage Analyzer DaisyDisk Docker Node.js Raspberry Pi Dokku Synology vs Blue Iris Moments app Pi-hole Discourse ××× SIIIIICK ××× PIIIICKS ××× Scott: Lululemon Men’s Jogger Wes: DS918+ Shameless Plugs Scott: How to Build a GraphQL API - 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
February 3, 2020
In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer! 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 3:13 - Why it’s needed Make you a better dev Make big tasks easier 7:00 - Why we don’t do it Because it’s hard It’s boring - sometimes It’s not our focus 7:24 - Good command line skills Get around file system Copy, move, delete things 8:58 - Keyboard skills Jump by word/line/BOL/EOL Learn 1 new shortcut per week Custom keybindings for common tasks 14:22 - Communication and interpersonal skills Check out Syntax 125: Hasty Treat - Communication Skillz 14:41 - Time management Focus apps to help How long will something take? Revisit past projects when they are done and see how long it took 16:36 - Good file hygiene Good folder structure Delete old cruft Clear your recycle Desktop and downloads are off-limits Create template structures or tools for commonly used structures Links Wes’ Command Line Power User Course Synology VSCode React PropTypes Generate Syntax 125: Hasty Treat - Communication Skillz CleanMyMac DaisyDisk 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
January 29, 2020
It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, 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. 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/syntax for more info. Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam? 10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics? 12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be? 15:08 - Have you tried Fauna DB? 19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course. 23:58 - A site you’re maintaining is hacked, how do you handle fixing it? 30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers? 34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios? 38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there. 41:50 - Do you write out a vanilla fetch() in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like? 46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so. 51:38 - What do Wes and Scott think about beards and have you ever thought about growing one? Links Syntax 215: Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components r/SyntaxFM/ Fauna Hasura neo4j Wes’ Advanced React Course Pocket Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js Peak Design Everyday Bag Raspberry Pi Extreme ironing ××× SIIIIICK ××× PIIIICKS ××× Scott: Shogun Wheel Yoga Wheel Wes: Velcro Cable Ties Shameless Plugs Scott: How To Make a GraphQL Server - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
January 27, 2020
In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one. 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:16 - Chat options Slack Discord Level Up Tutorials Discord Faster communication 9:00 - Forum based Indexable Searchable Slower communication Discourse Spectrum Facebook groups Reddit Syntax Reddit 27:27 - Commenting systems YouTube comments Comments systems in general Links Github Slack Discord Discourse Spectrum Reddit r/reactjs 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
January 22, 2020
In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year! 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. 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 6:39 - CSS Subgrid 8:10 - CSS Houdini 11:20 - CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all 14:24 - NPM tink installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need 17:25 - Yarn PnP Hard links to eliminate package duplication Shared cache across all projects 18:31 - Pika & Snowpack 21:10 - Deno New Node? 25:39 - React Suspense in more libraries Suspense for Server Rendering Meteor New ownership. v1.9 just dropped with lots of promise for future growth Svelte 3 Vue 3 Apollo Next.js 36:37 - Serverless Going to get easier Begin.com Next.js / Now Functions 38:14 - Gatsby A single useQuery (made possible by suspense) 39:36 - Headless CMS Thunderdome 42:20 - Next Gen Frameworks Keystone Strapi Meteor Vulcan.js 43:46 - Cypress End to end testing Currently no Firefox support, but hopeful for 2020 44:21 - Modulz Exports to JS component 45:00 - Figma Was already amazing in 2019 Constantly improving and adding new features Can import from Sketch Links Syntax 109: CSS Grid Level 2 aka Subgrid CSS Houdini Interactive Introduction to CSS Houdini Tweetdeck Next Generation Package Management tink Pika Yarn PnP Syntax 212: Pika Pkg Snowpack Entropic Deno Ryan Dahl - 10 Things I regret About Node.js https://github.com/denoland/deno Cloudflare Hover Meteor Meteor roadmap tiny Svelte 3 Apollo Nextjs Vue Begin Firefox Keystone Strapi Vulcan.js Prisma Hasura Syntax 209: Hasty Treat - Wes Teaches Scott about Keystone.js Cypress Modulz Framer Figma Sketch James Quick YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: Govee Thermometer Wes: Rack Mount Power Bar Shameless Plugs Scott: Fullstack React and Firebase - 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
January 20, 2020
In this Hasty Treat, Scott and Wes talk about Wes’ new website, uses.tech — the stack he chose for building it, as well as what it does and how to use it! 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 2:23 - What is uses.tech? 5:33 - The stack 8:13 - Avatars 10:43 - Filtering 15:51 - Github actions 19:25 - Favicon 21:30 - Search 22:03 - Hosting Links uses.tech awesome-uses repo Gatsby React Gatsby Node API Clearbit API unavatar Now.sh webserv.nl country-emoji Andrew Luca joi Making setInterval Declarative with React Hooks Netlify Algolia 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
January 15, 2020
In this episode of Syntax, Scott and Wes talk about fitness — how to stay in shape as a developer, nutrition, goals, and more! 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. 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 4:42 - Past year reflections Scott Tried several different lifting Breaking didn’t happen as much, so my cardio took a hit I finally found a full body plan / bro split that has been very effective Weight belt has really helped my form Wes Overcommitted in 2019 Feeling great - physically Gained about 12 pounds past where I want to be - rough year! Noticeable loss in energy when I don’t hit the gym DevLifts since November Cardio / HIIT up 12:15 - What we’re doing now Scott 4 day split Chest/Triceps Back/biceps Shoulders Legs Abs every day Wes 3 days a week Set A - Chest and back Set B - Legs and chest Set C - Legs and back Cardio finisher (BLASTERS) At home helpers Kettle bells Foam roller 30:32 - Nutrition Scott Nothing too hardcore, salads for lunch - not religiously though Good dinners IF occasionally (e.g. not eating before 10 and not eating after dinner snacks) Desert items allowed Wes Macro Tracking - still want to enjoy things Low Carb High on veggies Brussel sprouts Green beans Salads Chickpeas Olives Still super into fermentation, crunchy + sour + fizzy + spicy No sweets either Beer is my downfall 41:04 - Supplements Scott Not doing anything right now other than high quality protein On meds for nerve damage Probiotic Fish Oil Psylluim husk Wes Megafood Men’s Once Daily Multivitamin - they are natural and organic, empty stomach Magnesium Fish Oil Lions Mane Ashwagandha Shilajit 53:49 - Year Looking Forward Scott New gym remodel going to help life Yoga once twice a week Breaking once a week Lifting every day Stretching every day VR Gaming (I burned 400 cals last night playing Super Hot) Goals to dead lift 350, weighted GHR, continue to progress at current rate Make cardio a thing Wes Lose a Few Pounds + Energy + consistency Kettle Bells in office Consistent Gym before life takes a dive Lock down macros Stretches Less beer HIIT Links HeavySet App Syntax 020: Fitness, Nutrition, and Losing Weight Syntax 084: Fitness for Developers Skinny Taste Recipes Daniel Tiger MegaFood Men’s One Daily Multivitamin Examine.com Caffeine App Superhot VR ××× SIIIIICK ××× PIIIICKS ××× Scott: Fitness Blender Bob & Brad YouTube Channel Jeremy Ethier YouTube Channel Wes: TechBoss Torch Lighter 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
January 13, 2020
In this Hasty Treat, Scott and Wes talk about a month of using Firefox — what they liked, what they didn’t, and whether or not they’ll keep using it. 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:42 - Dev tools are really good 19:16 - Browsing experience 22:40 - Setup and switchover tips 26:45 - What we didn’t like 29:57 - Will we stay? Links Firefox Errors in Firefox Debugging messages in Firefox Harald Kirschner GraphQL 1Password WhatsApp Videostream for Chromecast 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
January 8, 2020
In this episode of Syntax, Scott and Wes talk with Fred Schott about Pika Pkg, a new kind of package registry for the modern web. 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:24 - What is Pika? 9:40 - What about peer dependencies? 12:53 - What does migration look like? 17:30 - Are these tools making things easier? 21:25 - What is the Pika Registry? 34:48 - What is the Pika editor? 41:13 - Is it open source? 47:30 - What about security? Links Fred Schott @FredKSchott Pika @pikapkg Snowpack Pika Builders Babel Typescript Webpack CSZ Parcel Deno VSCode Entropic Homebrew Plex Synology NAS Luke Jackson Toolsday Podcast ××× SIIIIICK ××× PIIIICKS ××× Fred: Idle Supermarket Scott: Theragun Wes: Emby Shameless Plugs Fred: Pika 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
January 6, 2020
In this Hasty Treat, Scott and Wes talk about modules in Node — what are they, how they’re different from browser modules, 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:06 - How were they done before? 5:11 - How do they work? 7:07 - How to use Modules in Node 9:57 - Gotchas 13:18 - What should you use? Links Node Node Modules Babel ESM Meteor Keystone MJS 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
January 1, 2020
It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more! Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%. 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 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages? 5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective? 9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework? 12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out? 15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load? 21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks! 25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.? 28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription? 39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)? 44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm? 47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work? Links Lighthouse Syntax203: Hasty Treat - What Are Github Actions? Lighthouse Batch NPM Package Lighthouse Action GitHub Action Next.js haleyfiege.fun/fonts Radnika Next Sipsby Babel Shop Talk Show CodePen Radio Heist Podcast Mixergy The Dream React Podcast Indie Hackers Akimbo Command Line Heroes Blazor Braintree Syntax055: Hasty Treat - User Role Systems Clean Code concepts adapted for JavaScript codecademy Javascript30 CakePHP Drupal WordPress ××× SIIIIICK ××× PIIIICKS ××× Scott: Aerial America Wes: Streamer for Chromecast Shameless Plugs Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
December 30, 2019
In this Hasty Treat, Wes teaches Scott about Keystone.js — best practices, things to avoid, why you should check it out, 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. Show Notes 3:10 - What is Keystone? 7:38 - How do you handle mutations? 14:26 - What’s the hosting situation like? 19:34 - Shortcomings 21:40 - Plugins Links KeystoneJS Prisma Hasura Next.js GraphQL Stripe API WordPress ThinkMail Drupal Redux Now MongoDB MongoDB Compass pm2 TypeScript Apollo Helpers GraphCool 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
December 25, 2019
In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, 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 1:40 - Plans for 2020 Syntax Live March 2019 Plans for 2020 Twitter has done really well for @syntaxfm Community feels great 9:20 - Top 10 Syntax episodes of 2019 Syntax162: The Fundamentals - JS Syntax120: Gatsby vs Next Syntax158: The Fundamentals - HTML + CSS Syntax126: Bootcamps vs School vs Self-Learning Syntax138: What’s New in Web Development Syntax130: The VueJS Show (Scott teaches Wes) Syntax146: CSS the Cool Parts Syntax174: How to Build an API Syntax154: SVGs with Sara Soueidan Syntax106: A Look Forward to 2019 25:17 - Personal stuff Scott Brooklyn Tolinksi 2019 was really tough for me Level Up courses for 12 months Huge changes to my production values and office Huge changes to LUT codebase (React hooks, Typescript, Next.js, Mongoose) Wes New Baby in June / 3 months Paternity Leave Bought a cottage Hardest course to make was Beginner JS — it was a slog, hard to stay motivated at times, with 80 hours of recording alone Course Platform re-write (Next.js) 39:17 - Stuff we learned Scott Better speaker Lots of TypeScript Better debugging Hooks Svelte General improvement in JS writing and programming skills Wes Really good at Vanilla.js DOM API React Hooks Suspense Audio Visualization Shape Detection API - Faces, Barcodes, Text Headless CMS: Prismic, Sanity, WordPress GraphQL, Keystone.js, Hasura Very good understanding of the nitty gritty of JS (closures, objects, this, new keyword, classes, etc.) Links Reactathon freeCodeCamp Podcast CSS Houdini Syntax109: Hasty Treat - CSS Grid Level 2 aka Subgrid Syntax092: React Hooks Dev Mugs TypeScript Svelte Prismic Sanity WPGraphQL Keystone.js Hasura ××× SIIIIICK ××× PIIIICKS ××× Scott: The Dream Podcast Wes: Synology DiskStation DS918+ Shameless Plugs Scott: React & TypeScript For Everyone - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
December 23, 2019
In this Hasty Treat, Scott and Wes talk about launching courses — a behind-the-scenes look at their platforms, processes, best practices, and what it takes to get a course published. 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 2:13 - Scott’s process 8:48 - Wes’ process 20:57 - Additional tips Links Beginner Javascript Level Up Tutorials Figma Tim Smith YouTube Vimeo HandBrake Screenflow Backblaze B2 VS Code 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
December 18, 2019
In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations 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. 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 2:30 - Who is David K Piano? 4:00 - Did you have a background in animation prior to web development? 5:45 - How did you build the CSS Responsive House on Codepen? 8:36 - What are state machines? 14:47 - How does it relate to programming? 17:20 - How do you go about changing states? 20:20 - Is this similar to how RxJS works? 21:40 - How would state machine work in CSS? 29:07 - Perspective in CSS 34:47 - How do you like Twitch vs YouTube? 35:48 - How do you add XState to a current project? 41:42 - Visualizing sate machines 46:15 - Do you have a day job as well? Links @davidkpiano David’s Codepen CSS Responsive House InVision Framer Figma XState RxJS React Apollo Vue.js Javascript30 Tailwind CSS GROQ.dev Keyframe.rs Babel Twitch Keygrame.rs Patreon ××× SIIIIICK ××× PIIIICKS ××× David: Lynn Fisher Scott: The Big One Wes: American Factory Shameless Plugs David: XState and Keyframe.rs Scott: React and Typescript for Everyone - Sign up for the year and save 25%! Wes: Beginner Javascript - 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
December 16, 2019
In this Hasty Treat, Scott and Wes talk about the new 16" MacBook Pro and how it performs as a web development machine. 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 2:24 - Why did the old ones suck? 4:43 - What did we get and why? Wes 32GB RAM 2.3GHz 8-core i9   1TB SSD Scott 64GB RAM 2.4GHz 8-core i9 8gb AMD Radeon Pro 5500M 2TB SSD 9:40 - Is it still the best? The MacBook Pro is the workhorse of developers Keyboard is amazing Screen is even bigger Esc key is back Touch ID is very fast Heat is good Speed is very fast. Great for video editing, recording, etc… Trackpad feels great 15:18 - Still not good: Webcam sucks Ports 16:09 - Y NAWTS: Why not Windows? Why not Hackintosh? Why not iMac? Links 16" MackBook Pro Surface Book Alfred CalDigit TS3 Plus Thunderbolt 3 Dock 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
December 11, 2019
In this episode of Syntax, Scott and Wes bring you an entire episode of sick picks — the 2019 gift guide! 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 3:48 - Gadgets Apple Watch Sabrent Qi Wireless Charger Sony wh-1000xm3 Bose QC35 II Sabrent 8-in-1 hub Satechi Aluminum Multi-Port Adapter Anker 5-in-1 quick charge hub 3 in 1 charge cable Elgato Cam Link 16:59 - Smart Home Automation Google Nest Home Hub Wyze cams + plugs + bulbs Ecobee thermostat Google Chromecast Google Home Smart Powerstrip 27:14 - Laptop Stands 12 South Rain Design mStand Roost Nexstand 29:59 - Phone Cases RhinoShield 30:52 - Mechanical Keyboards Ctrl Keyboard Keychron K1 Code Keyboard 34:34 - Mice Logitech MX Master Mouse 35:27 - Tripods Lammcou Flexible Tripod GorillaPod 37:04 - Cameras Sony a7 III 38:06 - Experiential Massage Float Knife Skills Class Butcher Class Cooking Class 40:08 - Food Cold Brew Coffee Maker Prep Naturals Glass Meal Prep Containers Blue Top Creamy Buffalo Heartbeat Hot Sauce Pineapple Habanero Maldon Salt Weck jars Thick sheet pans Precut parchment Instant Read Thermometer Umai Dry Steak Aging Charcuterie bags Mesh produce bags Beeswax wraps Yeti drinkware 49:24 - Grooming & Wellness Theragun Foam roller Power Blocks Japanese nail clippers Links Anker Deal Extreme Prismic YouTube Channel Shameless Plugs Scott: Level Up Pro - Sign up for the year and save 25%! Wes: Beginner Javascript 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
December 9, 2019
In this Hasty Treat, Scott and Wes talk about Gihub Actions — what they do, why you might be interested in them, best practices 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 2:30 - What are Github Actions? 4:40 - Examples of Github Actions 6:02 - Will Github Actions replace continuous integration services? 9:19 - Libraries Links Codeship Github Actions nextdiff Figma Action 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
December 4, 2019
It’s another potluck! In this episode Scott and Wes talk about tabs vs spaces, coding music, SEO, React vs Angular vs Vue vs Svelte, Rapping, Soy sauce 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 3:18 - Q: I am potentially starting a job as an Angular developer (modern angular). But I am scared that, even though I will continue to stay on the cutting edge in my personal projects, using Angular in my job will make it harder to get a job after that in more modern tech like React. Do you think there is any truth to this? 5:30 - Q: Yo guys, saw soy sauce stirred up quite the controversy…lol. What are some big developer disagreements you guys have? 11:40 - Q: In JavaScript, ! == is the same as ! =, but I was told there was a slight technical difference. I cannot find what the difference is. Could you elaborate on this? 14:17 - Q: What are the rules on using another dev’s repos as a boiler plate? Example: Using Wes’s advanced react starter files to utilize his set up for my own project? 15:35 - Q: What music do you listen to while you code? As an extension, could we crowd source a dev playlist and host it on Spotify? 20:26 - Q: How do you go about working with different technologies and stacks (front-end related) when you have to accommodate for the client or other developers’ biases towards specific things. For example, you have to learn a different set of tools because in a new project someone doesn’t like what you use and says X is a better tool for the job. 23:11 - Q: I know there is no magic SEO silver bullet, but what are some best practices for implementing SEO into your website or web application? 27:26 - Q: When dealing with responsive sites, how do you go about respecting the request in iOS safari to show desktop sites? 28:45 - Q: I get confused about your usage of the word ‘app’. You don’t make iPhone or Android apps, but you often through the word around like “I would create a Node App”, or “Some of the apps I made” etc. Is it just website applications, or how exactly should I interpret “Node App” or “Web App” compared to a mobile app? 31:36 - Q: I wanted to ask your thoughts on transform class properties plugin from Babel? Heard the podcast on react state, I found it mind blowing when setting everything up without constructors. 36:53 - Q: I am a beginner, I have mostly learned front-end so far (HTML/CSS, JavaScript, React). Should I first get pretty good at these before I start learning some back-end? Or, should I actually start learning back-end now and have a basic knowledge of both front-end and back-end? 39:00 - Q: If for some reason React died today and you were no longer able to use it, which framework would you pick up and use full time? Would it be Vue or Angular? Or something new like Svelte? 40:11 - Q: What habits, strategies, or specific tools do you rely on to prevent your hard drives from filling up with useless files? find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 47:20 - Q: Which JS library is most like the Tesla Cybertruck? Links Tailwind CSS Syntax Spotify Playlist Head Bob Spotify Playlist Retired Scenester Metalcore Spotify Playlist DaisyDisk CleanMyMac Backblaze Tesla Cybertruck RxJS SynthWave '84 VS Code Theme RoboCopJS ××× SIIIIICK ××× PIIIICKS ××× Scott: Keychron K1 Mechanical Keyboard Wes: Everlane Uniform Crew Neck Shameless Plugs Scott: Black Friday Sale on All Courses Wes: Beginner Javascript 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
December 2, 2019
In this Hasty Treat, Scott and Wes talk about new CSS Logical Properties. Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io. Show Notes 2:27 - The Box Model 5:32 - Grid and Flexbox 10:17 - Widths and Heights 11:20 - Text Align Links New CSS Logical Properties! Elad Shechter Adam Argyle 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
November 27, 2019
In this episode of Syntax, Scott and Wes celebrate 200 episodes of Syntax with a live Q&A! 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. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 2:27 - With 2020 around the corner, what are your wild predictions for the the future of web design and development? 8:44 - Are site builders going to replace us as web developers? 13:30 - What does the future look like for Syntax? 19:01 - What emerging tech advancements most excite you for the next 5-10 years? 23:27 - What is the future of web hosting? What should hosting companies do differently? 27:40 - Why do you set your base font size to 10px? 32:40 - If you could go back in time, what would you say to yourself? 36:29 - How do you make an iFrame go 100% high? 39:10 - What’s one thing you see developers stress out about for no reason? 44:46 - Do you feel overwhelmed with creating new content when there’s so much already out there? 48:42 - How do you stay sane with your naming conventions? 51:15 - If Gatsby is best for static websites and Next is best for apps, how does Create React App compare? 54:30 - How much is too much or too little magic in a framework or library? 58:11 - Does Kait ever get tired of you buying a bunch of stuff? 61:45 - What is your office setup? 64:01 - How long until we can use Suspense for data loading with libraries other than Relay? Links Pigeonhole Keystone VulcanJS NextJS Gatsby Meteor Wix Squarespace Modulz Figma Sketch Framer Netlify dnsimple Digital Ocean AWS Heroku Syntax016: Rems vs Ems Seth Godin Notion Laravel Blaze Relay SWR Suspense Project Farm YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: The Missing Crypto Queen Wes: Bosch Wiper Blades Shameless Plugs Scott: React and Typescript Wes: Beginner Javascript Black Friday Sale - Get 50% off! Scott’s Courses 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
November 25, 2019
In this Hasty Treat, Scott and Wes talk about making courses — techniques, best practices, things to avoid, 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:07 - Validating your ideas 4:44 - Generating ideas 6:38 - Figuring out which ideas will stick 10:00 - Show your expertise 14:02 - Pay attention to what’s popular 15:50 - Collect email addresses Links Microsoft Excel Stream Highlights Refactoring UI Adam Wathan Steve Schoger Scott’s Svelte 3 course Wes’ Sublime Text articles 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
November 20, 2019
In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. 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/syntax for more info. Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax. Show Notes 2:43 - Gather info What is this thing trying to do? Use tools DevTools are your best friend during this phase 8:01 - Know where to look (and use tools) Dev tools for client side Error logs Sentry LogRocket The most experienced people in any field know how to ask the right questions. Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve. 10:00 - Look at the end game What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture. 13:17 - Read Again Error logs provide the best clues. Read them closely. Actually read your code — don’t skim it. Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts. 18:08 - Make it simple (break it into smaller parts) Limit the number of inputs and outputs Get it working in a limited capacity (e.g. safe mode, Codepen, etc.) Comment out major sections of code until you have a working example Does this problem exist outside of the framework? Does this work in a clean environment? 25:35 - Take yourself out of your environment You should be able to take a look at the problem at all zoom levels Does it work locally but not on the server? Does it work in other browsers? 27:32 - Stay calm It’s easy to get nervous or worked up when the stakes are high It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath Take a shower, lift weights (seriously) 30:14 - Talk it over Getting the perspective of another developer can be invaluable 32:28 - Make things obvious Use debugger or label logs — don’t let it be ambiguous For CSS bugs, use primary colors to make things stand out Use the right tool to make the problem stand out Layers for CSS issues Network for network issues Performance tab (etc.) 35:12 - Use Git correctly to free up your techniques If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix. 36:10 - Don’t jump at solutions Take the time to fully dissect the problem Question you assumptions It can’t possibly be a problem with ____. Well maybe it is. Wes once spent hours trying to diagnose a check engine light when the gas cap was lose. 43:51 - Get good at pattern matching This comes with experience When did this problem start? Did we deploy any code? Did we change any logic? 44:54 - Get good at googling Being able to describe your problem is key. Search the error from Firefox Links DevTools Sentry LogRocket CodePen Syntax 154: SVGs with Sara Soueidan @walpolea Syntax 152: Debugging Tools + Tips @bowlendev @dan_abramov Ryan Dahl on creating Node.js @LaurieonTech Firefox DuckDuckGo ××× SIIIIICK ××× PIIIICKS ××× Scott: Jeremy Ethier Youtube Channel Wes: Marpac Rohm Sound Machine Shameless Plugs Scott: Typescript in React Course - Sign up for the year and save 25%! Wes: Beginner Javascript 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
November 18, 2019
In this Hasty Treat, Scott and Wes talk about tips for writing good CSS. Sizzy - Sponsor Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co. Show Notes 4:08 - Use a system 4:50 - Use overrides and cascading Embrace the cascade Don’t rewrite the same CSS over and over again Understand why scoping is good 9:07 - Nail down typography early You can always revisit if it isn’t what you need 10:36 - Pick a pattern and stick to it BEM Functional CSS CSS in JS 14:39 - Don’t style based on element type (kind of) — a class should describe the component 17:09 - Good naming techniques Describe what it is, not what it looks like Thing ThingChild ThingChild-modifier Scale sizes (e.g. s, m, l, xl) 21:43 - Other tips Group like CSS together Chunk into different files Write good comments CSS properties FTW Links Stylus Webpack Parcel 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
November 13, 2019
In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! 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 6:35 - Our backgrounds in design 12:41 - Foundations Consistency makes a big difference Use “training wheel” tools until you are confident Always work within a system Less is more - subtle is better 19:39 - Color Color theory Complementary colors and shades Stick to color pallet generators until you are good enough 28:51 - Spacing More spacing than you think you need Vertical rhythm Letter spacing: -1px Consistent margin and padding 34:47 - Typography Sans vs serifs Finding fonts Use proven combinations until you know your way around 41:49 - Interaction Design for all states (e.g. standard, visited, active, hover, etc.) Animations should be quick Interactions should make sense 45:04 - Concerns beyond visuals Accessibility via color contrast Thin fonts and light grey are awful Think about the poor Windows users 48:47 - Inspiration + Resources Take inspiration from the best — you’ll find your own voice after enough work Go easy on trends - blobby characters with purple hair Take a trip around the world wide web Stripe Dribbble Site Inspire codrops Refactoring UI Links Designer Starter Pack - Andrea Crofts LastPass Colour Lovers Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google Bloomberg Dropbox FontPair FontJoy Figma - Google Font Pairings Type Scale Creative Market Radnika Next Stripe Dribbble Syntax 72: Accessibility Firefox Site Inspire codrops Refactoring UI Adam Wathan Steve Schoger ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Magnesium Shameless Plugs Scott: FullStack React with NextJS - Sign up for the year and save 25%! Wes: Beginner Javascript 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
November 11, 2019
In this Hasty Treat, Scott and Wes talk about domain names — buying and selling, best practices 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 2:50 - Buying a domain 10:47 - Selling a domain 13:50 - Transferring a domain Links who.is GoDaddy JavaScript.co BeginnerJavaScript.com LearnNode.com BeginnerJS.com KitBos.com Cloudflare Learn.li Learnli.co Escrow.com Hover Bob.com Sedo.com Park.io 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
November 6, 2019
It’s another potluck! In this episode, Scott and Wes answer your questions about Gatsby vs Next, Google Home and privacy, flat file CMS, working with designers, CSS frameworks and more! 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/syntax for more info. 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 6:15 - Q: Curious if you would ever consider running your course platform on Gatsby instead of NextJs? If not, what dynamic content would prevent you from doing so? 10:48 - Q: What’s the difference between a software developer and a software engineer, in your opinion? 13:11 - Q: How do you deal with designers who design without any thought about how dev will implement it? 15:46 - Q: I saw that Wes has an example in one of his slides where the Array prototype is written onto the Nodelist prototype. Is this safe enough for production as it overrides all regular NodeList behavior? 19:18 - Q: In a potluck episode you mentioned that you do not host your clients’ website. If you don’t host you clients’ website how do you usually go about handling clients that are less tech savvy? Or do you avoid those types of clients? 21:30 - Q: I know you guys (especially Wes) have been pretty insistent recently on not hosting clients’ sites yourself, but what do you guys think about continuously hosting client sites with a service like Netlify? It’s highly unlikely to go down and scales all for you, so it might be a bit of reoccurring income if you bill them yearly for the minimal Netlify fees. 24:44 - Q: I was listening to your episode on “The Smart Home” and I’m very interested in buying a Google Home Mini myself. However, I cannot stop thinking about the privacy implications of an always listening device around the house. What are your thoughts on this topic and on privacy related to online services in general? 29:08 - Q: What are your thoughts about using a CMS that uses flat files vs one that uses a traditional MySQL or Postgres database for a company blog that won’t have insane traffic? We’re currently evaluating Grav CMS and Craft CMS. 32:17 - Q: Have you used data attributes as custom elements in CSS and JS? 37:32 - Q: Why do so many people jump on styled-components/CSS in JS? Are these all people who have never used Sass/SCSS?! It seems like such a PITA to get Sass working with either of these. It feels like coding tables vs HTML 5. To me it seems like a step backwards. 44:26 - Q: When do you, if ever, reach for a component library, like Material or Bootstrap? Currently working a corporate job where it’s almost expected to use one of these for all internal applications. I usually prefer to make my own, but I’m wondering if I’m just making my life more difficult than it needs to be? Any advice? 48:30 - Q: Could you guys chat about Git clients and which ones you guys use and why? Or are you guys hardcore terminal geeks? Links Gatsby Next.js Bling.js Syntax 118: The Smart Home Grav CMS Craft CMS prismic Sanity Contentful Tiny CMS Forestry Airdale Chemical Material Bootstrap VS Code ××× SIIIIICK ××× PIIIICKS ××× Scott: HeavySet - Gym Workout Log Wes: Baroness Von Sketch Shameless Plugs Scott: FullStack React with NextJS - Sign up for the year and save 25%! Wes: Beginner Javascript 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
November 4, 2019
In this Hasty Treat, Scott and Wes bring you more web dev horror stories! 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 2:26 - Perf Woes 3:42 - Always Backup Your Backups 4:54 - Kill Children 6:03 - Robots Don’t Eat Food 8:32 - Email Goof Up 9:44 - Hundreds of Thousands of Date Issues 10:46 - Spooky August 12:32 - You’re up to .bat 13:17 - Printed Code 15:12 - ThinkGeek 16:12 - It would take a while to Ketchup on all these orders 17:05 - This story makes me want to stick my head in async 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
October 30, 2019
In this episode of Syntax, Scott and Wes talk about web dev horror stories — things you can only hope will never happen to you! 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. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 2:09 - Scott’s Disastrous Git Clean 4:35 - Magic Updates the Gathering 8:52 - YAAAAS 9:37 - Token Trouble 12:16 - jQuery Plugins 15:22 - Success! 18:00 - Parental Advisory 21:47 - Students Changing Grades 22:46 - Lorem Sh!tsum 26:22 - Drowning in a Waterfall 28:53 - Magneto Upgrades 30:00 - JOHN CENA 33:24 - Migration Migraine 35:39 - Primary Key Nightmare 36:26 - The $20,000 YAML formatter Links Adam J. Sontag jQuery GitLab Gitlab Database Incident Magento Meteor ××× SIIIIICK ××× PIIIICKS ××× Scott: Dyson Hand Vacuum Wes: /r/ AbsoluteUnits Shameless Plugs Scott: Fullstack React with JS9 - 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
October 28, 2019
In this Hasty Treat, Scott talks about moving to iPhone — his experiences with both Android and iOS, the advantages and disadvantages of both, 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 1:59 - My device history OG Droid → Nexus → Pixel Misconceptions of android It’s Windows for phones It’s cheaper or not as nice 5:03 - Why switch? 6:39 - Who wins what? Android Homescreen Low light photography Usability Squeeze assistant Google search integrated everywhere Search Keyboard Notification iOS Apps Performance Camera overall Device quality Fun stuff Haptics Links 1Password LastPass Gboard 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
October 23, 2019
In this episode of Syntax, Scott and Wes talk with Brad Touesnard of Delicious Brains about migrating, deploying, and hosting WordPress. 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/syntax for more info. Hasura - Sponsor Hasura is an open-source GraphQL engine that helps you instantly setup a scalable and realtime GraphQL backend. Hasura makes your team super productive by dynamically composing a schema backed by databases and services that you can securely query from frontend clients. Get started at hasura.io to try it out in 30 seconds! Show Notes 3:50 - Why did start Delicious Brains? 5:25 - What plugins does Delicious Brains make? 11:40 - Migrating WordPress 16:50 - Migrating databases 24:20 - How do you do version control with WordPress? 37:06 - What’s the easiest way to deploy and host WordPress? 40:23 - What are some examples of managed WordPress hosts? 46:58 - What does your deployment process look like from beginning to end? 50:22 - Thoughts on headless WordPress 53:12 - Is serverless WordPress a thing? Links Delicious Brains WP Migrate DB Pro WP Offload Media WP Offload SES SpinupWP Heroku Now.sh WP Engine Flywheel Advanced Custom Fields Composer WP Packagist WordPress.org React Laravel Pagely Kinsta GoDaddy WordPress.com SiteFround Buddy Digital Ocean Laravel Forge npm Codeship Gatsby Laravel Vapor Installing via Composer WordPress deployment workflow Managing your WordPress site with Git and Composer ××× SIIIIICK ××× PIIIICKS ××× Brad: Teppanyaki Grill Scott: Succession and The Righteous Gemstones Wes: Magnatiles Shameless Plugs Brad: All Products Scott: Svelte For Beginners - 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
October 21, 2019
In this Hasty Treat, Scott and Wes talk about server side rendering — what it is, how to use it, best practices, things to avoid, 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:20 - What is SSR? 4:16 - Why SSR at all? 8:39 - Platforms that do SSR out of the box 11:18 - Gotchas useLayoutEffect import { useEffect, useLayoutEffect } from 'react' const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect export default useIsoLayoutEffect 18:20 - Tools Links Next.js Gatsby Webpack Parcel Meteor React NoSSR component Syntax 127: Hasty Treat - React Suspense 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
October 16, 2019
In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side. 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 2:53 - Requests and responses 9:21 - What is a server? 10:33 - Ports 13:50 - Database connection and interaction 15:16 - Cookies and sessions 15:48 - Writing files and directory permissions 19:34 - Headers 22:13 - Error Handling 22:50 - Logs 25:04 - Async data handling 26:33 - Routing 30:44 - Mime types 36:26 - Authentication 37:49 - Environmental variables 40:37 - Deployment 43:24 - Advanced Links GraphQL Node React For Beginners Next.js Meteor Papertrail pjax jQuery Github iMazing HEIC Converter Now.sh Netlify Twitter streaming API B is for Build ××× SIIIIICK ××× PIIIICKS ××× Scott: Samcrac YouTube Channel Wes: Wyze Plugs Shameless Plugs Scott: Svelte For Beginners - 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
October 14, 2019
In this Hasty Treat, Scott and Wes talk about their experiences with float tanks! 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 2:28 - What is a float tank? 6:47 - What are the benefits? 8:50 - How did you feel during the float? 17:28 - Would you do it again? Links The Joe Rogan Experience 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
October 9, 2019
It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, 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. 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/syntax for more info. Show Notes 3:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time? 9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application? 13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach? 15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use. 23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail? 27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have? 35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here? 38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing? 43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them? Links Flexbox React Native CSS Grid Normalize iTerm2 zsh Fish Hyper Wes’ Command Line Power User Course Overcast Pocket Casts Planet Money Joe Rogan The Indicator ××× SIIIIICK ××× PIIIICKS ××× Scott: Garmin vivoactive 3 Wes: Untitled Goose Game Shameless Plugs Scott: Svelte For Beginners - Sign up for the year and save 25%! Wes: Wes’ Instagram 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
October 7, 2019
In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, best practices, 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 4:06 - Wes: Features are logged into software (Github, Jira, etc.) I use a Kanban board - I bubble them up and down in the order in which I want to release them I don’t plan for Q1, Q1, etc… Tear off an issue, tackle it, test and deploy. 10:39 - Scott: All issues/features get a priority tag (e.g. p1 → p4) regardless of the system Bugs go in Github Features and platform improvements go in Notion Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.) Links Github Trello Kanban Jira Canny Notion Getting Things Done 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
October 2, 2019
In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase. 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 0:57 - What is Missive? 6:10 - What is the desktop app built in? 9:44 - Did you use any particular libraries for the front-end? 11:44 - How are you managing state? 13:37 - Is it challenging to do all of this in JS? 15:07 - What was the catalyst for the “multi-conversation swipe”? 21:32 - What is the mobile app built in? 24:00 - What are the advantages of Cordova? 30:30 - How do you manage offline/syncing/etc. so well in a JS app? 34:56 - How do you test it? 36:52 - Have you looked into Cypress? 39:35 - How do you style it? Links @EtienneLem Missive Spark CoffeeScript Backbone Redux Typescript Electron Webpack Javascript30 Cordova React Native Fastlane Amazon S3 Cypress Sass TailwindCSS Svelte Syntax 176: Building Steam Games with React ××× SIIIIICK ××× PIIIICKS ××× Scott: Disgraceland Podcast Wes: Wagner 590 Spray Gun Etienne: Prettier Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Etienne: Missive 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
September 30, 2019
In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, best practices, 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 2:03 - Habits we’re trying to build Scott Focus on one project at a time Alfred tasks to quit apps and block sites Not being efficient with my time Daily todo lists and utilizing calendar Too much screen time Listening to music in the background instead of having the TV on Wes Flossing Mindless context switching 13:37 - General strategies for building habits Make them trackable Easy enough to not ignore them Quantifying them is key Make them small enough Be accountable Tell other people your habits and have them remind you about them Replace bad habits with good things Design a sticker Reply to three emails Drink some water Celebrate your wins productively Keep the streak alive Can’t do x until y is done Links uhabits Done Loop K-Safe Alfred Codepen Atomic Habits The Power of Habit 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
September 25, 2019
In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb. 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/syntax for more info. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:03 - Backend Express Node GraphQL MongoDB 14:45 - Frontend React Next.js Styled components Stay as close to real CSS as possible 22:39 - Deployment process Serverless Now Ideally one app that handles everything 28:38 - Email Syntax Ep 32: Designing, Templating, Inlining and Sending Email mjml Juice Inky Nodemailer Postmark Mailjet Mandrill Get everyone set up and working in two different systems, so you can switch easily if something goes wrong 33:32 - Users / Auth / Cookies / Permissions Use something a pre-existing package or service rather than role your own (though it can get expensive quickly) Passport Auth0 accounts-js 38:48 - Images Cloudinary imgIX 41:50 - Other things to be aware of Handling cash Stripe PayPal Braintree Recurly Queueing Links Ruby on Rails Django Meteor MySQL PHP Postgres Mongoose Drip ConvertKit Feathers David Luecke Tweetdeck Next.js react-router Reach Router Gatsby Digital Ocean Heroku Redux Svelte Gridsome Mailchimp ××× SIIIIICK ××× PIIIICKS ××× Scott: K-Safe Wes: Bon Appetit YouTube Channel Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: Flexbox.io 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
September 23, 2019
In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, 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:16 - Alfred workflows 9:32 - Smart home routines 13:16 - Bash scripts & aliases 18:43 - Other Links Alfred Wyze Cam Google Home Drip Divvy 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
September 18, 2019
It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries 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 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)? 11:30 - Q: What is your opinion on AWS Lambda functions? 15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date? 21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship? 30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job? 36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’? 41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax? 44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector? 46:39 - Q: What the best way to handle media queries in Gatsby with styled components? Links Webpack Parcel Gulp Codeship Semaphore r/reactjs r/webdev Wordpress Upwork Fiverr Svelte Syntax 173: Hasty Treat - Wes & Scott Look At Svelte 3 Firefox CSS Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: DIY Air Filter Box Fan Air Filter Wes: Ripride with Andy Roy - Episode 6 with Steve-O Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - 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
September 16, 2019
In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains. 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:55 - The rules of the game We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? -5 points What country, business, or type of business is it for? -5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ is scott.___ and wes.___ available? -10 for each 5:40 - .BO 7:51 - .BZH 9:50 - .BANANAREPUBLIC 11:15 - .BABY 14:04 - .KR 16:09 - .MOTO 17:25 - .AW 19:16 - .IM Links 101Domain 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
September 11, 2019
In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, 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 5:42 - Recording Wes: Screenflow Uberlayer Loopback Heil PR40 Heil PL-2T dbx 286s Focusrite Scarlett 2i2 Scott: Screenflick iShow HD Divvy Principal for Mac EV RE-20 dbx 286s Focusrite Scarlett 2i2 Sony a7 III Logic 33:04 - Editing Wes: Screenflow Speed up slow typing Edit out some goof-ups (but not all) Edit immediately after recording so I’m in the same headspace and can easily re-record Scott: Hire a video editor Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think Normalize audio DaVinci Resolve 16 42:31 - Hosting Wes: Wistia Vimeo Rev Backblaze Amazon S3 My own course platform, with additional controls added via React Scott: YouTube Vimeo Plyr Video Player Backblaze Amazon S3 Custom course platform 52:46 - Common Questions Links Syntax 014: Our Stacks Explained Adobe Premier Pro Figma VS Code Audio-Technica AT2020 Blue Bluebird BSW Sweetwater Tim Smith - Video Editing ××× SIIIIICK ××× PIIIICKS ××× Scott: Hyperdrive Wes: PicQuic Screwdriver Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - 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
September 9, 2019
In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices 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:43 - Servers need to be started and baby sat 4:48 - There is no built-in file system based routing 6:34 - Some "gotchas" 7:02 - Functional programming 8:17 - Async vs sync 11:11 - Event lifecycles 12:09 - Dependencies 14:17 - Keyed arrays Links Wes’ tweet thread Forever PM2 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
September 4, 2019
In this episode, Scott and Wes talk with Drew Conley about building games with Javascript. 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 1:58 - What is Danger Crew? 5:25 - Did you have a background in game dev before this? 8:36 - What were the initial resources you went to to make a game in React? 10:27 - How much of it is Canvas? 13:06 - What other libraries are you using? 14:00 - How did you lay out the environments? 16:35 - How is text rendered? 22:40 - How did you do all of the animation? 26:08 - What performance issues did you run into? 27:31 - How do you handle user states and saves? 29:21 - Is there any server side aspect? 30:42 - What was the process for creating the level editor? 34:38 - How did you publish the game / wrap it as an executable to sell? 38:16 - How do you update it? 39:43 - How difficult was creating the game logic? 41:20 - The dev theme in the game is super prominent, did that make working on it more fun? Links Steam Danger Crew aseprite Buy Danger Crew Drew Conley Pixels to SVG GameMaker Making an editor Electron ××× SIIIIICK ××× PIIIICKS ××× Drew: Strange Planet Instagram Wes: MX Master Config Tweet Thread Scott: Figma Shameless Plugs Drew: Danger Crew Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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
September 2, 2019
In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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:54 - What is the difference between NULL and undefined? 5:40 - What is short circuit evaluation in JS? 7:25 - What is use strict? 9:07 - What is the only value not equal to itself in JS? 10:36 - When would you create a static class member? 11:54 - What is a pure function? 13:08 - What is JSONP? 14:24 - Describe the layout of the CSS box model? 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 earlier episodes...
    15
    15
      0:00:00 / 0:00:00