- 898
- 29 440 843
Syntax
United States
Registrace 19. 01. 2012
Hosted by Wes Bos and Scott Tolinski since 2017, Syntax has published over 600 podcast episodes on full-stack web development, covering everything from HTML, CSS, JavaScript, server side languages, databases, deployment environments, and more.
In 2023 Syntax.fm joined forces with Level Up Tutorials adding 2000+ free video tutorials to our library.
Wes Bos is co-host of Syntax and a web development educator. Constantly learning, he creates web development courses focused on JavaScript, TypeScript, React, CSS, Node.js and whatever else comes his way.
Scott Tolinski is co-host of Syntax and the creator of Level Up Tutorials. In his free time Scott is a dedicated Bboy (breakdancer) & enjoys pushing himself athletically through dance, working out and snowboarding.
Syntax is brought to you by Sentry (sentry.io)
In 2023 Syntax.fm joined forces with Level Up Tutorials adding 2000+ free video tutorials to our library.
Wes Bos is co-host of Syntax and a web development educator. Constantly learning, he creates web development courses focused on JavaScript, TypeScript, React, CSS, Node.js and whatever else comes his way.
Scott Tolinski is co-host of Syntax and the creator of Level Up Tutorials. In his free time Scott is a dedicated Bboy (breakdancer) & enjoys pushing himself athletically through dance, working out and snowboarding.
Syntax is brought to you by Sentry (sentry.io)
React Miami Live Show
Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who's the better programmer? Stay tuned to find out!
Show Notes
00:00 Welcome to Syntax!
00:54 Meet the Syntax team.
01:22 The plan for today.
02:38 .map() .filter() .reduce()
06:39 Syntax Error.
15:37 JS or NAYS.
21:08 Audience Stump'd.
24:51 Q + EH.
All links available at syntax.fm/769
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: stolinski
Wes: wesbos
Randy: www.youtube.com/@randyrektor
Syntax: syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript
Show Notes
00:00 Welcome to Syntax!
00:54 Meet the Syntax team.
01:22 The plan for today.
02:38 .map() .filter() .reduce()
06:39 Syntax Error.
15:37 JS or NAYS.
21:08 Audience Stump'd.
24:51 Q + EH.
All links available at syntax.fm/769
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: stolinski
Wes: wesbos
Randy: www.youtube.com/@randyrektor
Syntax: syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript
zhlédnutí: 1 193
Video
React 19 is here!
zhlédnutí 2,8KPřed 14 hodinami
Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io. 02:03 What's in the update? 03:03 Actions server actions. 04:54 Us...
Local First and TypeScript's Missing Library with Johannes Schickling
zhlédnutí 1,9KPřed 21 hodinou
In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality. Show Notes 00:00 Welcome to Syntax! 01:10 Brought to you by Sentry.io. 01:28 What is Overtone? 03:45 Can you explain the ex...
React Server Components Form Actions + Server Actions
zhlédnutí 1,8KPřed dnem
Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications. Show Notes 00:00 Welcome to Syntax! 02:04 Brought to you by Sentry.io. 03:04 What ...
JS Promises Fundamentals - Part 1
zhlédnutí 2,3KPřed dnem
In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions. Show Notes 00:00 Welcome to Syntax! 01:27 Brought to you by Sentry.io. 02:32 What is a promise? 03:27 Common examples of promises. 03:45 A f...
Using Drizzle ORM to Design and Implement a Complex Database Structure | Common Patterns
zhlédnutí 8KPřed dnem
In this video CJ shows how he used drizzle to implement a complex DB structure to represent a food delivery service called bytedash. He shows how to setup the project, how to create schemas, how to seed the DB with related data and how to query the DB with deeply nested relationships. View the DB diagram here: dbdocs.io/w3cj/bytedash?schema=public&view=relationships View the code here: github.c...
Biome: Faster, Smarter JS Formatting & Linting in Rust!
zhlédnutí 2,6KPřed dnem
Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out! Show Notes 00:00 Welcome to Syntax! 00:10 Brought to you by Sentry.io. 01:49 Who is Emanuele Stoppa and what is ...
Web Scraping + Reverse Engineering APIs
zhlédnutí 4,1KPřed 14 dny
Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you'll gain invaluable insights and techniques to scrape (almost) any website with ease. Show Notes 00:00 Welcome to Syntax! 03:13 Brought to you by Sentry.io. 05:00 What is scraping? 08:...
What to Steal. Finding Inspiration in Web Development
zhlédnutí 2,7KPřed 14 dny
Scott and Wes discuss the delicate balance of what's acceptable to borrow or be inspired by in web development and what crosses into territory that's off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it. Show Notes 00:00 Welcome to Syntax! 01:57 Brought to you by Sentry.io. 02:26 What is ok...
Self Host 101 - Set up Coolify | Self Hosted PaaS with Zero Config Deployments
zhlédnutí 16KPřed 14 dny
In this video CJ shows you what Coolify is, what it does, how to choose a server to deploy it to, how to lock it down with https, how to deploy several types of applications on it, how to setup s3 compatible storage for file uploads / backups and more. View all the Self Host 101 videos here: czcams.com/play/PLLnpHn493BHHAxTeLNUZEDLYc8uUwqGXa.html 00:00 Intro 00:56 What can you do with Coolify? ...
Cloudflare Analytics Engine, Workers + more with Ben Vinegar
zhlédnutí 1,3KPřed 14 dny
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 00:00 Welcome to Syntax! 01:17 Who is Ben Vinegar? Check out counterscale.dev/ 02:21 Brought to you by Sentry.io. 04:00 Cloud...
Getting Started with Exploring Browser APIs Course
zhlédnutí 1,1KPřed 14 dny
Getting Started with Exploring Browser APIs Course
Finding Elements in the DOM with JavaScript
zhlédnutí 850Před 14 dny
All code available here: github.com/leveluptuts/exploring-browser-apis-start In this video we dive into 4 ways to query DOM elements and talk about how they are different. Originally released for levelup.video In this course we'll be starting at the very basics and working our way up to interesting and experimental browser APIs. Hit us up on Socials! Scott: stolinski Syntax: twitter...
Listening for DOM Events with JavaScript
zhlédnutí 1,5KPřed 14 dny
All code available here: github.com/leveluptuts/exploring-browser-apis-start In this video we start listening for form events on inputs and talk about the differences between commonly used events as well as topics like bubbling. Originally released for levelup.video In this course we'll be starting at the very basics and working our way up to interesting and experimental browser APIs. Hit us up...
Introduction to Exploring Browser APIs
zhlédnutí 930Před 14 dny
Introduction to Exploring Browser APIs
Web Awesome with Konnor Rogers + Cory LaViska
zhlédnutí 2,2KPřed 21 dnem
Web Awesome with Konnor Rogers Cory LaViska
Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting - Listener Questions
zhlédnutí 2,2KPřed 28 dny
Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting - Listener Questions
Chrome Extensions & Manifest v3 with Google DevRel Oliver Dunk
zhlédnutí 2,3KPřed měsícem
Chrome Extensions & Manifest v3 with Google DevRel Oliver Dunk
How to Level Up Your Web Development Career
zhlédnutí 4,6KPřed měsícem
How to Level Up Your Web Development Career
Self Host 101 - Run Multiple Apps with Caddy | DNS, Static Sites, Reverse Proxies and Let's Encrypt
zhlédnutí 10KPřed měsícem
Self Host 101 - Run Multiple Apps with Caddy | DNS, Static Sites, Reverse Proxies and Let's Encrypt
React vs Vue vs Angular with Corbin Crutchley
zhlédnutí 3,7KPřed měsícem
React vs Vue vs Angular with Corbin Crutchley
UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI
zhlédnutí 5KPřed měsícem
UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI
New CSS and JavaScript You should be using
zhlédnutí 3,3KPřed měsícem
New CSS and JavaScript You should be using
Coding Shopify with Anne and Trudy of Design Packs
zhlédnutí 2,2KPřed měsícem
Coding Shopify with Anne and Trudy of Design Packs
Self Host 101 - Office Hours - Losing SSH Access, VPNs, Load Testing, Reverse Proxies and more!
zhlédnutí 5KPřed měsícem
Self Host 101 - Office Hours - Losing SSH Access, VPNs, Load Testing, Reverse Proxies and more!
Fitness Will Make You a Better Developer
zhlédnutí 2,8KPřed měsícem
Fitness Will Make You a Better Developer
I don’t think el toro understood modulo there
I'll tell you what. I saw it and straight up read it as division. Didn't even think twice about it 🫠 - Scott
Live interview question is no joke 🫠
wish we could’ve seen the correct code after the syntax errors! good show.
I wish I could be there and meet you folks this is so fun and full of learning’s
I'd like to see if I can make it to the next live episode recording. Please keep us updated on the next one.
What are your thoughts on using UUIDs for primary keys instead of `serial` in Postgres?
Seems like wes was partying pretty hard.
Instead of the Auto Rename Tag I use the built in Emmet command "Emmet: Update Tag" which I have mapped to "Ctrl + Cmd + U". This works in both HTML and JSX. Another invaluable Emmet Command "Wrap with abbreviation", I have mapped that one "Ctrl + Cmd + W". I use that one everyday editing React components.
Having you 2 in the same room is soo much more fun, please do more of that 😃
Thanks for the brilliant content! It's exactly what I need now.
keep it up guys
I enjoyed the podcast today. I was just laughing with my geek friends, Wes and Scott.
Ok
first
Hi SCOttt
Hihi
Thanks CJ!! Is it possible to also teach us how to set up load balance on coolify?
I want an indicator (pale blue dot) in the file explorer on every file which is opened in an editor.
Under "Other Apps I use" you could also save your installed brew software into a Brewfile using `brew bundle dump`. That does save the version though, but might be handy when setting up a replacement device.
How do you write react components now? Functions, classes, web components?
Functions is the way.
Summarizing the podcast: React 19 tries to work like Svelte.
Not quite yet. Hopefully someday they take more from svelte.
Local first isn’t a new architecture that anyone is pioneering in my opinion, it’s an architecture that we forgot because of how ubiquitous internet connection has become in a lot of places. But as someone in a country where this is not the case, local first apps are quite popular and is in fact a prerequisite for startups building consumer apps.
It’s really great to see React supporting web components so well now. I’m _not_ a React dev but I see WC’s as a wonderful pivot point between various applications, particularly if you’re writing code that has to be shared across separate teams/apps/sites or making a library or something.
For real. I'm all for it
8:11 Svelte is great with web components, but still has some minor kinks here and there, particularly nesting in the light DOM and with supporting context. HMR too. That’s why I created svelte-retag which supports that, light DOM and even Vite HMR. I did all that since I loved Svelte but also needed a smooth way to integrate it into our legacy PHP monolith and so far it is working really great for us; especially context, which is a killer feature for us.
Sick!
18:10 - I dont use twitter and couldn't see the post you mentioned here about using a status variable. Would you be able to link it or explain it here please. Really quite interesting in seeing it! Great content as always, thank you 😊.
I love the editor here are few more things Zen Mode ScreenCast Mode Simple Browser Window Title Nested Explorer Bar
23:40 I haven't tried this, but maybe it's possible to just use "onLoad" event handler on script tag? Same way you can do onLoad on an img tag for example.
Lit was terrible for writing web-components in. Svelte was far better. Mostly not having to lean on template string for all the html div description.
I think lit was pretty lit. It feels very vanilla. Without all the framework jumbo. I just don't like classes very much. Very few good use cases for them. Ui components definitely not one of them.
Zustand is different to context though, Zustand is global only. Context can be used in multiple places in the tree with different values.
Yes true, but nothing stops you from using Context to inject a Zustand store which would then be a separate Zustand store instance for each of those component trees.
Sorry, I commented before I got to the part where they talk about Context. Yeah, they only think about global Context at the top level of the app that only is a single instance of that Context. They aren't really considering the scenario where you might want to render Context multiple times in different trees and provide different values to each of those Contexts as you mentioned. Although admittedly, global Context is way way more common so it's understandable that comes to mind first.
@@rand0mtv660 I still don't think context as a pattern is better than what's out there for instance local state. Preact signals, Recoil, Jotai are all better for that than context IMO.
@@stolinski Hmm I gotta admit I haven't tried Recoil or Jotai, but also never really considered Context bad or not good. Only downside for me regarding Context is the "all consumers re-render" part.
Monday Monday Monday Open Wide Dev fans, Get ready to stuff yourself with Javascript, CSS, Barbeque Tips, Breaking dancing, Node modules,The hastiest the tastiest the craziest , i don't remember
no ForwardRef is key of imperativeHandle, now in 19 more easy to implement imperativeHandle :D
It is truly enlightening and provided valuable insights into the latest features and improvements in React 19
how to get vertical tabs like this?
Instead of using xargs and a text file for your brew app, a brewfile is the way to go... if you `brew install mas` first you can even install stuff from the mac app store. `brew bundle --help` to get started
why do we need a .gitignore in the home directory? Is that linked somehow to be the default .gitignore when starting a new git project ?
I think i actually did the same error when i used Drizzle with sqlite but from what I've researched closing the db connection is not handled by drizzle so with PG you can use the Pool to use a connection pool but you have to find ways to do the same with other drivers otherwise you will either clog up or all your connections will pile up. This is obviously less of a problem with serverless but i think is worth mentioning.
Endless debate: Raycast vs Alfred. They’re very similar but personally I prefer Alfred. I feel I can get more out of it - Workflows are amazingly flexible.
im looking to buy my first mac for softare development. do you recommend a MacBook Air 15" 24GBram or an M3 Pro 14" 36GB Ram?
Love it!
your tache is ridiculous and awesome in equal measure. assume that's the look you're going for :D
I have been doing this type of work for years, yet I learned so many little tricks on this video, insane quality
Do you even vim bro
We can, we choose not to.
Amazing! Would love to see the same implementation done with Prisma 🤩
one big problem form my point of view,, is not having multiple monitors,, that should be a must for the productivity
There is now multiple monitor support. Dual monitors away from your desk is awesome.
I'm looking at moving over all my side-projects to be hosted on a VPS instead of serverless/cloud providers. I think it would be straightforward with docker-compose + caddy (all of the apps are containerised), without needing something like Coolify. But the one thing that wouldn't work is that deployment would have to be mostly manual (SSH into the server, update the version in the docker-compose file, docker-compose up). Does anyone have a good system for automatically deploying on push (on the master branch) in Github?
I talk about how to do this in this office hours video: czcams.com/video/ZG76DYUlCEs/video.html -CJ
Nice one
Perfect video for my use case. Thanks a ton.
Used alot, never understood completely. Still a mystery, even with using resolve
As a new Mac user coming from Windows... I can't thank you enough!
Needed this randomly today TY 👍
What's the Chrome extension called?