Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

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#f00rgb(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.
  • Kohei Yoshino: Firefox will in the next version (~Jan 29) stop dispatching the 'keypress' event for non-printable keys (Backspace, arrow keys, etc.), which aligns it with the other browsers.
  • HTTP Archive: We’re giving away a limited number of coupons worth $50 (equivalent to 10 TB of queries) to promote the expansion of the HTTP Archive dataset.
  • Hadley Beeman: The W3C TAG discussed the “Constructable Stylesheet Objects” proposal, which would allow creating stylesheets with JavaScript and reusing them in multiple places.
  • Steve Souders: Third-party JavaScript size grew by a factor of 8, from 32 KB to 258 KB, in the last 7 years.

December 11, 2018

  • Anne van Kesteren: There are three independent definitions of paths: for canvas, CSS, and SVG.
  • Paul Bakaus: Web users need to unlearn that web sites can’t be used offline.
  • Florens Verschelde: Facebook disguises the label “Sponsored” from ad blockers by breaking the word up into four parts and adding visually hidden letters between the parts.
  • Nicholas C. Zakas: Poll: How frequently do you use the term “Ajax” to refer to client-side JavaScript making an HTTP request?
  • Jake Archibald: Is there a way to prevent pinch zooming in iOS Safari?
  • Hidde de Vries: elem.scrollIntoView({ block: 'center' }) scrolls the element into the center of the viewport.
  • Stefan Judis: During planned site downtime, respond with 503 Service Unavailable and specify the Retry-After header, which Googlebot may use to determine when to recrawl the URL.

December 9, 2018

  • Michiel Bijl: “No ARIA is better than bad ARIA”; e.g., if you add role="button", you must also implement the necessary behavior with JavaScript.
  • Heydon Pickering: The 'storage' event is fired when localStorage or sessionStorage has been modified.
  • Thierry Muller: The official AMP plugin for WordPress is production-ready; you can serve any URL on your site with AMP.
  • Jeffrey Zeldman: Consider always showing your work in Firefox, as a subtle reminder that there are other browsers out there.
  • Umar Hansa: “Logpoints” is an experimental feature in Chrome Canary DevTools that allows you to log custom expressions to the console whenever a specific line of JavaScript code is executed.
  • Gaurav Seth: ChakraCore, the core part of Microsoft’s JavaScript engine, will continue to be supported as an open-source project (after Edge switches to V8).
  • Patrick Walton: It’s time to make parallel layout a reality with Servo.

December 7, 2018

  • Robert O'Callahan: If Chromium is the only implementation web developers test against, then Chromium bugs are de facto standards and become impossible to fix.
  • Andrea Giammarchi: The experimental CSS supported-color-schemes property specifies under what conditions Safari can apply transformations to the page to match the user’s color scheme preference (available in Safari Technology Preview).
  • Web Platform News: Igalia Web Platform Team is working on a patch to make <iframe> scrollable on iOS (sponsored by the AMP project).
  • Maximiliano Firtman: The Microsoft Edge browser is coming to macOS and older versions of Windows next year.
  • Stephen Shankland: Mozilla CEO: “Google is so close to almost complete control of the infrastructure of our online lives that it may not be profitable to continue to fight this.”
  • Zach Leatherman: I think HTTP/2 prioritization is one of the biggest issues in web performance right now.

December 6, 2018

  • Flaki: In Firefox’s Accessibility Inspector (DevTools Accessibility panel), you can check if an element has insufficient contrast by hovering it with the element picker (available in Nightly).
  • Jake Archibald: A 2-minute video demo of Background Fetch, an API that allows web apps to download large files reliably, even if the user temporarily goes offline or closes the browser.
  • Mariko Kosaka: Poll: Should all websites have a web app manifest, or just PWAs?
  • Stephen Shankland: Mozilla is working on a faster AV1 video encoder.
  • Paul J. Adam: Safari Technology Preview has an experimental Audit panel with accessibility audits.
  • Stephen Shankland: Web Authentication is now an experimental feature in Safari Technology Preview (with support for USB security keys).

