Size: a a a

Дизайнер учит код

2017 July 03
Дизайнер учит код
Привет! Пора возвращаться к коду. Первую часть про функции можно прочитать здесь.
источник
Дизайнер учит код
#JavaScript

Функции. Часть 2

Функции умеют возвращать значения:

var multiplication = function (number) {
 return console.log(number * 4);
};

multiplication(2);
//result 8


В этом примере в качестве аргумента передаётся любое значение. return console.log(number * 4); — в теле функции переданное значение умножается на 4 и полученное произведение чисел сразу выводится в консоль.

В функцию в качестве аргумента можно передавать вызов другой функции:

var multiplication = function (number) {
 return number * 4;
};

console.log(multiplication(multiplication(2)));
//result 32


Сначала сработала функция, которой было передано число 2. Она его умножила на 4 и получилось 8. Затем, полученное произведение передали в качестве аргумента другой функции и снова умножили на 4. В итоге получилось 32.

console.log(); пришлось вынести за пределы основной функции. Это связано с тем, что console.log(); возвращает undefined и не может передать аргумент другой функции.

Конечно, можно немного извратиться и записать всё в переменную и затем возвращать её. Но в этом случае вернётся два числа от двух функций — 8 и 32. Выглядит это так:

var multiplication = function (number) {
 x = number * 4; console.log(x);
 return x;
};

multiplication(multiplication(2));
//result 8, 32


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

var multiplication = function (number, text) {
 return
};

console.log(multiplication());
//result undefined


С помощью нескольких функцию можно сделать генератор случайных фраз:

var words = function (words) {
 return words[Math.floor(Math.random() * words.length)];
};

var randomLove = function () {
 var animals = ["Котейка", "Пёсик"];
 var loveOrNot = ["любит", "не любит"];
 var string = words(animals) + " " + words(loveOrNot) + " тебя!";
 return console.log(string);
};

randomLove();
//result Котейка любит тебя!


Первая функция words(); — отвечает за извлечения случайного индекса из массива. Но чтобы это произошло, в функцию должен быть передан массив в качестве аргумента.

randomLove(); — вторая функция, которая хранит в себе две переменные с массивами из которых случайном образом извлекаются индексы (с помощью функции words();) и записываются в отдельную переменную. Ну и в конце, функция возвращает переменную string, которая выводит в консоль индексы.
источник
2017 July 05
Дизайнер учит код
#JavaScript

Функции. Часть 3

Важная особенность функций заключается в том, что как только JavaScript встречает оператор return, то он завершает функцию. Даже если после оператора return есть код. Эту особенность можно использовать для проверки переданных аргументов на корректность:

var numberOf = function (number) {
 if (number < 10) {
   return;
 }
 return console.log(number + " больше, чем 10!");
};

numberOf(50);
//result 50 больше, чем 10!


Если бы в функцию numberOf(); передали в качестве аргумента число 9, то функция бы завершилась, так как аргумент имеет неверное значение и функция не может корректно работать.

Кстати! Есть несколько способов записи функции: длинный и короткий. Длинный способ выглядит так:

var text = function (text) {
 return console.log(text);
};

text("Длинный способ записи!");
//result Длинный способ записи!


Короткий способ:

function text(text) {
 return console.log(text);
};

text("Короткий способ записи!");
//result Короткий способ записи!


Также хочу сказать несколько слов про Callback. Если я правильно понял, Callback — это передача функции в качестве аргумента другой функции, но срабатывает она только при определённом условии. Callback я буду отдельно изучать и скорее всего напишу про него пост, но позже.

На этом тема функций пока закрыта.
источник
2017 July 09
Дизайнер учит код
Ещё про функции. Оказалось, что в конце прошлого поста я ошибся.

Это не длинный способ записи, а анонимная функция, которая записана в переменную:

var text = function (text) {
 return console.log(text);
};

text("Анонимная функция, которая записана в переменную!");
//result Анонимная функция, которая записана в переменную!


А это именная функция:

function text(text) {
 return console.log(text);
};

text("Именная функция!");
//result Именная функция!


Большое спасибо Вадиму Репину за то, что указал мне на ошибки.

#JavaScript
источник
2017 July 10
Дизайнер учит код
Помните знаменитую рубрику #ЗадачиОтСаши? 😁 Рубрика, в которой мой коллега Александр задавал мне задачки по JavaScript, а я их успешно решал. Так случилось, что с Сашей мы больше не работаем, а тяга решать задачки — осталась.

Хочу запустить новую рубрику — #ЗадачиОтПодписчиков. Суть остаётся такой же, только задачи присылают мне подписчики.

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

Затем, я выбираю самую интересную задачу и решаю её. Решаю, когда есть свободное время, так что процесс может немного затянуться.

После, я публикую задачу и её решение (моё и автора).

Если задач не будет
Если подписчики ничего не пришлют, то я ничего не опубликую. Просто начну изучать новую тему и объявлю новый приём задач.
источник
Дизайнер учит код
Начинаю первый приём задач. Тема: функции.

#ЗадачиОтПодписчиков
источник
2017 July 12
Дизайнер учит код
источник
Дизайнер учит код
Glitch-генератор, написанный на Three.js.

#JavaScriptShowcase
источник
Дизайнер учит код
источник
Дизайнер учит код
Если вы не знаете человека со стикера, то вот вам небольшая справка. Это Владимир Шрейдер — российский дизайнер и арт-директор, основатель приложений Glitché и SLMMSK. И человек, который всегда поможет советом.
источник
2017 July 19
Дизайнер учит код
Привет, вновь прибывшим! Я сегодня немного удивился, когда увидел резкий рост подписчиков на канале. Кто-нибудь, расскажите пожалуйста, откуда вы пришли? Можете написать мне (@boboshko) или моему боту (@BoboshkoRobot).

Ну и чтобы второй раз не вставать. Я только что переехал в Москву и как только распакую все вещи — вернусь с новыми постами и задачами, которые прислали мне подписчики.

Stay tuned!
источник
2017 July 31
Дизайнер учит код
Пока я распаковал коробки с вещами после переезда в Москву, у меня было время подумать над тем, как развивать канал дальше. На канале уже более полутысячи подписчиков и чтобы всем было интересно, пора меняться. Хотя я знаю, что после новых постов некоторое количество людей отпишется (ха-ха!), но это нормально.

Что останется прежним
Я продолжу изучать JavaScript, постить код, решать задачи и объяснять всё происходящие (по мере моей компетенции). Но при этом, постараюсь сместиться в сторону прототипирования, как это было задумано изначально. То есть появятся посты про Framer и CoffeeScript. Постараюсь делать это более регулярно, но не ручаюсь.

Что добавится
Я заметил, что на русском языке про Framer практически ничего не пишут. Разве что идёт редкое обсуждение в формате «вопрос — ответ» в Learn Framer (ссылки не будет, домен не работает) и Russian Prototyping Club.

Мой канал постарается восполнить этот информационный вакуум. Это значит, что здесь будут появляться новости про Framer (мероприятия, интересные прототипы, скидки и т. д.) и ссылки на русскоязычные статьи. Если вы такие статьи знаете, то можете смело присылать мне (@boboshko) или моему боту (@BoboshkoRobot).

Также постараюсь рассказывать про возможности Framer.

Учиться вместе
«Учиться вместе» — мой любимый принцип, которому я буду следовать дальше. Это значит, что мне можно и нужно писать, если вы считаете, что я в чём-то неправ или где-то ошибся. Также можно предлагать свои материал по Framer (прототипы, статьи, переводы и т. д.).

Вообще, я буду рад, если мой канал подтолкнёт хоть кого-нибудь к изучению программирования и прототипирования.

Ну и в целом, я всегда открыт к общению. Спасибо вам всем!
источник
Дизайнер учит код
Shake to smile
источник
Дизайнер учит код
Относительно старый прототип Алёны Севокобыльской (Alyona Syvokobylska). На мой взгляд, shake — одно из самых редко используемых и недооценённых жестов на iPhone.

Прототип: http://share.framerjs.com/t1awp1edqeb9

#FramerShowcase
источник
2017 August 02
Дизайнер учит код
Dynamic Type
источник
Дизайнер учит код
Команда Framer запустила Dynamic Type. По-сути, это тот же TextLayer, только для работы с данными в реальном времени. Это значит, что теперь можно настроить стиль TextLayer и подключить к нему внешний API, который будет передавать данные прямо в прототип.

В качестве примера, команда Framer показала два прототипа: приложение, которое показывает погоду в реальном времени в Амстердаме (температура, сила ветра, влажность) и приложение с цитатами. Оба приложения, получают данные через JSON.

Погодное приложение: https://framer.cloud/oyOkN
Приложение с цитатами: https://framer.cloud/ozufD

В Амстердаме находится штаб-квартира Framer. ❤️

#FramerNews #FramerShowcase
источник
Дизайнер учит код
Кстати! А подскажите пожалуйста нормальный способ конвертации видео в GIF, чтобы FPS сильно не терялись. А то я не особо силён в работе с видео. Желательно, чтобы это был автоматизированный процесс или целый сервис. Спасибо!
источник
2017 August 03
Дизайнер учит код
ОГРОМНАЯ пошаговая статья про то, как закодить свой Apple Music во Framer. Очень круто, только вот ЗАЧЕМ?

blog.framer.com/recreating-the-apple-music-app-in-framer-b5fd664b4763
источник
Дизайнер учит код
Поясню. Это тот самый случай, когда high-fidelity прототипирование недалеко ушло от настоящей фронтенд-разработки (не похвала). Окей, выглядит красиво, но затраты по времени огромные, а весь этот код все равно потом отправится в мусорку.

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

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

Так достигается СКОРОСТЬ, когда ты за очень короткое время перебираешь кучу идей, и по-настоящему знаешь, что работает или нет, потому что ты смотрел не на картинки и анимации, а реально пользовался продуктом, который ты проектируешь.

Если вам повезло и у вас маленькая команда (без юридического департамента и печенек), то вы можете за пару дней обкатывать то, что в Яндексе рисуют полгода. Учите React и JavaScript, пацаны ✌🏻.
источник
Дизайнер учит код
Не могу пройти мимо поста Сергея Сурганова насчёт Framer и его бесполезности. Давайте разберёмся.

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

Во-вторых, Сергей прав на счёт времени. На такие прототипы уходит очень много времени и часто это неоправданно. Но стоит помнить, что инструменты нужно подбирать под конкретную задачу.

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

Также, насколько мне известно из рассказов бывших дизайнеров одного крупного банка, они собирали (а может и до сих пор это делают) во Framer прототипы для исследований.

Повседневные задачи лучше решать в Principle или даже в InVision. А если нужно что-то более-менее серьёзное и интерактивное — это во Framer.

В-третьих, Сергей прав насчёт кода. Он отправится в мусорку.

Вывод простой: подбирайте подходящий инструмент под конкретную задачу.
источник