Меня зовут Владимир, я занимаюсь мобильным фронтендом в Яндекс.Почте. В нашем приложении уже была тёмная тема, но недожатая: мы умели перекрашивать интерфейс и простые письма. Но письма с форматированием оставались светлыми и контрастировали с тёмным интерфейсом, из-за чего глаза ночью могли уставать.

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

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

Материал подойдет тем, кто только начинает знакомство с БЭМ. Сначала коснемся теоретических аспектов методологии, а в разделе «Практика» я покажу, как их можно применить.

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

Эта книга называется «CSS для профи», но это также всеобъемлющая книга. В тех случаях, когда какие-то понятия или принципы трудны либо, как правило, трактуются неправильно, автор подробно объясняет, что они обозначают или как работают и почему именно так. Другие главы, возможно, не настолько исчерпывающи, но Кит Грант дает достаточно сведений, чтобы вы могли эффективно работать и двигаться в правильном направлении, если захотите расширить свои знания. В целом эта книга заполнит пробелы в ваших теоретических познаниях.

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

Проблема с отображением картинок возникла с момента появления адаптивности в интернете. Мы хотим, чтобы сайт хорошо смотрелся на любом планшете, телефоне, в портретной или ландшафтной ориентации экрана, а также на супербольших дисплеях 5K. Также на рынке появились Retina-дисплеи с высокой плотностью пикселей (DPI), где обычные картинки выглядят размытыми. Растет доля мобильного трафика, и крупные ресурсы нацелены на экономную загрузку изображений. Рассмотрим, как решают эти проблемы на сайтах Apple, Tilda и блог-платформе Medium.

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


Я, пытаюсь приручить джуниора

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



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

Девять лет назад я написал заметку про то, как не быть обманутыми злыми буратинами. Всё, что там написано не потеряло актуальности, и сегодня мы рассмотрим попытку выбрать банк читая бумаги, а не рекламу. В данной заметке рассмотрены ВТБ, Альфа Банк, Авангард. По этим банкам приведены цитаты из действующих на 22.08.2019 договоров и оценочные суждения автора о приемлемости и удобстве предлагаемых договоров. В целом автор рассмотрел уже 8 банков из топа, и там тоже всё плохо. Рассматриваются только условия договоров, не учитывая процентов по кредитам, депозитам и иные потребительские качества банка.

В моём менеджменте персональных и семейных финансов фигурирует три разных категории финансов:

1. Оперативные финансы — карточка и наличные которыми я пользуюсь ежедневно, магазины, интернет покупки и тп. Ключевые параметры: удобство пользования, качество поддержки, кешбек.

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

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

В данном случае я выбирал банк для второй категории.

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

Привет, Хабр! Представляю вашему вниманию перевод статьи Vue.js Tutorial: From jQuery to Vue.js автора Paul Redmond.

Что касается библиотек JavaScript, то никогда не было более популярной библиотеки, чем jQuery. Она создавалась для обхода DOM элементов с использованием CSS селекторов в то время, когда совместимость браузеров была важной проблемой для разработчиков.

Фактически jQuery настолько универсален, что я подумал что он отлично передаст то, почему я люблю писать UI с Vue, используя компонентный JavaScript. В этом руководстве мы сначала рассмотрим создание пользовательского интерфейса с jQuery, а затем перепишем его с помощью Vue.

В данной статье речь пойдет о замечательном фронтенд фреймворке Vue.js. Как вы видите, статья называется «Vue.js для сомневающихся», и, если вы до сих пор не могли решиться попробовать Vue.js на практике, то надеюсь, что после прочтения вы все-таки на это решитесь.

Vue.js — это фреймворк, предназначенный для разработки веб-приложений. Он имеет систему реактивности, которая позволяет разработчику моделировать состояние приложения и управлять им. В результате, когда данные меняются, это автоматически отражается на пользовательском интерфейсе, при этом разработчику не нужно обращаться к DOM. Если вы создаёте приложения, пользуясь чистым JavaScript или jQuery, это значит, что вам приходится явно обращаться к элементам DOM и обновлять их для того, чтобы отразить в интерфейсе изменения состояния приложения, например, вывести на веб-страницу какие-то данные.

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



