Syntax - Tasty Web Development Treats6 Okt 2021

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 https://kit.svelte.dev/ https://www.cypress.io/ https://www.svelteradio.com/ https://www.digitalocean.com/blog/ https://caddyserver.com/ https://daringfireball.net/ ××× SIIIIICK ××× PIIIICKS ××× Scott: LuLaRich Wes: Flame Bulb Shameless Plugs Scott: Web Components 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

Upptäck Premium

Prova 14 dagar kostnadsfritt

Skaffa Premium

Avsnitt(970)

754: How to Level Up Your Web Development Career

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career. Show Notes 00:00 Welcome to Syntax! 00:17 How can a front-end developer advance in their career? 01:10 Brought to you by Sentry. 01:30 Syntax newsletter. Snack Pack 02:02 How do you get better at being a developer? 02:22 Asking questions. 08:09 Get your hands dirty. Hot Tips, Cool Treats 14:07 Share what you know. 17:35 Target your skills for what is needed. Ryan Carniato Tweet Episode 577 Justin Fagnani Tweet Episode 595 21:12 Get out of your comfort zone. 26:55 Getting a better job. 27:27 Understand the stakeholders. 29:18 Find the metric the business cares about and do that. 30:01 Make an impression as being the person that gets things done fast and reliably. 31:47 Improve communications. 35:04 Be the person they want to have in meetings. 37:44 Use systems and tools to help your deficiencies. 39:01 Dress to impress. 39:32 Care. 39:40 Cut the cynicism. Energy Vampire 42:16 Don’t put bad stuff out into the world publicly. 44:29 Get your camera + mic dialed in. 46:23 Leveling up at life. 46:32 Take care of your shit. 47:40 Exercise. Episode 748 47:57 Eat well. 48:22 Sleep as much as you can. 48:26 Clean your workspace. 49:17 Learn new skills. 49:31 Take care of yourself. Habit Path 54:09 Sick Picks. Sick Picks Scott: Zeiss Lens Care Pack Wes: Woosh Screen Cleaner 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

10 Apr 202457min

753: Cache Ruins Everything Around Me

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching. Show Notes 00:00 Welcome to Syntax! 01:22 Syntax is on YouTube. 02:16 Let’s talk about the cache problem. 03:33 User-specific data and caching security. 06:27 Why might this pop up? 06:29 Marketing A/B testing - cookie based. 06:55 User-selected features - such as themes. 06:58 Language or geo-based items - accept language. 07:11 Images - WebP for some browsers, jpg for others. 07:45 JSON/HTML based on accept header. 08:17 Different encoding. 08:26 Content negotiation. 08:54 The solutions. 09:04 Provide different URLs/Query parameter. 11:19 Don’t cache the page, cache the data based on query. 15:01 Implement a “Cache Key” - one render for every option. Netlify Fastly Cloudflare 18:17 Use edge logic. 19:52 Just do it client-side. 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

8 Apr 202424min

752: React vs Vue vs Angular with Corbin Crutchley

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development. Show Notes 00:00 Welcome to Syntax! 00:48 Who is Corbin Crutchley? 02:08 Brought to you by Sentry.io. 02:32 Hilton, like the hotel? 05:57 What is the best framework? 07:23 How do you compare these frameworks? 10:00 Do you feel like the metaframeworks are comparable? 11:02 Exciting announcements from ng-conf? 11:42 Are Wiz and Angular merging? 14:17 Angular signals and Vue comparison. PreactJS Signals 17:53 Adding signals to vanilla JavaScript and browsers. 21:02 What is derived state? 23:11 How can we store state within these different frameworks? 24:37 Passing children. 26:40 Which has the best implementation for passing children? 28:52 What’s the approach for building framework agnostic components? TanStack Store 30:31 How much of it is framework specific? 31:35 Headless or DOM-based? 32:48 What are the best practices for writing this? 35:28 What’s the biggest framework pain point? 36:21 Is there a language that requires significantly more code? 38:52 What about Web Components? 39:58 Your book is free? Framework Field Guide Shout-out Eduardo Pratti and Kevin Aguilar. 42:42 What’s the process of writing a book like this? 45:44 Not a physical book? 46:17 Walk us through the tech stack. 48:27 Supper Club Questions. 48:33 What text editor, theme and font do you use? 49:53 What terminal and shell do you use? 50:19 How do you stay up to date? 53:39 Do you have advice for beginners? 55:26 Sick Picks + Shameless Plugs. Sick Picks Corbin: Shiki Syntax Highlighter Shameless Plugs Corbin: Framework Field Guide 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

5 Apr 202457min

751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. Show Notes 00:00 Welcome to Syntax! 02:39 We’re on YouTube. 03:14 The four categories of UI libraries or frameworks. 03:46 What does a UI component need to do? 04:14 Must be functional. 06:20 They must fit styling. 06:33 They must be accessible. 08:09 “Internationalizationable.” 09:29 They must handle theming and variants. 10:05 A few common UI components. 10:14 Date Pickers. 12:10 Dropdowns. 13:21 Toast message. Svelte French Toast 15:11 Some honorable mentions. 16:10 Headless components. 18:54 React Aria. Behavior, Accessibility, Internationalization 19:34 Radix UI Primitives. 20:16 Downshift JS. 21:29 Tanstack Table and Forms. 26:00 Unstyled components. 28:04 Shoelace. 32:47 React Aria Components. 33:00 Headless UI. 33:04 Radix UI. 37:12 Base UI. 38:23 What’s up with Google’s design? 40:22 Styled Starters. React Aria Components Starter ShadCN Tailwind Catalyst MeltUI 47:50 What is the process for overriding with custom elements. 51:10 UI Kits and Design Systems. 53:06 Some things to consider. JS Nation 55:41 A few more options to consider. Pigment CSS Base UI Shoelace BaseLayer JollyUI DraftUI Radix UI PenguinUI Tailwind CSS TailwindUI VerveUI DaisyUI ChakraUI Flowbite FloatingUI Downshift JS Mantine 59:02 Sick Picks & Shameless Plugs. Sick Picks Wes: Battery Daddy Scott: Lazy Susan, Rechargeable Batteries, Charger Shameless Plugs Scott: Syntax on YouTube 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

