Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “html”

245 bookmarks by garrettc



Hyperscript Widgets

"The goal of this repository is to assemble a rich library of pre-tested UI-controls that work nicely with htmx and hyperscript."

Bookmarked on #


the html review

"The html review is an annual journal of literature made to exist on the web"

Bookmarked on #


How-to: Accessible heading structure - The A11Y Project

Nice comprehensive article about accessible heading structures in html.

Bookmarked on #



html5-kitchen-sink:

Sample markup containing all HTML5 elements for jumpstarting/testing css

Bookmarked on #


Ashley Sheridan - Making an Accessible Hamburger Menu

How to improve the accessibiilty of the checkbox approach to hamburger menus.

Bookmarked on #


Hyperscript

"Hyperscript is an easy and approachable language designed for modern front-end web development."

Bookmarked on #


When to use target="_blank"

"Anchor links1 may have a target attribute which controls what happens when that link is clicked. One of the possible values of that attribute is _blank, which tells the browser to open a new window (or tab, if that’s the user’s preference) when that link is clicked. This used to be “invalid” in HTML (maybe only XHTML?) but people used it anyway since it worked. It’s now perfectly valid in HTML5. But are there good reasons to do so?"

Bookmarked on #


Web Components: HTML with Superpowers

"Earlier this year I spoke at An Event Apart’s Spring Summit and today I’m happy to share with you that talk called HTML with Superpowers, which is all about Web Components."

Bookmarked on #



On the <dl>

"The <dl>, or description list, element is underrated. It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile."

Bookmarked on #


Using CSS to Enforce Accessibility

Useful techniques for using CSS to highlight potential accessibility issues in a page.

Bookmarked on #


Shopify/dawn

Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme development. It's Shopify's first source available theme with performance, flexibility, and Online Store 2.0 features built-in and acts as a reference for building Shopify themes.

Bookmarked on #


The Button Cheat Sheet

Do you need a button for your next project but you’re not sure about the right markup? Don’t worry, we’ve got you covered!

Bookmarked on #


trafilatura

Web scraping library and command-line tool for text discovery and extraction (main content, metadata, comments) - adbar/trafilatura

Bookmarked on #


htmx - high power tools for html

"htmx allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext"

Bookmarked on #


Tweego

" Tweego lets you write Twine projects using your favorite text editor, rather than the Twine software. You write passages in plain text files using the Twee Notation across as few or as many files as you choose, which can make working, and collaborating, on Twine projects faster and easier. When you're ready to publish or test, you simply compile all your project files into an .html file with Tweego."

Bookmarked on #


HTML Design Principles: Priority of Constituencies

"In case of conflict, consider users over authors over implementors over specifiers over theoretical purity."

Bookmarked on #


Maximally optimizing image loading for the web in 2021

"In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display."

Bookmarked on #



Authentication

Some ways of combining security and usability for two-factor authentication on the web.

Bookmarked on #


The unreasonable effectiveness of simple HTML

"Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you’ve created?"

Bookmarked on #


Web Platform Design Principles

This document contains a set of design principles to be used when designing Web Platform technologies.

Bookmarked on #



CSS Support Guide for Email Clients

A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet.

Bookmarked on #


The media object saves hundreds of lines of code

"What is the internet made of? At least the UI layer is mainly composed of media blocks."

Bookmarked on #



Markup from hell

A collection of bad practices in HTML, copied from real websites.

Bookmarked on #


Responsive Images the Simple Way

"The responsive images spec is fantastic and covers a lot of use cases, but in my experience, most of the time you’ll only need to understand one of them: Serving a different sized copy of the same image depending on the user’s viewport width. We call this resolution switching, and you can accomplish it using the srcset and sizes attributes."

Bookmarked on #



AST explorer

Paste or drop code into the editor and inspect the generated AST.

Bookmarked on #


A Complete Guide to Links and Buttons | CSS-Tricks

A complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.

Bookmarked on #


The 2020 Guide to FavIcons for Nearly Everyone and Every Browser

"Once upon a time, creating a favicon only required making a single 16×16 pixel icon, and placing it in the root directory of a website. This still works today, albeit with some caveats."

Bookmarked on #


Historical Browser Bugs

"A complete list and demonstrations of more than 1000 browser bugs, plus a bug table, Netscape bugs, CSS and HTML guides and much much more"

Bookmarked on #



Create a semantic “breakout” button to make an entire element clickable

"…using the magic of CSS to give us the desired fully clickable element effect, while also using proper semantic elements and JavaScript and as an enhancement."

Bookmarked on #


Going offline with microformats

The h-entry microformat and the Cache API are a perfect pairing for offline pages.

Bookmarked on #


Can I email…

Support tables for HTML and CSS in emails.

Bookmarked on #


Useful Pens for Everyday Front End Development

"This collection is a way of bookmarking some techniques that will be useful in practice in everyday dev."

Bookmarked on #


Storybook: UI component explorer for frontend developers

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Bookmarked on #


HTML & CSS Is Hard

A free web development tutorial for complete beginners

Bookmarked on #


Start Performance Budgeting

"If you're building a web experience and want to stay fast, a performance budget can be critical. For success, embrace performance budgets and learn to live within them. Network & CPU limits on mobile can require asking hard questions like, "what is really important to my users?"

Bookmarked on #




Split

Materials and tools; client and server; declarative and imperative; inclusion and privilege.

Bookmarked on #


Water.css

"Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer."

Bookmarked on #



How A Screen Reader User Accesses The Web: A Smashing Video

"In this Smashing TV webinar, join us with Léonie Watson as she explores the web alongside some unexpected properties of HTML elements that have a huge impact on accessibility and performance."

Bookmarked on #


The practical value of semantic HTML

"If the importance of good HTML isn’t well-understood by the newer breed of JavaScript developers, then it’s my job as a DOWF (Dull Old Web Fart) to explain it."

Bookmarked on #