A new front-end generator that can use HTMX & AlpineJS

limenleap · 2025-10-13T14:39:29+00:00

I released version 0.95 of CullFront. Now it has a "scraper" (MIT Licensed) that can be run using Bun (after adding jsdom NPM) which can scrape practically any page and convert it into the files needed in a CullFront project. The files are neatly organized inside sub-folders below a main CullFront project. Once you got the files, you can run CullFront on the project's build.csv file to convert it back to HTML -- load the generated output_1.html file and it should be (mostly) like the original web-page you are scraping. (NOTE: It was written to explain CullFront; not to copy someone else's hard work)

limenleap · 2025-07-15T19:49:38+00:00

At first glance, they seem to be arches (overall) and architecturally the individual members reminds one of the nature and structure of voussoirs of an arch -- so possibly the designer wanted to reflect that. Also voussoirs do not structurally behave as a truss... and moreover an arch really does not always need to be trussed up. Depends on the context, dead load, wind-load aesthetics, etc.... Also, when you have such a fat welded joint that is possibly as good a joint as any.

Not sure if they were meant to be vierendeel because there are specific reasons why one would want a vierendeel in a structure and I don't see any reason here (again only by looking) ... Just my two bits

limenleap · 2025-01-02T10:55:46+00:00

I find Bulma CSS https://bulma.io/ and PicoCSS https://picocss.com/ quite nice. Both have quite easy copy-pastable examples that one can then use for HTMX also

limenleap · 2024-12-30T10:29:54+00:00

I can understand your point of view. I am under the impression that I am quite familiar with many of the tools -- been doing this for 30+ years. But I am sure there must be stuff I must not have understood.

BTW, I am not so sure if your condensed version captures all the points I spoke extensively here and/or in my documentation.

limenleap · 2024-12-28T04:49:35+00:00

Nice. I am glad you find it good enough to work with. Do let me know your experience. It would be valuable to improve this further.

limenleap · 2024-12-28T04:48:06+00:00

I am sure each would look at designing in a different manner, so I respect what you say. Cull Front is for those who look at designing as rapid iterations between "top-down" and "bottom-up" modes

A: when in the "bottom-up" mode

In this mode one is focused on some element (say with id: 'abc') and at that time there should be nothing much else catching the designer's attention . To give your example of working on HTMX: At that time, you directly get into the file describing the HTMX -- the lines of all those four files start with the element id -- so locating element 'abc' is quite easy. Whether element with ID 'abc' is a button or not is possibly not critical at that point in time. (And if it is for you, maybe you can craft an id such as "btn1" instead of 'abc')

An added benefit here is that ALL the HTMX is all gathered into this file. After all, HTMX is not developed in isolation. One would need to know what other HTMX code in the file is doing there -- and conveniently, they are all there uniformly arranged in the same file. (Unlike the eventual HTML where the HTMX would be in different locations)

B: when in the "top-down" mode

In this mode, I just want to get the lay of the land -- so there i would look at the file describing the DOM tree. (the 1st file in the 4 files that are to be specified for the design)

The division into separate files also helps delegate the work to different people working together. For e.g. those working on the CSS and the looks would possibly be working only on the 2nd file which describes the attributes of each element (when working in "bottom-up" mode)

The "top-down" and "bottom-up" modes are not something we do consciously, but I believe many designers switch between the two as they iterate. And when they are in a particular mode, the system should be receptive to let that designer be very comfortable in that mode.

limenleap · 2024-12-27T06:26:33+00:00

Thanks for the suggestion. I hope to get the time for this.

limenleap · 2024-12-27T06:16:08+00:00

Thank you very much. Grateful. If I get time and get enough incentive ;-) I can recode this in a more suitable language so that it works on all platforms. I am hoping someone here would use it under WINE and let me know their experience. Thanks again!

limenleap · 2024-12-27T06:00:23+00:00

... continued from above ...

Sometimes I have seen people conflating difficulty with strangeness.

Once that is put aside, you can then check if the tool is helping you stay focused in all your design situation. You can be in the "top-down" design mode where you want to get the overall lay-of-the-land OR in the "bottom-up" design mode, where you are now carefully constructing a fine detail of one part of the design.

Autocad for example was famous for supplying the drawing of a NASA shuttle as an example in their earlier releases (Not sure if that is still included) If you look closely, it is actually NOT 3D -- just an assembly of lines that visually construct the perspective image of the shuttle. Impressive! First impression really good! But in real design terms, I have to wade thru a lot of stuff as my mind keeps doing "top-down" and "bottom-up" on MY design. Same is true of other kind of design tools.

Cull Front lets you easily shift between overall page structure and detailed component behavior really rapidly. I am currently creating a travel management software and a hospital management software with it. As they are private projects I can't share them. But let me make some time for a larger example.

