![Syntax](/img/default-banner.jpg)
- Видео 929
- Просмотров 29 722 126
Syntax
США
Добавлен 19 янв 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)
You Should Try Vue js
Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.
Show Notes
00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
02:24 What is Vue?
04:13 Similar to Svelte, different from React.
05:35 How to get started with Vue.
05:43 Script tag.
06:01 CLI.
07:10 The value of an opinionated CLI.
10:51 Why do you like Vue.js over React or Svelte?
11:03 Less boilerplate.
15:24 Self-closing tags.
16:09 Svelte parsing HTML tags incorrectly.
17:08 Easily adding event handlers to e...
Show Notes
00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
02:24 What is Vue?
04:13 Similar to Svelte, different from React.
05:35 How to get started with Vue.
05:43 Script tag.
06:01 CLI.
07:10 The value of an opinionated CLI.
10:51 Why do you like Vue.js over React or Svelte?
11:03 Less boilerplate.
15:24 Self-closing tags.
16:09 Svelte parsing HTML tags incorrectly.
17:08 Easily adding event handlers to e...
Просмотров: 2 066
Видео
7 CSS Features You Have Not Heard Of
Просмотров 1,9 тыс.11 часов назад
In this video CJ shows 7 new and old CSS features that you might not of heard of. 00:00 Intro 00:30 hyphens 02:48 overflow-wrap 03:14 ::first-letter 03:53 image-rendering: pixelated 04:33 column-count 06:19 aspect-ratio 07:38 scroll-snap 08:51 Ask your questions! 09:03 Brought to you by Sentry 09:21 Thanks! Syntax Episode 784 | syntax.fm/show/784/logging-blogging-testing-freelancing hyphens Exa...
What is Open Source?
Просмотров 1,1 тыс.14 часов назад
Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you'll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they'll help you choose and apply the right license for your project. Show Notes 00:00 Welcome to Syntax! 00:54 Brought to you by Sentry.io. 01:56 What is open source? 0...
What’s Next for Next.js with Tim Neutkens
Просмотров 2,3 тыс.21 час назад
Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development. Show Notes 00:00 Welcome to Syntax! 00:30 What does the React Compiler do? 05:04 Will React Compiler help with managing Context? 0...
Getting started with C# for TypeScript Devs
Просмотров 3,1 тыс.23 часа назад
In this video CJ shows how to get started with C# as a TypeScript / JavaScript web developer. 00:00 Intro 00:30 Setup 00:53 Learning Plan 01:08 C Sharp Syntax First Look 01:31 var, arrays and foreach 02:07 Language-Integrated Query (LINQ) 02:32 Pattern Matching 03:09 Records 03:52 C# Learning Resources 04:36 ASP.NET Minimal API Example 06:22 Swagger / OpenAPI Documentation 07:04 TypeScript Clie...
Web Development Q&A × Logging × Blogging × Freelancing
Просмотров 2,1 тыс.День назад
In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood. Show Notes 00:00 Welcome to Syntax! 00:13 How to submit a question for future episodes. 02:46 Brought to you by Sentry.io. 03:21 Logging from...
How We Built a Netflix Style “Save for Offline” Feature Into Syntax
Просмотров 2,6 тыс.День назад
Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data. Show Notes 00:00 Welcome to Syntax! 02:07 Brought to you by Sentry.io. 02:33 The fi...
The Developer’s Guide To Fonts with Stephen Nixon
Просмотров 1,5 тыс.День назад
Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web. Show Notes 00:00 Welcome to Syntax! 00:57 Who is Stephen Nixon? 05:42 What is a type foundry exactly? 09:09 Font / type making. 09:15 How d...
The Value of TypeScript × Vue vs Svelte × Leetcode
Просмотров 3,6 тыс.14 дней назад
In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by...
5 NEW Features in TypeScript 5.5
Просмотров 4,8 тыс.14 дней назад
In this video CJ shows 5 of his favorite new features coming to TypeScript 5.5 00:00 Intro 00:09 Inferred Type Predicates 01:10 Improved Indexed Access 02:30 Type Imports in JSDoc 03:12 New Set Methods 03:49 configDir Template Variable 04:39 When can I use this? 5.5 RC Announcement | devblogs.microsoft.com/typescript/announcing-typescript-5-5-rc/ TypeScript Type Predicates | www.typescriptlang....
Cloud Storage Bandwidth, Storage and BIG ZIPS
Просмотров 1,7 тыс.14 дней назад
Today, Scott and Wes dive into cloud storage solutions-why you might need them, how they use them, and what you need to know about the big players, fees, and more. Show Notes 00:00 Welcome to Syntax! 01:14 Brought to you by Sentry.io. 02:05 Why you might need a cloud storage provider. 03:07 How we use cloud storage. 08:16 Why you may need larger storage. 09:49 The big players in this space. 14:...
Why SQLite is Taking Over with Brian Holt & Marco Bambini
Просмотров 4,9 тыс.14 дней назад
Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use-let's get into it! Show Notes 00:00 Welcome to Syntax! 01:20 Who is Brian Holt? 02:26 Who is Marco Bambini? 05:12 Why are people starting to talk so much about SQLite now? 08:47 What makes ...
SolidStart 1.0 First Look: Comparing to React / Next.js
Просмотров 6 тыс.14 дней назад
In this video CJ takes a look at the new 1.0 release of SolidJS and compares it to React / Next.js. View the code here: github.com/w3cj/solid-vs-react/ 00:00 Intro 00:51 SolidStart 1.0 Release 01:31 What is SolidJS? 03:19 Image Search App Overview 03:57 React Image Search 04:20 SolidJS Image Search 04:44 React Conditional Rendering 04:54 SolidJS Conditional Rendering 05:13 Signal Accessors 05:3...
11 Habits of Highly Effective Developers
Просмотров 4,4 тыс.21 день назад
11 Habits of Highly Effective Developers
How 1Password uses WASM and Rust for Local First dev with Andrew Burkhart
Просмотров 3 тыс.21 день назад
How 1Password uses WASM and Rust for Local First dev with Andrew Burkhart
Components We Need on Every Project
Просмотров 3,3 тыс.28 дней назад
Components We Need on Every Project
Promise Flow Control, Concurrency, Libraries, TypeScript and Deferreds - Part 3
Просмотров 1,9 тыс.28 дней назад
Promise Flow Control, Concurrency, Libraries, TypeScript and Deferreds - Part 3
WTF is Cloudflare?? React Server Components with PHP, Selling Accessibility + more
Просмотров 2,5 тыс.Месяц назад
WTF is Cloudflare?? React Server Components with PHP, Selling Accessibility more
Promises: Error Handling, Aborts, and Helper Methods - Part 2
Просмотров 1,9 тыс.Месяц назад
Promises: Error Handling, Aborts, and Helper Methods - Part 2
Local First and TypeScript's Missing Library with Johannes Schickling
Просмотров 2,4 тыс.Месяц назад
Local First and TypeScript's Missing Library with Johannes Schickling
React Server Components Form Actions + Server Actions
Просмотров 2,2 тыс.Месяц назад
React Server Components Form Actions Server Actions
Complex Schema Design with Drizzle ORM | Common Patterns
Просмотров 13 тыс.Месяц назад
Complex Schema Design with Drizzle ORM | Common Patterns
Biome: Faster, Smarter JS Formatting & Linting in Rust!
Просмотров 3 тыс.Месяц назад
Biome: Faster, Smarter JS Formatting & Linting in Rust!
Great to see some appreciation for Vue 💚 It's a really underestimated framework. I Would like to see a Nuxt episode!
VILT stack lover here 😊
Great talk. Full episode on Nuxt and Unjs 🙏.
nuxt devtools are mind blowing
And you can actually jump to the file for a component by clicking on a button on it in the frontend. I waste so much time trying to find the file for one
At my job we're almost fully Vue! Im in the marketing team and its Laravel / Vue and the Product team is Java / Vue! I love using Vue!
I still prefer Svelte
I like it a bit more but there are no UI component libs. All are trash (yes shadcn, flowbite, skeleton, carbon and many others) they all suck so much.
I still prefer Vue
Nice to see some Vue love! 💚
Would love to see a whole Nuxt episode! 🔥
@35:07 Fun fact: Pinia is Vuex 5 :p
Yeah yeah yeah the CSS is cool and all but WHERE IS THAT HAT FROM?! 😍
I live for the little writings below the names of the podcasters, whoever writes those little gems i appreciate you😂😂😂 💎
I nowadays work on React because thats what my employers or backend guys turned full-stack use but been using VueJs since 2017, and everytime it falls into my courtyard to decide the frontend stack I go with VueJs/Nuxt. Its just a so much better DX than Nextjs/React
Shout out to Quasar, based on Vue. A wonderful framework with great components for SSR, PWA and lots of other stuff I don't take advantage of.
Cant wait for laravel video!!
I like vue.
Something that I'm wondering with all of these X vs Y vs Z framework/language/library discussions is....what percentage of web developers are enterpreneurs? Like, how many developers even have the luxury to chose their own stack? Because I feel like most developers are employed in companies with already setup tech stack or they have an architect that already has an idea for what tech stack to be used. And most of the time it's the most popular one in the geographical area because it would be easier to find other engineers that are proficient in that stack, and this is the only sales pitch that works for the stakeholders. Like don't get me wrong. As a Frontend Web Developer I'm loving Svelte and Solid and Vue especially since I'm getting a bit of React fatigue, and I'm dabbling into other libraries for my random side projects that will never see the light of day. TLDR: I don't think developers have to be as invested into chosing a tech stack as much as social media is pushing these comparisons. Great video by the way, love the podcast. Don't mean to shit on anything that's not React or your podcast, I'm just geniuinly realizing that these comparisons rarely matter in real life unless if you are the architect of a smallish company with the power to choose or an enterpreneur.
Now do Nuxt!
Vue composition API is the bomb
Oh noooo I'm getting started with Svelte 5, and now you're saying that I should try VueJS instead? 😋 It's a good problem to have to be able to choose between several good options 😌
Naw man, Svelte is far better imo. I've used them all on major projects. Vue I would say is def the closest. Anything based on React is just a shitshow in comparison to these two imo.
TBH, you should try everything. A lot of the frameworks do things differently, don’t trust trust with somebody else says judge your own productivity.
react is hype BS
Vue is hands down the best JavaScript framework out there! It's so intuitive and powerful. If you haven't tried it yet, you're missing out on something amazing. Highly recommend giving it a go!
Is it better than Svelte?
@@ramforinh "better" is not an objective measurement. Give it a try and you will see how they different and which one you like more.
@@rrd_webmania Is "the best JavaScript framework out there" an objective measurement? 😁
@@rrd_webmania "better is not the objective measurement" Yet in your first comment you boldly said, "Vue is the best JavaScript framework out there!" If better is not the objective measurement, how come best would be an objective measurement? 😅😅😅
@@thedelanyo it's always about personal preference in the end.
Vue is soo underrated, same with Nuxt. Sooo prefer it over React and Next
Wonderful episode
I’m learning go so I’m re writing a blog in go and will use HTMX, it’s crazy to think i will only need it most when redoing the admin area. The main site is just navigation links right.
top notch tuts 🙌 thanks CJ you are amazing I learned a bunch🔥 Now I am doing some research if there's a way to create my own little system to handle and automate those server creation etc jeez 🤯
"Run as a single statement" doesn't really mean much in terms of performance, if you're doing nested selects you should take the produced sql statement and put it through a PLAN analyzer to make sure it's performant and getting all the joins etc it needs without full table scans.
There are a couple that you showed that are the solutions to problems I've been having. The columns for pictures especially!
@39:40 You could use postgres array_agg and add a group_by clause if you want to aggregate up the menu items in the sql syntax.
thanks for the vod. Lots of gold nuggets in here!
how to deploy an astro.js project? any resource how to do it?
Please more CSS stuffs 😅😅
amazing 👌
column-count 😅😅😅
I love cj speaking german
I did not understand anything at all. Why people are getting faster everyday?
That hat is so fresh! CSS <3 !
That's the proper way of defining that hat.
I'm a simple man, I see CJ, I like watch, and loop
For the scroll snapping you can also add `scroll-padding-top` to the `html` element to give the slides a bit of breathing room so they aren't directly touching the top of the page when you scroll to them. I did `scroll-padding-top: 3vh;` for CJ's example here to match the margin of the slides and it looks nice.
Just tried scroll-snap for the first time, it's so good for long lists.. A nice trick I discovered recently: `mask-image: linear-gradient(to bottom, transparent, #fff 8px)` will fade out the contents of a scrollable container as it moves up, on any background. Gone are the days of overlaying pseudo-elements!
Good tip!
5:30 it is not rendering back up. It is rendering top to bottom on each column.
Good catch! I added a correction to the description. -CJ
Code is too small
Yes this was my first time showing code pen instead of my VS Code and I forgot to increase the font size. I will next time! -CJ
Hyphens and the column width looks quite handy, and that scroll snap is just smooth 🤩
instructions unclear, my PC BLEW UP
This is great CJ. I would like for the next self host video to see these types of automations but without using this entire tool suite. For example I have seen some docker images to achieve this, nginx-proxy/nginx-proxy and nginx-proxy/acme-companion on github.
Not found page
Awesome video, thanks for putting in all the effort! In order to maybe give back a bit, there are a few things I think you might appreciate and might not know yet: 1. zsh has the `take <folder>` alias for `mkdir <folder> && cd <folder>` 2. Raycast lets you escape "all the way out" with Cmd + Esc 3. In Raycast, you can just search for store to install a new extension. No need to open the settings first 4. If you're into shortcuts, you might want to check out the video "Max Stoiber Owns His Workflow with Raycast" from the Raycast channel. Max Stoiber demos and explains his setup for semantic shortcuts that I personally find amazing. I now open most apps and even some relevant slack chats etc. via shortcuts - no need for Cmd + Tab, Raycast or anything (for most things - Raycast is there for the rest :D)
Jealous about the spring weather in Denver. It’s 100F+ here in CA rn 😂
Currently roasting 100+ here too.
I mailed 37signals and asked them about the "once" license of campfire. I can't believe their license is so simple and in my opinion fair. Pay once and you own it, even better, you have the code. Here is the license: Permission is hereby granted to any person purchasing a copy of a ONCE product (Campfire), its source code and associated documentation files (the “Software”), to install and use a single instance and modify a single version of the Software as provided. This does not include the rights to publish, distribute, sublicense, and/or sell copies of the Software, source code or products derived from it. Is this all you need? Sometimes I forget that you don't need complicated legal documents.
He is a blessing ♥
Is possible to deploy Wordpress website?
Yes. Coolify has a one click deploy for several types of Wordpress setups.