December 5, 2018

  • Chrome DevTools: A list of the 20 functions available within Chrome’s console (e.g., monitorEvents).
  • KaiOS Technologies: A new KaiOS smart feature phone priced at $7 will launch early next year in Indonesia.
  • Fred K. Schott: Pika ( is a searchable catalog of ESM (JavaScript modules) packages on npm.
  • Henrik Joreteg: Starbucks would like to see their PWA in the Google Play app store.
  • Steve Souders: Metrics from top sites show large gaps between first byte and paint (over 3 s), and between paint and CPU idle (~6 s) on mobile.

December 4, 2018

  • Chris Peterson: What are legitimate use cases for sniffing the OS version in a User-Agent string?
  • Mikko Hypponen: A research paper suggests that it’s possible to accurately infer which web pages a user has visited by analyzing the remaining textures in the GPU memory (in Firefox and Chrome).
  • Kornel Lesiński: For critical updates, consider force-reloading your PWA instead of showing a “New version available” notification to the user.
  • Dan Tonon: Autoprefixer adds limited support for CSS Grid auto-placement in Internet Explorer.
  • Steve Faulkner: Use <img alt> or <img alt=""> (both are identical) for decorative images.
  • Jason Miller: If the fifth argument in a window.onerror call is null, the error likely originated in a web worker.
  • Web Platform News: The list of web development feeds has been updated with ~20 new feeds.

December 3, 2018

  • Nick Sherman: The valid numeric range for the CSS font-weight property is 11000 (useful for variable fonts).
  • KaiOS Technologies: Twitter’s team tests on KaiOS keypad devices (JioPhone) and over 2G speeds during “2G Thursdays.”
  • Scott Helme: When the user logs out of your website, you can use the Clear-Site-Data header to remove cookies, cached responses, local storage, etc. from the user’s browser.
  • Malte Ubl: I’m looking forward to the first feedback from AMP Project’s Advisory Committee (16 members from different companies).
  • Stefan Judis: The CSS prefers-reduced-motion media feature is now supported in Firefox as well (in addition to Safari).
  • Patrick Meenan: (Only) Akamai and Cloudflare implement HTTP/2 prioritization well (they can re-prioritize in-flight requests).
  • A4AI: Over 2.3 billion people can’t afford 1 GB of mobile data.
  • Joey Nichols: The Atlantic’s regular (non-AMP) article page is fully loaded before the AMP version displays any meaningful content.

November 30, 2018

  • Tania Rascia: CSS gradients can be used as CSS shapes (“the text will know to flow around the transparent part”).
  • Chris Love: Google’s web․dev auditing tool includes a SEO score (11 audits).
  • Mike West: I’ve proposed a set of Client Hints that replace the User-Agent and Accept-Language headers.
  • KaiOS Technologies: Superior mobile internet is a great solution for those regions where reliable Wi-Fi isn’t a reality.
  • Heydon Pickering: Can you server-render a React component that works if JavaScript fails on the client?
  • W3C Web Accessibility Initiative: You can use our free tool to create an accessibility statement for your website.
  • Terence Eden: It is highly recommended that you use the <script integrity> attribute on scripts loaded from third-party domains.
  • Harry Roberts: Why is it <link rel="stylesheet" href="…"> and not <style src="…">?

November 29, 2018

  • Wes Bos: You can get an array of all month or day names via the toLocaleDateString method (one-liner).
  • Mike West: If you’re relying on rendering things like HTML or PDF files from an FTP server, please consider upgrading to HTTPS.
  • Remy Sharp: The app should leave server-rendered content in place if there is an error during app re-hydration.
  • Šime Vidas: Unlike regular AMP pages, AMP ads won’t be displayed if JavaScript is disabled or the AMP library fails to load.
  • Simon Fraser: Should mouse wheel events propagate up the DOM (demo)?
  • Ire Aderinokun: CSS custom properties can’t be used in @media rules (i.e., as media feature values), but environment variables can.
  • Amelia Bellamy-Royds: Instagram will automatically be adding image recognition-based alt text, but there will be a way for uploaders to include custom alt text.

November 28, 2018

  • @tabatkins: The justify- and align- prefixes are indeed confusing, and we should have chosen better names.
  • @WebPlatformNews: If one of your HTTP headers has many different values that change, consider splitting it to avoid a combinatorial explosion in HPACK’s dynamic table (or opting it out of compression altogether).
  • @Paul_Kinlan: How to use the new <file-drop> custom element.
  • @edent: What are the benefits of using Subresource Integrity (<script integrity> attribute) for scripts that are served from your own domain?
  • @natfriedman: You can now watch releases on a GitHub repo (“get notified only when there’s a new project release”).
  • @WebPlatformNews: In Firefox, the user can enable text-only zoom; consider checking that your website remains usable at 200%.
  • @pauljadam: Multi-thumb slider with two <input type="range"> elements (demo).

November 27, 2018

  • @getify: Reminder: The String includes method is used to search for a string in another string.
  • @ireaderinokun: The ::before and ::after pseudo-elements appear in the browser’s DOM inspector but are technically not part of the DOM and cannot be targeted by JavaScript.
  • @WebPlatformNews: “HTTP/3 explained” is a collaborative effort to document the HTTP/3 and QUIC protocols.
  • @briankrebs: Half of all phishing sites now use HTTPS; the “look for the padlock” security advice has become useless and dangerous.
  • @stevefaulkner: Narrator (the built-in screen reader on Windows) doesn’t seem to support role="none (or role="presentation").
  • @smashingmag: Poll: Do you still have to actively support IE9?
  • @simevidas: The Picture-in-Picture specification defines a <video disablepictureinpicture> attribute (it’s supported in Chrome).

November 26, 2018

  • @_martinwolf: In order to precisely position the content of a button (e.g., in the top left corner), you may need to use a nested <span> element.
  • @simevidas: Service workers enable web apps to respond to the initial navigation request by streaming the app shell from cache.
  • @AndyDavies: Due to HTTP/2 prioritization issues, we should maybe place preload requests for fonts after the external CSS that references them.
  • @WebPlatformNews: The service currently doesn’t support Subresource Integrity (<script integrity> attribute).
  • @WebPlatformNews: HTTP/3 connections won’t be interrupted if the user’s IP address changes (e.g., when they switch to a different Wi-Fi network).
  • @denar90_: Lighthouse highlights browser extensions that increase the web page’s “JavaScript boot-up time.”
  • @getify: Poll: Do you still test in and support Internet Explorer?

November 25, 2018

  • @patmeenan: Some servers aren’t handling HTTP/2 prioritization well; high-priority requests that are discovered late, get delayed because the net buffer is already filled with low-priority resources.
  • @getify: The array sort method always moves elements of undefined value to the end of the array.
  • @robinberjon: Adtech's focus on maintaining the status quo is suicidal. If it does not get regulated out of existence, it will keep pushing more people towards ad blocking.
  • @WebPlatformNews: Early next year, Firefox will start blocking third-party tracking cookies by default on all desktop platforms.
  • @dougsillars: Why some websites have a large number of redirects before the HTML is loaded.

November 22, 2018

  • @maddesigns: A simple star rating component with a single <meter> element and two SVG background images.
  • @KaiOStech: Africa’s largest mobile network plans to launch a sub-$25 KaiOS “smart feature phone” in early 2019.
  • @heydonworks: How to wrap text around a circular, floated element that has been pulled out via a negative margin (demo).
  • @simevidas: The High Resolution Time specification shows browser support in its header (screenshot).
  • @rem: Should a switch be implemented using a checkbox or two radio buttons?
  • @stefanjudis: You can configure the length of the printed stack trace using Error.stackTraceLimit (useful in Chrome).
  • @marcysutton: The <dialog> element is at risk of being removed from the HTML specification.
  • @WebPlatformNews: The Google Maps desktop website has become keyboard accessible (press shift + tab ~twice to reach the blue square).

November 21, 2018

  • @simevidas: Is there a way to animate the splash screen when the user loads your PWA from the home screen?
  • @stshank: Akamai aggregates DNS queries from subscribers and makes them accessible to providers.
  • @RianRietveld: An <a> element is only keyboard accessible when it has a non-empty href attribute.
  • @jeffposnick: In Chrome, service workers will start receiving fetch events for favicon requests.
  • @FirefoxNightly: In Firefox (Nightly), the user can now check which trackers were blocked (or allowed) on the current web page (Firefox displays a list of domains).
  • @firt: “Progressive Web Apps” are three years old. I wonder if the web development community will still use this term in three years.
  • @_developit: HTM is a “JSX alternative using standard tagged templates, with compiler support.”

November 20, 2028

  • @kuvos: An immediately invoked arrow function expression for getting a subset of an object.
  • @rauchg: Polls suggest that almost half of the people use TypeScript.
  • @CherryJimbo: Express.js middleware that sets the Report-To and NEL (Network Error Logging) HTTP response headers.
  • @stshank: The heads of the Brave browser and the Adblock Plus extension have a heated argument on Twitter.
  • @DasSurma: It is safe to put an HTML comment before <!doctype html>.
  • @getify: The advantage of function expressions (over arrow functions) is that they can include a self-descriptive function name.
  • @wesbos: You can use the spread syntax to remove multiple CSS classes with a single classList.remove call.
  • @poshaughnessy: Twitter’s mobile website (which is a PWA) prompts some users to install the native app.

November 19, 2018

  • @simevidas: CSS gotcha: The currentColor value is inherited as a keyword (and resolved locally), but var(--foo) is inherited as a resolved value.
  • @jon_neal: postcss-preset-env supports CSS logical properties (e.g., padding-inline).
  • @__jakub_g: On WebPageTest, you can specify command-line options when testing in Chrome (example).
  • @kleinfreund: <button is="toggle-button">, <switch-button>, <radio-button>, and <check-box> custom elements (demos).
  • @cramforce: Yoav Weiss proposes a feature policy that would allow websites to opt out of AppCache.
  • @boriscoder: “Peeking under the hood of redesigned Gmail” (article).
  • @vincentriemer: What are your global/wildcard CSS rules?

November 16, 2018

  • @w3cdevs: Chrome is implementing the CSS ::part() pseudo-element, which will allow web apps to style specific elements within a web component’s shadow tree.
  • @CSSInRealLife: Changing animation-direction to reverse also reverses the animation-timing-function (e.g., ease-in becomes ease-out).
  • @Mandy_Kerr: In Safari, it will be possible to adjust your variable fonts based on the user’s color scheme preference (demo).
  • @alex_gibson: Firefox will start prompting users—to check if their account was affected—on websites that have suffered a security breach in the last 12 months.
  • @mikewest: FTP is a non-securable, legacy protocol, and we’d like to remove it from Chrome, eventually.
  • @rmondello: The latest Safari preview shows a “Not secure” label in the URL bar when loading non-HTTPS pages.
  • @brave: The Brave browser will get a new reader mode next year, which will “remove all non-essential content before a page loads,” resulting in improved performance and privacy.

November 15, 2018

  • @anatudor: You can use ::before/::after pseudo-elements on grid items to create decorative separators in grid layouts.
  • @mikewest: Should the proposed Sec-Metadata header have human-readable values?
  • @0xcda7a: Google has created a <model-viewer> web component for displaying 3D/AR content on the Web.
  • @etportis: Jon Sneyers from Cloudinary has created the “Free Universal Image Format” (FUIF), which is “responsive by design” (still a prototype).
  • @raymondcamden: Websites like GitHub and Twitter should guard against miss-clicks when UI updates shift content down.
  • @etportis: A short screencast about lazy image loading, which is behind flag in Chrome.
  • @jensimmons: What would you like to see from CSS in 2019?

November 14, 2018

  • @RickByers: The major browser engines are now more interoperable than ever, with the majority of tests “passing in four browsers.”
  • @mikewest: The document.domain API introduces security issues (it “allows developers to relax the same-origin policy”), and websites should have a way to disable it (via Feature Policy).
  • @tomayac: Chrome proposes a Contacts API that would enable web apps to request access to the user’s contacts.
  • @addyosmani: The Chrome team has announced “$200,000 of funding for improving performance best practices in frameworks.”
  • @nicolaschevobbe: SmartTrace, a new feature in Firefox DevTools that collapses framework/library calls when running console.trace(), has landed in Firefox Nightly.
  • @ChromiumDev: <virtual-scroller> is a potential “layered API” that would ensure great rendering performance when scrolling long lists.
  • @pattishin: When to use web workers (diagram).

November 13, 2018

  • @seldo: WebAssembly creates the potential for npm to become the dependency management solution for every programming language.
  • @bfrancis: The next version of HTTP after HTTP/2 will run over UDP rather than TCP.
  • @smashingmag: An example of footnotes implemented as disclosure widgets (the footnotes are initially hidden).
  • @slsoftworks: WebAssembly makes it possible to use advanced encoders like MozJPEG and OptiPNG in the browser.
  • @tomayac: “Project Fugu” is Google’s effort to make web apps as capable as native apps.
  • @igrigorik: PageSpeed Insights is now powered by Lighthouse.
  • @rachelandrew: Firefox is the only major browser that doesn’t support CSS column-span: all (but it’s now behind flag in Firefox Nightly).

November 12, 2018

  • @RyanTownsend: Bundling is still hugely beneficial because HTTP/2 doesn’t have cross-resource compression.
  • @_oliverjam: The next version of Preact (called “Preact X”) will be under 3 KB.
  • @zachleat: First Meaningful Paint ignores fonts that paint fewer than 200 characters.
  • @marcysutton: Chrome DevTools extension can’t be accessed with the keyboard alone.
  • @tigt_: Scroll containers will finally become keyboard-accessible by default in Chrome (like in Firefox).
  • @simevidas: Firefox prompts the user when an extension requires new permissions (screenshot).
  • @TimVereecke: About 5% of my users have enabled data saving Save-Data: on header).

