- Видео 32
- Просмотров 38 896
Practical Coder
Добавлен 4 фев 2023
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)
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
It is going to be one the most valuable tutorials ever. 🙌👌
Very cool! Reminds me of nomie :)
A great inspiration for this project :)
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
Thank you for the feedback! I might try to zoom the editor in the future so it will be more visible.
yess thank you this is exactly what i was looking for
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 🎉🎉
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 :)
PWA's really need more love.
let's gooo
Please share videos like you did with the quiz app I would love to learn it from you
why don’t you try Svelte + Tauri?
Tauri mobile seems to be getting better, so I might give it a shot :)
Yeah Svelte 5 content
HERE WE GO!! Thanks for this!!
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 .
Is there a get and post for the backend by any chance?
Hey! Sorry for the late reply, what exactly do you mean by get and post? There are GET + PUT requests in the backend.
Well this is so unexpected thanks it takes too much effort to build 6 hours of educational content thanks
Why does bro sound so frail
Thank you a lot, amazing tutorial. The only confusing I had about the MVC, which is more of a MVCS in this implementation.
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
I havent watch any videos yet, but lets try, what do I have to lose
55:22 u UselessStruct Very precise definition XD
Hello, thanks for this video. I need help with this mine is behaving incorrectly. I have a project with dashboard. Thank you.
What do you need help with?
Nice video! Thanks 😊
good video, next it would be cool if you make us golang tutorial like golang REST api's for beginners. thanks'
Thanks a lot! What topics do you want me to cover? Any specific framework you want to see?
Use labstack/echo
Wow Great Video 👌👌👌...
Thank you so much!
Can u please tell me how can we change the positionns account to local storage stored x,u oostions
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.
pee pee poo poo
deep
I'd really like to thank you for this great explanation.
Thank you for your support! 😄
Great explanation, really helps to understand how to work with IndexedDB. Thank you!
Glad it was helpful!
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.
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 :)
@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.
can I use this with react.js
Yes you can! Look at time 10:58 for an example of that.
@@practicalcoder Thanks
Your real world real todo app playlist is super helpful i am learning svelte your videos are very good please keep uploading good stuff.
Thank you so much!
bro post the github
Anything specific you want to see? I covered a lot of topics in the video.
@@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
💟
Hey, I'm having trouble setting up the system on a self-hosted machine, especially with starting the thing. Could you help me?
Hey! I guess we already spoke on Discord but if not, you can join discord.gg/qNMmZUZPp3 :)
Thanks
Thank you for watching!
Nice!!!!!
Thanks!
Please speak a couple of inches away from the mic
Thanks for this goat video ! Will follow it .
Thank you!
nice , hard to find tutos for this stack
Glad you think so!
Yeson
reallly GOAT !!!!!!!!!!!!!!!
Sweet
Nice, where can I find the code?
do you have svelte 5 content? 😬
Not yet but will for sure make some when it releases! Any project ideas you want to see? 🙂
@@practicalcoder Kahoot in Svelte 5 & Sveltekit and some DB? (Supa, Turso, Firebase postgres?)
@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.