3 Apr 20241h 6min

750: New CSS and JavaScript You Should Be Using

Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year. Show Notes 00:00 Welcome to Syntax! 01:16 Brought to you by Sentry.io. 02:17 jQuery 1.2 released! 07:38 jQuery Mobile. 09:34 Skeuomorphism. 10:25 How do you slice up your .PSDs? Slicy By MacRabbit 12:34 Cufon, new font method. 14:06 CSS rounded corners. CSS3Please 15:17 Coda Tip. 16:48 Top 5 CoffeeScript Features. 18:44 Conference Talks to Spotlight. BatmanJS, your new favorite JavaScript superhero 20:35 WordPress 2.3! 21:15 PHP 5.2.0 PHP 5.2.0 Release Announcement 21:53 Sponsored by Media Temple. 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

1 Apr 202424min

749: Coding Shopify with Anne and Trudy of Design Packs

Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites. Show Notes 00:00 Welcome to Syntax! 00:59 Who is Anne Thomas? 02:30 Who is Trudy MacNabb? 04:06 Shopify themes, how does one build a theme? 05:34 Do you have enough control with LiquidJS? 07:52 Changing components of a liquid template. 08:58 LiquidJS improving their dev tools. 09:29 LiquidJS email marketing. 10:32 Can you make your own LiquidJS methods? Too Many Tabs 11:34 How would you create a theme from scratch using modern tools? 13:30 What about local dev and live reload? Shopify Tools CLI 15:17 Is Shopify improving? 17:13 What do you hate about Shopify themes? Shopify Tools Theme Kit 18:59 Have you used Hydrogen? Shopify Hydrogen 20:09 Headless has sacrifices. 22:02 Are people building full websites in Shopify? 23:56 Apps and integrations. 25:56 Are people creating businesses around these integrations? 29:16 What are design packs? 31:26 Do you run your own servers? 31:57 How does billing work with clients? 33:18 Apps being ‘Sherlocked’. ‘Sherlocking’ Explained 35:21 Where is the data stored? 36:35 Can you make a custom UI? 38:40 What are the downsides of building apps on Shopify? 39:17 Are you expected to maintain versions? 40:46 Do you manage all the support independently? 42:01 How do you match with their existing themes? 43:54 What are the most popular blocks? 45:17 Does Shopify provide bundlers or compilers? 46:47 Shopify moving to blocks. 47:38 Living as a digital nomad. Syntax Episode 586 on Nomad Developing 49:48 A new app Anne and Trudy launched. 51:35 Limited by block size. 54:08 Sick Picks + Shameless Plugs. Sick Picks Trudy: Bar of Shampoo Anne: Alie Ward Ologies Podcast Shameless Plugs Trudy: 25% off using SYNTAX25 at Design Packs 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

29 Mars 202458min

748: Fitness Will Make You a Better Developer

Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 03:10 A very quick disclaimer. 03:32 A brief view of our fitness history. 06:19 Why is fitness important for developers? 09:12 Setting your goals. 13:06 Getting started with fitness. 13:13 Body-weight. 13:58 Stretching. 16:47 Fun activities that don’t feel like workouts. 17:48 Lifting weights. Stronglifts StartingStrength 25:47 Home gym gear. Rogue Stall Bar 37:14 Fitness programs. 40:53 I guess we have to talk about diet. MacroFactorApp 46:37 Motivation. 47:42 Supplements. BulkSupplements.com Creatine 51:23 Sick Picks. Sick Picks Wes: Wikday Pull Up Bands Scott: Booty Bands 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

27 Mars 202455min

747: Middleware Explained

Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills! Show Notes 00:00 Welcome to Syntax! 00:41 Syntax on YouTube. 01:28 What is middleware? 05:04 Some real-world examples of middleware. 05:10 Authentication. 07:44 Redirecting users to a specific instance. 08:28 Logging + statistics. 09:41 Debugging. 10:00 Timers. 10:46 A/B testing. 11:59 Error handling + logging. 12:23 Caching. 13:02 Multi-tenant applications. 15:08 Where does it run? 18:07 What are the limitations? 21:52 Next.js middleware is one file only. NextJS Middleware 23:35 Sveltekit solution. Sveltekit Hooks 24:31 Connect style. Fastify Express Fastify Middle 25:28 One last thing, NPM Installing. 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

25 Mars 202427min

Allt en och samma app

Lyssna på dina favoritpoddar och ljudböcker på ett och samma ställe.

Noga utvalt innehåll

Njut av handplockade tips som passar din smak – utan ändlöst scrollande.

Fortsätt när du vill

Fortsätt lyssna där du slutade – även offline.

Premium

99 kr/ månad

Tillgång till alla Premium-poddar
Reklamfritt premium-innehåll
Avsluta när du vill

Prova 14 dagar gratis

Premium

129 kr/ månad

Tillgång till alla Premium-poddar
Reklamfritt premium-innehåll
Avsluta när du vill
Ett extra konto

Prova 14 dagar gratis

Populärt inom Politik & nyheter

Berättelserna och rösterna du älskar att lyssna på

Obegränsad lyssning på alla dina favoritpoddar och ljudböcker

Upptäck Premium