Как стать автором
Обновить
4
0.6

Пользователь

Отправить сообщение

Хостим Bitwarden — open-source менеджер паролей

Время на прочтение5 мин
Количество просмотров79K


Менеджеры паролей действительно полезны и важны как для отдельных пользователей, так и для организаций, и они пригодятся, когда у вас много разных учетных записей и паролей. Обычно люди не любят пользоваться сторонними менеджерами паролей с сервисной архитектурой — неизвестно, что происходит с данными на чужом сервере, и не будет ли он скомпрометирован. Самое безопасное решение это разместить менеджер на своём собственном (как следует защищенном) сервере. Разумеется, к такому self-hosted варианту возникает много требований, и большой список решений с открытым исходным кодом довольно быстро сужается до нескольких известных, проверенных продуктов. Среди них мне больше всего нравится Bitwarden, и сейчас я объясню почему.
Читать дальше →
Всего голосов 35: ↑35 и ↓0+35
Комментарии42

Отрицание, гнев, торг: как дизайну и разработке найти общий язык

Время на прочтение17 мин
Количество просмотров7.4K

Привет, Хабр! Я Женя, ведущий продуктовый дизайнер в Ozon, и за 10+ лет в дизайне повидала всякого: ошибок в макетах (своих и чужих), недостаточно полных спецификаций, неучтённых корнер-кейсов, сотни сообщений в тредах с разработкой и переносы релиза из-за досадных багов. 

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

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

Осторожно, количество мемов в статье зашкаливает  

Читать далее
Всего голосов 101: ↑101 и ↓0+110
Комментарии28

Доступность, она же accessibility: делимся нашим опытом разработки

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров974

Всем привет, мы последние 2 года очень плотно подсели на тему доступности (он же accessibility, он же a11y) в наших проектах, хотелось бы рассказать на какие грабли наступали, какие уроки вынесли, возможно, кто-то избежит граблей

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

Идеально для всех не будет, идеально не ждут, любое улучшение будет круто.

Грабли
Всего голосов 3: ↑2 и ↓1+1
Комментарии2

Неизвестно полезный CSS. Часть 3

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров11K


Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.


Сегодня мы рассмотрим:

  • возможность задать несколько фонов с помощью свойства background;
  • свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка;
  • как заставить псевдоэлемент nth-child выбрать элементы без привязки к позиции;
  • где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →
Всего голосов 38: ↑37 и ↓1+52
Комментарии13

Оптимизация производительности фронтенда. Часть 1. Critical Render Path

Время на прочтение14 мин
Количество просмотров45K

Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.


Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube


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



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


Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:


  1. Зачем думать о производительности
  2. FMP, TTI + подробнее в докладе
  3. Critical render path, DOM, CSSOM, RenderTree
  4. Шаги по улучшению производительности первой загрузки + подробнее в докладе
Читать дальше →
Всего голосов 15: ↑14 и ↓1+17
Комментарии10

Оптимизация производительности фронтенда. Часть 2. Event loop, layout, paint, composite

Время на прочтение11 мин
Количество просмотров53K

Ночь. Стук в дверь. Открыть. Стоят двое. "Верите ли вы в Event loop, нашу главную браузерную цепочку?" Вздохнуть. Закрыть дверь. Лечь досыпать. До начала рабочего дня еще 4 часа. А там уже ивент лупы, лейауты и прочая радость…


В первой части мы говорили о первой загрузке и работе с ресурсами. Сегодня я расскажу о второй части оптимизации производительности фронтенда. О том, что происходит с нашей страницей, когда она загружена, на что уходит процессорное время и что с этим делать. Ключевые слова: event loop, paint \ repaint, layout \ reflow, composite.


Читать дальше →
Всего голосов 19: ↑18 и ↓1+20
Комментарии5

Полное понимание асинхронности в браузере

Время на прочтение24 мин
Количество просмотров107K
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.

Читать дальше →
Всего голосов 78: ↑78 и ↓0+78
Комментарии25

Паттерны ООП в метафорах

