GitHub page for innerself

[wrick17]

We already have a lot going on in this library. As soon as we have a logo, we could have a page up (built in innerself of course), to showcase itself.

We already have a lot of devs. If someone good with designing stuff, could mock up something, we're golden. :smiley:

[stasm]

That would be great! I'd be happy to put something up on gh-pages for innerself. I likely won't have much time to work on this myself for the next two weeks. I'd love to see a PR :) I guess I'd like to apply the same principles as for the logo: minimalist, taking advantage of what the browser provides natively.

Should we move the docs from the README to the gh page when it's ready?

[wrick17]

@stasm For the minimal part, that's what would be the basic design principle for the webpage.

For docs, the basic usage can stay in the readme. Detailed docs can go in the GitHub pages.

I would have done something and generated a PR, but I'm horrible with designs 😅. That's why I was looking for someone who has a good design sense. If someone can sketch up some mock-ups, I can sure spend some time and make the pages.

[f1yn]

I have a concept in mind, I'll upload what I consider to be a mock soon. The issue is that for my actual job, I rarely use mock-ups, so I'm not exactly sure what you are expecting.

If you'd like, I'm willing to do the design (and CSS) if someone could come up with the content. Working on a rudimentary layout as we speak.

[wrick17]

This looks cool. By mock I meant this (almost). What would be a better addition to this, is like choice of colors and images ( if applicable), fonts and all. Basically I am better at making a website than visualising one. That's all. This should be great. I think @stasm should be the perfect guy for the content. After all this is his project.

[ben-styling]

If you're open to ideas, here's a quick concept for an introductory page.

Copy is just taken from the readme, some of it has been cut down to help it fit for now, just to get the basic layout

[f1yn]

@GoldenRust That's fantastic!! I'm more than willing to help with this if help is wanted @wrick17.

I could likely make the styling and markup for this page within a couple of hours.

[ben-styling]

@flynnham Thanks! Right now that's a really rough concept, there's no grid system used and I doubt any of the spacing is consistent, it's all pretty much eyeballed. If people like it I can refine it some more and add the necessary sections needed for all the content.

I'm not sure what sort of imagary should be used, that's just some stock from pexels, but I'm sure there's something more fitting we could add there.

I'm also a front end developer, so I can help out with the build too once a design has been agreed on.

The chosen font is Work Sans. I think it fits the current logo quite well. Open to other suggestions.

[stasm]

