Дизайнер учит JS 🤖


Гео и язык канала: Россия, Русский
Категория: Дизайн


Будем говорить про JS, автоматизацию рутины в работе, написание плагинов и взаимодействию с разработчиками. Если вам есть что рассказать или предложить пишите @andexds.

Связанные каналы

Гео и язык канала
Россия, Русский
Категория
Дизайн
Статистика
Фильтр публикаций


Ожившие мертвецы)
Скеч давно почил в дизайн сообществе (честно не знаю, кто и зачем им может пользоваться). Figma пока впереди, ну и плагина соответственно я пишу теперь не для скеча, а для фигмы.
Помню в свое время и для Illustrator даже писал. Энивей, канал переехал сюда https://t.me/pluginme, велкам.

JS я так же учу, как и англйиский, каждый день, процесс бесконечный, мыслей много, буду обо всем писать 🙂


Оо, тут кто-то еще есть 🙂
В общем ситуация такая, если кто-то еще работает в скече и юзает плагин о котором я писал выше, напишите мне 🙂


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

https://habr.com/post/358394/


​​Плагин Color Brightness

Предистория
Когда мне нужно было разместить полупрозрачный текст или иконку на однородном фоне, обычно я использовал белый с прозрачностью. С текстом это прокатывало на ура, но с иконками видно, что выходит «грязно». Цвет не такой сочный, как хотелось бы. Решение простое, нужно брать цвет фона и делать его ярче. Но вручную это делать крайне муторно, особенно, если иконок много, а фоны разного цвета. Нужно подбирать яркость, чтобы все иконки выглядели одинаково.

Решено было написать плагин. Основные функции я написал за день, два дня упрощал код и добавил функцию выбора степени яркости вручную. Вся суть плагина в том, что я перевожу RGB цвет в HSL и меняю параметр L. В итоге мы получаем текущий цвет в нужной яркости.

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

Ссылка на плагин
https://github.com/andex/ColorBrightness


Видео недоступно для предпросмотра
Смотреть в Telegram
Небольшая демонстрация плагина


Всем привет

На той неделе вышел Sketch 50 и они обновили API для javaScript. Добавили много интересного, например, работу с градиентами, до этого приходилось работать с контекстом, который возвращал Sketch при запуске плагина. По нему описаний особо нет, и приходится искать решения в сторонних плагинах, изучать чужой код.

