Seeking feedback on a prototype

[Ralph Bean]

The demo is up on my website[1].

We have tons of apps run by Fedora Infrastructure and a long-time
complaint is that they have inconsistent theming, and no chrome that
ties them together -- that makes them look like they're all part of
the same thing.  Theming them consistently or adding a unifying chrome
would be awesome, but a very challenging and time-consuming task.

This little prototype is an attempt at making a single line of
javascript that we could include in each app to add a floating button
that pulls up a menu taking you to other Fedora apps.  It could
potentially display other information like "how to join!" and "don't
forget to book your tickets for Flock!" and.. etc.  It falls short of
a unifying chrome, but I tried to make it simple enough that it won't
collide with the layouts and style of other pages.. something we could
actually deploy without exhausting ourselves.

It's a very rough early prototype, but how do people like the general
approach?  Is anyone on this list interested in taking it and running
with it?  The source is on github[2]

A cool thing about it technologically is that it pulls its data for
the menu from the same source[3] as the apps.fp.o landing page[4].
So, as we update that site, the menu will get auto-updated everywhere.
We can do other neat stuff like 'indicate the status of each app -- is
it working correctly at the moment or has the infra team marked it as
"down for maintenance"'.

Cheers-
 -Ralph

[1] http://threebean.org/fedmenu/
[2] https://github.com/fedora-infra/fedmenu/
[3] https://apps.fedoraproject.org/js/data.js
[4] https://apps.fedoraproject.org

[Ratnadeep Debnath]

Hi,

On Tue, Feb 17, 2015 at 11:28 PM, Ralph Bean <rbean(a)redhat.com&gt; wrote:
>  The demo is up on my website[1].
>
>  We have tons of apps run by Fedora Infrastructure and a long-time
>  complaint is that they have inconsistent theming, and no chrome that
>  ties them together -- that makes them look like they're all part of
>  the same thing.  Theming them consistently or adding a unifying chrome
>  would be awesome, but a very challenging and time-consuming task. 
The way to go
about will be to have base templates and static files as
a separate repository, where all the consistent look and feel related
work (navbar, forms, footer, etc.) goes.
Other projects can add this repo as a submodule and extend and
customize it as needed.

>  This little prototype is an attempt at making a single line of
>  javascript that we could include in each app to add a floating button
>  that pulls up a menu taking you to other Fedora apps.  It could
>  potentially display other information like "how to join!" and "don't
>  forget to book your tickets for Flock!" and.. etc.  It falls short of
>  a unifying chrome, but I tried to make it simple enough that it won't
>  collide with the layouts and style of other pages.. something we could
>  actually deploy without exhausting ourselves. 
The menu indeed looks nice. However, I have some concerns regarding
how new users will perceive it. Usually people are used to navbars and
sidebars in most websites. I think our menu content is much similar to
the navbar content at http://www.myntra.com/, top level menu items and
sub items for each top level item. http://www.myntra.com/ has
implemented the navbar with a lot of data in a very elegant way. We
can load the navbar as a separate snippet from our CDN. The cache in
the CDN gets invalidated and updated with changes happening for
apps.fp.o.

Regards,
rtnpro
-- 
Ratnadeep Debnath,
https://www.waartaa.com
GPG Fingerprint: 033C 8041 A0E9 CDBA 2E02  B785 2119 5486 F245 DFD6

[Ralph Bean]

On Wed, Feb 18, 2015 at 08:27:56AM +0530, Ratnadeep Debnath wrote:
>  Hi,
>  
>  On Tue, Feb 17, 2015 at 11:28 PM, Ralph Bean <rbean(a)redhat.com&gt; wrote:
>  > The demo is up on my website[1].
>  >
>  > We have tons of apps run by Fedora Infrastructure and a long-time
>  > complaint is that they have inconsistent theming, and no chrome that
>  > ties them together -- that makes them look like they're all part of
>  > the same thing.  Theming them consistently or adding a unifying chrome
>  > would be awesome, but a very challenging and time-consuming task.
>  The way to go about will be to have base templates and static files as
>  a separate repository, where all the consistent look and feel related
>  work (navbar, forms, footer, etc.) goes.
>  Other projects can add this repo as a submodule and extend and
>  customize it as needed. 
That would be awesome.  I agree that it's the right technical
solution.  There's a social element to the problem though, that we
all of our app developers haven't been able to settle on a common set
of tools, libs, and frameworks.  Some of us use bootstrap, some of us
use a 'koji.css' file that's been passed around, the qa-devel group
uses Zurb Foundation.. etc (we use different template engines as well.
Some jinja2, some mako, there are others).

