Pull to refresh
8
0
Кадыр Фузайлов @kfuzaylov

Front-end Architect

Send message

UX для начинающих: практическое руководство. Часть 1

Reading time13 min
Views90K


В первой части перевода речь пойдет о том, что такое UX, чем юзабилити отличается от визуального/графического дизайна, и что нужно сделать, начиная работать над интерфейсом продукта – будь то почтовая рассылка, веб-приложение или оффлайн-услуга. Это – хороший материал для тех, кто приступает к освоению данной области, и хочет разобраться, «как тут все устроено».
Читать дальше →
Total votes 19: ↑16 and ↓3+13
Comments3

Производительность web: Why Performance Matters

Reading time12 min
Views22K
Как сделать сайт, который понравится пользователю? Какой он должен быть: красивый, с удобной навигацией, с запоминающимся URL? Прежде всего, сайт не должен тормозить — у пользователя должно складываться впечатление, что всё летает. Это первично. Всё остальное решается по мере разработки. О том, как воспринимают сайт пользователи, от чего это зависит и когда производительность решает, мы поговорили с Денисом Мишуновым, frontend-разработчиком (в прошлом контрибьютор в CMS Plone в составе Plone UI Team), автором статей про производительность в Smashing Magazine и активным спикером на профессиональных конференциях (среди которых From The Front, JSConf EU, JSConf Budapest, Smashing Conference, а теперь и HolyJS)



— Расскажи о себе. Какой был путь к web-разработке, почему именно она? Чем ты сейчас занимаешься?

— До того, что сейчас называют веб-разработкой, я дошёл быстро, уверенно и предсказуемо: первый компьютер, первый, никому не нужный, сайт, осознание бренности бытия. Дальше было чтение первых страниц «Программирование на Perl» Ларри Уилла и Тома Кристиансен с депрессивным верблюдом на обложке, повторное осознание бренности бытия и, как следствие, откладывание верблюдокниги. А потом я открыл для себя «Designing with Web Standards» Джеффри Зельдмана. Потом было, конечно же, «Ководство» Лебедева и много всего остального. Но книга Зельдмана была переломной. Хотелось бы сказать что-то красивое типа: «мир веба захватил меня после прочтения», но на самом деле я просто понял, что по сравнению с «конструктор электронных аппаратов» (которых из нас тщетно пытались сделать в институте), интернет-разработчик, а именно так это называлось в начале нулевых, звучит откровенно круче.
Читать дальше →
Total votes 26: ↑19 and ↓7+12
Comments21

Волшебный интерфейс

Reading time11 min
Views33K
Powered Interface

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

Так как мы буквально на прошлой неделе завершили большой Web-проект, в котором как раз стояла цель разработки удобного интерфейса, я решил осветить в статье, на какие основные моменты при проектировании интерфейса стоит обратить внимание, и привёл примеры нашего решения.
Читать дальше →
Total votes 35: ↑33 and ↓2+31
Comments27

Почему я пишу свои алгоритмы в 95% случаев, и буду и дальше разрабатывать кодовые велосипеды

Reading time3 min
Views42K
Это ответ на публикацию «А нужно ли знать программисту алгоритмы?».

Так почему я пишу свои алгоритмы в 95% случаев и буду их и дальше писать?

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

Я разработчик экспериментальной системы управления крылатым беспилотником.
Читать дальше →
Total votes 97: ↑73 and ↓24+49
Comments77

Три основных браузера добавили поддержку низкоуровневого бинарного формата WebAssembly

Reading time2 min
Views37K
Google, Microsoft и Mozilla на этой неделе синхронно выпустили экспериментальные билды браузеров с поддержкой WebAssembly (wasm) — эффективного низкоуровневого языка программирования, выполняющегося в браузере с производительностью гораздо выше, чем у самых современных и скоростных компиляторов JavaScript.

Разработчик из Mozilla Люк Вагнер рассказал на Mozilla Hacks о преимуществах WebAssembly, а также сообщил о портировании на WebAssembly научно-фантастического шутера Angry Bots. Демка запускается в браузерах с поддержкой WebAssembly — это последние версии Chrome Canary, Firefox Nightly и Microsoft Edge. Скоро к ним присоединится Safari на WebKit.
Читать дальше →
Total votes 43: ↑39 and ↓4+35
Comments31

