Giter Club home page Giter Club logo

www's Introduction

Nue  test

What is Nue?

Nue is a web framework for UX developers. What used to take a React specialist, and an absurd amount of JavaScript can now be done by a UX developer and a small amount of CSS.

Learn how it works

Who is it for?

Nue is designed for the following people:

  1. UX developers: who natively jump between Figma and CSS without confusing designer-developer handoff processes in the way.

  2. Beginner web developers: who want to skip the redundant frontend layers and start building websites quickly with HTML, CSS, and JavaScript.

  3. Experienced JS developers: frustrated with the absurd amount of layers in the React stack and look for simpler ways to develop professional websites.

  4. Designers: aiming to learn web development, but find the React/JavaScript ecosystem impossible to grasp

  5. Parents & Teachers: who wants to educate people how the web works

Installation

Check out installation docs

Ultimate goal

Ultimately Nue will be a ridiculously simpler alternative to Next.js, Gatsby, and Astro

Learn more about the vision

Contributing

Please see CONTRIBUTING.md

Community

Please see GitHub discussions

www's People

Contributors

alexnguyennz avatar aquaticat avatar armanio avatar arnavk-09 avatar bhushan-mohanraj avatar bushuai avatar chihabhajji avatar gucovip avatar ifox avatar jensroland avatar kielnino avatar krentrox avatar markliuyuxiang avatar nobkd avatar riencoertjens avatar runbinpeng avatar seneca avatar svetamazz avatar swoutch avatar tec avatar tipiirai avatar tomecko avatar vzvu3k6k avatar xland avatar yangbinji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

www's Issues

Optimize blog article `Tailwind vs. Semantic CSS`

Hi there,

your article on Tailwind vs. Semantic CSS currently gets some traction.

  1. I felt the urge to have a deeper look into it, as you stated it as a "study [that] compares two websites with identical design". I think there are several problems, as the websites clearly don't have an identical design and therefore this comparison lacks validity, see my blog article: https://mariohamann.com/test-quality-vs-bashing-tailwindcss
  2. You're claiming that you don't need JS tooling in the Semantic version, but don't call out, that you're using nuemark which is a JS library, isn't it?

I would love to see either the article more nuanced or the website being a more exact copy of the original.

Thanks! :)

Wrong wordings in landing page

Description

I think there's a small wording mistake on the landing page. (See the snapshot below)

Screenshot 2023-11-16 at 6 11 31 PM

Possible way to fix

The text under Nuemark and NueUI should switch.

React isn't using plain JS as FAQ claims

The FAQ states that Nue is like React, Svelte and SvelteKit in being written in plain JS and not TypeScript.
While the latter two have moved to JSDoc based type checking (using TypeScript, and from my understanding also for the internals and not just the public API surface like Nue currently does), React isn't using plain JavaScript but rather Flow - Facebook's statically typed JS variant. Every file annotated with @flow in a comment is using Flow syntax, which, like TypeScript, is a superset of JS that uses type annotations in a very similar way (note that it also allows for typing in comments but React isn't doing so - their source code can't run directly inside JS runtimes)

