Practical Coder
Practical Coder
  • Видео 32
  • Просмотров 38 896
So I'm making a self-tracking app in Svelte 5
Time for something different, weekly development logs!
Watch my progress on my self-tracking app, written as a PWA in Svelte 5.
This week was mainly planning and designing mockups in Figma.
GitHub: github.com/p0lloc/perfice (Not much here yet)
Просмотров: 585

Видео

Social media in Laravel & React [FULL SERIES]
Просмотров 626Месяц назад
Welcome to a full series where we create a social media platform from scratch with Laravel, React & TailwindCSS. This is beginner friendly and assumes no previous knowledge of Laravel! We learn concepts like REST APIs, file uploads, pagination, Redis caching and much more. Source code: github.com/p0lloc/social-media (Add a star 🌟) Join the Discord: discord.gg/qNMmZUZPp3 Icons by Freepik - Flati...
Create your OWN VS Code extension - Setup
Просмотров 1025 месяцев назад
In this video we take a look on how to create a custom VSCode extension, we setup a new extension project and see how to register a custom command. Join the Discord: discord.gg/qNMmZUZPp3 Icons by Freepik - Flaticon Constellations by Purrple Cat | purrplecat.com/ Music promoted by www.chosic.com/free-music/all/ Creative Commons CC BY-SA 3.0 creativecommons.org/licenses/... Timestamps: 00:00 - I...
Drag&drop dashboard in JavaScript (Gridstack.js)
Просмотров 3,5 тыс.7 месяцев назад
Today we look at Gridstack.js, a wonderful library for creating interactive drag & drop dashboards quickly. Check out Gridstack: github.com/gridstack/gridstack.js Join the Discord: discord.gg/qNMmZUZPp3 Icons by Freepik - Flaticon Constellations by Purrple Cat | purrplecat.com/ Music promoted by www.chosic.com/free-music/all/ Creative Commons CC BY-SA 3.0 creativecommons.org/licenses/... Timest...
Storing data locally in your JS app with IndexedDB
Просмотров 4,8 тыс.7 месяцев назад
Welcome back! Today we look at IndexedDB, a built-in API in our browsers to persist large amounts of data with quick lookup times! We explore the vanilla IndexedDB and also look at two wrappers, idb and Dexie.js. Join the Discord: discord.gg/qNMmZUZPp3 Icons by Freepik - Flaticon Constellations by Purrple Cat | purrplecat.com/ Music promoted by www.chosic.com/free-music/all/ Creative Commons CC...
Dynamic JSON decoding in Go - mapstructure
Просмотров 9138 месяцев назад
Today we take a look at mapstructure, a neat library for decoding dynamic data structures in an efficient way. It has a lot of cool features that we discover in this video. Mapstructure: github.com/mitchellh/mapstructure Join the Discord: discord.gg/qNMmZUZPp3 Constellations by Purrple Cat | purrplecat.com/ Music promoted by www.chosic.com/free-music/all/ Creative Commons CC BY-SA 3.0 creativec...
Kahoot Quiz Clone in Svelte & Go [FULL SERIES]
Просмотров 10 тыс.8 месяцев назад
Welcome to a full series in Golang and Svelte where we create a clone of the beloved Kahoot Quiz Platform. We discover topics like REST APIs and real-time communication with WebSockets and create a beautiful UI with Tailwind CSS. Source code: github.com/p0lloc/quiz-platform (Add a star 🌟) Join the Discord: discord.gg/qNMmZUZPp3 I am not associated with or endorsed by Svelte in any means. melt a...
Real-World Todo App in Svelte #23 - Tweens
Просмотров 668Год назад
Welcome back to the channel! In this video we take a look at tweens in Svelte to level up the user experience in our todo application. Note: I'm trying a more concise video format with focus on theory first and then practical implementation, let me know if you like it! Discord: discord.com/invite/qNMmZUZPp3 I am not associated with or endorsed by Svelte in any means. Purple Dream by Ghostrifter...
Create A Real-World Todo Application In Svelte #22 - Custom task columns/lists (part 2)
Просмотров 653Год назад
Welcome back to the channel! In this video we leave the hard-coded columns and let the user create and name their own columns. We also add drag and drop so that the columns can be reordered. This video is split into two parts to keep it more concise. Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our projects with each other a...
Create A Real-World Todo Application In Svelte #21 - Custom task columns/lists (part 1)
Просмотров 267Год назад
Welcome back to the channel! In this video we leave the hard-coded columns and let the user create and name their own columns. We also add drag and drop so that the columns can be reordered. This video is split into two parts to keep it more concise. Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our projects with each other a...
Create A Real-World Todo Application In Svelte #20 - Accessibility, $$props
Просмотров 341Год назад
Welcome back to the channel! In this video we take a very surface level look at web accessibility. This helps making the app accessible to a wider range of people and generally increases page ranking in search engines such as Google. We also try out the special $$props syntax to fetch component props dynamically. Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to bui...
Create A Real-World Todo Application In Svelte #19 - Custom right-click menus & stores
Просмотров 439Год назад
Welcome back to the channel! In this video we take a look at implementing our own context menu (right-click menu) to let the user delete/rename boards from the sidebar. We do this through the help of Svelte stores which I surprisingly haven't shown on this channel before! Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our proj...
Create A Real-World Todo Application In Svelte #18 - Deadlines & drag n drop subtasks
Просмотров 1,1 тыс.Год назад
Welcome back to the channel! In this video we implement deadlines so that the user can keep track of when their tasks are due. We also quickly add the ability to drag and drop subtasks! Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our projects with each other and learn together! I am not associated with or endorsed by Svelte...
Create A Real-World Todo Application In Svelte #17 - Subtasks
Просмотров 350Год назад
Welcome back to the channel! In this video we take a look at implementing subtasks underneath each task. At the end we also do some quick refactoring to keep the code clean and maintainable! Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our projects with each other and learn together! I am not associated with or endorsed by S...
Create A Real-World Todo Application In Svelte #16 - Deleting boards & remembering user's last board
Просмотров 232Год назад
Welcome back to the channel! In this short video we add the ability to delete boards. We also let the application remember which board the user had opened last by saving it to localStorage. Discord: discord.com/invite/qNMmZUZPp3 Feel free to subscribe as I'm trying to build a community where we can share our projects with each other and learn together! I am not associated with or endorsed by Sv...
Create A Real-World Todo Application In Svelte #15 - Responsive sidebar & renaming boards
Просмотров 612Год назад
Create A Real-World Todo Application In Svelte #15 - Responsive sidebar & renaming boards
Create A Real-World Todo Application In Svelte #14 - Creating new boards / sidebar
Просмотров 291Год назад
Create A Real-World Todo Application In Svelte #14 - Creating new boards / sidebar
Create A Real-World Todo Application In Svelte #13 - Multiple different boards & refactoring
Просмотров 239Год назад
Create A Real-World Todo Application In Svelte #13 - Multiple different boards & refactoring
Real-World Todo App In Svelte #12 - Responsive layout with Tailwind CSS
Просмотров 321Год назад
Real-World Todo App In Svelte #12 - Responsive layout with Tailwind CSS
Real-World Todo App In Svelte #11 - Drag & drop part 2
Просмотров 458Год назад
Real-World Todo App In Svelte #11 - Drag & drop part 2
Real-World Todo App In Svelte #10 - Drag & drop with svelte-dnd-action
Просмотров 1,5 тыс.Год назад
Real-World Todo App In Svelte #10 - Drag & drop with svelte-dnd-action
Real-World Todo App In Svelte #9 - Add/edit tags, bind:this, random colors
Просмотров 271Год назад
Real-World Todo App In Svelte #9 - Add/edit tags, bind:this, random colors
Real-World Todo App In Svelte #8 - Confirmation modal, task description, tags
Просмотров 247Год назад
Real-World Todo App In Svelte #8 - Confirmation modal, task description, tags
Real-World Todo App In Svelte - Iconify icons, extending Tailwind classes
Просмотров 503Год назад
Real-World Todo App In Svelte - Iconify icons, extending Tailwind classes
Real-World Todo App In Svelte #6 - Separating completed tasks
Просмотров 307Год назад
Real-World Todo App In Svelte #6 - Separating completed tasks
Real-World Todo App In Svelte #5 - Components with Tailwind CSS and Flowbite
Просмотров 2 тыс.Год назад
Real-World Todo App In Svelte #5 - Components with Tailwind CSS and Flowbite
Real-World Todo App In Svelte #4 - Refactoring & trying out Tailwind CSS
Просмотров 437Год назад
Real-World Todo App In Svelte #4 - Refactoring & trying out Tailwind CSS
Real-World Todo App In Svelte #3 - Saving tasks to localStorage or download as file
Просмотров 637Год назад
Real-World Todo App In Svelte #3 - Saving tasks to localStorage or download as file
Real-World Todo App In Svelte #2 - Create/edit tasks, modals, slots, best practices
Просмотров 1,2 тыс.Год назад
Real-World Todo App In Svelte #2 - Create/edit tasks, modals, slots, best practices
Real-World Todo App In Svelte #1 - Initial structure, #each, bind directive, events
Просмотров 2,3 тыс.Год назад
Real-World Todo App In Svelte #1 - Initial structure, #each, bind directive, events

