Добрый день, коллеги.

Среди новинок издательства «O'Reilly», готовящихся к выходу, наше внимание привлекла следующая книга Мики Годболта, которая, несмотря на небольшой объем, может открыть новую страницу в истории веб-разработки.

UPDATE под катом

Что если бы вы могли построить сложный css лейаут в считанные минуты? Flexbox — это новый лейаут CSS верстки, который позволяет легко построить динамические макеты. С Flexbox выравнивание по вертикали, блоки с одинаковой высотой, перестановка и направление становится проще простого.



Есть популярный миф, что flex еще не готов к использованию. Но это не так! У 93% людей сейчас запущен браузер, поддерживающий flexbox. Это лучше, чем поддержка для HTML5.

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

Интервью с Дмитрием Бородиным, одним из трёх основателей компании Topface. О том как зарождался проект и каким по счету проектом он был. Об архитектуре и разработке крупного масштабируемого проекта и мастер-классе на Devconf. На какие два типа делятся программисты.

Мастер-класс Дмитрия на DevConf 2015 пройдет 20 июня

^{Aqua Mine}

Введение

После многолетнего доминирования дисплеев с высокой плотностью пикселей на мобильных устройствах, данная тенденция наконец-то дошла и до лаптопов с десктопами. По моему мнению, производители не ставили HiDPI-матрицы в основном из-за слабой поддержки DPI, отличных от 96, в Windows. К счастью, ситуация заметно улучшилась с выходом Windows 8 с Modern UI, хотя в десктопном режиме все еще далеко не идеальная — люди до сих пор жалуются на 3200×1800 при 13.3" в лаптопах и сомневаются о покупке 4K UHD 23.8"-монитора.

DPI и Linux

Возможность установки произвольного значения DPI появилась еще во времена Xfree86, но следует понимать, что это просто значение, которое ничего не делает само по себе. Его считывают и используют программы и компоненты, которые и принимают решение, каким образом отразить изменение DPI на экране. Если текст следует установленному значению DPI в 95% случаев (спасибо xft!), то размер элементов зависит от используемого окружения рабочего стола и тулкитов, на которых написаны приложения.

GTK+ 3-приложения поддерживают как целочисленный скейлинг элементов и дробный скейлинг шрифтов, так и изменение DPI на лету, без перезапуска приложений. Скейлингом элементов управляет переменная окружения GDK_SCALE, а скейлингом шрифтов — GDK_DPI_SCALE.
По умолчанию, шрифты скейлятся вместе с элементами. Таким образом, при DPI 96 и GDK_SCALE=2, вы получите шрифт, словно он с DPI 192. Чтобы отменить скейлинг шрифтов, достаточно установить переменную окружения GDK_DPI_SCALE в 0.5 (для GDK_SCALE=2).
Qt4 не умеет скейлить элементы. Для применения нового значения DPI требуется перезапуск приложения.
Qt5, начиная с версии 5.4, поддерживает целочисленный скейлинг элементов через переменную окружения QT_DEVICE_PIXEL_RATIO. DPI менять на лету нельзя, как и в Qt4, но работы в этом направлении ведутся и будут доступны с релизом Qt 5.6, как и скейлинг на каждый монитор отдельно.
WxWidgets-приложения ведут себя так же, как GTK+ 3, только не поддерживают скейлинг элементов.

Я попытался выяснить, какие DE можно комфортно использовать с HiDPI-мониторами. Тестирование проводилось на лаптопе с 12.5" 1366×768 (125 DPI) с подключенным внешним 23.8"-монитором с разрешением 3840×2160 (185 DPI).

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

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

На Google I/O нам был представлен Polymer 1.0. Это новый релиз инструмента, который включает ряд особенностей и нововведении. Пожалуй начать стоит именно с Shady DOM.

Зачем нам еще один DOM?

Инкапсуляция является основой веб-компонентов.

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

Браузеры часто используют инкапсуляцию. Например, элементы <select> и <video>, отображаются используя не доступный для нас DOM, о котором знает только браузер.

Всем привет! Я Егор Дыдыкин, руководитель группы разработки главной страницы Mail.Ru. В этой статье я расскажу о том, как мы решали задачу по созданию адаптивного портального меню — блока, расположенного в верхней части практически каждой страницы проектов Mail.Ru. Создавать, развивать и модифицировать любые кросспортальные решения (к которым относится и наше адаптивное меню) – это всегда объемная и сложная задача. Трудность работы с такими элементами в том, что они используются на всех проектах портала Mail.Ru — и соответственно, должны учитывать технологическую и продуктовую специфику каждого из них. Необходимо, чтобы портальное меню было технически независимо и могло работать в любой среде — легко встраиваться в каждый из проектов и соответствовать их логике.

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



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

А теперь подробнее о том, как мы это сделали.

Доклад Юрия Ветрова с конференции UXPeople.

Всем привет, меня зовут Юрий Ветров (@jvetrov), из компании Mail.ru. Сегодня я расскажу о UX-стратегии. UX-стратегия – это некая необходимость, которая назрела давно в дизайне. Ранее дизайн был чем-то вроде средства для решения базовых задач, однако сегодня он становится более важным для продуктов, намного более критичным, проникая на уровень «продуктового управления». Я расскажу, что это такое в моем видении, как это происходит в Mail.ru, и постараюсь объяснить, куда мы вообще движемся, и в Mail.ru, и, как мне кажется, в профессии.

