Better visual desing

[ai]

Out current UX is nice, but we need better visual design:

1. Better fonts
2. More modern controls

We could always try Material design, its visual langauge pretty nice and better then nothing (but custom visual design will be nicer).

With better visual design this tool will look more professional.

[Gaserd]

We can try Material design, but i dont like material design :) What you like fonts ? Current font - Roboto, san-serif.

[ai]

Yeap, I agree that Metarial is to mainstream :).

Hm, maybe font problem is already closed.

[Gaserd]

We can try, and see -> good Material design or not good :) In our case

[Gaserd]

I make Material design, but dont make "code area"

ScreenShot :

[ai]

I like it. And it doesn't look too material, which is cool.

Links to documentation is nice idea.

We need to return info badge to plugins.

There is only one UX issue right now: we don't show that plugins are inside opened file. Maybe we should make files aside like app left menu panel with full height from header to bottom of the page?

[andywer]

Yeah, looks nice, yet not too materialish.

@Gaserd What's the difference between 'Documentation' & 'GitHub'? The only documentation right now is on github 😅 @ai What do you mean by "we don't show that plugins are inside opened file"?

[ai]

@andywer I mean, that we don't show clicking on file will reload plugin sections. That plugins is a content of current file.

[Gaserd]

@ai @andywer Ok. I think about this

[Gaserd]

@andywer @ai I make this.

1 - Under the heading "file" show plugins 2 - Under the heading "plugin" show small text about this plugins and click this text go to npm

[andywer]

@Gaserd Interesting, but I see two problems... First, the executed plugins will be the same for all files, so showing there should be no need to show them for every file separately.

Secondly, showing some description text for the plugin is way more complicated then just linking to it. Not impossible, but a lot of effort.

[Gaserd]

@andywer hm hm hm.

[Gaserd]

@andywer back (?) for link npm ? :)

But,user may be use different plugins for different files

[andywer]

@Gaserd You run postcss on your files with using some set of plugins, but you cannot change the plugins array during execution, so in practice there cannot be different plugins for different files. At least I cannot see a way to accomplish that.

Problem with the description is that we would need to fetch the package.json (or the github landing page) of each plugin used to get the description. Creating the link was simple: https://www.npmjs.com/package/${pluginName}

[Gaserd]

@andywer Okay 👍

[ai]

We could try to take plugin description by:

let pkg = require('PLUGIN/package.json')
pkg.description

[andywer]

@ai I fear that's not going to work, since this would be resolved to path/to/postcss-debug/node_modules/PLUGIN/package.json...

[ai]

@andywer you don’t need to resolve, npm will do it for you. require('plugin') works, so require('plugin/package.json') will work too.

[ai]

@andywer if you don’t start path from ./ npm will automatically find directory. this is why you could write require('postcss/parse') too

[andywer]

@ai I am speaking of how node resolves when requiring like require('foo/file.ext'). If you don't start with ./ it will look for foo/file.ext in path.join(__dirname, 'node_modules'). Since postcss-debugger source files are not in your project directory where you have your CSS files, it will not find the plugin.

Or am I missing something else?

[ai]

@andywer node.js will look at ./node_modules, if it will not find file it will look then in ../node_modules, then in ../../node_modules/ and in all other dirs.

So it will find plugin in most of cases. Especially if plugin is in project package.json.

Also in npm@3 all modules are in flat node_modules.

[andywer]

@ai Ahh, you know what? I think we had two different use cases in mind... You were rather thinking of a locally installed postcss-debug used by code (I guess) and I was thinking of a globally installed postcss-debug used via CLI :)

[ai]

@andywer global npm install is evil :)

[andywer]

@ai Haha! Fair enough ;)

[Gaserd]

• added link for plugin under headline plugin
• added time for plugin
• added time for file
• added size file
• added button fullscreen for code block
• added full path for file
• fix small padding and margin

[Gaserd]

• added DarkTheme

[andywer]

Looks cool, but I think we should stick to one theme. Maybe open a twitter poll on which theme to use?

[Gaserd]

@andywer I think about switch theme. Pressed Ctrl+D and switched theme, but you can open twitter poll on which theme :)

[andywer]

@Gaserd Sounds nice, but it's still a small debugging utility. Let's not over-engineer :)

[Gaserd]

@andywer it is now a small debugging utillity, tommorow it is a big project about it all speaking 👍

[Gaserd]

Start twitter poll about themes. This is will fun 👍

[ai]

@Gaserd awesome! should we show start-end file fize?

[andywer]

https://twitter.com/andywritescode/status/738675228491010048

[ai]

@andywer twitter poll! Any mention of tools increase popularity.

But don’t forget ping me with a link to RTs

[Gaserd]

@ai I think about this :) And I started make this UI in HTML, CSS

[ai]

@andywer can you repost tweet with [Poll] text in tweet (many clients still don’t show a poll in tweet block and user need to know that it is a poll). Also if you remove a hash-tag and user mentions (@PostCSS @gaserd123) it will increase readability

[andywer]

@ai @Gaserd Deleted old tweet and created a new one.

[ai]

@andywer thanks :) I also scheduled post in Russian Facebook (we have a community there)

[Gaserd]

@andywer Good 👍

[Gaserd]

What think about this logo ? @ai @andywer

[ai]

Monochrome version will be better, because you have no green colors in UI.

[andywer]

@ai I agree, monochrome would be better. Or maybe black and white and a color we already use (but I am not a designer, so feel free to ignore).

I think it looks nice, but what is it? Not sure if it's a camera 😅

[Gaserd]

@andywer this is head cosmonaut 👍

[Gaserd]

May be create twitter post about new icon for PostCSS-webdebugger ? @ai @andywer

[ai]

Yeap, more tweets 😊👍

[Gaserd]

Okay, wait Andy ? Or maybe I create tweet of new icon for PostCSS-webdebugger?

[andywer]

@Gaserd Do you mean if you should wait until I finish merging? We could tweet once about the new icon (before finalizing the updated design) and tweet a 2nd time when the new release is out ;)

[Gaserd]

@andywer Yes, i waiting your merging 👍 And you are right, create tweet when the new release UI. But we will to increase interest for our plugin if we will create more tweets our changes for UI or Core, even if this changes very small

[ai]

we will to increase interest for our plugin if we will create more tweets our changes for UI or Core, even if this changes very small

Yeap, it is how marketing works :)

[Gaserd]

@ai Yeah 👍

[Gaserd]

Tweet: https://twitter.com/gaserd123/status/740477326497054724