Как стать автором
Обновить
2
Карма
0
Рейтинг
Бобров Максим Юрьевич @demimurych

Тех SEO аудит. LightHouse WebVitals PageSpeed

  • Подписчики 19
  • Подписки 1
  • Публикации
  • Комментарии

Интерактивный дизайн не обязательно должен быть сложным

Веб-дизайн *Интерфейсы *Дизайн мобильных приложений *Компьютерная анимация *Дизайн
Перевод


Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
Читать дальше →
Всего голосов 10: ↑8 и ↓2 +6
Просмотры 10K
Комментарии 12

Опыт разработки SPA на VueJS + Nuxt

Разработка веб-сайтов *Разработка под e-commerce *Laravel *VueJS *
Наша компания занимается преимущественно разработкой интернет-магазинов и мы хотим поделиться своим опытом разработки проекта на связке VueJS + Nuxt + Laravel.
Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 34K
Комментарии 27

Генерация страниц сайта средствами сервис-воркеров

Блог компании VK Разработка веб-сайтов *JavaScript *HTML *
Tutorial

(С)

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

  • кэширование страниц сайта для офлайн доступа;
  • ведение учета страниц, доступных офлайн, проброс необходимых данных;
  • мониторинг статуса сети, онлайн или офлайн;
  • общение сервис-воркера со страницами и вкладками, которые он обслуживает;
  • перехват сервис-воркером запроса на открытие адреса /offline/ и генерирование новой страницы прямо на устройстве, без запроса к серверу.

Если тема сервис-воркеров и Progressive Web Apps (PWA) для вас новая, то перед чтением этой статьи необходимо познакомиться с ними поближе.

Меня зовут Рыбин Павел, я работаю во фронтенд-разработке Медиапроектов Mail.Ru Group. Это руководство мне помогали писать грабли, набитые шишки и подводные камни, попавшиеся мне при реализации PWA для мобильной версии Авто Mail.Ru.

В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.
Читать дальше →
Всего голосов 39: ↑39 и ↓0 +39
Просмотры 17K
Комментарии 12

4 совета по работе с Vue.js

Разработка веб-сайтов *JavaScript *VueJS *
Перевод

Вот несколько советов по работе с Vue.js которые я выработал за последний год.


Используйте стрелочные функции в компонентах


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


Например:

Читать дальше →
Всего голосов 19: ↑15 и ↓4 +11
Просмотры 46K
Комментарии 8

Node.js + face-recognition.js: простое и надёжное распознавание лиц с помощью глубокого обучения

Блог компании NIX JavaScript *Node.JS *Машинное обучение *
Перевод


Перевод статьи Node.js + face-recognition.js: Simple and Robust Face Recognition using Deep Learning.

В этой статье мы расскажем, как реализовать надёжную систему распознавания лиц с использованием face-recognition.js. Мы искали подходящую Node.js-библиотеку, которая умела бы аккуратно распознавать лица, но ничего не нашли. Пришлось писать самостоятельно!

В этом npm-пакете используется библиотека dlib, предоставляющая Node.js-биндинги для очень хорошо зарекомендовавших себя инструментов распознавания внутри этой библиотеки. Dlib использует методы глубокого обучения и поставляется с уже обученными моделями, которые продемонстрировали точность распознавания на уровне 99,38% при прогоне бенчмарка LFW.
Всего голосов 24: ↑24 и ↓0 +24
Просмотры 21K
Комментарии 5

15 когнитивных искажений

Научно-популярное Мозг
Люди сталкиваются с большим объёмом информации, часть из которой достоверна, а часть освещает интересующую область односторонне, а иногда и сознательно искажённо.

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



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

Так, галочка «по умолчанию согласен» позволила увеличить количество согласных на донорство до 86% в Швеции, тогда как в Дании, где при получении прав нужно самостоятельно ставить согласие, т. е. принимать осознанный выбор, количество согласных на донорство 4%.
Читать дальше →
Всего голосов 63: ↑62 и ↓1 +61
Просмотры 134K
Комментарии 100

SVG маски и вау-эффекты: о магии простыми словами

Разработка веб-сайтов *JavaScript *


О существовании SVG знают все, кто занимается фронтендом. Этой технологии уже не один год, про нее уже не раз писали на хабре. Но есть один момент. Частенько на разных ресурсах, в том числе и на тостере, начинающие задают вопросы о создании определенного семейства анимаций на сайте и получают довольно странные ответы от “бывалых” разработчиков. Возникает ощущение, что в такие моменты все думают в контексте HTML+CSS+JS и просто забывают о существовании SVG, предлагая все рисовать на canvas и попутно давая обещания дать тому, кто это придумал, клавиатурой по голове. Но этот путь (рисование на canvas) зачастую слишком сложен относительно решаемой задачи. В предыдущей статье мы обсуждали идеи создания частичных вау-эффектов, а в этой поговорим о масках и посмотрим пару анимаций, которые с их помощью можно сделать.
Всего голосов 61: ↑61 и ↓0 +61
Просмотры 45K
Комментарии 11

