Web Dev Simplified
Web Dev Simplified
  • 690
  • 139 751 170
I Recreated Shadcn’s Docs In 30 Minutes With This Amazing Tool
Building documentation for a library is one of the worst parts of any project. It is way more time consuming that you plan for and it always look terrible. That is until now. Starlight makes creating good looking docs incredibly easy so you can spend your precious time working on your actual project. In this video I go over what makes Starlight so cool and why you may want to give it a try on your next project.
📚 Materials/References:
My Blog: blog.webdevsimplified.com
Starlight Documentation: starlight.astro.build
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: www.patreon.com/WebDevSimplified
Twitter: DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:15 - Starlight Setup/Basics
03:51 - Advanced Examples
07:00 - Advanced Customization
#Starlight #WDS #Documentation
Переглядів: 23 284

Відео

How This Test Saved Kent’s Site
Переглядів 56 тис.День тому
Testing is a difficult and time consuming process, but it doesn’t have to be. If you take advantage of implicit testing you can get the same level of test quality and coverage while writing significantly less tests. This is exactly what Kent C. Dodds has done on his Epic Web site since he has just one test that gives him pretty good test coverage. In this video I will explain what implicit test...
I Love This CSS Focus Hack
Переглядів 18 тис.14 днів тому
The CSS :focus state is simple on the surface, but there is actually quite a lot going on behind the scenes. There are 3 total :focus states you can use in CSS and even a secret fourth state that make :focus much more complicated than it may first appear. In this video I go over everything you need to know about CSS :focus states. 📚 Materials/References: CSS :has Selector Video: ua-cam.com/vide...
How To Make Beautiful Charts In Next.js
Переглядів 19 тис.21 день тому
Building beautiful charts in React/Next.js is not easy, but in this video I will show you exactly how to build a robust and beautiful chart system with Next.js. 📚 Materials/References: Starting GitHub Code: github.com/WebDevSimplified/next-js-ecommerce-mvp-discount-codes Ending GitHub Code: github.com/WebDevSimplified/next-js-ecommerce-dashboard-charts Next.js Ecommerce Video: ua-cam.com/video/...
This Ancient CSS Feature Is Incredibly Useful
Переглядів 19 тис.Місяць тому
CSS has been around for a long time, but we spend most of our time talking about the new amazing features coming to CSS like container queries, but sometimes the best CSS features are ones that have been there all along. Quantity queries have been a part of CSS for 15 years and they are one of the coolest CSS features that I have never heard of before. In this video I talk all about quantity qu...
How To Build A Next.js Coupon System Like A Senior Developer
Переглядів 28 тис.Місяць тому
Building out an ecommerce site is difficult enough on its own, but creating a robust coupon system to go along with it just adds even more complexity. In this video I will show you have to built a complete advanced coupon code system on top of an ecommerce site that covers every scenario you could ever think of. 📚 Materials/References: Starting GitHub Code: github.com/WebDevSimplified/next-js-e...
Learn Drizzle In 60 Minutes
Переглядів 35 тис.Місяць тому
Drizzle is a relatively new database ORM that aims to solve many of the problems with existing ORMs by being more flexible and performant. They have definitely accomplished their goals, but learning Drizzle can be quite overwhelming. In this crash course I will teach you everything you need to know about Drizzle to use it in your very own projects. 📚 Materials/References: Prisma Vs Drizzle Vide...
Full Stack Ecommerce Store With Admin Dashboard From Scratch - Next.js, Prisma, Stripe, Tailwind
Переглядів 123 тис.Місяць тому
Join the Slack Developer Program for exclusive access to beta features, sandboxes, resources, and more: api.slack.com/developer-program?AMER_US_EN_Q1_SLKAW_Developer_Program_Web_Dev_Simplified& Next.js Simplified Course: reactsimplified.com/#next-js-course Creating an ecommerce site is not easy. There are so many different things that go into even a simple ecommerce site from an admin dashboard...
Will Devin AI Take Your Job?
Переглядів 240 тис.Місяць тому
Devin AI is a quite impressive AI that claims to work just like a software engineer. It can read documentation, use the web, write code in an editor, execute terminal commands, and much more. With all this capability many people are worried that Devin will replace the need for software developers, but this couldn’t be further from the truth. In this video I break down exact what Devin is, what ...
Is Drizzle Really Better Than Prisma?
Переглядів 64 тис.2 місяці тому
Prisma has been one of the most popular TypeScript first database ORMs for the last few years, but recently Drizzle has grown in popularity due to its customization, speed, and ease of use. In this video I will compare everything about Prisma and Drizzle so you will know once and for all which database ORM is best for your project. 📚 Materials/References: Prisma Crash Course Video: ua-cam.com/v...
State Managers Are Making Your Code Worse In React
Переглядів 141 тис.2 місяці тому
One of the first things most people do when creating a new React application is install a state management library. This is something that used to be necessary to create a React application, but with the improvements to React and the tooling around React state managers are really not needed for most applications. 📚 Materials/References: Next.js Ecommerce Project Video: Coming Soon 🌎 Find Me Her...
NEW React 19 Changes Are Amazing!
Переглядів 166 тис.2 місяці тому
FREE React Hooks Simplified Course: courses.webdevsimplified.com/react-hooks-simplified/?XY6ESEo It has been quite awhile since React 18 and there have been a ton of experimental features added to React since then. Luckily, React is finally getting ready to release these features as stable with version 19 coming sometime this year. In this video I will share with you everything you need to know...
10 Tailwind Classes I Wish I Knew Earlier
Переглядів 153 тис.2 місяці тому
Tailwind has thousands of classes, but 99% of them are just one-to-one mappings to CSS. There are a few classes, though, that go beyond just mapping directly to CSS and these classes are incredible for writing high quality clean code. In this video I am going to share the 10 Tailwind classes I wish I knew earlier since they make writing Tailwind code so much easier. 📚 Materials/References: UA-c...
8 NEW JavaScript 2024 Features
Переглядів 144 тис.3 місяці тому
8 NEW JavaScript 2024 Features
NEW Next.js 14 Course Announcement!
Переглядів 34 тис.3 місяці тому
NEW Next.js 14 Course Announcement!
How To Actually Get Hired In 2024
Переглядів 187 тис.3 місяці тому
How To Actually Get Hired In 2024
React Server Components Change Everything
Переглядів 185 тис.3 місяці тому
React Server Components Change Everything
The Ultimate Web Developer Roadmap For 2024
Переглядів 228 тис.4 місяці тому
The Ultimate Web Developer Roadmap For 2024
You Are Doing New Years Wrong
Переглядів 19 тис.4 місяці тому
You Are Doing New Years Wrong
Learn Next.js Parallel Routes In 16 Minutes
Переглядів 106 тис.4 місяці тому
Learn Next.js Parallel Routes In 16 Minutes
Learn TypeScript Generics In 13 Minutes
Переглядів 201 тис.4 місяці тому
Learn TypeScript Generics In 13 Minutes
Type Predicates Solve This Common TypeScript Error
Переглядів 44 тис.4 місяці тому
Type Predicates Solve This Common TypeScript Error
Facebook Did It Again
Переглядів 400 тис.5 місяців тому
Facebook Did It Again
20+ Must Know Array Methods That Almost Nobody Knows
Переглядів 87 тис.5 місяців тому
20 Must Know Array Methods That Almost Nobody Knows
I Cannot Believe TypeScript Recommends You Do This!
Переглядів 157 тис.5 місяців тому
I Cannot Believe TypeScript Recommends You Do This!
WTF Do These Even Mean
Переглядів 71 тис.5 місяців тому
WTF Do These Even Mean
How Is This Code Safe?
Переглядів 30 тис.6 місяців тому
How Is This Code Safe?
This Is One Of My Favorite TypeScript Features
Переглядів 129 тис.6 місяців тому
This Is One Of My Favorite TypeScript Features
Why Signals Are Better Than React Hooks
Переглядів 445 тис.6 місяців тому
Why Signals Are Better Than React Hooks
Did Josh Make A Mistake?
Переглядів 142 тис.6 місяців тому
Did Josh Make A Mistake?

