CSS Pulse Animation Effects

В этом видео создается анимация пульсации на CSS.

👉 @seniorFront

Blackhole

Создано и анимировано на canvas при помощи WebGL.

👉 @seniorFront

Even or Odd Accessor

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

Примеры:
evenOrOdd(2); //'Even'
evenOrOdd[2]; //'Even'
evenOrOdd(7); //'Odd'
evenOrOdd[7]; //'Odd'

👉 @seniorFront

Синдром самозванца Vs Излишняя самоуверенность

Есть два зеркальных деструктивных поведения, с которыми мы встречаемся на работе - излишняя самоуверенность и синдром самозванца. На сколько они опасны для руководителя и для самой команды? Как с ними бороться? Ответы в этой статье.

👉 @seniorFront

​Что такое ARIA-атрибуты?

ARIA-атрибуты — это группа дополнительных атрибутов из спецификации WAI-ARIA, которая состоит из свойств и состояний.
Состояния (states) описывают состояния элементов и отвечают на вопрос «В каком состоянии сейчас элемент?».
Свойства (properties) нужны для раскрытия дополнительных функций элементов. Отвечают на вопрос «Что ещё делает этот элемент?».

ARIA-атрибуты поддерживают роли и помогают браузерам и Accessibility API правильно обрабатывать элементы для вспомогательных технологий. Сами по себе, без CSS и JavaScript, они не изменяют внешний вид и функциональность элементов.

Общий синтаксис ARIA-атрибутов — aria-атрибут="значение".
Для примера сообщим скринридеру с помощью ARIA-атрибута, что у поля есть инструкция к нему.
<label for="psw">Пароль</label>
<input
type="password"
name="password"
id="psw"
aria-describedby="hint"
>
<span id="hint">Пароль должен содержать не меньше 20 знаков</span>

aria-describedby связывает с помощью одинакового ID два элемента — поле и подсказку из тега <span>. Скринридер озвучит текст подсказки после подписи и основной информации о поле.

👉 @seniorFront

HOME 🏠 & WORK

Анимация реализована при помощи библиотеки Three.js

👉 @seniorFront

​Как сохранить здоровую самооценку в необъятном пруду ИТ

Сейчас выделяют несколько видов сравнения: горизонтальное, восходящее и нисходящее, сравнение с идеализированными образами (в рекламе и соцсетях), сравнения с прошлым или будущим «я». Мы поговорим о восходящем и нисходящем сравнении.

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

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

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

Иногда балуйте себя нисходящим сравнением
Я практиковал это, будучи преподавателем. На занятиях я говорил ребятам: «Вы в 8–11 классе уже умеете программировать. В вашем возрасте у меня из ачивок был только пройденный Dark Souls. Да, я стою перед вами и рассказываю тему, но вы уже шагнули дальше, чем я в вашем возрасте».
Иногда я готовил школьников к олимпиадам, и видел, как они сравнивают себя только с олимпиадниками и переживают. Но их выбрали из множества учеников, и они уже в суперпродвинутой тусовке. Я напоминал им об этом

Не забывайте о ретроспективе и рефлексии
Я пока не записываю свои достижения, но иногда останавливаюсь и в моменте вспоминаю пройденный путь или успехи моих учеников. У вас за плечами точно есть победы: pet-проекты, опыт и масса знаний. Всё это мы не учитываем, безвылазно находясь в пруду. Выглядывайте наружу и смотрите вокруг. Многие «рыбки» хотели бы оказаться на вашем месте. Сейчас вы уже читаете ИТ-блог, а значит продуктивно проводите время.

Делитесь эмоциями в комментариях: какие эмоции вы испытывали при поиске работы. И не забывайте, что вы потрясающие!

👉 @seniorFront

Как ошибка ChatGPT стоила нам $10 000

В этой статье рассказывается про то, как код, написанный при помощи ChatGPT привёл к багу, который не могли исправить неделю

Произошло следующее: в рамках миграции бэкенда мы переносили модели баз данных с Prisma/Typescript на Python/SQLAlchemy. Это был очень монотонный процесс. Мы обнаружили, что ChatGPT превосходно справляется с этой трансляцией, поэтому использовали его на протяжении почти всей миграции. Мы копипастили генерируемый им код, видели, что всё работает хорошо, пробовали в продакшене, видели, что он тоже работает, а затем продолжали процесс.

👉 @seniorFront

Cuboid Warptunnel Audio Visualizer

Создано и анимировано на canvas и чистом JS.

👉 @seniorFront

Text Hover Animation Effects

В этом видео создается CSS анимация при наведении на текст. Каждая буква - это отдельный span элемент. В JS задается разная задержка запуска CSS transition для каждой буквы.

👉 @seniorFront

Без внятного ТЗ...

👉 @seniorFront

On/Off Plugs

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

👉 @seniorFront

Frying Pan Preloader

Оригинальный загрузчик - svg картинка, анимируемая в CSS.

👉 @seniorFront

Modern Button Hover Effects

В этом видео создаются кнопки, текст внутри которых анимируется при наведении.

👉 @seniorFront

3D Card Slider - GSAP

Логика переключения слайдов и анимация реализованы библиотекой gsap.

👉 @seniorFront

Partial Word Searching

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

Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.

Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».

Пример:
wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]

👉 @seniorFront

Как работать эффективно, если ты тревожный человек

Быть эффективным в профессии, когда тебя одолевает тревога и даже панические атаки, непросто, но реально. Для этого надо разобраться в сути тревожности, подобрать подходящие инструменты и методики по работе с ней, обзавестись поддержкой. Обо всем этом и поговорим в статье.

👉 @seniorFront

prefers-color-scheme

Свойство prefers-color-scheme — это медиавыражение, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе. Свойство поддерживается всеми основными браузерами.

Пример
В этом коде с помощью prefers-color-scheme определяем, что у пользователя выбрана светлая тема, и задаём для неё свои цвета.
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}

👉 @seniorFront

Golf Toggle

Оригинальный переключатель, анимированный в CSS. Логика смены CSS классов при нажатии реализована в JS.

👉 @seniorFront

Вам не нужен Lodash. Хватит! Пожалуйста

Лодаш:
- Имеет множество методов установки, каждый из которых может вызывать проблемы и головную боль с подключением
- Легко подключается целиком вместо нескольких нужных вам методов
- Не обновляется
- Не нужен в 95% случаев
- Мешает пониманию действительно современных методов

Вам не нужен лодаш. Пройдитесь по своим методам, выкиньте доступные в нативе, замените недоступные (если они вам точно нужны).

А если уж вы его используете:
- Используйте es-версию с костылями под TS, если потребуются, или обычную с плагинами для tree-shaking
- Не используйте эти отдельные пакеты - только lodash или lodash-es
- Не увеличивайте его процент использования в вашем коде. Пожалуйста

Вы может быть еще и Moment используете? Тоже пора обновляться!

👉 @seniorFront