![WebForDevs](/img/default-banner.jpg)
- 40
- 20 301
WebForDevs
Estonia
Приєднався 22 кві 2015
Front-end Engineer at Microsoft.
Subscribe to the channel and gain access to specialized content crafted to boost your skills and prepare you for a thriving career at top tech companies like Meta, Amazon, Apple, Netflix, and Google. Join my journey and transform your potential into reality. Let’s succeed together-step by step, line by line! 🚀
Subscribe to the channel and gain access to specialized content crafted to boost your skills and prepare you for a thriving career at top tech companies like Meta, Amazon, Apple, Netflix, and Google. Join my journey and transform your potential into reality. Let’s succeed together-step by step, line by line! 🚀
Front-End System Design - Maps
Welcome to my detailed tutorial on Front-End System Design, focusing specifically on MAPS! Join me as we explore the essentials of creating a simplified version of mapping systems like Google Maps and Bing Maps.
🖥️ Deep Dive: In this guide, we'll cover the key components of building a functional map application, including interactive maps, real-time data integration, and user-friendly interfaces. Whether you're an experienced front-end developer or just starting out, you'll find valuable insights and techniques to enhance your skills.
🛠️ Why Watch?: Mapping systems are integral to many modern applications, providing users with location-based services and information. By mastering the design of a map system, you can create powerful and engaging applications that benefit users in various ways.
⏱️ Agenda of Front-End System Design - Maps:
00:00 - Intro
00:27 - Functional requirements
01:29 - Non-Functional requirements
02:00 - Main components
02:11 - Creating Map - Tiles
02:57 - Creating Map - Zoom level
03:11 - Cost of tile-based approach
03:40 - Creating Map - SVG or Canvas
06:11 - Creating Map - Pseudocode/Example
06:51 - Tooltips and Markers
07:38 - Key points (refreshing)
08:10 - New component - From/To
08:48 - User Location tracking
09:09 - Data structure
09:51 - Shortest Path
11:31 - A11y
12:35 - Key Performance Optimizations
📚 Continuous Learning: This channel is dedicated to providing you with the most up-to-date and relevant knowledge. If you find this tutorial helpful, please like 👍, share 🔄, and subscribe 🔔 for more detailed content on front-end system design and development!
🔗 Links:
- Telegram channel: t.me/webfordevs
- Instagram: webfordevs
- UA-cam shorts: @webfordevs-shorts
- UA-cam videos: @webfordevs
- Buy Me Coffee: www.buymeacoffee.com/webfordevs
#webfordevs #systemdesign #mapssystemdesign
🖥️ Deep Dive: In this guide, we'll cover the key components of building a functional map application, including interactive maps, real-time data integration, and user-friendly interfaces. Whether you're an experienced front-end developer or just starting out, you'll find valuable insights and techniques to enhance your skills.
🛠️ Why Watch?: Mapping systems are integral to many modern applications, providing users with location-based services and information. By mastering the design of a map system, you can create powerful and engaging applications that benefit users in various ways.
⏱️ Agenda of Front-End System Design - Maps:
00:00 - Intro
00:27 - Functional requirements
01:29 - Non-Functional requirements
02:00 - Main components
02:11 - Creating Map - Tiles
02:57 - Creating Map - Zoom level
03:11 - Cost of tile-based approach
03:40 - Creating Map - SVG or Canvas
06:11 - Creating Map - Pseudocode/Example
06:51 - Tooltips and Markers
07:38 - Key points (refreshing)
08:10 - New component - From/To
08:48 - User Location tracking
09:09 - Data structure
09:51 - Shortest Path
11:31 - A11y
12:35 - Key Performance Optimizations
📚 Continuous Learning: This channel is dedicated to providing you with the most up-to-date and relevant knowledge. If you find this tutorial helpful, please like 👍, share 🔄, and subscribe 🔔 for more detailed content on front-end system design and development!
🔗 Links:
- Telegram channel: t.me/webfordevs
- Instagram: webfordevs
- UA-cam shorts: @webfordevs-shorts
- UA-cam videos: @webfordevs
- Buy Me Coffee: www.buymeacoffee.com/webfordevs
#webfordevs #systemdesign #mapssystemdesign
Переглядів: 220
Відео
Setting Up Web Push Notifications for Your Website
Переглядів 85Місяць тому
Hello everyone! 👋 In this video, we'll walk you through the process of setting up web push notifications for your website using the Web Push API, Node.js, and service workers. Whether you're a beginner or looking to enhance your web development skills, this step-by-step guide will help you implement real-time notifications effortlessly. 🚀 Timelines: 0:00 - Introduction 📢 0:13 - Setting Up Node....
How to Move Elements Correctly with JavaScript and requestAnimationFrame
Переглядів 1972 місяці тому
In this tutorial, we delve deep into the world of web animations, guiding you through the precise methods to move elements around your web pages seamlessly. No more jitters or out-of-bound glitches - just smooth javascript transitions that'll captivate your audience. Whether you're a beginner or an experienced developer, this video is your one-stop guide to mastering element movement with JavaS...
Middle of the Linked List | JavaScript | LeetСode
Переглядів 812 місяці тому
Welcome to my latest JavaScript tutorial! In this video, we dive into a common challenge in data structures: finding the Middle of the Linked List. Whether you're preparing for coding interviews or enhancing your understanding of linked lists, this video is perfect for you! 🌟 We'll walk you through a step-by-step coding solution in JavaScript, highlighting how to use a Set to efficiently solve ...
Custom Sort String | JavaScript | LeetСode
Переглядів 543 місяці тому
Welcome to my JavaScript tutorial on how to create a custom sort string! 👋 In this video, we'll walk you through a step-by-step guide on how to sort the characters in a string according to a custom-defined order. 🚀 What you'll learn: - Understand the problem statement for custom string string. - Tackling LeetCode 791's "Custom Sort String" challenge with ease. - Learn about the time and space c...
Linked List Cycle | JavaScript | LeetСode
Переглядів 683 місяці тому
🚀 Dive into a common interview question and a fundamental concept in computer science: detecting a cycle in a linked list using JavaScript 🚀 🔍 What You Will Learn: - What is a cycle in a linked list, and why is it important to detect? - How to use JavaScript data structures like Sets to track visited nodes. - Step-by-step coding of the solution with clear explanations. 🗿Why This Video? - Unders...
Front-End System Design - Slider Component
Переглядів 2233 місяці тому
Welcome to our tutorial on Front-End System Design, focusing on creating a versatile Slider Component. If you're a budding front-end developer or a seasoned pro looking to refine your design skills, this video is crafted just for you! 🛠️ In this tutorial, we'll cover: - The basics of a slider component - Tips for making your slider responsive and accessible - Optimizing your slider for performa...
Front-End System Design - Video Conference
Переглядів 3483 місяці тому
Welcome to our comprehensive guide on Front-End System Design, with a special focus on Video Conferencing! This tutorial is crafted for developers and tech enthusiasts looking to understand the intricacies of designing a front-end system for video conferencing applications like Zoom, Microsoft Teams, Google Hangouts, and other similar tools. What You'll Learn: 🌐 Real-Time Communication: Insight...
Building Your First React Date Picker!
Переглядів 1674 місяці тому
In this video, we dive into the exciting world of React to create a custom date picker from scratch. Perfect for beginners and those looking to add interactive elements to their web projects, this tutorial is designed to be straightforward and easy to follow. 🔹 Why a Custom Date Picker? Custom date pickers not only enhance the user experience by offering a seamless way to input dates, but they ...
Front-End System Design - Tic Tac Toe
Переглядів 3744 місяці тому
Welcome to my detailed tutorial on Front-End System Design, focusing specifically on Tic Tac Toe! In this video, we break down the game's design from the ground up, showcasing the functional and non-functional requirements, detailed TypeScript interfaces, and an intuitive winning algorithm that ensures a seamless gaming experience. What You'll Learn: 🎮 Functional Requirements: Discover how to c...
How to Implement Nested Checkboxes?
Переглядів 6204 місяці тому
🚀 Dive deep into How to Implement Nested Checkboxes? with this detailed guide! 🚀. This tutorial covers a fundamental aspect of web development and user interface design, focusing on creating interactive forms with nested checkboxes functionality. Key Requirements Explained: - When the parent checkbox is checked, all child checkboxes will also be checked. - Unchecking the parent checkbox will un...
Trade-offs examples for your system design interview
Переглядів 3315 місяців тому
Hey there! Welcome to my friendly guide on navigating trade-offs in system design interviews! 🚀 This video is perfect for anyone eager to shine in their next system design interview or just keen on improving their system design skills. I'll walk you through the pros and cons of using CSS vs. JavaScript, all through the fun example of a Masonry layout, just like Pinterest's. It's about making sm...
Web Security Tips for Front End Developers
Переглядів 3406 місяців тому
Welcome to our latest video, "Web Security Tips for Front End Developers," where I dive into the essential practices every front-end developer should know to enhance the security of their websites and applications. In this video, I explore various strategies and techniques to safeguard your web projects against common security threats. From understanding the basics of sanitizing form inputs to ...
Top Accessibility Requirements For Your Website
Переглядів 856 місяців тому
🌐 Welcome to our detailed walkthrough on the Top Accessibility Requirements For Your Website! This video is crafted to help you grasp the essential accessibility standards that every website should meet. 🎯 We often encounter the same accessibility requirements during front-end system design interviews, but they tend to be broad and not specific to technologies. Here, we aim to streamline this p...
Same Tree Leetcode | JavaScript
Переглядів 2637 місяців тому
👋 Welcome to our comprehensive tutorial on the "Same Tree" Leetcode problem using JavaScript! In this video, we'll tackle this popular coding challenge with two distinct approaches: Depth-First Search (DFS) and Breadth-First Search (BFS). Perfect for coding interview prep or enhancing your JavaScript skills! 🤓📚 Perfect for preparing for interviews at FAANG/MAANG companies (Facebook/Meta, Amazon...
Front-End System Design - Star Widget
Переглядів 5678 місяців тому
Front-End System Design - Star Widget
Creating a Searchable React Tree View
Переглядів 3,7 тис.9 місяців тому
Creating a Searchable React Tree View
Promise Pool | JavaScript | LeetCode
Переглядів 1809 місяців тому
Promise Pool | JavaScript | LeetCode
Most Asked PayPal Interview Questions
Переглядів 5569 місяців тому
Most Asked PayPal Interview Questions
How To Display Loading State During API Calls
Переглядів 3419 місяців тому
How To Display Loading State During API Calls
How to Implement Your Own getElementById Method ?
Переглядів 3179 місяців тому
How to Implement Your Own getElementById Method ?
The Most Frequent LeetCode Task in Palantir Interviews
Переглядів 8129 місяців тому
The Most Frequent LeetCode Task in Palantir Interviews
A new method to validate URLs in JavaScript
Переглядів 51010 місяців тому
A new method to validate URLs in JavaScript
The Most Common Algorithmic Problems In Google Interviews
Переглядів 34010 місяців тому
The Most Common Algorithmic Problems In Google Interviews
The Most Popular Algorithmic Problems in Meta Interviews
Переглядів 50110 місяців тому
The Most Popular Algorithmic Problems in Meta Interviews
How to Implement Form Validation in React.js?
Переглядів 8910 місяців тому
How to Implement Form Validation in React.js?
Please recreate this in React
how do we request a ride and instantly gets a ride found according to your synchronous rest api request ride call?
Thank you for the question. In my video, I focused on the general idea of the system design and didn't cover this in detail. However, to request a ride, we can use short or long polling methods. This means there will be a slight wait time until a ride is found and someone picks you up.
Great work Stepan! Good quality System Design.
Thank you Max :) I appreciate it
This is very high quality system design work especially the entity part
Thanks for your support. It really helps.
This is very good! Thanks!
I appreciate your feedback. Thanks a lot!
Awesome
I’m grateful for your encouragement. Thank you!
damn bro. that explains. ❤❤ there is some issues, if i remove any number it cursor goes on start or stays in the middle whitle typing.
Do you mean you're having an issue, or was it in the demo? I removed the numbers at the end of the video and didn't see any problems. If you're experiencing an issue and can share a link to it, I can take a look.
@@webfordevs I'll share
ok, i did stupid. it was selectionEnd and i typed selectonEnd, missed the i. 🤡
Do not worry. Let me know if you have any other questions
Thanks for this wonderfully detailed explanation
Thank you for your kind words. I appreciate them.
when i open the server/website i find the read me file only why?
Did you create an index.html file? You could try redeploying it in case something was cached. Also, if you send me a link to your repository, I might be able to take a look and help out.
Thank you for a well explained video!
Thank you for your support. I appreciate it.
Promo>SM 😉
This is a hidden gem for beginner like me, thanks a lot
thank you very much, I'm very pleased to hear this
@@webfordevs please keep the good work, although it may not seems significant yet but you did and will give some impact to us who seek for the materials. Thank you.
Hey can pls post the code as well?
Hey, sure. Updated the description. Let me know if there is anything I can help with :)
Your solution is so short and elegant, I really liked it
Thx
good job! 🤜🤛
UA-cam needs more FE sys design videos. Just wanted to say thanks for expanding my mind :)
Thank you :) I appreciate it
Cool video although I felt something missing is state transition, because tasks will transition from todo -> in progress -> completed, how would we implement something like this ?
Hey :) I tried to describe it here ua-cam.com/video/zwY4wyqG37E/v-deo.html but on the high level
thx bro, it's very clear!
Nice one, Can we get the git repo link
added link to the video description
Nice explanation, thx👌
Great tutorial! Thank you so much!
Great explanation!! can you please share the list of all other questions on leetcode that have been asked in a Palantir interview?
Thank you for the comment 🙂 A comprehensive list of questions asked in Palantir interviews can be found on the LeetCode website under the section for Palantir Technologies. However, access to this list requires a paid subscription. leetcode.com/company/palantir-technologies/
amazing example man ! thank you for video
You're welcome! I'm glad you found the video helpful. If you have any questions or need further clarification, feel free to ask!
@@webfordevs if you share the code it would be great or at least mock data which you use for this tutorial
@@casull6447 you can see mock data at 5:34 ua-cam.com/video/xFj03L31bao/v-deo.html , so it is just array with 2-3 fields (id, name, children)
@@casull6447 added link to source code to the video description
How would you handle the case where the user drags and re-arranges the task order? How would you change the API to reflect that
Hello 😊. You bring up an excellent point. As far as I recall, the drag-and-drop functionality wasn't initially part of the design. To be honest, I would consider revising some of the original requirements based on your question. To address your query, here's what I would do: - Introduce a new field, such as "order" or "position," to keep track of the task sequence. - Create a new API endpoint, specifically `POST /tasks/reorder`, to handle the reordering of tasks. - As an alternative to locking tasks, I'd suggest using version numbers for each task. This way, the server can reject any attempts to update a task based on an outdated version. This is a brief overview, but for a more comprehensive and effective solution, I would create a new design to describe it in detail. I hope this answers your question! Feel free to reach out if you have any more queries.
@@webfordevs I liked both the question and the detailed answer 👍
O wea, wea wea, wea!
Thanks! Hope you enjoyed the video! 😊
Amazing clarity in your explanation! Excellent work, and thank you for sharing this information
Glad you enjoyed it!
Hi
Why not use the BrowserRouter component? Is there advatages to a custome createBrowserRouter?
Hey there :) It is a good question, thank you. The main difference between createBrowserRouter and BrowserRouter is that createBrowserRouter includes data APIs like loaders, actions, fetchers and more. So, if you do not need to use any of these features, you can still use BrowserRouter , but createBrowserRouter function opens new functionality for you. Please, let me know if you have any other questions.
I hope you all enjoyed this quick video on form validation in React.js . If you have any topics you want me to cover in future videos let me know!
I wish I could have founded this channel back then... 😢
You can try to navigate to the repository where you published the GitHub Pages site, click on the "Settings" tab (usually located next to "Code"), and scroll down to the "GitHub Pages" section where your GitHub Pages URL will be displayed.
I hope you all enjoyed this quick video on react-router-dom. If you have any topics you want me to cover in future videos let me know!
I hope you all enjoyed this quick video on Dynamic Viewport Units in CSS:. If you have any topics you want me to cover in future videos let me know!
Explain react router best practices
Thank you for the comment, got it, will try to do it
I hope you all enjoyed this quick video on fetching data in react.js. If you have any topics you want me to cover in future videos let me know!
Please, let me know if you have any issues with publishing a website under the video
I hope you all enjoyed this quick video on state in react.js. If you have any topics you want me to cover in future videos let me know!
will be cool to see something about fetching data
@@user-co5sd3sm1k will do, thank you for the comment :)
So Good !! Keep doing great stuff like this ( I subscribed )
Thank you for the comment and you support :)
Looks amazing! Nice!
thank you :)