Like I mention below, the hope with the prototype menu is that it can
be lightweight enough that it can work unintrusively in all those
environments -- that it can provide *some* commonality without trying
to force all these different development groups to make changes
they're unwilling to make.

>  > This little prototype is an attempt at making a single line of
>  > javascript that we could include in each app to add a floating button
>  > that pulls up a menu taking you to other Fedora apps.  It could
>  > potentially display other information like "how to join!" and
> "don't
>  > forget to book your tickets for Flock!" and.. etc.  It falls short of
>  > a unifying chrome, but I tried to make it simple enough that it won't
>  > collide with the layouts and style of other pages.. something we could
>  > actually deploy without exhausting ourselves.
>  
>  The menu indeed looks nice. However, I have some concerns regarding
>  how new users will perceive it. Usually people are used to navbars and
>  sidebars in most websites. I think our menu content is much similar to
>  the navbar content at http://www.myntra.com/, top level menu items and
>  sub items for each top level item. http://www.myntra.com/ has
>  implemented the navbar with a lot of data in a very elegant way. We
>  can load the navbar as a separate snippet from our CDN. The cache in
>  the CDN gets invalidated and updated with changes happening for
>  apps.fp.o. 
Cool.  To get it work as a navbar at the top we'd have to be able to
get it to play nicely with all the other nav bars that all our other
apps have built-in already (they almost all have a navbar at the top
already, so we'd have to insert our DOM elements above it or.. do
something fancy).  I'm afraid it would break, but I'll try and mess
with it and see if I can come up with something.  I used the
'bottom-left' corner for the little button on this because I couldn't
think of a Fedora App that's using that real-estate for anything
already.

[Ryan Lerch]

On 02/23/2015 03:43 PM, Ralph Bean wrote:
>  On Wed, Feb 18, 2015 at 08:27:56AM +0530, Ratnadeep Debnath wrote:
> > Hi,
> >
> > On Tue, Feb 17, 2015 at 11:28 PM, Ralph Bean <rbean(a)redhat.com&gt; wrote:
> >> The demo is up on my website[1].
> >>
> >> We have tons of apps run by Fedora Infrastructure and a long-time
> >> complaint is that they have inconsistent theming, and no chrome that
> >> ties them together -- that makes them look like they're all part of
> >> the same thing.  Theming them consistently or adding a unifying chrome
> >> would be awesome, but a very challenging and time-consuming task.
> > The way to go about will be to have base templates and static files as
> > a separate repository, where all the consistent look and feel related
> > work (navbar, forms, footer, etc.) goes.
> > Other projects can add this repo as a submodule and extend and
> > customize it as needed.
>  That would be awesome.  I agree that it's the right technical
>  solution.  There's a social element to the problem though, that we
>  all of our app developers haven't been able to settle on a common set
>  of tools, libs, and frameworks.  Some of us use bootstrap, some of us
>  use a 'koji.css' file that's been passed around, the qa-devel group
>  uses Zurb Foundation.. etc (we use different template engines as well.
>  Some jinja2, some mako, there are others). 
Yeah, this is pretty much the big issue here. Just observing, it seems 
that a lot of the new stuff going forward is beginning to use bootstrap, 
so having a theme for that might be the way to go. For all the other 
stuff, having a implementation somewhere that we can "fork" and keep 
with the other apps might be the way to go. This will be a maintainece 
nightmare, but it really is the best way to go, IMHO.

If we force the apps to fit the theme, it makes the templates and other 
app code more unmaintainable, so my theory here is to take the 
unmaintainabilty hit in the CSS, as we can at least see "visually" if an 
app looks like what we want.

Also, very interested in getting this consistent look and feel working 
-- It might be a good first step here to try to identify what apps we 
are talking about, and what backends / templating systems they use.

