topstyle frustrations and features

Post anything about TopStyle here. NOTE: TopStyle has been discontinued.

Moderator: TopStyle Support

Post Reply
pauls
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 3
Joined: Sat Dec 17, 2011 12:08 pm

topstyle frustrations and features

Post by pauls » Sun Dec 18, 2011 12:30 am

I've been using TopStyle from the start after first using Homesite for a long time. I have some comments and requests I'd like to make and I might sound harsh in stating them. I would like to apologize beforehand but I do this because I really love the product and would like it to become even better.
So before I start criticizing I'll heap up some praise:

I've been trying to dump TopStyle as my main css editor for a long time (reasons you can read further below) but I keep coming back for these reasons:

- (css) code insight: with code insight set to 0 seconds NOTHING comes even close to the speed with which you can code with TopStyle. All other products I've tried suck big time in comparison. This is the most important reason for me to stick to TopStyle, it is just fantastic!
- good default formatting/code completion: for css, this is how most devs code and it works beautifully.
- color help: having a pallet with used colors is really helpful, adding them in code completion is buttery sweet! Changing luminosity is also helpful in the context-menu.

While writing this I wondered, what is the focus of TopStyle? Is it a tool for code-writing pros or for more intermediate users? Devs I know generally just want a fast and focused text editor and don't need help or interpretation by the tool. As such I don't see much value in wizards or indicators which property is supported by what browser. I would rather have you spend your resources making this the best and fastest editor.
Nothing shouts behind-the-times more than indicating that a property is still supported by firefox 2. Nobody uses that browser anymore but support info for ff7 or ff8 is missing. That feature is unnecessary and impossible to maintain, specially now chrome and firefox have 6 week release cycles. I think you would be better off to drop the feature altogether. Or if you really feel the need to show some support, please refer or integrate with 3rd parties like http://caniuse.com or http://reference.sitepoint.com/. It's way too much work to do yourself. Besides, the specs also evolve faster than ever before.

When I ran TS5 for the first time I was greeted by some 1 time config options, which is fine. But when I saw I had to select a subset of css as my working definition I was like WTF? Why do I need to limit my options here? It just doesn't make sense. And there are too many options. And all of them shout: outdated! Also, targeting a particular browser to develop for is a bad practice, that's not how the web works and will misinform those who still need to learn. Pros on the other hand will know what definitions will and will not work for the project they're working on so please remove this selection from setup and just enable all css3 features. But then again, there is no css3 option. What's up with that? How can this be a modern editor without css3 support? Currently, the selection process is a stumbling block for using TS and communicates 'outdated'. It most certainly will turn many devs off from using this editor.

So please support all css3 property's and their possible default values. That includes gradients, which brings me to another wish.

It would be really helpfull to have a gradient editor. Have a look at http://www.colorzilla.com/gradient-editor/, it's a great tool I would love to have integrated in the editor. (although I don't care about the filter fallback for IE, filers are evil)

And also very helpful, not only for gradients, would be an option (in a context menu) to generate vendor prefixes from a selected property/value pair. That would be a time saver.

The preview pane is another one of the features most pros don't care about. We test in the browsers themselves. And they have wonderful tooling like the chrome devtools or firebug. It would be pointless to compete with those tools. For years it has been best practice to develop standard compliant first and then check for bugs in the less standard compliant browsers. It ensures better code. Having IE as the default for the preview works against this.

Even though the default code formatting options are good I think it would be good to expand them. It is currently not possible to create single line code or change the use of spacing very well. Code formatting is very personal so not being able to adapt a tool to your wishes will limit its appeal. Devs will not change their coding habits for a tool so getting more options here will help make TS more popular.

I read somewhere that you will add a dark color theme to TS, which is great. I'm looking forward to that. But please don't forget to change the color of the application chrome as well. Nothing more irritating that having a dark theme with a bright glowing border surrounding it.

Inline base64 encoding of image files would also make a nice extra option in the editor. Very useful for mobile development but for normal web development as well.

A nice to have feature would be to be able to select fonts from Googles free webfont archive.

Support for .less files and the less syntax would be very helpfull. Css preprocessors have become very popular and can really help in organizing large projects. You could leave the generation of the css files to other tooling or build processes but being able to edit the files (natively supported by TS) would be great.

