Предыдущие видео предполагали, что зритель владеет какими-то основами технологий. Знает, что такое функция, массив, как писать стили и т. п. Теперь такие ролики будут выходить в рубрике #howto по средам. Завтра расскажу как брать данные с сайтов, превращать их в JSON и вставлять их в макеты в Скетче.

А сегодня я открываю новую рубрику #basics с видео для дизайнеров, которые пока не владеют технологиями, но хотят разобраться и научиться. Это будут короткие ролики по 3 минуты максимум. Вот первый подход: https://youtu.be/5t1Hb9C5ovA

Покажите коллегам, напишите, что думаете: @adrior

Видео про парсинг данных с сайтов и использование их в Скетче получалось слишком длинным. Чтобы уложиться в трёхминутный формат, пришлось разбить его на две части. Сегодня часть про Скетч и Крафт: https://youtu.be/oHVJ_dSbGfQ. Про парсинг данных расскажу в следующем видео.

P.S.: Извините за качество звука. Сломался микрофон и пришлось записывать на встроенный (как будто в таз говорю). Но решил лучше так, чем откладывать выход видео.

Написал статью про методы querySelector и querySelectorAll: https://medium.com/p/58c4ddf44df2. При помощи них можно легко найти на странице элементы по любому (почти) CSS-селектору. Прям как jQuery, только работает во всех современных браузерах без сторонних библиотек.

Есть скринкаст для тех, кому удобнее смотреть: https://youtu.be/6K8Nz46IXtw

Продолжаю по кусочкам разбирать тему парсинга данных с веб-страниц. Статья про то, как преобразовывать массивы при помощи метода map(): https://medium.com/p/f3649bf467ab/

Заключительное видео, в котором соберу все части вместе, выйдет в среду.

Заключительное видео в серии про JSON и Скетч. В нём показываю от начала до конца как брать данные с любого сайта: https://youtu.be/ziWCNzGH9lU

Пока я готовлю рассказ о новом проекте, пройдите тест из 9 вопросов: https://adrior.typeform.com/to/Ez0mZR. На основе результатов теста выберу новые темы и формат. Будет здорово, если разошлёте тест своим друзьям-дизайнерам.

Экспериментировал с тем какие оттенки серого плохо видны на слабых мониторах (которые стоят у большинства пользователей). Для этого сделал небольшое демо: https://codepen.io/detepr/pen/RMqvwY

В примере можно поиграть с цветами, меняя параметры генерации. Записал про это небольшой скринкаст: https://youtu.be/jH-NnGFJ3Io. Но он скучный получился. Так что лучше просто поэкспериментируйте с параметрами в коде и посмотрите что получается.

Крупные компании, такие как Эпл и Гугл, диктуют стандарты интерфейсов. Всё больше продуктов обвешиваются метриками и оптимизируют по ним интерфейсы. Как думаете, как скоро машинное обучение отнимет работу у дизайнеров интерфейсов?

Через сколько лет машинное обучение заменит дизайнеров интерфейсов?
anonymous poll

дизайнер незаменим – 62
👍👍👍👍👍👍👍 53%

за 10 лет заменит – 46
👍👍👍👍👍 40%

меня уже сократили – 8
👍 7%

👥 116 people voted so far.

57% опрошенных считают, что машинное обучение не сможет заменить дизайнера интерфейсов в ближайшие 10 лет. Что ж, посмотрим.

Сам я считаю, что во многих областях дизайна — сможет. Всё больше интерфейсов будут стандартными, а их параметры (размеры и цвета контролов, типы навигации, расположение контента и т. п.) будут подбираться на основе оптимизации метрик. Появится та самая кнопка «сделать хорошо».

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

Всё это при условии, что машины нас за это время не успеют поработить и люди сами друг друга не уничтожат. ¯\_(ツ)_/¯

Так-так-так. В новостях пишут, что Телеграм сегодня всё же заблокируют. Если это случится, то придётся оживлять группу на Фейсбуке: https://www.facebook.com/groups/301273700399494/

Классный сервис подбора референсов по палитре: https://artsexperiments.withgoogle.com/artpalette/colors/e75811-88d3db-cc18cf-de4aac-d2a8ce

Там же есть бесполезный, но забавный, эксперимент с навигацией по случайным произведениям искусства (на телефоне не работает, нужно открывать с десктопа): https://artsexperiments.withgoogle.com/freefall/random

Отличный сайт со шпаргалками по технологиям: https://devhints.io. Вот, например, шпаргалка по ES6: https://devhints.io/es6

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

Например, вы знаете основы JS, но всё чаще встречаете в примерах непонятный новый синтаксис — ES6. Вы можете прочитать про него длинную статью (например: http://babeljs.io/learn-es2015/), но, скорее всего, сразу всё забудете. Тут вам и придёт на помощь шпаргалка https://devhints.io/es6

Или вы установили себе модный редактор кода Visual Studio Code, но не знаете ни одного хоткея в нём. Вот шпаргалка с ними: https://devhints.io/vscode

Или вы решили научиться верстать флексбоксами, но постоянно забываете синтаксис. Шпаргалка вам его быстро напомнит: https://devhints.io/css-flexbox

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

В современном JS для этого есть шаблонизируемые строки, их ещё называют «бэкти́ки» — по типу кавычек, в которые они берутся. Для простых прототипов больше не нужно искать фреймворки и шаблонизаторы. Если вы можете сверстать один элемент — вы можете легко сверстать и список на реальных данных.

Статья на Медиуме: https://medium.com/p/3153e280cfbf

Пример кода: https://codepen.io/detepr/pen/dmxYyX

Скринкаст: https://www.youtube.com/watch?v=gw-EaA2xAgc&t=25s

В редакции «Детепра» возникли разногласия. Как правильно?
anonymous poll

Гугл – 117
👍👍👍👍👍👍👍 60%

Google – 41
👍👍 21%

Зависит от контекста – 17
👍 9%

Гугль – 10
👍 5%

Гогле – 9
👍 5%

👥 194 people voted so far.

В редакторах можно использовать несколько курсоров одновременно. Зачем это нужно рассказываю в видео https://youtu.be/ngAhveIbSpY или статье на Медиуме https://medium.com/p/3af4f5085b36

А вот ссылки на шпарлалку с шорткатами, чтобы их было легче запомнить.

Для Мака: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Для Винды: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Иногда читатели спрашивают почему в их случае не работает код из постов Детепра. И это очень здорово!

Не стесняйтесь задавать мне вопросы: @adrior. Буду разбирать наиболее частые ошибки отдельными постами и отвечать лично по возможности.

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

https://youtu.be/b-EkpnLINKw

Если кратко. Регулярные выражения помогают искать в тексте куски по сложному шаблону. Например, шаблон /[0-9]+/ найдёт в тексте все цифры, которые повторяются один или более раз подряд.

Но это самый простой случай. В примере я разбираю как работает вот такое выражение: /^(Смартфон\s)?(Apple)\s([a-z ]+)\s(\d+)GB\s(.*)\(([^(]+)\)\s([\d ]+)\sруб.$/igm.

Регулярные выражения помогают обрабатывать большие объёмы данных и приводить их к читаемому виду.

Их сложно понять с первого раза. Но, посмотрев видео, вы поймёте область их применения и сможете изучить их при возникновении необходимости.