«Алиса, пойдём во фронтенд!»

Автор: admin от 1-10-2019, 14:40, посмотрело: 84

Голосовые помощники — не далёкое будущее, а реальная действительность. Alexa, Siri, Google Now, Алиса встроены в «умные» колонки, часы и телефоны. Они постепенно меняют наш способ взаимодействия с приложениями и устройствами. Через ассистента можно узнать прогноз погоды, купить билеты на самолет, заказать такси, послушать музыку и включить чайник на кухне, лежа на диване в другой комнате.



«Алиса, пойдём во фронтенд!»


Siri или Alexa говорят с пользователями в основном по-английски, поэтому в России они не так популярны, как Алиса от Яндекса. Для разработчиков Алиса тоже удобнее: её создатели ведут блог, выкладывают удобные инструменты на GitHub и помогают встраивать ассистента в новые устройства.



Никита Дубко (@dark_mefody в Твиттере) — разработчик интерфейсов в Яндекс, организатор митапов MinskCSS и MinskJS и редактор новостей в Web-стандартах. Никита не работает в Яндекс.Диалогах и никак не связан с Яндекс.Алисой. Но ему было интересно разобраться, как Алиса работает, поэтому он попробовал применить её навыки для Web и подготовил об этом доклад на FrontendConf РИТ++. В расшифровке доклада Никиты рассмотрим, что полезного могут принести голосовые помощники и построим навык прямо в процессе чтения этого материала.

Категория: Яндекс

 

Анализ производительности WebGL приложений

Автор: admin от 1-10-2019, 10:25, посмотрело: 162

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

Анализ производительности WebGL приложений

Категория: Веб-разработка

 

Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Автор: admin от 24-09-2019, 16:05, посмотрело: 32

Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.



Drag-&-Drop компоненты для слепых пользователей? Вы шутите?


Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?



Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.

Категория: Android

 

Быстрое введение в Svelte с точки зрения разработчика на Angular

Автор: admin от 12-09-2019, 06:55, посмотрело: 33

Svelte — сравнительно новый UI фреймворк, разработанный Ричем Харрисом, который также является автором сборщика Rollup. Скорее всего Svelte покажется совершенно не похожим на то, с чем вы имели дело до этого, но, пожалуй, это даже хорошо. Две самые впечатляющие особенности этого фреймворка — скорость и простота. В этой статье мы сосредоточимся на второй.



Быстрое введение в Svelte с точки зрения разработчика на Angular

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

Категория: Информационная безопасность

 

Ssh-chat

Автор: admin от 8-09-2019, 20:10, посмотрело: 38

Привет, Хабр. Console chat отличная вещь, но для фронтендеров, а что если вы хотите такой же, но для бэкэнда. Если да, то эта статья для вас. Но какой инструмент часто используют в бэкенде? Правильно ssh, так что представляю sshchat

Категория: Программирование

 

Typescript и react

Автор: admin от 6-08-2019, 00:15, посмотрело: 64

Разработка на javascript иногда становится похожа на работу детектива. Как понять чужой код? Хорошо, если разработчик обладает тонким искусством называть переменные так, чтобы другие поняли суть. А как быть, если члены команды все таки не всегда способны понять замысел своего коллеги? Как понять, что приходит в аргумент какой-либо функции?



Предположим, что аргумент функции называется errors. Вероятно в errors находится массив. Скорее всего строк? Ну то, что массив это понятно. Ведь далее проверятся его длинна. Но свойство length есть и у строки. Похоже, чтобы точно разобраться, необходимо поставить breakpoint и запустить скрипт. Затем полностью пройти по сценарию на UI (например нам нужен финальный шаг формы). Теперь в devtools видно, что errors — это объект с набором определенных полей, среди которых и поле length.



Подобная неоднозначность при разборе javascript кода приводит к пустой трате времени разработчика. Неплохим решением в данном случае может стать typescript (далее ts). Можно использовать его в следующем проекте, а еще лучше сделать поддержку ts в существующем. После этого время на понимание чужого кода сократится значительно. Ведь, чтобы понять структуру любых данных достаточно одного клика. Можно сконцентрироваться на логике работы с данными и в любой момент времени знать, что вы однозначно понимаете работу кода.

Категория: Google

 

Пишем API для React компонентов, часть 6: создаем связь между компонентами

Автор: admin от 15-07-2019, 05:35, посмотрело: 51

Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы



Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия



Пишем API для React компонентов, часть 3: порядок пропсов важен



Пишем API для React компонентов, часть 4: опасайтесь Апропакалипсиса!



Пишем API для React компонентов, часть 5: просто используйте композицию



Пишем API для React компонентов, часть 6: создаем связь между компонентами

Поговорим о формах.



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



Пишем API для React компонентов, часть 6: создаем связь между компонентами



Здесь много чего происходит, взглянем на API

Категория: Веб-разработка

 

Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы

Автор: admin от 10-07-2019, 12:05, посмотрело: 58

Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы



Пишем API для React компонентов, часть 2: давайте названия поведению, а не способам взаимодействия



Пишем API для React компонентов, часть 3: порядок пропсов важен

Этот пост — перевод первой статьи из серии статей Writing good component API, за авторством @Sid. При переводе, в любой непонятной ситуации, я буду руководствоваться официальным переводом документации React JS на русский язык



Когда речь идет о React компонентах, ваши пропсы — это ваш API.



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



Эта серия статей вдохновлена статьями и лекциями от Sebastian Markbage, Brent Jackson, Jenn Creighton и A. Jesse Jiryu Davis.

После прочтения множества статей + лекций, и после более года проектирования дизайн системы cosmos, я пришел к этим принципам разработки.



Начнем с простого.



У нас есть кнопка:



Пишем API для React компонентов, часть 1: не создавайте конфликтующие пропсы



<Button>Click me</Button>

Категория: Веб-разработка

 

Коллаборация и автоматизация во фронтенде. Чему мы научились за 13 школ

Автор: admin от 17-06-2019, 14:10, посмотрело: 60

Всем привет. Коллеги недавно писали в этом блоге, что открылась регистрация в следующую Школу разработки интерфейсов в Москве. Я очень рад новому набору, ведь я был одним из тех, кто придумал Школу в 2012 году, и с тех пор постоянно ей занимаюсь. Она эволюционировала. Из неё вышло целое мини-поколение разработчиков с широчайшим кругозором и способностью взять на себя в проектах вообще всё, что связано с фронтендом. Кто-то из выпускников работает в Яндексе, кто-то нет.



Коллаборация и автоматизация во фронтенде. Чему мы научились за 13 школ


ШРИ — как сервис: тоже требует разных форматов взаимодействия, автоматизации и экспериментов. Вот об этом и поговорим сегодня на Хабре. Будут и полезные ссылки для кандидатов.

Категория: Веб-разработка, Game Development

 

Дженерики в TypeScript: разбираемся вместе

Автор: admin от 11-06-2019, 06:40, посмотрело: 61

Всем привет! Команда TestMace публикует очередной перевод статьи из мира web-разработки. На этот раз для новичков! Приятного чтения.



Развеем пелену таинственности и недопонимания над синтаксисом и наконец подружимся с ним



Дженерики в TypeScript: разбираемся вместе

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



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

Категория: Google

 
Назад Вперед