Skip to content

Commit e3a2c01

Browse files
authored
Merge pull request #423 from nobkd/docs/fixes
docs: reduce long newline sequences, fix numbering of ordered lists
2 parents 32ea0ff + f4d475d commit e3a2c01

File tree

23 files changed

+11
-120
lines changed

23 files changed

+11
-120
lines changed

packages/nuejs.org/blog/backstory/index.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,3 @@ Nue brings UX development back to the forefront. What used to take a separate de
2020
### Peace ❤️
2121

2222
[!.signature /img/signature.png width="200"]
23-
24-
25-
26-
27-

packages/nuejs.org/blog/introducing-nue-css/index.md

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ Things work well if you can just copy/paste components and tweak settings, but i
5555
size: 450 × 460
5656

5757

58-
5958
### Single point of responsibility { #blocker }
6059
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.
6160

@@ -66,8 +65,6 @@ The talent is inefficiently spread when React developers work on issues outside
6665
Your team could do so much better.
6766

6867

69-
70-
7168
## What if...
7269
What if we could break away from all these trade-offs?
7370

@@ -80,7 +77,6 @@ What if we could offload the burden from JavaScript developers and hand all desi
8077
What would *that* look like?
8178

8279

83-
8480
## 1. Cascading CSS architecture
8581
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.
8682

@@ -106,7 +102,6 @@ Nue makes sure your design is consistently applied across all the pages and comp
106102
size: 720 × 556
107103

108104

109-
110105
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.
111106

112107

@@ -128,7 +123,6 @@ Naming things and minimalism go hand-in-hand. The more names you have, the more
128123
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.
129124

130125

131-
132126
## 3. Ditch JavaScript
133127
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:
134128

@@ -156,8 +150,6 @@ When everything is based on a single source of truth, it's trivial to ditch the
156150
- Minimalism + Code splitting + Page inlining
157151

158152

159-
160-
161153
## Less coding needed
162154
Sites made with Nue have extremely little CSS. For example, a basic Tailwind button has more styling than a complete Nue-powered website:
163155

@@ -172,7 +164,6 @@ Design-system-powered websites stay lean as the site grows:
172164
[size-compare a="dialog" b="mona-editor"]
173165

174166

