HabrAjax script beta has been released
The script and styles for Habr laid out in use and further development. The number of “features” is quite large, therefore, in order not to delay further development, the scripts and styles are worked out to the necessary minimum. There is no point in improving endlessly, because the site constantly adds new codes and layout, the old one breaks down, the functions have to be restored. Therefore, the idea of displaying in the "beta" format is that different users, inspired by the shell's capabilities (scripts and styles), imbued with the idea of small modifications "for themselves" of this basic script, and then the overall work would go much faster. After all, it is not at all difficult and interesting to spend the evening for a beautiful “feature” on 30-50 lines of code, but when there are 20 such features, so many evenings become missed and other forces need to be connected.
0. The idea of separate use of styles and script.
Yes, you can download only styles ( ZenComment ) in Stylish (Firefox, Chrome) or in the Opera settings, or In IE, or in Safari, and you can add them or INSTEAD of them - install user scripts ( HabrAjax , also in any browser, but not IE), which allows you to run and evaluate all styles (by turning on the setting), but the script will be triggered in the first 1-2 seconds after loading, so it’s better, all the same TOGETHER.
1. The idea of compact texts.
A lot of white space is also good and even excellent, but the extra press of the PageDown button starts to distract from the content. Under the slogan "Read, not scroll!" Styles are built and the look of the site is transformed. For example, for the needs of the header, exactly one line (22 pixels) is allocated - and why more? There is a logo, site search, two menus and all links from them.
2. Compact annotations.
Rough-end letters in the tape, in the headlines - to anything. We manage a little larger than the main text. The script additionally handles what styles are not able to perform - for example, reduces the font of very long headlines, shortens long blog names.
')
3. Uploading articles without reloading the page.
The main feature of the script with which it began. Clicking on "Read more", we directly in the text of the page get a view of the article and comments (separately) and the possibility of folding them. (Some pages - QA, favorites, “Mine” - while they do it not very well, but in readability; finish them is a matter of time.)
4. Disable various features.
The possibilities, of course, are good, but even better when you can choose them. For this, numerous settings have been made. Each significant opportunity has a button disable itself in the settings. (It is possible to memorize the settings, but for now this is in the development process. You can switch now by setting the numbers 0 and 1 in the script code itself.)
5. Remove the “like” buttons, add the “Google Plus” button.
Both in annotations and in separate articles the G + button is added, if this option is enabled in the settings. It is interesting to observe that many people “plus” articles (through the browser add-on), although there is no such button on Habré.
6. Remove the numbers of the current year.
The date of the current year or the last 8 months removes the year. After all, we all know him? (No? Then it is turned off in the settings.)
7. Search the site for Google and Yandex.
Someone had such an addon, not working for a long time. How useful this opportunity will be is unknown, but you can try. At the same time, by pressing Ctrl or Shift, the search results on any of the 3 buttons will open in a new window. (And by Enter - in your window, and by clicking on the button - in a half-height frame.)
8. Auxiliary pages - in the frame.
Personal user cards, favorites, site settings - open in a half-height frame. You do not have to switch windows or tabs, inside the frame you can navigate and close it with one click.
9. Compact view of comments.
Under the same motto “Read, not scroll!” Comments are mercilessly stung. Regarding the submission of comments, you can make various improvements in the script, but for now there are 3 modes for viewing them. The first is without any styles at all (do not load or disable the “ZenComment” add-on styles), the scripts will work, but in some places it will need refinement for quality. The second is the “Zen” mode - the comments are very compact, the scores are not visible and can only be viewed by mouseover. The third - the “Compact” mode - is slightly less compact and with ratings.
(Unfortunately, the site is replete with a number of layouts of different types of comments, and setting them all up is quite laborious and useless, it’s better to use more. Types of layouts are: main tape, article from company blog, question-answer article, Favorites (or your articles Therefore, the fact that some pages look different, and some unfinished ones is due to different layouts and quite frequent changes in the last 2-3 months. But this does not eliminate the desire to read a better quality of text, therefore they are being done a little.)
You should look at the comments viewing modes as if at a research laboratory - we do not have a service for clients, but a study of various types of interfaces and their usability. But now, after publication, everyone will be able to finalize and propose their own layout, or at least their own ideas. How? The next item.
10. Built-in bugtracker and idea collector.
If a question arises, an idea has appeared or a new bug has been noticed - all wishes can be expressed by clicking the “Bugs” button, which hangs on the page on the right. This is how you can organize and bring to the attention of the developers of errors or share ideas.
11. Minimize podcasts;
12. forced kat (in even more beta and more ideas than done);
13. tint transfers, company names;
14. coloring of authors of comments (up to 20 colors);
15. Replacing vertical spaces with low gray blocks of 3 pixels.
16. hide individual sidebar blocks (up to 4);
17. hide the entire sidebar;
18. Sidebar do not hide, move to the bottom of the page;
19. Replacing the inscriptions “about UFOs” with more understandable small texts on a gray background that do not take up space. Reducing the “inner voice” font.
20. Buttons for entering into the input field tags SOURCE with languages, tags of color and quotations.
21. Extremely compact browsing mode with a window width of 320 pixels.
22. Turn off the display of avatars.
Access to settings in Firefox is possible in 2 ways, in other browsers - one. The link under the name “HabrAjax” is in the user menu (if you hover the mouse on the right corner). By clicking - opens a list of settings. After clicking the "Save" button, they will take effect after the restart of the browser window or in any other new window of the same browser.
In Firefox, there is an additional menu item in the status bar, which opens by right-clicking on the Greasemonkey or Scriptish icon. Next - “User Scripts Commands”, then - “HabrAjax: settings”.
The experience of my use of these styles - from October 2010 and earlier months 4-6 - the prototype. Experience with color highlights of the authors is about 6 months. It helps to distinguish between authors without looking at their nickname or avatar, which, as a result, creates a more ordered perception of information (allows you to reduce the font for names and refuse to view avatars). ZenComment styles, Zen mode (gray fields) in use - about 3 months. According to reviews, I added a more rarefied Compact style about a month ago and used it. Feels like, “Zen” limits viewing ratings, so it seems that something is missing, “Compact” does not create such a feeling.
They, of course, are, both close and distant and not related to the site. You can talk for a long time and sometime you need to do this “roadmap” in order to coordinate work with potential enthusiasts. Now I am not ready to tell everything consistently, but I should mention the main one.
1. Refinement of styles QA and Favorites + Svoe.
2. Management of settings through the interface, but not through the code, as now.
3. To achieve portability settings with changing versions of the program.
4. Make the plug-in mechanism — small scripts that start when the main script is found that supports the basic features: working with DOM, c versions and plug-ins. Define plugin connection points for various events (for example, loading an Ajax article).
This program of actions is conditional, for a month. The most interesting point is the last one, but you have to go to it through the decision of the previous ones, so that it will be a subject for further work. Then, with the plug-in mechanism, the development of extensions for the site will rise to a higher level - you do not have to write the infrastructure every time you want to do something for yourself in a few hours.
It is not by chance that the script is laid out before long weekends - for sure, those who want to practice scripts and styles will have time during these long days.
References:
* Styles for Habr: ZenComment ;
* User script for Habr: HabrAjax .
What are the scripts and styles?
0. The idea of separate use of styles and script.
Yes, you can download only styles ( ZenComment ) in Stylish (Firefox, Chrome) or in the Opera settings, or In IE, or in Safari, and you can add them or INSTEAD of them - install user scripts ( HabrAjax , also in any browser, but not IE), which allows you to run and evaluate all styles (by turning on the setting), but the script will be triggered in the first 1-2 seconds after loading, so it’s better, all the same TOGETHER.
1. The idea of compact texts.
A lot of white space is also good and even excellent, but the extra press of the PageDown button starts to distract from the content. Under the slogan "Read, not scroll!" Styles are built and the look of the site is transformed. For example, for the needs of the header, exactly one line (22 pixels) is allocated - and why more? There is a logo, site search, two menus and all links from them.
2. Compact annotations.
Rough-end letters in the tape, in the headlines - to anything. We manage a little larger than the main text. The script additionally handles what styles are not able to perform - for example, reduces the font of very long headlines, shortens long blog names.
')
3. Uploading articles without reloading the page.
The main feature of the script with which it began. Clicking on "Read more", we directly in the text of the page get a view of the article and comments (separately) and the possibility of folding them. (Some pages - QA, favorites, “Mine” - while they do it not very well, but in readability; finish them is a matter of time.)
4. Disable various features.
The possibilities, of course, are good, but even better when you can choose them. For this, numerous settings have been made. Each significant opportunity has a button disable itself in the settings. (It is possible to memorize the settings, but for now this is in the development process. You can switch now by setting the numbers 0 and 1 in the script code itself.)
5. Remove the “like” buttons, add the “Google Plus” button.
Both in annotations and in separate articles the G + button is added, if this option is enabled in the settings. It is interesting to observe that many people “plus” articles (through the browser add-on), although there is no such button on Habré.
6. Remove the numbers of the current year.
The date of the current year or the last 8 months removes the year. After all, we all know him? (No? Then it is turned off in the settings.)
7. Search the site for Google and Yandex.
Someone had such an addon, not working for a long time. How useful this opportunity will be is unknown, but you can try. At the same time, by pressing Ctrl or Shift, the search results on any of the 3 buttons will open in a new window. (And by Enter - in your window, and by clicking on the button - in a half-height frame.)
 |
|---|
8. Auxiliary pages - in the frame.
Personal user cards, favorites, site settings - open in a half-height frame. You do not have to switch windows or tabs, inside the frame you can navigate and close it with one click.
9. Compact view of comments.
Under the same motto “Read, not scroll!” Comments are mercilessly stung. Regarding the submission of comments, you can make various improvements in the script, but for now there are 3 modes for viewing them. The first is without any styles at all (do not load or disable the “ZenComment” add-on styles), the scripts will work, but in some places it will need refinement for quality. The second is the “Zen” mode - the comments are very compact, the scores are not visible and can only be viewed by mouseover. The third - the “Compact” mode - is slightly less compact and with ratings.
|
|---|
(Unfortunately, the site is replete with a number of layouts of different types of comments, and setting them all up is quite laborious and useless, it’s better to use more. Types of layouts are: main tape, article from company blog, question-answer article, Favorites (or your articles Therefore, the fact that some pages look different, and some unfinished ones is due to different layouts and quite frequent changes in the last 2-3 months. But this does not eliminate the desire to read a better quality of text, therefore they are being done a little.)
You should look at the comments viewing modes as if at a research laboratory - we do not have a service for clients, but a study of various types of interfaces and their usability. But now, after publication, everyone will be able to finalize and propose their own layout, or at least their own ideas. How? The next item.
10. Built-in bugtracker and idea collector.
If a question arises, an idea has appeared or a new bug has been noticed - all wishes can be expressed by clicking the “Bugs” button, which hangs on the page on the right. This is how you can organize and bring to the attention of the developers of errors or share ideas.
A number of smaller features (all disabled):
11. Minimize podcasts;
12. forced kat (in even more beta and more ideas than done);
13. tint transfers, company names;
14. coloring of authors of comments (up to 20 colors);
15. Replacing vertical spaces with low gray blocks of 3 pixels.
16. hide individual sidebar blocks (up to 4);
17. hide the entire sidebar;
18. Sidebar do not hide, move to the bottom of the page;
19. Replacing the inscriptions “about UFOs” with more understandable small texts on a gray background that do not take up space. Reducing the “inner voice” font.
|
|---|
20. Buttons for entering into the input field tags SOURCE with languages, tags of color and quotations.
|
|---|
|
|---|
21. Extremely compact browsing mode with a window width of 320 pixels.
 |
|---|
Where are the settings and how to work with them?
Access to settings in Firefox is possible in 2 ways, in other browsers - one. The link under the name “HabrAjax” is in the user menu (if you hover the mouse on the right corner). By clicking - opens a list of settings. After clicking the "Save" button, they will take effect after the restart of the browser window or in any other new window of the same browser.
In Firefox, there is an additional menu item in the status bar, which opens by right-clicking on the Greasemonkey or Scriptish icon. Next - “User Scripts Commands”, then - “HabrAjax: settings”.
Experience testing this interface
The experience of my use of these styles - from October 2010 and earlier months 4-6 - the prototype. Experience with color highlights of the authors is about 6 months. It helps to distinguish between authors without looking at their nickname or avatar, which, as a result, creates a more ordered perception of information (allows you to reduce the font for names and refuse to view avatars). ZenComment styles, Zen mode (gray fields) in use - about 3 months. According to reviews, I added a more rarefied Compact style about a month ago and used it. Feels like, “Zen” limits viewing ratings, so it seems that something is missing, “Compact” does not create such a feeling.
What are the future plans and are they?
They, of course, are, both close and distant and not related to the site. You can talk for a long time and sometime you need to do this “roadmap” in order to coordinate work with potential enthusiasts. Now I am not ready to tell everything consistently, but I should mention the main one.
1. Refinement of styles QA and Favorites + Svoe.
2. Management of settings through the interface, but not through the code, as now.
3. To achieve portability settings with changing versions of the program.
4. Make the plug-in mechanism — small scripts that start when the main script is found that supports the basic features: working with DOM, c versions and plug-ins. Define plugin connection points for various events (for example, loading an Ajax article).
This program of actions is conditional, for a month. The most interesting point is the last one, but you have to go to it through the decision of the previous ones, so that it will be a subject for further work. Then, with the plug-in mechanism, the development of extensions for the site will rise to a higher level - you do not have to write the infrastructure every time you want to do something for yourself in a few hours.
It is not by chance that the script is laid out before long weekends - for sure, those who want to practice scripts and styles will have time during these long days.
References:
* Styles for Habr: ZenComment ;
* User script for Habr: HabrAjax .
Source: https://habr.com/ru/post/135464/
All Articles