Web Standards

Daily frontend news by @dark_mefody and @pepelsbey_

[Web Standards @webstandards_en]

How to make CSS slanted containers. @daveseidman shows how he made his site’s main layout skewed with the content looking normal.

https://t.co/jnHRULbln7

[Web Standards @webstandards_en]

a11yphant. A master’s project by six students that teaches basic web accessibility, one challenge at a time.

https://t.co/nJ0FaqwnNG

[Web Standards @webstandards_en]

The 100th versions of @GoogleChrome and @Firefox. The browsers, that will reach their first triple-digit version in the coming months, reminding to check compatibility with the new UA and talk about their strategies.

Chrome https://t.co/ePhrhu0Hxb
Firefox https://t.co/OHwfIVBueC

[Web Standards @webstandards_en]

Flexbox dynamic line separator. @shadeed9 adds a dynamic separator between elements that adapts to width and switches from vertical to horizontal.

https://t.co/ZLZHqIMxxd

[Web Standards @webstandards_en]

Comparing Node JavaScript to JavaScript in the browser. @elliotclydenz on how code approaches differ between environments: sync and async, callbacks and promises, async/await, SQLite examples, and specific Node.js APIs.

https://t.co/p24AjGDuXD

[Web Standards @webstandards_en]

All the ways to make a Web Component. Comparison of coding style, bundle size and performance of 61 different ways to make a Web Component.

https://t.co/PU5mqDOfSo

[Web Standards @webstandards_en]

Adobe Photoshop is now natively supports the WebP graphics format starting from the February 23.2 update. For earlier versions, there is a WebPShop plugin that adds support for the format.

https://t.co/pHJAbtLpKe

[Web Standards @webstandards_en]

The results of the State of JavaScript 2021 survey are ready. More than 16,000 developers participated in this year’s survey. Demographics, features, libraries, tools, resources, opinions, and more.

Results https://t.co/PyC7vE0rIL
Backstage https://t.co/KCdro3dqA2

[Web Standards @webstandards_en]

The File System Access API with origin private file system. @WebKit engineers on the principles of the file system API in Safari: you can create, open, read and write files and folders, but only in each origin’s private sandbox.

https://t.co/1y0dr4lB4G

[Web Standards @webstandards_en]

Building an adaptive favicon. @argyleink creates an SVG favicon that respects the user’s color scheme.

https://t.co/A5GLvMAqPN

[Web Standards @webstandards_en]

New in Firefox 97: Cascading Layers and @​layer support, scrollbar-gutter property for reserving scrollbars space, d: path() CSS property for SVG paths, handling abort signals in JS, and more.

https://t.co/1orJUPjkxa

[Web Standards @webstandards_en]

Aspect ratio is great. @MicheBarks shows examples of practical applications of the aspect-ratio property in CSS, which has replaced the infamous padding hack.

https://t.co/kP2N024FL2

[Web Standards @webstandards_en]

Hello, CSS cascade layers. @shadeed9 explores how cascade layers work and shows use-cases and examples of how to use them.

https://t.co/Z2LVza3wu8

[Web Standards @webstandards_en]

CSS Container Queries for designers. @shadeed9 on the current state of responsive web design and the new features that will available with the Container Queries coming to browsers in the nearest future.

https://t.co/0KiE32GojW

[Web Standards @webstandards_en]

Alternative popup. @Mfreed777 from Google proposed to implement popup, tooltip, and toast behavior within @openuicg using popup attribute with popup, hint, async values and hidden attribute for hiding.

Proposal https://t.co/VUiLPKvZV9
Slides and recording https://t.co/hagxDLV8fs

[Open UI @openuicg]

Today's meeting was 🔥
Presentations on how to use the new <selectmenu> with awesome demos by @MSEdgeDev @dandclark @patrickbrosset

and if that wasn't enough an amazing new popup content attribute proposal by @Mfreed777

Recording below:
https://t.co/JCdARV3Kok

[Web Standards @webstandards_en]

Optimizing social media embeds. @MicheBarks shows how to reduce embeds size and optimize their loading. Or just reconsider whether they are so necessary.

https://t.co/LfxWuCIGz1

[Web Standards @webstandards_en]

Add responsive-friendly enhancements to <details>. @zachleat shares the <details-utils> web component, allowing you to close it by Esc or outside click, open or close depending on the width, animate or change the class on the element.

https://t.co/sX9zW06WpZ

[Web Standards @webstandards_en]

Introducing the <dialog> element. @therealntim in WebKit blog on a new element for dialogs, specification improvements and implementation plans: already in Safari 15.4 beta or Safari TP, coming soon to Firefox 98 and available for a while since Chrome 37.

https://t.co/7XxKBF2d86

[Web Standards @webstandards_en]

Yes, I can connect to a DB in CSS. Lee Meichin uses Houdini to work with SQLite databases.

https://t.co/Wiatz6rVgR

[Web Standards @webstandards_en]

Automating the accessibility tests of your source code with GitHub Actions. @bolonio configures workflows to run axe, pa11y, lighthouse, and unit tests directly in his GitHub repository.

https://t.co/OdRh6iAa4L