Senior Frontend - javascript, html, css. Страница 11

Как работает механизм "hoisting" в JavaScript? "Hoisting" - это механизм, который позволяет переменным и функциям быть объявленными в коде после того, как они будут использованы. Когда JavaScript-код выполняется, он проходит через два этапа - "компиляция" и "исполнение". Во время "компиляции" JavaScript перемещает объявления функций и переменных в начало своей области видимости, позволяя им быть доступными в любой части блока кода. Однако, значения переменных не переносятся с верхушки блока кода, поэтому переменные, объявленные с помощью ключевого слова "var", будут иметь значение "undefined", если к ним обратиться перед их инициализацией. Например:

 console.log(x); // undefined
 var x = 5;

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

CSS View Transition Здесь анимируется CSS свойство mask-position и transform: scale в SCSS коде. 👉 @seniorFront

Заменить все элементы Напишите функцию replaceAll, которая принимает первым параметром массив элементов, вторым параметром - элемент, который нужно заменить и третьим - элемент, который должен заменить второй элемент. Пример: replaceAll(array: [1,2,2], old: 1, new: 2) // [2,2,2] 👉 @seniorFront

Expanding Buttons Создано в виде React компонента, стилизованного в SCSS. 👉 @seniorFront

Futuristic CSS Animated Button В этом видео создаются и анимируются кнопки на HTML и CSS. 👉 @seniorFront

File scan Стилизовано и анимировано в SCSS. 👉 @seniorFront

Colour Creep Это svg картинка, анимируемая библиотекой gsap. 👉 @seniorFront

👉 @seniorFront

🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

​На что хватит времени синьору и не хватит тимлиду Кто не кодит, тот тимлид Тимлиды не могут нормально погрузиться в архитектуру и дизайн. Сколько всего может опробовать синьор: новые фреймворки, подходы, паттерны, так построено, сяк, по-другому перестрою, попробую применить хоть и не в продакшене, но на уровне прототипа, хоть где-то… Когда на это есть время у тимлида? Да никогда. Новые фреймворки попробовать некогда! Даже не подходы, а просто фреймворки. Совсем бросать кодить, конечно, нельзя. Тимлид должен уметь писать код. Но периодически нужно хватать себя за руку: если кодить слишком много, не останется времени на другие задачи, которые кроме тебя выполнить некому. Часто падает CI — кто опять здесь виноват? Нет, не ты. Но ответственен за то, чтобы починить, конечно, ты. Получается, чтобы оставаться тимлидом, нужно продолжать кодить, но привыкнуть кодить меньше. Если это не для вас — опять же рекомендую вернуться на позицию синьора и расти по горизонтали, то есть развиваться в другой области. Это совершенно нормально и даже похвально. Ну и немаловажно, что синьоры могут в свое удовольствие передавать опыт: ездить на конференции, писать статьи на Хабре, да хоть книгу свою. А где тимлиды в этот момент? Правильно, проводят тимбилдинги! Или работу согласуют с заказчиком. Ну и участвуют в церемониях, как любезно подсказывают вакансии на хедхантере. 👉 @seniorFront

LIGHT Это svg картинка, которая анимируется библиотекой gsap. 👉 @seniorFront

Какой будет результат выполнения кода на картинке и почему? Ответ: 'object' 'object' 'function' 'undefined' Почему так происходит: typeof null возвращает 'object', потому что null - это отдельный тип данных в JS, который предназначен для представления отсутствующих значений, однако по историческим причинам возвращает 'object'. typeof [] возвращает 'object', потому что в JS массивы - это объекты. typeof function(){} возвращает 'function', потому что функции в JS являются объектами, и у них есть специальный тип 'function'. typeof undefined возвращает 'undefined', потому что это литерал, который используется для представления значений, которые не были присвоены переменным. 👉 @seniorFront

Colorful Theme Switch Внутри переключателя находится svg картинка. При нажатии на переключатель задействуются CSS трансформации. 👉 @seniorFront

JavaScript Array Filter Используйте JS filter, чтобы отфильтровать массив чисел и получить четные числа. Пример: getEvenNumbers([2,4,5,6]) // should == [2,4,6] 👉 @seniorFront

Catsomnia Сцена, реализованная на HTML и CSS, к которой применяются бесконечные CSS анимации. 👉 @seniorFront

CSS Soical Media Icon Hover Effects В этом видео создаются три эффекта при наведении на иконки социальных сетей. 👉 @seniorFront

Hexagonal Loading Animation Оригинальный загрузчик, созданные на HTML и CSS. 👉 @seniorFront

CSS Galaxy Button Вёрстка создана на HTML и CSS. В JS создаются частицы с рандомными значениями, которые записываются в CSS переменные. 👉 @seniorFront