Hyperapp: Website? ⚡️

[jorgebucaran]

There is of course https://hyperapp.gomix.me, but that's just a bunch of examples I put together for people to get started with HyperApp more quickly.

1. Should we have a website?
2. What information should be on the website?
3. What should be the goal of the website?
4. Thoughts?

[FlorianWendelborn]

If we have a website I can host it easily. Got a dedicated root server with lots of free resources.

We should get a domain then though.

Oh and it would be helpful if it could either be a static git repo (pulled by dodekeract/deploy) or a docker container.

[jorgebucaran]

https://github.com/dodekeract/deploy looks nice with yellow, magenta and lime, but what is it?

If we have a website I can host it easily. Got a dedicated root server with lots of free resources.

Awesome! I'd suggest we use something more substainable like plain ole GitHub Pages tho. The scope of the website is mostly promotional and HyperApp is not a "product", but why not, I'm basically cool with that, just want to know what people think and whether this is a good idea or what.

[FlorianWendelborn]

@jbucaran It's a small service that runs on my server to automatically pull GitHub repos when a web hook arrives. That way a push to master automatically updates the associated website. Right now it's only used by https://github.com/dustincompetent/dinc.hacker.digital, which I host for a friend.

[cdeutmeyer]

Somewhat related to this, it's too bad the /r/HyperApp/ is taken but neglected. Reddit is a pretty good platform for discussion and questions.

EDIT: We're on /r/HyperApp/ now! 🎉

[lukejacksonn]

I think this is a good idea (mainly because I can see it looking awesome) but content is a great question. What should be covered that isn't in the repo/wiki?

[farism]

I think it's a great idea. Having a slick website never hurts.

[grantcarthew]

Again @jbucaran as I stated on #165, have a look what I have done here: https://github.com/grantcarthew/site-auto-tech

Very easy to do and hosted by GitHub.

[jhwohlgemuth]

@jbucaran @dodekeract
Regarding the desire for a domain, you might consider js.org. I think hyperapp.js.org would be pretty cool. Getting a domain from js.org is free, easy to setup, and seems to be available.

[Swizz]

Hyperapp do well to "animate" a small part of a webpage. Thanks to the root param.

So, it could be great to have an interactive documentation.

(moved from "Road to 1.0" to here : a better place)

[Idered]

Here's the design. Please leave some feedback. If everything is ok, I can code it.

[lazarljubenovic]

I personally love it! Nitpick: the two buttons at the bottom have weird alignment.

Will codes be live-editable?

[zaceno]

Alright -- I'm not the one who signs off on this, but here are my thoughts:

On the whole, I like it! A lot! Very clever with the HYPERapp({...}) in the header! Also super sweet with code examples -- esp if its live editable.

Some things I might polish a bit:

• The purple-ish tone of the header. I think I'd prefer something warmer to make the blue of the logo pop a little more.

• The colored bubbles in the header are a little... I don't know. Kids birthday party or something. I like the hexagons in the darker part -- maybe we could do something with hexagons in the header also?

Also the blurb about "custom tags" might need to change (just had a chat with @jbucaran about the terminology) -- but that's easy to fix later, so don't let that hold you back.

[jorgebucaran]

I love this. I do. I think @Idered is doing a terrific job and I really appreciate the time you are putting in on this. At the risk to sound boring, I'd push for a more "plain" look. Using the same design and ideas you have now, would it be possible to make it a bit less flamboyant?

While I see where you are coming from with this, I also see this getting old very quickly and coming off a bit too strong product-oriented as opposed to more "open source project"-ish.

EDIT: Grammar.

[zaceno]

Also, wile yarn is popular and all, perhaps we should go with "npm install hyperapp"? I mean, npm is after all the default, and we don't want to give the impression that yarn is required.

And yarn users will for sure know that they can just "yarn add" whatever others "npm install"

EDIT: (took out "--save")

[jhwohlgemuth]

@zaceno 100% agree

note: npm v5 made --saves the default, so the syntax for npm could be npm install hyperapp