In proper professional projects there is a difference between development code and production code. Production code is often concatenated and minified from several separate css source files. It would be great if TS would allow the configuration and execution of this process. Less also fits in nicely in this process. Responsive design adds another layer that makes configurable production sets more necessary. Please take a peek at what they are thinking about doing over at the bbc to get an idea of what I am talking about: http://blog.responsivenews.co.uk/post/1 ... hat-scales

Many people now use the html5boilerplate as their starting point. It would be great if TS would use it too [or steals good features from it ;)] http://html5boilerplate.com/

A minimap showing the document outline and being able to navigate it would rock. Please check Sublime Text 2 for a great example of this.

Lastly, I would really like TS to become a cross-platform tool. Most front-end developers use Mac computers now (I guess because OSX is Unix) so extending TS to that platform would greatly extend the potential users of your product. And your income :) I hope this is possible with the tool you use to write TS. I would love TS to get more enthusiastic users.

Anyway, thanks for reading this whole essay :)

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Mon Dec 19, 2011 2:21 pm

pauls wrote: Nothing shouts behind-the-times more than indicating that a property is still supported by firefox 2. Nobody uses that browser anymore but support info for ff7 or ff8 is missing. That feature is unnecessary and impossible to maintain, specially now chrome and firefox have 6 week release cycles. I think you would be better off to drop the feature altogether. Or if you really feel the need to show some support, please refer or integrate with 3rd parties like http://caniuse.com or http://reference.sitepoint.com/. It's way too much work to do yourself. Besides, the specs also evolve faster than ever before.
I know. It is a pain to keep up with the latest web browsers. For TopStyle 5, I'm planning a single (non-numbered) CSS definition for Firefox, in addition to new CSS definitions for Safari, Internet Explorer, and Chrome.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Mon Dec 19, 2011 2:36 pm

pauls wrote: When I ran TS5 for the first time I was greeted by some 1 time config options, which is fine. But when I saw I had to select a subset of css as my working definition I was like WTF? Why do I need to limit my options here? It just doesn't make sense.
You're not limiting your options. You're simply instructing TopStyle what CSS properties you want to see in property inspector and insight (in other words: what web browser you're targeting). If you want to see most (if not all) of the CSS 3 properties, then my advice would be to pick Safari. You can change the current CSS definition at any time and use some other CSS definition (there's a drop-down for this at the top of the property inspector).
pauls wrote: targeting a particular browser to develop for is a bad practice, that's not how the web works and will misinform those who still need to learn.
Agreed, and that's why TopStyle includes CSS definitions for CSS 1 and CSS 2 and CSS 2.1 (and for TopStyle 5, I'm planning on adding a new one for CSS 3). The web browser-specific CSS definitions are available mostly for validating purposes (the CSS definitions are powering the TopStyle Style Checker, too).
pauls wrote: Pros on the other hand will know what definitions will and will not work for the project they're working on so please remove this selection from setup and just enable all css3 features.
For TopStyle 5, I'm planning on defaulting to the CSS 3 definition.
pauls wrote: But then again, there is no css3 option. What's up with that? How can this be a modern editor without css3 support?
TopStyle 5 is maintained by a single guy shop, and it is difficult to keep up with the latest developments. I have decided to postpone CSS 3 because up to this moment, it was a moving target. However, TopStyle 5 will include a CSS 3 definition for sure.
pauls wrote: Currently, the selection process is a stumbling block for using TS and communicates 'outdated'. It most certainly will turn many devs off from using this editor.
I know, but there is only so much I can do. If someone would like to volunteer and update the CSS definitions, I'm all ears. I'd be happy to pay you some money and mention your name in the TopStyle 5 about box.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Mon Dec 19, 2011 2:39 pm

pauls wrote:It would be really helpfull to have a gradient editor. Have a look at http://www.colorzilla.com/gradient-editor/, it's a great tool I would love to have integrated in the editor.
Interesting thought. I have added this to my list of things ToDo for TopStyle 5. No promises though.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Mon Dec 19, 2011 2:42 pm

pauls wrote: It is currently not possible to create single line code
Have you seen this feature? CSS > Format Style Rule as Single Line

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Mon Dec 19, 2011 2:52 pm

