I think replies also increase the points as well.
@/all also please make sure to "start" the github if you have not done so already : https://github.com/hyperstack-org/hyperstack
I’d like to try writing a simple todo tutorial with just FE HS
the top menu items kinda dissappear on the darker menu though
@peterlamber fantastic work! Cant wait to see the final design, I know right now you are more focused on the mechanics of moving to Material UI from Semantic UI
Hi there!
I have a question. Why do you use this ugly syntax:
class HelloWorld < HyperComponent
render(DIV) do
# try changing 'world' to your own name
H1 { 'Hello world' }
P(class: 'green-text') { "Let's gets started!" }
end
endinstead of:
class HelloWorld < HyperComponent
render(div) do
# try changing 'world' to your own name
h1 { 'Hello world' }
p(class: 'green-text') { "Let's gets started!" }
end
end
actually you example sort of shows the point. In the top example DIV/H1/P are all colored blue so they standout.
But of course the nice thing about Ruby (and Hyperstack) is we are not too opioniated. If you really want to change it, its not too hard. Actually I think there is a module you can include in your application Hyperstack Class that changes it :-)
But one of things a lot of us hyperstackers really dislike about the JSX world is that when you read code there are very few syntactic hints to help make the code quickly understandable. Everything is a function call, and a bunch of curly brackets.
All that said, its a good question you raise!
I see, but as a ruby developer when I see UPCASE words I know that are
CONSTANTS and it feels strange, very strange because CONSTANTS they are made to be always the same. But in Hyperstack it has a method. If the only things that maters here is the color to see quickly what is what, you can install a plugin in your editor to recognize the framework/language you use and change the color in that context.
If it makes you feel better in fact each component (whether its a builtin tag, or an application defined component) is in fact a class (i.e. constant), and saying
MyComponent(...) is shorthand for MyComponent.insert(...)
And the second question I have is why you are passing a DIV to render?
class HelloWorld < HyperComponent
render(DIV) do
# try changing 'world' to your own name
H1 { 'Hello world' }
P(class: 'green-text') { "Let's gets started!" }
end
endmaybe it would be better:
class HelloWorld < HyperComponent
render do
div do
# try changing 'world' to your own name
h1 { 'Hello world' }
p(class: 'green-text') { "Let's gets started!" }
end
end
end
You can say the latter
its just that every render MUST generate a component, so we give the programmer the option of saving a nesting level.
Thank you. Keep up with your good :D
bye
bye
and BTW your second question about render(DIV) would be really good on stack-overflow. its very helpful to us to build out these questions in stackoverflow. Thanks!
@mpantel hey good job on the answer. Can you upvote that guys question? I don't know why it got down voted! But I see that one of the editors edited your answer.... so the more people that do this, the more curiosity we are going to get!
why does it have to be:
class HelloWorld < HyperComponent
render(DIV) do
# try changing 'world' to your own name
H1 { 'Hello world' }
P(class: 'green-text') { "Let's gets started!" }
end
endinstead of
class HelloWorld < HyperComponent
DIV do
# try changing 'world' to your own name
H1 { 'Hello world' }
P(class: 'green-text') { "Let's gets started!" }
end
endwell if you want to try it, this patch seems to work... no specs yet, but:
# add to your HyperComponent base class
class << self
alias :my_original_meth_missing method_missing
def method_missing(name, *args, &block)
if const_defined?(name) &&
(klass = const_get(name)) &&
((klass.is_a?(Class) && klass.method_defined?(:render)) ||
Hyperstack::Internal::Component::Tags::HTML_TAGS.include?(klass))
render(klass, *args, &block)
else
my_original_meth_missing(name, *args, &block)
end
end
end
class HelloWorld < HyperComponent
H1 { 'Hello world' }
P(class: 'green-text') { "Let's gets started!" }
end
besides if the DIV takes params you would have to add it...
I'm not expecting there to be a DIV if I read the above.
github stars +13 (5%) https://star-history.t9t.io/#hyperstack-org/hyperstack
hotframe works +3.5 points (its a log scale) https://hotframeworks.com/frameworks/hyperstack