The future of style

The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C.

Latest articles

Release Notes for Safari Technology Preview 126 with Safari 15 Features

Source: Surfin' Safari 17 June 2021

Safari Technology Preview Release 126 is now available for download for macOS Big Sur and betas of macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS.

UPDATE: If you downloaded an earlier version of Safari Technology Preview 126, you may need to reboot.

Many of the new Safari 15 features are now available in Safari Technology Preview 126:

Streamlined tab bar. Use Tab Groups to save and organize your tabs. Experience the new design. Test your site. Experiment with theme-color.

Live Text. Select and interact with text in images on the web in macOS Monterey betas on M1 Macs.

Improved Safari Web Extensions. Try out the support for declarativeNetRequest, which expanded to 150K content blocking rules and non-persistent background pages for improved performance.

Quick Notes. Add links and Safari highlights to remember important information or ideas on the web in macOS Monterey betas.

WebGL 2. Try out the improved 3D graphics performance of WebGL running on top of Metal via ANGLE.

Web technologies. Experience and test the HTML, CSS, JavaScript, and other web technologies that are available in Safari 15 Beta and included in previous Safari Technology Preview releases.

If you see bugs or unexpected behavior with the interface of Safari Technology Preview, please file Feedback in Apple’s Feedback Assistant. If you come across an implementation bug in web technology, or have a request, please file a ticket at bugs.webkit.org.

Web Directions Global Scope ’21 session spotlight–A dependency deep dive

Source: Web Directions Blog John • 16 June 2021

A dependency deep dive

Jason O’Neill, Software Engineer Culture Amp

Modern JavaScript is all about dependencies. With over 1.5m packages on NPM, and 5114 packages used in “Create React App”, the package ecosystem can feel overwhelming. But underneath the complexity are basic rules that give structure to our projects.

In this talk, I’ll unpack the key concepts that hold the NPM ecosystem together. We’ll explore the different types of dependencies, semantic versioning, node’s module resolution algorithm, and how all these work together to give you package management superpowers like linking, de-duping, and setting up multi-package workspaces.

By mastering the fundamental concepts underpinning NPM we can make the most of JavaScript’s incredible package ecosystem.

About Jason O’Neill

Jason O’Neil is a software engineer at Culture Amp – a company that improves the world of work by helping organizations invest in their people and culture.

He leads the Foundations team, helping our 100+ engineers build software in an efficient and sustainable way by maintaining shared tools and libraries, like our Kaizen design system.

Jason lives in Perth, Western Australia

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–A dependency deep dive appeared first on Web Directions.

Minutes Telecon 2021-06-16

Source: CSS WG BlogDael Jackson • 16 June 2021

Full Meeting Minutes

Dark Mode for HTML Form Controls

Source: Microsoft Edge Blog Microsoft Edge Team • 16 June 2021

If you build a web application, chances are good that you’ve received user requests for dark mode support in the past couple of years. While some users may simply prefer the aesthetics of dark UI, others may find that dark mode helps ease eye strain or helps reduce screen brightness at night. To make it easier for websites to support a cohesive dark mode theme, Microsoft and Google have collaborated to bring support for dark mode form controls to Chromium. Dark mode controls are available in Microsoft Edge on desktop as of v87. More recent collaborations extend support to the Android platform: these changes will begin showing up in Chrome v91 for Android, and will be available in future versions of Microsoft Edge for Android. When the web developer expresses support for dark mode, and the user has this mode enabled, our user agent (UA) stylesheet will “auto-darken” form controls out-of-the-box:
Light mode Dark mode
Light mode form controls in Chromium Dark mode form controls in Chromium
Any styles added by the web developer or user will override the user agent style as per usual—if you’ve made your text input background hot pink, you’ll need to update that color yourself in dark mode using the prefers-color-scheme media query. Here’s how you can take advantage of dark mode support for HTML form controls.

Render all document form controls in dark mode

A meta tag declaration with the color-scheme name signals to the browser which color modes the web application supports. To tell the browser it is safe to render controls as light or dark, declare the following in the head of your document: The browser will apply its user agent stylesheet to all controls in your document: Dark mode controls in Chromium Explore meta tag example on Codepen for more controls The Chromium UA stylesheet also includes color scheming for the document background, text, and link colors. In this example, the web developer did not specify these colors in their own stylesheet, so the document is now automatically rendered as light text on a dark background. If you don’t have control over the head of your document, or prefer keeping all color support bits in CSS, you can instead use the CSS color-scheme property:
:root {
    color-scheme: light dark;
}
Opting into both light and dark schemes on the :root means that all the controls in your document will pick up the active color scheme—essentially equivalent to the meta tag declaration. Explore CSS color-scheme example on Codepen

Render specific form controls in dark mode

Some web developers might need to apply dark color schemes only to some areas of their application. In such a case, you can continue to use the color-scheme CSS property, instead with a more specific selector:
.schemed-area {
    color-scheme: light dark;
}
We’re targeting the .schemed-area div with our selector, so color-scheme specific UA styles will only cascade to this element and its descendants. Here’s what that looks like with dark mode enabled: Default style area contrasting with a schemed area. In this case, the default style controls are in light mode, and the schemed area controls are in dark mode. Explore selective color-scheme example on Codepen With dark mode enabled on the system, no changes were applied to the contents in the “Default style area” box. Within the “Schemed area” box, the form controls were updated to dark mode aesthetics. You may notice that—unlike opting into color schemes at the root—non-control contents in the “Schemed area” were unchanged by the user agent’s dark theme. Instead, web developers should manage text and background colors for the schemed area using the prefers-color-scheme media query.

Share your feedback

We’re excited to make it a bit easier for web developers to support dark mode in Chromium, and are eager to hear what you think! If you run into any issues or have any feedback, use the in-app feedback button (or Alt+Shift+I). You can also reach out to us on Twitter. Thanks for your feedback!

—Melanie Richards, Senior Program Manager —Sam Sebree, Software Engineer —Ionel Popescu, Software Engineer —Bo Cupp, Principal Software Engineer —Brian Heston, Senior Designer

Updated Working Draft: CSS Color Adjustment Level 1.

Source: W3C's Cascading Style Sheets home page16 June 2021

16 Jun 2021 Updated Working Draft: CSS Color Adjustment Level 1.

Web Directions Global Scope ’21 session spotlight–Rethinking the JavaScript ternary operator

Source: Web Directions Blog John • 15 June 2021

