Front-end разработка после Internet Exporer

Содержание материала:

Frontender Magazine

На днях я подготовила README для одного проекта, который, надеюсь, будет интересен и поучителен для других разработчиков. Так вот, когда я его писала, я поняла, что несколько лет назад испугалась бы до смерти, если бы наткнулась на нечто подобное, со всякими упоминаниями о Node и его пакетном менеджере, системах Homebrew и Git, всевозможных тестах, тестовых и финальных сборках.

Когда-то основная часть рабочего процесса фронтенд-разработчика состояла в редактировании файлов, их локальном тестировании (в меру возможностей) и пересылке на сервер через FTP. Мы измеряли свою крутость умением подчинить своей воле IE6 или добиться пиксельного соответствия в различных браузерах. Многим членам нашего сообщества — и мне тоже — не хватало опыта традиционного программирования. HTML, CSS и JavaScript — обычно в виде jQuery — осваивались самостоятельно.

За последние несколько лет кое-что изменилось. Возможно, причиной этому стало то, что люди начали воспринимать фронтенд-разработку серьезно; может быть, то, что разработчики браузеров в большинстве своем наконец-то навели порядок в своих творениях; а, может, просто фронтенд-разработчики, опять же, включая меня, в конце концов постигли суть процесса разработки ПО.

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

Вот некоторые вещи, с которыми хотелось бы, чтобы все были знакомы и некоторые источники, которые можно использовать, чтобы подтянуть свои навыки. (Спасибо Полу Айришу (Paul Irish), Майку Тейлору (Mike Taylor), Ангусу Кролу (Angus Croll) и Владу Филипову (Vlad Filippov) за их вклад.)

JavaScript

Возможно это понятно и без слов, но простого знания библиотеки на JavaScript больше не достаточно. Я не говорю, что вы обязаны уметь реализовать все возможности библиотеки с помощью простого JavaScript, однако вы должны понимать в каких случаях применение библиотеки действительно уместно, и уметь работать со старым добрым JavaScript, если это потребуется.

Это значит, что вы прочитали «JavaScript: Сильные стороны», желательно больше одного раза. Что вы понимаете принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять; умеете работать с наследованием через прототипы; и можете справиться с асинхронностью.

Если ваши навыки работы с простым JavaScript оставляют желать лучшего, вот некоторые ресурсы, которые вас выручат:

«Красноречивый JavaScript»: Замечательная книга (также доступна печатная версия), посвящённая основам JavaScript
Тестовая оценка владения JS: подборка тестов с ошибками на различные темы по JavaScript; сможете ли вы переписать код тестов так, чтобы он заработал?
10 вещей, которым я научился из исходного кода jQuery — старенькая, но мощная вещь от Пола Айриша, демонстрирующая чему можно научиться, читая чужой код.

Система управления версиями файлов Git (и профиль на GitHub)

Если вас нет на GitHub, в общем и целом вы не можете участвовать в жизни крупного сообщества с открытым исходным кодом, которое выросло вокруг технологий фронтенд разработки. Клонирование репозитория с целью испробовать его возможности должно стать для вас привычным делом и вы должны понимать как использовать ветки в совместных проектах.

Хотите повысить свои навыки работы с Git?

Модульный принцип организации, управление зависимостями и тестовые сборки

Те дни, когда управление зависимостями сводилось к добавлению дополнительного скрипта или тега стилей на страницу, давно прошли. Даже если у вас не было возможности внедрить замечательные инструменты вроде RequireJS в процесс разработки на работе, вам стоит найти время изучить их в своем личном проекте или проекте вроде Backbone Boilerplate, так как преимущества, которые они в себе несут, трудно переоценить. RequireJS, в частности, делает возможной разработку с использованием небольших модульных файлов JS и CSS, а затем конкатенирует и минифицирует их с помощью своего инструмента оптимизации для дальнейшего использования.

Скептически настроены относительно разработки на основе модулей? Это не причина ничего не делать. По крайней мере, вам должны быть знакомы инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают ваш код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если вы пишете на чистом CSS — то есть не используете препроцессор вроде Sass или Stylus – RequireJS также поможет организовать ваши CSS файлы по модульному принципу. Используйте операторы @import в основном файле, чтобы загрузить зависимости для разработки и затем запустите средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались и теперь они могут существенно улучшить ваш опыт разработки, если вы научитесь ими правильно пользоваться. (Подсказка: если вы все еще отлаживаете код, используя alert , вы зря убиваете время.)

Вам наверняка стоит выбрать один браузер, чьи инструменты разработчика вы будете использовать на постоянной основе — на данный момент я склоняюсь к инструментам разработчика в Google Chrome — но не отказывайтесь полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

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

Командная строка

Если говорить о командной строке, её уверенное использование уже является обязательным — вы непозволительно много упускаете, если не готовы тут же зайти в окно терминала и погрузиться в работу. Я не говорю, что вам следует делать всё через терминал — можете продолжать пользоваться графическим интерфейсом Git, хотя думаю, в конце концов, вам же будет лучше, если вы от него откажетесь — однако, несомненно, окно терминала должно быть постоянно открыто для проекта, над которым вы работаете. Есть несколько задач, которые вы должны выполнять через командную строку не задумываясь:

ssh для подключения к другой машине или серверу
scp для копирования файлов на другую машину или сервер
ack или grep для поиска файлов в проекте по строке или шаблону
find для обнаружения файлов, чьи названия совпадают с данным шаблоном
git для выполнения хотя бы базовых действий вроде add , commit , status и pull
brew для использования Homebrew для установки пакетов
npm для установки пакетов Node
gem для установки пакетов Ruby

Если какими-то командами вы пользуетесь особенно часто, отредактируйте свой .bashrc , .profile или .zshrc (или что у вас там) и создайте для них альтернативные имена чтобы не набирать команды руками каждый раз. Также можно добавить альтернативные имена в файл

/.gitconfig . Файлы с точками от Джанни Чиаппетта (Gianni Chiappetta) могут послужить отличным источником вдохновения.

Примечание: Если вы пользуетесь Windows, я не знаю, как вам помочь, разве что могу посоветовать Cygwin. Возможно, я не права, но принимать участие в жизни сообщества фронтенд-разработчиков с открытым кодом на машине с Windows существенно сложнее. Если посмотреть на вещи оптимистически, ноутбуки MacBook Air не очень дорогие, мощные и на удивление портативные, кроме того существуют Ubuntu или Unix.

Шаблонизация на стороне клиента

