​​​​Первые шаги в 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 это не быстрый и не легкий пусть, никто не говорил, что будет легко. Но увлекательный и полезный (но это не точно).

​​GGradient Sketch plugin

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

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

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

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

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

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

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

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

https://jsroadmap.com/

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

Всем привет

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

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

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

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

Небольшая демонстрация плагина

​​Плагин Color Brightness

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

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

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

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

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

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

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

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

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