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 👍

[andywer]

@Gaserd Haha :'D

[Gaserd]

@ai @andywer I think we leave our current icon 👍 And in future we have make new icon for this plugin, because I dont have idea for icon

[andywer]

@Gaserd Seems fair. But can we make it monochrome? ;)

PS: We can collect ideas here: #12

[Gaserd]

@andywer you could insert PostCSS logo in white color ?

[Gaserd]

@ai @andywer added small fix in mobile UI

[ai]

@Gaserd it is hard to understand that click on file block change plugin list. They looks like similar links. People will ask: “why nothing changed after I clicked on file block”

[Gaserd]

@ai Okay.

[andywer]

@Gaserd You are doing great work here! I wasn't sure if anyone really uses a debugging utility on their phone, but... It will be pretty cool for demoing!

We should put the inspector with some sample code in gh-pages so people can try it out without installing it and it will even be usable when they try it on their iPhone :)

[Gaserd]

@andywer Thanks and you are right!

[Gaserd]

@andywer are you life ?

[andywer]

@Gaserd Hey! Sorry for the delay. On one hand I have have been very busy the past days, on the other hand I guess I planned too much for the next release.

Here is the current roadmap:

1. Come up with postcss-debug webpack plugin (how to integrate with webpack #11)
2. Use webpack for the inspector
3. Use CSS modules and refactor styles (they have become really messy already)
4. Use stylelint
5. Put a sample installation on gh-pages

I should probably cut it down in favor of releasing soon.

[Gaserd]

@andywer Awesome! I can you help ?

[andywer]

@Gaserd I wish I could share some work on this, but I think this kind of refactoring requires too much insight into the code.

[Gaserd]

@andywer okay :)

[andywer]

@Gaserd I just recognized we still need a solution to prevent accidentally clicking the plugin documentation link when you want to expand a snapshot. This happens to me permanently when using the latest (not yet released) UI.

[Gaserd]

@andywer a4d140e...44980a1#diff-66d5b211acafc61a9b202fc438dc503eR46 see it. Delete "ы"

[Gaserd]

@andywer are you live ? :)

[andywer]

Hey @Gaserd. Yes, I am, but I was on holidays last week ;)

There are currently still two issues left:

• Usability: Plugin help link will now often be accidentally clicked (updated UI #10 (comment))
• Styles: The CSS files have grown wild and are pretty much unmaintainable now. Not sure how to solve this without re-writing the stylesheets completely... :-/

Sorry for the long delay!

[Gaserd]

@andywer Ow!
Maybe I help you with CSS yet you write nice core code ?
Push (commit) master branch and go write nice code
:)

[andywer]

@Gaserd Not sure if I got you right... Do you mean you can clean up the CSS? The problem is that I want to fix stuff before merging to master, since the master branch should always remain "clean(ish)".

And... we still have to come up with a solution for

Usability: Plugin help link will now often be accidentally clicked (#10 (comment))

Because that will annoy users a lot, I think.

[Gaserd]

@andywer Yeah, I sure can clean CSS.
I think about this problem:

Plugin help link will now often be accidentally clicked (#10 (comment))

I start today clean CSS in develop branch.

[Gaserd]

@ai @andywer

Plugin help link will now often be accidentally clicked (#10 (comment))

I think we can make so

[ai]

Looks good 😊

[andywer]

@Gaserd Yeah, I like it to :)

[Gaserd]

@ai @andywer Yeah! Congrats!

[andywer]

Just published version 0.4.0 with the updated UI. Will close this issue ☀️

[andywer]

Thanks @Gaserd!