January 12, 2019
Total Page:16
File Type:pdf, Size:1020Kb
January 12, 2019 Autoprefixer: Autoprefixer warns you if you use deprecated CSS properties, e.g., text- decoration-skip: ink instead of text-decoration-skip-ink: auto . Josh Aas: Let’s Encrypt has stopped checking domains against the Google Safe Browsing API before issuance (content safety is outside the scope of certificates). Rachel Andrew: CSS multi‑column layout (e.g., column-count: 4 ) is currently the only layout method that can create Masonry‑style layouts with unequal height items. Zach Leatherman: On macOS, buttons seem to lose their native styles if they become multi‑ line. Anne van Kesteren: The DOM Standard lists the 18 built‑in HTML elements that can be shadow hosts (the attachShadow method works on them). Rick Viscomi: The median Lighthouse accessibility score is only 62%. January 11, 2019 Sven Wolfermann: A “spinbutton” is an input widget that restricts its value to a set or range of discrete values (screenshot). Heydon Pickering: Firefox supports the CSS gutter properties ( row-gap , column-gap , and gap ) in flexbox layouts as well. Rob Dodson: Reminder: Shadow DOM provides style encapsulation, but CSS custom properties do pierce the shadow boundary (as an exception). Potch: The CSS next‑sibling combinator ( + ) is underrated (e.g., li + li is more concise than undoing things with :first-child ). Carie Fisher: The most reliable way to add additional descriptive content to SVG graphics is <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]" . Nicolas Steenhout: Opening links in new windows or tabs (without warning) is an accessibility barrier because it changes the context which can be disorienting for some people; if you can’t avoid it, notify the user via an “Opens in a new window” message. January 10, 2019 Chris Heilmann: Google’s Ad Experience Report allows you to test your website for negative ad experiences that Chrome would filter out. Zach Leatherman: A JavaScript snippet that returns all the unique CSS font-size values on the current web page (you can run it in the browser’s console). Dinsan Francis: The <video autoPictureInPicture> attribute is an experimental Chrome feature that will allow web apps to continue playing videos in Picture‑in‑Picture mode when the user switches to a different app. Sjoerd Langkemper: Same‑site cookies ( SameSite cookie attribute) provide adequate protection against cross‑site request forgery (CSRF). Kyle Simpson: Some screen readers have a mode that masks the screen or even turns it off. Addy Osmani: Babel’s “env” preset has an experimental { "useBuiltIns": "usage" } option for importing individual polyfills when they are used in each file. Marcy Sutton: Google doesn’t translate aria-label values along with text content. January 9, 2019 Amelia Bellamy‑Royds: An outline is a more reliable focus indicator than a color change, especially for high contrast users and users who view content heavily zoomed. Jeff Posnick: If you use workbox and want to serve cached audio and video, you should cache the media files ahead of time (runtime caching isn’t guaranteed to work in all browsers). Eric Portis: The <img intrinsicsize> attribute is experimentally supported in Chrome; by specifying the intrinsic sizes of images, the browser can perform fewer layout events during page load (“no jank”). Derek Featherstone: Poll: Why do people use <div tabindex="0"> instead of <button> or <a> ? Dan Tonon: You can use special CSS comments to instruct Autoprefixer to add (or not to add) CSS Grid prefixes for Internet Explorer. Elika J. Etemad: How to file a good bug report (slide deck). Šime Vidas: Unlike Chrome, Firefox doesn’t disable extensions in incognito windows, but in Firefox’s “Help” submenu there is an option for restarting the browser with add‑ons disabled. December 20, 2018 David Brunelle: If you ever need to remove the service worker from your web app, you can use this “kill switch” service worker that deletes all caches and then unregisters itself. Katie Hempenius: In Chrome/Firefox DevTools, you can use the has-response-header: operator to only show resources that contain a specific HTTP response header. Lukas Weichselbaum: Chrome now uses the more granular script-src-elem and script- src-attr directives in CSP violation reports (even when the website sets the older script- src directive). Allen Wirfs‑Brock: Modern package managers and module systems have obsoleted the utility of standard libraries. Chrome Developers: Twitch will start using the VP9 video codec for its live streams (“25% bitrate savings compared to the highest‑quality H.264 encoders”). Steve Souders: Synchronous scripts can delay the loading of images; use the async or defer attributes to load scripts at a lower priority. Seth Thompson: “With work halting on EdgeHTML, Servo is now the newest in‑progress browser engine.” December 19, 2018 Tab Atkins: An image’s naturalWidth and naturalHeight properties are “density‑ corrected,” so they don’t necessarily return the actual dimensions of the image resource. W3C: The first draft of the Web Publications explainer (written by Dave Cramer) is available on GitHub; it describes how web publications differ from the regular web. Aaron Gustafson: The Edge team has started committing code to the Chromium project. Steve Faulkner: ANDI is a bookmarklet that can detect various accessibility issues on the page, such as “elements with no accessible name” and “improper ARIA usage.” Thomas Steiner: The proposed Wake Lock API allows web apps to prevent the device from dimming and locking the screen (screen wake lock) or prevent the device from going to sleep (system wake lock); this API is currently behind flag in Chrome. Scott Jehl: A set of styles for the <select> element that works reasonably well across browsers (incl. IE). December 18, 2018 Zach Leatherman: The term “third‑party JavaScript” is ambiguous; it can mean JavaScript loaded from a different site or JavaScript not written by the author(s) of the web page. Chen Hui Jing: When inspecting CSS in the browser’s developer tools, you can hold Shift and click the color dot to change the color unit (e.g., red → #f00 → rgb(255, 0, 0) → hsl(0, 100%, 50%) → …). Jake Archibald: “Periodic sync” would give you a service worker event that fires at an OS‑ controlled interval, which you can use to update caches, etc. Daniel Ehrenberg: TC39 is looking into expanding the JavaScript standard library (e.g., with API from libraries such as lodash). Maximiliano Firtman: Web Bluetooth Scanning is a proposed API that would enable websites to listen for advertising packets broadcasted by Bluetooth Low Energy (BLE) devices. Sven Sauleau: With webpack, you can directly import C code (using the experimental “holyc” loader). Wes Bos: Intersection Observer can be used to disable a UI until something has been shown on screen. December 17, 2018 Tierney Cyren: npm provides a ignore-scripts config that you can use to block post‑install scripts (for security reasons). Jason Miller: The HTML crossorigin attribute defaults to the value "anonymous" and can be declared as a Boolean attribute. Maximiliano Firtman: Do browser engineers/devrels have the responsibility to file bugs for issues they hear about on Twitter and other places? Ire Aderinokun: Use a <div aria-live="polite"> element to notify screen reader users when content on the page is dynamically updated. Jake Archibald: We wanted to prove that you can load a web app built using a modern JavaScript framework in less than 5 seconds on 2G. Wolfie Christl: A single ad on a website may set 25 cookies, make 100 “fourth‑party” calls and use 40% of a user’s CPU, according to the guidelines of this adtech firm. François Remy: The Windows 10 October 2018 Update can still only be installed manually (which means that most users are probably not on the latest version of Edge). December 14, 2018 Maximiliano Firtman: WebAPK was enabled more than one year ago, but web apps still can’t be published on the Google Play app store. Roger Johansson: Where in the tab order should sticky/floating elements appear? Henrik Joreteg: iOS Safari is the only major browser that doesn’t support the <a download> attribute. Opera: Opera for Android now includes a built‑in crypto wallet that supports the Etherium protocol. Addy Osmani: quicklink is a tiny library (by Chrome team) that detects and prefetches links within the viewport when the browser is idle. Andreas Bovens: The two new standard CSS properties for styling scrollbars have shipped in Firefox. December 13, 2018 Intent To Ship: CSS ::part pseudo‑element in Blink (allows custom elements to expose specific sub‑elements for styling by the outer page). Glenn Gabe: Clarity by Microsoft is a new analytics product (in beta) that “lets you replay your users’ session to see how your users really use your site.” Nicole Sullivan: A proposal to send the <meta name="viewport"> value via an HTTP response header, so that browsers can receive this information earlier (before parsing the HTML document). Wikimedia: The European Court of Human Rights affirmed that hyperlinking is protected free expression (i.e., “simply posting a hyperlink should not make a person liable for the content of that link”). Ire Aderinokun: CSS visibility: hidden makes elements non‑interactive and removes them from the accessibility tree. Lea Verou: You can use the ::-webkit-inner-spin-button pseudo‑element to prevent the spinner of number inputs from becoming invisible in Chrome. December 12, 2018 Tom Schuster: Firefox would like to improve “x is undefined” error messages but can’t because some websites depend on the exact wording of JavaScript error messages. Malte Ubl: Many third‑party JavaScript and CSS services already use the stale-while- revalidate header, which improves caching, but no browser supports it yet. Maxim Salnikov: The Lighthouse auditing tool now uses the community‑designed Progressive Web Apps logo.