I really like this, @GoldenRust, well done! Some of the copy from the README actually reads pretty well in your mock-up :) The layout easily guides me through a brief intro and a bullet point list of features; the call to action buttons are right there above the fold, the background info is prominent (which I think is important for this project b/c it exaplains its raison d'etre). And those Docco code snippets with explanations look great too. I'm impressed!

I don't know what imagery would fit best; let's explore different options. Perhaps a one-sentence claim without background would be sufficient?

Thanks to everyone for participating. I love seeing such passion from all of you!

[wrick17]

Oops. That was by mistake. Sorry.

@GoldenRust, the design looks amazing. Love it. I have a few pointers though.

For images, why don't we use something like an SVG instead of a regular image, like a vector art. That way it can stay pretty lightweight and fast. Good example would be the webpages they have for jetbrains and their products.

Also if we could use one of the default fonts, we could save a lot of rendering time.

[wrick17]

Also if we could add a link to @flynnham's article, that would be great. We owe a huge thanks to him, as that article was the one that brought me here, along with many others. 😄

[ben-styling]

I thought using some kind of svg vector art, but I concluded that would introduce too many defined shapes which could compete for attention. I'd like to use an image because it makes the entire section look initially less flat, yet still be a secondary element. Later today I'll mock something up with some geographic vector art to hopefull demonstate what I mean by this.

I use Google fonts a lot in production, I find that a lot of the time the load time is not noticable. However, if you're concerned about it, we could chose a similar system font (needs to be on ios, android, mac, windows + linux) and async the Google font?

If we have several individuals opinions about innerself, that could fit in a 'testimonials' or 'notable mentions' section?

[wrick17]

@GoldenRust sounds good to me. :+1:

[ben-styling]

Here are two alternative ideas for the hero section.

The first is using some simple shapes, I personally don't like this attempt. The jetbrains example that was mentioned only really works because it fits their brand, which is very stylistic. Creating something similar for something that doesn't have a defined brand yet, is out of my design scope for me to visualise/create.

The second uses a heavily blurred image, and a lighter font. Regarding the second, I like the font change for this section, but I think it would only work in white, which means the background has to be dark, this slightly negates the impact of the 'background' section further down. I'm undecided on the blurred image.

[wrick17]

The jetbrains brand thing is absolutely correct. I only suggested it coz it looks cool :stuck_out_tongue_closed_eyes: The blurry image concept sounds good to me. :+1: In fact it looks awesome.

[f1yn]

@GoldenRust for the second concept, is the top background image intended to be animated?

[bsouthga]

sure everyone was already thinking this, but it would be awesome if the site itself was pure innerself. Happy to flesh out some development (rollup / routing / folder org) scaffolding based on innerself-hn for the site (can do plain JS too) if people would be interested.

[ben-styling]

@bsouthga That would be great!

It could be a good idea when you're creating it to do it in a way where it could be a boilerplate for starting a project using innerself.

@flynnham Potentially. The only way I can think of to animate anything blurred would be to use the svg filter to do it, but that has limited browser support, and in my experience it's a bit slow. Maybe using a static blurred image with opacity .6/.8 with animated circles behind could work? I'd have to built it to see.

[bsouthga]

@GoldenRust sounds good! Maybe I'll make a basic innerself-cli which bootstraps innserself + rollup + babel or typescript.

[f1yn]

@GoldenRust Canvas would also work, that was what I was expecting it to be when I saw it.

[stasm]

Just keep in mind that innerself will happily nuke the canvas on each re-render if it's part of the component tree ;)

[f1yn]

@stasm I'm my mind, my logical thought would be to keep the canvas external from the Root of the innerself components. If it's only going to be rendered once then it should be fine to have it external.

[f1yn]

I got some time to kill so I'll see about making a small contained canvas Bokeh script.

Update: It's almost done. I just need to add some animations. It's coded as a ES2015 module, so you'd import the Constructor, and then pass an empty div as well as a base hue color. The canvas created fits inside of the div, and updates when the window resizes.

@GoldenRust yeah, right now the implementation only runs when SVG filters are supported. Else it will fallback onto a static background image.

[f1yn]

Alright, here is the repository with the effect. The default parameters are already set to somewhat match the background above.

https://github.com/flynnham/mini-bokeh

A couple caveats:

1. The container should have a fallback background-image in case JS is missing or the CSS filter rule is not preset. Detection is somewhat primitive, so it might be a good idea to load one anyways.

2. It's not very fancy. The blur effect takes all of the the Bokeh bulbs, instead of blurring them individually. I did this to allow better compatibility with browsers.

3. It's not going to be on npm. I'd recommend following the README and bundling the package into your dependencies manually. Doing so would mean that the gh-pages would have the latest version of the mini library whenever dependencies are installed or updated.

Update: I'm overhauling it so it pre-renderers the spheres before drawing them. This should cut some of the bottlenecks by a long shot. That optimization wont be rolling out for a while, but in the meantime I've reduced the rendering to roughly 30 fps instead of 60.

[ben-styling]

@flynnham Excellent implementation. I love it. It would be ideal if it fell back to a static image defined inside the canvas when filters aren't supported so it's only downloaded when needed. I assume ie8 support isn't needed, especially for this project. I won't have time until Friday to clean up and add sections to the design, but this is a great start!

[bsouthga]

@GoldenRust @stasm made this https://github.com/bsouthga/innerself-app for bootstrapping innerself apps -- would love any input on default folder structure (just a note that its written in typescript but defaults to creating javascript apps).

[stasm]

@bsouthga Nice! I've got some work to do before I can take a closer look but it looks very cool. I added it to the README in c9103c7b41ec6a9b2a2ea01352e11d34ae2f272c.

[f1yn]

Any updates? I'm willing to pitch in some more, I just need to know how far you've gotten first.

[ben-styling]

Sorry I've found myself with very little time. I've cleaned up the alignment of the psd. I also started the examples page, although I'm not quite happy with it.

Here's the home psd and jpg Here's the examples psd

I'd love to do more, but it doesn't look like I'll have much of a chance within the next month. Any additional design help would be much appreciated!

[f1yn]

I should have an opening in the next couple of days to roll out something on those lines.

[f1yn]

@stasm @GoldenRust Starting on it tonight, should be done in the next couple of days. Expect an eventual pr to gh-pages

[f1yn]

Almost ready, just need to finish the examples/showcase page and make some finishing touches. I built a minimal router for the site that uses innerself as a rendering engine, routing to pages based on the state of the hash of the url. It detects the hash after a page refresh, as well as whenever an anchor with a registered route is clicked. I should have it done either tomorrow or the day after.

[wrick17]

@flynnham This looks amazing.

I have a few pointers though:

• The translucent background behind the text could be little bit more opaque. Just for ease of legibility.
• The line through the center shows through the logo itself. Can we do something about it?

Job well done!!

[f1yn]

@stasm I finally made the initial PR for the site. I did my best to structure the site in a way that will make it easier to scale if needed. https://github.com/stasm/innerself/pull/28