Syntax - Tasty Web Development Treats podcast

Hasty Treat - Webhooks

0:00
21:35
Recuar 15 segundos
Avançar 15 segundos

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is.

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.

Show Notes

03:42 - What are webhooks?

  • User-defined HTTP callbacks
  • When something happens, ping this URL with this data
  • Examples:
    • When something sells, ping this URL
    • When someone reverses a charge, lock their account
    • Trigger a build of the website when the content changes
    • Then someone buys a shirt, generate a shipping label and save it to the DB

07:57 - Sending End

  • Can be a great way to hook two services together

09:13 - Receiving End

  • Often you will be the one that accepts the webhook ping
  • In this case, you set up an endpoint

11:00 - Payloads

  • Almost all will send a JSON body that you parse out
  • The method send is variable

11:51 - Auth

  • On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not.
  • On the sending end, you can often set up headers with auth - same with the method
  • Can be a replacement for a serverless function

13:18 - Testing webhooks

Tweet us your tasty treats!

Mais episódios de "Syntax - Tasty Web Development Treats"

  • Syntax - Tasty Web Development Treats podcast

    Hasty Treat - Handy Utility Functions with Just

    15:21

    In this Hasty Treat, Scott and Wes talk about handy utility functions with Just! 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 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare 10:54 - Why? This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it 12:05 - Other Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony 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
  • Syntax - Tasty Web Development Treats podcast

    A Podcast on Running a Podcast

    52:28

    In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s 09:13 - Notes Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view 12:37 - How do you find stuff to talk about?! Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head 21:02 - Editing Podcast Royale We record a clap for syncing Upload to Dropbox for our editors 22:07 - Hosting Libsyn Archaic feeling, but covers everything 22:36 - The website Next.js Open source PRs are submitted adding the latest episodes 24:10 - Transcripts Generated 24:40 - Would you still start one? Podcast vs YouTube vs Twitch 29:20 - Getting popular / Marketing How do you do it? Consistency is key Need external audience 35:34 - Sponsors Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves 42:17 - What about Patreon? Ad-free version? 46:04 - Live shows Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain 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
  • Syntax - Tasty Web Development Treats podcast

    Não percas um episódio de Syntax - Tasty Web Development Treats e subscrevê-lo na aplicação GetPodcast.

    iOS buttonAndroid button
  • Syntax - Tasty Web Development Treats podcast

    Hasty Treat - Neat Things in CSS Color - Current and Coming!

    26:48

    In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon! 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. Show Notes 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure! 14:18 - Space-separated functional color notations rgba(255 255 255 0) instead of rgba(255,255,255,0.5) 15:28 - RGB and HSL with Alpha rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5) 18:22 - Hex + Alpha values RRGGBBAA How do you remember?!?! Transparent 21:49 - lch(), lab(), hwb() notation CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/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
  • Syntax - Tasty Web Development Treats podcast

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

    57:39

    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 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
  • Syntax - Tasty Web Development Treats podcast

    Hasty Treat - Spicy Takeout - PHP Is Good and We’re Just Re-Creating It

    21:43

    In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP! 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. 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:56 - Why much of modern web development is just recreating PHP Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP 05:44 - Mixing templating and logic We do this with JSX 07:39 - Each request has its own scope 08:57 - Massive standard lib Format a date? No sweat! Image resizing? Sure! Audio bindings? Sure! 10:16 - URL-based routing Next.js pages Serverless functions 11:13 - Server-rendered Hotwire 11:38 - $_GET, $_POST, are just available Next.js hooks 12:29 - Variable interpolation 12:59 - All-in-one frameworks Laravel did it CakePHP CodeIgnighter 13:32 - Direct DB access SQL statements 14:37 - Why do people hate PHP? WordPress Inconsistent API Their first code was PHP and they sucked PHP has come a long way It used to not be safe Blocking by default - no async/await 17:48 - Why is JS still better? Shared code between frontend and backend Single language Huge ecosystem (could be a con) Links Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles https://vuejs.org/ https://www.hey.com/ 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
  • Syntax - Tasty Web Development Treats podcast

    Changelog Frontend Feud

    53:15

    In this episode of Syntax, Scott and Wes do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin! .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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. 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 02:49 - Frontend Feud Rules 04:06 - Round 1 10:28 - Round 2 17:26 - Round 3 25:37 - Round 4 35:15 - Round 5 42:03 - Round 6 Links Changelog JS Party Chris Coyier Dave Rupert Wes Bos Scott Tolinski Jerod Santo Amelia Wattenberger Divya The Feud At The Seventh Mountain Amelia’s repo visualizer CSS-Tricks freeCodeCamp Wes Bos’ courses Changelog Merch Level Up Tutorials 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
  • Syntax - Tasty Web Development Treats podcast

    Hasty Treat - Desktop Apps + New Tech We Love

    32:30

    In this Hasty Treat, Scott and Wes talk about the hottest new tech they love! 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. Show Notes 03:30 - Lucy Language https://lucylang.org/ A concise language for describing Finite State Machines 06:10 - MDSvex https://github.com/pngwn/MDsveX Mdx for Svelte Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities https://github.com/rehypejs/awesome-rehype 09:56 - RECut https://getrecut.com/ 12:26 - Fig https://fig.io/ It’s an app you install on your computer, it adds autocomplete to your terminal Works with most popular terminals Autocompletes git commands NPM commands + tons more - npm install ___ works Adds descriptions of what each command does Mac only - again another reason why Mac is best! Themeable Why not use Fish/ZSH? This isn’t a replacement for anything, it’s just autocomplete on top These fish plugins are to vim, as Fig is to VS Code Better UI is KEY 15:56 - Warp https://www.warp.dev/ Rust-based termnial Very fast Extensions and themes Share commands and sessions Great for remote server dev Share terminal state - with share links 19:33 - Raycast https://www.raycast.com/ App launcher File Finder Workflow runner Everyone is asking why is it better than Alfred better UI Better outputs math Better defaults - currency conversion Fast as hell Better integrations More Flexible 21:26 - Table Plus https://tableplus.com/ Fantastic little DB tool 23:59 - Obsidian Update https://obsidian.md/ Wes: I haven’t got into it - find myself still going back to VS Code 26:50 - Descript Update https://www.descript.com/ All-in-one audio and video editing, like a doc Links https://chriscoyier.net/ https://hyper.is/ https://www.alfredapp.com/ https://strapi.io/ https://studio3t.com/ https://www.mindnode.com/ https://remarkable.com/ https://www.notion.so/ https://joplinapp.org/ http://www.telestream.net/screenflow/overview.htm https://shinywhitebox.com/ 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
  • Syntax - Tasty Web Development Treats podcast

    From React To SvelteKit

    55:27

    In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:28 - Thoughts Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS Some big things changed beyond React → SvelteKit Apollo → GFetch Plyr → Vime HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer. Whole conversion took a couple of months. Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough 16:14 - Converting React components to Svelte useState becomes just a straight-up variable Graphql calls were hooks now just imported generated functions Remove extranous fragments Convert {things && } to {#if thing}{/if}  becomes  24:06 - Spark joys State Our checkout flow became way more transparent, way easier with Svelte stores Render flow Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to Overall developer experience It’s honestly a joy to work in and I don’t want to go back Making a library Package dir, new SvelteKit project, svelte-kit package I made svelte-toy - https://github.com/leveluptuts/svelte-toy svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query svelte-simple-datatable fork Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props Animations are all done with Svelte’s internal animations lib 32:45 - Hosting adapter-node Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU, Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere 35:50 - Things to do Admin tools Pancake lib for charts 37:00 - Challenges ESM is not always smooth sailin Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod. Solution was to use lodash.has as the dependency Apollo included all React as a dep unless you import from @core TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible Drag animations Cloudinary 42:46 - Wes’ questions What about the ecosystem? What about forms + DOM data? Serverless functions? Do you always bind to state? Or just access directly? formData = writable({ title: "yo" }) {$formData.title} Is it stable? Deno - Snel Links https://leveluptutorials.com/ https://vitejs.dev/ ××× SIIIIICK ××× PIIIICKS ××× Scott: The Skeptics Guide To The Universe Podcast Wes: Pressure Washer Nozzle Shameless Plugs Scott: Web Components 101 - 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
  • Syntax - Tasty Web Development Treats podcast

    Hasty Treat - Webhooks

    21:35

    In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is. 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. Show Notes 03:42 - What are webhooks? User-defined HTTP callbacks When something happens, ping this URL with this data Examples: When something sells, ping this URL When someone reverses a charge, lock their account Trigger a build of the website when the content changes Then someone buys a shirt, generate a shipping label and save it to the DB 07:57 - Sending End Can be a great way to hook two services together 09:13 - Receiving End Often you will be the one that accepts the webhook ping In this case, you set up an endpoint 11:00 - Payloads Almost all will send a JSON body that you parse out The method send is variable 11:51 - Auth On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not. On the sending end, you can often set up headers with auth - same with the method Can be a replacement for a serverless function 13:18 - Testing webhooks Can be a pain in the ass ngrok - expose locally localtunnel Insomnia Postman Stripe has a great VS code extension Snipcart has an awesome dashboard Will also tell you when one failed webhook.site https://expose.dev/ IFTTT Zapier 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
  • Syntax - Tasty Web Development Treats podcast

    New to JavaScript — ES2022

    38:41

    In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it. 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. 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 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # =Helpful for internal state and methods which should not be accessed directly or at all by external In React how we have __INTERNTAL_NEVER USE THIS class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside Getters and setters introduced in es5 https://www.w3schools.com/js/js_object_accessors.asp class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works 09:07 - Class fields This may seem super old because we have been polyfilling it forever Right now if you want an instance field on a class, you need to declare it in the constructor Now we can just declare them inside the class 10:36 - Static fields and methods As above can also be static with the static keyboard Works for methods too Explain what a static method is 13:17 - Top level await So handy in modules. Need to pull in some data? Simple. 15:19 - Ergonomic brand checks for private fields Used for checking if a private field on a class exists using the in keyword 16:00 - .at() method Strings and arrays - we can use square brackets to reference items of the array Super handy for grabbing the last item of an array // 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B Why not use array[-1]? We used to use slice(-1) What about indexOf? 21:34 - Handy hasOwn method https://github.com/tc39/proposal-accessible-object-hasownproperty 24:51 - Class static block A static block allows you to run code before creating an optional static property during initialization https://github.com/tc39/proposal-class-static-block Links https://github.com/tc39/proposals/blob/master/finished-proposals.md ××× SIIIIICK ××× PIIIICKS ××× Scott: Ultraloq Smart Lock Wes: Magnatiles Shameless Plugs Scott: Web Components 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

Descobre o mundo dos podcasts com a app gratuita GetPodcast.

Subscreve os teus podcasts preferidos, ouve episódios offline e obtém recomendações fantásticas.

iOS buttonAndroid button