Skip to content

Instantly share code, notes, and snippets.

View bkardell's full-sized avatar

Brian Kardell bkardell

148 followers · 12 following
View GitHub Profile
@bkardell
bkardell / June-2024-popular-elements.md
Last active July 26, 2024 17:56
These are the custom element that appear on multiple pages in the June HTTPArchive crawl...
@bkardell
bkardell / position.md
Last active September 8, 2020 15:27

Who we are: Igalia are active participants in ECMA, W3C and WHATWG and are very significant contributors on all of the browser engines and Web Platform Tests, as well as some downstream browsers. We are also the maintainers of 2 of the official WebKit ports for Linux: WebKitGtk+ is the engine Epiphany (now named as Web) is built on top of, and its the browser shipped by default in various linux Desktop distros; we are also the creators of WPE, a WebKit port optimized for embedded devices.

Position comments:

There are a number of ways to frame a question. "Should the web have maps?" seems like such an easy one: The obvious answer is yes.

However, by itself this is not a very useful answer: The web does have maps. Some of the earliest popular uses of <img> were for geographical maps. That's purely declarative, and it's in HTML. But most of us would agree that that's not what we mean.

@bkardell
bkardell / archive.mjs
Last active May 6, 2024 05:09
import fetch from 'node-fetch';
export async function requestSnapshot(url, data) {
const response = await fetch('https://little-paper-d118.bkardell.workers.dev', {
method: 'POST',
mode: 'no-cors',
headers: {url: url}
});
@bkardell
bkardell / camel-to-kebab.js
Last active May 6, 2024 05:08 — forked from tomhodgins/camel-to-kebab.js
let _str = (function(){
const tag = document.createElement('span')
return {
propToAttr: (string) {
tag.dataset[string] = true
return tag.attributes[0].name.split(/^data-/)[1]
},
attrToProp(string) {
tag.setAttribute(`data-${string}`, true)
return Object.entries(tag.dataset)[0][0]
@bkardell
bkardell / one-platform-draft.md
Last active May 13, 2019 21:57

As I mentioned in Harold Crick and the Web Platform, the HTML specification contains a section on “Other Embedded Content” which specifically mentions SVG and MathML. In that piece I explained their unique histories and how they wound up being “special”.

I think that we need to talk about how that "specialness" relates to the larger Web Platform and I'd like to make the case that we need to move toward a common vision for how to move forward as One Platform. Let me explain what I mean and why this is currently problematic...

Let's talk about parsing

Imagine that I have a document:

<!-- this is the entirety of my.html -->
<p>This is awesome</p>
@bkardell
bkardell / gist:2f6d674308632ff00ad111800ce4074b
Created March 7, 2019 17:11
@zcorpan's dasherized elements in the HTTPArchive dataset, organized/grouped by number of occurences
{
"1": [
"navbar-login",
"login-prompt",
"test-directory",
"carousel-principal",
"vue-dropdown",
"dropdown-watch-search",
"bootstrap-session-timeout",
"head-search-input",
@bkardell
bkardell / custom-element-data-by-prefix.json
Last active March 7, 2019 01:45
cleaned up data from https://gist.github.com/zcorpan/56d1040e1afaa883b610c342c2e7a437 http archive report, organized by tag prefix to potentially identify popular groups, saved as json. Uses insertion order from the file to keep recurrent ones early
{
"lb": {
"lb-component": {
"name": "lb-component",
"ct": 1153
},
"lb-tabset": {
"name": "lb-tabset",
"ct": 26
},
@bkardell
bkardell / custom-element-data-by-prefix.json
Created March 7, 2019 01:37
This is a json file which takes data from https://gist.github.com/zcorpan/56d1040e1afaa883b610c342c2e7a437 http archive report and organizes it by prefix.
This file has been truncated, but you can view the full file.
{
"lb": [
{
"name": "lb-component",
"ct": "1030"
},
{
"name": "lb-component",
"ct": "65"
@bkardell
bkardell / johnson-quote.md
Last active May 6, 2024 05:05

This is how great ideas often happen, they fade into view over a long period of time... The challenge for all of us is how do you create environments that allow these ideas to have this kind of long half-life, right? It's hard to go to your boss and say "I have an excellent idea for our organization. It will be useful in 2020 [about a decade at the time of this recording], uh, could you just give me some time to do that?."

@bkardell
bkardell / declarative-resize-observer.js
Last active May 6, 2024 05:06
Uses mutation observers to create a declarative `ResizeObserver` pattern based on a boolean `resize-observer` attribute. These elements track the size of their elements in batch and set a tshirt-size container attribute. If `ResizeObserver` isn't implmented, it uses a lightweight approximation. The whole thing weighs in at <1k gzipped and minified
"use strict";
(function () {
var xSizeEls = [],
custom = {
width: {},
height: {}
},
breakpoints = {
width: {