📜 ⬆️ ⬇️

Markeeper.ru - we pump web bookmarks

As usual, it all started with an idea. The idea originated from a certain feeling of dissatisfaction. At that time, I began to pick the Yii framework and the number of bookmarks on this topic began to grow like a snowball. The first decision was the revision of all bookmarks and their redistribution by thematic subfolders. In the beginning it even helped. However, after a while, I was surprised to notice that I’ve bookmarked entire pages just for the sake of a couple of lines of text that represents a trick, illustration, or use of the framework API. The first solution that came to mind was to select only the necessary text and immediately save somewhere to save it — in almost 100% of cases it was a loss of formatting or the necessary arrangement of information, which immediately lowered its value to me. Further, more interesting solutions were tested, - an extension for Firefox, which skillfully edited the page and saved an already modified version to the hard disk. It was fun exactly to the fifth save, when it became simply laziness to remove unnecessary elements. A deeper search for solutions to the problem did not give the desired results. And then it was decided, - to the service that solves this problem, at least for me, - to be (Caution, under the cut there are some pictures).


Armed with the support of the coder, we set to work.

Selected technologies and libraries:


- The basis for the engine was chosen Yii because of a number of interesting features, the rapidly developing community and the developers promised speed.
- MySQL database
- For visual effects and working with DOM, jQuery and jQuery UI were selected.
- To implement the bookmarklet, the LabJS library was needed to ensure the correct loading sequence of the scripts.
- JSONP for cross-domain queries
')
Plugins used in the project:
- jQuery Tipsy (tooltips for user prompts)
- Cleditor (WYSIWYG editor for texts)
- TopUp (Lightbox equivalent for viewing images and sites)

The development had to be carried out at intervals free from the main work, which made the development process extremely complicated and extended. We went through periods of loss of motivation and interest in the project, faced problems of a technical nature, three or four times reworked the design ... In a word, I would not call an easy development.

But, actually, the project itself from the inside ...



We did not move away from the classical organization of bookmarks by folders, so the list of folders looks like this:



One of the key ideas of the service was to provide a workspace for working with bookmarks and the ability for the user to visually place bookmarks in the right places. In addition, after the creation of the first working prototype, it turned out that the blocks take up quite a lot of space and it would be useful to fold them, thereby reducing the space occupied. For the same reasons, the names of the menu items were removed in order to increase the size of the workspace and the ability to increase its height was added.
It looks like this:

image

Of course, tags, descriptions and categories of bookmarks did not go away from us anywhere, however, we tried to make such information as intrusive as possible.
I’ll stop at the user’s office in detail (where you can see detailed statistics on using the service and notifying your subscribers ’actions), adding bookmarks through the service itself, managing subscriptions and folders, friend lists, etc. I’ll not finish it, so I’ll start the second option service, which is positioned by us as the main.

Bookmarklet


For more convenient work with the service, we decided to bring the main functionality to a bookmarklet . When you call a bookmarklet on any webpage, a fixed div is created into which the bookmarklet UI is loaded. At the same time, the authorization on the site of the service is checked, after which the list of folders and information about the user (nothing confidential) is loaded, which will be displayed in the created toolbar. How it looks can be seen in the screenshot below:

image

Key features of bookmarklet:

- Selection of text or text along with HTML markup with the ability to view and edit the selected fragments (see screenshot below)

image

- Adding the current page to the section "Unread"
- Saving the entire current page on the server hard disk
- Save the selected image on the server by clicking on it
- Selection of a fragment of the page (you can select up to 10 fragments) also with the ability to view and edit (example below)

image

After all the actions performed, the user can select the folder in which he would like to save all the selected fragments and by clicking on (unexpectedly) the "Save" button itself ... save.

image

Now both the text and the selected fragments will be available on markeeper.ru in the selected folder as a block with several buttons. You can view the selected fragments and correct their location in this kind of widget.

image

As you can see, links to bookmarks can be shared, as well as change their accessibility (visible only to the current user / everyone can see)

So we went through the most basic aspects of the service. The plans are to monetize through the introduction of monthly subscriptions with enhanced functionality and the removal of some of the limitations of the service, the introduction of relevant advertising on similar bookmarks, authorization via Twitter, Facebook and VKontakte, import of bookmarks from browsers and much more. Well, of course, the search for investments and partners, where do without it.
In addition, we would like to move away from PHP and rewrite the project in RoR + CoffeeScript, because current javascript is rather carelessly written. On this, I think, there will be a separate article in which it will be possible to cover technical issues directly.

And finally, a short video with a presentation of some features.



PS: At the moment, the service at the stage of alpha testing and registration is available only by invitation, which can be obtained in a personal. Since there are only two people working on the project, everything is done as far as possible - this can explain a considerable number of plugs on the main page, we focused our efforts on finishing the main functionality and not everything is done. I will try to answer all the questions in the comments. And yes, IE support from version 8 only.
Thank you for attention.
PPS: And the link to the resource itself, I almost forgot, - markeeper.ru

UPD: We are looking for like-minded people and partners in Odessa to help work on the current project and work on new ones.

Source: https://habr.com/ru/post/125493/


All Articles