Podcast Summary
Insights from a CSS expert on adding new properties to CSS: CSS expert Adam Argyle discusses the process of proposing and implementing new CSS features, from community support to rigorous testing and review.
Adam Argyle, a developer at Google and CSS enthusiast, shared insights on how new properties get added to CSS during his appearance on the Syntax podcast. He emphasized his passion for creating smooth, beautiful interfaces and his dedication to creating and sharing information about the latest CSS developments through his Twitter account, @argyleink. The discussion touched on the process of proposing and implementing new CSS features, which involves submitting proposals to the CSS Working Group, gaining community support, and undergoing rigorous testing and review. Argyle also shared his creative inspiration for his Twitter handle, which he chose for its business-like sound and potential visual possibilities. Overall, the conversation highlighted the importance of the CSS community and the ongoing evolution of this essential technology for web development.
Proposing new CSS features involves formal process: The addition of new CSS features goes through a formal process involving GitHub, W3C, and browser implementation, which can take years.
The process of adding new features to CSS involves more than just tweeting about it or expressing a desire for it. Instead, there is a formal process in place, which includes proposing ideas on GitHub, having them discussed and refined within the CSS Working Group at the W3C, and eventually being implemented in browsers. This process can take years, as was the case with Flexbox and Grid. It's important to note that CSS itself was once a proposal, and there was even competition with other style sheet proposals like JSS. The process begins with articulating a problem and potential solution on GitHub, and it's important to remember that not all proposals will be successful. The number of comments and engagement a proposal receives in the initial days can be a good indicator of its potential success. Overall, the process of adding new features to CSS is a collaborative and iterative one, involving the entire web development community.
Discussing and improving CSS on GitHub: The CSS community on GitHub fosters collaboration, feedback, and debates, leading to new solutions and improvements in CSS through open discussions and historical resources.
The CSS community on GitHub is an open and dynamic space for proposing and discussing new ideas. The level of interest and engagement is gauged by the number of comments and the provocativeness of the proposal. While it may take time for an idea to gain traction, the public nature of the platform allows for collaboration, feedback, and even healthy debates. These discussions can lead to new solutions and improvements in CSS. The open-source nature of CSS and the availability of historical issues make it a valuable resource for researchers and developers alike. While the process can involve some "bike shedding," or focusing on minor details instead of the bigger picture, it ultimately contributes to the ongoing evolution of CSS.
Debating Logical Properties for Margin Shorthand: CSS community discusses implementing logical properties for margin shorthand using contextual syntax, debating whether to apply it selectively or document-wide.
There's ongoing debate in the CSS community about how to implement logical properties for margin shorthand, allowing users to specify logical properties for all sides instead of just physical ones. The proposed syntax includes using "margin: 1rem 1rem 1rem 1rem logical;" to indicate the desire for logical properties. This syntax is preferred because it's contextual to the specific instance of the declaration and allows for selective modification. Other proposals suggest setting the whole document to use logical properties exclusively, but this approach might be too sweeping and require more effort. The discussion also touched upon the industry's unique terminology and the evolution of CSS proposals over time.
CSS Working Group's dedication to explicitness and consideration: The CSS Working Group prioritizes explicitness and collaboration in developing new CSS features, with ongoing work on functional color notation, CSS variables in media queries, and potential addition of decimal opacity to hex colors.
The CSS Working Group values explicitness and consideration in their development of new CSS features. This is evident in their use of separators like spaces, slashes, and parentheses, as well as their ongoing work on functional color notation and CSS variables in media queries. The community plays a crucial role in identifying the need for these features, and both interested users and implementers must come together for a new feature to be successfully integrated into CSS. The current progress on color functions demonstrates this process, with an editor's draft now available at color level 5. Another exciting development is the potential addition of decimal opacity to hex colors, which would simplify the process of setting opacity for hex colors. Overall, the CSS Working Group's dedication to refining and improving CSS through a collaborative process is noteworthy and ensures that the language remains relevant and effective for developers.
Microsoft and Chromium collaborate on new color feature for web development: Microsoft and Chromium are working together to create a new color feature, Color Level 5, for web development, enabling designers to manage their brand values in one place and easily apply them throughout their apps using CSS.
The web development community is working on a new feature called color level 5, which builds upon color level 4 and brings in new color functions. Two major companies, Microsoft and Chromium, are collaborating on this engine improvement. Once completed, this feature will allow designers to articulate their brand values in one place and easily apply them throughout their apps, all managed in CSS. The editor's draft for this feature is being written publicly and collaboratively, with the goal of gaining implementer interest. Origin trials, a more advanced version of experiments, can be used to test and prototype new features with a wider audience. Vendor prefixes, once used for testing and experimentation, are no longer in use due to their potential to favor one browser over another. Tools like LogRocket can be used to gather user feedback and identify issues with new features, ensuring a better user experience.
Web development process stages from drafting to standardization: Tools like LogRocket help identify and fix issues in each stage of the web development process, making it more efficient and effective. The process includes drafting, hardening, candidate recommendation, and standardization, with each stage representing a different level of risk and readiness for implementation.
The web development process involves various stages from drafting to standardization, and tools like LogRocket can help developers identify and fix issues more efficiently. During the drafting phase, proposals are discussed and reviewed, leading to editor's drafts. Once the drafts are hardened and reviewed extensively, they become working drafts. The next stage is a candidate recommendation, and finally, the standard is established. This process is similar to the stages in JavaScript development, with each stage representing the level of risk and readiness for implementation. Tools like LogRocket can help developers identify issues early on, making the development process more efficient and effective. Additionally, the web development community comes together through conference calls and face-to-face meetings to discuss and resolve issues, ensuring a collaborative and inclusive process. These meetings, which are held around the world, aim to find synchronous resolutions and move the development process forward.
Ensuring web compatibility through testing: Web development involves testing to maintain browser compatibility and encourage the adoption of new features. Post CSS provides initial styling, while web platform tests help ensure consistency and web standards.
The web development process involves various stages and tests to ensure new features are implemented consistently across different browsers. Post CSS provides initial styling, while working drafts undergo community review and testing. Web platform tests, similar to unit tests, help ensure browser compatibility and encourage the implementation of desired features. Acid tests from the past were used to expose rendering differences between browsers, while current tests help maintain web standards. The community, browser implementers, and the working group all play crucial roles in this process. For example, writing web platform tests can encourage the adoption of new features, like Flex Gap. It's an intriguing process that ensures the web remains functional and adaptable to new technologies.
Apple's stance on user privacy and secure web features: Apple delays implementation of certain web features to address security concerns, prioritizing user privacy
Apple is taking a stance on user privacy by refusing to implement certain web features until the security concerns are addressed. This is due to the potential for fingerprinting, which allows tracking of user preferences and history. An example given was the removal of the ability to get the color of visited links in JavaScript, as it was a significant security issue. The process for implementing new features in browsers includes going through web platform tests, prototyping, and filing for intent to ship. Apple's approach is aimed at enhancing privacy on the web, even if it means delaying the implementation of certain features. This is not about unsecure features in Chromium, but rather about Apple's desire for increased security. The intent to prototype and intent to ship stages ensure that the implementation is well-received and stable before it is officially added to the browser. Overall, this discussion highlights Apple's commitment to user privacy and the lengths they will go to ensure that web features are secure before implementation.
From proposal to draft: The CSS process: The CSS process involves community input to transform proposals into drafts, emphasizing the importance of developer relations and encouraging feedback for continuous improvement.
The CSS process may seem lengthy and daunting, but it's essential to follow it for meaningful outcomes. The speaker shared their experience of proposing FlexGap and how it went from a proposal to a draft in a short time due to community input. They also highlighted the importance of developer relations and encouraging feedback to improve CSS. Additionally, they shared a success story of a proposal for a data saver mode in CSS, which was quickly adopted after community input. However, there are also instances where things move too fast without proper consideration, leading to mistakes. To learn from these mistakes, there's a CSS mistakes document available online. Overall, the process may be long, but it's worth it for the valuable improvements it brings to CSS.
CSS Working Group Improves Syntax and Functionality: The CSS Working Group is simplifying syntax and addressing past inconsistencies, including HSL notation, box-sizing, pseudo classes vs pseudo elements, and the potential removal of commas and renaming of current color.
The CSS Working Group has acknowledged and is addressing past mistakes and inconsistencies in CSS syntax and functionality. For instance, they're simplifying HSL and HSLA notation due to earlier issues with commas and decimal values. Another change is making box-sizing default to border-box, although this won't be applicable to older versions of IE. Other adjustments include clarifying the difference between pseudo classes and pseudo elements, and making important have a bang character for better readability. These changes aim to make CSS more consistent and user-friendly. Additionally, the group is discussing the potential removal of commas and the renaming of current color to current dash color. Overall, these updates reflect the CSS Working Group's ongoing efforts to improve the language and address long-standing issues.
Collaborative Effort of CSS Community: The CSS community is a collaborative effort involving spec authors, community members, and implementers, using tools like PostCSS Preset Env and Houdini to create and improve web design technologies.
The CSS community is a collaborative effort between spec authors, community members, and implementers to create and improve web design technologies. CSS, specifically, does not have official stages, but developers can simulate them using tools like editors drafts and working drafts. One exciting feature is PostCSS Preset Env, which allows developers to use the latest CSS syntax while maintaining compatibility with older browsers. Implementers write code in languages dependent on the browser, such as C++ in Chromium. The CSS working group is also working on Houdini, a new technology that aims to bring low-level, high-performance capabilities to the web platform. As a developer or designer, you might be contributing to the web in ways you don't even realize, such as implementing features or writing code for popular apps. It's an intricate process that requires teamwork and continuous improvement.
Exploring Houdini: A New Web Technology for Advanced Layouts and Animations: Houdini, a new web tech, offers efficient control over complex layouts and animations via layout worklets and the Typed Object Model, enabling advanced masonry layouts and animations off the main thread.
Houdini, a new web technology, is making significant strides forward and offers developers the ability to grab the reins and take control of complex layouts and animations in a more efficient and powerful way. With the recent refactors in Chromium's codebase, Houdini is now better equipped to handle layout worklets, enabling true empowerment for developers to create advanced masonry layouts and animations off the main thread. Additionally, the Typed Object Model (Type 2M) is a game-changer, as it provides an object-based interface instead of the traditional string-based method for interacting with CSS and JavaScript. This means developers can now work with unitless values and manipulate values just like in CSS, making the process more streamlined and efficient. Houdini's website showcases the numerous features that have already shipped, including the layout API, paint API, parser API, property value API, animation worklet, and typed object model. Overall, Houdini represents an exciting development in web technology, and it's worth exploring further to unlock its full potential.
Contributing to web platform tests: Stay updated and engaged in web development by contributing to platform tests and exploring unique tools for personal interests.
The web development world is an ever-evolving landscape with new tools and technologies constantly emerging. While there are rough edges and challenges, the excitement and innovation make it an engaging and rewarding field. A key way to contribute back to the platform is by creating web platform tests, which not only helps improve the technology but also provides valuable learning experiences. As for personal interests, the speakers shared their enthusiasm for unique tools like the Ardu Boy and the wok, emphasizing the joy and intensity that comes with using them. Overall, the conversation highlighted the excitement and importance of staying updated and engaged in the world of web development.
Using the right tools can enhance efficiency and productivity: Investing in tools like propane burners, security bits, and foam pads can lead to significant time and energy savings, making them valuable additions to any toolkit.
Having the right tools on hand can significantly improve efficiency and productivity in various aspects of life, whether it's cooking, hacking, or even stretching. For instance, a propane burner allows for faster and easier deep frying outside, while a set of security bits ensures that one can easily take apart devices without being hindered by security screws. Similarly, a thick foam pad can save the knees during stretching sessions, allowing for a more comfortable and effective workout. These are just a few examples of how having the right tools can make a big difference. Whether it's a propane burner, security bits, or a foam pad, investing in these items can lead to significant time and energy savings, making them valuable additions to any toolkit.
Refactoring CSS in React: Refactoring CSS from scratch in React can help prune code, prevent bugs, and systematize the codebase. Listen to the CSS Podcast for in-depth discussions on CSS as a form of computer science.
Refactoring is an essential part of coding. The speaker shared his experience of rewriting the CSS from scratch while keeping the JavaScript in React layouts, which helped him prune things up and systematize the code. He emphasized the importance of assuming that code will break and writing as little as possible to prevent bugs. The speaker also mentioned his podcast, the CSS Podcast, which focuses on in-depth discussions about CSS as a form of computer science. He encouraged listeners to check it out and subscribe. In essence, refactoring is a crucial aspect of coding that helps maintain clean and efficient code, and the CSS Podcast offers valuable insights into the world of CSS.
