website improvements

[ghost]

@fisherman/all

Now that fin has ended and we are back to fisherman, it would be nice to have another look at the website and remove some of the cruft / redesign some of it. Perhaps even make it only a plugin search UI :)

Because so much have changed, I have drastically reduced the current website to just the original search functionality and removed the feature / footer sections and titles / sub titles. It looks weird now, but the search is untouched.

[sijad]

• how about show install instruction before plugins search?
• maybe smaller search results?

[ghost]

Yeah, why not.

[sijad]

maybe showing two result in a row? that can be possible I guess

[ghost]

I am not against of anything really. The website is just a means for users to search content, so it should make it simpler or more obvious. Maybe we can even remove the fisherman logo from the center and make it just a little footprint on the top / bottom and something more like: http://gulpjs.com/plugins/

[sijad]

nice idea, how about a separated page and link for plugins just like gulpjs and a simple front page with logo and install instruction?

[sijad]

IMO install instruction is a little more important that plugins, it's confusing when they don't know how can they install fisherman also it can be a good idea to add a little button for each search result to show install instruction for each plugin, it can show a modal with a little text input to tell user copy and paste that code in terminal for install the plugin

edit: modal some times can be annoying, it can be also a button to copy that text to user clipboard

[ghost]

nice idea, how about a separated page and link for plugins just like gulpjs and a simple front page with logo and install instruction?

Could work. Yes!

IMO install instruction is a little more important that plugins, it's confusing when they don't know how can they install fisherman also it can be a good idea to add a little button for each search result to show install instruction for each plugin, it can show a modal with a little text input to tell user copy and paste that code in terminal for install the plugin

edit: modal some times can be annoying, it can be also a button to copy that text to user clipboard

This is okay too, but then isn't that too much work? The idea is to ship something useful and fast.

[sijad]

yes but user should know how to install that plugins, maybe a little note before search text box or something?

[jethrokuan]

re: copy to clipboard, should be easy: https://clipboardjs.com/

[jethrokuan]

Plugin search can be revamped:

I'm thinking if it's a separate page we could do really interesting stuff:

It could work like google fonts, where they can choose plugins to install by clicking use or something and it forms up the command in the end, which could be easily copied to the clipboard.

[ghost]

yes but user should know how to install that plugins, maybe a little note before search text box or something?

Yeah, that too, and instructions are simple to infer as well:

If plugin is in fisherman org:

fisher PLUGIN_NAME

else

fisher USER_NAME/PLUGIN_NAME

[sijad]

I still thing it can help user to see install instruction for each plugin, I like @jethrokuan idea a lot, user can select multiple plugin and install them by one command, that's very interesting

[ghost]

I still thing it can help user to see install instruction for each plugin,

Yeah, sure, why not.

[herrbischoff]

You are sick for a couple of days and suddenly everything is different! :D Just wanted to say that I'm still on board with taking point on building the (now Fisherman instead of fin) site, if you're okay with that.

First meta input for the site: as it is all too often forgotten, we need to keep the focus on what a visitor would expect, not what we would like to implement. A site is for visitors after all. Therefore, I suggest skipping all kinds of "fancy" functionality like

It could work like google fonts, where they can choose plugins to install by clicking use or something and it forms up the command in the end, which could be easily copied to the clipboard.

Reasoning: first-time users need plugin descriptions, which would be hard to do while keeping the list compact and without fuss. First-time users shouldn't install dozens of them at once anyway and current users already have their bundle file.

[ghost]

@herrbischoff Should I create a new design or can you work with the existing theme? Maybe we should just start from scratch (but keeping @jethrokuan search scripts), my original html/css was pretty crappy.

[herrbischoff]

I like the clean look of the current website. If you have something that's just itching you to be changed, let me know. Otherwise I'll be taking the current source and clean it up. It needs to be converted to pug (formerly Jade) anyway. ;)

[ghost]

@herrbischoff Have you seen the latest modifications I made? I removed almost everything, leaving only the search. If we are going to go the only search route, then we should redesign it, else, we can go to something more similar to what we had before, just better written.

Or, we could readapt some of the fin r.i.p assets.

[herrbischoff]

@bucaran: Alright, then give me something to go on folks. ;) Redesign means what exactly? Examples of websites you like, even just parts of it, would be helpful.

[ghost]

Okay, do you think we need a fisherman landing page with the search builtin, or have both separate?

[herrbischoff]

I like search but it would be cool to have something like the gulp page where all plugins are listed in an endless scroll but you can filter down by entering something in the search window. I believe someone wrote that earlier but I'm too lazy to look. ;)

So, I'm thinking extremely simple landing page with the one-line install instructions and a list of plugins with filter on a separate page.

Edit: Ah, here it was.

[ghost]

@herrbischoff

So, I'm thinking extremely simple landing page with the one-line install instructions and a list of plugins on a separate page.

Yes, we don't need an entire new theme for that, we already have the logo and the colors and overall look of the current page should not change that dramatically.