November 9, 2018

  • @elijahmanor: The destructuring assignment syntax can be used separately (useful if one of the variables is from a different scope), but parentheses are needed in the case of object destructuring.
  • @rem: When animating elements via JavaScript, the advantage of the (standard) Web Animations API over libraries is that the animation doesn’t become janky during CPU-intensive tasks.
  • @MSEdgeUpdates: The Edge browser supports the WebP image format in the Windows 10 October update (whose rollout has been postponed because of a critical bug).
  • @AndyDavies: You can enable the Layers panel in Safari Web Inspector.
  • @tomayac: Stopping at 0.99 when animating opacity is a hack to prevent paint, but the correct approach is to declare the animation with will-change: opacity.
  • @sitnikcode: The <meta name="theme-color"> value, which sets the theme color in Chrome for Android, can be changed dynamically, e.g., to notify the user about a background error.
  • @simevidas: Use document.scrollingElement.scrollTop to get the the web page’s current scroll position.

November 8, 2018

  • @ebidel: Googlebot can only see images that are “in the viewport;” if you rely on the Intersection Observer API to lazy-load images, make sure to include the polyfill.
  • @drublic: For the vast majority of page views, front-end time is higher than back-end time.
  • @lukew: People are less likely to scroll a web page if the “content seems to end due to layout/design.”
  • @github: An option to “delete this issue” is now available on GitHub (it’s the last item in the right-hand column).
  • @hdv: Only very few websites have a robust Content Security Policy. (See Issue № 968 for tips on how to implement CSP.)
  • @tomayac: The proposed ListFormat API doesn’t add the Oxford comma in English.
  • @mnot: “The first detailed look at how Elon Musk’s space internet could work.”

