Closed rajaraodv closed 6 years ago
@rajaraodv thanks for getting the ball rolling on this! Other sources of inspiration we could look to are the Elm examples and Vue.js examples.
@rajaraodv Maybe we can turn this into a checklist, otherwise it may stay open forever. š
EDIT: I updated your post to include all the examples you came up with. Thanks! š
+1 for Graphql example
I found the examples over at next.js very helpful when i started out. I feel alot of times i don't need to see the result of it, just some example code of how to get started with different implementations.
We have hyperapp/awesome
for cataloging example apps already built with Hyperapp. What I think we need is a list of example apps not yet built but that we would like to see built with Hyperapp. Maybe even come up with some non-monetary bounty incentive. š¤
Free Hyperapp stickers and random Japanese gift.
Hi @JorgeBucaran! I have seen that you are working on improving the documentation. I have also seen that you have created a awesome
list and you have examples in Codepen that are not linked in that list. I have created two examples that I saw in this thread and were not created yet: Markdown Editor (nice example of dangerouslySetInnerHTML
) and Emoji Search.
I would like to be able to add these examples to the documentation, but I am not clear about the guidelines to do it. Would it be nice to add them in a list of examples in hyperapp / awesome
? Or maybe on Tutorials section?
@ismamz Let's add them to hyperapp/awesome, can you create a PR there?
To add the examples to the tutorials section, perhaps start with one, write the tutorial, create the PR and we'll review it. Sounds good? š
Perfect! I've added examples to the awesome
list.
I could start writing a tutorial, if you find it useful.
@ismamz Rather than another tutorial, I'd like to add documentation for currently undocumented concepts like slices, modules, etc. So, IMO a more useful contribution would be to write an original tutorial and publish it on your blog, gist, GitHub, etc.
What do you think? :)
I think it's a good idea!
This looks like the problem that LearnHyperapp wants to solve. You can DM me on the hyperapp slack channel for org access :)
Here's a (quite simple) example app written with Hyperapp https://github.com/zaceno/happy
Live Example: https://zaceno.github.io/happy/
Oh and since someone mentioned Tetris, here's a start if someone wants to finish it (needs scoring, levels, main menu, prettiness...) https://codepen.io/zaceno/pen/JreKPN?editors=0010
Idea: Helmet for Hyperapp
Let's see what we have accomplished so far.
We have better documentation.
We have a CodePen with basic examples. New examples coming soon! š„
We have a Medium Publication: Hyperapp Vox Populi (Want to write for us? Write an article and have me or @okwolf review it for publication. Feel free to reach me on Twitter @JorgeBucaran, my DM is open!).
There is also LearnHyperapp by @mrozbarry, if you want to join Alex in that adventure, all you need is ask him to add you as a collaborator of that organization.
There is also @Zaceno's Hypercraft Blog of rants, tricks and pitfalls. Check it out!
We are also on Twitter, follow @HyperappJS for news and announcements. If you make something cool with Hyperapp and want exposure, b>@</bmention us. You can also share it on Reddit's /r/Hyperapp or submit it to hyperapp/Awesome on GitHub.
I created a list of examples that I'd love to see built by us (I'm happy to contribute). All these are taken from the React ecosystem. We can use this list as a guidelines and top-level things that the community will need to come onboard and be successful. Note: We may already have some ready to be used.
In JS, we can solve everything 100s of ways. I'm looking to provide a set of "prescribed" ways of doing things (both for small and large apps) - even if it comes with some caveats.
Examples from React To Be Ported To Hyperapp
The purpose of this is to have links to examples that shows Hyperapp's core concepts, organizing large projects, dealing with 3rd party libraries and so on.
All the examples should try to have:
Explain Concepts
React Tutorial - https://facebook.github.io/react/tutorial/tutorial.html (final app: https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
Forms https://facebook.github.io/react/docs/forms.html
"Refs" and DOM equivalent https://facebook.github.io/react/docs/refs-and-the-dom.html
"Composition vs inheritance" - https://facebook.github.io/react/docs/composition-vs-inheritance.html
"Higher-order components" https://facebook.github.io/react/docs/higher-order-components.html
"Reconciliation" equivalent in HyperApp https://facebook.github.io/react/docs/reconciliation.html
Testing - Jest?
Namespace resolution
Mixins - Why and How
Styling
Explain How To Organize Code And Build Realistic Apps
Build Fun Apps:
Integrating 3rd party apps
https://facebook.github.io/react/docs/integrating-with-other-libraries.html
Hyperapp Reusable components
[Source]