Full Page Scroll Progress Indicator

В этом видео создаётся индикатор прокрутки страницы на CSS и JS.

👉 @seniorFront

Starry Campsite

Вся сцена реализована с использованием возможностей препроцессоров Pug и SCSS.

👉 @seniorFront

Currying functions: multiply all elements in an array

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

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

Вы не должны изменять исходный массив.

Пример:
multiplyAll([1, 2, 3])(2) = [2, 4, 6];

👉 @seniorFront

Don't Repeat Yourself: Как правильно использовать принцип DRY в разработке ПО

Принцип “Не повторяйся” (Don't Repeat Yourself, или DRY), то есть избегай дублирования кода, часто относят к обязательным практикам в программировании. Однако в реальности часто можно увидеть, как в общем коде оказываются концептуально разные блоки, которые похожи только по внешним параметрам. Это неминуемо приводит к ухудшению кода и появлению "костылей", без которых он не работает. Именно поэтому слепое следование принципу DRY не всегда целесообразно! В этой статье рассказывается про типичные ошибки при использовании этого правила и способы их избежать.

👉 @seniorFront

.with()

Метод with() изменяет значение одного из элементов массива и возвращает новый массив, без изменения исходного массива.

Пример
Изменим элемент 'white' на 'blue':
const colors = ['red', 'green', 'white']
const newColors = colors.with(2, 'blue')
console.log(newColors)
// ['red', 'green', 'blue']

// Исходный массив остался прежним
console.log(colors)
// ['red', 'green', 'white']

Как пишется
Array.with() принимает два аргумента:

1. индекс элемента, который нужно изменить;
2. новое значение изменяемого элемента.

Индекс элемента может быть:
- положительный — для доступа к элементам от начала массива;
- отрицательный — для доступа к элементам с конца массива. Например, -1 — индекс последнего элемента, -2 — предпоследнего и т. д.
Array.with() возвращает массив с изменённым элементом.

Вызов with() без аргументов, не приведёт к ошибке. Это равнозначно вызову with(0, undefined):

👉 @seniorFront

Amazing Product transition

Создано и анимировано на HTML и CSS.

👉 @seniorFront

​Куда подевались ваши манеры? Коллеги в IT

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

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

Будь внимателен на код-ревью, ведь нужно разнести код своего коллеги
Однажды я работал над разработкой общей библиотеки для всего цеха разработки и внёс небольшие изменения в логирование для улучшения производительности. Когда я создал мердж-реквест, начался сущий кошмар. От трех человек я получил более 70 замечаний, причем не только по моим изменениям, но и по тем, что они увидели в проекте, а также по своим пожеланиям относительно стиля кода.
Пришлось каждому отвечать, что данное замечание не относиться к задаче, а их некоторые пожелания не совпадают с единым стилем кода принятым в цехе разработки. Они соглашались, что их замечания не по делу и когда я начинал собирать апрувы, они старались искать все новые и новые замечания, так-как их предыдущее не получило одобрение. Самое интересное, что они начинали ругаться и с другими людьми, которые указывали замечания.

Будь почтителен со своими родителями, родственниками и с менеджером Иваном из своей компании
Пришла ко мне очередная бизнес-задача, уже с подготовленной документацией и согласованным архитектурным решением от менеджеров. Казалось бы, просто взял, реализовал, протестировал и выпустил в релиз, но менеджер Иван решил продемонстрировать свою важность, и релиз затянулся на неопределенный срок.
Всё началось с согласования мердж-реквеста в релизную ветку. На просьбы посмотреть и согласовать изначально был игнор, потому что Иван был очень занят согласованием других мердж-реквестов.
Заказчики уже ожидают функционала на продакшене, а я все еще не могу получить согласование от нашего менеджера. Это заставляет меня поднять вопрос на ретроспективе: почему этот менеджер взял на себя обязанности по согласованию всех задач в релизе и не может выполнять свою работу вовремя? Возможно, он вообще лишнее звено в этой бюрократической цепи. Другие разработчики тоже сообщают о таких проблемах, и наш тимлид решает провести разговор с Иваном и ускорить процесс.
Результатом данного разговора стало то, что Иван отказывается согласовывать данные доработки, аргументируя тем, что ему не устраивает архитектурное решение, хотя ранее он уже его согласовывал. Он указывает мне, что я должен посмотреть его расписание в календаре и назначить встречу с моим тимлидом и аналитиком, причем я не упоминаюсь в этой встрече. И разговор проходит в тоне, как-будто я секретарша, а он мой начальник, хотя в юридической структуре мой руководитель, мой тимлид.

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

И тут возникает вопрос: зачем всё это нужно? Почему, когда некоторые становятся столпами бюрократии, они начинают не решать проблемы, а создавать новые? Мне кажется, всё это происходит потому, что нужно демонстрировать руководству, как сильно ты зависишь от этого и как много ты работаешь, даже если эта работа не имеет реального значения.

👉 @seniorFront

Увольнять нельзя удерживать

В мире ИТ вполне обычное дело, когда сотрудник компании получает выгодное предложение от компании-конкурента. В целом, это распространенная практика, ведь всем необходимы специалисты с опытом и развитыми навыками и компетенциями. А где же их развивать, как не в компаниях, откуда потом сотрудника можно забрать.

В этой статье рассматривается такая ситуация с точки зрен6ия менеджера. Будет полезно прочитать тем, кто задумывается о принятии контроффера.

👉 @seniorFront

Smooth 3d perspective slider

Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера и логика поворота карточки реализована на чистом JS.

👉 @seniorFront

Light & Shadow Text Shadow Animation

В этом видео создается тень текста, при помощи CSS text-shadow, затем в JS изменяются параметры этой тени.

👉 @seniorFront

👉 @seniorFront

Proximity Glow Cards

Настройки стилей карточек реализованы при помощи библиотеки dat.gui. Стилизовано и анимировано в CSS.

👉 @seniorFront

Travel carousel

Функционал слайдера реализован библиотекой swiper. Стилизовано в SCSS.

👉 @seniorFront

Soap & Bubbles

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

👉 @seniorFront

React Smooth Section Navigator

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

👉 @seniorFront

Convert Hash To An Array

{name: 'Jeremy', age: 24, role: 'Software Engineer'}
должны быть преобразованы в
[["age", 24], ["name", "Jeremy"], ["role", "Software Engineer"]]
Примечание: Выходной массив должен быть отсортирован в алфавитном порядке по имени ключа.

👉 @seniorFront

Как стать востребованным DevOps-специалистом всего за полгода и увеличить свой доход минимум в 3 раза?

Самое перспективное направление в IT сейчас – DevOps. И пока одни его боятся и обходят стороной, другие снимают все сливки.

Реальный пример – автор канала «Devops за полгода» Марсель Ибраев, Senior system engineer в Core42 Cloud и спикер учебного центра Слёрм.

Совместно с ребятами из Честного Знака, Лаборатории Касперского, VK и Jetty Cloud, они запускают новый крутой проект для всех начинающих DevOps-специалистов.

В канале собраны все фишки о том, как:
– Начать свой путь в DevOps
– Освоить базовые компетенции DevOps-специалиста
– Стать Junior DevOps и повысить свою стоимость на рынке труда в 3 раза


Переходи и забирай бесплатную карту по базовым и основным компетенциям для всех, кто собирается в DevOps 👉 @devopsupgrade

Реклама. ИП Аердинов Никита Вадимович ИНН 638103515932 erid: LjN8K7zVy

Путь к потрясающему CSS Easing с помощью новой функции linear()

Перефразируя поговорку, которая всегда была со мной: "Лучшая анимация - это та, которая остается в тени". Одна из самых важных концепций моушн дизайна в вебе - сделать так, чтобы моушн "чувствовался правильно". В то же время CSS был довольно ограничен в создании анимации и переходов, которые выглядят естественно и ненавязчиво для пользователя.

К счастью, ситуация меняется. В этой статье рассмотриваются новые возможности анимации, появившиеся в CSS. В частности, демонстрируются супер возможности linear() - новой функции для анимации, которая в настоящее время определена в спецификации CSS Easing Level 2 в редакции Editor's Draft. Изучается ее способность создавать кастомные анимации, которые приводят к естественному движению пользовательского интерфейса.

👉 @seniorFront

Верстаешь?

Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:

1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.

👉 Проскочить на интенсив бесплатно

Начинаем 14 мая.

Реклама. ИП Чернова О. А., ИНН:771399721044