Theme for Blot, as used on my blog.
Home Page: https://paul.af
I hail from Minneapolis, MN. Land of road salt and a regional burger dubbed “Jucy Lucy.” 🍔
Currently import cuetip but could do better with how it's themed for the blog and likely dropping the use of the tails/triangles as the math for aligning them is finnicky across fonts and font sizes.
Starting with a customize request payload of:
{
"vars": {
"namespace": {
"value": "tooltip",
"type": "string"
},
"class-prefix": {
"value": "tooltip--",
"type": "string"
},
"no-tail": {
"value": "no-tail",
"type": "string"
},
"default-position": {
"value": "top",
"type": "string"
},
"has-tail": {
"value": "false",
"type": "boolean"
},
"cursor": {
"value": "inherit",
"type": "keyword"
},
"z-index": {
"value": "9999",
"type": "number"
},
"color-foreground": {
"value": "var(--bg)",
"type": "color"
},
"color-background": {
"value": "var(--accent)",
"type": "color"
},
"padding": {
"value": ".25em .4em",
"type": "units"
},
"border-radius": {
"value": "2px",
"type": "units"
},
"tail-size": {
"value": ".25em",
"type": "units"
},
"offset": {
"value": ".1em",
"type": "units"
}
}
}and then supplement with a few additional lines of CSS should be a good starting point I would think:
[data-tooltip] {
text-decoration: underline dotted;
}
abbr[data-tooltip] {
cursor: help;
}
[data-tooltip]:after {
font-size: 1em;
opacity: .9;
}There's a much larger conversation to be had w.r.t. a11y i.e., using aria-label (see Pinjasaur/cuetip#3). I'm not sure how much benefit I'm necessarily gaining over the builtin footnotes and attr[title] markup.
As per http://clagnut.com/blog/2395 update the lang attr on <html> and add the necessary CSS.
Would like a scripts/lint.sh to do some basic linting on posts. Things like spelling and grammar. Also, checking external links if that's not a huge PITA.
I think I can simply start with proselint and that'll do enough to start. Plus, I've wanted to try it out for a while, see: https://paul.af/fosdem-2021
I'd like to try out Nix for this as well, using the #! nix-shell shebang:
Using https://o9s.xyz/readtime as a reference, add the read-time to articles.
$(".entry").text().match(/[^\s]+/g).lengthSeems to work decently.
Shortcut breakdown:
Could store setting for shortcuts are enabled in localStorage, similar to the site theme.
Huge fan of the column-based layout: http://www.craftinginterpreters.com/local-variables.html
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.