Не так давно для серверов было обычным делом отвечать на запрос XHR фрагментом HTML-кода, однако за последние 12-18 месяцев сообщество фронтенд разработчиков прозрело и начало требовать данных от сервера в чистом виде. Преобразование таких данных в HTML, который затем можно добавить в дерево документа, может оказаться трудоёмким и неудобным процессом, если иметь дело непосредственно с кодом. Вот когда в дело вступают библиотеки шаблонизации на стороне клиента: они позволяют использовать шаблоны, которые после добавления данных превращаются в строку HTML. Вам нужна помощь в подборе инструмента для шаблонизации? Схема для выбора шаблона от Герен Минс (Garann Means) поможет вам найти подходящий.

CSS-препроцессоры

На днях Пол Айриш отметил, что мы стали свидетелями того, что фронтенд- разработчики пишут код, сильно отличающийся от того, который в результате оказывается в готовой сборке и ярким примером тому является код, написанный с помощью CSS-препроцессоров. Всё еще есть крикливая компания, которая считает, что только чистый CSS имеет право на жизнь, но они начинают менять мнение. Эти инструменты дают нам возможности, которые, по мнению некоторых, уже должны были быть добавлены в CSS — переменные, математические выражения, логику, миксины, а также они могут помочь справиться с префиксами свойств.

Тестирование

Одна из радостей написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых вы можете выбрать те, что вам по душе — моими любимыми на данный момент являются Jasmine и Mocha — в зависимости от стиля, который вы предпочитаете, и остальных составляющих вашей подборки.

В то время, как тестирование модульного, свободно сопряжённого кода является приятным, тестирование плохо организованного кода может быть чем-то средним между сложным и невозможным. С другой стороны, если принудить себя написать тесты, возможно, даже до того, как вы напишете код — это поможет вам систематизировать свой подход и код. Это также даст вам возможность перестроить код с большей уверенностью в будущем.

Короткий скринкаст, записанный мной о тестировании jQuery-кода с помощью Jasmine.
Пример модульного тестирования на плагине jQuery BBQ.

Автоматизация процессов (rake/make/grunt/и т.д.)

Возможность с помощью Grunt настроить проект со встроенной поддержкой модульного тестирования — это один из примеров автоматизации процессов. Реальность фронтенд-разработки такова, что нам приходится выполнять множество повторяющихся действий, но, как однажды сказал мне друг: хороший разработчик — ленивый разработчик. Советую придерживаться золотого правила: если вы выполняете какое-либо действие больше трёх раз, пора его автоматизировать.

Уже довольно давно нам в этом помогают инструменты вроде make , кроме него существуют также rake , grunt и другие. Если вы хотите автоматизировать выполнение заданий связанных с файловыми системами, исключительно полезно будет изучить язык, отличный от JavaScript, так как асинхронная природа Node может стать неподъемным грузом, если вы умеете только управлять файлами. Существует также множество других инструментов автоматизации, созданных под конкретные задачи: инструменты для развёртывания, генерирования сборки, проверки качества кода, и др.

Качество кода

Если вам когда-либо приходилось ощущать негативные последствия от пропущенной точки с запятой или лишней запятой, вы знаете сколько времени можно потерять из-за мелких ошибок в коде. Поэтому вы пропускаете свой код через инструмент вроде JSHint, верно? Он поддаётся настройке и может быть интегрирован в ваш редактор или процесс сборки несколькими способами.

Хорошее руководство

К сожалению, руководства по фронтенд-разработке не существует, однако ресурс MDN вполне подходит на эту роль. Хорошие фронтенд разработчики знают, что в каждый поисковый запрос нужно добавлять префикс mdn — например, mdn массивы javascript — чтобы избежать коммерческой чумы, которой является ресурс w3schools.

Конец

Как всегда, просто почитав обо всех этих инструментах, вы не научитесь ими пользоваться на уровне эксперта или хотя бы любителя, единственный верный способ научиться что-то делать — начать пробовать это делать. Удачи вам.

Статья переведена благодаря спонсорской поддержке компании «Одноклассники».

Немного о использовании условных комментариев [if IE]

Задача №1: подключить стили для IE 9

Не все знают, но конструкция вида

не работает начиная с 10-й версии Internet Explorer. В нём отключены условные комментарии, чтобы он внешне походил на нормальный браузер.
Для новых IE, при желании, можно определить версию через user-agent в PHP или средствами JavaScript. Однако и эту возможность в будущем Microsoft обещают убрать.

Задача №2: вывести табличку об устаревшем браузере.

Мы сделаем так по двум причинам:

Запись идентична , т.е. содержимое отображается, если версия браузера от Microsoft меньше или равна 9-й.
Максимальной версией IE для Windows XP является IE 8, которая находится за гранью добра и зла. Напомню, что на текущий момент доля XP составляет 10-20% в зависимости от региона.

Как говорится, комментарии излишни:

Поддержка HTML 5 в Internet Explorer 8 под Windows XP.

Поддержка HTML 5 в Firefox под Windows XP.

Девятый «Осёл» тоже имеет множество багов, так что разумнее будет рекомендовать другой браузер, например, Firefox или Chrome. Если пользователь/администратор не желает устанавливать системные обновления, пускай браузер сам обновляет себя, чего не умеет IE.
Обратите внимание, что запись через http:// обязательна, иначе сокращенную запись без уточнения протокола // ишаки просто не поймут.

Кратко

Пишем для старых IE ниже 10-й версии.

P.S.
Прочитал заметку годичной давности про IE11. Её автору рекомендую обратиться к психотерапевту.
Сейчас немногие поняли философию новых IE. Если что-то в них не работает, требует префиксов и вообще глючит, то теперь это проблемы Майкрософта, которые девелопера не волнуют.

Есть такая штука, как мягкая деградация (graceful degradation) — построение систем с «мягким отказом». Собственно она заключается в том, что в старых браузерах все украшательства отбрасываются, главное — нормальный читабельный Layout с сохранением базового функционала. Пора уже забыть что такое разработка под IE6-8, а если это зависит не от вас, проводить разъяснительную работу среди клиентов и руководства.

Frontend- и backend-разработка: принципы и отличия

Этот материал расскажет о том, что такое frontend- и backend-разработка, чем они отличаются и как взаимодействуют между собой.

Что такое frontend-разработка?

Frontend — это разработка пользовательского интерфейса и функциональности, которые работают на клиентской стороне веб-сайта или приложения. К этому виду разработки можно отнести все, что видит пользователь, открывая web-страницу. Frontend-разработчик сотрудничает с дизайнерами, программистами и UX-аналитиками, чтобы создавать удобный и востребованный продукт.

Чтобы наглядно понять, что такое frontend-разработка, откройте страницу любого сайта — перед собой вы увидите интерфейс. Щелкнув правой кнопкой мыши, можно посмотреть код этой страницы в браузере.

Данный код — это и есть пример работы frontend-разработчика, он скачивается в браузер пользователя, и его можно увидеть своими глазами. Код страницы описывает все, что вы видите перед собой: цвета, верстку, шрифты, расположение графических элементов и так далее.