Rethinking the JavaScript ternary operator

James Sinclair, Senior Developer Atlassian

Lots of people treat the ternary operator with suspicion. At first glance, ternaries appear unnecessary. Nothing more than a tool for the overly-clever to trim some characters from their code; a favourite hack for coders who don’t care about readability. And sure, it’s all too easy to turn ternaries into an indecipherable mess. But what if we’re missing something? What if there’s more to ternaries than meets the eye?

We’ll take a deep look at what makes a ternary different from an if-statement. And we’ll explore ways to write safer conditionals. Finally, we’ll examine the do-expression TC39 proposal and explore how it might help the situation.

About James Sinclair

James (@jrsinclair) is a Senior Developer with Atlassian. He works with JavaScript (in various flavours) on both the front and back-end. He’s passionate about functional programming, and good software-engineering practice in general. Over the years he’s worked on web projects for Ford Motor Company, Bendigo Bank, The Australian Broadcasting Corporation, Monash University, and the Prime Minister of Australia. Somewhere along the way he picked up a PhD in Information Architecture but decided building stuff on the web was more fun than being an academic.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Rethinking the JavaScript ternary operator appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–The Realms of JavaScript

Source: Web Directions Blog John • 15 June 2021

The Realms (API) of JavaScript

Leo Balter, Lead Standards Engineer Salesforce

A navigation over the existing realms of JavaScript and the new API proposed at TC39 to enable sandboxed code execution and document virtualization.

About Leo Balter

Leo works with the UI Platform team at Salesforce drafting and testing standards related to the JS ecosystem. Leo is currently championing the Realms API proposal at TC39 and he’s looking forward to roll a powerful code sandboxing API on the Web Platform.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–The Realms of JavaScript appeared first on Web Directions.

Improving contrast in Microsoft Edge DevTools: A bugfix case study

Source: Microsoft Edge Blog Microsoft Edge Team • 15 June 2021

Creating accessible products means most of all being aware of the usability issues your designs and code can cause. When creating new products, Microsoft follows a strict workflow of accessibility reviews of designs, code reviews and mandatory audits before a new feature can leave experimental stage. Microsoft Edge is no exception. Even if users spend most of their time interacting with the web content itself (which the browser can’t really do anything about) they also interact with menus, options, settings pages and more that are part of Microsoft Edge. These parts of the browser need to be accessible to you whether you use a mouse or a keyboard, or whether you rely on a screen reader to interact with your computer. The Developer Tools are part of the browser, and as such, need to comply with the same accessibility guidelines. This includes new features but also legacy features that have been around for years in the Chromium codebase. In order to make time to fix issues, we have so-called bug sprints, where we focus two weeks on fixing broken issues rather than adding new functionality. We just finished a bug sprint focused on accessibility issues and today we want to share how we fixed a problem that has been around for a long time. DevTools has a fairly complicated user interface, and it uses a lot of different colors, to make differences in content more obvious. One example of which is the command menu: DevTools Command Menu This menu lists commands that match what the user types in the input field. Every command has an associated category which is represented by a colored badge displayed next to it. This badge also contains the category name so we’re not relying solely on the color, which would be an accessibility barrier for people with low vision or color vision deficiencies. Enlarged screenshot of Command Menu results highlighting the colored category badge That said, we’re not quite out of the woods yet. The bug and its fix we would like to describe here is related to the fact that some of the badges didn’t have sufficient contrast between their background and text colors. The The screenshot below shows that the “Resources” badge has a very low color contrast ratio (1.511:1). The WCAG2.1 guidelines say that, at a minimum, the contrast ratio needs to be 4.5:1 for users with low vision to be able to read the text. According to the W3C Accessibility Requirements for People with Low Vision, there is an estimated 246 million people worldwide who have low vision. Among them might be a lot of potential DevTools users who would have missed out on those badges if we hadn’t fixed that bug. In addition to that, making these more readable is what everyone can benefit from.

Setting up

The Resources badge wasn’t the only badge with low contrast, and in total there are 17 different badges. We needed to find all the contrast issues and – if needed – fix them using DevTools. One thing not a lot of people know is that you can use DevTools to inspect DevTools! This means you can open DevTools, undock them and open a second instance of DevTools that targets the first one. From that second instance, we can inspect the badges and make color changes like you would change any other color on a web page. Lately, we’ve improved our development environment to make this quite fast, but it was still going slow and repetitive work. We had many colors to change, and every time we would make a change to the source code, we’d have to rebuild and reload DevTools, re-open the command menu, and test the contrast. We needed a way to look at all badges all at once in order to make the necessary adjustments instead of testing them one by one. To do this, we created an HTML document that contained all the possible badges, in both themes: Mockup of all category badges in light and dark themes

Testing contrast

We used 3 different techniques to test color contrast in our HTML page.

In DevTools

DevTools has a built-in contrast feature. If you start the inspect element mode, you can hover over elements in the page, and DevTools will show a little popup that follows your cursor and indicates the color contrast of the hovered element you even get a green checkmark next to those with enough contrast and an exclamation icon next to problematic ones. DevTools element inspector showing a contrast warning on a badge This worked great, but it also meant we needed to hover over each and every badge, one at a time, in order to check for contrast. So we tried a second technique.

Using the Accessibility Insights extension

Since we had 17 different badges to check, in 2 color themes, we needed something a little faster. The Accessibility Insights tool comes as a browser extension (for both Google Chrome and Microsoft Edge) that, among other things, can check for color contrast issues. We use this extension in our audits of new products as it provides automated and guided accessibility test flows. Using the extension, we were able to run a scan of the entire page, and it reported 15 contrast issues all at once. Results from Accessibility Insights showing 15 color-contrast issues on the sample page While this browser extension was very useful, we lacked one more thing to make the fix easy to do. We needed to be able to make adjustments to the colors and see the resulting contrast in real time.

Our custom color contrast checker

We borrowed some of the contrast calculation code from DevTools (the DevTools front-end code is in JavaScript and TypeScript, which made it straightforward) and added it to the local web page. Wrapping the calculation code in an interval to display warnings in the page directly meant that we were now able to change colors in DevTools and see what the new contrast ratios were without having to reload the page. Animation showing adjusting color values in DevTools on the demo page You can try the demo page in action or look at the source code. One interesting technique we used to show the contrast in the page was by using data attribute on the badges. We calculated the ratio for each badge and then set it on each badge like this: badge.dataset.contrast = ratio; Using a CSS pseudo-element and the attr() function we could then display the contrast value directly from CSS without needing any other DOM elements:
.badge.low-contrast::before {
    content: attr(data-contrast);
    position: absolute;
    background: red;
    color: white;
    /* ... */
}

The fix

Now that we had a very comfortable environment to work in, we could make the required color changes. Practically, this meant opening up the color picker in DevTools for a given badge, and raising or lowering the luminosity of the background color just enough so that the contrast ratio became at least 4.5:1. We ended up with the following colors: Mockup of the DevTools command bar badges with new colors applied We weren’t entirely happy with the results though. With DevTools in Light theme, the label inside the badges was displayed in white text and, for the contrast to be sufficient, we had to make the background colors quite a lot darker than they were. While we started with saturated colors that really popped we had to change them quite drastically and the result is that they now looked a bit muted. A few of the colors looked kind of brown, less pleasing to the eye, and some became harder to differentiate from others. In Dark theme however, because the text was black, the background colors needed to be a lot lighter and this gave us a lot more freedom. The colors looked better, and still quite different from each other. We therefore decided to always use black text for the badges, no matter which DevTools theme was selected. This way we could use the nice colors, preserve a nice user interface while being accessible to all. The other advantage that came with this decision is that we didn’t need to have 2 sets of CSS variables now. Previously, we had 17 colors for Dark theme, and had to override some of them for Light theme. Others worked well for both black and white text. In trying to fix our contrast issues, we realized that it wasn’t always possible to have just one background color that works fine with our 2 text colors. Edge DevTools inspecting the With just one single text color, we didn’t have that problem, and we only had to maintain 1 set of CSS variables.

The result

After applying the color changes to the DevTools source code, we went from this: Previous command bar styles with lower-contrast badges To this: Newer command bar style with higher contrast badges Now all the badges have sufficient color contrast ratios and we can be sure that the category names are accessible to all users.

More good news about contrast in web pages

Currently there is a lot happening in the accessibility tooling space when it comes to contrast. If you want to take a look at what’s coming next, check out the new color contrast algorithm experiment. This is an improved way to determine contrast that takes into account the weight of the text. Furthermore, as part of the Chromium project, an Issues pane experiment now automatically reports color contrast issues for the whole document. Using this feature means you don’t need to code  some extra page to test a lot of contrast issues at once any longer: Color contrast warnings in the DevTools issues pane

Closing thoughts

Fixing this bug shows that when it comes to accessibility, a lot of the problems you need to fix are part of the interaction. A purely automated process can report a contrast issue on one element but we needed to take a look at all the available badges to fix the overall experience and not only one reported bug. We also learned that just because something wasn’t reported as an issue, doesn't mean everything works. Being diligent about accessibility means constantly checking all the features of your tool and not only new ones, especially when you deal with legacy products or those with several owners and contributors. The interesting thing here is that we didn’t any third party tool to inspect and fix the developer tools as the in-built contrast checker got us almost all the way where we needed to be. The Inspector tool is incredibly powerful as it doesn’t only show you all kind of information about the element like tag name, dimensions and padding but also gives you accessibility insights. In addition to the contrast information you also get the name and role of each element and a check if it is keyboard accessible or not. This is a great first check to ensure that the thing you see on screen is also available to users who can’t see it or aren’t able to use a touch screen or mouse. Accessibility testing isn’t about compliance—it means finding flaws in your product and fixing them for a certain need, and thus making everyone benefit. At Microsoft we’re lucky to have a dedicated team of testers and well established processes to ensure our products are accessible. But even lacking that, you can do a lot as a developer to ensure you don’t create barriers by checking your work using DevTools. If you like to learn more about the accessibility features in developer tools, head on over to our documentation, where we've recently launched a new accessibility testing guide to walk you through DevTools features you can use to test for accessibility issues. Watch this space, as there is a lot more to come! You can also always contact us on Twitter at @edgedevtools to ask questions or share feedback. Happy testing! – Patrick Brosset, Senior Software Engineer, Microsoft Edge DevToolsOverview of accessibility testing using DevTools

Web Directions Global Scope ’21 session spotlight–Rethinking JavaScript with Generator Functions

Source: Web Directions Blog John • 14 June 2021

Rethinking JavaScript with Generator Functions

Patrick Smith, product developer

Functional programming allows JavaScript that is easier to reason about and easier to test. Generator functions are like enhanced pure functions, allowing new software patterns for state machines, parsers, streaming HTML renderers, and more. They are composable so offer similar benefits to components yet in more domains than just the view.

About Patrick Smith

Patrick Smith is a product developer who writes about: Accessibility Collected Concepts CSS Deploying Design Golang JavaScript Marketing Planning Product React Teams Testing UX Workflow Writing

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Rethinking JavaScript with Generator Functions appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–Specifying JavaScript

Source: Web Directions Blog John • 13 June 2021

Specifying JavaScript

Yulia Startsev, Staff Software Engineer Mozilla

Language specification can be a bit of a mystery. This talk will introduce the stages of the TC39 process for introducing a new language feature to JavaScript, and some high level concerns around our design process.

About Yulia Startsev

Yulia Startsev is a programmer at Mozilla on the SpiderMonkey Team. She represents Mozilla at TC39, the standardizing body for JavaScript.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Specifying JavaScript appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–The Third Age of JavaScript

Source: Web Directions Blog John • 10 June 2021

The Third Age of JavaScript

Shawn Swyx Wang, Head of Developer Experience Temporal.io

The way we write JavaScript is poised for dramatic change in the 2020’s. Here’s why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to both a better developer and user experience. Change is afoot!

About Shawn Swyx Wang

swyx has worked on React and serverless JavaScript at Two Sigma, Netlify and AWS, and now serves as Head of Developer Experience at Temporal.io. He has started and run communities for hundreds of thousands of developers, like Svelte Society, /r/reactjs, and the React TypeScript Cheatsheet. His nontechnical writing was recently published in the Coding Career Handbook for Junior to Senior developers.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–The Third Age of JavaScript appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–Principles of Just-In-Time compilers.

Source: Web Directions Blog John • 09 June 2021

Principles of Just-In-Time compilers.

Nicolas B. Pierron, Senior Software Engineer Mozilla

JavaScript gets faster as it executes! Just-In-Time (JIT) compilers are used in all major JavaScript engines to improve the speed, but how do they work? By understanding the principles of JIT compilation, web developers have the opportunity to optimize their code.

We’ll learn all about it as Global Scope, our brand new 100% JavaScript focussed conference.

About Nicolas B. Pierron

Nicolas B. Pierron is a compiler engineer at Mozilla since 2011. He joined Mozilla to work on the optimizing JIT compiler of SpiderMonkey. Since, he has worked on a large spectrum of tasks such as Range Analysis, Branch Pruning, Recover Instructions, Code Coverage, Macro Assembler, ARM64, Specter issues and Bytecode caching.
Apart from Mozilla, you might know Nicolas from the NixOS operating system, where he implemented the Module system and Overlays.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Principles of Just-In-Time compilers. appeared first on Web Directions.

CSS Cascading and Inheritance Level 5 Draft Updated

Source: CSS WG Blog Miriam Suzanne • 09 June 2021

The CSS Working Group has published an updated Working Draft of CSS Cascading and Inheritance Level 5.

This CSS module describes how to collate style rules and assign values by way of cascading and inheritance.

Level 5 adds “layers” to the cascade, along with a syntax for defining and sorting those layers. In the same way that cascade origins provide a balance of power between user and author styles, cascade layers provide a structured way to organize and balance concerns within a single origin – such as element defaults, third-party libraries, themes, components, and overrides.

The changes have been made since the previous Working Draft:

Please send feedback by either filing an issue in GitHub (preferable) or sending mail to the (archived) public mailing list www-style@w3.org with the spec code ([css-cascade-5]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.)

Minutes Telecon 2021-06-09

Source: CSS WG BlogDael Jackson • 09 June 2021

Full Meeting Minutes

WebKit Features in Safari at WWDC21

Source: Surfin' Safari 09 June 2021

There’s a lot of news coming out of WWDC21 about WebKit and the web technology that’s shipping in Safari 15 on Apple’s platforms. Many of the new features were announced on Monday, at this year’s WWDC21 Keynote, and listed in the Safari 15 Beta Release Notes. But that’s not all, and we’re excited to share it with you.

Ten sessions at WWDC21 will go into greater detail and announce even more. New videos are released each day this week. You can watch them on the WWDC21 website, or in the Apple Developer app for macOS, iOS, iPadOS, and tvOS.

You can be part of the conversations around WWDC on the Apple Developer Forums, share your thoughts with @WebKit team on Twitter, or use other ways of staying in touch with folks involved in the WebKit project.

Tuesday, June 8

iPad and iPhone showing a Safari Web Extension on iOS

Meet Safari Web Extensions on iOS

Safari Web Extensions use HTML, CSS, and JavaScript to offer people powerful browser customizations — and you can now create them for every device that supports Safari. Learn how to build a Safari Web Extension that works for all devices, and discover how you can convert an existing extension to Safari through Xcode and the Safari Web Extension Converter.

Watch Meet Safari Web Extensions on iOS starting on Tuesday.


Wednesday, June 9

iPad showing a Safari Web Extension on iOS

Explore Safari Web Extension Improvements

Learn how you can extend Safari’s functionality with Safari Web Extensions. We’ll introduce you to the latest WebExtension APIs, explore non-persistent background page support — a particularly relevant topic if you’re developing for iOS — and discover how you can use the Declarative Net Request WebExtensions API to block content on the web. Lastly, we’ll show you how to customize tabs in Safari 15.

Watch Explore Safari Web Extension Improvements starting on Wednesday.

JS logo and a browser-like web view

Explore WKWebView Additions

Explore the latest updates to WKWebView. We’ll show you how to use APIs to manipulate web content without JavaScript, explore delegates that can help with WebRTC and Downloads, and share how you can easily create a richer web experience within your app.

Watch Explore WKWebView Additions starting on Wednesday.

Passkeys in iCloud Keychain technology preview powered by WebAuthn, backed by iCloud Keychain

Move beyond passwords

Despite their prevalence, passwords inherently come with challenges that make them poorly suited to securing someone’s online accounts. Learn more about the challenges passwords pose to modern security and how to move beyond them. Explore the next frontier in account security with secure-by-design, public-key-based credentials that use the Web Authentication standard. Discover in this technology preview how Apple is approaching this standard in iOS 15 and macOS Monterey.

Watch Move beyond passwords starting on Wednesday.

Icon depicting a key inside a cloud for iCloud Keychain verification codes

Secure login with iCloud Keychain verification codes

Learn how you can support on-device verification codes in your app or website for a more secure sign-in experience. We’ll explore the latest updates to the iCloud Keychain password manager and discover how verification codes, AutoFill, iCloud Keychain sync, and two-tap setup simplify the multi-step sign-in process. We’ll show you how to support this process in your apps and websites.

Watch Secure login with iCloud Keychain verification codes starting on Wednesday.


Thursday, June 10

iPhone showing a Stopwatch Records demo using the JavaScript Internationalization API

Develop Advanced Web Content

Develop in JavaScript, WebGL, or WebAssembly? Learn how the latest updates to Safari and WebKit — including language changes to class syntax — can help simplify your development process, enhance performance, and improve security. We’ll explore several web APIs that can help provide better interoperability and bring new capabilities to your web content.

Watch Develop Advanced Web Content starting on Thursday.

A website in Safari with a grid overlay from Web Inspector

Discover Web Inspector Improvements

Web Inspector provides the tools for you to understand and debug your web pages on macOS, iOS, and iPadOS. We’ll take you through the latest features and improvements to Web Inspector, including a new overlay for inspecting CSS Grid containers on your pages, even more configurable breakpoints to make debugging simpler, and the ability to create and edit Audits.

Watch Discover Web Inspector Improvements starting on Thursday.

A diagram showing the link tap/click attribution

Meet Privacy-Preserving Ad Attribution

Discover how you can measure your ad campaigns in apps and on the web without compromising privacy. We’ll introduce you to Private Click Measurement and explore SKAdNetwork, which provides you with a more secure, private, and useful way to measure your app installs.

Watch Meet Privacy-Preserving Ad Attribution starting on Thursday.


Friday, June 11

A website demo in thew new Safari 15 on an iPad

Design for Safari 15

Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We’ll also take you through features like Live Text and accessibility best practices, explore the latest updates to CSS and Form Controls, and learn how to use the aspect-ratio property in CSS to create incredible websites.

Watch Design for Safari 15 starting on Friday.

Synced video playback in Safari on macOS and iOS

Coordinate media playback in Safari with Group Activities

Create SharePlay experiences that people can enjoy on the web and in your companion app. Learn how you can use the GroupActivities framework in combination with a companion website to bring SharePlay to Safari, letting people connect with each other for enjoyable group interactions — even if they haven’t yet downloaded your app from the App Store.

Watch Coordinate media playback in Safari with Group Activities starting on Friday.

A huge thanks to Catchpoint, our partners for Lazy Load 2021

Source: Web Directions Blog John • 09 June 2021

Catchpoint Helps pinpoint performance and availability problems users experience no matter where they are in the world. And they’ve recently become the home of the venerable and much loved Web Page Test.

So we’re excited (and grateful) for their support of Lazy Load.

Catch Tim Kadlec on Twitch

Tim Kadlec, a long time favourite on Web Directions programs is streaming live performance audits, API builds, and optimization conversations every other Thursday on the Catchpoint Twitch Channel.

Catch up with past streams or catch him live there, and up your performance game.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post A huge thanks to Catchpoint, our partners for Lazy Load 2021 appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–Class features implementation in JSC

Source: Web Directions Blog John • 08 June 2021

Class features implementation in JSC

Caio Lima, Compiler developer Igalia

At Global Scope, our brand new 100% JavaScript focussed conference, we’ll dive into details of the implementation of class features in JavaScriptCore, discussing some kinds of optimizations applied there.

About Caio Lima

Active contributor of JavaScriptCore and JS Virtual Machine hacker. Loves talk and discuss about JavaScript, Web technology implementation, and programming languages.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Class features implementation in JSC appeared first on Web Directions.

Thanks to platform.sh our hosting partner for Lazyload 2021

Source: Web Directions Blog John • 08 June 2021

The last year has seen a massive transformation for many companies, not least of all for us here at Web Directions. In a mater of days, the core of what we did for over 15 years, organising in person conferences, became impossible, and will remain infeasible for some time to come.

In response we, like others moved our events online. And while last year was incredibly challenging (though less so than for others), it was also incredibly rewarding.

After looking at the options for how to host our online events we decided to build our own online conference platform, that would allow us to explore and experiment with the format.

And a critical part of that was getting our development and hosting environments right. We were a tiny team, with a lot of challenges. We wanted to build and deliver a great conference for our audience and minimise the effort and time we put into operations.

Platform.sh had partnered with us some years before when they first focussed on the Australian market, so we reconnected with them. They really did help us deliver a completely new conference experience in a short time frame, in no small part by taking care of many of those painful time consuming things that we simply did not have time to–things like automatically provisioned certificates, built in caching, and a really simple git based deployment pipeline.

We really recommend platform.sh if you’re looking for a host that takes care of the operations side and lets you get on with developing.

Thanks to platform.sh for being our hosting partner for our brand new CSS focussed conference, Hover, and all our 2021 conferences.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Thanks to platform.sh our hosting partner for Lazyload 2021 appeared first on Web Directions.

Core Web Vitals is coming

Source: Web Directions BlogJohn • 08 June 2021

Later this month, as you’ve likely read or heard somewhere, Google will start including page experience signals as part of their search ranking. This includes Core Web Vitals, a number of measures of web site performance– and so for the first time, the performance of your web content won’t simply affect your users, it will determine how visible your content is to people who use Google for search.

(Just before we continue let me just mention our Lazy Load conference coming up online June 11 and 18, which covers all this in detail with Annie Sullivan who is leading the team developing this technology at Google).

What does this look like in practice? Here’s how Google’s Search Central blog describes Core Web Vitals

The page provides a good user experience, focusing on the aspects of loading, interactivity, and visual stability:

Largest Contentful Paint (LCP): Measures loading performance. To provide a good user experience, sites should strive to have LCP occur within the first 2.5 seconds of the page starting to load.

First Input Delay (FID): Measures interactivity. To provide a good user experience, sites should strive to have an FID of less than 100 milliseconds.

Cumulative Layout Shift (CLS): Measures visual stability. To provide a good user experience, sites should strive to have a CLS score of less than 0.1.

Understanding page experience in Google Search results

So this week, I thought I’d round up some further reading, and tools to help you address the challenge of Core Web Vitals

Definitions and descriptions

“What gets measured gets managed” is a well known business proverb, attributed to Peter Drucker a pioneer in understanding the process of business management (though as with many such well known sayings, attribution to him is spurious).

Regardless, it is widely held to be true–so when it comes to improving Web performance with a goal to improve page rank, understanding what we are measuring is the first step in managing it.

First it’s important to note that these measures in Core Web Vitals are designed to be user-centric, and capture the user’s perception of performance. We could measure things like when DOMContentLoaded events are fired in a page, but these don’t necessarily reflect the user’s actual experience.

Based on discussions in the W3C Web Performance Working Group and research done at Google, we’ve found that a more accurate way to measure when the main content of a page is loaded is to look at when the largest element was rendered

Philip Walton, Largest Contentful Paint (LCP)

Enter–Largest Contentful Paint (LCP)

OK, but what is it we are measuring with LCP?

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

Philip Walton, Largest Contentful Paint (LCP)

Philip goes into considerable detail in this very approachable article, with suggestions for how to improve LCP scores, and a look at using the Browser’s Performance Timeline API to measure LCP in the browser, and to capture performance analytics.

First Input Delay (FID)

FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Philip Walton, First Input Delay (FID)

There’s definitely some complexity to the metric, and what and how it is measuring that, but again Philip’s article is the go to for this, as well as suggestions for improving and measuring FID.

Cumulative Layout Shift (CLS)

How often, when reading something on the Web does all of a sudden the page “shift” downwards–perhaps triggered by an image loading , or content being injected into the page (often by ad servers and other 3rd party services).

Well Google has had enough of that, and will now take into consideration this “cumulative layout shift” in page experience (and so page rank) with this Core Web Vital (btw this includes intrusive pop overs begging us to sign up, sign in, or sign over our first born, or whatever these do, since like everyone else, I never actually read, let alone accept them!)

But just what is it?

Again Philip Walton (here with colleague Milica Mihajlija)

CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

layout shift occurs any time a visible element changes its position from one rendered frame to the next. (See below for details on how individual layout shift scores are calculated.)

A burst of layout shifts, known as a session window, is when one or more individual layout shifts occur in rapid succession with less than 1-second in between each shift and a maximum of 5 seconds for the total window duration.

The largest burst is the session window with the maximum cumulative score of all layout shifts within that window.

