Improving online programs

In the era of native programs, users could use them only within the configuration settings allowed by the developer. Nowadays, in the era of Internet applications, the user can quite easily change, at his discretion, not only the external presentation of the program, but also its behavior.

This article describes ways to make web applications more convenient, beautiful, expand their functionality, customize.

Each user has favorite necessary programs. Earlier, when there were few programs in principle, and the requests were small. Now the market is replete with and choosing something convenient for itself has become much more difficult.

Take, at least, Task / To-Do managers. I need a manager to manage personal it projects, to keep a shopping list, to store the necessary information in a hierarchical structure, to synchronize with everything that I can, with reminders with an acknowledgment of receipt, to work on all systems and be easy, fast, convenient and very nice. Such, of course, no, and the problem is, in fact, ancient and well-known:

How difficult it is to decide, it’s just so impossible to tell how difficult it is! If Nikanor Ivanovich’s lips were to be attached to Ivan Kuzmich’s nose, to take some swagger, like Balthazar’s Baltazarych, and, perhaps, to add Ivan Pavlovich’s prettiness to this - I would have decided immediately. Now go and think!

Even if you are ready to pay for the necessary features, it is usually impossible to find a ready-made program that fully satisfies you. But for modern web programmers, the situation is simpler than that of Agafi Tikhonovna - complete modularity and customization with respect to lips and noses. To do this, you can use browser extensions that allow you to inject your javascript and css files (I like this one ) or write your own simple ones with the same goals, to choose from. After that, the programmer is a little closer to the level of "Year".
')
Almost everyone knows about it, but few use it. We will show with simple examples the obvious benefits of custom injections.

to-do.microsoft.com

Nice little manager, but on a large monitor it’s not very comfortable to look at him. I need more task titles, reduce the brightness of the “Notes” under them, expand the right column and a couple of improvements that simple css does quite well:




Left column. Here the microsoft has complete downshifting into one-dimensional task lists. I need a tree. In principle, it can also be implemented, but here, for simplicity, we will construct a non-collapsing tree visually.


Here is the pseudo-tree:



Already something. JQeury needs to be connected, and sometimes you have to copy-paste it into the body of the script, otherwise problems arise. The same with a delay in initialization.

Let us now look at another intellectually more advanced representative of this family of programs.

trello.com

Here is an open list card:



Maybe someone uses Trello cards for the purpose that developers have put into this application, but for me on this card visually in terms of volume is less than 10% of useful information, everything else is a bright, colorful thing that distracts from focusing on the right one.

Sss and js can bring all this into a decent look. JQuery in Trello is already there, and here is a script:

 $('.mod-card-detail-icons-smaller .window-module-title h3').bind('click', function(){ $('.mod-comment-type').hide(); }); 

for example, hides all comments when clicking on “Activity”. To see them again, just click the link on the right. Hide / Show details.

And finally, something more interesting.

I need a reminder on the Trello card. Not a pop-up window on the screen, but a real reminder to always and everywhere get me. That is, the sound notification on the phone. In order not to make a fuss and not to connect all kinds of IFTTTs and Zapiers, we simply create an event for the Google Calendar, which then will do everything necessary on Androide.

Connect to the due date card in order not to extend the Trello data model (although this is also an option).



When saving the date, we need to send to Google Calendar API a request to create an event in our calendar. The code itself is quite simple:


But before that, you need to create an application on the Google API Console, get client_id and api_key and make a couple of simple standard steps for connecting OAuth authentication. Manual on Google .

If it is necessary to modify the calendar event together with the due date modification of the Trello card, you will have to work more, but this is also possible.

Finally, we note that all the really useful improvements to web sites and web applications can be arranged as an extension and placed in browser stores.

Disclaimer: All the above examples are given solely as examples of using the potential of js and css, and do not in themselves carry any value.

Addition for Habr

On large monitors, the text of the article on Habré is convenient for reading, but the pictures (screenshots with text especially) are rather poorly distinguishable. This script:

 window.onload = function() { $(function() { $('.post img').each(function() { $(this).wrap('<a target="_blank" href="' + $(this).attr('src') + '"></a>'); }); }); }; 

allows you to click to open the image in a new window in full size.