Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make things pretty #26

Open
zepumph opened this issue Jul 11, 2019 · 6 comments
Open

Make things pretty #26

zepumph opened this issue Jul 11, 2019 · 6 comments

Comments

@zepumph
Copy link
Member

zepumph commented Jul 11, 2019

Today is dev meeting (relating to phetsims/tasks#980), it was mentioned that perhaps it would be good to get @chrisklus, the front-end whiz, in on this repo to help out making UI improvements. I'm not exactly sure what this will look like, but I'm making an issue to begin the discussion.

@chrisklus perhaps you just want to go for it, or start working with a designer. Or maybe we can talk and I can give you a tour of the limited things I know about the front end. For example it is using a few templating technologies, like handlebars and perhaps mustache too. There is also some fancy stuff in there about compiling the common code markdown files into the generated binder output.

@zepumph zepumph assigned zepumph and chrisklus and unassigned zepumph Jul 11, 2019
@zepumph
Copy link
Member Author

zepumph commented Jul 11, 2019

Let me know what you would like to do.

@chrisklus
Copy link
Contributor

Thanks @zepumph. From dev meeting yesterday, @ariel-phet recommended I take a first pass and then work with a designer to make improvements. Perhaps you could give me a tour, and if I feel comfortable enough, I can go ahead and dive in.

@zepumph
Copy link
Member Author

zepumph commented Jul 12, 2019

Sure thing. Let me know when you want a tour!

@zepumph zepumph removed their assignment Jul 12, 2019
@chrisklus
Copy link
Contributor

@zepumph gave me a very nice tour, so i'm feeling up to speed on how the front end is set up. Since it's using Handlebars and Bootstrap, I proposed porting this to React (the new website is in React)
to @ariel-phet, and he is in favor of this change.

For starters, I'm going to get a React environment working and then port and style the "Components by Sim" and "Sim by Components" pages that @zepumph recently created.

@chrisklus
Copy link
Contributor

React has been difficult to get working with CDNs, and @mattpen thinks it will be messy to continue down this path. I was hoping this would work because anyone could load a live version of binder locally just like a sim, without any additional steps.

Instead, we could run it locally with npm. From slack:

Matt Pennington 10:39 AM
create-react-app might work, as once everything is set up it should be managed with npm, so other devs should just need to run npm start. Maybe worth asking the team during dev meeting today. I looked briefly through some pages describing how to get react running with a cdn and it involves a lot of polling weirdness.

He also mentioned that we could create a grunt task for this, so devs would just need to run grunt binder or something. We could also keep one running on phettest so designers could view the page whenever. Alternatively, I was thinking we could host this on one of our servers, so anyone on the team could visit it without having to run a command locally. Or we could do both local and remote options.

@samreid
Copy link
Member

samreid commented Jul 18, 2019

After developer meeting discussion, we discussed using a compile step instead of having that done inline in the browser via script type=text/babel. That seems pretty standard and would allow us to build the site. If in the future we figure how to get rid of the build step, the code maybe wouldn't need to change too much. We can also use filesystem watchers, to automatically compile on code changes.

chrisklus added a commit that referenced this issue Jul 23, 2019
chrisklus added a commit that referenced this issue Jul 23, 2019
chrisklus added a commit that referenced this issue Jul 23, 2019
chrisklus added a commit to phetsims/chipper that referenced this issue Jul 23, 2019
chrisklus added a commit that referenced this issue Jul 23, 2019
chrisklus added a commit that referenced this issue Jul 23, 2019
chrisklus added a commit that referenced this issue Jul 23, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants