Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production

Prototype mobile apps with simple HTML, CSS, and JS components.

Convert HTML to fastFrag JSON structure.

В этот день двадцать лет назад нынешний CTO Opera Хоком Виум Ли опубликовал предложение по каскадным таблицам стилей для HTML. 

Мы все умеем пользоваться элементом <img>, ему уже двадцать лет в обед. Но за это время задачи поменялись, и старичок уже не справляется с адаптивным дизайном. Этой осенью новый элемент <picture> приедет в большинство популярных браузеров. Самое время разобраться, как он работает.

Craft is a content management system (CMS) that’s laser-focused on doing one thing really, really well: managing content. And since content comes in all shapes and sizes, we’ve built Craft to be as flexible as possible, without compromising on the ease of use for content authors.

A quick tool for creating HTML tables out of spreadsheet data

Before I came up with the interactive placeholder, I was just using a normal one. I liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared.
Entire teams use Circle — the person who enters a value first isn’t always the same person who sees it later. To solve this problem I tried making the placeholder persist through the typing.
This worked well and made handling pre-filled data that much easier. When the <input> gets pre-filled, it behaves as it would if the user entered it themselves. Now teammates who view this in the future will know what this input is meant for right away.

Polymer is a library that uses the latest web technologies to let you create custom HTML elements. Build anything from a button to a complete application as an encapsulated, reusable element that works across desktop and mobile.

Today is Global Accessibility Awareness Day (GAAD). To celebrate and to help promote accessibility, here are 10 simple accessibility tips that most anyone can implement today into their web site’s HTML and CSS to make it more accessible.

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.

Convert plain symbols to HTML entities, CSS ASCII codes (for 'content' property), JS...

This JS-based form will remove all comments in a given HTML markup.

For those of you who haven’t yet heard, the W3C just announced the new <main> element. As the name suggests, the purpose of the element is to identify the main content of a page. To that end, you are only allowed one <main> element per page, and the <main> element cannot be a descendant of any of the following elements: <article>, <aside>, <footer>, <header>, or <nav>. Instead it should be their sibling.

With the introduction of HTML 5, the audio tag provides a simple way to play audio files without the use of Adobe Flash. However, with the generic controls attribute, all audio tags look the same, but without any controls defined, the audio tag is invisible. In this tutorial I provide examples and a simple library on interacting with the audio element through Javascript and CSS. This provides the developer the ability to stylize all of the buttons and make a custom UI for the Audio element.

Each HTML element must abide by rules defining what kind of content it can have. These rules are grouped into content models common to several elements. Each HTML element belongs to zero, one, or multiple content models, each settings rules that the element's content must follow in a HTML-conformant document.

Automatic NBSP adds HTML non-breaking space (&nbsp) in your posts, custom post types and pages.

HTML/CSS special Unicode symbols

This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here (besides MailChimp, which is surface-level patterns) to demonstrate the many uses of these documents.
Anna Debenham has an excellent round-up of what makes up a front-end style guide in her post on 24 ways and her book — here are some more examples to explore.