Представляю вниманию читателей «Хабрахабра» перевод публикации «Why Designers and Web Developers Must Work Together».

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

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

Почти все сегодня продают товары или услуги через сайт

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



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

Доброго времени!
У нас вышло 2-е издание книги «Путь аналитика. Практическое руководство IT-специалиста».



Перед вами настольная книга для системных аналитиков, программистов, архитекторов программного обеспечения, менеджеров проектов и начальников отделов по разработке программ. Кроме того, книга будет полезным учебным пособием для преподавателей, студентов и аспирантов кафедр IТ в технических вузах. Как воплотить неясные ожидания заказчика в блестящий и прибыльный проект? Как избежать ошибок на начальном этапе? Как стать эффективным аналитиком? Авторы отвечают на эти вопросы и делятся своими ноу-хау, которые позволят вам стать гуру в разработке программного обеспечения. Главное достоинство книги — ее практическая направленность. В ней собрана полезная информация со ссылками на теоретические материалы из разных областей разработки программного обеспечения: анализа, архитектуры, управления проектами, лидерства и управления персоналом — все, что понадобится в реальных производственных проектах.

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

Настало время поприветствовать Хабрахабр от имени стартапа Ecoisme!

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

Сегодня расскажем о том, как делаем лэндинги (посадочные страницы).
Мы используем те вещи, которые большинство разработчиков пока не используют, но которые здорово облегчают жизнь нам и могут облегчить другим.

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

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

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

Здравствуйте, коллеги.

Сегодня мы хотели затронуть такую многогранную и противоречивую тему, как фреймворки JavaScript. За последние несколько месяцев в издательстве неоднократно обсуждались перспективы издания книг и по Angular.js, и по Knockout.js, а книга по Backbone.js у нас выходила в прошлом году. Следующий материал призван помочь разобраться в сильных и слабых сторонах различных фреймворков JavaScript. Возможно, после изучения статьи читателю будет проще ответить на вопросы о том, так ли схожи эти фреймворки, и желает ли он дополнительно изучить какую-то из технологий, упомянутых в этом обзоре. Мы же попросим вас поделиться вашими соображениями о том, нужны ли новые книги по этим фреймворкам, если да — то по каким (высказываемся в комментариях, не стесняемся давать ссылки на книги).

Здравствуйте, коллеги.

В данной статье вкратце описываю свой опыт работы с несколькими малоизвестными европейскими облачными хостингами и делюсь своими объективными оценками и субъективными впечатлениями.
Так сложилось, что мне приходится регулярно выбирать, пробовать, тестировать и использовать различные хостинги для размещения клиентских сервисов (в основном, конечно же, сайтов). И для диверсификации рисков (чтобы не класть все яйца в одну корзину) различные сервисы клиента обычно размещаются на различных площадках.
TL;DR;
Vultr, Elastichosts — like
Dedify, CloudSigma — so-so
RunAbove — dislike
Attention! Никакой рекламной цели у данной статьи нет, сугубо обмен опытом и впечатлениями.

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

С чего все начинается и чем заканчивается?

Давайте вспомним, когда возникает мысль о том, что сайт нужно срочно переделать? Когда в компанию приходит новый сотрудник (менеджер) с горящим взором и желанием свернуть горы.

Аргументы для того, чтобы переделать сайт, обычно выражены не здравым смыслом и цифрами, а эмоциями: «некрасивый», «несовременный», «так уже никто не делает». И ни слова о тех, для кого он (веб-ресурс) предназначен.

За последний год я много слышал о Virtual DOM и React JS.
React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM?

Что такое DOM

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

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

Уверен, что те, кто следят за изменениями в мире Android, заметили, что Toolbar начинает играть в приложениях всё более значимую роль. Например в последней версии Gmail клиента в Toolbar вынесен почти весь функционал по работе с почтой, а в новом Google Chrome Toolbar отвечает за работу с текстом страниц.

В данной статье я постараюсь рассказать о создании динамического Toolbar, который позволит пользователю работать с контентом четырьмя различными способами в рамках одного Activity. Мы рассмотрим весь процесс разработки Toolbar-a начиная с xml файлов стилей и заканчивая анимацией иконок, а в конце статьи я оставлю ссылку на GitHub репозиторий с примером полностью рабочего приложения.

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

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



Однако всегда хочется лучшего. Одна из главных проблем, с которыми мы сталкиваемся при общении с владельцами зараженных сайтов, — это поиск источника заражения на стороне сервера. У Яндекса, который каждые сутки размечает тысячи сайтов как зараженные вирусом и опасные для устройств человека, есть регулярно обновляемая база вирусов. И у нашей команды появилась идея, выросшая в большой проект, – антивирус для сайтов. Так мы создали Manul, который решили выложить в open source. Это утилита, которая поможет вебмастеру понять, что произошло с сайтом и вылечить его. Под катом я расскажу подробнее о том, как он устроен и какие проблемы решает.