К frontend-разработке относятся:

HTML (HyperText Markup Language) — язык разметки документов, при помощи которого формируется структура страницы: заголовки, абзацы, списки и так далее;
CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду ваш браузер понимает, как именно отображать элементы. CSS задает цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта, и так далее. Еще он позволяет выводить один и тот же документ в разных стилях, например, для печати (обычной или шрифтом Брайля), вывода передачи на экран или чтения голосом;
JavaScript — это язык, который создавался для того, чтобы оживить веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышкой, перемещения курсора, нажатия клавиш. Еще он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.

Топ-пост этого месяца: Как создать калькулятор для сайта на Вордпресс бесплатно

Что такое backend-разработка?

Backend-разработка — это набор аппаратно-программных средств, при помощи которых реализуется логика работы сайта. Попросту говоря, это то, что скрыто от глаз пользователя и происходит вне его браузера и компьютера.

Например, когда вы вводите запрос на странице поисковика и жмете клавишу Enter, frontend заканчивается и начинается backend. Ваш запрос отправляется на сервер Google или Яндекса, где расположены алгоритмы поиска. Именно там случается все «волшебство». Как только на мониторе появилась информация, которую вы искали, — вновь происходит возвращение в зону frontend .

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

Backend — это процесс объединения сервера с пользователем.

Backend-разработчик может применять любые инструменты, доступные на его сервере. Он вправе выбрать любой из универсальных языков программирования, например, Ruby, PHP, Python, Java.

Также для backend-разработки используются разные системы управления базами данных:

В зависимости от вида продукта в обязанности backend-разработчика могут сильно меняться. Такой специалист может создавать и интегрировать базы данных, обеспечивать безопасность, создавать технологии резервного копирования и восстановления.

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу: frontend отправляет пользовательскую информацию в backend, там она обрабатывается и возвращается обратно, приняв понятную форму.

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

Существует несколько вариантов взаимодействия frontend и backend:

HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы;
Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON;
Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember;
Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

Как мы видим, современная разработка — это сложный и многоуровневый процесс, который делится на две части: клиентскую и серверную. В арсенале frontend- и backend-программистов есть масса инструментов, выбор которых зависит от поставленных задач и сложности проекта. Оба вида разработки включают в себя технические и творческие компоненты.

Обязанности frontend- и backend-разработчиков, как правило, разделены, но бывают моменты, когда программисту приходится решать проблемы, которые возникают как на стороне сервера, так и в клиентской части. Нередко на рынке можно встретить специалистов, которые уверенно чувствуют себя как во frontend, так и в backend и могут совмещать два вида работ.

Начать свой путь во frontend- и backend-разработке можно с 12-месячного курса Skillbox «Профессия веб-разработчик». Он подходит для новичков и программистов с небольшим опытом. За год слушатели курса на практике изучат основные языки программирования и создадут собственное портфолио, которое поможет найти перспективную и хорошо оплачиваемую работу.

Нужно ли поддерживать Internet Explorer 8 и ниже при верстке?

Я когда то давно считал, что программирование это креатив и новаторство, пока не столкнулся с объективной реальностью )

Работая на компанию, рядовой программист превращается в оператора печатной машинки, где за него уже решили что и как он должен писать, а ему остается только соблюдать методологию и успеть все сдать до дедлайна в ущерб своему личному времени.

Поддержка древних браузеров это оружие в руках менеджеров-продажников, которым они завоевывают новых клиентов. Шепчут им сладким голосом мантры про то, что есть 2 процента людей, которые живут в каменном веке и если вы не сделаете их счастливыми, то ваш сайт недополучит эти 2 процента прибыли. Клиенты разумеется прикидывают, что 2 процента это 2 процента и соглашаются переплачивать за такую работу, рассчитывая что эти затраты в итоге окупятся. Это называется разделение ответственности, о котором в свое время писал Ф. Ницше. Менеджер продает услугу, которую он сам не будет производить, а следовательно он не будет сидеть и ломать голову над ее реализацией.

Хорошо если разработчику будут доплачивать за такие клиентские прихоти, тогда это еще хоть как то будет оправдано, но в ином случае, если программист в организации сидит на окладе, то на его плечи тяжким бременем опустятся все хотелки клиентов, начиная от pixel perfect в резиновом дизайне и заканчивая разметкой scheme в каждом теге.

Такой подход к работе требует от программиста быть постоянно на пределе. Он становится роботом, который все свое личное время тратит на изучение различных техник оптимизации кода или освоение новых фреймворков, которые внедряются руководством в процесс, после посещения ими очередного модного семинара. Scrum, Agile, TDD и прочие инновации отнимают у рядовых разработчиков самое важное — полноценную жизнь свободного человека.
Он превращается в придаточный орган корпоративного организма, который способен лишь выполнять одну функцию — писать код. Узкие специалисты перестают понимать внутреннюю жизнь представителей других профессий, а личность должна стремиться к разностороннему развитию, ибо только цельному человеку доступна цельная (читай полноценная) жизнь.
Человек должен иметь право на досуг и развлечения, и это право он отстоял в революциях 19-20 веков.
PS
Я периодически встречаю в сети советы молодым разработчикам, что они должны забросить все свои увлечения и писать сутками код, иначе они не будут востребованы рынком. Это суровая действительность, однако я надеюсь что когда нибудь добро победит бабло и справедливость восторжествует ))
PPS
Немного не в тему топика, но мысль настойчиво требовала изложить себя на «бумаге» ))

Моя история: как я стала писать код front-end, советы новичкам

Мне 22 года и в сентябре прошлого года мы с моим молодым человеком решили попробовать создать свою маленькую компанию, которая занимается созданием веб приложений.

Все очень просто, мой парень программист, только-только выпустившийся из университета. Я также в этом году закончила бакалавр. Перед нами встал вопрос что же мы хотим делать дальше. И мы пришли к общему выводу, что время до 27-30 лет мы хотим посвятить себе, что значит дружно жить, вкусно кушать и самое главное много-много путешествовать. Дальше мы поставили себе вопрос о том, как это можно сделать. Первое, нужны деньги. Я не скажу, что нужно много денег, но минимум 4000 евро в месяц на двоих. Мне кажется, этих денег вполне достаточно на двоих. Следующее, много путешествовать, то есть иметь возможность, жить в другой стране месяцами, а то и годами. Следовательно, офисная работа нам не подходит. Работать удаленно? Да, круто, но не придел мечтаний, потому что иногда приходится выполнять работу, которая совсем тебе не по душе. Мы идеалисты, мы хотим заниматься тем, что нам нравится. В итоге, мы решили создать свою компанию и заниматься разработкой собственных проектов.

Но стоп, я ж ни черта не шарю в программировании!

C такой мыслью, я начала искать ресурсы, которые научили бы меня основам разработки. Начала я по стандарту c html и css. Изначально, я знала, что буду заниматься front-end разработкой. html и css показался мне очень-очень прост. Я не говорю, что за неделю я стала мастером html, и даже сейчас спустя пол года я оооочень многого не знаю, и часто ищу помощь в интернете, но сам ПРИНЦИП работы не сложный. Мне хватило одного видео на YouTube, где парень делал сайт с Bootstrap.

После просмотра, я начала активно создавать собственные html странички. В основном это были сайты кафе, ресторанов и пиццерий. Мне нравилось и самое главное у меня как, мне казалось, неплохо получалось.

Тем временем, мой парень занимался разработкой приложения Gaspal, которое позволяет сравнивать цены на заправках. Оно доступно только во Франции и в Испании (мы живем во Франции). Я сделала дизайн для приложение и первый лендинг, который вышел в свет. Я была очень счастлива и даже на секундочку подумала, что я программист. Ха-ха-ха.

Дальше, новый проект — одновременная публикация постов в разных социальных сетях на разных языках. Я начала изучать Ruby on Rails. Базу я выучила с codeacademy.

А дальше началась практика. Честно скажу, было тяжело, многое не понимала, искала помощь в Интернете. Очень важно в IT индустрии владеть английским. К счастью, я умею говорить на английском, а в интернете есть ответы на ВСЕ вопросы, ну по-крайней мере вопросы для начинающих. И все наши старания воплотились в нашем проекте crosspost.

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

Следующий проект, наш главный проект на сегодняшний момент, это upload.express.

Помните вирусный ролик на YouTube: «А каким файлообменником ты пользуешься? Конечно же, Скайпом» ? Так вот, upload.express это альтернатива скайпу. Я, конечно, шучу, у нас кроме скайпа хватает конкурентов, особенно на французском рынке, но если есть конкуренция, значит продукт нужен и полезен.

Я полностью занималась front-end разработкой этого сайта. Оцените, неплохо ведь, да? Сайт сделан с помощью JavaScript, а именно библиотеки React.js.

Настоятельно рекомендую канал The Net Ninja всем начинающим front-end разработчикам, очень много полезных обучалок. Именно с ним я учила Реакт.

upload.express это проект, в который я искренне верю и считаю его крутым. Сам файлообменник бесплатный, но есть версия Pro, которая позволяет персонализировать свой файлообменник, следить за аналитикой и продвигать свой собственный бренд.

Конечно, за чуть больше чем пол года я не смогла полностью освоить front-end разработку, но я смогла создать достойные проекты, которыми горжусь. Если смогла я, то сможете и вы!

Идеальный план изучения front-end разработки, по-моему мнению:

2. Ruby on Rails;

3. JavaScript (React.js);

А как считаете Вы? Мне очень интересно знать и ваше мнение, потому что я еще тоже новичок этом деле.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Как показывает опыт успешных и добившихся товарищей, чтобы «вкусно кушать и самое главное много-много путешествовать и т.п.» до 27-30 лет надо не куи пинать, а много-много вкалывать и учиться. Для этого как раз самый продуктивный возраст.Сначала ты работаешь на репутацию, потом она на тебя. Как-то так.

Абсолютно с Вами согласна! Вот и я учусь, работаю и развиваюсь, чтобы иметь все,что я хочу в будущем.

Хахаха.
В 30 лет, когда ещё и желание есть и силы — вместо работы много-много путешествовать?
В 40 лет, когда ещё и силы есть и опыт — вместо работы много-много путешествовать?
В 50 лет, когда и опыт есть и ресурсы — вместо работы много-много путешествовать?

А в чем крутость проекта upload.express? Вы даже не представляете, сколько сожрет AWS за постоянное хранение данных пользователей бесплатно.

Да, без монетизации долго не протянуть этот проект. Это скорее для хостеров забава, что бы оборудование не простаивало.

Технически может у вас и норм, благо там функционала-то, но. где условия использования сервиса? Где хоть какая-то справка об ограничениях? Сколько можно загрузить, сколько будет хранится? Есть ли предпросмотр картинок? Почему я не узнаю ничего из этого, даже после загрузки файла?

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

Лэндинг про версии тоже отличился. Во-первых, я не понимаю, кому и что вы предлагаете. Вы предлагаете сделать для меня брендированный сервис загрузки и хранения файлов? Или вы предлагаете сделать для меня брендированный сервис хранения файлов, куда загружать буду только я, а на брендирование будут смотреть те, кому надо скачать? Если последнее (что имеет хоть какой-то смысл), то почему единственный промо, показывает страницу загрузки, а не скачивания? Почему я не могу (судя по всему) заполнить никакого описания для файла и загрузить обложку, например?

Почему мне пришлось искать малюсенькую ссылку «тарифы» вверху страницы? И она хотя бы не продублирована в футере?

Что такое «Обмен файлами» и почему это есть в бесплатном тарице, но нет в обоих платных?
Что такое «Загрузка одним файлом»? Загрузка чего? Судя по всему, вы имели ввиду возможность _скачать_ несколько файлов архивом. Но везде вы пишете только про загрузку, а скачивание — это другое.
«4 Гб за загрузку» — это что такое? Максимальный размер загружаемого файла? А сколько за одну загрузку на остальных тарифах? И сколько лимит дискового пространства базового тарифа? Домен входит в стоимость платных тарифов и на кого он оформляется? Или возможно только прикрепление уже имеющегося домена?

В общем, что-то для хипстеров, которые вообще ни о чем думать не должны, только будут ли даже они за это «нечто» платить.

Front End Development after Internet Explorer

Artwork by SitePoint/Natalia Balska

Welcome to the second part of this small series dedicated to the beginning of the end of what the community calls oldIE (namely Internet Explorer up to and including version 10). The first part in our series listed the obsolete techniques and practices that can be discarded in order to simplify the front-end development process. It also sparked a very interesting discussion in the comments that makes me add the following disclaimer (which, in hindsight, should have been included in the first part as well):

The decision process regarding whether or not to drop support for oldIE is a totally different subject, that is not part of the topics covered by this series. If the specifics of your website or application force you to maintain support, you have my sympathy. If you can close that chapter for good, join the rest of us for the ride.

That being said, today we will start exploring the long list of modern features that we are now free to use without restrictions. Many thanks go to the creators of CanIUse.com — without their wonderful tool, this article would have been a lot more difficult to document properly.

We will split these features into four main groups:

Modern CSS properties and features;
HTML5 features;
JavaScript features…
… and anything else that doesn’t fit above.

To keep things tidy we will discuss only those features that lacked proper support on oldIE but can be used safely on Internet Explorer 11 or Microsoft Edge. In this article, we will look at the first two of these feature groups. Let the show begin.

1. Modern CSS properties and features