В конце этого материала, вы найдете ссылки на целый курс по Vue.js.

^{Комментарий модератора. Эта статья находилась в Песочнице и была отклонена на премодерации. Но сегодня был поднят важный и сложный вопрос в статье. А этот пост раскрывает признаки распада личности и может быть полезным тем, кто, как выразился автор упомянутой статьи, в метре от водопада. Поэтому решено её выпустить.}

Здравствуйте, уважаемые читатели!

Пишу вам в состоянии глубочайшего запоя (более 3-х месяцев), из которого выйти не могу. Дозы — в день около 1 — 1,5 л. крепкого алкоголя и одна-две бутылки сухого вина. Лежал в психиатрической клинике около месяца год назад — не перенёс распад семьи, сломался. Делали т.н. «кодировку» инъекцией. После ввода лекарства алкоголь и нюхать нельзя — он не перерабатывается. Отличительная черта, извините — запах мочи. Резкий, как уксус. Отвратительный.

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

Итак, по пунктам:

Встроенный инструмент тестирования Google Lighthouse оценивает доступность (accessibility) сайтов по шкале от 0 до 100. Похвально стремиться к максимальной читаемости контента, но оценка 100 не означает, что сайт идеально доступен. Для доказательства я провёл небольшой эксперимент.

Всегда приятно видеть, как люди хвастаются в твиттере своими оценками Lighthouse: это значит, что они заботятся о качестве.



Lighthouse награждает лучшие сайты зелёным кружочком с цифрой 100, которую вы с гордостью показываете клиентам и друзьям.

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

Всем привет, меня зовут Виталик, я senior фронтенд-разработчик Skyeng. Наша команда делает онлайн-платформу Vimbox для изучения английского языка. Примерно год назад мы с дизайнером доделали небольшой UI kit, искоренивший хаос в интерфейсе и кодовой базе.

Оказалось, что в компании не мы одни хотели UI kit, и к нам стали приходить другие команды за советом «как написать собственный». Нам удалось отговорить их от этой затеи, пообещав темизировать свой – это сэкономило компании сотни часов разработки. Выбирая решение, мы рассмотрели Angular Material, кастомизированные сборки и CSS Variables и в итоге остановились на последних, несмотря на их слабую совместимость с SCSS, основой имевшегося UI kit. Под катом – подробности того, что мы сделали.

Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать.

Но главный вопрос остаётся открытым.

А знаете ли именно вы, куда пользователи вашего (или сделанного вами) сайта тыкают?

Сегодня поговорим о кнопках

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

Самым важным для Frontend разработчика является модуль отображения в браузере, он же Rendering Engine (далее RE).

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

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

Бывают мероприятия, с которыми всё просто: по названию сразу понимаешь, что там будет и хочешь ли туда. Видишь слова «концерт Rammstein» — и всё, никаких вопросов. Но бывают и мероприятия, где происходит столько всего, что в названии это не уместить. Приходится разбираться подробнее.

В эти выходные на питерском IT-фестивале TechTrain как раз будет очень много всего: от Doom-матча с Джоном Ромеро и аукциона Ричарда Столлмана до стенда Хабра и квеста с призами. Так что здесь с первого взгляда и не поймёшь, даже если ходил на прошлогодний TechTrain. Что именно там будет-то? И, главное, хочу ли я туда идти?

Поэтому мы написали, чего ждать, и к каждому пункту добавили ответ на прямой вопрос: «Зачем мне это?».

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

(Серьёзно, поищите «дизайн-мышление». 100500 результатов!)

Для кого эта статья?

• Разработчики. Вы создали собственное приложение, но каждый пользователь мучается с ним. И вы знаете: если они говорят вам это в лицо, то дело действительно плохо.
  
• Графические дизайнеры. Изучать UX по статьям в интернете — это какой-то… очень болезненный способ умереть.
  
• Менеджеры проектов. Вы уже на четверть UX-дизайнер. Было бы неплохо освоить остальные навыки.
  
• И остальные проходимцы. Все, кто корпит над своими проектами по вечерам и выходным. Вам тоже пригодится.