Время на прочтение17 мин
Количество просмотров564K
Большинство литературы посвященной паттернам в ООП (объектно-ориентированном программировании), как правило, объясняются на примерах с самим кодом. И это правильный подход, так как паттерны ООП уже по-умолчанию предназначаются для людей, которые знают что такое программирование и суть ООП. Однако порой требуется заинтересовать этой темой людей, которые в этом совершенно ничего не понимают, например «не-программистов» или же просто начинающих «компьютерщиков». Именно с этой целью и был подготовлен данный материал, который призван объяснить человеку любого уровня знаний, что такое паттерн ООП и, возможно, привлечет в ряды программистов новых «адептов», ведь программирование это на самом деле очень интересно.
Статья предназначена исключительно для новичков, так что «старожилы» ничего нового для себя не узнают. В основном статья описывает известные паттерны из книги «Приемы объектно-ориентированного программирования. Шаблоны проектирования.», но более популярным и простым языком.
Читать дальше →
Всего голосов 214: ↑201 и ↓13+188
Комментарии86

Итак, вы думаете, что знаете Git? Часть первая: старый добрый Git

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров15K

Автор оригинала Скотт Чакон — сооснователь GitHub и основатель нового клиента GitButler. Этот клиент ставит во главу угла рабочий процесс и удобство разработки, в том числе код-ревью, и не является просто очередной обёрткой над CLI git.


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



Давайте покопаемся!
Всего голосов 22: ↑21 и ↓1+23
Комментарии6

Руководство по проектированию интерфейсов с Drag and Drop

Уровень сложностиСредний
Время на прочтение22 мин
Количество просмотров12K

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

Устроиться поудобнее и читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии12

Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета

Время на прочтение10 мин
Количество просмотров24K
В этой статье я расскажу о конкурентном режиме в React. Разберёмся, что это: какие есть особенности, какие новые инструменты появились и как с их помощью оптимизировать работу веб-приложений, чтобы у пользователей всё летало. Конкурентный режим — новая фишка в React. Его задача — адаптировать приложение к разным устройствам и скорости сети. Пока что Concurrent Mode — эксперимент, который может быть изменён разработчиками библиотеки, а значит, новых инструментов нет в стейбле. Я вас предупредил, а теперь — поехали.

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



Конкурентный режим решает перечисленные проблемы. С ним React может приостанавливать, приоритизировать и даже отменять операции, которые раньше были блокирующими, поэтому в конкурентном режиме можно начинать отрисовывать компоненты независимо от того, были ли получены все данные или только часть.
Читать дальше →
Всего голосов 20: ↑19 и ↓1+25
Комментарии3

Как работает JS: обзор движка, механизмов времени выполнения, стека вызовов

Время на прочтение6 мин
Количество просмотров208K
Популярность JavaScript растёт, его возможности используют на разных уровнях применяемых разработчиками стеков технологий и на множестве платформ. На JS делают фронтенд и бэкенд, пишут гибридные и встраиваемые приложения, а также многое другое.

Анализ статистики GitHub показывает, что по показателям активных репозиториев и push-запросов, JavaScript находится на первом месте, да и в других категориях он показывает довольно высокие позиции.


Статистические сведения по JavaScript с GitHub

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

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

Как ни странно, существует множество разработчиков, которые регулярно пишут на JavaScript, но не знают, что происходит в его недрах. Пришло время это исправить: этот материал посвящён обзору JS-движка на примере V8, механизмов времени выполнения, и стека вызовов.
Читать дальше →
Всего голосов 41: ↑33 и ↓8+25
Комментарии29

File upload на React.js шаг за шагом

Уровень сложностиСредний
Время на прочтение18 мин
Количество просмотров18K

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

Индикатор загрузки

Прерывание отправки

Drag and drop

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

Читать далее
Всего голосов 11: ↑10 и ↓1+11
Комментарии5

Проектирование REST API: спорные вопросы с проектов и собеседований на системного аналитика (и не только)

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров46K

Проектирование REST API - это процесс создания дизайна методов обмена данными. Дизайн - это субъективное. У одних "так", у других "сяк". А кто прав? Иногда все, а иногда нет.

Можно ли сделать в проекте все методы POST? Как правильно именовать эндпоинты - ед. число или мн. число (/user или /users)? Можно ли использовать метод POST для получения данных? ...

Холиварные вопросы! Вкусовщина! Давайте разбираться!

Читать далее
Всего голосов 25: ↑21 и ↓4+20
Комментарии302

Webpack. Создание WebP вместе с Jpeg и Png

Время на прочтение2 мин
Количество просмотров7.3K