pauls wrote: Many people now use the html5boilerplate as their starting point. It would be great if TS would use it too [or steals good features from it ;)] http://html5boilerplate.com/
I love html5boilerplate, too. I'm planning on supporting this in TopStyle 5 (for example: File > New Site > HTML 5 Boilerplate)
pauls wrote: A minimap showing the document outline and being able to navigate it would rock.
For TopStyle 5, I'm planning a feature where you can easily select parent (or child) tags via the keyboard (for example: Esc navigates to the parent tag). As part of this feature, I'm also planning some new sort of view that displays the hierarchy of tags in your HTML document.
pauls wrote: Lastly, I would really like TS to become a cross-platform tool. Most front-end developers use Mac computers now (I guess because OSX is Unix) so extending TS to that platform would greatly extend the potential users of your product. And your income :) I hope this is possible with the tool you use to write TS. I would love TS to get more enthusiastic users.
I'm afraid I have to disappoint you here. TopStyle is (and probably always will be) Windows-only. However, I'm actually running a Mac myself and I do love Parallels.
pauls wrote: Anyway, thanks for reading this whole essay :)
Thanks for the feedback! I appreciate you taking the time writing all this stuff down. And yes, I'll definitely consider some of these features for TopStyle 5.

pauls
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 3
Joined: Sat Dec 17, 2011 12:08 pm

Re: topstyle frustrations and features

Post by pauls » Thu Dec 22, 2011 9:36 pm

TopStyle Support wrote: For TopStyle 5, I'm planning on defaulting to the CSS 3 definition.
Great! I'm looking forward to that.
TopStyle Support wrote: I know, but there is only so much I can do. If someone would like to volunteer and update the CSS definitions, I'm all ears. I'd be happy to pay you some money and mention your name in the TopStyle 5 about box.
I don't really have time for that although I might have a go at it once TS5 is out. But here's a thought; how about putting the definitions up on Github and let people fork it? That way anyone can contribute, even by only changing one property. You would still be in control but it would be public, so maybe not what you want.
TopStyle Support wrote: I have added this to my list of things ToDo for TopStyle 5. No promises though.
Understood! Would be very cool tho ;)
TopStyle Support wrote: Have you seen this feature? CSS > Format Style Rule as Single Line
Oops, my bad
TopStyle Support wrote: I'm planning on supporting [html5boilerplate] in TopStyle 5
very cool!
TopStyle Support wrote: As part of this feature, I'm also planning some new sort of view that displays the hierarchy of tags in your HTML document.
Although that sounds helpful for html, it doesn't help with js or css editing. A minimap would help whatever you would edit. It shows a zoomed out view of the entire document, including syntax highlighting. Since it's the same as the "zoomed-in" view (the normal editing window) it is very easy to spot where you want to go. Just underneath the two orange blobs that represent gradientblocks with their fallbacks, for example, and you just slide your view to that area. It's really superhandy and fast, you should give it a try. I would love to see that in TS5.

Thanks for listening, it is really nice to have the opportunity to give feedback so directly.

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Wed Mar 07, 2012 6:38 am

Hi pauls,

I have added a few of your requests to the latest TopStyle 5 beta (available for download here: http://svanas.dynip.com/topstyle/beta.html)
pauls wrote:there is no css3 option. What's up with that? How can this be a modern editor without css3 support?
http://svanas.dynip.com/topstyle/downlo ... .html#css3
pauls wrote:A nice to have feature would be to be able to select fonts from Googles free webfont archive.
http://svanas.dynip.com/topstyle/downlo ... _web_fonts
pauls wrote:In proper professional projects there is a difference between development code and production code. Production code is often concatenated and minified from several separate css source files. It would be great if TS would allow the configuration and execution of this process.
http://svanas.dynip.com/topstyle/downlo ... l#css_tidy
pauls wrote:A minimap showing the document outline and being able to navigate it would rock.
http://svanas.dynip.com/topstyle/downlo ... ture_panel

User avatar
TopStyle Support
Rank VI - Professional
Rank VI - Professional
Posts: 507
Joined: Sat Jun 13, 2009 12:38 pm
Contact:

Re: topstyle frustrations and features

Post by TopStyle Support » Fri Mar 09, 2012 2:12 pm

pauls wrote:It would be really helpfull to have a gradient editor. Have a look at http://www.colorzilla.com/gradient-editor/, it's a great tool I would love to have integrated in the editor.
I have added this to the latest TopStyle 5 beta: http://svanas.dynip.com/topstyle/downlo ... _generator

Post Reply