Enhance ships with everything you need to build a production ready app.

This is a working draft of a checklist to define a "gold standard" for web components that aspire to be as predictable, flexible, reliable, and useful as the standard HTML elements. The fundamental premise of this list is that it should not only be possible to attain that standard; people creating web components for general consumption should aim to meet that standard. These items are focused on designing good components; there are many other good principles for designing good user interfaces at the page or application level which are not listed here.

Generate ACF Gutenberg blocks just by adding templates to your Timber theme.

Learn how to instantly improve online viewing experience for your users by embracing the new AV1 video format that is already supported by Chrome and Firefox. This short guide will also show how to replace your GIF’s with videos, using AV1 or H.264, to make your files twenty to forty times smaller.

For "codecs" part of "type" attribute of source HTML tag

Based on HTML Spec WHATWG

Shipping accessible features is as essential for a frontend developer as shipping features without bugs. Here is a list of tools I regularly use to make sure everything I do is accessible for folks with different abilities, whether they are blind or holding a sandwich in their hand. I’ll start with tools that will give us immediate feedback when we’re writing code, and continue with tools that we have to run ourselves or guide us on how to test things manually. This article will be useful not only for developers but also for designers, project managers, and other team members — many of the tools could be used directly in the browser and don’t require any technical knowledge.

The goal of this project is to create a common library of generic web components, that are accessible, framework agnostic, easy to style, and easy to consume.

The «Accessibility Developer Guide» is an initiative of «Access for all», Swiss Foundation for technology adapted to people with disabilities. It is developed and maintained in collaboration with a number of acclaimed web agencies. The vision behind the Accessibility Developer Guide is to bridge the gap between providers of websites and users with special needs.

certainlyakey starred javan/details-element-polyfill

• Completely standalone
• Handles multiple types of form controls
• Plays well with existing HTML/CSS
• No JS knowledge required
• Works in all modern browsers
• Restrict form controls by a selector
• Automatically accounts for newly added controls
• Tiny footprint

Polyfill for the HTML dialog element

A set of directives to simplify your workflow with BEM-markup in Angular applications.

CSS Grid vs. Table — In Hand To Hand Combat

Let’s say that you’re working on an Angular 4 app that displays some images. You want to add a directive you can apply to any image tag to make it look fancy when you mouse over it. You also want a component that will take up 100% of its parent container’s width and display an array of images in a flex row. Let’s call these FancyImageDirective and ImageRowComponent.

Stimulus is a JavaScript framework with modest ambitions. Unlike other frameworks, Stimulus doesn’t take over your application’s entire front-end. Rather, it’s designed to augment your HTML by connecting elements to JavaScript objects automatically.

These are the general guidelines that apply to all structured data. These guidelines must be followed to enable structured data to be eligible for inclusion in Google Search results. Pages or sites that violate these content guidelines may receive less favorable ranking or be marked as ineligible for rich results in Google Search in order to maintain a high-quality search experience for our users. If your page includes structured data or content that is considered spam, you will see a message on your Manual Actions page in Search Console.

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.

Recently I discovered Contact Form 7 (CF7) by Takayuki Miyoshi. A plugin to create forms on a WordPress website. I was looking for an accessible alternative for Gravity Forms, and discovered that Contact Form 7 does an excellent job!

Up to now I used Gravity Forms, which is a great plugin. But it has some accessibility issues and has W3C validation errors for the HTML and CSS. Gravity Forms also doesn’t have an accessible backend.

Contact Form 7 recently (version 3.6) added accessible WAI-ARIA to the forms, e.g. for error messages and required fields. Also the plugin gives you complete controle over the HTML output of the form.

A second advantage of Contact Form 7 is that the backend is fully accessible, so a visually impaired content manager can build her own forms.

The only drawback is that the default form, provided by the plugin needs to be changed to make the form fully accessible, but that’s easily done, unlike with Gravity Forms.

There are a number of different use cases addressed by some combination of features from the responsive images specification—here are some of the most common ones.