November 7, 2018

  • @rauschma: According to the JavaScript specification, the === and == operators are called “strict equality comparison” and “abstract equality comparison,” respectively; a clearer name for the latter may be “coercive equality.”
  • @kennethrohde: The “import maps” proposal would allow “bare import specifiers,” which could be used in traditional URL contexts via a new import: URL scheme.
  • @elijahmanor: The ::before/::after pseudo-elements remain the best way to style checkboxes and radio buttons.
  • @praveenpuglia: is a website that shows the keyboard event’s key and code properties for the pressed key.
  • @EWErikWitt: The Network panel in Chrome DevTools can tell you which resources were served by Blink’s memory cache.
  • @natfriedman: GitHub now shows related issues when entering the title of a new issue.
  • @Souders: The size of third-party JavaScript is growing at a faster rate than the size of first-party JavaScript.

November 6, 2018

  • @necolas: The CSS on (PWA), which is generated on-demand by a JS framework, is much smaller and safer, compared to (legacy desktop site).
  • @DasSurma: You can convert an inline <script> into a blob URL (code example).
  • @feross: There are tools for linting (ES Lint) the JavaScript portions of HTML and Markdown documents.
  • @mikewest: “We could deprecate User-Agent and Accept-Language in favor of opt-in, securely delegated hints.”
  • @FirefoxDevTools: CSS change tracking is available in Firefox Nightly behind flag (video).
  • @timberners_lee: “Contract for the Web” is an initiative to ensure that governments and companies help protect the open web.
  • @getify: You should always name your JavaScript functions (“anonymous functions are bad”).
  • @igrigorik: How to make sure Google can crawl and index lazy-loaded content.

November 5, 2018

  • @MozDevNet: In Chrome/Firefox DevTools, you can press “H” to quickly toggle the visibility of the selected DOM element.
  • @troyhunt: The data on “Why No HTTPS?”—which lists the top websites that don’t automatically redirect users to HTTPS—has been updated.
  • @zachleat: In our public code examples, should we use the (more readable) async/await syntax or the (more compatible) promises?
  • @prchdk: The benefits of React Hooks visualized.
  • @presroi: Google’s WebP image format is supported in Firefox Nightly behind flag (also coming to Edge).
  • @EFF: “Chrome and Edge are the only two major browsers without a built-in tracker blocker.”
  • @simevidas: The ::-webkit-scrollbar pseudo-elements are now “under consideration” for Edge.
  • @github: You can now prioritize your notifications with “Save for later.”
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.