Media is too big
VIEW IN TELEGRAM
21. Recycling Elements
Evgenii recycles the elements in the virtualization exercise to avoid creating new elements. The new element positions are calculated based on the previous/next element values plus the margin offset. Absolute positioning is used for reordering the elements so the GPU is leveraged to ensure the best performance.
#lesson
Evgenii recycles the elements in the virtualization exercise to avoid creating new elements. The new element positions are calculated based on the previous/next element values plus the margin offset. Absolute positioning is used for reordering the elements so the GPU is leveraged to ensure the best performance.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
22. Virtualization Pool Q&A
Evgenii answers questions about virtualization, including the types of applications where virtualization is beneficial and the differences between virtualization and other lazy loading techniques.
#lesson
Evgenii answers questions about virtualization, including the types of applications where virtualization is beneficial and the differences between virtualization and other lazy loading techniques.
#lesson
Media is too big
VIEW IN TELEGRAM
23. Handle Top Virtualization
Evgenii concludes the virtualization exercise by handling intersections with the top observer. As the container is scrolled up, the elements are recycled to the top of the list. The scroll height calculation is used to maintain the same scroll position on the page.
#lesson
Evgenii concludes the virtualization exercise by handling intersections with the top observer. As the container is scrolled up, the elements are recycled to the top of the list. The scroll height calculation is used to maintain the same scroll position on the page.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Application State Design
Evgenii discusses strategies for managing state in an application. Understanding the trade-offs between IndexedDB, SessionStorage, and LocalStorage and normalizing forms will help optimize access costs. Indexes should be used if an in-app search is required.
#lesson
Evgenii discusses strategies for managing state in an application. Understanding the trade-offs between IndexedDB, SessionStorage, and LocalStorage and normalizing forms will help optimize access costs. Indexes should be used if an in-app search is required.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Network Connectivity
Evgenii reviews UDP and TCP protocols and explains UDP doesn't guarantee the order of the data packets received across the network. Other network considerations are discussed, including energy consumption and latency. This lesson also includes the pros and cons of using long polling
#lesson
Evgenii reviews UDP and TCP protocols and explains UDP doesn't guarantee the order of the data packets received across the network. Other network considerations are discussed, including energy consumption and latency. This lesson also includes the pros and cons of using long polling
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
26. Server-Sent Events
Evgenii discusses server-sent events, which are one alternative to long polling. Server-sent events have automatic reconnection handling and are more battery-efficient. They are also a good alternative to Web Sockets and very effective for large text-data streams.
#lesson
Evgenii discusses server-sent events, which are one alternative to long polling. Server-sent events have automatic reconnection handling and are more battery-efficient. They are also a good alternative to Web Sockets and very effective for large text-data streams.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
27. Web Sockets
Evgenii explains that Web Sockets are one of the fastest ways to send data between the client and the server. They are bi-directional and will use TCP to send binary packets. The drawbacks of Web Sockets are the infrastructure cost and computing resources required to maintain constant TCP connections. The lesson concludes with a discussion of which networking strategy is best for the application's API.
#lesson
Evgenii explains that Web Sockets are one of the fastest ways to send data between the client and the server. They are bi-directional and will use TCP to send binary packets. The drawbacks of Web Sockets are the infrastructure cost and computing resources required to maintain constant TCP connections. The lesson concludes with a discussion of which networking strategy is best for the application's API.
#lesson
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
28. Classic REST & GraphQL
Evgenii compares classic REST APIs with GraphQL. Adding a GraphQL API introduces additional complexity, including requiring client libraries, caching layers, client state management for syncing data with the server, and the potential impact on JavaScript bundle size. GraphQL can also reduce complexity by providing a single API for client applications but multiple network implementations on the server.
#lesson
Evgenii compares classic REST APIs with GraphQL. Adding a GraphQL API introduces additional complexity, including requiring client libraries, caching layers, client state management for syncing data with the server, and the potential impact on JavaScript bundle size. GraphQL can also reduce complexity by providing a single API for client applications but multiple network implementations on the server.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
29. Performance Optimization
Evgenii discusses the core web vital metrics that help developers identify where to apply performance optimizations. Metrics include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. This lesson also includes performance differences between http/1.1, http/2, and http/3.
#lesson
Evgenii discusses the core web vital metrics that help developers identify where to apply performance optimizations. Metrics include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. This lesson also includes performance differences between http/1.1, http/2, and http/3.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
30. JavaScript Bundling & Loading
Evgenii highlights strategies for optimizing JavaScript bundle size. The strategies include a multi-bundle compiler, code splitting, code prefetching, and code minification/compression. Other in-application techniques like deferred script loading are also discussed.
#lesson
Evgenii highlights strategies for optimizing JavaScript bundle size. The strategies include a multi-bundle compiler, code splitting, code prefetching, and code minification/compression. Other in-application techniques like deferred script loading are also discussed.
#lesson
Media is too big
VIEW IN TELEGRAM
31. CSS, Images & Rendering
Evgenii covers optimization techniques for assets such as CSS stylesheets and images. Similar JS optimizations like splitting, minifying, and compressing can be applied to CSS. Image optimization strategies depend on the type of image asset. The WEBP format is designed to replace PNG, JPG, and GIF usage on web pages. This lesson also includes performance optimizations for fonts and rendering performance.
#lesson
Evgenii covers optimization techniques for assets such as CSS stylesheets and images. Similar JS optimizations like splitting, minifying, and compressing can be applied to CSS. Image optimization strategies depend on the type of image asset. The WEBP format is designed to replace PNG, JPG, and GIF usage on web pages. This lesson also includes performance optimizations for fonts and rendering performance.
#lesson
👍1
Media is too big
VIEW IN TELEGRAM
32. Requirements & Mock-Up
Evgenii simulates an interview environment for designing a social media application news feed similar to Twitter. The application requirements and a mock-up of the virtualization are designed. The requirements include both functional and non-functional items.
#lesson
Evgenii simulates an interview environment for designing a social media application news feed similar to Twitter. The application requirements and a mock-up of the virtualization are designed. The requirements include both functional and non-functional items.
#lesson
Media is too big
VIEW IN TELEGRAM
33. Application State & API
Evgenii continues the system design for the social media news feed. The state layer and the API are designed. Stories will be managed in a global state with their associated comments and media attachments. The API will use GET requests with server-side events.
#lesson
Evgenii continues the system design for the social media news feed. The state layer and the API are designed. Stories will be managed in a global state with their associated comments and media attachments. The API will use GET requests with server-side events.
#lesson
Media is too big
VIEW IN TELEGRAM
34. Optimizing Performance
Evgenii completes the system design for the social media news feed by describing how to optimize the network, UI rendering, and JavaScript code execution performance.
#lesson
Evgenii completes the system design for the social media news feed by describing how to optimize the network, UI rendering, and JavaScript code execution performance.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
35. Wrapping Up
Evgenii wraps up the course by summarizing the topics discussed and sharing a few key takeaways. He also answers a question about best practices for updating the UI from a stream of data.
#lesson
Evgenii wraps up the course by summarizing the topics discussed and sharing a few key takeaways. He also answers a question about best practices for updating the UI from a stream of data.
#lesson
👍1🥰1
Do you want craudfanding for frontend masters courses?
Anonymous Poll
25%
Yes and I have some cash to contribute
57%
Yes but I don’t have any money to contribute
4%
No, I already have the sub on frontendmasters
15%
No
👍2
Frontendmasters Courses
Do you want craudfanding for frontend masters courses?
#admin
Hello everyone!
As you may have noticed, free courses are occasionally uploaded.
Currently, my subscription has expired, so I can't upload any new courses right now.
However, I have a solution: we could buy a new subscription—either monthly or annually.
Pros:
- We could collectively gather $40(or $195 per year) and gain access to all the released courses, and then do it again and again until we get banned, lol .
- You (contributors and users) will receive all new courses, and I have made backups in case the channel is deleted for any reason.
Cons:
- You would need to contribute some money (at least 40$) 👀, if you want to, of course.
To gather feedback, I’ve created a poll. Please choose any option. I need to know if this is something you want or not.
Want to say or suggest something? My DMs are open. Feel free to message me.
If someone already have a sub, DM me, if you lie in the poll, I WILL FOUND YOU baka
Hello everyone!
As you may have noticed, free courses are occasionally uploaded.
Currently, my subscription has expired, so I can't upload any new courses right now.
However, I have a solution: we could buy a new subscription—either monthly or annually.
Pros:
- We could collectively gather $40
- You (contributors and users) will receive all new courses, and I have made backups in case the channel is deleted for any reason.
Cons:
- You would need to contribute some money (at least 40$) 👀, if you want to, of course.
To gather feedback, I’ve created a poll. Please choose any option. I need to know if this is something you want or not.
Want to say or suggest something? My DMs are open. Feel free to message me.
🔥4👍1
Forwarded from Vue Updates
#admin #meetup
Don't show this to russian, they afraid anything that similar to meetings
Hello!
Ukrainian (NO ENG SUBS sorry) MEETUP about frontend.
https://www.youtube.com/live/36Hs7tZj63k
Hello!
Ukrainian (NO ENG SUBS sorry) MEETUP about frontend.
At this meeting, we'll organize a debate on the following topics:
Use of AI in front-end development: for or against
Hiring a front-end developer for specific frameworks: for or against
Designating a position for a dedicated layout developer in the team: for or against
Front-end developer career growth toward fullstack: for or against
We'll be joined by speakers from top international product IT companies, including:
Oleksandr Mykulych, Frontend & QA Guild Master at SKELAR
Yurii Artiukh, Founder & CTO at the agency Riverco.de
Mykola Koval, CTO at Liven by SKELAR
Tetiana Melnyk, Engineering Team Lead, Frontend Lead at Projector Institute
Yevhenii Honcharenko, Tech Team Lead at Howly by SKELAR.https://www.youtube.com/live/36Hs7tZj63k
YouTube
SKELAR Front-end MEETUP 07.11.2024
Фішка цієї дискусії — у форматі, де спікери сперечаються на різні теми, а глядачі вирішують, хто був переконливішим.
На цій зустрічі влаштуємо холівар:
- Використання AI у front-end розробці: за чи проти
- Наймати front-end розробника за конкретними фреймворками:…
На цій зустрічі влаштуємо холівар:
- Використання AI у front-end розробці: за чи проти
- Наймати front-end розробника за конкретними фреймворками:…
❤🔥2👍1🤡1