20 services and tips for web developers

Below are useful links and tips based on my personal experience. I tried to specify only what may be new for developers, so resources like FireBug and other well-known ones are not in the list.

NounProject - the best and largest collection of SVG images

Due to the fact that cross-browser support for SVG is not perfect, I do this as follows, I find the picture I need on this SVG site that I need, open it in a notebook and manually adjust the color and size (sometimes the picture itself), then open the file with the picture in Browser, I take a screenshot of the image, I cut it into Photoshop and save it in the gif with the least parameters. Conclusion - the best picture quality, since the quality of the SVG does not change with decreasing or increasing, and takes the least amount of space, and as a result, the absence of defects, such as blurred edges, incomplete coloring when the color changes with fill and so on.
')
Codebeautifier - cross-browser preparation of CSS files with reduced weight of the CSS file itself.

Since different browsers, in particular IE, perceive some parameters of CSS differently, this causes problems with cross-browser compatibility. Using this resource, you can create a CSS file that will work identically in all browsers.

Iterm2 is the best console for mac OS and a replacement for a standard terminal.

The peculiarity is that it is possible to divide one window both vertically and horizontally, that is, you can make it in full screen and divide it into several parts of different sizes for use for various purposes.

Spritebaker - encodes images and fonts in base64 for later possible insertion into CSS, which increases download speed

Web developer - plugin for Firefox giving many possibilities.

For example, view / enter / edit cookies, view topography for symmetry, info on pictures and so on.

ColorZilla - plug-in for firefox that allows you to click the mouse on any point on the screen and get the color code.

No need to take a screenshot, then throw in Photoshop and click on the color. Just install the plugin and that's it. Very comfortably.

DataUrl - generates code from an image.

Just drag the image and get the string code. It is very convenient, for example, you can transfer a picture as a string between scripts, or store it in a database as a string, that is, do not save the file at all.

Pjax - plugin which allows you to change the contents of the page without reloading it.

Like Twitter, for example, it is very convenient and well reflected in usability, since nothing jumps and does not reload as when reloading the page. In addition, it increases productivity, since you can once unload all CSS, frameworks and other content that does not change, but only change the part on the page that really changes. The only problem is that this technology is rarely used, so problems often arise when you have to integrate with third-party services, such as social buttons, they simply stop working (only VKontakte took this into account, but Facebook and Twitter, for example, do not).

CopyPasteCharacter - a large set of special characters.

For example, you need to insert the TM icon in the text, or the Apple logo, but this is not on the keyboard. Go to this site, copy the symbol and paste where you want.

Name Check - checks if the entered name is registered in many Internet resources.

For example, you need to register on Facebook and other resources, and you want to have only one name everywhere. With this service you can immediately check that it is available everywhere.

Scrim - converts email to link.

It is used to antispam and hide the main email. For example, if you need to specify your email address online for contacts, but you don’t want people to know it or you don’t want spam.

Font comparer - allows you to enter a string and see how it is displayed in different fonts.

It is very convenient to select fonts as the best option is clearly visible.

Icon finder - search for images, logos and icons.

Just drive in the search that ishim and choose the appropriate icon.

Smush.it - reduces the weight of the map by removing unnecessary bytes.

That is, it reduces the weight without changing the picture.

WebSitePulse - shows the speed of loading pages, their weight and other useful information.

An excellent resource for optimizing download speeds and identifying "heavy" pages for further refinement.

Php Storm is the best IDE editor for coding in particular for mac OS.

I tried a lot and Php Storm is the best of everything I saw, a lot of functions, in particular, automatic, debugging, good use of colors, etc. Thanks to which the code writing becomes convenient and the number of errors decreases.

Codebeautifier - makes from an incomprehensible CSS file a clear and readable CSS file.

Convenient for nadladnosti in terms of good tone writing code.

Bonus 1

Very often, you can notice the terrible error messages or the names of the buttons, based on which it is simply not clear what to do. I advise you to use this scheme:

1. All buttons must be called verbs. That is, the button name should always be “Cancel”, “Save”, “Delete” and not like “Done”, “Done” and so on (for what is ready? What is done?). The name on the button implies some kind of action therefore it must be a verb.

2. Error output must indicate 2 points:
and what happened?
b) what to do?
The error should not look like “Fatal Error” or “Unknown Error” or “Server Error” or even “Error 126581”. If the error is displayed on the screen, then it is intended for the user, so it should explain in simple language what happened and what to do. For example, "You entered an incorrect login, enter the correct one". That is, everything is immediately clear. If you enter only one item, for example, what happened, sometimes it is not clear what to do next. Or vice versa, if you indicated what to do next, it is not clear what happened.

Bonus 2

To speed up page loading, it is often useful to remove unwanted spaces, characters, tabs, etc. from a file, as well as delete comments and formatting in order not to explain to a potential attacker or just someone how it all works. That is, roughly speaking, to make the script was in one line without anything extra. For this there are services called "minifier". All of them are designed for some types of CSS files or JS or HTML. But very often it happens that several languages ​​are used in one file, besides, they are all mixed up. In this case, the minifier cannot be used, since it incorrectly interprets the code.

Attention! From the point of view of good code in different languages ​​in the same file, it is better not to write, but to make different files and include.

But if for some reason you did it all the same, then below is a simple code that I somehow wrote in order to remove the optional characters regardless of the fact that the same file contains the code of different languages. It deletes these characters and displays the code in one line. The only requirement is that comments in JS should look like / ** / and nothing else.


To use, you need to create a php file, and paste this code there, then in the code replace “YOUR_FILE_NAME” with the name of your file. The script scans recursively all folders starting from where this script is located.

UPD
1. Link about base64 and CSS corrected (incorrectly explained the meaning earlier)
2. After a certain criticism, the article was removed in drafts, but after I received several messages to return it, therefore I corrected and published it back. If something else is wrong, please write something to fix or remove.