bdsqqq / igorbedesqui.com

My personal website and glorified playground. Watch as I overengineer the shit out of this to learn new stuff and explore tech I find interesting.

Tailwind CSS example

This is an example of using Tailwind CSS in a Next.js project.

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

Notes

This example is a basic starting point for using Tailwind CSS with Next.js. It includes the following PostCSS plugins:

• postcss-preset-env - Adds stage 2+ features and autoprefixes

To control the generated stylesheet's filesize, this example uses Tailwind CSS' purge option to remove unused CSS.

igorbedesqui.com's Issues

A comment on Schrodinger's Minimalism

Hey, I came across this page of yours - https://bedes.qui.gg/writing/schrodinger-minimalism

What you talk about is interesting to me because I have thought on this topic for a while. Not that I have anything to show for it, but after thinking so long about it I've realized that this style of progressive disclosure has two issues, which I haven't found the fix for (yet). Since you're playing with such interactions, I thought I'll mention them to you:

1. Touch devices don't have a hover state.
2. It requires the reader to take an action.

---

I started thinking of it when I came across a page very similar to the last example that you give: it had a div with a sentence, and you can tap on the individual words to expand that word into another phrase, and this process can go on recursively. I was taken by that page.

I tried finding a link to it today, but for the life of me I can't remember where I saw it. Which is weird since I have thought so much about that page, I even sort of remember its pastel color scheme, and how each of the phrases, when they would expand, would get a slightly darker pastel color to indicate nesting. I remember all this, but not the URL. I think it was circa 2016 maybe, on the personal site of an person whose name I can't now remember.

So, of course, I tried to use that interaction. I ran into few problems.

Firstly, and this was when I was trying to use that interaction as an interface to a hypothetical Wikipedia, I realized that even though that sort of linking of concepts is the way we (or I) thought we think, it is not actually the way concepts work in our mind. Concepts in our mind don't seem to be a linked network in such a simplistic way, but rather they seem to have some sort of an "activation energy".

As in, to understand some topic, say the innovations of the Bauhaus art, I need to have enough "assimilated" understanding of a few surrounding concepts - just reading their linked definitions, while helpful, doesn't really give understanding the way say a linearly written article by someone who is an expert in this field and good at explaining their knowledge might provide.

This of course is a very general problem, not specific to this interaction. The entire concept of hyperlinking that drives the web relies on the linking of concepts. So linking itself is not necessarily bad, but at the same time it is also not necessarily better than a linear presentation.

But I'm ranting now, so let me stop with this problem. This is not what I wanted to highlight anyway.

The second problem I encountered was that mobile devices don't have a hover state. So while this interaction (and its variants, e.g. providing a small box with a short preview when hovering over a link) has potency on laptops, basing the entire interaction on it is maybe not the best idea because it devolves down to a normal link on touch screen.

I think this particular issue should be solvable (or maybe has already been solved, and I don't know of it). This is a narrower, technology / interaction, issue.

The third problem I encountered, and the main one I wanted to tell you about, was that such interactions change the relationship with the reader. With a book or a static page on a reading device, the reader can engage with the text passively. This is good. There are benefits of active interaction, but there are benefits of the passive interaction too, and passive interactions give the mind more space to roam more in its imagination.

With these expanding interactions, the reader now has to click on a word (or do some actively initiated action) to, say, expand a word or a section. I'm not saying this is a bad thing, what I'm saying this is no longer reading, and we lose out on a lot of benefits that plain old school reading gives us if we structure our presentation this way.

---

It is very likely that you've already thought of all these things. Also, this is not in any way a criticism, your presentation is great! (and the primary aim of your personal site is anyways not as a passive text to be read, its aim is to evoke a feeling which I think it does well).

Also, there can be progressive disclosures in a passive way too, as you yourself talk of, and employ, on your page (subdued fonts, the italics example you give, etc). They are maybe a great compromise.

I don't have a tl;dr;, and maybe I got carried away - apologies if this is too long for an unsolicited comment. Also, inspite of the problems I mention, I still think such interactions have great potential and continue thinking about them (here is a recent attempt I did - I'd started with each word expanding the linked quote but then it felt overwhelming on mobile screens so I just caused each quote to replace each other. Which isn't much I guess).

Cheers!

ps. I'll also close this issue, this isn't an issue!, it's just a quip on your post - here seemed like an easier place to post a longish comment than Twitter.