Вредоносное ПО (malware) - это назойливые или опасные программы,...
В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен - добро пожаловать в комментарии!
Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
Для любителей Twitter Bootstrap был создан этот генератор, благодаря которому вы сможете легко изменять начальные настройки стилей и приступить к прототипированию.
Переключатели и тумблеры на чистом CSS. Очень качественно и просто.
Colllor генерирует гармонирующую цветовую палитру на основе заданного цвета. Позволяет избежать эффекта «вырвиглаз» в ваших проектах, и при этом использовать широкий набор цветов.
Компрессия для ваших CSS и JavaScript файлов без забот и проблем.
Полезная утилита, синхронизирующая вносимые через FireBug изменения с CSS файлами. Можете представить, какое количество времени вы себе сэкономите.
Этот сайт поможет вам отсортировать CSS по заданным критериям, приоритетам, селекторам и так далее. Очень удобная вещь.
Генератор индикаторов загрузки для AJAX и jQuery. Легок в использовании и кастомизации.
Этот тул поможет вам сгенерировать симпатичную ленточку. Ну вы понимаете, что я имею ввиду - они нынче повсюду.
Проект typecast предназначен для шрифтовых экспериментов. 30 секунд на регистрацию, и у вас в арсенале довольно сильный инструмент, позволяющий делать всевозможные операции со шрифтами, и того как вы найдете свою идеальную комбинацию, все экспортируется в CSS. Ну разве не прекрасно.
Множество иконок и пиктограм для CSS использования на вашем сайте. Выбираете интересующие, смотрите preview и скачиваете. Все просто.
Удобнейший апп для создания спрайтов. Просто перетаскиваете необходимые изображения, кликаете Generate и получаете sprite sheet. Пока работает только в Chrome Firefox.
Если вы делаете responsive проект, то здесь вы можете проверить как он будет выглядеть на экранах различных устройств.
Хотите легко и непринужденно создавать анимации с CSS? Тогда вам по ссылке. Задаете направление, координаты, смотрите анимацию и скачиваете исходный код.
Еще один инструмент для работы с CSS спрайтами. Тоже drag"n"drop интерфейс, но мне он кажется по-симпатичнее.
Если вы любитель препроцессора LESS, то возможно вам будет интересен этот инструмент, конвертирующий из CSS в LESS одним кликом.
Отличный генератор бэкграундов. Огромный выбор текстур, эффектов и возможностей по их модификации.
SnipSave 
Этот сайт предлагает вам хранить все свои CSS сниппеты в одном месте. У себя в библиотеке, то есть. Приятный интерфейс, работается с удовольствием.
Prefixr
Приложение от Jeffrey Way помогает быстро решать проблемы кроссбраузерности. Вы можете писать CSS код только под один браузер, затем пропускать его через Prefixr, и он будет генерировать недостающий код для верного отображения в других браузерах.
HTML5 PLease 
Можно назвать этот проект онлайн-помощником по HTML5. Сомневаетесь в использовании конкретного нового тега? Сайт подскажет, стоит ли его использовать. И если стоит, то как именно.
Рано или поздно любой разработчик сталкивается с вопросом, какие инструменты лучше всего подходят для его работы. Выбор хороших инструментов позволит существенно увеличить производительность разработки и повысить качество кода. В данной статье мы рассмотрим используемые нами средства при разработке frontend-части наших проектов, также организации самого процесса.
Инструменты.
Профессионала своего дела отличает не только качество его работы, но и выбор инструментов, которые он использует.
Текстовый редактор
Стоит начать с текстового редактора. Большинство людей не пользуют его и на 50% от возможностей. Скорее всего, если вы пользуетесь чем-то лучшим блокнота, то вам могут быть доступны такие возможности как:
- Zen Coding
Позволит вам быстро создавать html-разметку. Экономит время и позволят постигнуть особый дзен. (Прочитать про то, что это такое, можно на этой странице).
- Live Templates
Нам часто приходится набивать одни и теже конструкции: объявление функций, объектов, конструкций языка. Live Templates позволит автоматизировать рутинный набор шаблонных кусков кода и сконцентрировать внимание на более важных кусках приложения. Ко всему прочему вы можете легко расширить набор шаблонов, создав их для фреймворков, которые чаще всего используете.
- File Templates
Шаблоны файлов позволят вам быстро разворачивать новые модули проекта. И также, как и в случае с Live Templates обычно можно расширять набор шаблонов необходимыми.
- Live Edit
Наличие такой функции у редактора позволит не обновлять браузер при верстке макета после каждой правки — это действие автоматизируется!
Отличный текстовый редактор, который можно рекомендовать — Sublime Text 2 . Поддержка плагинов на все случаи жизни, подсветка кода, кроссплатформенность — все это делает его отличным редактором для использования. К тому же он бесплатный.
Но для действительно крупных проектов мы используем PHPStorm /WebStorm от JetBrains. Эти продукты обеспечивают разработчика всем необходимым функционалом, особенностями, описанными выше, а также отсвечиванием кода и зависимостей между всеми файлами проекта.
Как SublimeText, так и PHPStorm поддерживают множество комбинаций клавиш, зная которые можно ускорить и упростить редактирование текста. Изучить комбинации можно используя сервис Shortcut Foo . Обучение проходит в игровой форме, так что это отличный способ совместить приятное с полезным.
Технологии
Используйте те технологии, которые позволят писать меньше кода для достижения того же результата. Однако помните, что поддержка получаемого кода должна выходить как можно дешевле.
К примеру хорошей практикой является использование sass/less, которые расширяют привычные нам css добавляя такие удобные механизмы, как переменные. После того, как ваши файлы стилей готовы, достаточно запустить программу-процессор, которая переведет sass/less в обычный css.
Использование БЭМ-методологии поможет крупным поектам не погрязнуть в коде верстке. Четкие разделение стилей на отдельные файлы и структуризаия их внутри каталогов позволит тратить меньше времени на поддержку кода. Основные принципы БЭМа можно прочитать . Также существует набор инструментов под названием bem-tools , который позвоялет быстро разворачивать файлы стилей.
Workflow
Отлаженный процесс разработки кода повышает скорость работы и ее качество.
Для обеспечения праллельной работы команды разработчиков используются стоит использовать стандартные средства, такие как git (про успешный git workfow можно прочить ). Для координации выполнения задач применяется система багтреккинга, к примеру Jira и Redmine .
Деплой проекта
Для разворачивания готового приложения на боевой среде мы используем Jenkins . Его задача — забрать из репозитория актуальную версию, и после окончания процесса сборки и подготовки файлов она должна вылить результаты на серверы. Для обеспечения этих процессов используется phing .
Остался открытым вопрос подготовки проекта к выливке. Для фронтенда на локальной среде разработки это обычно:
- Транслирование sass/less в css
- Контроль зависимостей
- Конкатенация файлов
- Проведение автотестов
Для продакшен-версии подготовка также включает в себя:
- Минификацию файлов
- Обфускация кода
- Оптимизацию изображений
Автоматизация всех этих действий — первостепенная задача, которую необходимо решить для организации оптимального процесса разработки.
Для выполнения данных задач мы используем проект Yeoman . Данный инструмент позволяет построить на своей основе весь процесс workflow frontend-разработки. Он реализует все указанные выше пункты.
Разработка с помощью Yeoman
Также Yeoman позволяет на своей основе построить весь процесс разработки фронтенда. С его помощью можно быстро развернуть структуру папок для типовых проектов. Для этого достаточно в папке проекта ввести команду:
yeoman init
Запустится диалог, после ответов на вопросы которого в каталоге развернутся служебные папки и файлы.
Помимо этого Yeoman позволяет указывать тип проекта. В таком случае он подготовит дерево папок и файлов для указанного фреймворка.
Выше было указано про такой удобный инструмент, как Live Edit. Так вот, Yeoman запускает веб-сервер для Ваших приложений с реализацией Live Edit. Для этого нужно вызвать команду:
yeoman server
Через пару секунд откроется окно браузера с запущенным приложением. Теперь любые изменения в html, css или js-файлах будут сразу же отображаться в браузере. Ваши sass-файлы также будут компилироваться в css после каждого их сохранения.
Итак, друзья, вы решили встать на путь программирования? Жму руку, это решение изменит вашу жизнь. Это всегда интересная и востребованная работа на стыке интеллекта и творчества, работа о том, как принести пользу людям, сделать мир чуточку лучше. Возможности реализации в ней бесконечны.
В программировании много разных областей: веб-разработка, мобильная, десктопные приложения, разработка ОС, драйверов для железа. Веб-разработка - одна из самых интересных и востребованных областей. К её плюсам можно отнести то, что ваш продукт лежит в Интернете, и чтобы его увидеть, достаточно набрать адрес в браузере любого устройства, не нужно ничего качать и устанавливать. К тому же, с помощью современных инструментов, зная веб, можно разрабатывать сразу и мобильные, и десктопные приложения. Веб состоит из frontend (то, что видит клиент в браузере) и backend (серверная часть, занимается хранением, обработкой и выдачей данных). Я предлагаю начать знакомство с вебом именно с фронтенда.
Да, кстати, меня зовут Роман Латкин, я почти 10 лет варюсь в веб-разработке. Когда я начинал, всё было одновременно просто и сложно. Просто, потому что для построения приложения много знать было не нужно: вот HTML, немного CSS, чуть-чуть JavaScript - и готово. Сложно, потому что разработка велась через боль. Сейчас множество этой боли вылечено с помощью громадной экосистемы инструментов, но она очень пугает новичков, они не знают, как подступиться к фронтенду, с какой стороны подойти. Мне повезло, я наблюдал развитие фронтенда почти с начала, и у меня в голове всё неплохо уложилось. И я хочу в помощь начинающим разработчикам передать это понимание. Надеюсь, после прочтения этой статьи, вы будете чётко знать, каким путём идти, куда копать и по какому плану развиваться.
Три составляющих фронтенда
Весь фронтенд состоит из трёх составляющих: HTML (содержание и разметка), JavaScript (логика) и CSS (внешний вид, позиционирование). HTML описывает содержание страницы и выглядит примерно так:
Если вам придётся как-нибудь вручную использовать эти средства, чтобы сделать более-менее сложный проект, то вам предстоит испытать много боли. К счастью, мир развивается, сложные вещи упрощаются, люди придумывают всё новые и новые инструменты и технологии, которые делают этот созидательный процесс более приятным и быстрым.
Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия - широкое понимание, вертикальная - глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся - постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.
Чтобы хорошо представлять причины текущего положения вещей, нужно хотя бы чуть-чуть знать историю пути развития фронтенда, да и вообще веб-приложений в целом. Инструментов сейчас столько, что не только новичок, сам чёрт ногу сломит. Поэтому, чтобы в этом всём хорошо ориентироваться, начнём именно с истории, с короткой экскурсии, как всё начиналось, а затем плавно перейдём к современным подходам.
Первые сайты
Вначале люди писали на чистом HTML, рисовали внешний вид на чистом CSS, делали логику на чистом JavaScript. Типичное старомодное приложение - это когда серверная логика генерирует HTML (отвечая на запрос посетителя, сервер берёт данные из базы данных и вставляет их в HTML) и отдаёт его вместе со статическими файлами стилей и клиентской логики на JavaScript, которой в то время (около 10 лет назад) было немного. При совершении перехода на другую страницу весь этот процесс повторялся. То есть раньше как такового разделения на фронтенд и бэкенд не было, было одно цельное приложение, которое одновременно и работало с базой данных, и генерировало HTML.
jQuery
Писать на чистом JavaScript надоедало и появился хороший инструмент - jQuery , который с помощью удобного синтаксиса позволял обращаться к элементам страницы и выполнять с ними какие-то действия. Появлялись различные плагины, готовые решения, стало проще и интереснее.
Но приложения развивались, объём клиентской логики рос, и постепенно всё это превращалось в большую лапшу. Чтобы её распутать, нужна была какая-то форма, архитектура.
MVC
Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части - MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.
Здесь началась история single page application, SPA - приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX . Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.
Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular , Backbone - представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.
Процессоры и сборщики
Приложения начали расти в размере, и тут пришло время рассказать о сборщиках, препроцессорах и пакетных менеджерах. Постараюсь вкратце по ним пробежаться, несмотря на то, что они заслуживают отдельной статьи.
В вебе важна скорость, поэтому нельзя просто так отдавать посетителю большие файлы, они будут идти по сети слишком долго. Поэтому все ресурсы сжимаются с помощью разных минификаторов. JavaScript чаще всего с помощью uglify (он удаляет пробелы, делает названия переменных короче и ещё много чего интересного). В CSS удаляются пробелы и могут ещё объединяться некоторые свойства. И всё это собирается в один или несколько файлов вместо 10-20, один файл скачать гораздо быстрее, и на сервер нагрузка меньше.
CSS
Что касается CSS, появлялись так называемые препроцессоры . Они расширяют синтаксис CSS, добавляют туда кучу разных возможностей - вложенные блоки, переменные, циклы. Даже просто отсутствие точек с запятой очень помогает и ускоряет написание кода?.
Препроцессор - это такая программа, которая запускается и компилирует этот сахарный синтаксис в чистый CSS. Использование препроцессоров позволяет избежать повторного использования кода, выстраивает архитектуру, и по сути превращает язык описания стилей в язык программирования. Изучите какой-либо инструмент, и вы поймете. Я для себя сейчас выбрал Stylus ; есть ещё несколько, например - LESS , SASS .
React , хоть он и обрёл большую популярность и развитую экосистему, на практике оказался слишком голый, сложный, многословный. Для того, чтобы сделать простую форму, нужно много-много лишнего кода написать и кучу дополнений поставить. Для того, чтобы создать простое приложение, нужно ещё много чего установить, и вариантов для простых вещей очень много, легко можно потеряться - экосистема хоть и огромная, но в ней сложно ориентироваться; внешне одинаковые приложения могут быть совсем по-разному устроены внутри. А концепция JSX - переплетение кода и разметки, выглядит не столь удачно, сложно потом понимать, что же такое хотел сказать автор кода, сложно менять разметку.
Vue.js
Тут появился Vue.js - гибкий, эффективный и простой в освоении веб-фреймворк, который несёт в себе всё те же концепции, но они в нём выглядят гораздо удачнее. Он объединил в себе всё лучшее из Angular и React, более чётко ответил на вопрос «что есть что». Из коробки Vue содержит уже большое количество инструментов и возможностей, которые в несколько строк позволяют писать объёмную логику. Разработка значительно упростилась.
Vue принёс ещё несколько интересных концепций, как, например, однофайловые компоненты - файлы, которые содержат в себе сразу логику, разметку и стили, и они там не переплетаются, как в случае с React и JSX. Vue из коробки позволяет использовать любые препроцессоры, которые очень органично вписываются в однофайловые компоненты. И имеет множество готовых встроенных решений, даже свою имплементацию Flux. Vue обладает отличной документацией на русском языке, которая научит вас лучшей практике во фронтенде, от сборки приложения до автотестов.
Изоморфные приложения, SSR
В разговоре об одностраничных приложениях мы упустили одну важную деталь: когда поисковый робот обращается к одностраничному приложению, он ничего не видит - только пустую страницу с тегами body без контента. В старомодных приложениях сервер обратился бы к базе данных, сгенерировал представление и отдал бы готовый HTML с текстом страницы. В случае с одностраничным приложением сервер отдаёт пустую страницу, которая лишь после инициализации подтягивает данные и показывает представление, чего конечно же поисковый робот не сделает. Таким образом, использовать одностраничные приложения для сайтов, ориентированных на контент, SEO, недопустимо.
Это недопущение обходилось множеством хаков и костылей, пока не появилась концепция SSR - Server-Side Rendering . Умные Парни научили весь JavaScript, который работал в браузере, выполняться на сервере с помощью NodeJS (технология создания серверных приложений с помощью браузерного языка JavaScript). Это, конечно, ввело свои ограничения, но жить стало легче. Теперь можно было написать логику один раз на одном языке, и она сразу же работала и на сервере (при первом обращении посетителя/робота генерировался HTML с контентом страницы) и в браузере (последующие переходы посетителя). Это и называется изоморфное, универсальное приложение.
Схема простая: при первом заходе посетитель отправляет запрос на сервер NodeJS, который обращается к API-серверу, берёт данные в виде JSON и отрисовывает их в HTML, возвращая посетителю. Дальше уже приложение живёт в браузере, при последующих переходах по страницам оно напрямую обращается к API-серверу за данными и уже непосредственно в браузере отрисовывает представление.
В React имплементация этой схемы делается разными и сложными путями. В качестве готовых решений есть для этого, например, фреймворк Next.js . В документации Vue есть целый раздел , посвященный SSR. Там указан фреймворк Nuxt - Vue + SSR. С его помощью можно довольно легко писать такие универсальные приложения.
CSS-фреймворки, адаптивность
Теперь мы сменим тему на попроще и поговорим о вёрстке.
Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы . Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка . Положение блоков устанавливалось с помощью свойства позиционирования float: right/left .
В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid - современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.
Это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов - блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.
Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана - достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный - конечно же Bootstrap , сейчас уже 4-я версия. Есть ещё Bulma , тоже довольно хороший. И ещё множество менее популярных. Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки. Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.
Кроссбраузерность
Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы - списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик -
