Апофеоз сотни холиваров и улучшения работы QA — чек-лист по юзабилити интернет-магазинов. В нем частично задействованы прошлые документы — чек-листы по формам и фильтрам. Пользуйтесь.

Миллион статей написано об организации рабочего процесса, редакторах кода, удобстве и стабильности работы. Я, не претендуя на «самый расчудесный способ», хочу рассказать, как организована среда web-разработки у нескольких человек из нашей команды. Сразу оговорюсь, если вы используете только локальные GUI-шные редакторы кода, Notepad++, Eclipse и т.п., то эта статья не для вас. Мы очень много работаем в консоли, и поэтому, в результате многолетнего естественного отбора, многие пришли к VIM, а консоль является практически отдельным табом в среде разработки, т.к. в процессе работы надо смотреть логи, писать запросы к базе, перезапускать сервисы и т.п. Поэтому, я хочу поделиться конкретным практическим рецептом организации среды web-разработки для программиста или админа, который много времени работает в стандартной удаленной консоли.

Не всё так просто

На первый взгляд, JavaScript может показаться достаточно простым языком. Возможно, это из-за достаточно гибкого синтаксиса. Или из-за схожести с другими известными языками, например, с Java. Ну или из-за достаточно малого количества типов данных, по сравнению с Java, Ruby, или .NET.

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

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

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

