#dev 2024-06-27
2024-06-27 UTC
barnaby and [0x3b0b] joined the channel
# 
[morganm] capjamesg++
barnaby, bterry, sandra, GuestZero, Johan, ttybitnik and AramZS joined the channel
# 
[KevinMarks] I do like this https://x.com/AmelieBenoit33/status/1806287583372013651
# 
capjamesg[d] I love “simple things should be easy. Complex things should be possible.”
[naturestudy], barnabywalters, barnaby and [Jo] joined the channel
# 
[tantek] ah, looks like Alan Kay, https://www.goodreads.com/quotes/8636264-simple-things-should-be-simple-complex-things-should-be-possible — possibly 1980s/1990s
# capjamesg[d] Kay is fascinating.
barnaby and btrem joined the channel
# btrem What is the svg api? (Not asking you, Loqi.)
# 
Loqi It looks like we don't have a page for "svg api? (Not asking you, Loqi.)" yet. Would you like to create it? (Or just say "svg api? (Not asking you, Loqi.) is ____", a sentence describing the term)
# btrem :-D
# btrem And what makes the svg dom more complicated than the html dom? I suppose it's more complicated because it's an xml dom, so you sometimes have to use different dom methods to manipulate it. But I sort of think that's different than "this is more complicated than that."
# btrem Well I STFW and easily found https://developer.mozilla.org/en-US/docs/Web/API/SVG_API
# btrem I didn't know that methods to manipulate a dom was an api. But on reading some of the pages, I'm not sure that I have that right. The pages I've viewed so far have either unimplemented or deprecated methods. me/ shrugs Must be over my head.
# [Joe_Crawford] "API" sounds fancy but like ... `document.body.bgColor = 'pink'` is an "application programming interface" even though it's effectively just `<BODY BGCOLOR="pink">` ... that sounds like what this is.
ttybitnik and ttybitni` joined the channel
# [tantek] capjamesg[d], Kay IS fascinating, also one of the wiser folks I've encountered in my career (same him speak once). Lots more great quotes here that IMO particularly apply to indieweb development since a lot of his quotes help focus and spend time more wisely (a highly constrained resource for indieweb devs compared to say large company / silo orgs) https://en.wikiquote.org/wiki/Alan_Kay
[schmarty] joined the channel
# 
[schmarty] i mourn the gaps between today's DRM-and-malware-laden gatekept devices and Kay's dynabook 😞
GuestZero and barnaby joined the channel
# capjamesg[d] [tantek]++
# [tantek] capjamesg[d], you may appreciate this background I found re: "keep simple things simple" https://news.ycombinator.com/item?id=24463842
# Loqi [preview] [skmurphy] I was verifying the Alan Kay quote: “Simple things should be simple, complex things should be possible” and came across a Quora answer by him that provides a lot of useful context. See https://www.quora.com/What-is-the-story-behind-Alan-Kay-s-ad...
ttybitnik and [snarfed] joined the channel
# capjamesg[d] That is a great quote [tantek].
# capjamesg[d] This is a cool concept: "But we also wanted to write the entire system in itself, so that those who were curious — especially later on — could “pop any hood” in the system and see a live program/object written in exactly the same terms as what the children were learning."
# capjamesg[d] I am going to stash that idea in my mind for later.
# capjamesg[d] I love programming language design.
# [schmarty] [snarfed] i looked for my inevitable like in the mentions of that post before i checked the _date_ on the post. it has, unfortunately, aged just fine.
# [schmarty] capjamesg: you might enjoy playing with http://squeak.org sometime! i had a class that taught it back in ~2002 and while i was frustrated at times by syntax, the ability to inspect _EVERYTHING_ is really, really neat.
# [schmarty] in my defense it is a really good rabbit hole.
# capjamesg[d] [snarfed]++
# capjamesg[d] Great blog post.
# capjamesg[d] Are there any talks from Kay in particular that everyone likes?
# capjamesg[d] I have seen one or two videos of his on YouTube, and every time it is a delight.
# [schmarty] capjamesg: this one comes to mind but i don't remember if i actually _liked_ it or if i just felt like "hmm this seems important" 😂 https://archive.org/details/Dr._Alan_Kay_Doing_With_Images_Makes_Symbols_Communicating_With_Computers_1987
GuestZero and GuestZero_ joined the channel
# 
gRegor Interesting attempt to poison pill LLMs scraping text: https://ericwbailey.website/published/consent-llm-scrapers-and-poisoning-the-well/
# gRegor This other one is also funny, including directions to translate alternating sentences into French XD https://github.com/MattWilcox/native-base/commit/45f6e7a837104f5ad83a5c7e280fb9a4eb126219#diff-f6ca38281ff74f0aab1fadf12f97be367d8a2c51196cffddfcbbd580bc58510bR80
# capjamesg[d] [Joe_Crawford] How do I make text stretch in a container?
# capjamesg[d] I have this layout, but you can see the dates are slightly different sizes:
# capjamesg[d] I'm not sure what attribute I can use.
[aciccarello] joined the channel
# 
[aciccarello] Would that be text align justified?
# capjamesg[d] It doesn't seem to be doing anything.
# jimwins For purely numeric values, you have `font-variant-numeric: tabular-nums;`
# capjamesg[d] Each item in the list is a flex with two items: a date tag and an a tag.
# [aciccarello] Interesting, I would have thought that `text-align: justify` would work
# [aciccarello] Might need `justify-all`?
# capjamesg[d] Nope 😦
# jimwins Or maybe `text-align-last: justify;`.
# capjamesg[d] That works!
# [Joe_Crawford] I would do this with a minimum width of 12ch for that first element I think.
# [Joe_Crawford] capjamesg https://codepen.io/artlung/pen/KKLYYKR
# [Joe_Crawford] I like a `<dl><dt>date</dt><dt><a href="#">title</a></dt></dl>` for this for those times when there are multiple items with the same date.
# [Joe_Crawford] If you're looking to force those dates to stretch I think you need tags around each of the parts of the date then have the date itself be a flex container that stretches across.
# [Joe_Crawford] And capjamesg I added a variation with tags around the date parts to demonstrate stretching the text
# capjamesg[d] [Joe_Crawford] I am going to push my new site layout live soon!
# capjamesg[d] I'd love your opinions on my implementation.
# capjamesg[d] Actually! I have a staging site now!
# capjamesg[d] I would love any feedback!
# capjamesg[d] My CSS is all in one file.
# capjamesg[d] There may be a cache from some old styles. Try doing a hard refresh on https://staging.jamesg.blog/assets/styles/styles.css
# superkuh Shouldn't worry about it not being perfect in my ~2015 browser. I'm just happy the menu links and text and everything display. It's about the best you can hope for when modern CSS functions are used.
# capjamesg[d] Ah 😄
# capjamesg[d] Yes, I'm using flex and grid.
# [Joe_Crawford] It's looking pretty great. Your decision to hide (with no recourse) items inside the .hide-on-mobile class is not great for accessibility. Might consider whether to force those to display on a user action. A quibble with the markup is that technically inside an `<ul>` element only list items are allowed as direct children, (you have p and div elements) but it is HIGHLY readable and very clean. Much to like out of the gate. Nice work!
# [Joe_Crawford] oh, nice usage of text-align-last too
# capjamesg[d] Do you know of any good table styles?
# capjamesg[d] I haven't implemented those yet (ex: https://staging.jamesg.blog/2024/06/20/python-packages/)
# [Joe_Crawford] Having good markup in the tables you have is the start. On that page I note that the first row is not in a <thead> block. That'll make your job easier if you want to apply good styles later. In general, adequate spacing, spare usage of borders is nice.
# [Joe_Crawford] top aligned content generally for data tables and consistent spacing. and if you have numeric content make sure you have something to latch onto to make sure the numbers are aligned as in Excel (text-align: end).
# [Joe_Crawford] vertical-align: top is what I'd probably do in your `td
{ }`# jimwins (Now I'm fighting the urge the clean up the CSS for tables on my site. I have more improtant things to work on!)
# capjamesg[d] jimwins[d]++ for help on the date CSS.
# [Joe_Crawford] It can also be nice to do alternating rows of with some visual distinction if density is high `tbody tr:nth-child(even) td`
# capjamesg[d] [Joe_Crawford]++ for all of the feedback!
# [Joe_Crawford] striped tables are common but really the goal is clarity and readability. stripes are pretty but with adequate space they fall into "chartjunk"
# btrem Yes on what [Joe_Crawford] said, the first row should be inside `<thead>`. Also, I'd make the first column in each successive row a `<th>` element, since each of those elements is a header for that row.
# btrem And it provides convenient styling hooks (as one would expect) via `thead > tr > th` or `tbody > tr > th`.
# [Joe_Crawford] yeah, once you have a thead then you can do stuff like have a border-bottom on it, or even more distinct changes. with that also one can add a chunk of js that will get you sorting of tables very easily. It's far less JS than you might think it would be
# btrem Right, I do like to change e.g. background color of the thead, maybe invert color scheme or add light gray background oslt.
# [Joe_Crawford] e.g. https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript
ttybitnik joined the channel
# [Joe_Crawford] I was on metafilter and looking at the AskMe's and saw "how do I export my bluesky posts to csv" -- which somehow has no answers - https://ask.metafilter.com/380703/How-can-I-get-my-Bluesky-posts-into-a-CSV I looked in the app and there's export on the settings page. How hard could it be? Well, I downloaded the `repo.car` file which is my export. https://docs.bsky.app/blog/repo-export - I guess the intent is this is like a portable
# [Joe_Crawford] internally and universally consistent structure. What the heck tools are used to inspect one of these files? I see online tools "go ahead and upload your car file to our website to explore the Merkle tree" but then how do I know what's in this thing? Does it have data I consider sensitive (login data say?). I would love a local tool I can use to inspect it. Is there one?
# capjamesg[d] [Joe_Crawford] What would you recommend re: the .hide-on-mobile class?
# capjamesg[d] I don't want the navigation bar to be too busy on mobile.
# capjamesg[d] I wanted to distill it down to a few pages.
# [Joe_Crawford] A "show on mobile" corresponding element that on click toggles it. Could be as subtle as a `[+]`
# [Joe_Crawford] Another more elaborate way to consider would be to make it `position: fixed; display: block; bottom: 0; left:0;width: 100%;height:var(--extra); border-top: 1px dotted` and add `body
{ padding-bottom: var(--extra) }` on mobile. Plop it at the end of the page.# [Joe_Crawford] with some height set for `:root
{ --extra: 300px; }`# [Joe_Crawford] ...or somesuch. That's untested. `fixed` might put overlay it. maybe it's absolute. Have to play with it.
# [Joe_Crawford] My first idea of the `[+]` is better lol
# capjamesg[d] (You may need to clear your cache}
# [Joe_Crawford] I think that's great. Exactly what I was thinking.
# [snarfed] [Joe_Crawford] CAR files are https://ipld.io/ , the data format underlying IPFS
# [snarfed] useful! ...but not for the faint of heart. their API gives you normal JSON which may be easier to work with. https://docs.bsky.app/docs/tutorials/viewing-feeds#author-feeds
# [snarfed] https://granary.io/ supports Bluesky too!
# [Joe_Crawford] So an arbitrary user who downloads an export, the way to interact with that car file is what - to upload it to another service to start a new account? I see libraries but nothing like a "viewer" - or none that I recognize as a viewer program.
# [Joe_Crawford] unless your bluesky was set to private, presumably, which I believe is possible
# [Joe_Crawford] gotcha