Card Swipe Carousel

Карусель карточек, реализованная на чистом JS.

👉 @seniorFront

Responsive Cards

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

👉 @seniorFront

Cookie Loader

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

👉 @seniorFront

N-th Fibonacci

Напишите функцию, которая при задании числа (n) возвращает n-е число в последовательности Фибоначчи.

Пример:

 nthFibo(4) == 2


Потому что 2 - это четвертое число в последовательности Фибоначчи.

Для справки, первые два числа в последовательности Фибоначчи - это 0 и 1, а каждое последующее число - это сумма двух предыдущих.

👉 @seniorFront

Математика и веб-разработка: как мы добавили интерактивную кривую Безье в редактор изображений

В статье расскажу про интерактивную стрелку в редакторе изображений. Вы узнаете: как строятся кривые Безье и какие полезные свойства имеют; как вычислить кривую Безье, проходящую через заданные точки; как найти ограничивающую площадь этой кривой. Рассмотрим плюсы и минусы реализаций на Canvas и SVG.

👉 @seniorFront

​Какими способами можно визуально скрыть элемент в CSS?

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

1. display: none;
- Свойство display: none; полностью убирает элемент из потока документа, делая его невидимым и не занимающим место на странице.

2. visibility: hidden;
- Свойство visibility: hidden; скрывает элемент, но все равно оставляет его в потоке документа, так что место на странице будет занято.

3. opacity: 0;
- Установка opacity: 0; делает элемент полностью прозрачным, но он остается в потоке и может влиять на макет страницы.

4. position: absolute; left: -9999px;
- Присвоение элементу position: absolute; left: -9999px; перемещает его за пределы видимой области экрана, сохраняя доступность для скринридеров.

5. clip-path: inset(100%); opacity: 0;
- Этот метод использует clip-path: inset(100%); opacity: 0; для скрытия элемента за пределами видимой области.

6. width: 0; height: 0; overflow: hidden;
- Установка width: 0; height: 0; overflow: hidden; может быть использована для скрытия содержимого элемента.

Каждый из этих методов имеет свои особенности и может применяться в зависимости от требуемого поведения элемента на странице.

👉 @seniorFront

The Great Fall

Создано и анимировано с использованием возможностей библиотеки Three.js

👉 @seniorFront

​Я — идеальный программист

Я — идеальный программист. Не помню себя таким, чтобы не хотел кодить. Задачки с двумя звёздочками, олимпиады, домашний ПК раньше всех — всё вело к профессии. Убеждён в необходимости математического бэкграунда — и получил его. Для меня программирование — искусство плюс математика. Каждое утро: Хабр, спецификации языков. Пока чищу зубы — профессиональные тг-каналы.

Я — идеальный программист. Точно оцениваю время на задачу, всегда укладываюсь в дедлайн. Форс-мажора не бывает: не зависаю часами над функцией. Сроки священны — важнее, чем время скорой. Промедление сдвинет все процессы.

Я — идеальный программист. Разбираюсь в бизнесе круче CEO: без понимания каждого винтика разработки не ведёшь. Не собираю требования с коллег, не ругаюсь за дубли — готов заменить всех. Моё видение целостное: знаю цели, стратегию компании. Злюсь, если кто-то не вписывается.

Я — идеальный программист. Весь код покрыт тестами: решаю проблемы, предвижу и предотвращаю. Тестировщики не нужны — сам отлаживаю, анализирую баги. Девопсы? Сам владею софтом. Менеджер? Сам юзаю продукты и знаю нужды пользователей.

Я — идеальный программист. Начинал с Assembler, Cobol, Lisp, Erlang... C, C++, Java, JS, Go, Python — база. Фуллстек, плюс немного дизайна. Могу работать один: legacy, правки старше меня — легко.Я — идеальный программист. Трачу три зарплаты в год на обучение, прохожу все курсы компании. На переднем крае технологий и менеджмента, английский на уровне, все сертификаты во всём.

Я — идеальный программист. Хобби: робот на Arduino, моб-игры, LeetCode. Непрерывно придумываю и реализую. Хобби вдохновляют на работу.

Я — идеальный программист. Если тимлид орёт — продолжаю кодить: у них стресс, они за дело. Почему не тимлид? Живу кодом, не хочу рулить. В команде все неидеальны — не сработаемся. Код совершенен: зависит только от меня.