КОМЕНТАРІ

  • @jasonzhang6534
    @jasonzhang6534 Годину тому

    very good introduction, easy to understand.

  • @journeyofc6200
    @journeyofc6200 2 години тому

    Some state management libraries are harder to implement then the project itself. If you have ever tried the earlier versions of redux , it was harder to learn then React itself. But I still find it suitable to do state management with much better tools like Recoil.

  • @jeraldcabusas8646
    @jeraldcabusas8646 3 години тому

    can i ask where this json use for in web? what is function and how can it help

  • @lachy2k3
    @lachy2k3 3 години тому

    This whole video is clickbait. All the test is doing is making sure the page at '/' didn't throw an exception. If the assertion was `expect(page).toHaveTitle(/EpicWeb/)` then the viewer would understand what was being tested.

  • @mikelneonedwin
    @mikelneonedwin 5 годин тому

    We had to wait for so long....

  • @chezchezchezchez
    @chezchezchezchez 5 годин тому

    Why not just make apps in the Apple store and be your own business owner? I got my first app in the App Store five months ago ago. It’s very exciting.

  • @mzosam
    @mzosam 7 годин тому

    I just put thumbs up to your videos before I even watch them🔥always have been and will always be the best teacher

  • @SirusStarTV
    @SirusStarTV 8 годин тому

    They don't have a solution to dynamic arrow positioning in popups when the popup goes out of edge

  • @nicolasleon2075
    @nicolasleon2075 8 годин тому

    Misleading demonstration??? Correct me if I'm wrong but the only reason the todos list actually renders new todos is actually because when the addTodo function triggers, at the end, the setNewTodoName function triggers, causing the rerender. If that wasn't there, when you click add, the new todo would not render on the screen

  • @mesfinmulgeta6060
    @mesfinmulgeta6060 8 годин тому

    You wonderful Guy.

  • @taleental1267
    @taleental1267 9 годин тому

    I stuck at this error : MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.

  • @lumyx3011
    @lumyx3011 9 годин тому

    Amazing tutorial. You have caused me overwhelming progress. Your tutorials are like art on a canvas, beautiful yet interpretive. You are just better.

  • @user-qd2gk3oz1n
    @user-qd2gk3oz1n 10 годин тому

    Am I wrong or did you pass a parameter from the child to the parent with useCallback?

  • @rajatverma1888
    @rajatverma1888 14 годин тому

    How clone is ruuning at 5500 and express at 3000 when in same directory.

  • @darianamsanchez
    @darianamsanchez 14 годин тому

    Totally agree, I feel like I'm not getting anywhere mocking everything since it's such a controlled environment. I do prefer unit tests in functional programming though

  • @user-uq9lj8wf6z
    @user-uq9lj8wf6z 15 годин тому

    Learn by doing!

  • @user-uq9lj8wf6z
    @user-uq9lj8wf6z 15 годин тому

    Learn By Doing!

  • @ajassharafudeen
    @ajassharafudeen 17 годин тому

    This explanation perfectly aligns with the channel name. Thank you for helping me understand this concept.

  • @IStMl
    @IStMl 17 годин тому

    0:19 Hahaha "zoo-tand"

  • @hurlingeuc7744
    @hurlingeuc7744 18 годин тому

    I haven't even watched your video yet and I 100% agree, react standard library for state is brilliant, I'll watch the rest of the video to be even more convinced tomorrow.

  • @user-nc6ho6dj3i
    @user-nc6ho6dj3i 19 годин тому

    Thank you so much, I really appreciate it :)

  • @constantindanilov236
    @constantindanilov236 19 годин тому

    this is a BEGINNER project? Oh my... I doubt it. A junior dev would not make smth like that. I think middle+ dev would be able to create this... maybe...

  • @avi12
    @avi12 21 годину тому

    That's a great tutorial, except that it doesn't cover the "passive" option

  • @smithbill239
    @smithbill239 22 години тому

    It's is very comfortable with me to watch this video with playback speed set as 0.75.

  • @SaadBelcaid
    @SaadBelcaid 23 години тому

    a chad that codes

  • @dakshdobhal7658
    @dakshdobhal7658 23 години тому

    How do I open an HTML file which is not in the same folder as my javascript file? This is my layout: In my desktop I have a folder called VSCode. In VSCode I have two folders: Javascript and HTML. My Javascript file from this video is in the Javascript folder and my HTML file is in my HTML folder

  • @OffroadTreks
    @OffroadTreks День тому

    Want to know what's faster? Not writing copescript.

  • @playvideogames369
    @playvideogames369 День тому

    Introverts be like😢

  • @seifzeghichi
    @seifzeghichi День тому

    Arrête de secouer la tête putain , ça m'énerve

  • @intune6
    @intune6 День тому

    I'm watching this tutorial and nothing works. in drizzle.config.ts db credentials connectionString not on type. driver is not assignable to type '"aws-data-api". aws-data-api is the only option I'm given for driver. What the hell is going on.

  • @bryson2662
    @bryson2662 День тому

    Damn, this is cool

  • @PomegranateChocolate
    @PomegranateChocolate День тому

    Do you click the Add button to get the New Item into the Todo list? I slow down your video to 0.25 speed and still couldn't see the Add button being clicked. May be you hit the Return key?

  • @goldenlin9528
    @goldenlin9528 День тому

    any changes to your sleep schedule now?

  • @minma02262
    @minma02262 День тому

    Why is this new. I don't get it; it is basically server-side rendering. Storing state in url is not a new idea too.

  • @dreamsdiary4345
    @dreamsdiary4345 День тому

    test 3

  • @user-lg2rk9vo8c
    @user-lg2rk9vo8c День тому

    This is a test comment

  • @joannagoofit7253
    @joannagoofit7253 День тому

    thanks for your movies. I used to watch them during my bootcamp, when i wanted to become Dev. And I still watch them as they are useful at work :)

  • @danielpardo7019
    @danielpardo7019 День тому

    Excellent tutorial and content domain! ty

  • @erkinjonholikov3707
    @erkinjonholikov3707 День тому

    Where you take small image for every original image???

  • @usage-rb8pt
    @usage-rb8pt День тому

    Really good explanation !!

  • @SensoryExplorer
    @SensoryExplorer День тому

    And no words about relations between models and how to do it in practice with requests, sad

  • @AmyGracie
    @AmyGracie День тому

    So i can look for a job with just knowledge of HTML and CSS and very little knowledge of Java script?? Kyle, the thing is, i took a step back from JS, because i felt like i needed to do projects to perfect html and css So i don't know I honestly want/need a mentor

  • @AmyGracie
    @AmyGracie День тому

    Can i get a job with just html and css

  • @AmyGracie
    @AmyGracie День тому

    What languages did you know when you applied for your first job 😅

  • @atleast_me
    @atleast_me День тому

    You are one of the most talented developers I have seen. React, Next, and Css as well, Cool.

  • @FrankUnderwoood
    @FrankUnderwoood День тому

    This is the best MVC explanation I've ever seen! I'm new to MVC because of PHP and this was incredibly helpful. Thanks Kyle! 😃

  • @nandyvivek2945
    @nandyvivek2945 День тому

    Markdown viewer.. front-end = reactjs, backend=nodejs, mongodb.. can you do this and explain how it's works

  • @BalaSubramanian-fl1fl
    @BalaSubramanian-fl1fl День тому

    Amazing Explanation

  • @liskookmanoban6023
    @liskookmanoban6023 День тому

    Thank you sir

  • @rohanroy9818
    @rohanroy9818 День тому

    Awesome