The main source of complaint regarding oldIE was usually its poor support for modern CSS properties and features, due to the slow update cycle. It makes sense then to start our journey in this area.

Flexbox

Flexbox is the third major step in creating web layout, after tables and floats. Foundation 6 offers already a Flexbox-powered alternate grid and the future version 4 of Bootstrap will include the same feature. There are also many small grids based on Flexbox, a few of them already mentioned here on SitePoint, like sGrid.

There are still issues and bugs (especially with the Internet Explorer 11 implementation), but they are well documented and people can find ways around them. Therefore, if you haven’t already, it’s time to start experimenting with Flexbox and use it in your projects. Here are a few resources to get you started:

Топ-пост этого месяца: R-Money — обзор СНГ- партнерки для заработка на студентах и школьниках

CSS Gradients

CSS gradients allow you to create smooth visual transitions between two or more specified colors. With a bit of creativity, you can also generate patterns that can be repeated like any other background-image . There is no longer any need to chop images for page backgrounds, buttons or other UI elements. Just whip a gradient in place and you’re done. If you don’t know where to start learning about them, here are some helpful links:

CSS Animations

For a long time, the animation on the web happened with the use of either Flash or JavaScript. CSS3 brought us an alternative with the Animation Module. With Flash delegated to a back row seat, the main advantage CSS animations have over the JavaScript-powered animations is the fact that they are executed in a different thread, without blocking the rest of the scripts on the page. Not every property can be animated and some properties require a larger performance price than others. Modern browsers help some more, with built-in support for hardware acceleration. This means that, when properly tuned, CSS animations can be very smooth (at least 60 fps) and with minimum performance impact. This topic has been very popular recently on SitePoint, with many articles discussing the fine points of tuning CSS animations. Here are only a few examples:

2D/3D transforms and transitions

Transforms and transitions are the main building blocks of CSS animations. With proper care and attention to detail, we can do things that a while ago required Flash. While this is not the only modern animation technique available (with alternatives like SVG, Canvas and various JavaScript techniques coming to mind), it is one of the easiest to learn, use and maintain. Fellow SitePoint authors have written plenty articles on these topics, making it easy for everyone to start learning these useful techniques:

Border image

The common way to alter the look of borders is to use the options available for the border-style property. In the times of oldIE, the only way to add fancy decorative elements (like custom borders) was to use complex markup constructs and sliced images. Today we can use another technique based on the border-image property without further restrictions. This technique allows you to take an image, cut it in virtual slices and use those slices to compose the border. Not much different from the old technique, but without the messy markup and using only one image.

Here are some articles that will teach you all you need to know about border-image :

Multi-column layout

Despite the overwhelming popularity of the Web, printed magazines still have their own glamour – and a good reason for that is the carefully crafted layout, often split in multiple columns. The digital medium tried for a long time to mimic the options of the printed world. Today, we are collecting the first fruits of this effort, as we can now make use of the option to arrange the content in multiple columns. And if you don’t know where to start, here are some pointers:

Rem and viewport units

CSS units are a large family, even though most developers are mostly familiar with pixels and (perhaps) ems. With big bad oldIE sent to retirement, we can get now more of their siblings out to play, especially rem and viewport units. Let’s have a look at what these units are and what we can do with them.

Pointer events

For a long time, JavaScript was the main way to add interactivity to elements other than links and buttons. Things have changed with the wider adoption of pointer events. Although their origin lies with SVG, pointer events allow developers to specify if/when a graphical element can respond to mouse events. This can have interesting applications, like this Mars telescope to view the London Olympics. The guys at Microsoft also look at pointer events as a way to unify interaction, whether it’s done using touch, mouse, stylus or graphic pen. Let’s see what else we can do with them:

SVG Filters

For all the advancements that happened on the Web, for all the new fonts and techniques to manipulate images, we still return to a graphics editor whenever any fancier effect is required. Color blending, text effects, masking and other similar requirements still get us running to the designer, asking for an image with the desired result.

Well, now you can give the poor guy (or lass) a well-deserved break. All the modern browsers support a feature called svg-filters that allow you to recreate most of the effects that previously required an image editor. While you don’t quite get Photoshop in a web page, things are not that far away either. Don’t believe me? Have a look at this demo hosted on GitHub: FILDROP – SVG Filters. Pretty neat, right?

Now, before you rush to fire up your code editor, take a small break first to brush up on the theory. Find out why SVG filters are awesome, learn the right way for applying SVG effects to HTML content or check out advanced techniques from the mistress of SVG herself, Sara Soueidan.

2. HTML5 Features

HTML5 brought more than a new set of tags and attributes — it enabled native browser support for some actions that previously required the use of JavaScript or other scripting methods. Let’s have a look at the new set of shiny things we can now play with.

Autofocus

This attribute does exactly what the name says — it puts the focus inside an input. Think about how you can type directly as you arrive on the Google search page (note — they are using a different solution). If you do want to integrate a fallback using JavaScript, be sure to use the DOM ready event instead of window.load . It is not a good idea to have the page jump to the input location (and maybe even bring up the onscreen keyboard) when the user already started interacting with the content.

For more info you can check the following resources:

classList (DOMTokenList)

Manipulating classes on a DOM element is not a new idea. As proof of the popularity (and usefulness), jQuery has great support for these actions, at the cost of carrying the entire library along. Native support for DOMTokenList allows you to do the same operations faster and more efficiently. While support in IE11 is not 100% complete, this shouldn’t stop you exploring the possibilities offered by this functionality.

To get a better understanding of the details of DOMTokenList, you can consult the following resources:

Dataset & data-* attributes

Storing data inside the markup is not a new idea. Developers have been doing this for a while, initially with custom class names, later with data-* attributes. jQuery has been very helpful in this direction, with their .data() functionality. In our context though, you can go around jQuery completely and use the native support to handle the data-* attributes directly.

If you need a refresh on the native support for dataset and data-* attributes, you can get started with the following resoruces:

Email, telephone & URL input types

Form validation has always caused headaches for web developers everywhere. How many times have you searched the Internet for the perfect regular expression to validate emails? Fortunately, the HTML5 Constraint API can make this task easier with minimum JavaScript involved, with the help of the email , telephone or URL input types. Here are a few examples on how to do it:

Shiny new attributes: hidden, placeholder, spellcheck, pattern

HTML5 brought a set of new helpful attributes meant to provide native support for some techniques that usually are integrated using JavaScript. Most of them extend the functionality of input fields, enhancing the usability and the validation process. While none of them are a real surprise (having existed already for a while), now it’s the first time they have such a broad support, that makes them easy to use without deploying polyfills. If you need a refresh on the HTML5 client-side validation, check this article – Client-Side Form Validation with HTML5. Otherwise, let’s have a look at what’s on the list:

