Logo
    Search

    web_development

    Explore "web_development" with insightful episodes like "761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar", "733: Egress, scraping, Safari EU changes, is SetInterval worth it?", "Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits", "CSS Trends Almanac for 2022 Part 2" and "Browsers, Engines, Support and the Other Guys" from podcasts like ""Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats", "Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

    Episodes (16)

    761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar

    761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar

    Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    733: Egress, scraping, Safari EU changes, is SetInterval worth it?

    733: Egress, scraping, Safari EU changes, is SetInterval worth it?

    In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits

    Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits

    In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more!

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    CSS Trends Almanac for 2022 Part 2

    CSS Trends Almanac for 2022 Part 2

    In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web.

    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.

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Browsers, Engines, Support and the Other Guys

    Browsers, Engines, Support and the Other Guys

    In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    MagicBell - Sponsor

    MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

    Show Notes

    Tweet us your tasty treats

    Our Web Dev Wish List

    Our Web Dev Wish List

    In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already!

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

    Show Notes

    • 00:11 Welcome
    • 02:20 Write Custom animation transitions
    • 03:32 date input translate to JavaScript date
    • 06:48 Smooth and animated drag and drop
    • 08:35 TypeScript Interfaces are faster than Types
    • 10:35 Request animation frame
    • 12:52 Custom Elements / Web Components
    • 13:52 Authentication
    • Web Authentication API
    • 16:12 Sponsor: Linode
    • 17:48 useIsomporphic vs useLayoutEffect
    • 19:48 useEffect dependency array
    • 21:27 fragments without fragments
    • 24:46 Overflow hidden without hiding shadows
    • 27:11 Fluid text
    • 28:52 Sponsor: Sentry
    • 29:34 translate3d vs translate
    • 30:59 Gradient borders
    • 33:33 Independent transforms
    • 36:16 animate height auto
    • 38:40 Sponsor: Freshbooks
    • 39:02 Auto synced deps when changing package file
    • 40:36 Peer dependencies
    • 42:32 VS Code Reload after plugins install is kinda annoying
    • 43:04 Safari updates
    • 44:20 Apps checking for passwords
    • 45:02 File name casing as changes
    • 45:56 Better sounding commit names
    • 46:33 Test runner that is the same and just works
    • 47:32 SIIIIICK ××× PIIIICKS ×××

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Potluck - Working on a Team × Dealing with Imposter Syndrome × Animating on the Web × Icon Libraries × Demanding Clients

    Potluck - Working on a Team × Dealing with Imposter Syndrome × Animating on the Web × Icon Libraries × Demanding Clients

    In this potluck episode of Syntax, Wes and Scott answer your questions about working on a team, dealing with imposter syndrome, animating on the web, using the table element, landing pages for apps, and building full stack apps with NextJS.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    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.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Syntax Highlight

    Syntax Highlight

    In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, and more!

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    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.

    Tabnine - Sponsor

    Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code.

    It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours.

    Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams.

    Show Notes

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats

    Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

    Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

    It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, more!

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Auth0 - Sponsor

    Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax

    Show Notes

    02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not?

    06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app?

    11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers!

    16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness <3

    20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts?

    22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts?

    27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much!

    33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea.

    36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration.

    38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw.

    40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account.

    47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.”

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    How to Build a Website — The Show For Beginners

    How to Build a Website — The Show For Beginners

    In this episode of Syntax, Scott and Wes talk about the basics of building a website — how to get started for beginners!

    Freshbooks - Sponsor

    Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

    Sentry - Sponsor

    If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

    Mux - Sponsor

    Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.

    Show Notes

    04:20 - HTML

    • HTML is the language you write to get text and elements to show up on the screen
    • Elements can describe the content they contain
      • p
      • img
    • Or be structural and describe the areas of the website
      • div
      • h
      • header, footer
    • Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements
    • HTML elements have default styling applied to them before you write any CSS
      • This comes from the browser and can be manipulated
      • However, by default all elements are either block or inline-display

    08:11 - CSS

    • If HTML is the bones, CSS is the clothes and skin
    • CSS dictates how a website looks
      • Without CSS, you have text on a blank page and images
    • CSS stands for Cascading Style Sheets (“cascading” being the key word)
    • Adding CSS to a page
      • Link tag
      • Style tag
      • Inline styles
    • Selectors
      • You can select an element on the page via element, class, id, attribute
      • Syntax is selector, brackets, property, value
    • Property
      • A property is what you are changing (e.g. background-color)
    • Value determines how the thing looks
      • background: red;
    • Specificity
      • Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS.
      • People develop systems like BEM to organize this
      • General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling.
      • !important exists to override everything, but as a general rule, NEVER use it. Seriously.
    • Some interaction
      • Most interaction is done in JavaScript, but CSS has some basics
        • hover, active, focus
    • Pseudo selectors
    • You’ll often see people reaching for libraries to make CSS easier and more consistent
      • Common examples are Bootstrap, Foundation, and TailwindCSS
      • For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS.
    • In addition to properties, you can now write your own custom properties for CSS.
      • While this could be seen as an advanced technique, I believe the new normal is CSS variables first.
      • CSS variables are indicated by —variableName: value; where variable name takes the place of a property.
      • You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet.

    37:08 - JavaScript

    • JavaScript is used to add interaction to a website
    • It makes your website dynamic

    JavaScript the Language

    • We have a base programming language that has nothing to do with HTML
    • It has things like:
      • Variables - ways to store things
      • Numbers + Math
      • Data Containers - Objects and Arrays
      • Functions - Code grouped together to achieve a certain purpose
    • It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things:
      • Formatting time + money
      • Alerting the user
      • Logging a value to developer tools
      • Capitalizing things
      • Sorting lists of things
      • Round or randomize numbers
      • Fetch data
      • Talk to a sever
    • Promises
      • Logic and flow control

    JavaScript the DOM

    • When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model)
    • Events
      • JavaScript is mostly event-driven - when something happens, do something else
      • When you click something and want something else to happen
      • There are lots of events
        • mouse, touch, pointer
        • Ready
        • Forms
          • Submit, change, keyboard, etc.
    • Can be used to fetch data
      • fetch() - you’ll often hear it called Ajax, or XMLHttpRequest
    • Can be used to make more HTML
      • Whole set of APIs for creating elements
    • The DOM can be traversed

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Hasty Treat - Ask Us Anything!

    Hasty Treat - Ask Us Anything!

    In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, 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.

    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

    03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed?

    05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast?

    09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects?

    10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses)

    12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing.

    16:07 - What would be doing for a living if not a developer?

    17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time?

    24:18 - Vue or React? Which do you think will be the top? And should developers learn both?

    Links

    Tweet us your tasty treats!

    Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

    Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

    It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, 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.

    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.

    Linode - Sponsor

    Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.

    Show Notes

    02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more.

    04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice?

    11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it?

    18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical?

    22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects!

    25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch?

    30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc.

    35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal?

    40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose?

    47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming?

    55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users?

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    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!

    Meteor's 2nd Life

    Meteor's 2nd Life

    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

    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 }

    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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    What's New in Javascript

    What's New in Javascript

    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

    1. Integer keys in ascending order (and strings like “1” that parse as ints)
    2. String keys, in insertion order (ES2015 guarantees this and all browsers comply)
    3. 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

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Hasty Treat - Spooky Stories

    Hasty Treat - Spooky Stories

    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!

    Our Workflows: Design, Development, Git, Deployment

    Our Workflows: Design, Development, Git, Deployment

    It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.

    Coffeecup’s CSS Grid Builder Tool

    Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

    VueSchool.io's Vue.js Masterclass

    Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

    Show Notes

    4:00 - Design Workflow

    • Wes:

      • Screenshots of look + feels
      • Sketch layouts out in pencil
      • Mock up layout in Sketch
      • Once rough layout is done, I refine
      • Once I have: colors, type, patterns, textures and overall layout, I move to code.
      • A design program is important to vs designing in code
    • Scott

      • Mirrored component structure in Figma
      • Using Ideas from Atomic design and React components
      • Goal is for Figma components to be 100% mapped to styled components
      • Flexible and testable in different layouts
      • My design philosophy is refinement through iteration
      • Light theft

    15:55 - Design to Dev Workflow

    • Wes:

      • Happy with design so far
      • Setup tooling - styled components, stylus, sass…
      • Setup type, variables, partials, resets…
      • Do as much HTML as possible before styling
      • CSS it up for layouts, then go section by section
      • Broad first, then zoom in on finesse
      • Browsersync / Hot Reload
      • Test across browsers / Devices
    • Scott:

      • Define parameters in Figma
      • Styled components in React, hand write that CSS bruh
      • Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components

    32:06 - Git Workflow

    • Wes:

      • Tear off a branch - name after issue - DEV113
      • Do your work
      • Rebase
      • Squash
      • Pull Request
      • Rinse + Repeat
    • Scott

      • Master branch is 1-1 with live
      • Develop is where work is done (but not really because I make a feature branch for each feature and merge in)
      • Contributors issue pull requests into develop

    42:34 - Deployment Workflow

    • Scott:

      • Hosted on Meteor Galaxy, container based hosting
      • Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.
      • Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master.
      • Secrets are kept in a settings.json file that’s used during deployment.
    • Wes:

      • Codeship
      • DeployHQ
      • Git
      • Rsync
      • Dealing with secrets

    49:53 - Project Folder Structure

    • Wes:

      • Folder Structure - 0100, 0101…
    • Scott:

      • API
      • UI
        • element -> styled components with index
      • Startup
      • Utilities

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!