Анимация появления и исчезновения элемента на Vue.js

Привет, на связи админ! Не так давно у нас на канале выходил пост на тему анимации элементов на React.

В комментариях наш подписчик @tkenz попросил выпустить материал по этой теме, только уже на Vue.js.
И вот, что мне удалось найти.

Здесь автор затронул и анимацию первоначальной отрисовки, и javaScript-хуки, и режимы переходов и многое другое. Так что обязательно прочитайте её, пригодится:

https://tprg.ru/RHC9

#vue

​Что такое «генератор»?

Генераторы — это функции, из которых можно «выходить», и в которые можно «входить» по мере необходимости. Их контекст (привязки переменных) сохраняется между сеансами «входа» в них. Генераторы объявляют с использованием ключевого слова function.

Такая функция, при её первом вызове, не выполняет код, возвращая особый объект, генератор, который позволяет управлять её выполнением.

Для получения очередного значения, выдаваемого генератором, нужно вызвать его метод next(). Благодаря этому выполняется код функции до тех пор, пока в нём не встретится ключевое слово yield, возвращающее значение.

Функцию-генератор можно вызывать сколько угодно раз. Каждый раз будет возвращаться новый генератор. Но каждый генератор можно обойти лишь один раз.

#основы

Бедный бэкендер

​Задачи по JavaScript

Хорошо подумайте над решением, а уже завтра мы опубликуем правильный ответ. Удачи!

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

Пример:

1, 1 --> "10" (1 + 1 = 2 в десятичном формате или 10 в двоичном формате)
5, 9 --> "1110" (5 + 9 = 14 в десятичном формате или 1110 в двоичном формате)

Поделитесь своими результатами в комментариях👇

#задачи

​Задачи по JavaScript

Вчера мы опубликовали задачу, а вот и один из вариантов её решения.

Если у вас есть более лаконичный ответ, то предлагаем вам поделиться им в комментариях👇

#задачи

Подборка актуальных вакансий

— QA Automation Java (web, UI) в Открытие
Где: удалённо
Опыт: от 2 лет

— Python-разработчик в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— Разработчик PHP Middle+ / Senior в Kokoc Group
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Python-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Middle / Senior Backend Developer (Python) в команду Атом.Око в Гринатом
Где: удалённо
Опыт: от 3 лет

— Middle+ Senior Java-разработчик Сфера в Иннотех
Где: удалённо
Опыт: от 3 лет

— Senior Java Developer на продукт МТС Аналитика (Big Data) в МТС
Где: удалённо
Опыт: от 4 лет

— Java IT Lead / Руководитель группы разработки Сфера в Иннотех
Где: удалённо
Опыт: от 3 лет

— Ведущий Java-разработчик [SmartDocs] в МТС
Где: удалённо
Опыт: от 3 лет

— Senior Frontend Developer в Kokoc Group
Где: удалённо
Опыт: от 4 лет

— Senior / Lead Backend Java Developer HR TECH (Проект Атомкор) в Гринатом
Где: удалённо
Опыт: не указан

#вакансии #работа

​Когда стоит использовать генераторы?

Если в двух словах описать основные полезные возможности генераторов, то окажется, что они заключаются в следующем:

— код, в котором используется генератор, сам определяет момент получения следующего значения. Генератор отвечает только за возврат значений, управление им осуществляется извне;

— существуют асинхронные генераторы. Они позволяют работать с асинхронными потоками данных.

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

#основы

​11 исходных программ JavaScript, предоставляющих шаблоны проектирования

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

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

https://nuancesprog.ru/p/15565/

#javascript

Всем привет! Сегодня мы запускаем новую версию нашего сайта tproger.ru, поэтому могут наблюдаться сбои и ошибки

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

Спасибо за понимание.

​Подробная настройка Content Security Policy (CSP)

Если вы сталкивались с такими типами атак, как внедрение скриптов (XSS) или выполнение нежелательного кода (инъекция), то CSP может вам пригодиться.

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

Ловите подробный туториал о том, как его настроить:

https://habr.com/ru/articles/757332/

#безопасность

Подборка VS Code-плагинов для фронтенд-разработчиков

Плагины в Visual Studio Code представляют собой набор инструментов, которые различным способом способны упростить работу программиста. Например, плагин quokka.js — обеспечивает мгновенную отладку и вывод результатов javascript-выражений в реальном времени.

Если вы хотите ускорить процесс написания кода или избавиться от некоторых монотонных задач, то советуем вам прочитать данную статью:

https://habr.com/ru/articles/756782/

#vscode

Звучит?

Карточки цен на CSS

Если вы работаете над созданием интернет-магазина, то вас может заинтересовать этот проект. Анимированные ценники, написанные на чистом css помогут сделать ваш сайт более привлекательным. Для работы с CSS в этом проекте использовался препроцессор SCSS.

Посмотреть исходный код можно по ссылке:

https://codepen.io/jcoulterdesign/pen/NxMoja

#codepen

​Что такое «временная мёртвая зона» в ES6?

В ES6 выполняется подъём переменных и констант, объявленных с использованием ключевых слов let и const (выполняется и подъём сущностей, объявленных с использованием ключевых слов var, class и function).

Однако в коде имеется зона, простирающаяся от входа в область видимости до объявления переменной или константы. При обращении к переменной или константе в этой зоне будет выдана ошибка. Это и есть «временная мёртвая зона» (Temporal Dead Zone, TDZ).

В данном примере TDZ заканчивается после объявления aLet, но не после присвоения aLet значения.

#основы

​Music App в стиле рисунка

Отличный вариант пет-проекта для вашего портфолио.
Автор реализовал пользовательский интерфейс аудиоплеера в стиле рисунка. Проект написан на HTML и CSS.

Можете попробовать повторить его самостоятельно или, взяв его за основу, создать собственный вариант приложения:

https://codepen.io/havardob/pen/JjJXqZm

#codepen

Коротко о моём HTML

​Задачи по JavaScript

Завершите решение так, чтобы оно сортировало переданный массив чисел. Если функция передает пустой массив или значение null/nil, она должна вернуть пустой массив.

Пример:

solution([1, 2, 10, 50, 5]); // должен вернуть [1,2,5,10,50]
solution(null); // должен вернуть []

Поделитесь своими результатами в комментариях👇

#задачи