Philip Walton and Milica Mihajlija Cumulative Layout Shift (CLS)

Once again it’s not a trivial measure of performance, so there’s a bit to get your head around, but Philip and Mihajlija go into detail, about how it’s calculated, and what you can do to improve your score. And best of all you get to say to the folks in marketing

no you can’t have a giant ****ing popover to annoy all our users it hurts our SEO

because that being terrible UX isn’t enough of an argument.

OK, we’ve got a decent sense of what is being measured-how can we manage Core Web Vitals? Here’s some useful articles I’ve come across (but to be honest for such a high impact topic, there’s a lot less out there than you’d expect.)

More reading

Our good friends at Smashing Magazine recently published a case study from Beau Hartshorne and his team at Instant Domain Search, who also took all the things they learned, and put together Instant Vitals, “Open source tools to track Web Vitals metrics in the field”.

Smashing Magazine also published An In-Depth Guide To Measuring Core Web Vitals, by Barry Pollard, a core maintainer of the Web Almanac. It reiterates some of what we cover above, but then really goes into detail about the tools you can use to measure these. It’s comprehensive and highly recommended.

Google Developers have a pathway (sort of like a course) with 8 lessons (and a quiz), focussed on Web Vitals.

Katie Hempenius (speaking at Lazy Load) and Una Kravets have a detailed article focussed on CSS-related techniques for optimizing Web Vitals

These are admittedly a bit Google heavy, since a lot of this is driven by Google of course, so if you come across some other valuable articles please let me know and I’ll update the post!

Good luck with your Core Web Vitals, and maybe see you at Lazy Load, where we’ll give you a lot of detail about how to improve not only these, but all your performance metrics.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Core Web Vitals is coming appeared first on Web Directions.

Updated Working Draft: CSS Cascading and Inheritance Level 5…

Source: W3C's Cascading Style Sheets home page08 June 2021

8 Jun 2021 Updated Working Draft: CSS Cascading and Inheritance Level 5.

Web Directions Global Scope ’21 session spotlight–Record & Tuple: immutable data structures in JS

Source: Web Directions Blog John • 07 June 2021

Record & Tuple: immutable data structures in JS

Robin Ricard, JavaScript Infrastructure Engineer & TC39 Delegate Bloomberg

At Global Scope, our brand new 100% JavaScript focused conference, we’ll hear about two new data structures, Record & Tuple.

Record & Tuple is a proposed feature for JavaScript that aims to introduce new immutable value types. Records are immutable key/value structures and Tuples are immutable sequences of data. In this talk, Robin Ricard, a champion of the proposal will introduce the feature, show how it can be used, and explain how it came to be designed that way.

About Robin Ricard

Robin joined Bloomberg in 2017 and has worked on the Bloomberg Terminal’s software infrastructure since then. He first worked on internal tools for Bloomberg’s developers, then worked on the UI infrastructure behind the Terminal, and most recently is working on JavaScript performance and build infrastructure. Along the way, Robin started working on Record & Tuple, a new proposed feature for JavaScript, and joined the Bloomberg TC39 delegates to champion the feature.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Record & Tuple: immutable data structures in JS appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–JavaScript apps go Int(ernationa)l

Source: Web Directions Blog John • 06 June 2021

JavaScript apps go Int(ernationa)l

Phil Nash, Developer Evangelist Twilio

In one of over a dozen presentations at Global Scope, our brand new 100% JavaScript focussed conference, we get international.

In a connected, global world there are a surprising number of problems with formatting text for our users. Did you know how many different ways there are to format a number? Or pluralise a noun? Or display a date? And let’s not get into doing time zone maths for those dates. Internationalising an app by hand, and doing it correctly, could be a never-ending, full-time job.

The Intl namespace is home to the ECMAScript Internationalization API and contains the solutions to many of our formatting problems. In this talk we’ll explore the available APIs that can make it easier to build a truly international application.

With Intl we can build apps that cater to all our users, wherever they are, however they write things down.

About Phil Nash

Phil is a developer evangelist for Twilio and a Google Developer Expert living in Melbourne, Australia. He loves working with Ruby or JavaScript to build web applications and tools to help developers. He once helped build a website that captured everyone’s favourite sandwich fillings. He has too many GitHub repositories and you can find him working on some of them live on Twitch.

Away from the keyboard, Phil listens to ska punk, hangs out with his miniature dachshund (also called Ruby), and is on a mission to discover the world’s best beers.

Phil tweets at @philnash, and you can find him elsewhere online here.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–JavaScript apps go Int(ernationa)l appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–Optional Chaining and Null Coalescing, a Golden Duo

Source: Web Directions Blog John • 03 June 2021

Optional Chaining and Null Coalescing, a Golden Duo

Bramus Van Damme, Freelance Frontend Expert

In one of over a dozen presentations at Global Scope, our brand new 100% JavaScript focussed conference, we go deep into two new features of JavaScript.

Part of ES2020 are the Optional Chaining and Nullish Coalescing Operators. By combining these two we can make our code more robust, and also shorten it along the way. This talk takes a look at when and how we can use these two exciting ECMAScript features.

About Bramus Van Damme

Bramus Van Damme is a web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since.

With his company 3RDS he works as a freelance developer, tackling both the frontend (HTML, CSS, JS) and the backend (PHP, MySQL). His current focus is on JavaScript, React and React Native yet his love for CSS will never fade.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Optional Chaining and Null Coalescing, a Golden Duo appeared first on Web Directions.

Minutes Telecon 2021-06-02

Source: CSS WG BlogDael Jackson • 03 June 2021

Full Meeting Minutes

Web Directions Global Scope ’21 session spotlight–Fully Scripted

Source: Web Directions Blog John • 01 June 2021

Fully Scripted

Tim Kadlec, Performance Engineering Fellow Catchpoint

In one of over a dozen presentations at Global Scope, our brand new 100% JavaScript focussed conference, we hear from Tim Kadlec, on the current state of real world JavaScript.

JavaScript has come a long way from its humble origins as the last of the three web cornerstones (alongside CSS and HTML). We use more JavaScript than ever, spending 14 times as many bytes on it as we do for HTML and 6 times as many bytes as we do for CSS.

Nothing is free, though, and that’s particularly true of JavaScript. In this session, we’ll look at the current state of JavaScript—how much we use, how we use it, and what the impact is.

About Tim Kadlec

