November Developers Notes 11/2018 💫

Тренды

В последнее время очень часто стал замечать интерес компаний к голосовым ассистентам. Рынок в этом направлении особенно активно развивается.

Посредственный юзабилити умных помощников: исследование пользователей Alexa, Google Assistant и Siri

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

Дизайн

Описать задачу в виде истории

Почему не стоит читать и писать технические задания в обычном формате для необычных проектов.

Что происходит с картами Apple и кто их заполняет?

Google Maps победили в карточной войне?

Samsung очень много новуличек представили

Новая графическая оболочка OneUI

Сгибающийся экран

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

Microsoft обновили иконки Office 360

Я писал у себя в канале Telegram: “Получилось прикольно, но дальше видимо уже просто цветные квадратики будем использовать.”

Как должен выглядеть и работать идеальный загрузочный экран на мобильных устройствах!

Правило трёх секунд, анимации и все тонкости разработки splash screen. В этой же статье можно найти и best practices.

Как должны выглядеть скриншоты приложения в магазине.

Правило двух слов :) Очень много примеров и аналитики с опорой на время. Примеры как было раньше и как нужно делать сейчас.

5 ошибок в дизайне мобильных Push уведомлений

DON’T и DO на тему Push уведомлений.

The User Experience of Chatbots

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

Everysecond.io

Эволюция брендов известных компаний.

Теперь ближе к инструментам по дизайне, но пока еще не про онлайн..

Falafel + AIC сделали блокнот для проектирования интерфейсов.

На сайте есть бесплатный шаблон. Можно скачать и сделать что-то подобное из подручных средств.

Но сам блокнотик получился очень даже неплохим.

Еще вышел в открытое тестирование новый инструмент Iterate.

Iterate

Рисуете пальцем или новым Apple Pencil кривые квадратики и кружки и из них получаете элегантный и красивый wireframe.

Разработка

Работа с кодом только при помощи IPad. Реально ли?

A deep dive on iPad productivity.

Так.. а взаимодействовать с устройством силой мысли слабо? Очень крутое исследование подкрепленное материалами и кодом.

Experimenting with brain-computer interfaces in JavaScript.

State of JavaScript 2018

Подвели итоги 2018 года по JS.

Ну а если об обычной работе говорить, то..

The Current State of Styling Scrollbars

На css-tricks вышла очень интересная статься про скроллбары. Как их декорировать на сайтах и что с ними можно делать. Полезно прочитать.

Redesigning your product and website for MacOS dark mode

Ночные темы. То что мы так все любим. Кодите ночью что-нибудь в своём тёмном xCode или в каком-нибудь WebStorm.. потом открываете Stackoverflow и слепните от белого цвета. Завезли специальные инструменты для адаптации web страниц под тёмные темы операционных систем.

Как и зачем PayPal вводили GraphQL.

Инструменты для дизайнера

Progression

Сервис для организации совместной работы дизайнеров/разработчиков, позволяющий оценивать их карьерный рост. Весьма интересный проект.

Cleverstack

Инструмент для организации мозгового штурма (Brainstorming). Я сохранил себе в закладки.. скоро представится возможность попробовать его в действии. Возможно напишу статейку о моем опыте.

Squoosh

Самый удобный и простой сервис для сжатия качества изображений (разработано Google)

Palx

Вы выбираете цвет — инструмент даёт вспомогательные цвета для предложенного вами цвета.

Metatags.io

Инструмент, который покажет как ваш сайт выглядит в соц сетях, поисковых системах и поможет исправить этот вид.

Flaticon Pattern maker

Инструмент для простого создания паттернов из иконок flaticon. Получается быстро и красиво.

Emojibuilder

Можете собрать свои собственные Emoji на основе Apple emoji.

UI Faces

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

NES.css

NES-style CSS framework. Вы тоже слышите этот звук?

DrawKit

Библиотека иллюстраций в стилистике Dropbox и Slack по MIT лицензии.

Everyone needs a base to start from.

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

We are DesignBase.

Новые популярные плагины для Sketch

VK Data Sketch Plugin

Плагин, который использует данные из ВКонтакте в качестве data для ваших макетов.

Turn Wireframes to UI

Плагин для быстрого перевода Wireframes в UI.

TimeLapse

Плагин записывает как вы дизайните свои дизайны и потом собирает из этого ускоренное видео.

Инструменты и библиотеки для разработчика

Web DEV

Хотите подтянуть свои знания — вам сюда. Хотите проверить ваш продукт — вам тоже сюда. Крутой сервис для проверки, обучения и реализации фич.

Loopback 4

Удобный и простой фреймворк для разработки API на Node.js с собственным CLI, поддержкой TypeScript, DI, OpenAPI и GraphQL. Четвертая версия вышла в конце октября. Очень быстро набирает популярность.

Conventional Commits

Conventional Commits, соглашение по именованию коммитов, улучшающее читаемость истории и позволяющее автоматически генерировать список изменений и определять следующую версию (при использовании semver)

Graphpack

Не требующий конфигурации минималистичный GraphQL-сервер с живой перезагрузкой, песочницей и всем полагающимся.

Javascript Binary Bundles

For faster loading time due to fewer requests and an optimised binary format, closely compatible with Javascript internals. It is optimised in balance between size and performance, preferring performance when in doubt.

NginxConfig

NGiИX config generator.

Enquirer

Красивые CLI, которые удобно использовать и создавать.

Signale

Очень простой и максимально кастомизируемый логгер NodeJS.

html-sketchapp

Очень много инструментов по экспорту Sketch → HTML. Это решение позволяет обратить эту реакцию. Сам не пробовал, но тема определенно интересная и возможно когда-нибудь будет потребность в таком инструменте.

myth

Pure CSS preprocessed code.
It’s like a CSS polyfill :)

react-stateful-fn — Functional stateful components

Functional components are considered best practice in React, but as soon as we need local component state we cannot use them. Let’s fix that!

Ну и в завершении статьи хочу поздравить всех с наступающим Новым Годом и показать пример гениального UX решения в традициях Coca-Cola.

Следующий дайджест будут уже в начале января 🎄 не скучайте 😉

В подборке инструментов для разработчика мне помогал @itsheavy. Надеюсь ты и дальше будешь скидывать мне интересные штуки 😉

Про оптимизацию сделаем потом отдельную подборку.

Если у кого-то есть какие-либо интересные материалы, которые можно зафиксировать в подборке — шлите их мне в Telegram @devstorm.