Это очень хорошая практика, одно дело написать свой код, другое, разобраться как работает сторонний. Для изучения чужого кода можно использовать Github. Например, все плагины для Sketch можно найти на этой странице (https://github.com/sketchplugins/plugin-directory), можно выбрать любой и с вероятностью 90% там будет код без обфускации, который можно читать.

Возвращаясь к API для Sketch. Уже текущее API позволяет достаточный набор методов, чтобы начать упрощать себе жизнь и избавляться от рутины. Выходные были довольно-таки продуктивными и я написал свой второй плагин.
Плагин может менять цвет объекта и текста на более яркий или темный. Для чего это нужно я расскажу с релизом плагина. Пока дописываю возможности, провожу тесты. Если кому-то уже интересно потестировать, дать обратную связь, пишите мне в личку (@andexds), поделюсь. Релиз сделаю через пару дней.

Если вы хотите начать писать плагины самостоятельно, то вам для начала сюда https://developer.sketchapp.com/ Так же можете задавать мне вопросы, я с радостью отвечу на что смогу.


​​Как не сбиться с пути

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

Мир JavaScript очень широк, а попробовать хочется всё и сразу: ReactJS, Node, Vue, React Native, Electron и т.д. И как только начинаешь хоть чуть-чуть в это влезать, всё перестает получаться. Знания необходимые для старта оказываются слишком велики и ты сразу думаешь, что ничего не умеешь и вообще, программирование это не твоё.
Об этом, кстати, есть замечательная статья https://habr.com/company/hexlet/blog/251411/

Для того, чтобы не сбиваться с пути и научиться программировать, нужен план. Можно составить индивидуальный, если разбираться в экосистеме JS, а можно взять готовый

https://jsroadmap.com/

Это бесплатная рассылка с советами и ссылками на полезные материалы. Автор проводит нас с нуля до разработчика, постепенно, по шагам. Письма приходят пару раз в неделю, но это не значит что нужно сразу бежать их открывать и сразу все выполнять. Это просто план. Скорость выполнения индивидуальная. Сейчас я остановился на 8 письме. В конце каждого письма есть четкий чек-лист: Знаешь это? — Можешь идти дальше. Не знаешь, учи.
Это искусственное ограничение помогает не прыгать от технологии к технологии, а изучать всё постепенно, с плавным увеличением сложности.


Видео недоступно для предпросмотра
Смотреть в Telegram


​​GGradient Sketch plugin

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

Ссылка на плагин https://github.com/andex/ggradient

Как так получается плавный градиент можно почитать тут https://css-tricks.com/easing-linear-gradients/

Если интересно, я расскажу по шагам, как я делал этот плагин, с какими трудностями столкнулся и какие хитрости применил, в общем ставьте 🔥




​​​​Первые шаги в JS.

Я не знаю, какую аудиторию я соберу вокруг этого канала, поэтому начну с самых азов.

Сейчас JavaScript используют везде: front-end, back-end, мобильные приложения, десктопные приложения, телевизоры, электрические чайники, ложки, вилки… в общем JS вездесущ. Но если мы начинаем изучать JS, то проще изучать его со связкой с вебом.
Поэтому первое, что нужно знать перед началом изучения JS это HTML и CSS.

В HTML я копался с 12-13 лет, верстал в блокноте, без подсветки синтаксиса, таблицами, в общем, это были веселые времена.
Сейчас для изучения HTML есть сотни книг, курсов и уроков на ютубе. Можно выбирать любой. Советовать ничего не буду, они все одинаковые. Могу только справочник посоветовать http://htmlbook.ru/

После изучения основ HTML+CSS можно начинать изучать JS. JavaScript очень специфический язык, с кучей своих тонкостей и нелогичностей. При всем при этом у него очень низкий порог входа. Вам не нужно ничего, кроме браузера, что бы начать писать на JS. Начать лучше с очень крутой бесплатной онлайн книги (электронную офлайн можно купить) https://learn.javascript.ru/ Для начала больше вообще ничего не нужно, там описано всё. Прелесть этой книги в том, что она постоянно обновляется. Меняется язык → меняется книга. Это делает её уникальной перед бумажными книгами (которые как правила издаются уже с неактуальной информацией).

Но чтение без практики это пустая трата времени, нужно сразу начинать кодить. Вот отличный курс, где автор пишет разные мини программы на чистом JS, без библиотек и фреймворков
https://javascript30.com/
Можно читать книгу и параллельно применять знания на разных реальных кейсах.

Вообще изучение JS это не быстрый и не легкий пусть, никто не говорил, что будет легко. Но увлекательный и полезный (но это не точно).


Видео недоступно для предпросмотра
Смотреть в Telegram


И так, 5 месяцев прошло, можно и написать чего-нибудь.

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

Я начну писать небольшие посты, про то, что я делал / делаю в изучении JS, надеюсь в этот раз получится 🙂
Еще я написал первый плагин для скеча, но об этом чуть позже. В общем забросаю вас постами.


​​Кто я?
Меня зовут Андрей (@andexds), я продуктовый дизайнер в одном 20-летнем стартапе :)

Как я стал дизайнером?
Началось всё с не малоизвестной программы Macromedia Flash. В далеком 2004 году я начал разрабатывать баннеры, шапки для сайтов, а в последствии даже игры. Но после того, как стало ясно, что flash «всё», я стал выбирать, чем займусь дальше и выбрал web-дизайн. В процессе работы направление сузилось до интерфейсов.

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

Почему ReactJS?
Наш продукт разрабатывается на ReactJS, поэтому я хочу погрузиться в контекст, понимать, что испытывают разработчики, когда получают от меня макеты, понимать, как лучше подготавливать дизайн. Это очень важно. Другая причина выбора ReactJS, а не AngularJS или VueJS  — это автоматизация дизайн процессов. Airbnb уже сделали не малый вклад в этом направлении создав React-Sketch (airbnb.io/react-sketchapp/). 

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

О чем будет канал?
Я буду делать акцент на ReactJS, React-Sketch, писать статьи, уроки, прикладывать полезные ссылки. Нужно быть в тренде, и конечно я буду затрагивать тему автоматизацию дизайн процессов в целом. Индустрия развивается очень быстро и если завтра ReactJS станет не актуальным, мы будем изучать что-то другое :)

Показано 14 последних публикаций.

51

подписчиков
Статистика канала