Frontendmasters Courses

#admin #javacsript Don't miss https://certificates.dev/javascript/free-weekend

#admin #vue Don't miss #vue #freeweekend https://vueschool.io/freeweekend for 48 hours

#admin #nuxtnation https://nuxtnation.com/ Don't miss #nuxtnation 12-13 November 2024

#admin #meetup Don't show this to russian, they afraid anything that similar to meetings 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

#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

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

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

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

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

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

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

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

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

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

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

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

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

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

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