20 сервисов и советов для веб разработчиков

Ниже представлены полезные ссылки и советы исходя из моего личного опыта. Старался указать только то что может быть новым для разработчиков, поэтому ресурсов типа FireBug и других общеизвестных в списке нет.

NounProject — лучшая и наибольшая коллекция SVG картинок

В связи с тем что кроссбраузерная поддержка SVG не идеальна, я делаю следующим образом, нахожу на этом сайте SVG картинку которая мне нужна, открываю ее в блокноте и в ручную корректирую цвет и размеры (иногда и саму картинку), потом открываю файл с картинкой в браузере, делаю скриншот картинки, обрезаю ее в фотошоп и сохраняю в gif с наимешьшими параметрами. Вывод — наилучшее качество картинки, так как качество SVG не изменяется при уменьшении или увеличении, и занимает наименьшее количество места, и как следствие, отсутствие дефектов, как например, размытые края, неполное окрашивание когда цвет изменяется заливкой и тд.

Codebeautifier — кроссбраузерная подготовка CSS файлов c уменьшением веса самого CSS файла.

Так как разные браузеры, в частности IE воспринимают некоторые параметры CSS по разному, это доставляет проблем при кроссбраузерности. С помощью этого ресурса можно создать CSS файл который будет идентично работать во всех браузерах.

Iterm2 — лучшая консоль для mac OS и замена страндартному терминалу.

Особенность в том что можно разделять одно окно как вертикально так и горизонтально, то есть можно сделать во весь экран и поделить его на несколько частей разных размеров для использования для различных назначений.

Spritebaker — кодирует изображения и шрифты в base64 для последующей возможной вставки в CSS, что увеличивает скорость загрузки

Web developer — плагин для Firefox дающее множество возможностей.

Например, смотреть/вносить/редактировать куки, просматривать топографию для симметрии, инфо по картинкам и прочее.

ColorZilla — плагин для firefox позволяющий кликнуть мышкой на любой точке экрана и получить код цвета.

Не нужно делать скриншот, потом закидывать в фотошоп и кликать на цвете. Просто устанавливаем плагин и все. Очень удобно.

DataUrl — генерирует код из изображения.

Просто перетаскиваем картинку и получаем строковый код. Очень удобно, можно например передавать картинку как строку между скриптами, или хранить в базе данных в виде строки, то есть вообще файл не сохранять.

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 нельзя, так как он неправильно проинтепритирует код.

Внимание! С точки зрения хорошего кода разными языками в одном файле лучше не писать, а делать разные файлы и инклюдить.

Но если по каким то причинам Вы так все-таки сделали, то ниже приведен несложный код который я как-то писал для того чтобы убрать необязательные символы в независимости от того что в одном файле содержиться код разных языков. Он удаляет эти символы и выводит код в одну строку. Единственное требования что комментарии в 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 файл, и вставить туда этот код, после чего в коде заменить «ИМЯ_ВАШЕГО_ФАЙЛА» на имя вашего файла. Скрипт сканирует рекурсивно все папки начиная с той где этот скрипт находится.

