Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.

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

→ Демо: ссылка
→ Исходники: ссылка

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

В этой статье мы рассмотрим:

1. Внедрение Google Maps на сайт

• Добавление через вставку iframe в разметку
• Добавление через API

2. Кастомизация маркера

• Инициализация маркера
• Анимация маркера
• Изображение маркера

3. Кастомизация информационного окна

• Добавление информационного окна
• Открытие информационного окна
• Кастомизация элементов информационного окна
• Параллакс-эффект для элементов в информационном окне

4. Кастомизация карты

• Изменение цвета объектов карты
• Кастомизация элементов управления
• Маска для карты

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



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

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

На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

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



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.

Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.

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

Перевод книги Marijn Haverbeke "Eloquent JavaScript". Лицензия Creative
Commons attribution-noncommercial license. Код предоставляется под лицензией MIT.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

IT-интерфейсы часто растут из физических. Например, вот аппаратные чекбоксы:



Вообще, лучший же пример правильного инженерного интерфейса – это гранёный стакан.

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

Сейчас покажу ещё несколько интерфейсов, которые облегчают жизнь. Общий смысл – попробовать понять, как думал разработчик, чтобы сделать что-то удобнее.

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

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

make_clickable
Находит в тексте ссылки и делает их кликабельными.
Пример:

$string = "This is a long text that contains some links like http://www.wordpress.org and http://www.wordpress.com .";
echo make_clickable( $string ); 

popuplinks
Добавляет target='_blank' rel='external' всем ссылкам в тексте.
Пример:

$string = "This is a long text that contains some links like <a href='http://www.wordpress.org'>http://www.wordpress.org</a> and <a href='http://www.wordpress.com'>http://www.wordpress.com</a> .";
echo popuplinks( $string ); 

wp_list_pluck
Достает определенные поля из коллекции.
Пример:

$posts = get_posts();
$ids = wp_list_pluck( $posts, 'ID' ); // [1, 2, 3, ...]

antispambot
Преобразовывает адреса электронной почты в символы HTML, для защиты от спам-ботов.
Пример:

$email = 'example@email.com';
echo '<a href="mailto:' . antispambot( $email ) . '">' . antispambot( $email ) . '</a>';

В нашем издательстве вышла довольство интересная книга по дизайну от Сhip Kidd’s:

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

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

4. Мастера на все руки

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

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

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



Итак, совместный досуг с ребенком на выходные – собираем usb-микроскоп из веб-камеры.

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



Погуглив, я обнаружил что их легко можно купить. Но вот цена кусалась. Например, самый дешевый Vixin Ploarie Star Tracker стоит от $400 + доставка. Да и грузоподъемность его вызывала сомнения. В перспективе я планировал от широкоугольного объектива перейти и к 70-200/2.8 который вместе с камерой весят под полтора кг.

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

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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Мы сделали интеграцию COLT с Sublime. Изменения настолько значительные, что мы даже добавили после точки единицу и теперь COLT имеет версию 1.2.5.

JavaScript занимательный язык программирования.

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

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

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

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

Angular — зрелый и мощный JavaScript-фреймворк. Он довольно большой и основан на множестве новых концепций, которые необходимо освоить, чтобы работать с ним эффективно. Большинство разработчиков, знакомясь с Angular, сталкиваются с одними и теми же трудностями. Что конкретно делает функция digest? Какие существуют способы создания директив? Чем отличается сервис от провайдера?

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

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

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.