Я — идеальный программист. Обожаю рефакторить: каждая строка, функция — идеал. Трачу время (не в ущерб дедлайну), переписываю за коллегами для оптимизации.

Я — идеальный программист. Сделал code style компании, напоминаю коллегам. Точка с запятой, скобки — важно. Комментарии? Нет: код самодокументируемый, читабельный.

Я — идеальный программист. Могу удалёнку, но офис — чтобы фокус на коде. Раздражают распределёнщики: на созвонах без камеры жуют пельмени. Удалёнка = прокрастинация, быт. Дорога? Время на самообразование с планшета — тещу новое app для тайм-менеджмента.

Я — идеальный программист. Сам общаюсь с клиентами, опросы. Маркетологи не слышат между строк, не понимают проблем. Каждый маркетолог должен пройти курс по dev — иначе не поговоришь: что такое exception и mutex?!

Я — идеальный программист. Ненавижу вайб-кодинг и ИИ в проекте — лень и халатность. ИИ напишет куски, а рефакторить, поддерживать? Опасаюсь, что коллеги запушат навайбкодилое.

Я — идеальный программист. Предложили менторство джунам — тяжело. Объясняю простое, а они косячат. За две недели можно освоить мои принципы. Они никогда не станут идеальными!

Я — идеальный программист. Зовут спикером на конфы: идеальные презентации, дорабатываю с оргкомитетом. Аплодисменты хлипкие, вопросы редкие — а фрикам с шардированием на коленке — овации. Зато я решаю все квесты на стендах и уношу мерч.

Я — идеальный программист. Работаю за идею, не за бабки. Деньги круто, но важно соответствие вклада и оплаты. Обидно: нас недооценивают, не понимают — только идеальный программист создаст идеальный софт. Жаль, что пользователи никогда не бывают идеальными.

Я — идеальный программист. Проблема лишь в том, что я не существую.

👉 @seniorFront

Почему перфекционизм и желание делать свое дело хорошо — медленно, но верно крадут ваше счастье?

Ловушка, в которую попадают хорошие специалисты и предприниматели, — они стремятся сделать свое дело идеально, больше и лучше работать, и тем самым роют себе могилу. Означает ли это, что им надо работать меньше? Нет, это означает, что им надо стать обычными людьми и перестать гнаться за результатами, и тогда им станет легче, а их результаты станут лучше! Как это возможно? А вот так…

👉 @seniorFront

Card Beam Animation

Оригинальная карусель, реализованная на чистых CSS и JS.

👉 @seniorFront

Circular Progress Bar

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

👉 @seniorFront

Они безнадежны(

👉 @seniorFront

Apple

Бесконечная анимация, запускающаяся через JS в setInterval.

👉 @seniorFront

Falling autumn leaves

Создано и анимировано библиотекой Three.js

👉 @seniorFront

Pixel Button Effects

В этом видео создаются кнопки с пиксельным эффектом при наведении на CSS и JS.

👉 @seniorFront

🥶🖌

Реализовано без использования JS при помощи CSS filter

👉 @seniorFront

Array Helpers

Расширьте встроенный класс Array следующими методами: square(), cube(), average(), sum(), even() и odd().

square() - должен возвращать копию массива, содержащую все значения, возведенные в квадрат.
cube() - должен возвращать копию массива, содержащую все значения, возведенные в куб.
average() - должен возвращать среднее значение всех значений массива; для пустого массива должно возвращать NaN
sum() - должен возвращать сумму всех значений массива
even() - должен возвращать массив всех четных чисел
odd() - должна возвращать массив всех нечетных чисел

Пример:

 var numbers = [1, 2, 3, 4, 5];

 numbers.square();  // must return [1, 4, 9, 16, 25]
 numbers.cube();    // must return [1, 8, 27, 64, 125]
 numbers.average(); // must return 3
 numbers.sum();     // must return 15
 numbers.even();    // must return [2, 4]
 numbers.odd();     // must return [1, 3, 5]

👉 @seniorFront

React-монополист: как мы сами убиваем развитие фронтенда

Команда JavaScript for Devs подготовила перевод статьи о том, как доминирование React сдерживает развитие фронтенда. Автор утверждает: выбор React «по умолчанию» тормозит инновации, мешает развитию альтернативных фреймворков и превращает всю экосистему в монокультуру.

👉 @seniorFront