cheers,
ryanlerch
>  Like I mention below, the hope with the prototype menu is that it can
>  be lightweight enough that it can work unintrusively in all those
>  environments -- that it can provide *some* commonality without trying
>  to force all these different development groups to make changes
>  they're unwilling to make.
>
> >> This little prototype is an attempt at making a single line of
> >> javascript that we could include in each app to add a floating button
> >> that pulls up a menu taking you to other Fedora apps.  It could
> >> potentially display other information like "how to join!" and
> "don't
> >> forget to book your tickets for Flock!" and.. etc.  It falls short of
> >> a unifying chrome, but I tried to make it simple enough that it won't
> >> collide with the layouts and style of other pages.. something we could
> >> actually deploy without exhausting ourselves.
> > The menu indeed looks nice. However, I have some concerns regarding
> > how new users will perceive it. Usually people are used to navbars and
> > sidebars in most websites. I think our menu content is much similar to
> > the navbar content at http://www.myntra.com/, top level menu items and
> > sub items for each top level item. http://www.myntra.com/ has
> > implemented the navbar with a lot of data in a very elegant way. We
> > can load the navbar as a separate snippet from our CDN. The cache in
> > the CDN gets invalidated and updated with changes happening for
> > apps.fp.o.
>  Cool.  To get it work as a navbar at the top we'd have to be able to
>  get it to play nicely with all the other nav bars that all our other
>  apps have built-in already (they almost all have a navbar at the top
>  already, so we'd have to insert our DOM elements above it or.. do
>  something fancy).  I'm afraid it would break, but I'll try and mess
>  with it and see if I can come up with something.  I used the
>  'bottom-left' corner for the little button on this because I couldn't
>  think of a Fedora App that's using that real-estate for anything
>  already.
>
>
>  _______________________________________________
>  design-team mailing list
>  design-team(a)lists.fedoraproject.org
>  https://lists.fedoraproject.org/mailman/listinfo/design-team

[Ratnadeep Debnath]

On Tue, Feb 24, 2015 at 2:28 AM, Ryan Lerch <rlerch(a)redhat.com&gt; wrote:
>  On 02/23/2015 03:43 PM, Ralph Bean wrote:
>
>  On Wed, Feb 18, 2015 at 08:27:56AM +0530, Ratnadeep Debnath wrote:
>
>  Hi,
>
>  On Tue, Feb 17, 2015 at 11:28 PM, Ralph Bean <rbean(a)redhat.com&gt; wrote:
>  That would be awesome.  I agree that it's the right technical
>  solution.  There's a social element to the problem though, that we
>  all of our app developers haven't been able to settle on a common set
>  of tools, libs, and frameworks.  Some of us use bootstrap, some of us
>  use a 'koji.css' file that's been passed around, the qa-devel group
>  uses Zurb Foundation.. etc (we use different template engines as well.
>  Some jinja2, some mako, there are others).
>
>
>  Yeah, this is pretty much the big issue here. Just observing, it seems that
>  a lot of the new stuff going forward is beginning to use bootstrap, so
>  having a theme for that might be the way to go. For all the other stuff,
>  having a implementation somewhere that we can "fork" and keep with the other
>  apps might be the way to go. This will be a maintainece nightmare, but it
>  really is the best way to go, IMHO. 
+1

>  If we force the apps to fit the theme, it makes the templates and
> other app
>  code more unmaintainable, so my theory here is to take the unmaintainabilty
>  hit in the CSS, as we can at least see "visually" if an app looks like what
>  we want. 
I am not able to get the point here. Most templating solutions allow
extending from base templates and customizing them as needed. Links to
CSS are also part of the templates, usually, in some template blocks,
which can be extended or overwritten. By having a common codebase for
base templates will actually be a step towards DRY: Don't Repeat
Yourself approach.


>  Also, very interested in getting this consistent look and feel
> working -- It
>  might be a good first step here to try to identify what apps we are talking
>  about, and what backends / templating systems they use. 
I think we should standardizing and creating guidelines around how to
write apps for Fedora. We can have boilerplate codes in different
frameworks which people can fork/include and start working. If
individual projects need to override some UI or behaviour, they can
always do that. In this way, we try to enforce the common
theme/templates/styles for all Fedora apps and standardize and speed
up the app development process.


Regards,
rtnpro
-- 
Ratnadeep Debnath,
https://www.waartaa.com
GPG Fingerprint: 033C 8041 A0E9 CDBA 2E02  B785 2119 5486 F245 DFD6