101–110 of 333 posts
I am working on two alternative tools for building web apps: https://htmx.org - uses HTML attributes and HTML-over-the-wire for AJAX/Web Socket/SSE interactions https://hyperscript.org - an experimental front end programming language derived from HyperTalk that is event-oriented and that removes the distinction between synchronous and asynchronous code. Both tools are HTML-oriented and are designed to be embedded dir…
- tailwindcss I moved a React side-project from CRA to Next.js for server-side rendering benefits, but the latter doesn't support directly importing css styles in jsx to avoid problems with the global scope. The two options offered were CSS modules and CSS-in-JS. I didn't like either approaches having hashes in the classname when opening the website in devtools, and both seemed too locked into React/JSX. Tailwind 1.…
I really don't get the appeal of tailwindcss, and I feel like I must be missing some obvious benefit of using it vs something like bootstrap. But at first glance, it just looks like the framework recreates css rules with class names. What epiphany am I missing here?
this sounds wrong because “separate responsibilities!” but in reality structure and style are so interconnected, for html and css, that you’re often changing one with respect to another so why not colocate the info.
also, managing a large css stylesheet is often terrible and it becomes write only as a result. it is easier to add new styles that override than attempt to find out which styles impact your target elements and change then. this is again due to the way that structure and style are intimately linked for html and css.
its better than writing raw styles on the html because that is rather obtuse, tailwind shortens many of the common style attribute names. e.g background-color: #efefef becomes bg-gray-50. this links into then named color palette that tailwind gives you.
also, *everything* is configurable.
Earlier quoted context omitted.
>The concept of 'transaction' doesn't really make sense in this approach, since I'm directly modifying the data in memory, every change I make is atomic and can't fail, and I flush the data to the disk atomically as well. So you don't have mutable data shared between threads then?
> So you don't have mutable data shared between threads then? I might have worded that one sentence a little better, sorry. I do technically need to share data between threads, since my event loop runs on multiple threads, so if I want to mutably modify something I do need to wrap it either in a `Mutex` or an `RwLock` and lock it. What I meant was that it is not the same as a "transaction" in the SQL sense. It can't…
- tailwindcss I moved a React side-project from CRA to Next.js for server-side rendering benefits, but the latter doesn't support directly importing css styles in jsx to avoid problems with the global scope. The two options offered were CSS modules and CSS-in-JS. I didn't like either approaches having hashes in the classname when opening the website in devtools, and both seemed too locked into React/JSX. Tailwind 1.…
I really don't get the appeal of tailwindcss, and I feel like I must be missing some obvious benefit of using it vs something like bootstrap. But at first glance, it just looks like the framework recreates css rules with class names. What epiphany am I missing here?
Main benefit for me is that I don't need to remember how to write css. 95% of what I need is a shortcut away from tailwind docs. The result is "prettier" than any other website-from-scratch I've done (that's purely on me, not much css practice). Now that I've memorised most common tailwind classes, I'm also moving faster than ever.
Main downside is that it's annoying having to modify tailwind's config file to add non-default variations (mostly different heights/widths than what it ships with).
Maybe something like Girouette[0] would be better.
Just to add some off-the-beaten-path solutions I've come across recently: https://github.com/Bogdanp/koyo - Koyo: a web app toolkit written in Racket https://github.com/yawaramin/re-web - ReWeb: a ReasonML/OCaml web framework https://cons.io - Gerbil Scheme has an embedded web server that supports writing handlers for
So the processing can happen where the static site generator runs.
- tailwindcss I moved a React side-project from CRA to Next.js for server-side rendering benefits, but the latter doesn't support directly importing css styles in jsx to avoid problems with the global scope. The two options offered were CSS modules and CSS-in-JS. I didn't like either approaches having hashes in the classname when opening the website in devtools, and both seemed too locked into React/JSX. Tailwind 1.…
I really don't get the appeal of tailwindcss, and I feel like I must be missing some obvious benefit of using it vs something like bootstrap. But at first glance, it just looks like the framework recreates css rules with class names. What epiphany am I missing here?
Pretty much, but that concept by itself is underrated. By having all of the CSS inline on your components, the developer doesn't have to click on a class name and find the css file associated with producing that class.
Tailwind is also a design system, so some non-obvious rules like box-shadows, colors, font-sizes are pre-picked. That means instead of remembering what font-size to use for a figure caption, "was it 0.85rem or 0.75rem", you can just use `text-xs`. Design constraint is good here because you get a consistent look throughout your app. It's kind of like having global css variables: by modifying your tailwind.config.js, you can change all `text-xs` to a different font-size now.
And then when you want to break out of that design system, "I need something smaller than a caption, say text-2xs", you can extend tailwind by defining your own atomic class names.
> benefit of using it vs something like bootstrap
Haven't used bootstrap since my first basic website years ago, but it seems like a vanilla js component + css library. Tailwind is primarily a css library, so you can use it with React and Vue as well. The way you install Tailwind is different too: Bootstrap you put into the head of your document and no build step is required; however, with a build step, you can remove unused css to get the minimal working spreadsheet.
It’s all in Golang. Using Pulumi to deploy into AWS. CDN, API Gateway, Lambda, S3.
I’m planning to add DynamoDB for metadata and the recently released S3 feature which allows for on-the-fly transformations of objects.
It’s been a breeze. Absolutely loving it compared to all the static generators and JS-heavy alternatives I’ve built in the past.
I also find some pleasure in finding the resulting HTML being neat too.
Semantic HTML, CSS, Vanilla JS, and JAMStack. Semantic: embed data directly in HTML. If I have a list of wines with categories, each wine's "class" attribute has a class for each category. HTML: can be generated by anything and consumed by anyone. Great SEO. CSS: These websites were all made with the same HTML, only CSS changing. http://www.csszengarden.com/ Let's imagine we have a checkbox, that when checked, should…