Creative CSS Text Animation Effects

В этом видео создается анимированный текст на чистом CSS.

👉 @seniorFront

Animated Login Form

Вёрстка формы входа на чистом CSS.

👉 @seniorFront

Maximum and minimum

Напишите две функции max и min, которые возвращают максимальное и минимальное значение переданного им аргумента соответственно.

Примеры:

 max(1,2,3,4)  //возвращает 4
 max(1,2,3,['4'])  // возвращает 4; обратите внимание, что он вернул 4, а не «4»
 max(1,2,[3,4])  //возвращает 4
 max(1,2,[3,[4]])  //возвращает 4
 max(1,2,[3,['4r']])  //возвращает NaN
 max([[],[-4]])  // возвращает -4
 max()или max([])  // возвращает 0

Функции будут принимать любое количество аргументов.
Массивы чисел могут быть любой глубины.
Вы не можете использовать Math.max, Math.min, и require.
Если один из аргументов не может быть оценен как число, вернуть NaN.

👉 @seniorFront

Click Spark

Реализовано на чистом JS без использования библиотек.

👉 @seniorFront

​Что такое structural typing? Какие есть альтернативы? Какие преимущества и недостатки у этого подхода?

Structural typing - это метод типизации, который определяет совместимость типов на основе их структуры или формы. В рамках структурной типизации, два типа считаются совместимыми, если их структура соответствует.

Пример:
В языке, использующем структурную типизацию, может быть возможно что-то подобное:

 // Объект с полями name и age
 type Person = {
   name: string;
   age: number;
 }

 // Функция, ожидающая объект с полями name и age
 function greet(person: Person) {
   console.log(Hello, ${person.name}! You are ${person.age} years old);
 }

 // Объект, у которого есть поля name и age
 const user = { name: 'Alice', age: 30 };

 // Вызов функции с объектом, хотя у него нет типа Person
 greet(user);

Преимущества:
1. Гибкость: Позволяет создавать объекты и интерфейсы, динамически соответствующие общей структуре, без явного определения конкретного типа. Например, два объекта с одинаковой структурой будут считаться совместимыми, независимо от того, имеют они одинаковый тип или нет.
2. Легковесность: Может уменьшить необходимость в явных типах, что способствует гибкости и легкости в обслуживании.

Недостатки:
1. Неявность: Может немного увеличить сложность обнаружения ошибок, так как не всегда очевидно, какие именно поля или методы имеют структуры различных объектов.
2. Сложность в больших проектах: В больших и сложных проектах может быть сложно соблюдать структурную целостность объектов, что может привести к потенциальным ошибкам.

Альтернативы:
1. Номинальная (nominal) типизация: Определяет совместимость типов на основе их явного указания, т.е. имен типов.
2. Duck typing: Это философия в программировании, которая говорит о том, что объекты могут быть считаться экземплярами определенного типа, если они имеют определенные методы и свойства.

👉 @seniorFront

Bookmark App - View Transition

Вёрстка создана на HTML и CSS. Плавное раскрытие карточки реализовано при помощи CSS view-transition.

👉 @seniorFront

​Репутация эксперта ускоряет карьерный рост

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

Можно стать экспертом по базам данных, экспертом по Python, экспертом по кэшированию, экспертом по фронтенду, экспертом по Typescript и так далее. Кроме того, можно стать экспертом по определенному компоненту продукта, например экспертом по процессу онбординга, экспертом по платежным порталам или экспертом по ленте домашней страницы.

Если не верите, что это имеет настолько большое значение – посмотрите на критерии, согласно которым повышают в крупнейших технических компаниях. В критериях Google упоминается, что нужно «быть признанным специалистом по какой-либо теме». В требованиях к программистам-сениорам у Square говорится: «…техническая реализация: обладает продвинутыми навыками в одной или нескольких областях». В требованиях к программистам-сениоров у Etsy читаем следующее: «программисты этого уровня обычно выказывают высокую квалификацию в определенной теме, или продвинутые навыки по набору различных тематик».

👉 @seniorFront

Как подготовиться к собеседованию и переехать в другую страну? Что делать, если выгорание близко и работа совсем не радует? Как вкатиться в IT за полгода, если тебе уже за 30?

Ответы на эти вопросы — в канале «Люди и код». Команда канала беседует с опытными и начинающими разработчиками и программистами, находит интересные и неожиданные темы и помогает влюбиться в IT. Про мемы и конкурсы тоже не забываем :) А ещё у нас есть подкаст, послушать его можно по этой ссылке.

Наши любимые материалы:

1. Как грамотно начать свой путь в IT в России в современных условиях?
2. Кто такой DevRel? Чем он занимается и сколько зарабатывает?
3. Какие игры помогут прокачаться в программировании? Подборка.
4. Как транзисторы перевернули наш мир: большой спецпроект
5. Как программисту пройти собеседование. 6 советов.
Подписывайтесь на канал «Люди и код»: @skillbox_media_code

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880
2VtzquuDJ86

15 Incrementing Counter

Анимировано в CSS. Логика изменения цифр реализована в JS.

👉 @seniorFront

Toast Notification

Уведомления, созданные на HTML, CSS и JS.

👉 @seniorFront

Simple CSS Hover Animation Effects

В этом видео создаётся анимированный логотип при помощи fontAwesome и CSS.

👉 @seniorFront

👉 @seniorFront

Encrypted Password Reveal

Оригинальное поле ввода пароля, анимированное библиотекой GSAP.

👉 @seniorFront

Trophy Animation

Это svg картинка, анимируемая в CSS.

👉 @seniorFront

CSS Image Gallery

В этом видео создается оригинальная галерея картинок при помощи CSS Grid.

👉 @seniorFront

Wooden Toggles

Оригинальные переключатели на HTML и CSS.

👉 @seniorFront

Descending Order

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

Пример:
Input: 42145 Output: 54421
Input: 145263 Output: 654321
Input: 123456789 Output: 987654321

👉 @seniorFront

Smooth Liquid Background Effect

"Кляксы" созданы в HTML, а в JS создана логика их передвижения и анимации.

👉 @seniorFront