Tim Kadlec is a Performance Engineering Fellow at Catchpoint, web performance consultant, and trainer focused on building a web everyone can use. He is the author of High Performance Images (O’Reilly, 2016) and Implementing Responsive Design: Building sites for an anywhere, everywhere web (New Riders, 2012). He writes about all things web at timkadlec.com.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Fully Scripted appeared first on Web Directions.

Web Directions Global Scope ’21 session spotlight–Temporal: Modern dates and times in JavaScript

Source: Web Directions Blog John • 01 June 2021

Temporal: Modern dates and times in JavaScript

Philip Chimento, Developer Igalia

In one of over a dozen presentations at Global Scope, our brand new 100% JavaScript focussed conference, Philip Chimento gives us an introduction for developers to Temporal. Temporal, which is a Stage 3 TC39 proposal soon to be implemented in JS engines, is for modern date, time, time zone, and calendar handling in JS.

About Philip Chimento

Free software enthusiast, GNOME JavaScript maintainer, GNOME foundation board member, hiker, technology skeptic, lapsed laser physicist, Philip is helping standardize Temporal at TC39.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Web Directions Global Scope ’21 session spotlight–Temporal: Modern dates and times in JavaScript appeared first on Web Directions.

New WebKit Features in Safari 14.1

Source: Surfin' Safari 01 June 2021

Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look.

Flexbox Gap Support

Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without resorting to annoying margin hacks.

The gap property, of course, has worked inside Grid containers since Safari 12. Because gap is supported for Grid, testing support for the property in a Flexbox formatting context wasn’t possible by using feature queries (@supports). By adding support for gap in Flexbox, Safari brings the web closer to widespread compatibility.


For more information, see the “flex containers” definition in the “Row and Column Gutters” section of the CSS Box Alignment specification.

Date & Time Inputs on macOS

In HTML, the date, time, datetime-local attributes for the input element prompt the browser to create date and/or time controls — an interface that’s designed to let the user easily enter a time or a date, usually with a calendar. Safari has supported these input fields on iOS since 2012. Now with Safari 14.1, these fields are supported on macOS as well.

Date picker interface for date input field with time and date-time inputs

CSS Individual Transform Properties

With WebKit support of Individual Transform Properties, web developers can write CSS rules and keyframe animations in a more straightforward way.

For years, the transform property has provided the ability to scale, rotate, and translate. You could access this power through code like this:

transform: translate(100px, 100px) rotate(180deg) scale(2);

Now, if you wish, you can instead write:

translate: 100px 100px;
rotate: 180deg;
scale: 2;

This is a syntactical and conceptual difference — the result is the same. You might find it easier to understand and remember.

This syntax also avoids unintentional overrides of other transform-related properties and eliminates pre-computing intermediate values when using keyframe animations.

You can learn more by reading “CSS Individual Transform Properties” on the WebKit blog.

Paint Timing API

A valuable metric to improving the performance of web content is the time it takes for the user-agent to show something to the user. WebKit added the Paint Timing API to its suite of performance APIs to provide this measurement. Developers can measure:

To learn more about the API, see the Paint Timing specification.

Web Speech API

The Web Speech API in WebKit has supported speech synthesis for some time. Now, Safari supports speech recognition powered by the same speech engine as Siri. That means web developers can enjoy the benefits of high-quality transcription for over 50 languages and dialects. Note that users will need Siri enabled in System Preferences on macOS or Settings in iOS or iPadOS for the API to be available to be used.

For more information on speech recognition and speech synthesis on the web, see the Web Speech API specification.

Web Audio API

As a continuing area of focus, Safari compatibility improvements are ongoing. Updates to the Web Audio API bring it to standards compliance. It is now available unprefixed with support for advanced audio processing via Audio Worklets.

You can learn more about web audio from the Web Audio API specification.

Interoperability Improvements

There are several new interoperability improvements in WebKit:

Updated wheel Event handling improves performance and interoperability with other browsers. Wheel handlers registered on root objects (window/document/body) with default arguments will be treated as passive. Pages that want to prevent the default handling of Wheel Events which result from gestures like trackpad swipes on macOS, must now call preventDefault() on the first Wheel Event in the sequence.

MediaRecorder API

WebKit added support for MediaStream Recording, also known as the MediaRecorder API. It allows websites to record audio and video, then encode them using the platform’s available set of default encodings.

Learn more in the MediaStream Recording specification.

WebM Support

WebKit added improved support for WebM media. With Safari 14, WebKit added support for WebM via MSE on iPadOS and macOS. Now, WebKit on macOS supports WebM files containing VP8 or VP9 video tracks and Vorbis audio tracks. Developers can now offer WebM content to users, though users will enjoy the best quality and power efficiency with h.264 or HEVC.

See the WebM Project for details.

JavaScript Improvements

Class Fields

Updates to the JavaScript engine in WebKit adds new support for private class fields to enforce restrictions for static and instance fields in ES6 classes. Developers that used conventions before can switch to built-in support to manage access to properties. Public static class fields are also available, adding to the previously supported public instance class fields.

To learn more, see the public and private instance field proposal.

Internationalization API

New Internationalization API features include Intl.DisplayNames, Intl.ListFormat, and Intl.Segmenter. Intl.DateTimeFormat was updated to support dateStyle and timeStyle options. The Intl.NumberFormat method was updated with support to display measurement units, notation formats, sign display, and narrow symbol currency formatting.

For more information on these formatting methods, see the proposals for Intl.DisplayNames, Intl.ListFormat, Intl.Segmenter, Intl.DateTimeFormat, and Intl.NumberFormat.

WeakRef and FinalizationRegistry

WeakRef supports holding an object that can be garbage collected when there are no strong references to it. The FinalizationRegistry object compliments WeakRef to manage cleanup tasks when a target object is garbage collected.

Read more details in the WeakRefs proposal.

WebAssembly

WebAssembly support, introduced with Safari 11, is a low-level binary format used as a compilation target for existing languages.

Threading

WebAssembly support for the atomic instructions in the Threading specification, are enabled in Safari 14.1. Note, that until Safari supports the COEP/COOP headers, shared memory is not enabled as it could expose users to cross-origin Specter data leaks.

For more information, see the WebAssembly Specification for WASM Threads.

WebAssembly Sign Extension Operator

New sign-extension operator support preserves the number’s sign while extending the number of bits of an integer.

Learn more in the Sign-extension Ops proposal.

JavaScript BigInt Integration

