Несколько недель назад я обнаружил пост "Окисляем Source Maps с Rust и WebAssembly"
распространяющийся по Твиттеру и расказывающий о выигрыше в производительности от замены обычного JavaScript в библиотеке source-map на Rust, скомпилированный в WebAssembly.

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

Так что я скачал библиотеку с GitHub и отправился в небольшое исследование производительности, которое я документирую здесь практически дословно.

Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея, означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.

Наша компания занимается преимущественно разработкой интернет-магазинов и мы хотим поделиться своим опытом разработки проекта на связке VueJS + Nuxt + Laravel.

(С)

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

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

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

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

В тексте будут встречаться небольшие примеры кода, иллюстрирующие рассказ. Расширенную же демо-версию можно посмотреть на GitHub.

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

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

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

Например:

Перевод статьи 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.

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

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



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

Так, галочка «по умолчанию согласен» позволила увеличить количество согласных на донорство до 86% в Швеции, тогда как в Дании, где при получении прав нужно самостоятельно ставить согласие, т. е. принимать осознанный выбор, количество согласных на донорство 4%.

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

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

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

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

Для упрощения при создании сцены мы будем использовать тайлы.

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

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

UI vs. UX

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

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

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

Сейчас вы увидите нечто экслюзивное. Девушка справа на видео — разработчица одного из блоков внутри 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.



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

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

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

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

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

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

• тонкий клиент
• толстый клиент

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

Unity 5

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

Construct 2

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

libGDX

Кросплатформенный фрейморк, написанный на Java и работающий с OpenGL (ES).

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.

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

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

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

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

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



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

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

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