“Hidden” attribute – This is actually an offshoot of CSS, as it behaves exactly as display: none . It can even be overridden with CSS using the display property and it can be applied to any HTML element. As a solution, it is more semantically correct and should more efficiently aid screen readers.
“Pattern” attribute – The automatic validation for some fields can’t be standardized though. Let’s consider the . Phone formats are different from country to country so you can’t have a generic validation model. That’s where the pattern attribute kicks in. You can specify a regular expression as its value and the browser will use it to validate the user input. For a great collection of various patterns, you should check HTML5Pattern.
“Placeholder” attribute – The placeholder attribute specifies a short hint that describes the expected value of an input field. Some people even use them as a replacement for labels, but that opens a good deal of usability problems — once the fields are populated, the placeholder disappears. Cumulated with the lack of visible labels, this can cause a lot of confusion. While there is plenty of room for abuse, when wisely used, the placeholder can give many helpful hints to the user.
“Spellcheck” attribute – We are already used to seeing textareas doing a spellcheck correction on the text we write. What most developers don’t know is that you can control this function, turn it on or off and even enable it on normal text input fields. Why would you want do to that, you might ask? You might want to spellcheck the query of a search field or disable the function when the textarea is used for inputing code, for example. For more details, you can check the following article from Mozilla Developer Network — Controlling spell checking in HTML forms.

New semantic elements

Semantic elements in HTML5 are tightly related to machine-processing of the web content, with two main fields that benefit the most — indexing and search engines on one hand, and assistive technologies on the other hand. Support is still not 100%, there are minor hiccups here and there and choosing the right element in each case can be daunting in the beginning. The debate is still going strong on the use cases and it’s up to each one of us to choose how much of these elements we deploy and where. HTML5Doctor.com has a great article on the topic of HTML5 semantics, with plenty of information and points outward to plenty relevant resources.

PNG favicons

Back in 1999, Internet Explorer 5 introduced a new feature, called the favicon — a tiny image that sits next to the website URL in the address bar, in the bookmark list and, more recently, in the tab where the website is loaded. The old .ico format still has a degree of versatility (it can encapsulate multiple image formats at 16×16, 32×32 and 48×48 pixels), but it has become obsolete in the age of high-density screens. Fear not though, as now you can use PNG images as favicons. Just keep an eye at the peculiarities of each browser, as they are detailed in this great CSS-Tricks article on favicons.

Progress element

The progress bar has been a constant on the computer screen from the birth of the first graphical operating system. There are various implementations on the web too. Today, we can use a native control for the progress bar, as long as we pay attention to the specifics of each browser integration. Fortunately, we have already great guides and resources, such as the ones below:

Range input type (sliders)

Like the progress element we mentioned above, sliders have been another constant on computer screens everywhere for decades. It didn’t take long to land on web pages either, with the help of various JavaScript solutions. Finally, you can now create a slide control natively with a single HTML tag. There are multiple situations when this element is the most intuitive solution. Find out how and when to use it:

Iframe sandbox

Iframes have become increasingly common in recent years, even though the end user barely perceives them. Social media plugins, banners and other adverts – all of them end opening up iframes to display their intended content. With so many doors open into your page, the chance for a malicious script to make a successful attack on your website increases as well.

Here is where the sandbox mode for iframes comes into play. It instructs the browser to cut down on the privileges (like running JavaScript or triggering popups). Both Microsoft and Chromium teams have documented this feature for your convenience:

Session History Management

“Old school” website behaviour is that as you load new pages, the URLs change and get stored into the browser history. With this, you can go back and forth through your history when you want to have another look at a page you just moved away from. The rise of “Single Page Apps” brought a great challenge — everything happens in the same page, via AJAX calls, yet we still need distinct URLs for various states of the application. This is solved with the latest updates to the history management, namely the popstate event, the history.pushState and history.replaceState methods. You can check the following resources for an in-depth analysis of the feature:

Conclusion

That was quite a list and I’m still saving about the same amount for another article. None of the features outlined in this article are new. Most have been available, in one way or another, for a few years. What has changed is the native support accross the mainstream browsers, together with the reduction in market share for the oldIE. The most important consequence is that, most of the time, we no longer need countless polyfill solutions. So take a look at the analytics of your website and, if possible, drop the polyfill training wheels and make use of the full capabilities of modern browsers. Your clients will be grateful for the improved performance and experience.

Frontend разработчик

Фронт-энд разработчик (с англ. «front-end developer») — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

Само слово «фронт» говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем, и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. Для сведения: существует универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. «full stack developer»).

Основные инструменты фронт-энд разработчика в web: JavaScript, HTML, CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он осуществляет программирование пользовательского интерфейса. Основная задача фронтендера — вёрстка сайтов: написание HTML-кода и CSS-стилей для представления информации в понятном всем браузерам виде и внешнему соответствию сайта макету дизайнера. Часто бывает, что макеты не отражают всех деталей общей идеи. В данном случае фронт-энд разработчик включает свои дизайнерские способности, чтобы учесть все технические детали и нюансы. Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы: Sass/SCSS, jQuery, LESS, AngularJS, Bootstrap, Prototype, Ember.js, Backbone, React.js, Grunt Gulp. А появление Chrome Dev Tools и Firebug позволило повысить производительность труда.

Топ-пост этого месяца: Joomla вход в админку (джумлы). Как войти (зайти) в административную панель (админку) Joomla

Фронт-энд разработчик в web отвечает за то, чтобы страницы сайта выглядели во всех браузерах одинаково и соответствовали макету дизайнера. С появлением новых средств разработки и более современных браузеров эта задача решается проще. Но интерфейсы современных сайтов или интернет-сервисов становятся более сложными, а многообразие устройств, с которых пользователи выходят в сеть, постоянно расширяется — ноутбуки, планшеты, смартфоны. Поэтому фронт-энд разработчику очень важно, как и любому программисту, постоянно находиться в курсе всех новшеств и фишек, чтобы успешно адаптировать сайты под новые устройства.

Код сайта, написанный фронт-энд разработчиком, можно увидеть, вызвав контекстное меню на сайте и выбрав пункт «Посмотреть код».

Особенности профессии

Функционал фронт-энд разработчика в web выглядит следующим образом:

создание HTML-страницы сайта на основе дизайн-макетов;
вёрстка сайта и шаблонов для CMS;
привязка к пользовательскому интерфейсу скриптов, которые обеспечивают визуализацию и анимацию страниц сайта;
обеспечение необходимого уровня пользовательского интерфейса (UI — User Interface) и опыта взаимодействия (UX — Uzer Experience).

Эмуляция псевдоэлементов after и before для IE 6-7

Задача

Научить IE6-7 генерировать контент, как при использовании псевдоэлементов after и before.

Немного истории

