October 16, 2013 at 11:03How I completed Habrahabr
Unlike " How I broke Habrahabr ", it is known that breaking is not building. Breaking a well-known resource is traditionally of great interest. The fact that everyone believed that it was impossible to do, it turned out that it was possible. How are things going with construction? And what can you build in general if everything is already out of the box: opened the site and use it? There are some user-developers who see that the site can be completed, but what it will not immediately come to, if you just ask the administration. And they finish building themselves, and then share the results with the community, so we know them, and their work is also of great interest. To begin with, let’s remember the builders, let them not invite for improvements, as far as I know, for completion and do not write out bonuses.
As the experience of recent years shows, a number of interface flaws are corrected, new official opportunities appear, which were made by the regular developers of the site. For example, over the past 2 years: the
typed article blank does not disappear - all fields are stored in the repository;
comment editing is provided within 3 minutes after publication;
For some readers, the “Report” button on an article or comment is available;
a selector with a choice of code language has appeared above the comment input field and the list of languages has been expanded from 16 to 42;
work on the anarchy of blogs has been carried out and they are systematized into hubs;
Removed Similar Posts from company blogs
and more.
Fixed interface bugs and vulnerabilities. In general, work is ongoing, and the site is becoming more convenient. There are rumors about the appearance of interface improvements (the source is an article with New Year's wishes at the end of 2012 and about mobile applications ). What more could you want?
Third-party developers wish and implement. If you search by the site name on the resources of user skips, user styles and applications, you can find:
several scripts and programs that conveniently format letters to authors about errors in their articles (most often they were made for Chrome and one for the old Opera) - 1 , 2 , 3 ;
several Chrome extensions (only 55% of readers can use it - source):
chrome.google.com/webstore/detail/habrahabr-more/glaccbllkhielccdhfbbpilnlbemgaji - various site improvements, feed loading;
chrome.google.com/webstore/detail/habrahabr-reader/nnbjhfplkknimonkomifaleclogojjjd - read news headlines and articles and go to them;
Habraredesigner , changes the appearance of the tape and title;
Habrapanel , similarly;
chrome.google.com/webstore/detail/habrinfo/kbfcbifjdpbmcolhlpjdbojffhnmkaia - HabrInfo, adds page navigation from the toolbar button.
several styles that transform the look of the site;
userstyles.org/styles/78393/habrahabr - gray style of the site pages (10 months not updated);
userstyles.org/styles/19827/habrahabr-inversion-compact-skin - compact traditional style;
userstyles.org/styles/11900/habrahabr-prettifier - compact light style;
(there is a black style, but causes big doubts about freshness)
userstyles.org/styles/55161/habrahabr-reader - reading style (also old) - hides everything, sidebar and even comments; leaves articles.
user scripts that change the location of information blocks on site pages.
collapse comments sorted by their ratings;
viewing the activity of commentators on the site by day of the year, as on GitHub;
viewing the comment to which the selected comment responds without scrolling the page;
View user metrics using the existing Habr API
adding formatting buttons (inserting pseudo-tags) in the comment input field.
… and some others.
As you can see, there is interest in transformations and improvements to the site. If you look at the number of users, then they are few. They appear from those who are not afraid to run someone else's script on their browser, most likely understand the process, and probably can correct something in the script or in the styles themselves.
The measurement result of one script showed that 50 people are recruited regular users, who have tried - 100-200 for a period of 2-3 months. Thousands of downloads indicated on userscripts.org - shows the download of new versions, which have to be changed with every alteration of the site. And, of course, new people come over time or old people install scripts and styles on other computers - there is only one person, but there are several downloads. In addition, since March 2013, the counter on userscripts.org has been broken or stopped altogether - now in no way, without special efforts, it is impossible to determine even the interest of users in various scripts. Most likely, this will lead to a loss of interest in hosting in general.
So, we figured out a bit that thousands of downloads mean hundreds of samples and tens of users.
Accordingly, hundreds of downloads of Chrome extensions mean that dozens have tried it and continue to use it - dozens. The fewer version changes, the more real users regarding the number of installations.
However, the interest of users here is rather a side effect. You can’t get everyone to learn how to install scripts. This is done by those who understand the risks or have not yet been explained to them. An unknown author’s script can extract important user information, so you need to either trust the author’s reputation, look at the script yourself, or use a firewall that controls unexpected network activity. But all right, there is a reputation in the user community, and their technical knowledge contributes to a greater percentage of “side effect” - the use of scripts.
Some time ago, I also started using scripts and styles to eliminate the shortcomings of some sites I visit. Immediately revealed the main disadvantage of user scripts - the variability of sites, their layout. It is quite difficult to use other people's scripts and styles when they stop working. Naturally, there is a desire to remake scripts and styles to fit your needs. Judging by the number of site alterations that I would like to have, about 20 or more functions were expected. In Habré, I saw in about 2010 or 2011 only one person who aggregated many functions into one script. He lasted about 8 months and then abandoned posting it to userscripts.org. And now, it’s also an aggregatorfunctions from the list above. But I didn’t use either one, because approximately from the middle of 2011 I had my own aggregator. Initially, it was made as a user script, and not as an application. Why? The user script has slightly less rights, but with less effort you can achieve cross-browser compatibility. For a long time, the script supported 4 browsers with all the functions - Firefox, Opera, Chrome, Safari. Last year Safari fell off because I stopped supporting myself on Windows, and on the Mac I have nowhere to run the script.
Experience shows that supporting cross-browser compatibility does not take a lot of extra effort. But this cannot be said for styles. Styles, even if they are similar, but become sloppy looking in one or the other browser when users try to maintain their appearance everywhere. You have to choose - support is everywhere or quality. I was more interested in support everywhere. You still do not need to choose a browser to view the site through scripts and styles - they work everywhere. And in Safari they could, but with it is a separate story.
You can support applications for different browsers, including IE. There are special frameworks (Kango) for this. Or in a home-made framework, it would look like this: the kernel is processed by the loader, which in 1-3 seconds reassembles the application and substitutes it in the right place on the file system. Then it requires (or not) a reboot of the tab, sometimes the browser, depending on which debugging scheme is used, and testing changes in this browser. From the kernel, the collector would compile the target application, and then it is brought to cross-browser compatibility. A single code in the application will make up about 90% of each archive, but it will be dissolved among the features of browser applications. Such a development scheme is somewhat redundant even for code of several thousand lines. But would be necessary
To simplify the approach and to support 3 browsers, the code was organized as follows:
user-defined , about 1000 lines in the form of code ready for installation in Firefox, and the bulk of which is ready for installation in 2 (previously 3) other browsers - Chrome and Opera.
The main idea of these styles is compactness, air release. The site can be viewed with a window width of 320 pixels. Adaptive fields: the smaller the width, the greater the savings on voids. Places with noise are eliminated: underscores in the sidebar, unnecessary words are hidden; some of them are additionally abbreviated by the script in order to get interface elements, and not their descriptions (reply - reply, comment was changed - rev.). Compact design - header, footer, sidebar. Between comments there is a gap of 1 line (the variant without it (Zen mode) was already overkill and could be read worse). Always visible main and user menu in the corners and paginator tape below.
user scriptsfully supported by a single code for all browsers. A compressed string of user styles is inserted into them so that they can be run from user scripts (a delay of 0.5-1 s, but for fitting, but installation without scripts applies styles immediately, without flickering a page with site styles).
Briefly, what they can do (links lead to descriptions of details):
uploading articles to Ajax feeds - view articles and comments without reloading the page by clicking on "read more" or the title of the article’s annotation in any feed (main, everything, sandbox, favorites, search, questions).
enable user styles ZenComment- Uses built in to the script are used, which exist separately, but require the installation of the Stylish extension. They convert the text to a denser one and have 2 special modes for reading comments (Zen and compact).
restriction or removal of the sidebar - a solution for narrow windows and the screen or removal of redundant information in whole blocks (ZenComment also hides a lot of excess).
forced cut - limits the height of any annotation in the tape to 240 (for ZenComment) - 290 pixels, reduces pictures and video to 240 by 120, compresses vertical voids, provides tags with no more than 1 line - everything so that a few annotations fit into the window and more text .
filter by authors and keywords- collapses annotations to one heading for the specified list of authors and for the specified list of regular expressions - filters by text and by headings.
short dates of the current year - does not show the year if it is current or date - not older than 8 months.
Google search on the site - additional buttons for searching Google and Yandex on the site and 3 output modes: window, frame or current page. If nothing is entered - search by article title among favorites on the site.
adjustment of links - links to translations - in a new window, the link “feed” is “new feeds”, correction of links in the sidebar - to articles, not to posts.
set / hide Google+ buttons and others- unused sharing buttons can be deleted by settings and put Google+ if it is used or to inform about the popularity of the article.
input tags source, font, blockquote - tags are entered with one click above the input field; the behavior of some other buttons is adjusted (there is no blocking popup).
adjusting the size of long headers - the font decreases if the heading is long; Long blog names in the feed and sidebar are shrinking.
coloring and counting the activity of commentators - each commentator receives a color according to the number of responses that mark his comments with a narrow bar on the left and in the response header.
half height frameto view profiles, favorites, search and compose letters. It opens above or below the place of the click so as not to close the context and displays data without leaving the page.
Shift-Tab - to enter a tab character in textarea, Ctrl + space - for "& + nbsp;".
links to caches from the end page - if the article is deleted or the Habr is unavailable ("maintenance work") - a number of links to the page cache on large and small services.
autostore of input fields - the frames of multi-line input fields (textarea) expand automatically if the window height allows.
viewing pictures without rebooting - in an enlarged size, with scaling by the mouse wheel and moving around the screen.
quote highlightingfor comments and personal messages (PM, letters) (select the text, click on the contextual button "Letter" - we see a sub-frame of half height with the form of the letter to the author and with a quote);
commenting on loaded articles and comments via contextual quote and frame (you cannot comment on the article in the download; but you can select a fragment, click on the “Answer” contextual button next to the selection and see the input field in the attached frame with the selected quote - do not specifically open the article in a new tab and look for a quote or comment);
editing your articlein a frame, another tab, or directly - by highlighting quotes (highlighted in the preview what you want to edit, clicked the context button "E" next to the selection - went to highlight the same in the input field).
Links to external sources - in a new tab. The local links tooltip shows the month and year of publication.
Duplication of the date and author of the article at the top and bottom of the article.
Nailed to the bottom of the footer. Download 3 bottom articles . Compact footer.
There are also separately created scriptsbut the styles all fit in one block of codes. There were worse times with styles, when you had to support 2 types of layouts that existed on the site during transitional periods - the site was not rebuilt immediately, first one page, then another. The appearance of the styles changed a bit. Bad ideas were discarded, good ones were used.
An interesting story with the wishes of those who did not use styles. There are user requests - they are listed hereand constructive: to do this, another, third. And there are exclamations of others, such as "I will not use these styles." On the proposals to make my own version of the design, which I would implement in styles - complete silence. I explain this by the fact that designers and connoisseurs of style are people farther from technology in order to install their own styles or scripts for themselves. It is enough for them that the official site gives.
Last addition of scripts ( fill pictures with drag and drop) I suggested doing crowdsourcing - someone will suggest a design, I will do the implementation. The survey shows what 14 out of 87 people who participated in the survey could design. We got in touch - 0 people. Now there is a design drawn by me in UPD6, at the end of the article. Someone might not like the implementation. But this is how styles are done - everyone can take part, but what is done is done, and does not exist in the possibilities.
As the experience of recent years shows, a number of interface flaws are corrected, new official opportunities appear, which were made by the regular developers of the site. For example, over the past 2 years: the
typed article blank does not disappear - all fields are stored in the repository;
comment editing is provided within 3 minutes after publication;
For some readers, the “Report” button on an article or comment is available;
a selector with a choice of code language has appeared above the comment input field and the list of languages has been expanded from 16 to 42;
work on the anarchy of blogs has been carried out and they are systematized into hubs;
Removed Similar Posts from company blogs
and more.
Fixed interface bugs and vulnerabilities. In general, work is ongoing, and the site is becoming more convenient. There are rumors about the appearance of interface improvements (the source is an article with New Year's wishes at the end of 2012 and about mobile applications ). What more could you want?
Third-party developers wish and implement. If you search by the site name on the resources of user skips, user styles and applications, you can find:
several scripts and programs that conveniently format letters to authors about errors in their articles (most often they were made for Chrome and one for the old Opera) - 1 , 2 , 3 ;
several Chrome extensions (only 55% of readers can use it - source):
chrome.google.com/webstore/detail/habrahabr-more/glaccbllkhielccdhfbbpilnlbemgaji - various site improvements, feed loading;
chrome.google.com/webstore/detail/habrahabr-reader/nnbjhfplkknimonkomifaleclogojjjd - read news headlines and articles and go to them;
Habraredesigner , changes the appearance of the tape and title;
Habrapanel , similarly;
chrome.google.com/webstore/detail/habrinfo/kbfcbifjdpbmcolhlpjdbojffhnmkaia - HabrInfo, adds page navigation from the toolbar button.
several styles that transform the look of the site;
userstyles.org/styles/78393/habrahabr - gray style of the site pages (10 months not updated);
userstyles.org/styles/19827/habrahabr-inversion-compact-skin - compact traditional style;
userstyles.org/styles/11900/habrahabr-prettifier - compact light style;
(there is a black style, but causes big doubts about freshness)
userstyles.org/styles/55161/habrahabr-reader - reading style (also old) - hides everything, sidebar and even comments; leaves articles.
user scripts that change the location of information blocks on site pages.
collapse comments sorted by their ratings;
viewing the activity of commentators on the site by day of the year, as on GitHub;
viewing the comment to which the selected comment responds without scrolling the page;
View user metrics using the existing Habr API
adding formatting buttons (inserting pseudo-tags) in the comment input field.
… and some others.
As you can see, there is interest in transformations and improvements to the site. If you look at the number of users, then they are few. They appear from those who are not afraid to run someone else's script on their browser, most likely understand the process, and probably can correct something in the script or in the styles themselves.
The measurement result of one script showed that 50 people are recruited regular users, who have tried - 100-200 for a period of 2-3 months. Thousands of downloads indicated on userscripts.org - shows the download of new versions, which have to be changed with every alteration of the site. And, of course, new people come over time or old people install scripts and styles on other computers - there is only one person, but there are several downloads. In addition, since March 2013, the counter on userscripts.org has been broken or stopped altogether - now in no way, without special efforts, it is impossible to determine even the interest of users in various scripts. Most likely, this will lead to a loss of interest in hosting in general.
So, we figured out a bit that thousands of downloads mean hundreds of samples and tens of users.
Accordingly, hundreds of downloads of Chrome extensions mean that dozens have tried it and continue to use it - dozens. The fewer version changes, the more real users regarding the number of installations.
However, the interest of users here is rather a side effect. You can’t get everyone to learn how to install scripts. This is done by those who understand the risks or have not yet been explained to them. An unknown author’s script can extract important user information, so you need to either trust the author’s reputation, look at the script yourself, or use a firewall that controls unexpected network activity. But all right, there is a reputation in the user community, and their technical knowledge contributes to a greater percentage of “side effect” - the use of scripts.
Some time ago, I also started using scripts and styles to eliminate the shortcomings of some sites I visit. Immediately revealed the main disadvantage of user scripts - the variability of sites, their layout. It is quite difficult to use other people's scripts and styles when they stop working. Naturally, there is a desire to remake scripts and styles to fit your needs. Judging by the number of site alterations that I would like to have, about 20 or more functions were expected. In Habré, I saw in about 2010 or 2011 only one person who aggregated many functions into one script. He lasted about 8 months and then abandoned posting it to userscripts.org. And now, it’s also an aggregatorfunctions from the list above. But I didn’t use either one, because approximately from the middle of 2011 I had my own aggregator. Initially, it was made as a user script, and not as an application. Why? The user script has slightly less rights, but with less effort you can achieve cross-browser compatibility. For a long time, the script supported 4 browsers with all the functions - Firefox, Opera, Chrome, Safari. Last year Safari fell off because I stopped supporting myself on Windows, and on the Mac I have nowhere to run the script.
Experience shows that supporting cross-browser compatibility does not take a lot of extra effort. But this cannot be said for styles. Styles, even if they are similar, but become sloppy looking in one or the other browser when users try to maintain their appearance everywhere. You have to choose - support is everywhere or quality. I was more interested in support everywhere. You still do not need to choose a browser to view the site through scripts and styles - they work everywhere. And in Safari they could, but with it is a separate story.
You can support applications for different browsers, including IE. There are special frameworks (Kango) for this. Or in a home-made framework, it would look like this: the kernel is processed by the loader, which in 1-3 seconds reassembles the application and substitutes it in the right place on the file system. Then it requires (or not) a reboot of the tab, sometimes the browser, depending on which debugging scheme is used, and testing changes in this browser. From the kernel, the collector would compile the target application, and then it is brought to cross-browser compatibility. A single code in the application will make up about 90% of each archive, but it will be dissolved among the features of browser applications. Such a development scheme is somewhat redundant even for code of several thousand lines. But would be necessary
To simplify the approach and to support 3 browsers, the code was organized as follows:
user-defined , about 1000 lines in the form of code ready for installation in Firefox, and the bulk of which is ready for installation in 2 (previously 3) other browsers - Chrome and Opera.
The main idea of these styles is compactness, air release. The site can be viewed with a window width of 320 pixels. Adaptive fields: the smaller the width, the greater the savings on voids. Places with noise are eliminated: underscores in the sidebar, unnecessary words are hidden; some of them are additionally abbreviated by the script in order to get interface elements, and not their descriptions (reply - reply, comment was changed - rev.). Compact design - header, footer, sidebar. Between comments there is a gap of 1 line (the variant without it (Zen mode) was already overkill and could be read worse). Always visible main and user menu in the corners and paginator tape below.
user scriptsfully supported by a single code for all browsers. A compressed string of user styles is inserted into them so that they can be run from user scripts (a delay of 0.5-1 s, but for fitting, but installation without scripts applies styles immediately, without flickering a page with site styles).
Briefly, what they can do (links lead to descriptions of details):
uploading articles to Ajax feeds - view articles and comments without reloading the page by clicking on "read more" or the title of the article’s annotation in any feed (main, everything, sandbox, favorites, search, questions).
enable user styles ZenComment- Uses built in to the script are used, which exist separately, but require the installation of the Stylish extension. They convert the text to a denser one and have 2 special modes for reading comments (Zen and compact).
restriction or removal of the sidebar - a solution for narrow windows and the screen or removal of redundant information in whole blocks (ZenComment also hides a lot of excess).
forced cut - limits the height of any annotation in the tape to 240 (for ZenComment) - 290 pixels, reduces pictures and video to 240 by 120, compresses vertical voids, provides tags with no more than 1 line - everything so that a few annotations fit into the window and more text .
filter by authors and keywords- collapses annotations to one heading for the specified list of authors and for the specified list of regular expressions - filters by text and by headings.
short dates of the current year - does not show the year if it is current or date - not older than 8 months.
Google search on the site - additional buttons for searching Google and Yandex on the site and 3 output modes: window, frame or current page. If nothing is entered - search by article title among favorites on the site.
adjustment of links - links to translations - in a new window, the link “feed” is “new feeds”, correction of links in the sidebar - to articles, not to posts.
set / hide Google+ buttons and others- unused sharing buttons can be deleted by settings and put Google+ if it is used or to inform about the popularity of the article.
input tags source, font, blockquote - tags are entered with one click above the input field; the behavior of some other buttons is adjusted (there is no blocking popup).
adjusting the size of long headers - the font decreases if the heading is long; Long blog names in the feed and sidebar are shrinking.
coloring and counting the activity of commentators - each commentator receives a color according to the number of responses that mark his comments with a narrow bar on the left and in the response header.
half height frameto view profiles, favorites, search and compose letters. It opens above or below the place of the click so as not to close the context and displays data without leaving the page.
Shift-Tab - to enter a tab character in textarea, Ctrl + space - for "& + nbsp;".
links to caches from the end page - if the article is deleted or the Habr is unavailable ("maintenance work") - a number of links to the page cache on large and small services.
autostore of input fields - the frames of multi-line input fields (textarea) expand automatically if the window height allows.
viewing pictures without rebooting - in an enlarged size, with scaling by the mouse wheel and moving around the screen.
quote highlightingfor comments and personal messages (PM, letters) (select the text, click on the contextual button "Letter" - we see a sub-frame of half height with the form of the letter to the author and with a quote);
commenting on loaded articles and comments via contextual quote and frame (you cannot comment on the article in the download; but you can select a fragment, click on the “Answer” contextual button next to the selection and see the input field in the attached frame with the selected quote - do not specifically open the article in a new tab and look for a quote or comment);
editing your articlein a frame, another tab, or directly - by highlighting quotes (highlighted in the preview what you want to edit, clicked the context button "E" next to the selection - went to highlight the same in the input field).
Links to external sources - in a new tab. The local links tooltip shows the month and year of publication.
Duplication of the date and author of the article at the top and bottom of the article.
Nailed to the bottom of the footer. Download 3 bottom articles . Compact footer.
There are also separately created scriptsbut the styles all fit in one block of codes. There were worse times with styles, when you had to support 2 types of layouts that existed on the site during transitional periods - the site was not rebuilt immediately, first one page, then another. The appearance of the styles changed a bit. Bad ideas were discarded, good ones were used.
An interesting story with the wishes of those who did not use styles. There are user requests - they are listed hereand constructive: to do this, another, third. And there are exclamations of others, such as "I will not use these styles." On the proposals to make my own version of the design, which I would implement in styles - complete silence. I explain this by the fact that designers and connoisseurs of style are people farther from technology in order to install their own styles or scripts for themselves. It is enough for them that the official site gives.
Last addition of scripts ( fill pictures with drag and drop) I suggested doing crowdsourcing - someone will suggest a design, I will do the implementation. The survey shows what 14 out of 87 people who participated in the survey could design. We got in touch - 0 people. Now there is a design drawn by me in UPD6, at the end of the article. Someone might not like the implementation. But this is how styles are done - everyone can take part, but what is done is done, and does not exist in the possibilities.