Pull to refresh
0
0
Арсений @WebTechnolog

User

Send message

Приводим в порядок css-код. Опыт Яндекса

Reading time 6 min
Views 89K
Всем привет!

Я работаю над фронтендом огромного проекта — поисковой выдачи Яндекса. И у нас, как и у любого другого большого веб-проекта, есть огромное количество css-кода и немаленькая команда, которая с ним взаимодействует.

Когда много людей, используя разные инструменты, пишут и редактируют css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то — в другом, кто-то ставит кавычки вокруг url, кто-то — нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.



Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: css-код полностью консистентен, и прекрасно выглядит. Весь.

Как мы этого добились, можно прочитать под катом.
Читать дальше →
Total votes 174: ↑169 and ↓5 +164
Comments 70

Пишем правильный манифест для сайта

Reading time 3 min
Views 89K
Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое
Читать дальше →
Total votes 33: ↑27 and ↓6 +21
Comments 21

Как я использую SVG-спрайты

Reading time 6 min
Views 64K
Привет, разработчик!
При верстке макета из PSD часто иконки вставлены в формате SVG. А если нет — прошу их у дизайнера. Ранее я использовал иконочные шрифты, но недавно увидел преимущества спрайтов и решил попробовать с ними поиграться внедрить их в процесс разработки. Мне нравятся иконочные шрифты, но они имеют ряд недостатков(на эту тему почитайте CSSTricks). Эксперимент удался, и вот как я организовал систему.
Читать дальше →
Total votes 17: ↑16 and ↓1 +15
Comments 26

Понятно и просто про веб-компоненты и Polymer

Reading time 9 min
Views 48K


Кто я

Я — Александр Кашеверов. По образованию — магистр радиофизики. По профессии — веб-разработчик, работаю в компании DataArt с 2011 года, с 2009 увлекаюсь IT и веб-технологиями.

О чем статья, коротко

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

Вступление

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

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

Для уменьшения головной боли хорошо бы, если в контексте веб:

  • CSS не пересекался.
  • Области видимости JS не пересекались.
  • HTML был понятным и читаемым, никаких лишних элементов.

Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Comments 14

Исчерпывающее руководство по составлению почтовых рассылок

Reading time 13 min
Views 175K


Несмотря на то, что большая часть общения онлайн перешла в социальные сети, почтовые рассылки по-прежнему остаются важной частью любой маркетинговой кампании.
Читать дальше →
Total votes 33: ↑30 and ↓3 +27
Comments 12

Практические советы по повышению производительности HTML и JavaScript

Reading time 2 min
Views 31K


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

Скорость работы веб-приложений условно зависит от трех составляющих: 1) как устроена сетевая инфраструктура, через которую доставляются данные и код, 2) как работает браузер и 3) как, собственно говоря, написан ваш код, который браузер должен исполнять.

Все три компоненты постоянно улучшаются и оптимизируются. Например, в сетевом стеке определенные общие улучшения несет переход на HTTP 2.0. С точки зрения браузеров, все производители постоянно работают над улучшением своих движков. В случае Chakra в Microsoft Edge, помимо общего повышения производительности работы с JavaScript, мы добавляем поддержку специализированных средств вроде Asm.js и SIMD.js, призванных повысить эффективность кода в специфичных сценариях (в Firefox и Google Chrome — аналогично).

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

Наши коллеги Дорис Чен и Джон-Дэвид Далтон подготовили целый курс с практическими советами по улучшению производительности вашего кода на HTML и JavaScript. Вы можете посмотреть его на соответствующей странице в Microsoft Virtual Academy или под катом в виде отдельных роликов.

Читать дальше →
Total votes 21: ↑15 and ↓6 +9
Comments 1

jQuery Video Extend — расширение возможностей HTML5 видео плеера

Reading time 3 min
Views 25K
Часто вижу, что владельцы сайтов и разработчики используют видео-плееры вроде VideoJS, Flowplayer, Uppod и т.д., но очень редко вижу стандартные HTML5 плееры на сайтах. Мне это кажется странным, ведь обычные плееры в браузерах тоже выглядят очень симпатично. Что есть у стандартного «браузерного» видео плеера:

  1. Стильный дизайн. Зависит от браузера, но везде на хорошем уровне.
  2. Поддержка самого популярного формата — Mpeg4 (H.264) (Chrome, Firefox, IE, Safari, Opera).
  3. Очень удобное API — http://www.w3.org/2010/05/video/mediaevents.html
  4. Быстрая работа и поддержка мобильных устройств.

