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

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

Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

Видео от автора на ту же тему.

Хочу поделиться своим видением сборки для быстрого старта разработки на React.

Помогает быстро запуститься, когда нужно «на скорую» войти в разработку.

Что‑то я подглядел здесь же, на Хабре, к чему‑то пришёл сам, ну и «ангажировал» немного на просторах «необъятного».

Что «под капотом»

Webpack 5
React v.18
Redux (Redux Toolkit)
Typescript
Css modules
Jest
VS Code

"Реактивность" — это то, как системы реагируют на обновление данных. Существуют разные типы реактивности, но в рамках этой статьи, реактивность — это когда мы что-то делаем в ответ на изменение данных.

Паттерны реактивности являются ключевыми для веб-разработки

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

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

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

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

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

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

Эту статью Ника Коленды я перевёл ещё в конце 2016 года. И не просто перевёл, а ещё и сопроводил комментариями от лица бренда, под которым проектирую интерфейсы все эти годы.

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

Свои старые комментарии я немного освежил и оформил в виде цитат.

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

Всем привет! Меня зовут Кира Калимулина, я руководитель группы UX-редактуры в Ozon. Я занимаюсь всеми интерфейсными текстами в приложении и на сайте. 

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

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

Я не считаю, что DHTML — cool, просто картинка хорошая)

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи.

Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс предназначен для определения и манипулирования геометрией элементов DOM.

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

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

Что такое Craco?

Craco (Create React App Configuration Override) - это инструмент, который позволяет нам переопределить конфигурацию Create React App без необходимости эжектировать проект. Он предоставляет гибкую возможность настройки Webpack и Babel, что позволяет нам вносить изменения в сборку и разработку нашего приложения без необходимости вносить изменения в саму структуру проекта.

Контроль над содержимым web должен принадлежать в т.ч. рядовому пользователю, а не только маркетологам. Юзер сам в состоянии определять, что для него является пагубной рекламой, а что полезным контентом. Если пользователь считает, что новости или дзен Яндекса - это своего рода реклама, то он может ограничить себя от „вредоносного для него контента“ совершенно законно в „касание“ и без красноглазия. Решение — под катом.

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

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

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

ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ES2018, ES2019, ECMAScript 2015, ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, ECMAScript 2019 — как разобраться во всем этом?

Подробно поговорим про историю создания и развития стандарта JavaScript

Существует множество библиотек для настройки алиасов в Node.js, таких как alias-hq и tsconfig-paths. Однако однажды, изучая документацию Node.js, я обнаружил возможность настройки алиасов без использования сторонних библиотек. Более того, данный подход позволяет использовать алиасы без сборки кода. Знакомо ли вам поле imports в package.json? В этой статье мы рассмотрим, что такое Node.js Subpath Imports, узнаем о тонкостях настройки и разберемся с поддержкой в актуальных инструментах разработки.

Стратегическое мышление — один из важнейших жизненных навыков. К сожалению, многие из нас узнают о его недостатке слишком поздно – например, когда босс говорит: «Вы отлично справляетесь с рабочими задачами, однако вам стоит начать мыслить стратегически».

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

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