You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/introducing-nue-css/index.md
-17Lines changed: 0 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -55,7 +55,6 @@ Things work well if you can just copy/paste components and tweak settings, but i
55
55
size: 450 × 460
56
56
57
57
58
-
59
58
### Single point of responsibility { #blocker }
60
59
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.
61
60
@@ -66,8 +65,6 @@ The talent is inefficiently spread when React developers work on issues outside
66
65
Your team could do so much better.
67
66
68
67
69
-
70
-
71
68
## What if...
72
69
What if we could break away from all these trade-offs?
73
70
@@ -80,7 +77,6 @@ What if we could offload the burden from JavaScript developers and hand all desi
80
77
What would *that* look like?
81
78
82
79
83
-
84
80
## 1. Cascading CSS architecture
85
81
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.
86
82
@@ -106,7 +102,6 @@ Nue makes sure your design is consistently applied across all the pages and comp
106
102
size: 720 × 556
107
103
108
104
109
-
110
105
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.
111
106
112
107
@@ -128,7 +123,6 @@ Naming things and minimalism go hand-in-hand. The more names you have, the more
128
123
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.
129
124
130
125
131
-
132
126
## 3. Ditch JavaScript
133
127
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:
134
128
@@ -156,8 +150,6 @@ When everything is based on a single source of truth, it's trivial to ditch the
156
150
- Minimalism + Code splitting + Page inlining
157
151
158
152
159
-
160
-
161
153
## Less coding needed
162
154
Sites made with Nue have extremely little CSS. For example, a basic Tailwind button has more styling than a complete Nue-powered website:
163
155
@@ -172,7 +164,6 @@ Design-system-powered websites stay lean as the site grows:
172
164
[size-compare a="dialog" b="mona-editor"]
173
165
174
166
175
-
176
167
## Leaner sites
177
168
[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:
178
169
@@ -196,7 +187,6 @@ A surprising fact is that minimal, inlined CSS gets you to the same performance
196
187
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.
197
188
198
189
199
-
200
190
## Separation of concerns
201
191
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:
202
192
@@ -206,7 +196,6 @@ Nue breaks you out from the [single point of responsibility](#blocker) and offlo
206
196
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.
207
197
208
198
209
-
210
199
## Timeless skills and products
211
200
CSS is the styling language of the Web
212
201
@@ -215,13 +204,7 @@ CSS is the styling language of the Web
215
204
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.
216
205
217
206
218
-
219
207
## We're building the CSS framework of the future
220
208
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:
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/introducing-nuemark/index.md
-6Lines changed: 0 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,6 @@ Nuemark is a standalone library that works under Bun, Node, and Deno. However, i
23
23
poster: /img/nuemark-splash.jpg
24
24
25
25
26
-
27
26
## Manage content like a hacker { #hacker }
28
27
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*.
29
28
@@ -49,9 +48,6 @@ Nuemark is designed for content creation. It's a simple, concise syntax that is
49
48
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.
50
49
51
50
52
-
53
-
54
-
55
51
## Built-in set of headless UI components { #components }
56
52
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.
57
53
@@ -160,7 +156,5 @@ Nuemark differs from prior alternatives like *MDX* and *Markdoc* in the followin
160
156
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.
161
157
162
158
163
-
164
159
### Where does the syntax come from?
165
160
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.
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/nue-1-beta/index.md
+4-13Lines changed: 4 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,18 +10,18 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
10
10
11
11
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.
12
12
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.
14
14
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.
16
16
17
17
[.quote]
18
18
> “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.”
19
19
20
20
— Alan Hemmings / [BigNameHunter](//bignamehunter.com/?refer=nuejs) / CEO
21
21
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
23
23
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/)
25
25
26
26
27
27
[image.larger]
@@ -36,7 +36,6 @@ Exactly one year ago I [decided](/blog/backstory/) to create a super simple webs
36
36
**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.
37
37
38
38
39
-
40
39
## Improved CSS stack
41
40
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:
42
41
@@ -48,7 +47,6 @@ Nue has a powerful CSS theming system that supports [hot-reloading](/docs/hot-re
48
47
-[Exclude property](/docs/project-structure.html#exclude) allows you to strip unneeded assets from the request and lighten the payload.
49
48
50
49
51
-
52
50
## CSS view transitions
53
51
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:
54
52
@@ -77,7 +75,6 @@ Nue's view transition mechanism implements a simple diffing algorithm to check w
77
75
View transitions is a broad standard with tons of visual possibilities that are yet unexplored. Nue helps you stay in the forefront CSS development.
78
76
79
77
80
-
81
78
## CSS best practices
82
79
Nue's new [CSS best practices](/docs/styling.html) brings out the best of modern CSS:
83
80
@@ -95,7 +92,6 @@ These lessons focus on writing reusable CSS that is easy to read, maintain, and
95
92
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.
96
93
97
94
98
-
99
95
## New website and documentation
100
96
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.
101
97
@@ -109,7 +105,6 @@ Unsurprisingly, the biggest job was the documentation area, which now focuses on
109
105
The most important thing, however, is that the website is generated with the public Nue version, forcing us to "eat our own dogfood".
110
106
111
107
112
-
113
108
## Easier setup
114
109
115
110
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
156
151
- You can use both `og_image` and a new, shorter `og` property to assign an open graph image for the page.
157
152
158
153
159
-
160
154
## Breaking changes
161
155
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:
162
156
@@ -192,8 +186,5 @@ This will nest the generated `<pre>` element with a wrapper element like this:
192
186
Previously the class name would be set directly to the `pre` element. This makes a more consistent behavior with the `[code]` tag.
193
187
194
188
195
-
196
189
## Try now!
197
190
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.
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/nue-release-candidate/index.md
-6Lines changed: 0 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,3 @@
1
-
2
1
---
3
2
hero_title: "*Nue 1.0 (RC)* — Can it outshine Next.js?"
4
3
title: "A better Next.js? • Nue 1.0 (RC) is out"
@@ -91,13 +90,11 @@ Surprisingly, these rich, interactive sites remain exceptionally lightweight, co
91
90
[image /icon/close.svg]
92
91
93
92
94
-
95
93
[.note]
96
94
### Understanding Nue
97
95
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.
98
96
99
97
100
-
101
98
## New Markdown parser
102
99
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.
103
100
@@ -139,7 +136,6 @@ The new parser introduces several powerful features to enhance your Markdown exp
139
136
-**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.
140
137
141
138
142
-
143
139
### New tags
144
140
145
141
-**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
161
157
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.
162
158
163
159
164
-
165
160
## Other improvements and changes
166
161
Full list of improvements and breaking changes on this release:
167
162
@@ -178,7 +173,6 @@ Full list of improvements and breaking changes on this release:
178
173
-**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.
179
174
180
175
181
-
182
176
## Breaking changes
183
177
184
178
-**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 `---`.
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:
60
59
@@ -82,7 +81,6 @@ With lots of explainer-images and -videos:
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/perfect-web-framework/index.md
-9Lines changed: 0 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,6 @@ I created a [project on GitHub](//github.com/nuejs/nue) and called it **"Nue"**.
17
17
width: 550
18
18
19
19
20
-
21
20
[.note]
22
21
## Terms
23
22
**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
37
36
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.
38
37
39
38
40
-
41
39
## World-class design `UX` { #design }
42
40
World-class means the highest caliber design in the world. The top 1% of websites. The future **Stripes**, **Amies**, and **Linears**.
43
41
@@ -49,7 +47,6 @@ When a content-first design system is in place, content teams can ship great-loo
49
47
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.
50
48
51
49
52
-
53
50
## Motherf**king fast `UX` { #speed }
54
51
[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.
55
52
@@ -91,7 +88,6 @@ They use the same system for content-focused apps and single-page apps and enjoy
91
88
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.
92
89
93
90
94
-
95
91
## Sub-second deploy times `DX` { #ship }
96
92
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.
97
93
@@ -123,8 +119,3 @@ We're looking at the fastest way to start a new, fully functional business.
123
119
124
120
[.problem]
125
121
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.
Copy file name to clipboardExpand all lines: packages/nuejs.org/blog/rethinking-reactivity/index.md
-11Lines changed: 0 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -92,8 +92,6 @@ To understand this choice we must go back in time. The world used to be slightly
92
92
- Performance optimization
93
93
94
94
95
-
96
-
97
95
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.
98
96
99
97
@@ -104,7 +102,6 @@ Nue wants to change this and bring UX developers back to the forefront. For them
104
102
Therefore: Nue is HTML first.
105
103
106
104
107
-
108
105
## Class-based
109
106
110
107
@@ -133,8 +130,6 @@ Suddenly I could do things like this:
133
130
```
134
131
135
132
136
-
137
-
138
133
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.
139
134
140
135
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
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:
199
193
@@ -291,7 +285,6 @@ count = 0
291
285
```
292
286
293
287
294
-
295
288
## Reactivity under the hood
296
289
Here's how Nue JS works.
297
290
@@ -340,7 +333,6 @@ That's Nue reactivity in short.
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.
346
338
@@ -363,8 +355,6 @@ The compiled Nue code is very small: Only like ~1.2x larger than the HTML-based
363
355
width: 550
364
356
365
357
366
-
367
-
368
358
## Predicting the future
369
359
I see that frontend development is trending into the following directions:
370
360
@@ -375,4 +365,3 @@ I see that frontend development is trending into the following directions:
375
365
*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.
376
366
377
367
Nue is designed from the ground up to be on par with the above trends.
0 commit comments