Псевдоэлементы after и before описаны еще в спецификации W3C Cascading Style Sheets, level 2 CSS2 Specification от 12 мая 1998 года. Но, как это часто бывает, процесс внедрения рекомендаций в жизнь растянулся на годы.

Opera заявила о поддержке CSS2 и, в часности, after и before с версии 4.0 (июнь 2000 года).

Safari (январь 2003 года) поддерживает after и before изначально, с версии 1.0.

В ноябре 2004 года состоялся релиз Firefox 1.0. Начиная с этой версии присутствует частичная поддержка before и after. К сожалению, в этих элементах не срабатывали, например, свойства position, float и list-style. Полная поддержка реализована только в версии 3.0 (июнь 2008 года).

Вышедшая в декабре 2008 года версия Chrome 1.0.154.36 (которая считается первой стабильной) тоже не вызывает в этом вопросе нареканий.

Дольше всех боролся с прогрессом Сами Знаете Какой Браузер. Даже появившийся в октябре 2006 года IE7 не утруждает себя поддержкой after и before. Сдался IE только в марте 2009 года, с выходом 8-й версии.

Таким образом, на данный момент безопасно использовать after и before как минимум для Opera, FF, Safari, Chrome, IE8. Если подобрать прием для IE6-7, то можно смело применять эти полезные псевдоэлементы!

Теория

Используя псевдоэлементы after и before можно вставлять автоматически генерируемый контент до и после элемента HTML. Что конкретно будет вставлено, задается CSS свойством content.

На практике это выглядит следующим образом. Попробуем, например, сделать FAQ используя список определений. Будем автоматически подставлять слова «Вопрос:» и «Ответ:».

В CSS прописываем псевдоэлементы и отступ для красоты.

Для большинства браузеров этого достаточно.

Решение

Для того, чтобы предыдущий пример сработал в IE6-7, будем использовать expression и свойство innerHTML.

CSS теперь будет такой:

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

Основной момент отражен в строках 03 и 07. Это оптимизированный expression, который выполнится только один раз. Свойство innerHTML позволяет получить доступ к HTML коду, который находиться между открывающим и закрывающим тегами.

запись this.innerHTML = «Генерируемый контент» + this.innerHTML обеспечит вставку нового контента до существующего (т.е. эмуляция before);
запись this.innerHTML = this.innerHTML + «Генерируемый контент» обеспечит вставку нового контента после существующего (эмуляция псевдоэлемента after);
выражение, взятое в кавычки («Генерируемый контент») — это значение эмулируемого CSS свойства content (то, что собственно вставляем).

Решение 2. Используем insertAdjacentHTML

Update 1.06.10. Предыдущий вариант в некоторых случаях вызывает сбои в работе IE6. Более устойчивым является использование метода insertAdjacentHTML. Фрагмент CSS, для IE6-7 в этом варианте будет таким:

Для псевдоэлемента before используем параметр afterBegin, для after — beforeEnd.

Особенности вставки спецсимволов

Популярное применение данного приема — вставка спецсимвола-маркера для списка. Тут нужно не забытвать, что в expression спецсимволы можно писать цифровым или мнемоническим кодом, а в свойстве content ставим слеш и шестнадцатеричный код (переводим в шестнадцатеричную систему обычный числовой код):

Front-end разработка

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

Современный developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными , такими как: Twitter, Bootstrap, Foundation 3, Compass.

Что необходимо знать разработчику:

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

Вот основные базовые навыки:

JavaScript

Простого знания библиотеки на JavaScript больше не достаточно. Необходимо понимать в каких случаях применение библиотеки действительно уместно, и уметь работать со старым добрым JavaScript, если это потребуется. Необходимо так же понимать принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять; уметь работать с наследованием через прототипы; и справляться с асинхронностью.

Система управления версиями файлов GIT

Без GitHub, в общем и целом фронт-енд разработчик не может участвовать в жизни крупного сообщества с открытым исходным кодом, которое выросло вокруг технологий фронт-енд разработки. Клонирование репозитория с целью испробовать его возможности должно стать привычным делом важно понимать как использовать ветки в совместных проектах.

Модульный принцип организации, управление зависимостями и тестовые сборки

RequireJS инструменты делают возможной разработку с использованием небольших модульных файлов JS и CSS , а затем конкатенируют и минифицируют их с помощью своего инструмента оптимизации для дальнейшего использования.

Если вышеописанный вариант не подходит по причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались. Если научиться ими правильно пользоваться, то они могут существенно улучшить опыт разработки. Стоит выбрать один браузер, чьи инструменты разработчика будут использоваться на постоянной основе, но не надо отказываться полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости , а также возможность сохранять и использовать пользовательские цветовые палитры.

Есть несколько задач, которые необходимо выполнять через командную строку не задумываясь:

ssh для подключения к другой машине или серверу
scp для копирования файлов на другую машину или сервер
ack или grep для поиска файлов в проекте по строке или шаблону
find для обнаружения файлов, чьи названия совпадают с данным шаблоном
git для выполнения хотя бы базовых действий вроде add, commit, status и pull
brew для использования Homebrew для установки пакетов
npm для установки пакетов Node
gem для установки пакетов Ruby

Тестирование

Написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых можно выбрать те, что по душе.

В то время, как тестирование модульного, свободно сопряжённого кода является приятным, тестирование плохо организованного кода может быть средним между сложным и невозможным. С другой стороны, если принудить себя написать тесты, возможно, даже до того, как написан код — это поможет систематизировать свой подход и код. Это также даст возможность перестроить код с большей уверенностью в будущем.

Возможность с помощью Grunt настроить проект со встроенной поддержкой модульного тестирования — это один из примеров автоматизации процессов. Реальность такова, что разработчику приходится выполнять множество повторяющихся действий, но, как говорится: хороший разработчик — ленивый разработчик. Если действие выполняется больше трёх раз, пора его автоматизировать.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Инструменты для тестирования и отладки в IE

Очень часто, при разработке проекта, его тестирование в Internet Explorer откладывают до последнего. И это вполне нормально, если ваши проблемы в основном связаны с версткой страницы.

Однако, во время разработки веб-приложения с большим количеством различных функций, вполне возможно появление другого рода проблем: постоянная отладка, производительность на клиентской стороне, проприетарные проблемы и многое другое. В любом случае, производить отладку в IE не всегда так же комфортно, как в других браузерах.

В сегодняшней статье, мы рассмотрим различные наборы инструментов, которые помогут вам сделать процесс отладки и тестирования в IE, более приятным.

Сборки браузеров

В первую очередь конечно же нужно установить все популярные версии Internet Explorer (IE6, IE7, IE8). Для этого существует множество различных решений, я расскажу о четырех из них.

Internet Explorer Collection