Как вы знаете, формат изображений WebP в большинстве случаев имеет меньший вес, по сравнению со своими братьями: png и jpeg. Поэтому использовать его в своих приложениях - это хорошая практика.

Читать далее
Всего голосов 6: ↑4 и ↓2+5
Комментарии15

Упрощаем себе работу: плагины VS Code, актуальные в 2023 году

Время на прочтение3 мин
Количество просмотров34K

VS Code сам по себе не обладает большим количеством функций и возможностей. Но это можно легко исправить при помощи плагинов, которые доступны в магазине расширений VS Code. Под катом — несколько плагинов, которые могут пригодиться разработчикам. Здесь есть многое — от управления проектами до «нескучных обоев», т. е. изменений в дизайне. Что же, поехали!

Читать далее
Всего голосов 34: ↑23 и ↓11+23
Комментарии24

Оптимизация мобильной веб навигации (2 последних успеха)

Время на прочтение4 мин
Количество просмотров11K
Меню-гамбургер является синонимом мобильного веб-дизайна. Почему? Оно может сделать вас в равной мере и объектом насмешек, и знаменитостью. При всем своем удобстве, тенденция к отказу от него набирает обороты.

По иронии, Facebook – именно ему приписывается «гамбургерная революция» 2008 года – поднял мятеж против него после того, как тесты показали, что навигация поощряет более глубокую вовлеченность.

А Spotify — приложение, основанное скорее на процессе поиска, а не его точности, согласно сообщениям увеличило на 30% заинтересованность в меню, когда начало использовать систему вкладок. Так-то.

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


Читать дальше →
Всего голосов 30: ↑29 и ↓1+28
Комментарии14

GUI Psychology. Наше восприятие информации и изображений

Время на прочтение5 мин
Количество просмотров3.8K
Целевая аудитория: тестировщики, дизайнеры, аналитики, frontend dev, #простодляразвития

О себе:
Всем привет. Меня зовут Лена, я работаю QA чуть более 3х лет, в тестировании сталкивалась с разными проектами, от банковского ПО и мобильных приложений до коммерческих и корпоративных сайтов.

На моем текущем прошлом проекте требования для GUI находились на втором месте, после полезности внедряемых для пользователя фич, соответственно, фиксились порою даже тривиальные дефекты #перфекционизмонтакой. Конечно же, рационально оценивая проект, не могу сказать что он был написан по всем канонам usability, да и мало кто может этим похвастаться, так как зачастую, тут все упирается в финансовую сторону вопроса на редизайн и перепил функционала… Но! Позитивные отзывы пользователей свидетельствовали что все таки мы на верном пути.

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

Если сделать обобщенную классификацию веб сайтов, получим следующее:

image
Читать дальше →
Всего голосов 12: ↑7 и ↓5+2
Комментарии8

Семь простых правил, чтобы сделать Интернет доступным для всех

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



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

Если же речь идет о том, чтобы исправить погрешности на уже имеющемся сайте, то здесь придется приложить некоторые усилия. Когда я работал в компании Carbon Health, мы как-то раз проверили сайт на доступность при помощи особого расширения в Chrome. Уже на главной странице обнаружилось 28 нарушений, которые необходимо было устранить. На первый взгляд показалось, что это будет очень трудоемкий процесс, но вскоре выяснилось, что внести правки будет не так уж и сложно — нужно только вложить время и разобраться в основах. Нам удалось свести количество нарушений к нулю всего за пару дней.

Я хочу поделиться некоторыми простыми шагами, которые мы предприняли и которые возможно, помогут и вам. Эти принципы рассчитаны, в первую очередь, на мобильные и веб-приложения. Но прежде чем начать, давайте выясним, зачем это нужно.
Читать дальше →
Всего голосов 17: ↑16 и ↓1+15
Комментарии2

10 советов по дизайну интерфейса

Время на прочтение6 мин
Количество просмотров23K
Привет, Хабр! Представляю вашему вниманию перевод статьи "10 Tips to Designing Perfect Forms".


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

Поскольку формы выполняют важные функции для интерфейса пользователя, существуют правила по их оформлению.
Читать дальше →
Всего голосов 28: ↑23 и ↓5+18
Комментарии52
1

Информация

В рейтинге
1 797-й
Зарегистрирован
Активность

Специализация

Frontend Developer, HTML Coding