Support for a new JavaScript API allows bidirectional conversion of a JavaScript BigInt value to a WASM 64-bit integer.

See the WebAssembly Specification for toJSValue.

Private Click Measurement

This release features Private Click Measurement – a proposed web standard that enables advertisers to measure the effectiveness of click-through ad campaigns in a privacy-preserving way. This new technology is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.

See “Introducing Private Click Measurement, PCM” on the WebKit blog.

Storage Access API Updates

WebKit has improved the Storage Access API to allow per-page storage access and allow nested iframes to request storage access. These interoperability changes are from the ongoing standardization of the Storage Access API together with Mozilla, Microsoft, and the web community. This API has shipped in Safari since 2018 and is part of a larger effort to remove cross-site tracking from the web and provide privacy-preserving alternatives where needed.

For details, see “Updates to the Storage Access API” on the WebKit blog.

Web Inspector Updates

The updates to Web Inspector available in these releases include:

To learn more about Web Inspector features, see the Web Inspector Reference documentation.

Availability

These improvements are available to users running Safari on iPadOS 14.5, iOS 14.5, or Safari 14.1 on macOS Big Sur (11.3), macOS Catalina, or macOS Mojave. These features were also available to web developers in Safari Technology Preview releases. Changes in this release of Safari were included in the following Safari Technology Preview releases: 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122.

Download the latest Safari Technology Preview release to stay at the forefront of future web platform and Web Inspector features. You can also use the WebKit Feature Status page to watch for changes to web platform features you’re interested in.

Feedback

If you run into any issues, we welcome your bug reports for Safari or WebKit bugs for web content issues. Send us a tweet @webkit to share your thoughts on this release.

Note that an earlier version of this blog post described updates to Web Share API that are not enabled by default. Additional clarification of WebM support and WebAssembly Threading has also been added.

Updated Working Draft: CSS Color Level 4. Updated Working Dr…

Source: W3C's Cascading Style Sheets home page01 June 2021

1 Jun 2021 Updated Working Draft: CSS Color Level 4. Updated Working Draft: CSS Color Level 5.

Announcing the Global Scope program

Source: Web Directions Blog John • 26 May 2021

We’ve had JavaScript focused presentations since our very first conferences, though way back in the mid 2000s (our first conferences predated even jQuery) when JavaScript was still used very sparingly by most developers, so our coverage was similarly scant.

But just as the use of JavaScript has become more and more prominent, its appearance on our conference programs has as well, all the while sharing the stage with CSS, HTML, and other technologies. But for years we’ve felt JavaScript needed more–a conference dedicated to it. After all other programming languages have their own dedicated conferences (CCPCon for C++, PyCon, GopherCon–dedicated not to the long lost web competitor Gopher, but the Go programming language–and on). We felt JavaScript deserved a conference dedicated to it as well.

Now, you might be thinking–hang on, there are a tonne of JavaScript conferences. Well at least there were pre-Covid. But (and this is absolutely no criticism of these conferences) these have almost always been web development conferences, albeit with a strong focus on JavaScript.

What we have had in mind is a conference entirely focussed on JavaScript the language. That can go into depth about aspects of the language that might be covered cursorily if at all elsewhere.

So today we’re excited that after many years of thinking about this, even once or twice almost getting to the stage of launching an in-person event, of sounding out folks on TC39 (the committee at ECMA responsible for standardising JavaScript), JavaScript engine developers, and experienced JavaScript developers, today we’re genuinely excited to announce the program for our first Global Scope conference.

Instead of “What’s new in JavaScript” style presentations covering half a dozen or more language features in brief detail, we’ll be taking the time to focus in on, and more deeply understand new, and overlooked features of the language. And the presenters really know what they are talking about–many of them working on the standardisation of the features they’re talking abut, or their implementation in browsers, or both.

So why attend?

JavaScript is a constantly evolving language. As its importance continues to grow, new language features continue to emerge. Some extend the capability of the language, others address its shortcomings.

At Global Scope, we’ll cover these features, like Temporal, which addresses JavaScript’s Date and time handling (a legacy of JavaScript’s early Java associations that Java itself abandoned 25 years ago), and intl, for internationalising and localising string, numbers, dates and times. But we cover many many more aspects of the language as well–asynchronous iterators and generators, new immutable data structures record and tuple, optional chaining and coalescing, Realms, for secure JavaScript programming and more.

We’ll also get insights into how Just In Time (JIT) compilers work, how JavaScript is being used in the real world right now from the Web Almanac, and still more.

It’s a huge program following our unique online-friendly format, of two half days, on consecutive Fridays, in late July. Each day is repeated 3 times at three different times, so wherever you are in the world you can participate at a time convenient to you. Then once the day is over, it’s available on catchup.

Global Scope is just one of 6, in depth front end focussed conferences we’re hosting in 2021. Attend from $145 (early bird ends June 30) or all the events for $595.

It’s an amazing program, and we hope to see you there.

In 2021 we have a whole series of events for Front End Developers

Across 2021 Web Directions is presenting a series of online conferences for front end designers and developers. Focussed deep dives, they go far beyond what you might expect from conference programs.

Learn more and register now

Across the year we have 5 remaining conferences (Hover our CSS conference took place in April), focussing on Front End Performance, JavaScript, Progressive Web Apps, Accessibility, and Security, privacy and identity.

banners for all our remaining 2021 conferences Reads: Web Directions lazy load 2021 a conference on front end performance Online, globally June 11 & 18 2021 Web Directions global scope 2021 a conference all about JavaScript Online, globally July 23 & 30 2021 Web Directions Code 2021 a conference on progressive web apps and web platform Online, globally Sept 17 & 24 2021 Web Directions aaa 2021 accessibility engineering for front end developers Online, globally Late 2021 Web Directions Safe 2021 privacy, security, identity for front end developers Online, globally Late 2021

Priced individually from $145, or attend all 6, plus get access to our conference presentation platform Conffab for just $595, or $59 a month.

The post Announcing the Global Scope program appeared first on Web Directions.

Minutes Telecon 2021-05-26

Source: CSS WG Blog Dael Jackson • 26 May 2021

Full Meeting Minutes

Feeds

The Future of Style features:

If you have a post you want to add to this feed, post a link (or the whole thing) on the CSS3 Soapbox. If you own a blog with frequent posts about the future of CSS, and want to be added to this aggregator, please get in touch with fantasai.

fantasai

Made with CSS! Valid CSS!Valid HTML 4.0! RSS feed Atom feed