Как создаются изометрические миры

Разработка игр *
Перевод
Tutorial
image

Все мы играли в потрясающие изометрические игры, будь то первые Diablo, Age of Empires или Commandos. При первой встрече с изометрической игрой можно задаться вопросом: двухмерная она, трёхмерная или нечто совершенно другое. Сам мир изометрических игр обладает волшебной притягательностью для разработчиков. Давайте попробуем раскрыть тайну изометрической проекции и создадим простой изометрический уровень.

Для этого я решил использовать Phaser с кодом на JS. В результате у нас получится интерактивное приложение HTML5.

Учтите, что это не туториал по разработке на Phaser, мы просто используем его для удобного ознакомления с базовыми концепциями создания изометрической сцены. Кроме того, в Phaser есть простые способы создания изометрического контента, например, Phaser Isometric Plugin.

Для упрощения при создании сцены мы будем использовать тайлы.
Всего голосов 49: ↑49 и ↓0 +49
Просмотры 48K
Комментарии 7

Favicon сегодня: форматы, поддержка, автоматизация

Разработка веб-сайтов *HTML *
Recovery mode
Из песочницы
На сегодняшний день favicon — это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.



Читать дальше →
Всего голосов 53: ↑50 и ↓3 +47
Просмотры 118K
Комментарии 24

Крэш-курс по UI-дизайну

Блог компании Я люблю ИП Веб-дизайн *Типографика *Интерфейсы *
Перевод


Мы всегда в поисках хороших статей о дизайне, чтобы потом использовать их в работе над сайтом «Я люблю ИП». Сегодня мы перевели ещё одну статью, которая рассказывает, чем отличается UI-дизайн от UX-дизайна и на каких основных принципах строится дизайн интерфейсов.


UI vs. UX


Если вы хоть немного интересовались дизайном приложений, то наверняка слышали термины «UI» и «UX». Но чем же они отличаются?


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


Согласно книги Дж. Гарретта «Элементы опыта взаимодействия», UX-дизайн можно определить через пять основных уровней. Давайте начнём с самого абстрактного.


Читать дальше →
Всего голосов 22: ↑21 и ↓1 +20
Просмотры 40K
Комментарии 10

На видео — разработчица одного из блоков внутри российского микропроцессора Байкал-Т

Высокая производительность *Анализ и проектирование систем *Промышленное программирование *Разработка под Linux *FPGA *
Сейчас вы увидите нечто экслюзивное. Девушка справа на видео — разработчица одного из блоков внутри load-store unit микропроцессорного ядра MIPS P5600, которое является частью системы на кристалле российского микропроцессора Байкал-Т, который используется в офисном принтере «Катюша», терминале «Таволга», системы контроля станков с ЧПУ «Ресурс-30», промышленном контроллере для газовой отрасли «Акситех» КАМ 300 и других устройствах.

А два мужика на видео приезжают в Москву, Санкт-Петербург и Киев для серии семинаров, описывающий все этапы проектирования и производства микросхем: создание спецификации, описание цифровой логики на языках описания аппаратуры Verilog и VHDL на уровне регистровых передач, логический синтез, размещение и трассировка, создание фотошаблонов и производство микросхем на фабрике. Cреди организаторов: РОСНАНО, еНАНО, Imagination Technologies (компания известная как разработчик GPU внутри Apple iPhone), МИСиС, МГУ, МФТИ, МИЭТ, ИТМО, Казахский НТУ, Киевский КПИ и Киевский КНУ. Участники семинара познакомятся с реальными кейсами российских компаний, использующих инструменты САПР: ООО «ЛАБСИСТЕМС», АО «НИИМА «Прогресс», ОАО НПЦ «ЭЛВИС» и АО «БАЙКАЛ ЭЛЕКТРОНИКС». Подробности — http://edunano.ru/doc/6335690702352234538 и https://habrahabr.ru/post/311562.



Под катом — картинки, показывающие какой именно блок проектирует девушка по имени Смрити Оджа, а также (впервые!) часть слайдов Чарльза Данчека (это лектор слева), переведенные на русский язык доцентом Киевского Национального Университета имени Шевченко Александром Барабановым:
Всего голосов 23: ↑17 и ↓6 +11
Просмотры 13K
Комментарии 27

4 вида утечек памяти в JavaScript и как с ними бороться

Разработка веб-сайтов *JavaScript *
Перевод

В этой статье мы рассмотрим распространённые виды утечек памяти в клиентском JavaScript. Также мы узнаем, как их обнаружить с помощью Chrome Development Tools.


timeline в Chrome Dev Tools