Комментарии

  • @adingroup464
    @adingroup464 День назад

    It is going to be one the most valuable tutorials ever. 🙌👌

  • @TejovanthN
    @TejovanthN 3 дня назад

    Very cool! Reminds me of nomie :)

    • @practicalcoder
      @practicalcoder 23 часа назад

      A great inspiration for this project :)

  • @zwelllll
    @zwelllll 4 дня назад

    IMO, It would be better to be seen with a bit bigger screen. Now it is too small for viewers with mobile devices and watching with low quality because of connection problem. Seeing editor and brower side by side is really tricky for mobile views

    • @practicalcoder
      @practicalcoder 4 дня назад

      Thank you for the feedback! I might try to zoom the editor in the future so it will be more visible.

  • @a7mdbest15
    @a7mdbest15 5 дней назад

    yess thank you this is exactly what i was looking for

  • @shortclips7011
    @shortclips7011 5 дней назад

    Hello, I was trying to follow making web app like Kahoot with your video But I was not able to run it properly Can you make a separate video about how to run that application Before doing that clear your database also Thanks in advance 🎉🎉

    • @practicalcoder
      @practicalcoder 4 дня назад

      Hello! What command are you running to start the application? There's also no way to create a new quiz in the UI, so you need to manually create one in the database, like db.quizzes.insert({"name": "Test quiz", "questions": []}). Feel free to join my Discord if you have more questions :)

  • @scott_itall8638
    @scott_itall8638 5 дней назад

    PWA's really need more love.

  • @imalkesara4466
    @imalkesara4466 5 дней назад

    let's gooo

  • @prashlovessamosa
    @prashlovessamosa 6 дней назад

    Please share videos like you did with the quiz app I would love to learn it from you

  • @ok-alarm
    @ok-alarm 6 дней назад

    why don’t you try Svelte + Tauri?

    • @practicalcoder
      @practicalcoder 4 дня назад

      Tauri mobile seems to be getting better, so I might give it a shot :)

  • @prashlovessamosa
    @prashlovessamosa 6 дней назад

    Yeah Svelte 5 content

  • @ok-alarm
    @ok-alarm 6 дней назад

    HERE WE GO!! Thanks for this!!

  • @roxa092
    @roxa092 29 дней назад

    finally i got a really good stuf i know you deserve more this is unexpected for me coz i know i am going to learn some thing new .

  • @HotShotRodGoingDown
    @HotShotRodGoingDown Месяц назад

    Is there a get and post for the backend by any chance?

    • @practicalcoder
      @practicalcoder 28 дней назад

      Hey! Sorry for the late reply, what exactly do you mean by get and post? There are GET + PUT requests in the backend.

  • @prashlovessamosa
    @prashlovessamosa Месяц назад

    Well this is so unexpected thanks it takes too much effort to build 6 hours of educational content thanks

  • @sunrocketz6489
    @sunrocketz6489 2 месяца назад

    Why does bro sound so frail

  • @howchen8529
    @howchen8529 2 месяца назад

    Thank you a lot, amazing tutorial. The only confusing I had about the MVC, which is more of a MVCS in this implementation.

  • @GeraldScholz
    @GeraldScholz 2 месяца назад

    I don't know how many times i wanted to make my own clone. Now i found your video and will give a another shot

  • @adel.dev.account
    @adel.dev.account 2 месяца назад

    I havent watch any videos yet, but lets try, what do I have to lose

  • @vladislav_artyukhov
    @vladislav_artyukhov 2 месяца назад

    55:22 u UselessStruct Very precise definition XD

  • @Shane-y8c
    @Shane-y8c 4 месяца назад

    Hello, thanks for this video. I need help with this mine is behaving incorrectly. I have a project with dashboard. Thank you.

  • @ZohoExpert
    @ZohoExpert 5 месяцев назад

    Nice video! Thanks 😊

  • @Eyuelfrew
    @Eyuelfrew 5 месяцев назад

    good video, next it would be cool if you make us golang tutorial like golang REST api's for beginners. thanks'

    • @practicalcoder
      @practicalcoder 5 месяцев назад

      Thanks a lot! What topics do you want me to cover? Any specific framework you want to see?

    • @biigsmokee
      @biigsmokee 3 месяца назад

      Use labstack/echo

  • @twd2
    @twd2 6 месяцев назад

    Wow Great Video 👌👌👌...

  • @aygamingff6456
    @aygamingff6456 6 месяцев назад

    Can u please tell me how can we change the positionns account to local storage stored x,u oostions

    • @practicalcoder
      @practicalcoder 5 месяцев назад

      Hello! You can store the widgets in localStorage as JSON with JSON.stringify and load them back with JSON.parse, then create widgets with addWidget or makeWidget.

  • @MultiDringus
    @MultiDringus 6 месяцев назад

    pee pee poo poo

  • @siefeldenabualsoud9021
    @siefeldenabualsoud9021 6 месяцев назад

    I'd really like to thank you for this great explanation.

    • @practicalcoder
      @practicalcoder 6 месяцев назад

      Thank you for your support! 😄

  • @bartoszkrawczyk4976
    @bartoszkrawczyk4976 6 месяцев назад

    Great explanation, really helps to understand how to work with IndexedDB. Thank you!

  • @GatewayITTutorials
    @GatewayITTutorials 7 месяцев назад

    If you want to simply parse a JSON structure that you know nothing about in advance (aka "dynamic JSON") - then Go can do that out of the box. Just execute json.Unmarshall(jsonBytes, map[string]interface{}) and you are pretty much done. Now you can access your fields using a classic map["key"] call.

    • @practicalcoder
      @practicalcoder 7 месяцев назад

      That is true! This is useful when you have a set of predefined structs where your JSON might be any of them, often depending on another field in the JSON. You then gain static types for your data, without having to unmarshal the JSON twice. Could have titled the video better :)

    • @GatewayITTutorials
      @GatewayITTutorials 7 месяцев назад

      @practicalcoder I usually just check the key type (if string, do this, etc) or a key value, and then unmarshall into an appropriate struct :) This lets me avoid yet another dependency I have to deal with in the future.

  • @sourabhsingh5941
    @sourabhsingh5941 7 месяцев назад

    can I use this with react.js

    • @practicalcoder
      @practicalcoder 7 месяцев назад

      Yes you can! Look at time 10:58 for an example of that.

    • @sourabhsingh5941
      @sourabhsingh5941 7 месяцев назад

      @@practicalcoder Thanks

  • @prashlovessamosa
    @prashlovessamosa 7 месяцев назад

    Your real world real todo app playlist is super helpful i am learning svelte your videos are very good please keep uploading good stuff.

  • @brinkrin24
    @brinkrin24 7 месяцев назад

    bro post the github

    • @practicalcoder
      @practicalcoder 7 месяцев назад

      Anything specific you want to see? I covered a lot of topics in the video.

    • @brinkrin24
      @brinkrin24 7 месяцев назад

      @@practicalcoder the github of the project. people who code don't want to sift through a video to find code snippets they want / need. posting the github so people can look through the code would be really helpful

  • @imalkesara4466
    @imalkesara4466 7 месяцев назад

    💟

  • @wviitla
    @wviitla 7 месяцев назад

    Hey, I'm having trouble setting up the system on a self-hosted machine, especially with starting the thing. Could you help me?

    • @practicalcoder
      @practicalcoder 7 месяцев назад

      Hey! I guess we already spoke on Discord but if not, you can join discord.gg/qNMmZUZPp3 :)

  • @prashlovessamosa
    @prashlovessamosa 7 месяцев назад

    Thanks

  • @ok-alarm
    @ok-alarm 7 месяцев назад

    Nice!!!!!

  • @thiccboi6211
    @thiccboi6211 7 месяцев назад

    Please speak a couple of inches away from the mic

  • @gfddgitgud3848
    @gfddgitgud3848 7 месяцев назад

    Thanks for this goat video ! Will follow it .

  • @datadriveAshura
    @datadriveAshura 7 месяцев назад

    nice , hard to find tutos for this stack

  • @karxem
    @karxem 8 месяцев назад

    Yeson

  • @mmmcorp8505
    @mmmcorp8505 8 месяцев назад

    reallly GOAT !!!!!!!!!!!!!!!

  • @prashlovessamosa
    @prashlovessamosa 8 месяцев назад

    Sweet

  • @bagwaniali9514
    @bagwaniali9514 8 месяцев назад

    Nice, where can I find the code?

  • @ok-alarm
    @ok-alarm 8 месяцев назад

    do you have svelte 5 content? 😬

    • @practicalcoder
      @practicalcoder 8 месяцев назад

      Not yet but will for sure make some when it releases! Any project ideas you want to see? 🙂

    • @kirso
      @kirso 8 месяцев назад

      @@practicalcoder Kahoot in Svelte 5 & Sveltekit and some DB? (Supa, Turso, Firebase postgres?)

    • @moonchildeverlasting9904
      @moonchildeverlasting9904 8 месяцев назад

      @practicalcoder maybe add an branch using svelte5 , then with DB ? the idea is probably more to be sure of how to code something, then how to edit /refactor or add something else.