n
/
250kb-Club
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

port application to svelte-kit

Browse Source
pull/69/head
koehr 4 years ago
parent 8a749cbda9
commit b00b6286b1
35 changed files with 1989 additions and 897 deletions
Show Stats Download Patch File Download Diff File

1
.gitignore vendored
Unescape Escape View File

@ -1 +1,2 @@
node_modules
.svelte

2
build/_app/entry-5717511c.js
Unescape Escape View File

@ -0,0 +1,2 @@
export{G as goto,H as prefetch,I as prefetchRoutes,J as start}from"./navigation-92e499c1.js";
//# sourceMappingURL=entry-5717511c.js.map

1
build/_app/entry-5717511c.js.map
Unescape Escape View File

@ -0,0 +1 @@
{"version":3,"file":"entry-5717511c.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

2
build/_app/index-899307f0.js
View File

File diff suppressed because one or more lines are too long

1
build/_app/index-899307f0.js.map
View File

File diff suppressed because one or more lines are too long

4
build/_app/index-dbc182e1.css
Unescape Escape View File

@ -0,0 +1,4 @@
#main-footer.svelte-12uobvg{border-top:1px solid lightgrey;margin:3rem auto 0;font-size:85%}/*# sourceMappingURL=MainFooter.css.map */
#info-toggle.svelte-nu5fg0.svelte-nu5fg0.svelte-nu5fg0{display:none}#info-toggle.svelte-nu5fg0~label.svelte-nu5fg0.svelte-nu5fg0{text-align:center}#info-toggle.svelte-nu5fg0~label.svelte-nu5fg0>.info-close.svelte-nu5fg0{display:none}#info-toggle.svelte-nu5fg0:checked~label.svelte-nu5fg0>.info-close.svelte-nu5fg0{display:inline}#info-toggle.svelte-nu5fg0:checked~label.svelte-nu5fg0>.info-text.svelte-nu5fg0{display:none}#info-popup.svelte-nu5fg0.svelte-nu5fg0.svelte-nu5fg0{display:none;position:absolute;top:2.5em;left:-1em;width:calc(720px - 2em - 6px);max-width:calc(100vw - 2em - 6px);padding:0 1em;background:#FFF;border:3px solid #DDD}#info-toggle.svelte-nu5fg0:checked~#info-popup.svelte-nu5fg0.svelte-nu5fg0{display:block}@media(prefers-color-scheme: dark){#info-popup.svelte-nu5fg0.svelte-nu5fg0.svelte-nu5fg0{background:#000;border-color:#444}}/*# sourceMappingURL=InfoPopup.css.map */
.entry.svelte-4f3clh.svelte-4f3clh{display:flex;flex-flow:row nowrap;justify-content:space-between;padding:.5em .5em 0;height:2em;line-height:2em;font-size:1.3em}.entry.svelte-4f3clh>.url.svelte-4f3clh{flex:1 1 auto;width:60%;overflow:hidden;text-overflow:ellipsis}.entry.svelte-4f3clh>.size.svelte-4f3clh,.entry.svelte-4f3clh>.ratio.svelte-4f3clh{flex:0 0 auto;width:20%;text-align:right}.entry-size-bar.svelte-4f3clh.svelte-4f3clh,.entry-ratio-bar.svelte-4f3clh.svelte-4f3clh{height:0;margin-bottom:2px;border-bottom:2px solid}.entry-size-bar.highlighted.svelte-4f3clh.svelte-4f3clh,.entry-ratio-bar.highlighted.svelte-4f3clh.svelte-4f3clh{border-bottom-width:4px}.entry-size-bar.svelte-4f3clh.svelte-4f3clh{border-bottom-color:#966;width:calc(var(--size)/250 * 100%)}.entry-ratio-bar.svelte-4f3clh.svelte-4f3clh{border-bottom-color:#669;width:var(--ratio)}/*# sourceMappingURL=PageList.css.map */
/*# sourceMappingURL=index-dbc182e1.css.map */

1
build/_app/index-dbc182e1.css.map
Unescape Escape View File

@ -0,0 +1 @@
{"version":3,"file":"index-dbc182e1.css","sources":["","",""],"sourcesContent":["","",""],"names":[],"mappings":";;"}

2
build/_app/inject_styles-cd877ae9.js
Unescape Escape View File

@ -0,0 +1,2 @@
function e(e){return Promise.all(e.map((function(e){return new Promise((function(t,n){var r=new URL(e,import.meta.url),l=document.baseURI;if(!l){var o=document.getElementsByTagName("base");l=o.length?o[0].href:document.URL}var u=(""+r).substring(l.length),a=document.querySelector('link[rel=stylesheet][href="'+u+'"]')||document.querySelector('link[rel=stylesheet][href="'+r+'"]');a||((a=document.createElement("link")).rel="stylesheet",a.href=r,document.head.appendChild(a)),a.sheet?t():(a.onload=function(){return t()},a.onerror=n)}))})))}export default e;
//# sourceMappingURL=inject_styles-cd877ae9.js.map

1
build/_app/inject_styles-cd877ae9.js.map
Unescape Escape View File

@ -0,0 +1 @@
{"version":3,"file":"inject_styles-cd877ae9.js","sources":["../../../../inject_styles.js"],"sourcesContent":["export default function(files) {\n\treturn Promise.all(files.map(function(file) { return new Promise(function(fulfil, reject) {\n\t\tvar href = new URL(file, import.meta.url);\n\t\tvar baseURI = document.baseURI;\n\t\tif (!baseURI) {\n\t\t\tvar baseTags = document.getElementsByTagName('base');\n\t\t\tbaseURI = baseTags.length ? baseTags[0].href : document.URL;\n\t\t}\n\t\tvar relative = ('' + href).substring(baseURI.length);\n\t\tvar link = document.querySelector('link[rel=stylesheet][href=\"' + relative + '\"]')\n\t\t\t|| document.querySelector('link[rel=stylesheet][href=\"' + href + '\"]');\n\t\tif (!link) {\n\t\t\tlink = document.createElement('link');\n\t\t\tlink.rel = 'stylesheet';\n\t\t\tlink.href = href;\n\t\t\tdocument.head.appendChild(link);\n\t\t}\n\t\tif (link.sheet) {\n\t\t\tfulfil();\n\t\t} else {\n\t\t\tlink.onload = function() { return fulfil() };\n\t\t\tlink.onerror = reject;\n\t\t}\n\t})}));\n};"],"names":["files","Promise","all","map","file","fulfil","reject","href","URL","import","meta","url","baseURI","document","baseTags","getElementsByTagName","length","relative","substring","link","querySelector","createElement","rel","head","appendChild","sheet","onload","onerror"],"mappings":"AAAe,WAASA,GACvB,OAAOC,QAAQC,IAAIF,EAAMG,KAAI,SAASC,GAAQ,OAAO,IAAIH,SAAQ,SAASI,EAAQC,GACjF,IAAIC,EAAO,IAAIC,IAAIJ,EAAMK,OAAOC,KAAKC,KACjCC,EAAUC,SAASD,QACvB,IAAKA,EAAS,CACb,IAAIE,EAAWD,SAASE,qBAAqB,QAC7CH,EAAUE,EAASE,OAASF,EAAS,GAAGP,KAAOM,SAASL,IAEzD,IAAIS,GAAY,GAAKV,GAAMW,UAAUN,EAAQI,QACzCG,EAAON,SAASO,cAAc,8BAAgCH,EAAW,OACzEJ,SAASO,cAAc,8BAAgCb,EAAO,MAC7DY,KACJA,EAAON,SAASQ,cAAc,SACzBC,IAAM,aACXH,EAAKZ,KAAOA,EACZM,SAASU,KAAKC,YAAYL,IAEvBA,EAAKM,MACRpB,KAEAc,EAAKO,OAAS,WAAa,OAAOrB,KAClCc,EAAKQ,QAAUrB"}

17
build/_app/navigation-92e499c1.js
View File

File diff suppressed because one or more lines are too long

1
build/_app/navigation-92e499c1.js.map
View File

File diff suppressed because one or more lines are too long

0
public/favicon.png → build/favicon.png
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 529 B

704
build/index.html
Unescape Escape View File

@ -0,0 +1,704 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The 250kb Club</title>
<meta name="description" content="An exclusive membership for web pages presenting themselves in no more than 250kb.">
<style>
body {
font: 16px/1.4 sans-serif;
margin: 0;
padding: 0;
background: white;
color: #333;
}
body>header,main,body>footer {
max-width: calc(720px - 2em);
width: calc(100% - 2em);
margin: 0 auto;
padding: 0 1em;
}
main {
margin: 3em auto;
}
h1 {
font-size: 2.2em;
line-height: 1.2;
letter-spacing: 6px;
text-align: center;
margin-top: 1.2em;
}
p {
text-align: justify;
}
a,a:visited {
color: currentColor;
text-decoration: underline;
}
select, label {
padding: .25em .5em;
border: 2px solid gray;
background: none;
color: currentColor;
font: inherit;
}
ol {
list-style: none;
padding: 0;
}
li {
margin-bottom: 1em;
background-color: #0002;
}
aside {
position: relative;
display: flex;
flex-flow: row break;
justify-content: space-between;
}
.hidden {
visibility: hidden;
}
@media (prefers-color-scheme: dark) {
body { background: #222; color: white; }
}
</style>
<link rel="modulepreload" href="/_app/entry-5717511c.js">
<link rel="modulepreload" href="/_app/navigation-92e499c1.js">
<link rel="modulepreload" href="/_app/index-899307f0.js">
<link rel="modulepreload" href="/_app/inject_styles-cd877ae9.js">
<link rel="stylesheet" href="/_app/index-dbc182e1.css">
<script type="module">
import { start } from '/_app/entry-5717511c.js';
start({
target: document.body
});
</script>
</head>
<body>
<header><h1>The 250kb Club</h1>
<p>The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content.
These things are a <strong>cancerous growth</strong> on the web and we should stand up against it.
</p>
<p>We can make a difference - no matter how small it may seem. The <em>250kb Club</em> is a collection of web pages that focus on performance, efficiency and accessibility.</p>
<p>If you&#39;d like to suggest a web page to add to this collection, open a ticket on
<a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
or
<a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
The site will be reviewed and, if applicable, added to the list below.
</p>
<p>If your pages exceeds 250kb, you might consider <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a> which is the inspiration for this page.</p></header>
<main id="members-table"><aside><div class="hidden">Sort by:
<select value="size"><option value="size">content-size</option><option value="ratio">content-ratio</option></select></div>
<input id="info-toggle" type="checkbox" class="svelte-nu5fg0">
<label for="info-toggle" class="svelte-nu5fg0"><span class="info-text svelte-nu5fg0">How does this work?</span>
<span class="info-close svelte-nu5fg0"> x  </span></label>
<article id="info-popup" class="svelte-nu5fg0"><header><h1>Technical Details</h1></header>
<p>The values shown in the list are URL, Total Weight, Content Ratio.
</p>
<p>Websites listed here are downloaded and analyzed with
<a href="https://github.com/macbre/phantomas" rel="noopener" target="_blank">Phantomas</a>.
The total weight is counted and then the size of actual content is measured
and shown as a ratio.
</p>
<p>For example: If a website has a total weight of 100kb and 60kb are the
documents structure, text, images, videos and so on, then the content ratio
is 60%. The rest are extras like CSS, JavaScript and so on. It is hard to
say what a good ratio is but my gut feeling is that everything above 20% is
pretty good already.
</p>
<p><strong>Disclaimer:</strong> Currently, inline scripts and styles are
measured as content due to technical limitations of Phantomas. This will
hopefully be fixed soon.
</p>
</article></aside>
<ol><li style="--size:1;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://cyberia.host" rel="noopener" target="_blank">cyberia.host</a></span>
<span class="size svelte-4f3clh">1kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:1;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jrballesteros05.codeberg.page/" rel="noopener" target="_blank">jrballesteros05.codeberg.page</a></span>
<span class="size svelte-4f3clh">1kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://sjmulder.nl" rel="noopener" target="_blank">sjmulder.nl</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:43%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://dotfilehub.com" rel="noopener" target="_blank">dotfilehub.com</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">43%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:2;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jeremysarber.com" rel="noopener" target="_blank">jeremysarber.com</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:52%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://kunalmarwaha.com/" rel="noopener" target="_blank">kunalmarwaha.com</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">52%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://oxenburypartners.com/" rel="noopener" target="_blank">oxenburypartners.com</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:69%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://uglyduck.ca" rel="noopener" target="_blank">uglyduck.ca</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">69%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:66%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://fraction.io/" rel="noopener" target="_blank">fraction.io</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">66%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:60%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jakob.kaivo.net/" rel="noopener" target="_blank">jakob.kaivo.net</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">60%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:59%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://karolis.koncevicius.lt/" rel="noopener" target="_blank">karolis.koncevicius.lt</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">59%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:2;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://bettermotherfuckingwebsite.com/" rel="noopener" target="_blank">bettermotherfuckingwebsite.com</a></span>
<span class="size svelte-4f3clh">2kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://text.npr.org" rel="noopener" target="_blank">text.npr.org</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://danluu.com" rel="noopener" target="_blank">danluu.com</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:44%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://seirdy.one" rel="noopener" target="_blank">seirdy.one</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">44%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://unix.lgbt/" rel="noopener" target="_blank">unix.lgbt</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:78%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://1mb.club/" rel="noopener" target="_blank">1mb.club</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">78%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://gerikson.com/" rel="noopener" target="_blank">gerikson.com</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:56%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://cetacean.club/" rel="noopener" target="_blank">cetacean.club</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">56%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://bestmotherfucking.website/" rel="noopener" target="_blank">bestmotherfucking.website</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:3;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://tom.kobalt.dev/map" rel="noopener" target="_blank">tom.kobalt.dev/map</a></span>
<span class="size svelte-4f3clh">3kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:4;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://minid.net" rel="noopener" target="_blank">minid.net</a></span>
<span class="size svelte-4f3clh">4kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:4;--ratio:54%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://richj.co" rel="noopener" target="_blank">richj.co</a></span>
<span class="size svelte-4f3clh">4kb</span>
<span class="ratio svelte-4f3clh">54%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:4;--ratio:51%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lawzava.com" rel="noopener" target="_blank">lawzava.com</a></span>
<span class="size svelte-4f3clh">4kb</span>
<span class="ratio svelte-4f3clh">51%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:4;--ratio:56%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://plumebio.com" rel="noopener" target="_blank">plumebio.com</a></span>
<span class="size svelte-4f3clh">4kb</span>
<span class="ratio svelte-4f3clh">56%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:5;--ratio:43%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://gtf.io" rel="noopener" target="_blank">gtf.io</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">43%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:5;--ratio:74%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jlelse.blog/" rel="noopener" target="_blank">jlelse.blog</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">74%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:5;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://motherfuckingwebsite.com/" rel="noopener" target="_blank">motherfuckingwebsite.com</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:5;--ratio:41%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://susam.in" rel="noopener" target="_blank">susam.in</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">41%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:5;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lukeramsden.com" rel="noopener" target="_blank">lukeramsden.com</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:5;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://motherfuckingwebsite.com/" rel="noopener" target="_blank">motherfuckingwebsite.com</a></span>
<span class="size svelte-4f3clh">5kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:6;--ratio:53%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://mataroa.blog" rel="noopener" target="_blank">mataroa.blog</a></span>
<span class="size svelte-4f3clh">6kb</span>
<span class="ratio svelte-4f3clh">53%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:6;--ratio:51%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://bernsteinbear.com/" rel="noopener" target="_blank">bernsteinbear.com</a></span>
<span class="size svelte-4f3clh">6kb</span>
<span class="ratio svelte-4f3clh">51%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:7;--ratio:54%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://bridge.simplefin.org" rel="noopener" target="_blank">bridge.simplefin.org</a></span>
<span class="size svelte-4f3clh">7kb</span>
<span class="ratio svelte-4f3clh">54%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:7;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://legiblenews.com" rel="noopener" target="_blank">legiblenews.com</a></span>
<span class="size svelte-4f3clh">7kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:7;--ratio:76%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://kerkour.fr/" rel="noopener" target="_blank">kerkour.fr</a></span>
<span class="size svelte-4f3clh">7kb</span>
<span class="ratio svelte-4f3clh">76%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:8;--ratio:84%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://manpages.bsd.lv" rel="noopener" target="_blank">manpages.bsd.lv</a></span>
<span class="size svelte-4f3clh">8kb</span>
<span class="ratio svelte-4f3clh">84%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:8;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://zupzup.org/" rel="noopener" target="_blank">zupzup.org</a></span>
<span class="size svelte-4f3clh">8kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:10;--ratio:17%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://250kb.club" rel="noopener" target="_blank">250kb.club</a></span>
<span class="size svelte-4f3clh">10kb</span>
<span class="ratio svelte-4f3clh">17%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:10;--ratio:63%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lambdapapers.com" rel="noopener" target="_blank">lambdapapers.com</a></span>
<span class="size svelte-4f3clh">10kb</span>
<span class="ratio svelte-4f3clh">63%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:11;--ratio:63%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://news.ycombinator.com" rel="noopener" target="_blank">news.ycombinator.com</a></span>
<span class="size svelte-4f3clh">11kb</span>
<span class="ratio svelte-4f3clh">63%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:13;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://freesolitaire.win/" rel="noopener" target="_blank">freesolitaire.win</a></span>
<span class="size svelte-4f3clh">13kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:13;--ratio:42%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.unindented.org/" rel="noopener" target="_blank">www.unindented.org</a></span>
<span class="size svelte-4f3clh">13kb</span>
<span class="ratio svelte-4f3clh">42%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:14;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://h3liu.ml/" rel="noopener" target="_blank">h3liu.ml</a></span>
<span class="size svelte-4f3clh">14kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:15;--ratio:87%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://concise-encoding.org/" rel="noopener" target="_blank">concise-encoding.org</a></span>
<span class="size svelte-4f3clh">15kb</span>
<span class="ratio svelte-4f3clh">87%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:17;--ratio:78%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://humaidq.ae/" rel="noopener" target="_blank">humaidq.ae</a></span>
<span class="size svelte-4f3clh">17kb</span>
<span class="ratio svelte-4f3clh">78%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:19;--ratio:14%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jvanelian.dev" rel="noopener" target="_blank">jvanelian.dev</a></span>
<span class="size svelte-4f3clh">19kb</span>
<span class="ratio svelte-4f3clh">14%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:19;--ratio:20%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://guts.plus/" rel="noopener" target="_blank">guts.plus</a></span>
<span class="size svelte-4f3clh">19kb</span>
<span class="ratio svelte-4f3clh">20%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:22;--ratio:82%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://alexschroeder.ch/" rel="noopener" target="_blank">alexschroeder.ch</a></span>
<span class="size svelte-4f3clh">22kb</span>
<span class="ratio svelte-4f3clh">82%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:24;--ratio:20%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://koehr.tech" rel="noopener" target="_blank">koehr.tech</a></span>
<span class="size svelte-4f3clh">24kb</span>
<span class="ratio svelte-4f3clh">20%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:27;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://blog.fefe.de" rel="noopener" target="_blank">blog.fefe.de</a></span>
<span class="size svelte-4f3clh">27kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:28;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://fullstackpython.com" rel="noopener" target="_blank">fullstackpython.com</a></span>
<span class="size svelte-4f3clh">28kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:28;--ratio:7%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://n.2p5.xyz/" rel="noopener" target="_blank">n.2p5.xyz</a></span>
<span class="size svelte-4f3clh">28kb</span>
<span class="ratio svelte-4f3clh">7%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:28;--ratio:5%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.dustri.org" rel="noopener" target="_blank">www.dustri.org</a></span>
<span class="size svelte-4f3clh">28kb</span>
<span class="ratio svelte-4f3clh">5%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:30;--ratio:19%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://sr.ht/" rel="noopener" target="_blank">sr.ht</a></span>
<span class="size svelte-4f3clh">30kb</span>
<span class="ratio svelte-4f3clh">19%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:30;--ratio:89%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://gerikson.com/hnlo/" rel="noopener" target="_blank">gerikson.com/hnlo</a></span>
<span class="size svelte-4f3clh">30kb</span>
<span class="ratio svelte-4f3clh">89%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:31;--ratio:3%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://usrme.xyz/" rel="noopener" target="_blank">usrme.xyz</a></span>
<span class="size svelte-4f3clh">31kb</span>
<span class="ratio svelte-4f3clh">3%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:35;--ratio:67%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lobste.rs/" rel="noopener" target="_blank">lobste.rs</a></span>
<span class="size svelte-4f3clh">35kb</span>
<span class="ratio svelte-4f3clh">67%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:39;--ratio:87%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://www.p01.org/" rel="noopener" target="_blank">www.p01.org</a></span>
<span class="size svelte-4f3clh">39kb</span>
<span class="ratio svelte-4f3clh">87%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:40;--ratio:21%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://processwire.dev/" rel="noopener" target="_blank">processwire.dev</a></span>
<span class="size svelte-4f3clh">40kb</span>
<span class="ratio svelte-4f3clh">21%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:41;--ratio:97%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://flatpackapps.com" rel="noopener" target="_blank">flatpackapps.com</a></span>
<span class="size svelte-4f3clh">41kb</span>
<span class="ratio svelte-4f3clh">97%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:42;--ratio:7%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://worldti.me" rel="noopener" target="_blank">worldti.me</a></span>
<span class="size svelte-4f3clh">42kb</span>
<span class="ratio svelte-4f3clh">7%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:44;--ratio:4%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://playerone.kevincox.ca" rel="noopener" target="_blank">playerone.kevincox.ca</a></span>
<span class="size svelte-4f3clh">44kb</span>
<span class="ratio svelte-4f3clh">4%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:44;--ratio:22%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://webperf.xyz" rel="noopener" target="_blank">webperf.xyz</a></span>
<span class="size svelte-4f3clh">44kb</span>
<span class="ratio svelte-4f3clh">22%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:45;--ratio:16%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://berkshirehathaway.com" rel="noopener" target="_blank">berkshirehathaway.com</a></span>
<span class="size svelte-4f3clh">45kb</span>
<span class="ratio svelte-4f3clh">16%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:49;--ratio:21%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.rowlingindex.org/" rel="noopener" target="_blank">www.rowlingindex.org</a></span>
<span class="size svelte-4f3clh">49kb</span>
<span class="ratio svelte-4f3clh">21%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:52;--ratio:4%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lucianmarin.com/" rel="noopener" target="_blank">lucianmarin.com</a></span>
<span class="size svelte-4f3clh">52kb</span>
<span class="ratio svelte-4f3clh">4%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:54;--ratio:96%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://fanael.github.io/" rel="noopener" target="_blank">fanael.github.io</a></span>
<span class="size svelte-4f3clh">54kb</span>
<span class="ratio svelte-4f3clh">96%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:56;--ratio:17%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://leonardschuetz.ch/" rel="noopener" target="_blank">leonardschuetz.ch</a></span>
<span class="size svelte-4f3clh">56kb</span>
<span class="ratio svelte-4f3clh">17%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:57;--ratio:55%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://denv.it/blog/" rel="noopener" target="_blank">denv.it/blog</a></span>
<span class="size svelte-4f3clh">57kb</span>
<span class="ratio svelte-4f3clh">55%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:58;--ratio:11%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://subreply.com" rel="noopener" target="_blank">subreply.com</a></span>
<span class="size svelte-4f3clh">58kb</span>
<span class="ratio svelte-4f3clh">11%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:59;--ratio:77%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.speedshop.co/" rel="noopener" target="_blank">www.speedshop.co</a></span>
<span class="size svelte-4f3clh">59kb</span>
<span class="ratio svelte-4f3clh">77%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:70;--ratio:65%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://ultimateelectronicsbook.com/" rel="noopener" target="_blank">ultimateelectronicsbook.com</a></span>
<span class="size svelte-4f3clh">70kb</span>
<span class="ratio svelte-4f3clh">65%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:70;--ratio:61%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://dpldocs.info/this-week-in-d/Blog.html" rel="noopener" target="_blank">dpldocs.info/this-week-in-d/Blog.html</a></span>
<span class="size svelte-4f3clh">70kb</span>
<span class="ratio svelte-4f3clh">61%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:74;--ratio:7%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://lite.cnn.com" rel="noopener" target="_blank">lite.cnn.com</a></span>
<span class="size svelte-4f3clh">74kb</span>
<span class="ratio svelte-4f3clh">7%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:78;--ratio:6%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://nomasters.io/" rel="noopener" target="_blank">nomasters.io</a></span>
<span class="size svelte-4f3clh">78kb</span>
<span class="ratio svelte-4f3clh">6%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:78;--ratio:85%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://stratus3d.com/" rel="noopener" target="_blank">stratus3d.com</a></span>
<span class="size svelte-4f3clh">78kb</span>
<span class="ratio svelte-4f3clh">85%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:80;--ratio:91%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://mkws.sh/" rel="noopener" target="_blank">mkws.sh</a></span>
<span class="size svelte-4f3clh">80kb</span>
<span class="ratio svelte-4f3clh">91%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:80;--ratio:2%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://mylight.website/" rel="noopener" target="_blank">mylight.website</a></span>
<span class="size svelte-4f3clh">80kb</span>
<span class="ratio svelte-4f3clh">2%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:87;--ratio:97%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://sourcehut.org/" rel="noopener" target="_blank">sourcehut.org</a></span>
<span class="size svelte-4f3clh">87kb</span>
<span class="ratio svelte-4f3clh">97%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:88;--ratio:26%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://koehr.in" rel="noopener" target="_blank">koehr.in</a></span>
<span class="size svelte-4f3clh">88kb</span>
<span class="ratio svelte-4f3clh">26%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:88;--ratio:5%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://monokai.nl" rel="noopener" target="_blank">monokai.nl</a></span>
<span class="size svelte-4f3clh">88kb</span>
<span class="ratio svelte-4f3clh">5%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:88;--ratio:9%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://cronokirby.com" rel="noopener" target="_blank">cronokirby.com</a></span>
<span class="size svelte-4f3clh">88kb</span>
<span class="ratio svelte-4f3clh">9%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:90;--ratio:98%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://porkbrain.com" rel="noopener" target="_blank">porkbrain.com</a></span>
<span class="size svelte-4f3clh">90kb</span>
<span class="ratio svelte-4f3clh">98%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:91;--ratio:23%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jaime.gomezobregon.com" rel="noopener" target="_blank">jaime.gomezobregon.com</a></span>
<span class="size svelte-4f3clh">91kb</span>
<span class="ratio svelte-4f3clh">23%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:93;--ratio:37%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://1.klose.berlin/" rel="noopener" target="_blank">1.klose.berlin</a></span>
<span class="size svelte-4f3clh">93kb</span>
<span class="ratio svelte-4f3clh">37%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:97;--ratio:37%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://xubuntu.org/" rel="noopener" target="_blank">xubuntu.org</a></span>
<span class="size svelte-4f3clh">97kb</span>
<span class="ratio svelte-4f3clh">37%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:98;--ratio:99%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://head-on-a-stick.github.io/" rel="noopener" target="_blank">head-on-a-stick.github.io</a></span>
<span class="size svelte-4f3clh">98kb</span>
<span class="ratio svelte-4f3clh">99%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:105;--ratio:93%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://phreedom.club/" rel="noopener" target="_blank">phreedom.club</a></span>
<span class="size svelte-4f3clh">105kb</span>
<span class="ratio svelte-4f3clh">93%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:106;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="http://www.danielwasserlaufquicklinks.com/" rel="noopener" target="_blank">www.danielwasserlaufquicklinks.com</a></span>
<span class="size svelte-4f3clh">106kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:109;--ratio:53%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.tarsnap.com/" rel="noopener" target="_blank">www.tarsnap.com</a></span>
<span class="size svelte-4f3clh">109kb</span>
<span class="ratio svelte-4f3clh">53%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:111;--ratio:18%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://weboas.is/" rel="noopener" target="_blank">weboas.is</a></span>
<span class="size svelte-4f3clh">111kb</span>
<span class="ratio svelte-4f3clh">18%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:112;--ratio:34%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://thebestmotherfucking.website/" rel="noopener" target="_blank">thebestmotherfucking.website</a></span>
<span class="size svelte-4f3clh">112kb</span>
<span class="ratio svelte-4f3clh">34%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:113;--ratio:95%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://benovermyer.com/" rel="noopener" target="_blank">benovermyer.com</a></span>
<span class="size svelte-4f3clh">113kb</span>
<span class="ratio svelte-4f3clh">95%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:131;--ratio:6%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.cleanpython.com/" rel="noopener" target="_blank">www.cleanpython.com</a></span>
<span class="size svelte-4f3clh">131kb</span>
<span class="ratio svelte-4f3clh">6%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:132;--ratio:1%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://iain.in/" rel="noopener" target="_blank">iain.in</a></span>
<span class="size svelte-4f3clh">132kb</span>
<span class="ratio svelte-4f3clh">1%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:133;--ratio:98%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://john-doe.neocities.org" rel="noopener" target="_blank">john-doe.neocities.org</a></span>
<span class="size svelte-4f3clh">133kb</span>
<span class="ratio svelte-4f3clh">98%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:136;--ratio:73%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://codelayer.de" rel="noopener" target="_blank">codelayer.de</a></span>
<span class="size svelte-4f3clh">136kb</span>
<span class="ratio svelte-4f3clh">73%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:136;--ratio:92%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://salixos.org/" rel="noopener" target="_blank">salixos.org</a></span>
<span class="size svelte-4f3clh">136kb</span>
<span class="ratio svelte-4f3clh">92%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:139;--ratio:100%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://www.tuhs.org/" rel="noopener" target="_blank">www.tuhs.org</a></span>
<span class="size svelte-4f3clh">139kb</span>
<span class="ratio svelte-4f3clh">100%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:154;--ratio:1%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://matthall.codes/" rel="noopener" target="_blank">matthall.codes</a></span>
<span class="size svelte-4f3clh">154kb</span>
<span class="ratio svelte-4f3clh">1%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:155;--ratio:37%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://danielsada.tech/" rel="noopener" target="_blank">danielsada.tech</a></span>
<span class="size svelte-4f3clh">155kb</span>
<span class="ratio svelte-4f3clh">37%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:156;--ratio:8%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://craigslist.org/" rel="noopener" target="_blank">craigslist.org</a></span>
<span class="size svelte-4f3clh">156kb</span>
<span class="ratio svelte-4f3clh">8%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:160;--ratio:36%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://frontaid.io" rel="noopener" target="_blank">frontaid.io</a></span>
<span class="size svelte-4f3clh">160kb</span>
<span class="ratio svelte-4f3clh">36%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh red"></div>
</li><li style="--size:160;--ratio:4%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://blog.circuitsofimagination.com/" rel="noopener" target="_blank">blog.circuitsofimagination.com</a></span>
<span class="size svelte-4f3clh">160kb</span>
<span class="ratio svelte-4f3clh">4%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:173;--ratio:87%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://matthewstrom.com" rel="noopener" target="_blank">matthewstrom.com</a></span>
<span class="size svelte-4f3clh">173kb</span>
<span class="ratio svelte-4f3clh">87%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh yellow red"></div>
</li><li style="--size:176;--ratio:20%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://jmtd.net/" rel="noopener" target="_blank">jmtd.net</a></span>
<span class="size svelte-4f3clh">176kb</span>
<span class="ratio svelte-4f3clh">20%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:199;--ratio:8%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://pgjones.dev" rel="noopener" target="_blank">pgjones.dev</a></span>
<span class="size svelte-4f3clh">199kb</span>
<span class="ratio svelte-4f3clh">8%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:212;--ratio:1%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://ianmobbs.com" rel="noopener" target="_blank">ianmobbs.com</a></span>
<span class="size svelte-4f3clh">212kb</span>
<span class="ratio svelte-4f3clh">1%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted yellow"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:219;--ratio:1%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://ihaque.org/" rel="noopener" target="_blank">ihaque.org</a></span>
<span class="size svelte-4f3clh">219kb</span>
<span class="ratio svelte-4f3clh">1%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted yellow"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li><li style="--size:227;--ratio:1%"><div class="entry svelte-4f3clh"><span class="url svelte-4f3clh"><a href="https://nicetranslator.com/" rel="noopener" target="_blank">nicetranslator.com</a></span>
<span class="size svelte-4f3clh">227kb</span>
<span class="ratio svelte-4f3clh">1%</span></div>
<div class="entry-size-bar svelte-4f3clh highlighted yellow red"></div>
<div class="entry-ratio-bar svelte-4f3clh"></div>
</li>
</ol></main>
<footer id="main-footer" class="svelte-12uobvg"><p>Made with ♥ for a performant web by <a href="https://koehr.in" rel="noopener" target="_blank">Norman Köhring</a>.
Inspired by <a href="https://uglyduck.ca" rel="noopener" target="_blank">Bradley Taunt</a>s <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a>
<br>
The code of this page is open source. You can find it on <a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
and <a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
</p>
</footer>
<script>
__SVELTE__ = {
baseUrl: "",
status: 200,
error: null,
preloaded: [{},{}],
session: void 0
};
</script>
</body>
<!--script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script-->
</html>

3
build/robots.txt
Unescape Escape View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
package.json
Unescape Escape View File

@ -1,27 +1,15 @@
{
"name": "250kb-club",
"version": "0.1.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"update-pages": "node ./scripts/refresh-pages.js"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^14.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"chalk": "^4.1.0",
"phantomas": "^2.0.0",
"rollup": "^2.3.4",
"rollup-plugin-app-utils": "^1.0.6",
"rollup-plugin-hash": "^1.3.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0"
},
"dependencies": {
"sirv-cli": "^1.0.0"
}
"name": "the-250kb-club",
"version": "0.0.1",
"scripts": {
"dev": "svelte dev",
"build": "svelte build"
},
"devDependencies": {
"@sveltejs/adapter-node": "0.0.14",
"@sveltejs/adapter-static": "^0.0.14",
"@sveltejs/kit": "0.0.25",
"@sveltejs/snowpack-config": "0.0.5",
"svelte": "^3.29.0"
}
}

2
public/build/bundle.js
View File

File diff suppressed because one or more lines are too long

1
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

111
public/global.css
Unescape Escape View File

@ -1,111 +0,0 @@
body {
font: 16px/1.4 sans-serif;
margin: 0;
padding: 0;
background: white;
color: #333;
}
h1 {
font-size: 2.2em;
line-height: 1.2;
letter-spacing: 6px;
text-align: center;
margin-top: 1.2em;
}
p {
text-align: justify;
}
body>header,main,body>footer {
max-width: calc(720px - 2em);
width: calc(100% - 2em);
margin: 0 auto;
padding: 0 1em;
}
main {
margin: 3em auto;
}
a,a:visited {
color: currentColor;
text-decoration: underline;
}
select, button {
padding: .25em .5em;
border: 2px solid gray;
background: none;
color: currentColor;
font: inherit;
}
footer {
border-top: 1px solid lightgrey;
margin: 3rem auto 0;
font-size: 85%;
}
ol {
list-style: none;
padding: 0;
}
li {
margin-bottom: 1em;
background-color: #0002;
}
.entry {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding: .5em .5em 0;
height: 2em;
line-height: 2em;
font-size: 1.3em;
}
.entry > .url {
flex: 1 1 auto;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
}
.entry > .size, .entry > .ratio {
flex: 0 0 auto;
width: 20%;
text-align: right;
}
.entry-size-bar, .entry-ratio-bar {
height: 0;
margin-bottom: 2px;
border-bottom: 2px solid;
}
.entry-size-bar.highlighted, .entry-ratio-bar.highlighted {
border-bottom-width: 4px;
}
.entry-size-bar {
border-bottom-color: #966;
width: calc(var(--size)/250 * 100%);
}
.entry-ratio-bar {
border-bottom-color: #669;
width: var(--ratio);
}
aside {
display: flex;
flex-flow: row break;
justify-content: space-between;
}
@media (prefers-color-scheme: dark) {
body { background: #222; color: white; }
}
@media (max-width: 420px) {
}

42
public/index.html
Unescape Escape View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 250kb Club</title>
<meta name="description" content="An exclusive membership for web pages presenting themselves in no more than 250kb.">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel='stylesheet' href='/global.css?1606390844915'>
<script defer src='/build/bundle.js?1606390844915'></script>
</head>
<body>
<header>
<h1>The 250kb&nbsp;Club</h1>
<p>
The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content.
These things are a <strong>cancerous growth</strong> on the web and we should stand up against it.
</p>
<p>We can make a difference - no matter how small it may seem. The <em>250kb Club</em> is a collection of web pages that focus on performance, efficiency and accessibility.</p>
<p>
If you'd like to suggest a web page to add to this collection, open a ticket on
<a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
or
<a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
The site will be reviewed and, if applicable, added to the list below.
</p>
<p>If your pages exceeds 250kb, you might consider <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a> which is the inspiration for this page.</p>
</header>
<main id="members-table">
</main>
<footer>
<p>
Made with &hearts; for a performant web by <a href="https://koehr.in" rel="noopener" target="_blank">Norman Köhring</a>.
Inspired by <a href="https://uglyduck.ca" rel="noopener" target="_blank">Bradley Taunt</a>s <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a>
<br/>
The code of this page is open source. You can find it on <a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
and <a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
</p>
</footer>
<script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>

92
rollup.config.js
Unescape Escape View File

@ -1,92 +0,0 @@
import svelte from 'rollup-plugin-svelte'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import { emptyDirectories, htmlInjector } from 'rollup-plugin-app-utils'
const isProduction = !process.env.ROLLUP_WATCH
const timeStamp = Date.now()
function serve() {
let server
function toExit() {
if (server) server.kill(0)
}
return {
writeBundle() {
if (server) return
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
})
process.on('SIGTERM', toExit)
process.on('exit', toExit)
}
}
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
emptyDirectories('./public/build/'),
svelte({
// enable run-time checks when not in production
dev: !isProduction,
// we'll extract any component CSS out into
// a separate file - better for performance
// css: css => {
// css.write('bundle.css')
//}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
htmlInjector({
template: './src/template.html',
target: './public/index.html',
injects: { timeStamp },
}),
json({
exclude: ['node_modules/**'],
preferConst: true,
compact: true,
namedExports: false
}),
// In dev mode, call `npm run start` once
// the bundle has been generated
!isProduction && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!isProduction && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
isProduction && terser()
],
watch: {
clearScreen: false
}
}

4
snowpack.config.js
Unescape Escape View File

@ -0,0 +1,4 @@
// Consult https://www.snowpack.dev to learn about these options
module.exports = {
extends: '@sveltejs/snowpack-config'
};

74
src/app.html
Unescape Escape View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The 250kb Club</title>
<meta name="description" content="An exclusive membership for web pages presenting themselves in no more than 250kb.">
<style>
body {
font: 16px/1.4 sans-serif;
margin: 0;
padding: 0;
background: white;
color: #333;
}
body>header,main,body>footer {
max-width: calc(720px - 2em);
width: calc(100% - 2em);
margin: 0 auto;
padding: 0 1em;
}
main {
margin: 3em auto;
}
h1 {
font-size: 2.2em;
line-height: 1.2;
letter-spacing: 6px;
text-align: center;
margin-top: 1.2em;
}
p {
text-align: justify;
}
a,a:visited {
color: currentColor;
text-decoration: underline;
}
select, label {
padding: .25em .5em;
border: 2px solid gray;
background: none;
color: currentColor;
font: inherit;
}
ol {
list-style: none;
padding: 0;
}
li {
margin-bottom: 1em;
background-color: #0002;
}
aside {
position: relative;
display: flex;
flex-flow: row break;
justify-content: space-between;
}
.hidden {
visibility: hidden;
}
@media (prefers-color-scheme: dark) {
body { background: #222; color: white; }
}
</style>
%svelte.head%
</head>
<body>
%svelte.body%
</body>
<!--script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script-->
</html>

31
src/InfoPopup.svelte → src/components/InfoPopup.svelte
Unescape Escape View File

@ -2,6 +2,12 @@
import Link from './Link.svelte'
</script>
<input id="info-toggle" type="checkbox" />
<label for="info-toggle">
<span class="info-text">How does this work?</span>
<span class="info-close"> &nbsp;x&nbsp; </span>
</label>
<article id="info-popup">
<header>
<h1>Technical Details</h1>
@ -28,3 +34,28 @@
hopefully be fixed soon.
</p>
</article>
<style>
#info-toggle { display: none; }
#info-toggle ~ label { text-align: center; }
#info-toggle ~ label > .info-close { display: none; }
#info-toggle:checked ~ label > .info-close { display: inline; }
#info-toggle:checked ~ label > .info-text { display: none; }
#info-popup {
display: none;
position: absolute;
top: 2.5em;
left: -1em;
width: calc(720px - 2em - 6px);
max-width: calc(100vw - 2em - 6px);
padding: 0 1em;
background: #FFF;
border: 3px solid #DDD;
}
#info-toggle:checked ~ #info-popup { display: block; }
@media (prefers-color-scheme: dark) {
#info-popup { background: #000; border-color: #444; }
}
</style>

0
src/Link.svelte → src/components/Link.svelte
Unescape Escape View File

21
src/components/MainFooter.svelte
Unescape Escape View File

@ -0,0 +1,21 @@
<script>
import Link from '$components/Link.svelte'
</script>
<footer id="main-footer">
<p>
Made with &hearts; for a performant web by <Link href="https://koehr.in">Norman Köhring</Link>.
Inspired by <Link href="https://uglyduck.ca">Bradley Taunt</Link>s <Link href="https://1MB.club">1MB.club</Link>
<br/>
The code of this page is open source. You can find it on <Link href="https://github.com/nkoehring/250kb-club">Github</Link>
and <Link href="https://sr.ht/~koehr/the-250kb-club/">Sourcehut</Link>.
</p>
</footer>
<style>
#main-footer {
border-top: 1px solid lightgrey;
margin: 3rem auto 0;
font-size: 85%;
}
</style>

20
src/components/MainHeader.svelte
Unescape Escape View File

@ -0,0 +1,20 @@
<script>
import Link from '$components/Link.svelte'
</script>
<header>
<h1>The 250kb&nbsp;Club</h1>
<p>
The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content.
These things are a <strong>cancerous growth</strong> on the web and we should stand up against it.
</p>
<p>We can make a difference - no matter how small it may seem. The <em>250kb Club</em> is a collection of web pages that focus on performance, efficiency and accessibility.</p>
<p>
If you'd like to suggest a web page to add to this collection, open a ticket on
<Link href="https://github.com/nkoehring/250kb-club">Github</Link>
or
<Link href="https://sr.ht/~koehr/the-250kb-club/">Sourcehut</Link>.
The site will be reviewed and, if applicable, added to the list below.
</p>
<p>If your pages exceeds 250kb, you might consider <Link href="https://1MB.club">1MB.club</Link> which is the inspiration for this page.</p>
</header>

77
src/App.svelte → src/components/PageList.svelte
Unescape Escape View File

@ -1,17 +1,15 @@
<script>
import InfoPopup from './InfoPopup.svelte'
import Link from './Link.svelte'
import data from './pages.json'
import Link from '$components/Link.svelte'
import pageData from '$components/pages.js'
export let sortParam
const rejectThreshold = 256000
const yellowSizeThreshhold = 200
const redSizeThreshhold = 225
const yellowRatioThreshhold = 50
const redSizeThreshhold = 225
const redRatioThreshhold = 25
const pages = data.reduce((acc, page) => {
const pages = pageData.reduce((acc, page) => {
const totalWeight = page.contentWeight + page.extraWeight
if (totalWeight > rejectThreshold) return acc
@ -22,37 +20,15 @@
return acc
}, [])
const sortParameters = ['size', 'ratio']
let sortParam = sortParameters[0]
let showInfoPopup = false
$: sortedPages = pages.sort((a, b) => {
return sortParam === 'size' ? a.size - b.size : b.ratio - a.ratio
})
function stripped (url) {
return url.replaceAll(/(^https?:\/\/|\/$)/g, '')
return url.replace(/(^https?:\/\/|\/$)/g, '')
}
function toggleInfo () { showInfoPopup = !showInfoPopup }
</script>
<aside>
<div>
Sort by:
<select bind:value={sortParam}>
{#each sortParameters as param}
<option value={param}>content-{param}</option>
{/each}
</select>
</div>
<button class="info-toggle" on:click={toggleInfo}>{showInfoPopup ? 'x' : 'How does this work?'}</button>
</aside>
{#if showInfoPopup}
<InfoPopup />
{/if}
<ol>
{#each sortedPages as page}
<li style={`--size:${page.size};--ratio:${page.ratio}%`}>
@ -76,3 +52,44 @@
</li>
{/each}
</ol>
<style>
.entry {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
padding: .5em .5em 0;
height: 2em;
line-height: 2em;
font-size: 1.3em;
}
.entry > .url {
flex: 1 1 auto;
width: 60%;
overflow: hidden;
text-overflow: ellipsis;
}
.entry > .size, .entry > .ratio {
flex: 0 0 auto;
width: 20%;
text-align: right;
}
.entry-size-bar, .entry-ratio-bar {
height: 0;
margin-bottom: 2px;
border-bottom: 2px solid;
}
.entry-size-bar.highlighted, .entry-ratio-bar.highlighted {
border-bottom-width: 4px;
}
.entry-size-bar {
border-bottom-color: #966;
width: calc(var(--size)/250 * 100%);
}
.entry-ratio-bar {
border-bottom-color: #669;
width: var(--ratio);
}
</style>

1
src/components/pages.js
View File

File diff suppressed because one or more lines are too long

5
src/main.js
Unescape Escape View File

@ -1,5 +0,0 @@
import App from './App.svelte';
var app = new App({ target: document.getElementById('members-table') });
export default app;

39
src/routes/index.svelte
Unescape Escape View File

@ -0,0 +1,39 @@
<script>
import { onMount } from 'svelte'
import MainHeader from '$components/MainHeader.svelte'
import MainFooter from '$components/MainFooter.svelte'
import InfoPopup from '$components/InfoPopup.svelte'
import PageList from '$components/PageList.svelte'
const sortParameters = ['size', 'ratio']
let sortParam = sortParameters[0]
let showSortingOptions = false
onMount(() => {
// only shows sorting options when JS is enabled
console.log('mounted!')
showSortingOptions = true
})
</script>
<MainHeader />
<main id="members-table">
<aside>
<div class:hidden={!showSortingOptions}>
Sort by:
<select bind:value={sortParam}>
{#each sortParameters as param}
<option value={param}>content-{param}</option>
{/each}
</select>
</div>
<InfoPopup />
</aside>
<PageList {sortParam} />
</main>
<MainFooter />

42
src/template.html
Unescape Escape View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 250kb Club</title>
<meta name="description" content="An exclusive membership for web pages presenting themselves in no more than 250kb.">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel='stylesheet' href='/global.css?{timeStamp}'>
<script defer src='/build/bundle.js?{timeStamp}'></script>
</head>
<body>
<header>
<h1>The 250kb&nbsp;Club</h1>
<p>
The WWW has become a bloated mess. Many pages are loading megabytes of Javascript to show you a few kilobytes of content.
These things are a <strong>cancerous growth</strong> on the web and we should stand up against it.
</p>
<p>We can make a difference - no matter how small it may seem. The <em>250kb Club</em> is a collection of web pages that focus on performance, efficiency and accessibility.</p>
<p>
If you'd like to suggest a web page to add to this collection, open a ticket on
<a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
or
<a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
The site will be reviewed and, if applicable, added to the list below.
</p>
<p>If your pages exceeds 250kb, you might consider <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a> which is the inspiration for this page.</p>
</header>
<main id="members-table">
</main>
<footer>
<p>
Made with &hearts; for a performant web by <a href="https://koehr.in" rel="noopener" target="_blank">Norman Köhring</a>.
Inspired by <a href="https://uglyduck.ca" rel="noopener" target="_blank">Bradley Taunt</a>s <a href="https://1MB.club" rel="noopener" target="_blank">1MB.club</a>
<br/>
The code of this page is open source. You can find it on <a href="https://github.com/nkoehring/250kb-club" rel="noopener" target="_blank">Github</a>
and <a href="https://sr.ht/~koehr/the-250kb-club/" rel="noopener" target="_blank">Sourcehut</a>.
</p>
</footer>
<script data-goatcounter="https://250kb-club.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</body>
</html>

BIN
static/favicon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 B

3
static/robots.txt
Unescape Escape View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

6
svelte.config.js
Unescape Escape View File

@ -0,0 +1,6 @@
module.exports = {
// By default, `npm run build` will create a standard Node app.
// You can create optimized builds for different platforms by
// specifying a different adapter
adapter: '@sveltejs/adapter-static'
};

1537
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save