Сначала пару слов, чтобы все понимали, что есть что. Под микроразметкой в целом (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.

Словарь — это своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. О них мы писали в предыдущей статье. Синтаксис — это способ использования словаря. Он определяет, с помощью каких тегов и как будут указываться сущности и их свойства, например, на веб-страницах.

Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:

• Microdata — Микроданные (словарь Schema.org чаще всего встречается именно в этом синтаксисе);
• Microformats.org — Микроформаты (напоминаем, что это объединенный стандарт синтаксиса и словаря);
• RDFa и RDFa Lite (в упрощенном виде RDFa рекомендуется создателями словаря Open Graph. Также встречается с другими словарями, например, со словарем Dublin Core или Data Vocabulary);
• JSON-LD — расширение JSON.

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

Once upon a time В 2004 году разработчики из W3C создали стандарт, который, по их мнению, подходил для «представления всего в мире». Так появился синтаксис RDFa (Resourse Description Framework in attributes), который позволяет однозначно транслировать HTML-разметку с семантическими данными в RDF.

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

EditorConfig это конфигурационный файл и набор расширений, к большому количеству редакторов кода и IDE (Далее просто IDE).

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

Файлы .editorconfig можно найти в таких проектах, как jQuery, Ruby, WordPress, и многих других.

Плагины доступны для большого количество IDE




Давайте разберемся, как это работает.

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

Аналитика и прочие управления требованиями — как раковая опухоль: все время норовят расползтись и пожрать всю доступную бумагу.

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

В предыдущих статьях я поднимал тему о возможности эффективного использования связки RAWTherapee + GIMP в практике фотолюбителя, не желающего связываться со взломанными продуктами или переплачивать за отчасти ненужную функциональность Adobe Photoshop. Применение RAWTherapee во многих случаях предпочтительнее, чем использование встроенной утилиты Adobe Camera Raw, и во всех известных мне случаях обеспечивает более быстрый и как минимум не менее качественный результат, чем поставляемые с камерами конвертеры. (Исключением является здесь, пожалуй, Olympus Viewer, чудовищно медленный, но зато способный в полной мере дать пользователю прочувствовать знаменитую «магию фирменных цветов Olympus». О том, как этого достигнуть с использованием RAWTherapee, будет сказано чуть ниже.)

Годами я использовал Chrome DevTools, Firebug и даже Opera Dragonfly для отладки, трасировки и профилирования моего JavaScript кода. Замечу, что использовал эти замечательные инструменты не только для работы с JavaScript, но и для отслеживания событий сети, отладки CSS, работы с DOM.

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

Когда-то мне доводилось участвовать в попытках внедрения Agile в команде, разрабатывающей ПО. В регулярных дискуссиях, стараясь, чтобы это внедрение не превратилось в карго-культ, я снова и снова цитировал пост в блоге Элизабет Хендриксон. Ему уже больше трёх лет, но мне он нравится, и я бы хотел представить вашему вниманию (и вашей борьбе с карго-культом) перевод этого поста.

Как человеку с опытом разработчика стать дизайнером? Советы от человека, который сделал это.

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

Данный подход популярен среди разработчиков вредоносного кода, так как с одной стороны значительно усложняет анализ исходного кода, а с другой позволяет хранить код в текстовых данных. Например, часть вредоносного кода может загружаться со стороннего сайта, из базы данных, мета-данных jpeg/png/gif или передаваться в запросе к скрипту. Кроме того, часть кода, представленная в виде обычной текстовой строки, может быть легко зашифрована.

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

Несмотря на все многообразие вредоносного кода, существует не так много вариантов объявления и косвенного вызова функций. Ниже представлены примеры различных техник скрытого вызова кода. Для простоты и наглядности пусть «вредоносный код» представлен вызовом

echo "Test"

который выводит слово «Test» на странице. Естественно, в реальных шеллах и бэкдорах имена переменных и функций, а также исполняемый код не хранятся в открытом виде и в большинстве случаев обфусцированы.

Официальный учебный курс «Введение в Linux» от Linux Foundation, который ранее стоил 2400 долларов, будет доступен бесплатно на платформе онлайн-обучения EdX. Записаться на курс можно уже сейчас. Платформа массового онлайн-обучения EdX была создана Массачусетским технологическим институтом совместно с Гарвардским университетом. На ней представлены уже больше 30 университетов. Теперь и Linux Foundation станет официальным партнёром EdX. Курсу присвоен код LFS101x. Он рассчитан на 40 — 60 часов обучения. Занятия начнутся в 3-м квартале 2014 года.

Divine Elemente

Один из самых потрясающих проектов, которые я встречал за последнее время. Плагин Divine Elemente дает возможность дизайнерам создавать WordPress темы без каких либо навыков фронт/бэк-енда. К сожалению у меня не было возможности поработать с ним. Он доступен только для Windows. Для того что бы все работало необходимо создавать макет в соответствии со встроенным blueprint — это некий Bootstrap, Boilerplate или даже набор инструкций по наименовании слоев и групп. Разработчики обещают множество всего хорошего, в том числе: SEO friendly, валидную и семантичную верстку, читаемый код. Впечатляет!

Ничего не предвещало беды, как вдруг в 2 часа ночи раздался телефонный звонок.

— Алло, милый! У меня youtube не работает!
— Прекрасно, иди спать!
— Нууу! Там новая серия вышла!
— Завтра всё сделаю!
— Ну Заяя, нуууу!
— Ладно! Ладно! Сейчас.
…

Из этого поста вы узнаете ответы на следующие вопросы:
Как спасти свою милую от стресса в 2 часа ночи? Как вернуть доступ к youtube.com, если ваш провайдер его заблокировал? Как быстро поднять VPN и настроить клиентские устройства (Android, Windows, Debian, dd-wrt) для работу с ним? Как безопасно серфить интернет на открытых точках доступа? Как заработать карму в глазах своей возлюбленной? Если вам это интересно, добро пожаловать под кат!

Сайт devdocs.io — проект французского программиста Тибо Курубля. Здесь собрана и упорядочена документация по наиболее популярным веб-технологиям, фреймворкам и API, и многим другим средствам разработки. DOM, HTML, JavaScript, jQuery, Node.js, PHP, Ruby, Python, Git, Angular, Backbone, CoffeScript, Less, Sass, Redis и много чего ещё… Всё оформлено в едином стиле, по всей базе документации работает поиск, в том числе нечёткий. Есть возможность выбрать только необходимые технологии, по которым надо искать. Вообще, интерфейс DevDocs радует — ничего лишнего, всё очень понятно и функционально, доступно множество клавиатурных сокращений.

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

---

50$. Basecamp

Простая и удобная система управления проектами от команды 37signals. Это основной инструмент взаимодействия как внутри студии, так и с заказчиками. Все задачи заводятся в виде простых списков и легко меняются местами друг с другом простым перетаскиванием. Каждая задача выглядит как публикация с комментариями. Любой может указывать, кто из команды получит уведомление на email о его комментарии. Можно ограничивать видимость некоторых задач для клиента.

Перевод pdf файла с сайта http://www.mcdonaldland.info/ с описанием 23-х шаблонов проектирования GOF. Каждый пункт содержит [очень] короткое описание паттерна и UML-диаграмму. Сама шпаргалка доступна в pdf, в виде двух png файлов (как в оригинале), и в виде 23-х отдельных частей изображений. Для самых нетерпеливых — все файлы в конце статьи.

Под катом — много картинок.

1. Схема

Имеем:

• Frontend — NGINX проксирующий сервер для принятия и распределения нагрузки (IP — 1.2.3.4 — внешний, IP — 192.168.5.10 — внутренний DMZ) по хорошему он тоже должен стоять за firewall-ом, но тут схема для простоты понимания.
• Два сервера с поднятыми ownCloud
• cloud-1 IP — 192.168.1.11
• cloud-2 IP — 192.168.1.12
• Хранилище файлов NFS-storage IP — 192.168.1.20 для размещения данных пользователей с доступом по NFS.