Cloudflare setup docs

[tipiirai]

Use @goblinfactory's excellent post as inspiration:

---

As a hack just so that I can play with the project, I've just been doing local built and include the .dist/prod directory in git.
I'm using cloudflare, hosting on CDN, (cloudflare pages) without any workers, just the static dist/prod folders.

Just deployed my blog with it for fun : https://blog.alanhemmings.com
I dont have a build step; other than git push locally, heheh!

I have this cheeky fake "makefile"

#!/bin/bash
nue build -r blog --production
git add -A
git commit -m "#208 $1"
git push

@tipiirai perhaps I've missed the intent of the OP's question though?

Originally posted by @goblinfactory in #85 (comment)

[goblinfactory]

Txs @tipiirai I'm still working through everything and will help get some notes on working with Cloudflare in the next few days.

[tipiirai]

Thanks! Absolutely no rush. I prefer quality over speed on everything.

[goblinfactory]

Hi @tipiirai
first draft here; https://blog.alanhemmings.com/posts/taking-nuejs-for-a-spin-early-thoughts

[tipiirai]

Awesome! Thanks. I'll try to incorporate that to the official docs. Likely have some questions.

it's been an absolute pleasure writing clean CSS on clean semantic HTML.

Absolutely loving this comment on the article!

almost all of the problems that Tailwind solves melts away

Can you give some details for this one? One of the key challenges for Nue is to sell the idea of the separation of concerns principle because people refuse to think beyond CSS-in-JS/Tailwind these days. Especially the younger generation. If you could give me some insights about your AHA- moment on this one, that would help me write about semantic HTML. Thanks.

(Tackling the GA issue next)

[goblinfactory]

@tipiirai I possibly wouldn't try to sell that the Tailwind devs; if someone is using Tailwind, then I dont see why they can't still use Nue. I dont know enough yet about Nue to comment sensibly yet. Let me think about this and come back here with something that makes sense; I'll also possibly wait for fenced code blocks, because it might be easier to write some code and "show" rather than tell the differences. Here's 2 approaches to this specific problem Foo. I like Tailwind, and on bigger projects I believe I'd have no choice but to work with a designer to keep the CSS semantically clean. That isn't easy. It will make the separation SO MUCH Cleaner, so the trade off is obviously a good one. But for projects where I'm the solo developer, I can currently use semantic CSS for small blogs etc, but anything that needs to have compositional component design, then the cascading nature of CSS without any additional tooling becomes too much for a mortal to handle. (imo)

cut a long story short; I think you need to support both; because the community will be broadly divided into those that can handle the CSS, and those that just need to ship working software and are working alongside a big team of mixed skills without a dedicated smart designer; in those scenarios I believe Tailwind is a blessing because you can build your feature/comonent/UI and it wont mysteriously break for unknown reasons as another developer, possibly in a different team, in a different timezone adds a random innocuous style tweak to what he thinks is only his control.

;D I'll write a small blog post on this when fenced code blocks are supported in Nue. Show ...dont tell.

[tipiirai]

@goblinfactory good, valid points. Thank you. I see that it makes sense to support both. The upcoming templates will definitely be semantic because it's much easier to make themes with a cascaded system. I'll think about Tailwind once that is in place. I guess some sort of built-in support for utility classes would be nice. What would be the minimum viable Tailwind support?

[goblinfactory]

Supporting tailwind from the get-go doesnt seem to make sense; until the rest of the framework building blocks are available Nuejs will have immediate production value in content heavy applications, which lend themselves to clean semantic design. Supporting Tailwind from the get-go could result in accidental "valuable" contributions coming in too early. Not sure if I'm explaining my thought correctly. Basically, it's a piece of cake to start with Semantic CSS, and add support for other design philosophies, but obviously not the other way around. The current roadmap should allow for the best practices to be established with a core community focused at least initially on clean semantic html and css.

Having a solid clean set of sematics to describe both content as well as application interfaces would give us the ability to properly spike and explore the problems that Tailwind solves, with real examples, contrasting different approaches and comparing advantanges and trade-offs of each.

I asked chatGPT the following question;

What are the required core skills that a designer needs if you want to do semantic CSS 
for a complex web application with deeply nested controls and control composition and
multiple micro front end services co-existing on the same website? 

This was the reply; (abridged)

---

For designing semantic CSS for a complex web application with deeply nested controls, control composition, and multiple micro front-end services, the required core skills include:

1. Deep Understanding of CSS: Proficiency in CSS3, including Flexbox, Grid, and advanced selectors.
2. HTML Semantic Markup: Knowledge of semantic HTML5 elements and their correct usage.
3. Component-Based Design: Skills in designing reusable, modular CSS components.
4. CSS Preprocessing: Familiarity with preprocessors like SASS or LESS.
5. Responsive Design: Ability to create designs that work across various devices and screen sizes.
6. CSS Methodologies: Understanding of methodologies like BEM, OOCSS, or SMACSS for maintainable and scalable CSS.
7. JavaScript Fundamentals: Basic knowledge of JavaScript, especially in manipulating DOM elements, is often necessary.
8. Cross-Browser Compatibility: Ensuring designs work consistently across different web browsers.
9. Performance Optimization: Techniques for optimizing CSS for performance, such as minimizing reflows and repaints.
10. Version Control Systems: Proficiency in version control systems like Git for collaborative development.

---

Items 6 and possibly 4, would be core skills that a typical full stack web developer coming from a corporate background, working in a team would possibly not have! (in abundance...let's be kind! ❤️)

Semantic CSS requires ? a holistic approach, and is not something that can be partially applied. It requires discipline, and breaks down quickly if there are any holes in the dyke, considering many corporates employ teams of dyke-hole-makers.

Tailwind definitely helps keep features and teams more "isolated" in this situation.

...he says..ducking! 😆

[goblinfactory]

On the issue of cloudflare setup docs; if someone else wants to pick up the ticket, that's great; if no one does, then at some point I'll be settingup a proper CICD pipeline (and build) for Cloudflare specifically, and will submit a PR with some documentation on how to do it. That will only be in a few weeks time though. I have a ticket on my backlog to get to this, just ping me if someone else picks this up.

It won't be compatible with the current goals for nuejs (sub millisecond deployments) ; and I'll make a point to refer (link) to that, so this is a stop-gap for now; allowing Cloudflare users to start playing wit nue in production on cloudflare.

(wrote this comment above just to get this thread back on topic! )
xD

[tipiirai]

I have a pretty clear idea of the design system now taking advantage of both global and local styling. From design tokens to CSS-in-JS. The word holistic is a good one, which lets different approaches co-exist. I'll start working on that after the syntax highlight- thing. I totally understood what you meant by the "valuable" contributions: fully implemented & styled components, but incompatible with the framework ideals.

"Let's be kind" is also a good advice! Noted.

Can you give some advice on the question of the "minimum viable Tailwind support". What should the framework do at minimum, to be compelling for Tailwind developers?

[tipiirai]

will submit a PR with some documentation on how to do it

OMG. That would be awesome. Respect! (no rush)

[goblinfactory]

Apologies for taking so long to reply to this;
Just getting used to the wider project so that I can find the right place to put something like this; if not written properly in right place would result in a distraction/ support burden for Nue team. I'm confident I'll be able to submit something sympathetic shortly.

[goblinfactory]

@tipiirai I have some time to do this now, can you please assign this ticket to me? txs, A

[goblinfactory]

@tipiirai I'll need to be able to build and preview any changes to the nuejs-www project before submitting a pr.
Am pausing doing this until I can build and preview any changes.
(I've sent you a DM on this and will pick this up again as soon as this is unblocked.) ta, Alan