Ниже представлены полезные ссылки и советы исходя из моего личного опыта. Старался указать только то что может быть новым для разработчиков, поэтому ресурсов типа FireBug и других общеизвестных в списке нет.
NounProject — лучшая и наибольшая коллекция SVG картинок
В связи с тем что кроссбраузерная поддержка SVG не идеальна, я делаю следующим образом, нахожу на этом сайте SVG картинку которая мне нужна, открываю ее в блокноте и в ручную корректирую цвет и размеры (иногда и саму картинку), потом открываю файл с картинкой в браузере, делаю скриншот картинки, обрезаю ее в фотошоп и сохраняю в gif с наимешьшими параметрами. Вывод — наилучшее качество картинки, так как качество SVG не изменяется при уменьшении или увеличении, и занимает наименьшее количество места, и как следствие, отсутствие дефектов, как например, размытые края, неполное окрашивание когда цвет изменяется заливкой и тд.
Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.
Так как разные браузеры, в частности IE воспринимают некоторые параметры CSS по разному, это доставляет проблем при кроссбраузерности. С помощью этого ресурса можно создать CSS файл который будет идентично работать во всех браузерах.
Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.
Особенность в том что можно разделять одно окно как вертикально так и горизонтально, то есть можно сделать во весь экран и поделить его на несколько частей разных размеров для использования для различных назначений.
Web developer — плагин для Firefox дающее множество возможностей.
Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.
ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.
Не нужно делать скриншот, потом закидывать в фотошоп и кликать на цвете. Просто устанавливаем плагин и все. Очень удобно.
DataUrl — генерирует код из изображения.
Просто перетаскиваем картинку и получаем строковый код. Очень удобно, можно например передавать картинку как строку между скриптами, или хранить в базе данных в виде строки, то есть вообще файл не сохранять.
Spritebaker — кодирует CSS файл в Base64 что значительно уменьшает время загрузки.
Советую использовать когда CSS файл достаточно большой, 100 строк к примеру.
Pjax — плагин которой позволяет изменять содержимое страницы без ее перезагрузки.
Как Твиттер к примеру, очень удобно и хорошо отражается на юзабилити, так как ничего не прыгает и не перезагружается как при перезагрузке страницы. Кроме того увеличивает производительность, так как можно один раз разгрузить все CSS, фрейморки иклюды и прочий контент который не изменяется, а изменять только ту часть на странице которая действительно изменяется. Едиственная проблема в том что эта технология мало где используется поэтому часто возникают проблемы когда приходится интегрировать со сторонными сервисами, например социальными кнопками, они просто перестают работать (только вконтакте учли это, а фейсбук и твиттер например нет).
CopyPasteCharacter — большой набор специальных символов.
Например нужно вставить значек TM в тексте, или лого Apple, а на клавиатуре этого нет. Заходим на этот сайт, копируем символ и вставляем куда нужно.
Name Check — проверяет зарегистрировано ли введенное имя в многих интернет ресурсах.
Например нужно зарегистрироваться на фейсбук и других ресурсах, и хочется чтобы везде было одно имя. С помощью этого сервиса можно сразу проверить чтобы везде оно было доступно.
Scrim — конвертирует емейл в ссылку.
Используется для антиспама и скрытия основного емейла. Например если нужно указать Ваш емейл в сети для контактов, но не хочется чтобы люди его знали или хочется чтобы небыло спама.
Font comparer — позволяет ввести строку и посмотреть как она отображается в разных шрифтах.
Очень удобно для выбора шрифтов так как наглядно виден лучший вариант.
Icon finder — поиск картинок, логотипов и иконок.
Просто вбиваем в поиске что ишем и выбираем подходящую иконку.
Smush.it — уменьшает вес картики за счет удаления ненужных байтов.
То есть уменьшает вес не изменяя при этом картинку.
WebSitePulse — покажет скорость загрузки страниц сайта, их вес и другую полезную информации.
Отличный ресурс для оптимизации скорости загрузки и выявления «тяжелых» страниц для их последующей доработки.
Php Storm — лучший IDE редактор для кодинга в частности для mac OS.
Я перепробовал множество и Php Storm лучшее из всего что видел, множество функций, в частности автоматических, дебагинг, хорошее применение цветов и пр. Благодаря чему написание кода становится удобным и уменьшается количество ошибок.
Codebeautifier — делает из непонятного CSS файла понятный и читабельный CSS файл.
Удобно для нагладности с точки зрения хорошего тона написания кода.
Bonus 1
Очень часто можно заметить ужасные сообщения об ошибках или названия кнопок, исходя из которых просто не понятно что делать. Советую пользоваться такой схемой:
1. Все кнопки должны называться глаголами. То есть название кнопки всегда должно быть как «Отменить», «Сохранить», «Удалить» и не как не «Готово», «Сделано» и прочее (ибо что готово? что сделано?). Название на кнопку подразумевает какое-то действие поэтому должно быть глаголом.
2. Вывод ошибки должен обязательно указывать 2 пунка:
а) что случилось?
б) что делать?
Ошибка не должна выглядеть как «Fatal Error» или «Неизвестная ошбка» или «Ошибка сервера» или вообще «Ошибка 126581». Если ошибка выводится на экран то она предназначается для пользователя, поэтому должна простым языком изложить что случилось и что делать. Например «Вы ввели неверный логин, введите правильный». То есть все сразу понятно. Если ввести только один пункт например, что случалось, то иногда не понятно, а что дальше-то делать. Или наоборот если вы указали что делать дальше, то непонятно что случилось.
Bonus 2
Для ускорения загрузки страницы часто полезно удалять ненужные пробелы, символы, табуляции и прочее из файла, а так же удалять комментарии и форматирование с целью того чтобы не объяснять потенциальному злоумышленнику или просто кому-либо как у вас все работает. То есть, грубо говоря, сделать чтобы скрипт был в одну строку без чего-либо лишнего. Для этого существуют сервисы под названием «minifier». Все они предназначены для одних типов файлов CSS или JS или HTML. Но очень часто бывает что в одном файле используется несколько языков, к тому же все они в перемешку. В таком случае использовать minifier нельзя, так как он неправильно проинтепритирует код. Для решения этой проблемы я написал несложный код, которые ищет все файлы с расширением php во всех папках, включая вложенные, начиная с места где этот файл лежит и удаляет все ненужные символы, комментарии, табуляции и тд. независимо от того что языки программирования перемешаны в одном файле. Единственный момент что комментарии в JS во всех файлах должны иметь вид /**/, а не # или //.
<?
function listdir($start_dir='.') {
$files = array();
if (is_dir($start_dir)) {
$fh = opendir($start_dir);
while (($file = readdir($fh)) !== false) {
if (strcmp($file, '.')==0 || strcmp($file, '..')==0) continue;
$filepath = $start_dir . '/' . $file;
if ( is_dir($filepath) )
$files = array_merge($files, listdir($filepath));
else
array_push($files, $filepath);
}
closedir($fh);
} else {
$files = false;
}
return $files;
}
$files = listdir('.');
for($i=0;$i<count($files);$i++) {
$file=$files[$i];
if(substr($file, -3) == "php" && $file != "./ИМЯ_ВАШЕГО_ФАЙЛА.php") {
$file_cleared = php_strip_whitespace($file);
$file_cleared = preg_replace('#s*/*.*?*/s*#i', "", $file_cleared);
$patterns[] = '/: /';
$patterns[] = '/n/';
$patterns[] = '/ == /';
$patterns[] = '/ = /';
$patterns[] = "/+ /";
$patterns[] = "/ +/";
$patterns[] = '/ === /';
$patterns[] = '/ /';
$patterns[] = '/ /';
$patterns[] = '/ /';
$patterns[] = '/ /';
$patterns[] = '/ /';
$patterns[] = "/t/";
$patterns[] = "/<?php/";
$patterns[] = "/} /";
$patterns[] = "/ }/";
$patterns[] = "/ {/";
$patterns[] = "/{ /";
$patterns[] = "/) /";
$patterns[] = "/ )/";
$patterns[] = "/ (/";
$patterns[] = "/( /";
$patterns[] = "/> /";
$patterns[] = "/; /";
$patterns[] = "/%(/";
$replacements[] = ':';
$replacements[] = '';
$replacements[] = '==';
$replacements[] = '=';
$replacements[] = '+';
$replacements[] = '+';
$replacements[] = '===';
$replacements[] = ' ';
$replacements[] = ' ';
$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,"<br>";
}
}
?>
Для использования нужно создать php файл, и вставить туда этот код, после чего в коде заменить «ИМЯ_ВАШЕГО_ФАЙЛА» на имя вашего файла.
Автор: Goodver