Web-приложения в режиме offline. ServiceWorker и CacheStorage

Reading time6 min
Views40K

О чём речь?


Всё чаще возникает задача научить frontend-приложение работать в автономном режиме. Это значит придать web-приложению свойство mobile- или desktop-программы — функционировать в отсутствии связи с Интернет, а также в случае отказа сервера.

Цель — оградить пользователя от проблем соединения на его устройстве. Как было бы обидно не сохранить созданные в google docs таблицы из-за потери wi-fi в ближайшем фастфуде!

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

Решение задачи заключается в следующем:
Читать дальше →
Total votes 26: ↑25 and ↓1+24
Comments2

Коллекция практических советов и заметок по вёрстке

Reading time32 min
Views177K

CSS Refresher


Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика


Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание


  1. Позиционирование (position)
  2. Отображение элемента в документе (display)
  3. Плавающие элементы (float)
  4. CSS селекторы
  5. Эффективные селекторы
  6. Переотрисовка и перерасчет
  7. CSS3 свойства
  8. CSS3 медиа-запросы
  9. Адаптивный web-дизайн
  10. CSS3 переходы
  11. CSS3 анимации
  12. Масштабируемая векторная графика (SVG)
  13. CSS спрайты
  14. Вертикальное выравнивание
  15. Известные проблемы

Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments33

БЭМ-методология: с чего всё начиналось и зачем это всё нужно

Reading time13 min
Views231K
На Хабре уже много писали о методологии БЭМ, выросшей в Яндексе. И мы решили, что пора системно рассказать о том, откуда она появилась и что сделало БЭМ таким, каким мы его знаем. Думаем, это будет интересно не только тем, кто уже использует БЭМ, но и тем, кто считает, что эта методология не подходит для их проектов. Возможно, они увидят, что мы решали проблемы, похожие на их собственные, и найдут что-то полезное для себя.

image

Конечно, все началось с собственных потребностей Яндекса. Вместе с тем, как он рос, росло и количество сотрудников, которые занимаются фронтендом. Постепенно команда увеличилась настолько, что стало очевидно — без единых стандартов работать будет сложно. К тому же, мы находимся в офисах Яндекса в разных городах. Возникла идея создать общую методологию, которая поможет организовать процессы в большой команде, работающей над разными проектами. А главное то, что мы хотели не только упорядочить и ускорить разработку, но и снизить порог входа в проект для нового разработчика.
Читать дальше →
Total votes 73: ↑58 and ↓15+43
Comments100

Несколько дельных советов по CSS

Reading time4 min
Views55K

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

От переводчика

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



Cодержание


  1. Используем псевдо-класс :not для задания рамки навигации
  2. Добавляем межстрочный интервал элементу body
  3. Центрируем по вертикали все что угодно
  4. Правильно разделяем запятыми элементы списков
  5. Отрицательный порядковый номер в nth-child
  6. Используем SVG-логотипы
  7. Аксиоматический CSS
  8. Максимальная высота у CSS-слайдера
  9. Наследуем box-sizing
  10. Одинаковая ширина ячейки таблицы
  11. Динамические внешние отступы при помощи flexbox
  12. Используем селектор атрибутов пустых ссылок
  13. Стили по умолчанию для обычных ссылок
Читать дальше →
Total votes 26: ↑21 and ↓5+16
Comments28

Чеклист: Как загружать страницы быстрее

Reading time2 min
Views30K
Мы постоянно работаем над тем, чтобы IaaS был простым и понятным даже для тех, кто не сталкивался с ИТ-сферой. Для этого мы проводим оптимизацию всех систем и рассказываем о своем опыте в нашем блоге на Хабре.

Пара примеров:


Сегодня мы поговорим о том, как ускорить загрузку страниц, и взглянем на советы эксперта по Ruby Нейта Беркопеца (Nate Berkopec).

Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments22

Information

Rating
Does not participate
Location
Калининград (Кенигсберг), Калининградская обл., Россия
Date of birth
Registered
Activity