September 3, 2018 at 15:25Mobile version of Habr. Version 3.0
It is possible that some of you will be on the mobile version of Habr for the first time, and someone on the contrary will say that " this is the third version and no matter what, but in 2009 it was the most-most ." Be that as it may, this time I wanted to do more than just announce the new mobile version. It was nice to rewind time back and remember how it was.
For such a retrospective, we had to turn to the web archive. Thanks to him, the following stages can be distinguished in the life of the site:
Birthday mobile version. ID-shniks of posts on Habré have just begun their journey to six-digit values, and in the TM office (then this abbreviation was still deciphered as "Thematic Media") on Krivokolenny lane the atmosphere of a startup reigned. Shortly before this date, in the head of one of the developers (Maxim rossomachin ), the idea arises to make an experimental lite version of Habr, which would work better on mobile devices.
Three people (a programmer, a web technologist and an interface designer), two weeks of time and the shortest post-announcement appeared on the site: μHabr (literal quote of the announcement). As they say, nothing more - neither in the announcement, nor on the newbornnudemuHabre. Then this name did not take root, since it was difficult to spell correctly and everyone thought it was a habratracker. Therefore, the name “Microhabr” soon stuck to the project.
Features of the first mobile version:
In this version, the authorization, voting, and commenting functions were not available. That is, it could be used only for reading, which, in fact, was required of her at that time. The microhabr was not much different from the RSS aggregator, but it did not require a separate application (except for the browser).
And she looked like this:
If Mikrohabr had a Twitter account, then for the next few years it would be like a twitter of a stone in the forest: daily “nothing happened today”. Well, perhaps once combed the fonts, making them larger and less faded:
In this form (with minor changes in the layout), the mobile version existed until 2014, since mobile traffic at that time was very insignificant.
Blogs which were earlier on Habr, with the easy movement of a hand turned into elegant hubs. It became possible to attach each publication to several hubs, so the list of hubs had to be moved under the heading. The mobile version is still a primitive reader - the boom of mobile traffic did not happen then, and the entire Runet unanimously ignored phone solutions.
From 2009 to 2014, the mobile version of Habr remained a simple reader. However, the growth of the mobile audience forced us to upgrade the mobile phone to the second version, which we did on June 10, 2014. This is not so much a hobby experiment of one of the employees as the deliberate work of a group of persons in a preliminary conspiracy.
If earlier the diagonal screens (and their resolutions) of various PDAs were not particularly allowed to play with indentation, then by 2014 smartphones captured theiron throne of the empire market. With the new typography and more airy margins, it was already difficult to display 40 publications per page, so their number was reduced to 10. The name “Microhabr” does not appear anywhere — the “mobile version” is everywhere.
Despite the fact that it was primarily a facelift (as the previous design was morally obsolete), the new “mobile phone” gained new features: authorization appeared, and hence the ability to track new comments on those publications that the user had already read. There was also the opportunity to go to the desired hub or company blog.
In the same year, the official Habr application was released, released immediately under three platforms (psychoanuli): iOS, Android and Windows Phone. The functionality is similar: authorization, reading feeds, subscribing to hubs, voting-favorites-comments.
In the iOS application, the user’s avatar has a small Easter egg, which hardly anyone has ever found.
At the end of 2014, another important event in the history of Habr occurred - Geektimes spun off from it . Some users were very sensitive to the subsequent division of publications into two sites, so in order to somehow anesthetize this, we made TM Feed - a kind of bridge between the two sites. The same mobile version, but with the ability to select one or both sites as the source. Or all three (when Megamind also appeared in 2015 ).
A few years after the separation of projects, we decided to take a course on the big Internet. Going there on several boats would be many times more difficult than on one large icebreaker, so it was decided to reunite all previously divided projects. And the easiest way to start doing this was to combine content projects, as they were as similar and close in structure as possible. At the same time, TM Feed was no longer needed, so it disappeared from the top menu.
Left with Habr alone, we decided to refresh his mobile version, which, in fact, has been unchanged since 2014. It was difficult to do this on the old version due to the large amount of legacy code long ago, so it was decided not to redecorate but overhaul it: redrawn everything from scratch, rewrote the entire backend and frontend.
If 2 weeks passed from the idea to the launch in 2009, then in 2018 we could not afford such agility and tried to do everything “in an adult way”: it took only a few beta tests for several months, which was attended by more than 7000 people. And, as you know, not in vain - thanks to him, that is, you, we were able to fix a lot of bugs in the mobile version: from small inconspicuous insects to giant goliath beetles. And today, under the ringing of first-grader bells, we decided to finally go green.
The motto that we tried to adhere to: the mobile version ≠ a stripped-down version. Therefore, a few new functions were added to the previous requirement (convenient reading of publications) and laid the foundation for further scaling. From the new:
The Tesla owners bitterly admit that the new mobile version is significantly faster than their electric cars :)
And we must understand that for now we will release the basic version of the mobile Habr, but not the final one: we’ll “grow up with meat” and new features a bit later.
Well, go? We have created: m.habr.com
April 22, 2009
Birthday mobile version. ID-shniks of posts on Habré have just begun their journey to six-digit values, and in the TM office (then this abbreviation was still deciphered as "Thematic Media") on Krivokolenny lane the atmosphere of a startup reigned. Shortly before this date, in the head of one of the developers (Maxim rossomachin ), the idea arises to make an experimental lite version of Habr, which would work better on mobile devices.
Three people (a programmer, a web technologist and an interface designer), two weeks of time and the shortest post-announcement appeared on the site: μHabr (literal quote of the announcement). As they say, nothing more - neither in the announcement, nor on the newborn
Features of the first mobile version:
- Each page weighed an average of 5 kilobytes (excluding content)
- The complete lack of advertising and unnecessary elements
- Each page contained 40 links to publications
- Well displayed on all major mobile platforms
In this version, the authorization, voting, and commenting functions were not available. That is, it could be used only for reading, which, in fact, was required of her at that time. The microhabr was not much different from the RSS aggregator, but it did not require a separate application (except for the browser).
And she looked like this:
2010
If Mikrohabr had a Twitter account, then for the next few years it would be like a twitter of a stone in the forest: daily “nothing happened today”. Well, perhaps once combed the fonts, making them larger and less faded:
2013
Blogs which were earlier on Habr, with the easy movement of a hand turned into elegant hubs. It became possible to attach each publication to several hubs, so the list of hubs had to be moved under the heading. The mobile version is still a primitive reader - the boom of mobile traffic did not happen then, and the entire Runet unanimously ignored phone solutions.
2014. Version 2.0 and the mobile application
From 2009 to 2014, the mobile version of Habr remained a simple reader. However, the growth of the mobile audience forced us to upgrade the mobile phone to the second version, which we did on June 10, 2014. This is not so much a hobby experiment of one of the employees as the deliberate work of a group of persons in a preliminary conspiracy.
If earlier the diagonal screens (and their resolutions) of various PDAs were not particularly allowed to play with indentation, then by 2014 smartphones captured the
Despite the fact that it was primarily a facelift (as the previous design was morally obsolete), the new “mobile phone” gained new features: authorization appeared, and hence the ability to track new comments on those publications that the user had already read. There was also the opportunity to go to the desired hub or company blog.
In the iOS application, the user’s avatar has a small Easter egg, which hardly anyone has ever found.
2015. TM Feed
At the end of 2014, another important event in the history of Habr occurred - Geektimes spun off from it . Some users were very sensitive to the subsequent division of publications into two sites, so in order to somehow anesthetize this, we made TM Feed - a kind of bridge between the two sites. The same mobile version, but with the ability to select one or both sites as the source. Or all three (when Megamind also appeared in 2015 ).
2017
A few years after the separation of projects, we decided to take a course on the big Internet. Going there on several boats would be many times more difficult than on one large icebreaker, so it was decided to reunite all previously divided projects. And the easiest way to start doing this was to combine content projects, as they were as similar and close in structure as possible. At the same time, TM Feed was no longer needed, so it disappeared from the top menu.
2018
Left with Habr alone, we decided to refresh his mobile version, which, in fact, has been unchanged since 2014. It was difficult to do this on the old version due to the large amount of legacy code long ago, so it was decided not to redecorate but overhaul it: redrawn everything from scratch, rewrote the entire backend and frontend.
If 2 weeks passed from the idea to the launch in 2009, then in 2018 we could not afford such agility and tried to do everything “in an adult way”: it took only a few beta tests for several months, which was attended by more than 7000 people. And, as you know, not in vain - thanks to him, that is, you, we were able to fix a lot of bugs in the mobile version: from small inconspicuous insects to giant goliath beetles. And today, under the ringing of first-grader bells, we decided to finally go green.
The motto that we tried to adhere to: the mobile version ≠ a stripped-down version. Therefore, a few new functions were added to the previous requirement (convenient reading of publications) and laid the foundation for further scaling. From the new:
- All entities became available: streams, hubs, lists of companies and users
- Support for sorting publications: by subscription, all in a row and the best (per day / week / month)
- Each post has a counter of new comments
- There was a search for publications and users
- At the bottom of the publication, a menu appeared with scrolling up the page with metrics
- More convenient voting for comments
About design
“The work done can hardly be called a redesign. In fact, we created a new product with only the address remaining from the old one. The main goal was to create a unified visual environment consisting of a graphic style of the project and repeating scenarios of behavior. ”
// Designer
About technology
“The old mobile version worked with jQuery on the front end and PHP with the Blitz template engine on the backend. The new one is built on more modern and well-established technologies. Namely, Vue and the entire stack near it (vuex, vue-router, vue-meta, vue-server-render), Express and Node.js: there is a frontend in the form of SPA, there is a backend (which renders this SPA for search engines and proxies requests in the API) and a separate API server. ”
// Developers
The Tesla owners bitterly admit that the new mobile version is significantly faster than their electric cars :)
And we must understand that for now we will release the basic version of the mobile Habr, but not the final one: we’ll “grow up with meat” and new features a bit later.
Well, go? We have created: m.habr.com