UPD
1. Ссылку про base64 и CSS исправил (неправильно объяснил смысл ранее)
2. После определенной критики статью убрал в черновики, но после получил несколько сообщений чтобы ее вернуть, поэтому поправил и опубликовал обратно. Если что-то еще неверно, напишите пожалуйста что исправить или убрать.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 19

    +8
    > Spritebaker — кодирует CSS файл в Base64 что значительно уменьшает время загрузки
    Чего-чего?

    > я написал несложный код, к оторые ищет все файлы с расширением php во всех папках, включая вложенные, начиная с места где этот файл лежит и удаляет все ненужные символы, комментарии, табуляции и тд. независимо от того что языки программирования перемешаны в одном файле

    оторвать руки по самую голову.
      +1
      Не, ну я думаю, что эти инструменты очень полезны тому, кто минусует. Хочу посмотреть на ваш base64 encoded CSS и на PHP скрипты в которых вырезаны все комментарии, табуляции и прочие «ненужные» символы.
        0
        Нет, тут вопрос в другом — зачем делать base64 для CSS? Объем данных увеличится минимум в 1,5 раза. Оптимизации я здесь не увидел. Объединение CSS, оптимизация — тут да, смысл есть. Уменьшение объема тут есть, так же как и уменьшение запросов к серверу. А вот base64 зачем применять для CSS я ума не приложу. Приведите пример, если не затруднит.

        Удаление же комментариев и прочих ненужных вещей — ну тут смысла тоже нету. Более того, а что если проект использует аннотации через PHPDoc? Ибо наличие комментариев не особо влияет на производительность (если вообще влияет) и лишь немного влияет на потребление памяти (ибо они хранятся для рефлексий). Так скажите, зачем? Читабельность кода это не повышает, а автоформатирование кода есть в том же PHPStorm.

        Pjax — а тут какие проблемы замечены с twitter/facebook? У меня просто таких проблем никогда не наблюдалось.
          0
          > Нет, тут вопрос в другом — зачем делать base64 для CSS?
          Да вопрос тут скорее в другом, зачем автор переводит с английского, абсолютно ничего в нем не понимая. Увидел знакомые слова CSS, base64 — а остальное додумал :)

          По ссылке написано, что инструмент предназначен для кодирования изображений, шрифтов в base64 и встраивании их в CSS файл, что позволяет уменьшить число HTTP запросов.
          If you are a webdesigner or web-developer you most likely will link to external resources in your CSS: background-images, fonts. Spritebaker will encode these elements directly into your stylesheet.
            0
            Ну в этом смысл есть, если еще жестко кешировать все. Хотя я не думаю что переводить в base64 картинки имеет смысл. Шрифты — да, но есть нюансы.
              0
              Я о том, что у автора перевод неправильный. Этот инструмент не кодирует CSS файл, а только изображения и шрифты, ссылки на которых есть в том самом CSS.
            0
            Pjax, например, для кнопки like facebook используются мета теги. Если вы используете pjax, то это подразумевает то что страница загружается один раз, а потом просто обновляется ее часть, то есть мета теги не меняются так как находятся в head, а соответсвенно кнопка like у Вас будет отображать только одну информация изначально загруженную.
              0
              Есть множество других способов встроить эту кнопку. У меня несколько проектов было на backbone с полностью динамичным содержанием — проблем с фэйсбучными кнопками небыло.
                0
                Если Вы имеете в виду заменить кнопку like на предыдущую версию share, где просто отправляется URL с параметрами, то так можно, но от share пользы гораздо меньше, к тому же это другая история. Если имются в виду какиe-то другие способы вставки в динамические странице, поясните пожалуйста.
          0
          Дело не в том что из PHP скрипта удаляются комментарии. Смысл в том что в php файле могут находиться и HTML и JS и CSS, причем в перемешку, а ресурсы которые типа minify работают с одним типом. То если в файле все в перемешку это не сработает. Поэтому код был написан для того чтобы независимо от того что используются разные языка в php файле и все в перемешку все сработает. Что здесь плохого?

          Про CSS и base64 неверно написал сначала, этот ресурс нужен для вставки кодированных в base64 изображений к примеру и вставки из в уже готовый CSS. Уже исправлено.
            +1
            > Смысл в том что в php файле могут находиться и HTML и JS и CSS, причем в перемешку

            А за это нужно уже голову отрывать, а не только руки
          +1
          Код в конце в палату мер и весов. Классический пример как не надо.
            0
            Поясните
              0
              Так, как бы это выразиться, нельзя программировать. Это нечитаемый, плохой код. Если не брать во внимание оформление кода (что, в основном, вкусовщина, хотя я считаю есть золотой идеал), то как минимум нужно избавиться от его вложенности, ведь намного красивее не такой код:
              if ($condition)
              {
              //остальной код
              }
              а вот такой:
              if (!$condition)
              {
              return; // или какой-нибудь break или continue
              }
              // остальной код
                0
                :) понятно, вопросов больше нет
            0
            pathinfo, не не слышал?
            • UFO just landed and posted this here
                0
                Да норма.
                  0
                  тараканы в моей голове апплодируют стоя!

                  Only users with full accounts can post comments. Log in, please.