16 апреля в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥

На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг

🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!

А за кодовую фразу, собранную во время интенсива, автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$

Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start

Responsive Contact us Page

В этом видео создается страница контактов с анимированной формой

👉 @seniorFront

Fancy Fading Footer

Создано на HTML и CSS. Размытие реализовано при помощи CSS backdrop-filter. Форма размытия создана свойством mask-image.

👉 @seniorFront

Debug Sum of Digits of a Number

Доработайте функцию getSumOfDigits, которая принимает целое положительное число для вычисления суммы его цифр. Предполагается, что аргумент является целым числом.

👉 @seniorFront

Делаем код-ревью правильно

Если вы не проводите код-ревью, или делаете их «для галочки», то обрекаете себя на боль, пусть не сразу, но в конечном итоге однозначно. Это можно сравнить с возведением дома на фундаменте из песка. Какое-то время он, может, и простоит, но явно недолго. А в мире стартапов второго шанса у вас может уже не быть.
В этой статье автор привел свое виденье на то, как должен выглядеть процесс код-ревью. Он предлагает предлагаю вам прочесть статью, принять в ней то, с чем вы согласны, и проигнорировать остальное.

👉 @seniorFront

​Что такое Tree shaking?

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

Tree shaking (Встряхивание дерева) – это метод оптимизации библиотек путем удаления любого кода из окончательного файла, который фактически не используется.

Допустим, у нас есть файл утилит с некоторыми математическими операциями, которые мы можем использовать в нашем основном скрипте.

 export function add(a, b) {
     console.log("add");
     return a + b;
 }
 export function minus(a, b) {
    console.log("minus");
    return a - b;
 }
 export function multiply(a, b) {
     console.log("multiply");
     return a * b;
 }
 export function divide(a, b) {
     console.log("divide");
     return a / b;
 }

В нашем основном скрипте импортируем и используем только функцию add().

 import { add } from "./mathUtils";
 add(1, 2);

Воспользуемся для сборки webpack. После сборки мы увидим, что все функции из файла mathUtils.js включены в финальный пакет, хотя мы только импортировали и использовали функцию add().

Если воспользуемся tree shaking, тогда только то, что мы импортировали и фактически использовали попадет в окончательную сборку.
Tree shaking, как правило, является функции сборщиков пакетов. Например, если вы используете webpack, вы можете просто установить mode в production в своем файле конфигурации webpack.config.js. Это, помимо других опций, так же запускает tree shaking.
module.exports = {
...,
mode: "production",
...,
} ;

👉 @seniorFront

ИТ-специалисты, ваш выход

Выбирайте вакансию по душе, а Тинькофф обеспечит комфортные условия для работы и возможность экспериментировать в команде единомышленников. Откликнуться в команду Тинькофф
АО «Тинькофф Банк», ИНН 7710140679

Tailwind - form

Реализовано на HTML и стилизовано при помощи Tailwind. Анимации созданы в CSS.

👉 @seniorFront

Открытое собеседование на Frontend разработчика

Привет! Это Эйч Навыки — команда разработчиков из бигтеха. Мы помогаем фронтенд-разработчикам апнуть грейд, сменить компанию или перейти с другого стека.

17 апреля в 19:30 по мск приходи онлайн на Открытое собеседование от Эйч Навыков. Это классная возможность узнать, чего ждут от кандидатов на middle-позиции и как подготовиться к собесу, чтобы получить оффер 👀

Как это будет:
1. Дима Дорофеев, тимлид в канадском стартапе Truv Inc, ex-VK и ментор Навыков, задаст реальные вопросы разработчику-добровольцу
2. Потом Дима даст подробную обратную связь: объяснит, зачем задавал тот или иной вопрос, как лучше на него ответить или решить задачу
3. В конце можно будет задать Диме любой вопрос о трудоустройстве, менторстве или фронтенде

Что узнаешь на Открытом собеседовании:
- Чего ждут от кандидатов на мидл-позиции во фронтенде
- Какие вопросы задают на интервью и зачем
- Как подготовиться к собесу, чтобы получить заветный оффер

Это бесплатно?
Бесплатно

Просто зарегистрируйся на открытое собеседование в нашем боте: @skills_mentee_bot

Реклама: ООО “Эйч Карьера” erid: LjN8KT9Fd

Самые полезные библиотеки JS для красивых анимаций

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

Three.js
Это высокоуровневая JavaScript-библиотека, специализирующаяся на создании 3D-графики и анимаций для веб-приложений. Используя Three.js, мы можем легко конструировать различные трехмерные сцены, от игр и впечатляющих визуализаций до сред виртуальной реальности. Библиотека облегчает процесс добавления объектов, наложения материалов и текстур, создания анимаций, а также интеграции 3D-моделей, созданных в Blender или других инструментах 3D-моделирования. За счет построения на базе WebGL, Three.js предоставляет интуитивно понятный API, позволяя разработчикам сконцентрироваться на дизайне трехмерных сцен без необходимости погружения в технические детали WebGL.

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

AniJS
редставляет собой элегантную JavaScript-библиотеку, предназначенную для упрощения взаимодействия с элементами пользовательского интерфейса без необходимости глубоких знаний в программировании. Эта библиотека разработана с учетом потребностей дизайнеров, и поэтому её синтаксис использует ясный и понятный английский язык, делая её доступной для понимания широкому кругу пользователей.

Ещё больше библиотек, а также примеры анимаций в статье.

👉 @seniorFront

От задачи к результату: как сформулировать требования правильно

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

Правильная постановка задач - залог успешного проекта. Системный аналитик играет важную роль в этом процессе, и его работа должна быть максимально четкой, подробной и структурированной. Эффективная коммуникация, учет безопасности и производительности, а также разделение задач между специалистами помогут достичь желаемого результата.

👉 @seniorFront

VR Landing Page

Реализовано на HTML и стилизовано при помощи Tailwind

👉 @seniorFront

How to make Animated Click Effect

В JS создан обработчик события-клика, по которому генерируется частица, стилизованная и анимированная в CSS.

👉 @seniorFront

Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях

Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции.

Проект «Выше вилки» фиксит этот баг.

Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте.

На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы.

Всё это — на примере реальных кейсов трудоустройства и без «душноты».

Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники.

реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941

Пора в отпуск

👉 @seniorFront

Shimmer wave text animation

В JS текст разделяется на отдельные буквы - span элементы, которые затем анимируются в CSS.

👉 @seniorFront

Pure CSS rotating carousel of suno.ai homepage

Стилизовано и анимировано в HTML и SCSS.

👉 @seniorFront

Magic Button Effect

В этом видео создается кнопка с эффектом. При нажатии генерируются частицы в JS, которые затем анимируются в CSS.

👉 @seniorFront

Bubbles

Пузыри генерируются в JS, а затем стилизуются и анимируются в CSS.

👉 @seniorFront