Обложка канала

Дизайнер учит код. Страница 4

807 @semeonboboshko
Открыть

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

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

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

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

    Поясню. Это тот самый случай, когда high-fidelity прототипирование недалеко ушло от настоящей фронтенд-разработки (не похвала). Окей, выглядит красиво, но затраты по времени огромные, а весь этот код все равно потом отправится в мусорку.

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

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

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

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

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

  • Реклама

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

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

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

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

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

    #FramerNews #FramerShowcase

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

    Кстати! А подскажите пожалуйста нормальный способ конвертации видео в GIF, чтобы FPS сильно не терялись. А то я не особо силён в работе с видео. Желательно, чтобы это был автоматизированный процесс или целый сервис. Спасибо!

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

    Dynamic Type

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

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

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

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

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

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

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

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

    Ну и в целом, я всегда открыт к общению. Спасибо вам всем!

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

    Shake to smile

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

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

    Привет, вновь прибывшим! Я сегодня немного удивился, когда увидел резкий рост подписчиков на канале. Кто-нибудь, расскажите пожалуйста, откуда вы пришли? Можете написать мне (@boboshko) или моему боту (@BoboshkoRobot).

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

    Stay tuned!

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

    Если вы не знаете человека со стикера, то вот вам небольшая справка. Это Владимир Шрейдер — российский дизайнер и арт-директор, основатель приложений Glitché и SLMMSK. И человек, который всегда поможет советом.

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

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

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

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

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

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

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

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

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

    Начинаю первый приём задач. Тема: функции.

    #ЗадачиОтПодписчиков

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

    Ещё про функции. Оказалось, что в конце прошлого поста я ошибся.

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

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

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

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

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

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

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

    #JavaScript

  • Реклама

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

    #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 я буду отдельно изучать и скорее всего напишу про него пост, но позже.

    На этом тема функций пока закрыта.

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

    #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, которая выводит в консоль индексы.

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

    Привет! Пора возвращаться к коду. Первую часть про функции можно прочитать здесь.