Почему же такие плееры не популярны? Вот список возможных причин:

  1. Нет простого способа добавить свой логотип.
  2. Нет поддержки FLV видео, которое часто ещё встречается.
  3. Нет возможности ставить метки на видео и создавать свои расширения.
  4. Нет возможности менять внешний вид и стиль плеера.

С последним пунктом сложнее всего, но довольно редко эта возможность используется и на плеерах, о которых я писал в начале. Чаще используется первая стандартная тема оформления. Первые три пункта я решил восполнить, написав jQuery плагин, так появился Video Extend.
Читать дальше →
Total votes 29: ↑29 and ↓0 +29
Comments 13

12 малоизвестных фактов о CSS (продолжение)

Reading time 12 min
Views 58K
Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?


Автор иллюстрации SitePoint/Natalia Balska.

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

Примечание переводчика
0. Да, я видел опубликованный пару часов назад перевод этой же статьи. Но мне совесть не позволит удалить многодневный труд из-за опоздания на пару часов :) в общем, на ваш суд.

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

2. Хотя я имею непосредственное отношение к верстке, перевод получился большим и не таким простым, как показался поначалу. Замечания по ошибкам, опечаткам, терминологии и т.п. просьба присылать личным сообщением в хабрапочту.
Читать дальше →
Total votes 56: ↑51 and ↓5 +46
Comments 13

Используем SVG на сайте

Reading time 6 min
Views 223K


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

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

Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в будущем настоящем.
Для любопытных сразу приведу сводную таблицу:
Иконочный шрифт IMG, background-image Object Inline
CSS Манипуляции Частично1 Нет Частично2 Да
JS манипуляции Частично1 Нет Да Да
SVG анимации Нет Да Да Да
Интерактивные SVG анимации Нет Нет Да Да
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Comments 18

Чат-помощник на сайт с помощью Telegram за 15 минут

Reading time 4 min
Views 191K


Про чаты-помощники


Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет.
Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером.
Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку.
И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют.
(Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом).

Есть с десяток подобных сервисов и все они работают по принципу "пробная версия бесплатно, а дальше за деньги".
На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь.
Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:
115200 руб. за 1 год



Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам.

Но я решил изобрести бесплатный «велосипед» из подручных материалов.
Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.
Читать дальше →
Total votes 41: ↑37 and ↓4 +33
Comments 43

Под прессом. Ломаем и защищаем Wordpress своими руками

Reading time 11 min
Views 90K


WordPress — это удобная блог-платформа для публикации статей и управления ими, на которой базируется огромное число различных сайтов. Из-за своей распространенности эта CMS уже давно является лакомым куском для злоумышленников. К сожалению, базовые настройки не обеспечивают достаточного уровня защиты, оставляя многие дефолтные дырки незакрытыми. В этой статье мы пройдем типичным путем «типового» взлома сайта на Wordpress, а также покажем как устранить выявленные уязвимости.
Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Comments 11

Умный кроп на основе энтропии

Reading time 2 min
Views 26K
Во многих веб-приложениях существует необходимость автоматического кропа — будь то вырезание аватарки из загруженного фото, превью крупных изображений или создание миниатюр в больших галереях.



Но машины все еще не люди, и далеко не всегда будет вырезана нужная область. Старые способы типа вырезать миниатюру 100х100 из левого верхнего угла или из центра отходят на второй план, и на арену выходит смарт-кроп.
Читать дальше →
Total votes 47: ↑30 and ↓17 +13
Comments 17

Scrollport.js — новая анимация скролла

Reading time 3 min
Views 45K
image

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

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.
Читать дальше →
Total votes 60: ↑50 and ↓10 +40
Comments 39

Победа над неочевидным. Схлопывание внешних отступов

Reading time 5 min
Views 50K
Много начинающих верстальщиков и веб-разработчиков сталкиваются с ситуацией, когда элементы на странице ведут себя не так, как ожидается, и данное поведение кажется абсурдным. Но не стоит забывать, что существующие доминирующие технологии созданные людьми думающими, а если эта технология ещё и проверенная временем, значит, в таком странном, на первый взгляд, поведении, была и остается необходимость.