@Idered Very nice design!

[Swizz]

I am on the @jbucaran the design is great, but hyperapp need something more pure and elegant.

And I insist, I want an interactive guide for the getting started guide o/

[selfup]

I love that stateless components are a "selling" point 😂

We should keep it that way 😛

[lukejacksonn]

Also, I've designed enough sites to know that a _mobile first_ approach is not just something they say to do because it is _cool_ 😎 but because it is a useful exercise in content distillation and prioritisation. It is much easier to take something pure and pad it out with swag when the screen gets larger than vice vera.

How about we also try derive some established common ground in the following:

• Logo
• Wordmark
• Colors
• Fonts
• Icons
• Shapes
• Textures
• Patterns

Rather than building a specific product.. lets try create a _style_; a guide that can be used as reference to make anything look and _feel_ HyperApp.

Then we need to think about content..

Personally I have never tried to orchestrate the creation of a style guide in a truly distributed open source context before, so this could be fun or futile. Only one way to find out!

Any and all suggestions welcomed 🙏

[mohamedattahri]

@lukejacksonn - I think it's easier to derive a style from a design than the opposite. What @Idered has done could be a good way to start.

[jorgebucaran]

Some details.

• Logo: What do people think about the current logo? Is it a keeper?
• Color: #00CCFF
• Fonts: LHF Brianna Slant / Helvetica Neue?

[lukejacksonn]

I'm not saying don't take inspiration from what @Idered has done! You could use this as a basis to fill in the blanks like @jbucaran has done above..

I am trying to encourage a more distributed approach (where we don't rely solely on the designer @Idered to create assets). A real design system is one that allows for anyone to build something with that _hyperapp_ feel.. for that we need to establish some common language/assets.

Ambitious I know but this approach has been proven by some of the biggest in tech. It is already a half solved problem.. for inspiration check out:

• https://airbnb.design/the-way-we-build/
• https://material.io/guidelines/

[zaceno]

@jbucaran -- I feel like the logo is good! At least, I don't see any reason to change it, and since it's probably starting to be a little recognized (after our couple of trending-peaks recently) it's maybe best to leave it.

[zaceno]

@lukejacksonn I think it's a good idea, but very ambitious. And also, atm, we don't really need the design system for anything more than the website. (Ok maybe the docs, if we intend to publish them somewhere other than the github repo)

So I think, rather than starting with a design system, the approriate order of business is:

1) Get a website that's nice. (We're in a good direction with @Idered 's work)
2) Iterate that design a little. Let it mature (nothings is its best the first time)
3) When there is some other work that needs to be designed to harmonize / show a relationship with hyperapp, then lets do our best to take elements from the established website design.
4) Let the artefacts & lessons learned from (3) be the starting point of a design system
5) Iterate the design system as needed.

[Idered]

Thank you all for feedback. I'll now adjust the design. I'll try to change style from flamboyant :P to premium and by that, I mean total minimalism. A few days break gave me a fresh view on what I've done.

[jhwohlgemuth]

Reflecting on @Idered's awesome design and @lukejacksonn's point about developing "that hyperapp feel", I was thinking @Idered might want to keep @hyperappjs's twitter banner in mind (either as inspiration for his design or as something to include in his design)

[Swizz]

Hyperapp is simple but magic ; we need a website simple but magic :smile:

But I definitly love (want to keep) the

hyperapp({...})

[jorgebucaran]

@Swizz Unless magic is an inherent characteristic of Virtual-DOM based frameworks, I don't (hope there isn't) see any magic in HyperApp.

TBH I am a bit susceptible to this word (magic), used in the context of programming and wouldn't want HyperApp to be considered as such.

Can you share what you thought was "magic" about HyperApp? 🙏

[Swizz]

Oh. I meant awesome. I straightly translate from my thoughts, and in my culture we said magic for something that raise a "Waouh effect" : When I saw it, my thought was "I want to use it, I want to take part of this project" :fireworks:

[Idered]

Guys, I just can't...