175-
176167
## Leaner sites
177168
[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:
178169

@@ -196,7 +187,6 @@ A surprising fact is that minimal, inlined CSS gets you to the same performance
196187
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.
197188

198189

199-
200190
## Separation of concerns
201191
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:
202192

@@ -206,7 +196,6 @@ Nue breaks you out from the [single point of responsibility](#blocker) and offlo
206196
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.
207197

208198

209-
210199
## Timeless skills and products
211200
CSS is the styling language of the Web
212201

@@ -215,13 +204,7 @@ CSS is the styling language of the Web
215204
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.
216205

217206

218-
219207
## We're building the CSS framework of the future
220208
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:
221209

222210
[image "/img/css-future.png"]
223-
224-
225-
226-
227-

packages/nuejs.org/blog/introducing-nue-css/size-measurement.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ CSS size details for the [comparison graphs](.#size-graphs)
2020
- **DSL** refers to "domain specific language", which is the inline styling (utility classes + expressions) inside the class name attribute
2121

2222

23-
2423
## Nue sizes
2524

2625
[size-table]

packages/nuejs.org/blog/introducing-nuemark/index.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ Nuemark is a standalone library that works under Bun, Node, and Deno. However, i
2323
poster: /img/nuemark-splash.jpg
2424

2525

26-
2726
## Manage content like a hacker { #hacker }
2827
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*.
2928

@@ -49,9 +48,6 @@ Nuemark is designed for content creation. It's a simple, concise syntax that is
4948
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.
5049

5150

52-
53-
54-
5551
## Built-in set of headless UI components { #components }
5652
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.
5753

@@ -160,7 +156,5 @@ Nuemark differs from prior alternatives like *MDX* and *Markdoc* in the followin
160156
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.
161157

162158

163-
164159
### Where does the syntax come from?
165160
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.
166-

packages/nuejs.org/blog/nue-1-beta/index.md

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
1010

1111
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.
1212

13-
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.
13+
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.
1414

15-
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.
15+
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.
1616

1717
[.quote]
1818
> “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.”
1919
2020
— Alan Hemmings / [BigNameHunter](//bignamehunter.com/?refer=nuejs) / CEO
2121

22-
1. **Designers**: planning to learn web development, but find the JavaScript ecosystem too scary
22+
4. **Designers**: planning to learn web development, but find the JavaScript ecosystem too scary
2323

24-
1. **Parents & Teachers**: who wants to educate people [how the web works](//www.websitearchitecture.co.uk/resources/examples/web-standards-model/)
24+
5. **Parents & Teachers**: who wants to educate people [how the web works](//www.websitearchitecture.co.uk/resources/examples/web-standards-model/)
2525

2626

2727
[image.larger]
@@ -36,7 +36,6 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
3636
**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.
3737

3838

39-
4039
## Improved CSS stack
4140
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:
4241

@@ -48,7 +47,6 @@ Nue has a powerful CSS theming system that supports [hot-reloading](/docs/hot-re
4847
- [Exclude property](/docs/project-structure.html#exclude) allows you to strip unneeded assets from the request and lighten the payload.
4948

5049

51-
5250
## CSS view transitions
5351
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:
5452

@@ -77,7 +75,6 @@ Nue's view transition mechanism implements a simple diffing algorithm to check w
7775
View transitions is a broad standard with tons of visual possibilities that are yet unexplored. Nue helps you stay in the forefront CSS development.
7876

7977

80-
8178
## CSS best practices
8279
Nue's new [CSS best practices](/docs/styling.html) brings out the best of modern CSS:
8380

@@ -95,7 +92,6 @@ These lessons focus on writing reusable CSS that is easy to read, maintain, and
9592
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.
9693

9794

98-
9995
## New website and documentation
10096
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.
10197

@@ -109,7 +105,6 @@ Unsurprisingly, the biggest job was the documentation area, which now focuses on
109105
The most important thing, however, is that the website is generated with the public Nue version, forcing us to "eat our own dogfood".
110106

111107

112-
113108
## Easier setup
114109

115110
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
156151
- You can use both `og_image` and a new, shorter `og` property to assign an open graph image for the page.
157152

158153

159-
160154
## Breaking changes
161155
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:
162156

@@ -192,8 +186,5 @@ This will nest the generated `<pre>` element with a wrapper element like this:
192186
Previously the class name would be set directly to the `pre` element. This makes a more consistent behavior with the `[code]` tag.
193187

194188

195-
196189
## Try now!
197190
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.
198-
199-

packages/nuejs.org/blog/nue-release-candidate/index.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
---
32
hero_title: "*Nue 1.0 (RC)* — Can it outshine Next.js?"
43
title: "A better Next.js? • Nue 1.0 (RC) is out"
@@ -91,13 +90,11 @@ Surprisingly, these rich, interactive sites remain exceptionally lightweight, co
9190
[image /icon/close.svg]
9291

9392

94-
9593
[.note]
9694
### Understanding Nue
9795
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.
9896

9997

100-
10198
## New Markdown parser
10299
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.
103100

@@ -139,7 +136,6 @@ The new parser introduces several powerful features to enhance your Markdown exp
139136
- **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.
140137

141138

142-
143139
### New tags
144140

145141
- **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
161157
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.
162158

163159

164-
165160
## Other improvements and changes
166161
Full list of improvements and breaking changes on this release:
167162

@@ -178,7 +173,6 @@ Full list of improvements and breaking changes on this release:
178173
- **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.
179174

180175

181-
182176
## Breaking changes
183177

184178
- **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 `---`.

packages/nuejs.org/blog/nuekit-010/index.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ Build a simple SPA: [Tutorial](/docs/tutorials/build-a-simple-spa.html)<!--TODO:
5454
[Source code](//github.com/nuejs/create-nue/tree/master/simple-app)
5555

5656

57-
5857
## Significantly faster build times { #faster }
5958
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:
6059

@@ -82,7 +81,6 @@ With lots of explainer-images and -videos:
8281
href: /docs/
8382

8483

85-
8684
## Get started
8785
Starting a new project in Nue is easy:
8886

packages/nuejs.org/blog/perfect-web-framework/index.md

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ I created a [project on GitHub](//github.com/nuejs/nue) and called it **"Nue"**.
1717
width: 550
1818

1919

20-
2120
[.note]
2221
## Terms
2322
**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
3736
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.
3837

3938

40-
4139
## World-class design `UX` { #design }
4240
World-class means the highest caliber design in the world. The top 1% of websites. The future **Stripes**, **Amies**, and **Linears**.
4341

@@ -49,7 +47,6 @@ When a content-first design system is in place, content teams can ship great-loo
4947
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.
5048

5149

52-
5350
## Motherf**king fast `UX` { #speed }
5451
[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.
5552

@@ -91,7 +88,6 @@ They use the same system for content-focused apps and single-page apps and enjoy
9188
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.
9289

9390

94-
9591
## Sub-second deploy times `DX` { #ship }
9692
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.
9793

@@ -123,8 +119,3 @@ We're looking at the fastest way to start a new, fully functional business.
123119

124120
[.problem]
125121
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.
126-
127-
128-
129-
130-

packages/nuejs.org/blog/rethinking-reactivity/index.md

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ To understand this choice we must go back in time. The world used to be slightly
9292
- Performance optimization
9393

9494

95-
96-
9795
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.
9896

9997

@@ -104,7 +102,6 @@ Nue wants to change this and bring UX developers back to the forefront. For them
104102
Therefore: Nue is HTML first.
105103

106104

107-
108105
## Class-based
109106

110107

@@ -133,8 +130,6 @@ Suddenly I could do things like this:
133130
```
134131

135132

136-
137-
138133
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.
139134

140135
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
193188
[setters]: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
194189

195190

196-
197191
## Reactivity model
198192
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:
199193

@@ -291,7 +285,6 @@ count = 0
291285
```
292286

293287

294-
295288
## Reactivity under the hood
296289
Here's how Nue JS works.
297290

@@ -340,7 +333,6 @@ That's Nue reactivity in short.
340333
[if]: //github.com/nuejs/nue/blob/master/packages/nuejs/src/browser/if.js
341334

342335

343-
344336
## Keeping things small
345337
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.
346338

@@ -363,8 +355,6 @@ The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based
363355
width: 550
364356

365357

366-
367-
368358
## Predicting the future
369359
I see that frontend development is trending into the following directions:
370360

@@ -375,4 +365,3 @@ I see that frontend development is trending into the following directions:
375365
*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.
376366

377367
Nue is designed from the ground up to be on par with the above trends.
378-

0 commit comments

Comments
 (0)