Наверное, каждый сталкивался со свойством border-collapse для таблиц. Известно, что данное свойство со значением border-collapse:collapse удаляет одну из границ для соседних ячеек таблицы, предотвращая дублирование их границ. Схоже работает и особенность блочной модели, называемая схлопыванием внешних отступов (англ. — Collapsing Margin). Схлопывание внешних отступов — особенность блочной модели CSS, которая заключается в наложении вертикальных внешних отступов двух или более блочных элементов (которые могут быть или не быть соседями) для формирования одиночного внешнего отступа. Отступ, сформировавшийся в результате данного объединения, называется схлопнувшимся отступом. Заметьте, что данная особенность применима только к вертикальным отступам элемента, т.е. к margin-top и margin-bottom.
Читать дальше →
Total votes 23: ↑17 and ↓6 +11
Comments 6

Яндекс выпустил антивирус для сайтов — Manul

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

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



Однако всегда хочется лучшего. Одна из главных проблем, с которыми мы сталкиваемся при общении с владельцами зараженных сайтов, — это поиск источника заражения на стороне сервера. У Яндекса, который каждые сутки размечает тысячи сайтов как зараженные вирусом и опасные для устройств человека, есть регулярно обновляемая база вирусов. И у нашей команды появилась идея, выросшая в большой проект, – антивирус для сайтов. Так мы создали Manul, который решили выложить в open source. Это утилита, которая поможет вебмастеру понять, что произошло с сайтом и вылечить его. Под катом я расскажу подробнее о том, как он устроен и какие проблемы решает.
Читать дальше →
Total votes 117: ↑110 and ↓7 +103
Comments 161

CSS печатной версии страницы

Reading time 3 min
Views 166K


На многих сайтах есть возможность отобразить версию страницы для печати, но всегда ли удобно ими пользоваться?

Основными проблемами при распечатке документа становится плохая типографика, наличие лишней информации (например, элементы интерфейса) и неправильные цвета. Для стилизации можно использовать правило @media:
Читать дальше →
Total votes 109: ↑101 and ↓8 +93
Comments 27

Делаем веб-формы удобнее для заполнения

Reading time 5 min
Views 27K
Привет, Хабр! Сегодня для работы в Интернете все чаще используются мобильные устройства, а не компьютеры. При этом, на многих сайтах есть формы для ввода данных, позволяющие совершить покупку или подписаться на рассылку. Как результат, пользователям приходится много раз вводить на разных сайтах такие сведения о себе, как имя, номер телефона и адрес. Удобство веб-форм имеет огромное значение, потому что при работе с ними всегда вероятны ошибки, в результате чего многие пользователи вовсе отказываются от заполнения. Три года назад мы представили функцию автозаполнения в браузере Chrome, которая упрощает ввод данных в формы. Теперь Chrome полностью поддерживает в формах атрибут autocomplete в соответствии с современным стандартом WHATWG HTML. Благодаря этому веб-мастера и разработчики могут помечать поля атрибутами, например name и street-address (имя и адрес), не изменяя интерфейс или другой код сайта. Те, кто реализовал эти возможности, отмечают, что их формы стали заполняться чаще.

автозаполнение форм на смартфоне

Например, если пометить поле для ввода электронного адреса, то код будет выглядеть так:

<input type="text" name="customerEmail" autocomplete="email"/>

Больше кода под катом!
Total votes 27: ↑24 and ↓3 +21
Comments 11

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

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

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



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

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →
Total votes 96: ↑79 and ↓17 +62
Comments 37

Анимация против лагов, или лучшая битва та, которой не было

Reading time 4 min
Views 29K
image

Замечали, когда только открываете веб-сайт, первые секунды всё тормозит? Скрол как-то не ровно работает, параллаксы скачут, а из анимации словно вырезали львиную долю кадров. Но очень скоро всё нормализуется. Не замечали такого? Взгляните на демо-страницу плагина, и сразу поймёте, о чем я.

Проблема в том, что динамика не может нормально работать, пока страница лагает. В качестве решения предлагаю плагин «Afterlag.js». Плагин позволяет отслеживать событие окончания лагов. Лаги прошли, включайте анимацию, тормозить не будет. А пока страница лагает, нечего и динамику запускать, только вид портить.
Читать дальше →
Total votes 38: ↑35 and ↓3 +32
Comments 41

Количественные CSS селекторы

Reading time 7 min
Views 91K
Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.


Читать дальше →
Total votes 65: ↑61 and ↓4 +57
Comments 24

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Date of birth
Registered
Activity