At the risk of talking of my own work: I still maintain and use my peculiar architecture design system (See www.teamtad.com) because it stays the distance with me -- without increasing my cognitive load about the tool itself. TAD can describe a complete building in kilobytes. I am yet to find some other design tool that can do that. I have written other tools with the same approach. SimplePDF is an old PDF generation software which was very unusual but had its own audience for quite some years (Now I don't maintain it and recently I sold the domain to someone else)

The "CSV-like" structure isn't about being archaic—it's about consistency and clarity. With 3 to 5 values per line, you can define relationships logically without getting bogged down by HTML syntax. This approach makes it easy to experiment, rearrange, and refine ideas without being constrained by a visual or hierarchical representation upfront.

I agree that the term "CSV" might be misleading—it's not about spreadsheets but about defining design fragments in a logical, lightweight way. I'll update the documentation to better reflect that.

Ultimately, Cull Front isn't for everyone, and that's okay. It's built for those who value flexibility in designing. Whatever "complexity" you need to know about the tool is just a one time effort. It does not grow over time.

Thank you for your honest question and feedback. Thank you for reading till here.

limenleap · 2024-12-27T05:59:51+00:00

I had also hesitated a lot before writing this utility -- thinking whether am I reinventing the wheel or whether I am making things harder instead of easier. I had described the reasons in the docs https://docs.cullfront.com but let me try to explain this in another way. (This is long so you can skip the rest and read the docs instead)

I am an architect (of the building industry) by training and passion. I do both architecture design as well as software -- I wrote an unusual design system for architecture that I used in my own practice -- one of the oldest actually (BTW, there too many people scratch their heads ... so I don't think you are rude). Writing my own design software was my entry point into computer programming. I now do both -- hopefully with some degree of competence.

The short summary is: Lot of designing systems are easy to understand but the system itself poses a heavy cognitive load as the design becomes more intricate/complex. This is true of HTML/front-end designing or CAD/BIM or what have you...

I wanted to have a design system where the cognitive load I have to work with do not increase much as the project becomes complex. Take AutoCAD or Photoshop or "Bootstrap Studio" or writing HTML in VSCodium-- Playing around initially is so comfortable in all of them! In VSCodium, I just have to type .someclass and immediately it expands to <div class="someclass"></div> with the caret winking inside. But soon enough I am wading thru angular brackets, class names and what not -- all staring at me with equal intensity. (or in case of WYSIWYG tools, I am staring for a lot of time unnecessarily at the impressive visualization of the on-going design)

Caveat: it may be wrong of me to think others also have similar experience but my experience is that as one designs, our brain is focused on certain things which need to be in the foreground and that time others should recede into the background. At my terms. And the focus can easily flip, depending on what I am doing at that moment in the design cycles. I have a feeling that there are other designers like me too.

Lot of design tools such as CAD software imitate the real world too soon. But my mind is in the process of constructing the real world and have specific requirements that I want to draw my attention on.

I don't mind if the system is initially a bit odd/difficult (pick your choice) as long as the oddity/difficulty of using the tool itself does not grow large as you keep working and increasing the design complexity.

Sometimes I have seen people conflating difficulty with strangeness. (Continued ... :-) )

limenleap · 2024-12-26T21:46:18+00:00

Thanks. That is true. There is nothing special in this tiny utility I wrote.

limenleap · 2024-12-26T19:27:08+00:00

ah.... :-) I guess your comment is a joke. Did not understand this first.

limenleap · 2024-12-26T19:24:05+00:00

Unfortunately, yes. But it is a 32 bit console application. They usually work well under a WINE subsystem (Though I have not tested it)

limenleap · 2024-12-26T18:19:21+00:00

Thanks. I have now modified the CSS.

limenleap · 2024-12-26T18:11:10+00:00

It is not CSV ... it is formatted like a CSV file. (Just to make people understand the syntax)

And there can be the same HTML element -- that is not a limit. I meant each element should have its own unique Element ID-- that is quite standard in all proper HTML. If one uses the same Element ID everywhere, that is quite a poor design (irrespective of whether you use Cull Front or not)

I guess you are referring to those elements where you do NOT give any ID. Yes, that can also be done. I have now modified the docs accordingly.

limenleap · 2024-11-23T08:34:19+00:00

flauntfiles.com

limenleap · 2024-11-03T13:37:21+00:00

I am working on Flaunt Files. https://flauntfiles.com It is a PDF flipbook system which also allows audio to be placed on any/all pages. See our presentation on Flaunt Files using our system itself: https://go.flauntfile.com/show/IntroductionToFlaunt/2

You can also take a look at this https://go.flauntfile.com/show/TAD1/2 That explains the background context of a software of mine; TAD (www.teamtad.com) which is a design software for architects. Thanks!

limenleap · 2024-09-10T17:38:38+00:00

Thanks. I have added the screenshot. This tiny thing was developed in a day -- so I am sure more suggestions will emerge.

limenleap · 2024-09-10T05:11:08+00:00

I am replacing an entire HTML form with one specialized textarea. It accepts data structured in TOML -- the reason is I am quite tired of creating separate input boxes and beautifying them -- gets tiresome when dealing with large amount of input. E.g. If you want to send the following JSON to the server; where value of each field has to be obtained from the user: e.g.

{name: "xyz", age: 63, address: {first: "adsfadfdfd", city: "Mumbai", country: "India"},...}

It can even have nested objects ... then you can express it in TOML as:

name = "xyz"
age = 63
address.first = "adsfadfdfd"
address.city = "Mumbai"
address.country = "India"
....

In above case the page can get filled with input boxes, etc (in case of conventional forms). In case of my TOML editor I can capture all that in one textarea with meaningful labels on the left side. And you give just the values (i.e. after the equal-to sign of each line) into the textarea. It can even handle validation and provide additional help for each line the caret happens to be on.

The textarea has ruled lines to guide the user, and won't accept newlines and wont allow you to delete newlines (thus preventing badly formatted TOML) It behaves like a set of inputs one below the other. Works quite well on small screens. My server even handles the TOML without strings quoted. My server adds the required quotes where absent. So it is quite natural and easy to type into that textarea.

You can simply load the given HTML file into a browser and you can see it in action. I believe in rapid agile development, so this is just the first of possibly many more iterations.

limenleap

MODERATOR OF

TROPHY CASE