nuejs · nobkd · Dec 19, 2024 · Dec 19, 2024
diff --git a/packages/nuejs.org/blog/backstory/index.md b/packages/nuejs.org/blog/backstory/index.md
@@ -20,8 +20,3 @@ Nue brings UX development back to the forefront. What used to take a separate de
 ### Peace ❤️
 
 [!.signature /img/signature.png width="200"]
-
-
-
-
-
diff --git a/packages/nuejs.org/blog/introducing-nue-css/index.md b/packages/nuejs.org/blog/introducing-nue-css/index.md
@@ -55,7 +55,6 @@ Things work well if you can just copy/paste components and tweak settings, but i
   size: 450 × 460
 
 
-
 ### Single point of responsibility { #blocker }
 Today, JavaScript/React developers are responsible for everything. The components are modern-day "kitchen sinks" where content, layout, styling, and business logic are stuffed together.
 
@@ -66,8 +65,6 @@ The talent is inefficiently spread when React developers work on issues outside
 Your team could do so much better.
 
 
-
-
 ## What if...
 What if we could break away from all these trade-offs?
 
@@ -80,7 +77,6 @@ What if we could offload the burden from JavaScript developers and hand all desi
 What would *that* look like?
 
 
-
 ## 1. Cascading CSS architecture
 One of the key ideas of Nue is to ditch the large JavaScript ecosystem and go directly with modern CSS, and harness it's power.
 
@@ -106,7 +102,6 @@ Nue makes sure your design is consistently applied across all the pages and comp
   size: 720 × 556
 
 
-
 The design is separated from the HTML structure so that the system can be controlled by designers and UX developers. This way, non-technical people can create content so that the pages automatically inherit the correct design. And there is no way they can break the design system with local or inline styling.
 
 
@@ -128,7 +123,6 @@ Naming things and minimalism go hand-in-hand. The more names you have, the more
 Simple means lean and well-organized CSS that is easy to maintain and scale. There's less room for errors: No global namespace issues, no local breaking points, and no consistency issues. The simpler you design the system, the better. The fewer colors, font weights, elements, components, and variants you have, the better.
 
 
-
 ## 3. Ditch JavaScript
 When everything is based on a single source of truth, it's trivial to ditch the redundant CSS-in-JS layer in front of your design system, be it Tailwind, **CSS Modules**, or Vanilla Extract. This makes a simpler stack:
 
@@ -156,8 +150,6 @@ When everything is based on a single source of truth, it's trivial to ditch the
     - Minimalism + Code splitting + Page inlining
 
 
-
-
 ## Less coding needed
 Sites made with Nue have extremely little CSS. For example, a basic Tailwind button has more styling than a complete Nue-powered website:
 
@@ -172,7 +164,6 @@ Design-system-powered websites stay lean as the site grows:
 [size-compare a="dialog" b="mona-editor"]
 
 