And yes, an infinite scroll sounds better than the current search bar (which was my bad idea btw not @jethrokuan's ;))

[herrbischoff]

@bucaran: For reference, like that: http://gulpjs.com

[herrbischoff]

Yes, we don't need an entire new theme for that, we already have the logo and the colors and overall look of the current page should not change that dramatically.

Good to hear. I can concoct some cross between gulp and the current Fisherman page without completely ripping off the look of the first.

[jethrokuan]

Given that the website is going to be a lot simpler, I hardly see the need for a templating library now, let alone a site generator like jekyll. It'd be a lot easier to work on plain static html and css.

[herrbischoff]

@jethrokuan: Plain HTML may do (but why, when pug is so much nicer and will be compiled to HTML anyway) but writing plain CSS in a responsive world with tons of browser-specific prefixes comes dangerously close to punishing yourself for no reason... ;P Believe me, I do that kind of thing for a living.

[jethrokuan]

@herrbischoff because everyone would have to download a pug to html compiler in order to effectively contribute. I redid the css in sass for the same reason, and I realized the same.

[herrbischoff]

@jethrokuan: Well, I feel that providing a complete package (via gulp) should alleviate that. All you'd have to do is npm install and gulp and you'd be off to the races.

[jethrokuan]

I'm not particularly against that, but @bucaran had something to say back then.

[herrbischoff]

Alright, @bucaran, let's hear it! :D

[ghost]

Yup, I did. My reasoning was, if you add a lot of cool stuff, then, who's going to be responsible for maintaining that? So, I was just looking after myself, but things have changed a lot recently...

so if @herrbischoff feels he is more productive in pug and the rest of the stack he is proposing, then go ahead.

@jethrokuan Sorry 😓

[herrbischoff]

For the record, I would be fine with plain HTML but I will not give up on my Stylus. :)

[ghost]

@herrbischoff Pug is no problem.

You can write the front end in Elm if you like.

[jethrokuan]

@herrbischoff go ahead then (:

[herrbischoff]

@bucaran: Ahh, I remember the chat. Elm — gotta dive into that some time. Still, not search friendly at all, that stuff.

[herrbischoff]

@jethrokuan: I promise to keep the stack minimal. No need to tack on loads of junk. ;)

[jethrokuan]

feel free to rewrite the seach script with mithril/vue/whatever, it was quite poorly done.

[herrbischoff]

We will see. I was thinking vanilla JS and see how far we can get without adding framework overhead.

[herrbischoff]

@bucaran: Where should I put the development site? Also, how about the GitHub buttons? Should they stay or go? I would say drop 'em.

[ghost]

Here: https://github.com/fisherman/fisherman.github.io

Also, how about the GitHub buttons? Should they stay or go? I would say drop 'em.

Why?

[ghost]

I just pushed a new sticky footer, fixed broken links, cleaned up a little bit the html and removed some of the css that we don't use anymore. It's still quite messy.

One more thing I added is "search all by default", so while it's still not the "infinite scroll" thing, it's more convenient than forcing users to start typing before they can see anything.

You could start on tidiying up everything, I am pretty sure my html still sucks and removing all the cruft as your rewrite the CSS with Stylus.

So, for starters let's just use Stylus and consider adding pug later. Why? Because HTML is quite simple and there is nothing fancy here.

The CSS on the other hand... :)

[herrbischoff]

Yeah, I've already started on the site. Using pug however. You'll see: it's a lot less clutter with it. Besides, I've really come to despise any kind of XML.

I'm in the middle of rewriting the main HTML code (which is indeed quite... creative) and cleaning up the CSS to be used in Stylus. I'm throwing away about 90% of the current work to build a far more simple and clean setup. Bootstrap may have been okay for a quick hack but the constant overwriting of default styles is tiresome — and extra overhead. I'm defining a micro responsive behavior, courtesy of Jeet and Rupture. I have found Bootstrap really only shines for quick and simple web applications, everything else inevitably leads to headaches. Plus, I'm going ahead with the separate plugin page, so the landing page can be very clean. That's also the reason I feel those GitHub buttons don't quite fit in.

If this seems to be to radical an approach, feel free to stop me. ;)

What I cannot seem to find is the "sticky footer" you mentioned. Is this the anchor image on the right?

[ghost]

I've really come to despise any kind of XML.

I hear you.

What I cannot seem to find is the "sticky footer" you mentioned. Is this the anchor image on the right?

The sticky footer is just blue like the background of the page so you can't see it, but if you were to change the color it would stick to the bottom. A true 21st centruy accomplishment.

If this seems to be to radical an approach, feel free to stop me. ;)

Go ahead.

[gretel]

no xml fine but how about json?

[ghost]

@gretel How about entirely dropping the index and just querying the GitHub API?

@jethrokuan So long and thanks for all index? :)

[gretel]

@bucaran ah sure that does return json indeed doh 😝

[jethrokuan]

@bucaran sure, whatever works!

[ghost]

@herrbischoff Do you have anything to show?

[ghost]

@fisherman/all @jethrokuan

I think the index has served us well, but it's time to move on and start to query the organization for plugins instead of depending on the index.

[jethrokuan]

this means that anything not in the fisherman org won't be displayed by default, right?

I thought the original idea was to have some indexable file in each plugin repo, and query github for that.

[ghost]

Yeah.

I thought the original idea was to have some indexable file in each plugin repo, and query github for that.

I thought about that too, but if we make the org contain only fish plugins, then we don't have to worry about black-listing non-plugins and it makes it easier to use the GitHub API to search plugins, which is how fisherman does it internally too btw.