Читать дальше →
Всего голосов 98: ↑98 и ↓0 +98
Просмотры 107K
Комментарии 16

LTSP: Терминальный сервер на Linux

Настройка Linux *Системное администрирование *IT-инфраструктура **nix *


Сейчас я расскажу вам о том, как можно сэкономить немалое количество времени и денег на вашей IT-инфраструктуре.
Как централизованно админить большое количество linux рабочих станций не разводя при этом хаос в вашей экосистеме.
И так, что же такое LTSP?


LTSP — Это терминальное решение на Linux.
Говоря "терминальное", я в первую очередь имею в виду не подключение к удаленному рабочему столу как в Windows. Я подразумеваю гораздо более гибкую и продвинутую систему доставки ПО, конфигов, домашенего каталога, да и самой операционной системы на клиентские рабочие станции с вашего терминального сервера.


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


У LTSP есть несколько режимов работы:


  • тонкий клиент
  • толстый клиент
Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 157K
Комментарии 28

Десятка лучших движков для создания своих собственных игр

Разработка веб-сайтов *Open source *HTML *Разработка под Android *Тестирование игр *
Перевод
Десять лучших, по мнению ресурса BytesWire, игровых движков для создания собственных игр.

Unity 5


image
Лучший выбор для разработчика, позволяет создавать игры как 2D, так и 3D.

Construct 2


image
Система для создания двумерных игр через простой интерфейс на базе HTML5. Программирования не требуется.

libGDX


image
Кросплатформенный фрейморк, написанный на Java и работающий с OpenGL (ES).
Читать дальше →
Всего голосов 38: ↑19 и ↓19 0
Просмотры 184K
Комментарии 27

Native Script. Один код для всех платформ

Разработка веб-сайтов *CSS *JavaScript *Разработка мобильных приложений *
Из песочницы
image

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.
Читать дальше →
Всего голосов 29: ↑27 и ↓2 +25
Просмотры 57K
Комментарии 23

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

Разработка веб-сайтов *CSS *HTML *
Перевод
Вам когда-нибудь хотелось прямо в CSS коде посчитать, в меню 4 элемента или 10? Для четырех задать им ширину по 25%, а если набралось десять — прижать их друг к другу и уменьшить отступы?
Как выяснилось, CSS умеет работать с разным количеством элементов, позволяя избавиться от головных болей и лишнего кода на js.


Читать дальше →
Всего голосов 65: ↑61 и ↓4 +57
Просмотры 82K
Комментарии 24

Создание вращающегося логотипа с помощью ImageMagick и FFMPEG

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

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


Читать дальше
Всего голосов 27: ↑23 и ↓4 +19
Просмотры 18K
Комментарии 22

Не только Яндексу. Микроразметка на крупнейших сайтах рунета: зачем ею пользуются и почему она пригодится и вам

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

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



Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как Holodilnik.ru, Ozon.ru, Lenta.ru, Interfax.ru и Ivi.ru, ответили на вопросы о том, как на практике происходит внедрение микроразметки и каких результатов она позволяет добиться. А мы со своей стороны рассказали, какие типы мы бы порекомендовали таким сайтам и для чего.

Читать дальше →
Всего голосов 53: ↑49 и ↓4 +45
Просмотры 105K
Комментарии 9

Как организовать отправку push-уведомлений на айфон

Блог компании Surfingbird Perl *Разработка под iOS *
В Surfingbird мы используем пуш-уведомления, чтобы сообщать нашим пользователям срочные новости и просто информировать их об интересных материалах за день. Уже в первые недели тестов пуши показали свою огромную эффективность в плане увлечения ретеншена. Этому есть логичное объяснение – телефон у пользователя всегда с собой, в метро, в туалете, на совещаниях и т. д. Когда юзеру приходит пуш, все его внимание концентрируется на этом уведомлении.

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

image
Читать дальше →
Всего голосов 39: ↑28 и ↓11 +17
Просмотры 21K
Комментарии 15

Стив Возняк: вообще-то, в фильме была в основном ложь обо мне

IT-компании
Перевод
Вообще-то, в фильме была в основном ложь обо мне. Я был инженером в HP, разрабатывающим iPhone 5 того времени, их инженерные калькуляторы. Там у меня было много друзей и хорошая репутация. Я создавал вещи для людей по всей стране для развлечения, включая первую систему проката фильмов для отелей и считыватели таймкодов SMPTE для мира коммерческого видео. Ещё домашние пинболл-игры.

Среди этих вещей, Apple I был ПЯТЫМ случаем, когда что-то, что я создал (а не собрал на основе чьей-то схемы), было превращено в деньги Джобсом.
Читать дальше →
Всего голосов 295: ↑277 и ↓18 +259
Просмотры 134K
Комментарии 205

Информация

В рейтинге
5,509-й
Откуда
Харьков, Харьковская обл., Украина
Дата рождения
Зарегистрирован
Активность