-
 ## Leaner sites
 [motherfuckingwebsite.com](//motherfuckingwebsite.com/) is a developer meme from **Barry Smith** to demonstrate the power of minimalism. It's a text-only website that does not use CSS at all. It loads fast:
 
@@ -196,7 +187,6 @@ A surprising fact is that minimal, inlined CSS gets you to the same performance
 No matter how clever the Rust-based Bundler, optimizing your JavaScript, nothing beats a tiny TCP packet that has everything to render the landing page.
 
 
-
 ## Separation of concerns
 Nue breaks you out from the [single point of responsibility](#blocker) and offloads the burden from the JavaScript/React engineer for the more talented ones, focusing on that specific field:
 
@@ -206,7 +196,6 @@ Nue breaks you out from the [single point of responsibility](#blocker) and offlo
 Separation of concerns equals scalability: Marketers and technical writers proceed with content, designers and UX developers focus on the user experience, and JavaScript developers perfect the [back of the frontend](//bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/). The same applies for one person projects too — all the UX talent just comes from one head.
 
 
-
 ## Timeless skills and products
 CSS is the styling language of the Web
 
@@ -215,13 +204,7 @@ CSS is the styling language of the Web
 Any developer with a background in CSS can maintain the codebase. And when you come back later, even years later, the codebase is still sound and clear. There is no fear of [technical debt](#debt) because the CSS you write today is valid forever.
 
 
-
 ## We're building the CSS framework of the future
 We're building the next version of Nue which contains a thing called [global design system](//bradfrost.com/blog/post/a-global-design-system/), coming out from **Brad Frost**. We believe it could be the next big thing in CSS:
 
 [image "/img/css-future.png"]
-
-
-
-
-
diff --git a/packages/nuejs.org/blog/introducing-nue-css/size-measurement.md b/packages/nuejs.org/blog/introducing-nue-css/size-measurement.md
@@ -20,7 +20,6 @@ CSS size details for the [comparison graphs](.#size-graphs)
 - **DSL** refers to "domain specific language", which is the inline styling (utility classes + expressions) inside the class name attribute
 
 
-
 ## Nue sizes
 
 [size-table]

diff --git a/packages/nuejs.org/blog/introducing-nuemark/index.md b/packages/nuejs.org/blog/introducing-nuemark/index.md
@@ -23,7 +23,6 @@ Nuemark is a standalone library that works under Bun, Node, and Deno. However, i
   poster: /img/nuemark-splash.jpg
 
 
-
 ## Manage content like a hacker { #hacker }
 Nuemark lets you manage content [like a hacker](//tom.preston-werner.com/2008/11/17/blogging-like-a-hacker) without the complexity of large systems like *WordPress* or *Contentful*. Instead, you'll approach content from a software development perspective: The content is stored in Git and you manage it with your preferred editor like *VS Code* or *Sublime Text*.
 
@@ -49,9 +48,6 @@ Nuemark is designed for content creation. It's a simple, concise syntax that is
 With Nuemark, you start with pure content: Text, images, and videos and only then move into layout and design. By starting with a content-first mindset, you will ensure that the page design evolves to support what's inside it. Not the other way around.
 
 
-
-
-
 ## Built-in set of headless UI components { #components }
 Nuemark comes with a set of built-in components, which aim to tackle the most common content management use cases. There are buttons, icons, responsive images, videos, tables, tabs, and layout grids. And you can mix components to form more complex layouts.
 
@@ -160,7 +156,5 @@ Nuemark differs from prior alternatives like *MDX* and *Markdoc* in the followin
 3. When you edit Nuemark within the Nue framework you see your page update on the browser in real-time offering a true WYSIWYG experience for content creators.
 
 
-
 ### Where does the syntax come from?
 Nuemark takes inspiration from WordPress shortcodes, TOML configuration language, YAML front matter, and other Markdown elements like links and images. The goal make it approachable for people already familiar with Markdown and introduce as few new idioms as possible.
-
diff --git a/packages/nuejs.org/blog/nue-1-beta/index.md b/packages/nuejs.org/blog/nue-1-beta/index.md
@@ -10,18 +10,18 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
 
 1. **UX developers**: who natively jump between **Figma** and **CSS** without a confusing [designer-developer handoff](//medium.com/design-warp/5-most-common-designer-developer-handoff-mishaps-ba96012be8a7) process in the way.
 
-1. **Beginner web developers**: who want to skip the [redundant frontend layers](//roadmap.sh/frontend) and start building websites quickly with HTML, CSS, and JavaScript.
+2. **Beginner web developers**: who want to skip the [redundant frontend layers](//roadmap.sh/frontend) and start building websites quickly with HTML, CSS, and JavaScript.
 
-1. **Experienced JS developers**: frustrated with the absurd amount of layers in the [React stack](//roadmap.sh/react) and looking for simpler ways to develop professional websites.
+3. **Experienced JS developers**: frustrated with the absurd amount of layers in the [React stack](//roadmap.sh/react) and looking for simpler ways to develop professional websites.
 
 [.quote]
   > “Nue is **exactly** what I want. As a technical founder, I need easier ways to build websites. I don't want to hire devs and watch all my profits disappear in salaries.”
 
   — Alan Hemmings / [BigNameHunter](//bignamehunter.com/?refer=nuejs) / CEO
 
-1. **Designers**: planning to learn web development, but find the JavaScript ecosystem too scary
+4. **Designers**: planning to learn web development, but find the JavaScript ecosystem too scary
 
-1. **Parents & Teachers**: who wants to educate people [how the web works](//www.websitearchitecture.co.uk/resources/examples/web-standards-model/)
+5. **Parents & Teachers**: who wants to educate people [how the web works](//www.websitearchitecture.co.uk/resources/examples/web-standards-model/)
 
 
 [image.larger]
@@ -36,7 +36,6 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
 **v1.0 Beta** is by far the biggest release yet with five months of work and over [500 files changed](https://github.com/nuejs/nue/pull/316). This is a breakdown of new features, updates, and breaking changes.
 
 
-
 ## Improved CSS stack
 Nue has a powerful CSS theming system that supports [hot-reloading](/docs/hot-reloading.html), CSS inlining, error reporting, and automatic dependency management. This version improves the system with the following features:
 
@@ -48,7 +47,6 @@ Nue has a powerful CSS theming system that supports [hot-reloading](/docs/hot-re
 - [Exclude property](/docs/project-structure.html#exclude) allows you to strip unneeded assets from the request and lighten the payload.
 
 
-
 ## CSS view transitions
 View transitions are an important part of a seamless user experience and are a key feature in the Nue framework. They can now be enabled with this simple configuration variable:
 
@@ -77,7 +75,6 @@ Nue's view transition mechanism implements a simple diffing algorithm to check w
 View transitions is a broad standard with tons of visual possibilities that are yet unexplored. Nue helps you stay in the forefront CSS development.
 
 
-
 ## CSS best practices
 Nue's new [CSS best practices](/docs/styling.html) brings out the best of modern CSS:
 
@@ -95,7 +92,6 @@ These lessons focus on writing reusable CSS that is easy to read, maintain, and
 Nue helps you build professional websites with the same amount of CSS as you can find on a typical normalization library or Tailwind's "preflight" CSS.
 
 
-
 ## New website and documentation
 Unsurprisingly, the biggest job was the documentation area, which now focuses on [Design Engineering](/docs/how-it-works.html#design-engineering). About 80% of the documentation is completely rewritten and there are several new documents.
 
@@ -109,7 +105,6 @@ Unsurprisingly, the biggest job was the documentation area, which now focuses on
 The most important thing, however, is that the website is generated with the public Nue version, forcing us to "eat our own dogfood".
 
 
-
 ## Easier setup
 
 Nue [installation](/docs/installation.html) is now simpler and the onboarding now comes with a handy `nue create` command that installs an example website and opens it on your browser. The opening screen looks like this:
@@ -156,7 +151,6 @@ The web component can be assigned globally in `site.yaml` for all page sections
 - You can use both `og_image` and a new, shorter `og` property to assign an open graph image for the page.
 
 
-
 ## Breaking changes
 The major version number goes from zero to one, which means that ~this version of Nue is not backward compatible~. There are the following changes that might break your HTML or CSS from working:
 
@@ -192,8 +186,5 @@ This will nest the generated `<pre>` element with a wrapper element like this:
 Previously the class name would be set directly to the `pre` element. This makes a more consistent behavior with the `[code]` tag.
 
 
-
 ## Try now!
 Please [try it out](/docs/installation.html) and experience the difference in UX development. You might wonder why you ever built websites any other way.
-
-
diff --git a/packages/nuejs.org/blog/nue-release-candidate/index.md b/packages/nuejs.org/blog/nue-release-candidate/index.md
@@ -1,4 +1,3 @@
-
 ---
 hero_title: "*Nue 1.0 (RC)* — Can it outshine Next.js?"
 title: "A better Next.js? • Nue 1.0 (RC) is out"
@@ -91,13 +90,11 @@ Surprisingly, these rich, interactive sites remain exceptionally lightweight, co
     [image /icon/close.svg]
 
 
-
 [.note]
   ### Understanding Nue
   To better grasp the benefits and unique development model of Nue, be sure to explore the newly updated documents for [Why Nue?](/docs/) and [How it works](/docs/how-it-works.html). This section focuses specifically on the new release.
 
 
-
 ## New Markdown parser
 In earlier versions of Nue, we used the **Marked** library to handle basic formatting for our extended Markdown syntax — known as **Nuemark**. While Marked is a solid, general-purpose Markdown parser with excellent performance, it became clear that it couldn't fully support the direction we wanted for Nue, particularly with our content-first development model.
 
@@ -139,7 +136,6 @@ The new parser introduces several powerful features to enhance your Markdown exp
 - **Inline components**: Custom tags can now be inlined directly within the content, like `A inlined [custom-tag] is here`. This allows you to add dynamic or reusable components within the text flow, offering more flexibility in structuring your content.
 
 
-
 ### New tags
 
 - **New `[accordion]` tag**: The [accordion] tag allows you to create collapsible panels without the need for complex syntaxes or additional JavaScript. Using the AST, the parser automatically treats `h2` or `h3` headers as new accordion panels. This makes it easy to create interactive content sections simply by structuring your Markdown with headers.
@@ -161,7 +157,6 @@ Marked is well-known for its performance, especially in handling basic Markdown
 These performance improvements stem from Nue's more efficient internal architecture, designed to handle both simple and advanced Markdown features with minimal overhead. While these results come from basic, informal tests conducted on my laptop, I encourage you to test them for yourself. It would be great to see real-world benchmarks and eventually share them on this website to provide a more accurate comparison for the community.
 
 
-
 ## Other improvements and changes
 Full list of improvements and breaking changes on this release:
 
@@ -178,7 +173,6 @@ Full list of improvements and breaking changes on this release:
   - **Improved HMR error reporting**: YAML parsing errors are now displayed directly in the browser via the updated Hot Module Replacement (HMR) feature. With this improvement, developers can see parse errors related to YAML, JavaScript, CSS, and components right away, making the development process faster and more efficient.
 
 
-
   ## Breaking changes
 
   - **No more `[grid]` tag**: The `[grid]` tag has been removed. You can now achieve similar functionality using generic blocks like `[.features]`, and split inner blocks with `h2`, `h3`, or `---`.

diff --git a/packages/nuejs.org/blog/nuekit-010/index.md b/packages/nuejs.org/blog/nuekit-010/index.md
@@ -54,7 +54,6 @@ Build a simple SPA: [Tutorial](/docs/tutorials/build-a-simple-spa.html)<!--TODO:
   [Source code](//github.com/nuejs/create-nue/tree/master/simple-app)
 
 
-
 ## Significantly faster build times { #faster }
 Nue is an order of magnitude faster than its cousins. An identical blogging site takes around *50ms* to build with Nuekit and over *ten seconds* with Next.js:
 
@@ -82,7 +81,6 @@ With lots of explainer-images and -videos:
   href: /docs/
 
 
-
 ## Get started
 Starting a new project in Nue is easy:
 

diff --git a/packages/nuejs.org/blog/perfect-web-framework/index.md b/packages/nuejs.org/blog/perfect-web-framework/index.md
@@ -17,7 +17,6 @@ I created a [project on GitHub](//github.com/nuejs/nue) and called it **"Nue"**.
   width: 550
 
 
-
 [.note]
   ## Terms
   **UX** = improved user experience, **DX** = improved developer experience
@@ -37,7 +36,6 @@ Note that single-page applications are no different: The content just comes from
   Popular frameworks like **Next.js** or **Astro** are optimized for JavaScript developers with a deep understanding of **React**, **TypeScript**, **CSS-in-JS**, **Tailwind**, and whatnot. For example, you need hundreds of lines of code spanning 10-20 files to create a rich/interactive web page.
 
 
-
 ## World-class design `UX` { #design }
 World-class means the highest caliber design in the world. The top 1% of websites. The future **Stripes**, **Amies**, and **Linears**.
 
@@ -49,7 +47,6 @@ When a content-first design system is in place, content teams can ship great-loo
   Current frameworks like **Bootstrap** and Tailwind lack a global, content-first design system that spans the entire website. UX/CSS professionals have a hard time contributing because CSS is tightly coupled inside the JavaScript code.
 
 
-
 ## Motherf**king fast `UX` { #speed }
 [motherfuckingwebsite.com](//motherfuckingwebsite.com/) is a developer meme from **Barry Smith**. This plaintext website carries an important message: Get rid of the clutter and focus on content and performance.
 
@@ -91,7 +88,6 @@ They use the same system for content-focused apps and single-page apps and enjoy
   Vite and **React** place all the burden on the JavaScript developer. They develop React components where content, styling, and logic are all mixed. Scaling becomes hard when content teams and UX developers cannot participate. And if you use different systems for blogging, documentation, and single-page apps – extra developer time is spent on keeping the external services together.
 
 
-
 ## Sub-second deploy times `DX` { #ship }
 When you push out a new blog entry or a product release, something always goes wrong: Typos, wording issues, missing links, broken styling on mobile, ... You name it. In this situation, it's critical to have a fast shipping engine in place. You want to fix your errors before the next bunch of visitors arrives.
 
@@ -123,8 +119,3 @@ We're looking at the fastest way to start a new, fully functional business.
 
 [.problem]
   Vercel, *Heroku*, or *Render* don't have integrated services. You need to build them yourself or fall back to external services like HubSpot or Google Analytics. It's impossible to get a consistent UX/DX across the board.
-
-
-
-
-
diff --git a/packages/nuejs.org/blog/rethinking-reactivity/index.md b/packages/nuejs.org/blog/rethinking-reactivity/index.md
@@ -92,8 +92,6 @@ To understand this choice we must go back in time. The world used to be slightly
   - Performance optimization
 
 
-
-
 People who cared about UX could focus on the *front of the frontend*, and JS developers could focus on the *back of the frontend*. The talent was naturally spread and people did what they loved. It was great. *Brad Frost* wrote a [great article][brad] on the topic.
 
 
@@ -104,7 +102,6 @@ Nue wants to change this and bring UX developers back to the forefront. For them
 Therefore: Nue is HTML first.
 
 
-
 ## Class-based
 
 
@@ -133,8 +130,6 @@ Suddenly I could do things like this:
 ```
 
 
-
-
 Yes, HTML was in all caps back then. And there were no `type="email"` fields, no `<button>` tag, nor the ability to post data with JavaScript. AJAX was invented seven years later. But I could make HTML dynamic and could move some of the dynamics from backend to the frontend.
 
 Today HTML, CSS, and JavaScript have incredibly more power. Especially JavaScript. One notable thing is [classes][classes], introduced in ECMAScript 2015 (aka "ES6") and now supported by all major browsers.
@@ -193,7 +188,6 @@ ES6 classes make your code look amazingly compact and clean. You can add variabl
 [setters]: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
 
 
-
 ## Reactivity model
 Reactivity means that when the component state changes, the component automatically re-renders itself to the new state. Nue is no different from the other frameworks here:
 
@@ -291,7 +285,6 @@ count = 0
 ```
 
 
-
 ## Reactivity under the hood
 Here's how Nue JS works.
 
@@ -340,7 +333,6 @@ That's Nue reactivity in short.
 [if]:  //github.com/nuejs/nue/blob/master/packages/nuejs/src/browser/if.js
 
 
-
 ## Keeping things small
 The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based source code. This makes Nue applications the smallest on the market.
 
@@ -363,8 +355,6 @@ The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based
   width: 550
 
 
-
-
 ## Predicting the future
 I see that frontend development is trending into the following directions:
 
@@ -375,4 +365,3 @@ I see that frontend development is trending into the following directions:
 *More standards-based coding*. As developers move to multi-page applications JavaScript is rendered on the server side, and client-side JavaScript becomes optional. This forces the pre-SPA best practices to come back: Separation of concerns, progressive enhancement, and semantic web design.
 
 Nue is designed from the ground up to be on par with the above trends.
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,8 +20,3 @@ Nue brings UX development back to the forefront. What used to take a separate de
		### Peace ❤️

		[!.signature /img/signature.png width="200"]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -20,7 +20,6 @@ CSS size details for the [comparison graphs](.#size-graphs)
		- DSL refers to "domain specific language", which is the inline styling (utility classes + expressions) inside the class name attribute



		## Nue sizes

		[size-table]
Expand Down