Лично я рекомендую использовать – Internet Explorer Collection. Не пугайтесь, это очень надежный инструмент (несмотря на внешний вид их сайта). Internet Explorer Collection содержит множество версий IE, совершенно независимых друг от друга, так что их можно использовать одновременно.

Я рекомендую эту сборку главным образом потому, что их браузеры весьма стабильны. Кроме того, Internet Explorer Collection содержит Internet Explorer Developer Toolbar.

BrowserSeal.BrowserPack

Если вам требуются более старые версии других браузеров, я рекомендую установить BrowserSeal.BrowserPack. Он использует, упомянутый выше Internet Explorer Collection, и кроме того, позволяет установить браузеры типа Safari3 и Opera 9.

Браузеры, входящие в состав BrowserSeal.BrowserPack стабильны и не имеют никаких выявленных проблем.

IETester

IETester имеет некоторые преимущества в сравнении с другими сборками, например такие как открытие разных версий IE в табах.

IETester разрабатывается командой DebugBar, которая так же предоставляет замечательные инструменты отладки DebugBar и Companion.js (оба рассмотрены в сегодняшней статье).

К сожалению, IETester (версии 0.4.2) остается весьма ненадежным приложением, к тому же во время отладки находятся некоторые несоответствия. Будем надеяться, что рано или поздно эти проблемы будут исправлены, и мы сможем взять IETester на вооружение.

Microsoft Expression Web SuperPreview

Microsoft Expression Web SuperPreview – это полноценное приложение и часть продукта Microsoft Expression Web 3. Главное его назначение – это возможность сравнить одну и ту же страницу одновременно в IE6, IE7 и IE8.

На мой взгляд, это приложение не предназначено для отладки и тестирования.

Основные инструменты отладки

Скорее всего, для отладки в Firefox, вы используете Firebug. И возможно, вы также слышали о Firebug Lite и даже использовали его. Далее, вы узнаете какие еще способы можно использовать для отладки кода под Internet Explorer.

Firebug Lite

Конечно же, вы уже знакомы с Firebug Lite. Если нет, читайте далее. Firebug Lite – это javascript-файл, который можно подключить к странице, чтобы получить возможность использовать некоторые функции Firebug, в других браузерах.

Скажу сразу, я не являюсь большим фанатом Firebug Lite. Во-первых потому, что большинство возможностей консоли недоступны в других браузерах. Во-вторых, он не всегда хорошо работает. Мне не раз приходилось сталкиваться с рядом проблем в IE, поэтому не стоит концентрироваться только на этом инструменте.

IE Developer Toolbar

Возможно, вы знакомы с инструментами разработчика под IE8. IE Developer Toolbar – практически тот же самый инструмент для IE6 и IE7. И кроме того, он поставляется вместе со сборкой IE Collection, по умолчанию.

IE Developer Toolbar прост в использовании и предоставляет широкий набор средств для отладки. По функциональности, его можно сравнить с Web Developer – дополнением для Firefox.

DebugBar

Все, чего вам не хватило в Developer Toolbar, вы найдете в DebugBar. В большинстве случаев, когда вам требуется найти что-либо за пределами документа, вам поможет DebugBar. Он очень быстрый и надежный.

Если бы требовалось описать DebugBar в двух словах, то достаточно сказать “он работает!”.

CompanionJS

Companion.js интегрируется с IE, и вполне может быть назван простейшей версией Firebug. В отличие от Firebug Lite, Companion.js, имеет более удобную консоль и отчеты об ошибках.

К сожалению, в Companion.js есть два серьезных недостатка: 1) он пока не поддерживает методы типа console.dir(); и 2) иногда вываливается в ошибку, при совместном использовании с другими инструментами разработчика для IE.

Инструменты тестирования производительности

Клиентское тестирование производительности и оптимизация – это практика, которая долгое время “не существовала” в веб-разработке. Я имею в виду, что ей долгое время не уделяли должного внимания.

Как вам наверное известно, Internet Explorer (особенно IE6), не настолько хорош, особенно в сравнении с другими браузерами. Но, когда вы начнете тестировать производительность в IE6, вы удивитесь, насколько незначительные вещи могут влиять на скорость работы сайта.

Далее рассмотрены некоторые инструменты тестирования производительности, которые можно использовать в любом браузере, не столько в Internet Exploer.

dynaTrace AJAX

Если вы используете Speed Tracer в Google Chrome, тогда вы полюбите dyna Trace AJAX. Название говорит само за себя – он используется для диагностики и отслеживания AJAX, а также проблем с производительностью клиентских скриптов. Кроме того, в дополнение, он предоставляет инструменты для отслеживания проблем рендера (отрисовки) и сетевой загрузки.

dynaTrace AJAX не самый простой в использовании инструмент. Однако в их одноименном блоге, вы найдете множество полезной информации, об применении этого мощного приложения. Установите dynaTrace AJAX, и разрешите все проблемы производительности, замедляющие работу сайта в Internet Explorer.

MySpace’s Perfomance Tracker

MySpace’s Perfomance Tracker или “msfast” – это плагин для браузера, который помогает разработчикам улучшить производительность кода, путем сбора и измерения возможных “узких мест”, на веб-странице.

У меня возникли небольшие проблемы, при установке бета-версии. Но после того, как была установлена альфа-версия и произведено обновление до бета-версии, все заработало.

JSLitmus

JSLitmus – это простой инструмент для создания специализированных JavaScript-тестов. Я особенно рекомендую использовать JSLitmus для тестирования производительности всего вашего JavaScript-кода.

JSLitmus предоставляет дополнительные преимущества в Internet Explorer. Как известно, в IE, существуют проблемы с JavaScript, способные нанести серьезный удар по производительности. Но если вы заранее создадите несколько простых тестов, то времени на поиск и решение этих проблем уйдет гораздо меньше.

Fiddler2

Fiddler – это отладочный прокси-сервер, ведущий логи всего HTTP(S) трафика. Fiddler позволяет вам проверить весь HTTP(S) трафик, установить точки прерывания и “играть” с исходящими и входящими данными. Fiddler включает мощную скриптовую подсистему, и может быть расширен с помощью любого .NET языка.

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

Другие ресурсы

Во время написания статьи, мне попался инструмент под названием IEInspector. Инструмент платный, но есть бесплатная демо-версия. У меня не было времени рассмотреть его подробнее, возможно вы захотите попробовать его.

Кроме того, на сайте Microsoft Windows, есть список, в котором перечислены полезные инструменты для тестирования и разработки приложений под Internet Explorer 8.

Существует еще множество других интересных приложений и сервисов, которые не рассмотрены в этой статье. Если вы знаете хорошие инструменты тестирования и отладки кода под Internet Explorer, оставляйте ссылки в комментариях.

Перевод статьи «Debugging and Testing in Internet Explorer Made Easy«, автор Samuli Hakoniemi