Podcast Summary
Exploring New Viewport Units with LogRocket and Sanity: Learn about new viewport units, their issues with iOS, and how LogRocket and Sanity provide solutions. LogRocket offers exception handling, heat maps, and custom funnels, while Sanity has real-time updates through server-sent events.
In the world of web development, we have new viewport units to make our lives easier. In a recent episode of Syntax, Wes, Barracuda, Boss, and Scott El Toro Loco discussed these new units and why they are necessary. The old viewport units had issues, particularly with iOS, and the new ones provide solutions. Scott Dalinski, a developer from Denver, Colorado, was excited to explore these new units along with his co-host Wes. They were also joined by two great sponsors, LogRocket and Sanity. LogRocket is an exception handling tool that goes beyond just errors and exceptions. It allows users to understand their customers' journeys and take control of user engagement by proactively addressing potential conversion issues. LogRocket offers features like heat maps and custom funnels, making it more than just an error and exception tool. Sanity, the structured content platform for your next API, was also introduced. One aspect of their API, real-time updates, was highlighted. Sanity offers server-sent events, which Wes was not familiar with. Server-sent events enable subscribing to updates on specific things and receiving real-time notifications. These sponsors and their offerings are valuable resources for developers, making the Syntax episode not only informative but also practical.
Real-time updates with Server Sent Events and viewport challenges: Server Sent Events enable real-time updates on the server side, while viewport units allow specifying sizes relative to the webpage's viewport. However, mobile viewports can change dynamically, making effective use of viewport units challenging.
Server Sent Events (SSE) is a protocol for real-time updates on the server side. It allows developers to subscribe to data and trigger actions when specific events occur, such as creating, updating, or deleting content. SSE is particularly useful for applications where real-time updates are necessary, like blogs or e-learning platforms. Viewport units, on the other hand, are a way to specify sizes relative to the viewport of a webpage. The current viewport units include vh (viewport height), vw (viewport width), vmin (minimum of vw or vh), and vmax (maximum of vw or vh). However, on mobile devices, the viewport can change dynamically due to the presence of navigation bars, making it challenging to use viewport units effectively. New developments in web design have introduced alternative solutions for handling dynamic viewports, such as keeping the URL bar at the bottom of the screen on certain browsers. Overall, Server Sent Events offer a powerful way to create real-time, interactive applications, while understanding the limitations of viewport units is essential for designing responsive web experiences.
New Viewport Units for Precise Layout Control: W3C introduces 12 new viewport units for better handling of varying screen sizes and URL bars, including small and large viewport units for precise layout control.
The W3C has introduced 12 new viewport units (with 16 in total when including the old ones), namely large viewport height, large viewport width, large viewport min, large viewport max, small viewport height, small viewport width, small viewport min, small viewport max, dynamic viewport height, dynamic viewport width, dynamic viewport min, and dynamic viewport max. These units aim to provide better handling of varying screen sizes and URL bars, especially on devices like foldable phones and multi-screen setups. The small viewport units provide the smallest version of a layout, while the large viewport units offer the largest. This update addresses the need for more precise control over layout adjustments in different screen sizes and scenarios.
Control and Flexibility with Viewport Units: Viewport units, specifically vh and dvh, provide increased control and versatility for web developers when dealing with height measurements. The static version, which represents the viewport height without scrolling, is the more commonly used option for most projects.
Viewport units, specifically vh and dvh, offer more control and flexibility for web developers, particularly when dealing with height measurements. However, the dynamic nature of these units, which adjusts based on scrolling, may not be necessary for most use cases. Instead, the static version, which represents the viewport height without considering scrolling, is likely to be the more commonly used option. This is because the viewport size, excluding fixed UI elements like the address bar, is the primary concern for most web development projects. The dynamic version may become more relevant when working with custom UI elements or animations that require precise measurement adjustments. Overall, viewport units provide a valuable solution to a long-standing issue in web development and offer increased control and versatility.
New tools for handling mobile keyboards: Web developers can now detect keyboard sizes and adjust layouts to prevent interference, but iOS requires input to be both visible and associated with a touch event to open the keyboard programmatically.
Web developers now have new tools to deal with the issue of keyboards popping up on mobile devices interfering with website elements. The discussion revolved around the use of a new API for detecting the size of virtual keyboards and an environmental variable for the keyboard inset height. This information can be used to adjust the layout of webpages, ensuring that important buttons or features are not obscured by the keyboard. However, it's important to note that opening the keyboard programmatically on iOS can be tricky due to Apple's efforts to prevent abuse. The new requirements include the input being both visible and associated with a touch event. These developments are crucial for creating a better user experience on mobile devices and highlight the importance of staying informed about the latest web development trends and tools.
Exploring Viewport Units for Web Development: Viewport Units are a new solution to positioning issues, gaining traction for their flexibility and compatibility. Chrome and iOS support them, with other browsers expected to follow. Developers can use height: 100vh for most cases, with height: 100vw as a backup for unsupported browsers.
The web development community is known for its creativity and ingenuity, as shown in discussions about manipulating off-screen elements and touch events. A new development, Viewport Units, is gaining traction as a solution to certain positioning issues, but it's not yet widely supported. VW and VH units are not obsolete, but their usage will likely be phased out in favor of Viewport Units once they become more widespread. Chrome is expected to roll out support for Viewport Units soon, and when it does, developers can use height: 100vh for most cases, with height: 100vw as a backup for unsupported browsers. iOS already supports Viewport Units, making it a step ahead in adoption. While waiting for full implementation, developers can use a sane fallback to ensure compatibility across various browsers.