For an example (random file from react source that's using Flow annotation) see:
https://github.com/facebook/react/blob/a5fc797db14c6e05d4d5c4dbb22a0dd70d41f5d5/packages/react/src/ReactLazy.js#L45-L52

export type LazyComponent<T, P> = {
  $$typeof: symbol | number,
  _payload: P,
  _init: (payload: P) => T,
};

function lazyInitializer<T>(payload: Payload<T>): T {
  if (payload._status === Uninitialized) {

Typo on the Why Nue? page

It says "It’s a work im progress with the following release schedule" but should be "It’s a work in progress with the following release schedule"
nue

RSS Feed?

An RSS feed for the blog would be nice.

Cannot find package "nuecss"

when i clone this repo and run nue command got error:

✓ Initialize ./.dist/dev 
   nuemark.js
   nue.js
   page-router.js
   app-router.js
   mount.js
   diffdom.js
   hotreload.js
   error.css
   favicon.ico

✓ Nue 0.3.1 • Bun 1.0.23 
✓ Serving site from ./.dist/dev
✓ Building site to: ./.dist/dev

✓ Processing styles 42
error: Cannot find package "nuecss" from "/Users/dexter/.bun/install/global/node_modules/nuekit/src/builder.js"

A few problems with todomvc demo

Hi thanks for the effort you put in this project! The philosophy behind it is certainly interesting for me.

While checking the todomvc demo, I've noticed 2 problems:

  1. "x items left" counter in the footer gets out of sync with the actual number of items.

This gets fixed when you change view to filter Active or Completed items, or add a new item. Removing an item or making it done doesn't affect the number.

I couldn't catch any outstanding part in the https://github.com/nuejs/www/blob/master/todomvc/todomvc-compact.nue that would cause this problem. So I thought this might be indicating a problem beyond this demo.

  1. The "source code" link in the page footer is directed to a 404.

Maybe because of a file renaming? (todo-compact.nue -> todomvc-compact.nue)

关于源码问题!

你好!我是一名**的学生我对Nue.js很期待!但是很多人说Nue的源代码和Vue2的源代码很类似,请问您借鉴了Vue2的源码吗?

Small improvements to mobile layout

.cta {
    display: flex;
}

.cta > .button {
    white-space: nowrap;
    padding: .8em min(1.8em, 5%);
}

@media only screen and (max-width: 600px) {
    .subnav > a:first-child {
        box-shadow: none;
        padding: 0;

        & > span {
            display: none;
        }

        &::before {
            content: '';
            display: block;
            width: 26px;
            height: 26px;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZS8+PHBhdGggZD0iTTQ2MS44MSw1My44MWE0LjQsNC40LDAsMCwwLTMuMy0zLjM5Yy01NC4zOC0xMy4zLTE4MCwzNC4wOS0yNDguMTMsMTAyLjE3YTI5NC45LDI5NC45LDAsMCwwLTMzLjA5LDM5LjA4Yy0yMS0xLjktNDItLjMtNTkuODgsNy41LTUwLjQ5LDIyLjItNjUuMTgsODAuMTgtNjkuMjgsMTA1LjA3YTksOSwwLDAsMCw5LjgsMTAuNGw4MS4wNy04LjlhMTgwLjI5LDE4MC4yOSwwLDAsMCwxLjEsMTguMywxOC4xNSwxOC4xNSwwLDAsMCw1LjMsMTEuMDlsMzEuMzksMzEuMzlhMTguMTUsMTguMTUsMCwwLDAsMTEuMSw1LjMsMTc5LjkxLDE3OS45MSwwLDAsMCwxOC4xOSwxLjFsLTguODksODFhOSw5LDAsMCwwLDEwLjM5LDkuNzljMjQuOS00LDgzLTE4LjY5LDEwNS4wNy02OS4xNyw3LjgtMTcuOSw5LjQtMzguNzksNy42LTU5LjY5YTI5My45MSwyOTMuOTEsMCwwLDAsMzkuMTktMzMuMDlDNDI3LjgyLDIzMy43Niw0NzQuOTEsMTEwLjksNDYxLjgxLDUzLjgxWk0yOTguNjYsMjEzLjY3YTQyLjcsNDIuNywwLDEsMSw2MC4zOCwwQTQyLjY1LDQyLjY1LDAsMCwxLDI5OC42NiwyMTMuNjdaIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MzJweCIvPjxwYXRoIGQ9Ik0xMDkuNjQsMzUyYTQ1LjA2LDQ1LjA2LDAsMCwwLTI2LjM1LDEyLjg0QzY1LjY3LDM4Mi41Miw2NCw0NDgsNjQsNDQ4czY1LjUyLTEuNjcsODMuMTUtMTkuMzFBNDQuNzMsNDQuNzMsMCwwLDAsMTYwLDQwMi4zMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjMycHgiLz48L3N2Zz4=);
            background-size: contain;
        }
    }
}

Compare the screenshots:

First Image Second Image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.