20 services and tips for web developers
Below are helpful links and tips based on my personal experience. I tried to specify only what might be new for developers, so there are no resources like FireBug and other well-known in the list.
NounProject - the best and largest collection of SVG images
Due to the fact that cross-browser support for SVG is not ideal, I do it as follows, I find the picture on the SVG site that I need, open it in notepad and manually adjust the color and size (sometimes the picture itself), then open the file with the picture in browser, take a screenshot of the picture, crop it to Photoshop and save it in gif with the smallest parameters. The conclusion is the best picture quality, since the SVG quality does not change when reducing or increasing, and takes up the least amount of space, and as a result, there are no defects, such as blurry edges, incomplete coloring when the color changes by filling, etc.
Codebeautifier - cross-browser preparation of CSS files with a reduction in the weight of the CSS file itself.
Since different browsers, in particular IE, perceive some CSS parameters 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 the standard terminal.
The peculiarity is that you can split one window both vertically and horizontally, that is, you can make it full screen and divide it into several parts of different sizes for use for various purposes.
Spritebaker - encodes images and fonts in base64 for subsequent possible insertion into CSS, which increases the download speed of
Web developer - a plug-in for Firefox that gives many features.
For example, view / enter / edit cookies, view topography for symmetry, info on pictures and more.
ColorZilla - a plugin for firefox that allows you to click on any point on the screen and get a color code.
No need to take a screenshot, then drop it into Photoshop and click on color. Just install the plugin and that’s it. Very comfortably.
DataUrl - Generates code from an image.
Just drag and drop the picture and get the string code. It’s very convenient, for example, you can transfer a picture as a line between scripts, or store it in the database as a string, that is, do not save the file at all.
Pjax - which plugin 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 it does not jump and does not reload like when a page is reloaded. In addition, it increases productivity, since you can unload all CSS, frameworks and other content that does not change once, and change only that part of the page that really changes. The only problem is that this technology is not used much so often problems arise when you have to integrate with third-party services, for example, social buttons, they just stop working (only VKontakte took this into account, but Facebook and Twitter, for example, aren’t).
CopyPasteCharacter is 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. We go to this site, copy the symbol and paste where necessary.
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 everyone to have the same name. Using this service, you can immediately check that everywhere it is available.
Scrim - converts an email into a link.
Used to antispam and hide the main email. For example, if you need to specify your email in the network for contacts, but you don’t want people to know it or you want no spam.
Font comparer - allows you to enter a string and see how it is displayed in different fonts.
It is very convenient for selecting fonts as the best option is clearly visible.
Icon finder - search for images, logos and icons.
We simply drive in the search for what ish and select the appropriate icon.
Smush.it - reduces the weight of the picture by removing unnecessary bytes.
That is, it reduces weight without changing the picture.
WebSitePulse - will show the speed of loading pages of the site, their weight and other useful information.
An excellent resource for optimizing the loading speed and identifying "heavy" pages for their subsequent 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 I've seen, a lot of functions, in particular automatic, debugging, good use of colors, etc. Thanks to this, writing code becomes convenient and the number of errors is reduced.
Codebeautifier - makes an obscure and readable CSS file out of an obscure CSS file.
Convenient for smoothness in terms of good code writing.
Very often you can see terrible error messages or button names, based on which it is simply not clear what to do. I advise you to use this scheme:
1. All buttons should be called verbs. That is, the name of the button should always be “Cancel”, “Save”, “Delete” and not like “Finish”, “Done” and so on (for what is ready? What is done?). The name on the button implies some action therefore should be a verb.
2. The error output must necessarily indicate 2 punctures:
a) 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, therefore, it should state in simple language what happened and what to do. For example, "You entered the wrong username, enter the correct one." That is, everything is immediately clear. If you enter only one point, for example, what happened, then sometimes it is not clear what to do next. Or vice versa, if you indicated what to do next, it is unclear what happened.
To speed up page loading, it is often useful to remove unnecessary 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 to someone how everything works for you. That is, roughly speaking, to make the script be on one line without anything superfluous. To do this, there are services called "minifier". All of them are intended for the same types of CSS or JS or HTML files. But very often it happens that in one file several languages are used, besides all of them are mixed up. In this case, you cannot use the minifier, as it will not correctly interpret the code.
Attention! From the point of view of good code, it is better not to write different languages in one file, but to make different files and include.
But if for some reason you did it all the same, the following is a simple code that I once wrote in order to remove optional characters, regardless of whether the code contains different languages in one file. It removes these characters and prints the code on one line. The only requirement is that comments in JS should be of the form / ** / and not otherwise.
To use it, you need to create a php file, and paste this code there, after which in the code replace "YOUR_FILENAME_NAME" with the name of your file. The script recursively scans all folders starting from the one where this script is located.
UPD
1. Corrected the link about base64 and CSS (incorrectly explained the meaning earlier)
2. After some criticism, the article was drafted, but afterwards I received several messages to return it, so I corrected it and published it back. If something else is wrong, please write what to fix or remove.
NounProject - the best and largest collection of SVG images
Due to the fact that cross-browser support for SVG is not ideal, I do it as follows, I find the picture on the SVG site that I need, open it in notepad and manually adjust the color and size (sometimes the picture itself), then open the file with the picture in browser, take a screenshot of the picture, crop it to Photoshop and save it in gif with the smallest parameters. The conclusion is the best picture quality, since the SVG quality does not change when reducing or increasing, and takes up the least amount of space, and as a result, there are no defects, such as blurry edges, incomplete coloring when the color changes by filling, etc.
Codebeautifier - cross-browser preparation of CSS files with a reduction in the weight of the CSS file itself.
Since different browsers, in particular IE, perceive some CSS parameters 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 the standard terminal.
The peculiarity is that you can split one window both vertically and horizontally, that is, you can make it full screen and divide it into several parts of different sizes for use for various purposes.
Spritebaker - encodes images and fonts in base64 for subsequent possible insertion into CSS, which increases the download speed of
Web developer - a plug-in for Firefox that gives many features.
For example, view / enter / edit cookies, view topography for symmetry, info on pictures and more.
ColorZilla - a plugin for firefox that allows you to click on any point on the screen and get a color code.
No need to take a screenshot, then drop it into Photoshop and click on color. Just install the plugin and that’s it. Very comfortably.
DataUrl - Generates code from an image.
Just drag and drop the picture and get the string code. It’s very convenient, for example, you can transfer a picture as a line between scripts, or store it in the database as a string, that is, do not save the file at all.
Pjax - which plugin 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 it does not jump and does not reload like when a page is reloaded. In addition, it increases productivity, since you can unload all CSS, frameworks and other content that does not change once, and change only that part of the page that really changes. The only problem is that this technology is not used much so often problems arise when you have to integrate with third-party services, for example, social buttons, they just stop working (only VKontakte took this into account, but Facebook and Twitter, for example, aren’t).
CopyPasteCharacter is 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. We go to this site, copy the symbol and paste where necessary.
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 everyone to have the same name. Using this service, you can immediately check that everywhere it is available.
Scrim - converts an email into a link.
Used to antispam and hide the main email. For example, if you need to specify your email in the network for contacts, but you don’t want people to know it or you want no spam.
Font comparer - allows you to enter a string and see how it is displayed in different fonts.
It is very convenient for selecting fonts as the best option is clearly visible.
Icon finder - search for images, logos and icons.
We simply drive in the search for what ish and select the appropriate icon.
Smush.it - reduces the weight of the picture by removing unnecessary bytes.
That is, it reduces weight without changing the picture.
WebSitePulse - will show the speed of loading pages of the site, their weight and other useful information.
An excellent resource for optimizing the loading speed and identifying "heavy" pages for their subsequent 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 I've seen, a lot of functions, in particular automatic, debugging, good use of colors, etc. Thanks to this, writing code becomes convenient and the number of errors is reduced.
Codebeautifier - makes an obscure and readable CSS file out of an obscure CSS file.
Convenient for smoothness in terms of good code writing.
Bonus 1
Very often you can see terrible error messages or button names, based on which it is simply not clear what to do. I advise you to use this scheme:
1. All buttons should be called verbs. That is, the name of the button should always be “Cancel”, “Save”, “Delete” and not like “Finish”, “Done” and so on (for what is ready? What is done?). The name on the button implies some action therefore should be a verb.
2. The error output must necessarily indicate 2 punctures:
a) 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, therefore, it should state in simple language what happened and what to do. For example, "You entered the wrong username, enter the correct one." That is, everything is immediately clear. If you enter only one point, for example, what happened, then sometimes it is not clear what to do next. Or vice versa, if you indicated what to do next, it is unclear what happened.
Bonus 2
To speed up page loading, it is often useful to remove unnecessary 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 to someone how everything works for you. That is, roughly speaking, to make the script be on one line without anything superfluous. To do this, there are services called "minifier". All of them are intended for the same types of CSS or JS or HTML files. But very often it happens that in one file several languages are used, besides all of them are mixed up. In this case, you cannot use the minifier, as it will not correctly interpret the code.
Attention! From the point of view of good code, it is better not to write different languages in one file, but to make different files and include.
But if for some reason you did it all the same, the following is a simple code that I once wrote in order to remove optional characters, regardless of whether the code contains different languages in one file. It removes these characters and prints the code on one line. The only requirement is that comments in JS should be of the form / ** / and not otherwise.
A script that removes optional characters and makes code in one line
/";
$patterns[] = "/\; /";
$patterns[] = "/\%\(/";
$replacements[] = ':';
$replacements[] = '';
$replacements[] = '==';
$replacements[] = '=';
$replacements[] = '+';
$replacements[] = '+';
$replacements[] = '===';
$replacements[] = ' ';
$replacements[] = ' ';
$replacements[] = ' ';
$replacements[] = ' ';
$replacements[] = ' ';
$replacements[] = '';
$replacements[] = '';
$replacements[] = ';';
$replacements[] = '% (';
$finish = preg_replace($patterns, $replacements, $file_cleared);
file_put_contents($file,$finish);
echo $file,"
";
}
}
?>
To use it, you need to create a php file, and paste this code there, after which in the code replace "YOUR_FILENAME_NAME" with the name of your file. The script recursively scans all folders starting from the one where this script is located.
UPD
1. Corrected the link about base64 and CSS (incorrectly explained the meaning earlier)
2. After some criticism, the article was drafted, but afterwards I received several messages to return it, so I corrected it and published it back. If something else is wrong, please write what to fix or remove.