Image slider ripple effect

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

👉 @seniorFront

​Простой саботаж в мире ПО

В кульминационный момент Второй мировой войны ЦРУ выпустило потрясающую книгу Simple Sabotage. В ней изложены различные способы, которыми диверсанты могут снижать продуктивность компании. Некоторые из этих советов не стареют, например, раздел «Общие помехи организациям и производству»:

1. Настаивайте на том, чтобы всё выполнялось через «каналы». Не допускайте того, чтобы для ускорения реализации решений выбирались кратчайшие пути.

2. Делайте «доклады». Говорите как можно чаще и пространнее. Иллюстрируйте свои «идеи» долгими историями из жизни и ссылайтесь на личный опыт. С готовностью делайте «патриотические» комментарии.

3. По возможности отправляйте все вопросы в комитеты для «более глубокого изучения и рассмотрения». Стремитесь собирать комитеты как можно больше, не менее чем из пяти членов.

4. Как можно чаще поднимайте вопросы о несущественных проблемах.

5. Спорьте о чётких формулировках в общении, протоколах, резолюциях.

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

7. Советуйте «быть аккуратными». Будьте «разумны» и подталкивайте других участников совещаний к «разумности», к тому, чтобы они избегали спешки, которая может в будущем вызвать неудобства или сложности.

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

👉 @seniorFront

Electrified button

Внутри кнопки находится svg картинка, анимируемая библиотекой gsap.

👉 @seniorFront

border animation on hover

Создано на HTML и CSS. Граница сделана при помощи псевдо-элементов.

👉 @seniorFront

Water Wave

В этом видео создаётся анимация текста на HTML и CSS.

👉 @seniorFront

👉 @seniorFront

button hover animation

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

👉 @seniorFront

Animated Atom Logo

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

👉 @seniorFront

2024 Modern Buttons

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

👉 @seniorFront

Threads ticket with Hologram Effect

Вёрстка реализована на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront

Пагинатор

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

Необходимо дописать 4 метода:
.pageCount() - возвращает количество страниц
.itemCount() - возвращает количество элементов
.pageItemCount({page}) - возвращает количество элементов на странице под номером page
.pageIndex({index}) - возвращает страницу, на которой располагается элемент с индексом index (номер страницы начинается с 0)

👉 @seniorFront

Jigsaw puzzle

Игра-пазл, реализованная на чистом JS.

👉 @seniorFront

​Что такое SSR (рендеринг на стороне сервера)?

Серверная визуализация (SSR) — это метод, используемый для рендеринга страниц на сервере и отправки полностью визуализированной страницы клиенту для отображения. Он позволяет серверу генерировать полную HTML-разметку веб-страницы, включая ее динамическое содержимое, и отправлять ее клиенту в качестве ответа на запрос.

При традиционном подходе к рендерингу на стороне клиента клиент получает минимальную HTML-страницу, а затем делает дополнительные запросы к серверу за данными и ресурсами, которые используются для рендеринга страницы на стороне клиента. Это может привести к замедлению начальной загрузки страницы и негативно повлиять на поисковую оптимизацию (SEO), поскольку поисковые роботы испытывают трудности с индексированием контента на основе JavaScript.

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

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

👉 @seniorFront

AI Toggle

Это svg картинка, анимируемая библиотекой gsap.

👉 @seniorFront

​Техники обучения, которые вошли в мою рутину

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

Оглавление
Для меня все начинается с составления плана обучения. Это просто список тем, которые я хочу изучить. Он позволяет мне оценить время, требуемое для изучения; отсортировать темы; приоритизировать их; увидеть зависимости между ними.

Подготовка
На день для изучения выбираю две темы. Обычно я стараюсь перемежать теорию с более практической задачей. Это позволяет мне отдохнуть от теории и переключиться. Я беру именно несколько тем для изучения и когда осознаю, что поняла материал, переключаюсь на другую тему. Я не пытаюсь сразу выучить всё, чтоб "от зубов отскакивало", для этого нужно время, чтобы материал уложился в голове. Главная идея откладывания в том, чтобы дать это время.

Чтение и конспект
Во время чтения я подчеркиваю или выписываю ключевые слова. Я не выделяю определения, чтобы не превращать текст в цветное полотно. Также я переписываю основные идеи, определения, алгоритмы. Для этого я использую приложение Anki. В приложении можно создавать карточки, плагины позволяют делать ссылки на другие карточки

Майнд-мап
Если в анки я храню подробные конспекты, то для быстрой ориентации по материалу я использую майнд-мапы. Манд-мапа - это схема, в которой в центре выписывается основное понятие и от него расходятся линии к другим связанным понятиям. Для составления манд-мапы понадобится список ключевых слов, который был сделан во время чтения.

Повторение
Для повторения я не нашла ничего лучше, чем классическое интервальное повторение - сначала вечером, затем на следующий день, через 3 дня и через неделю. В дальнейшем стараюсь повторять раз в несколько месяцев. Для повторения я использую майнд-мапы. Мне проще отмечать дату в уголке на майнд-мапе.

👉 @seniorFront

You have mail!

Реализовано при помощи псевдо-3Д движка Zdog.js

👉 @seniorFront

Animated Slider

Слайдер реализован при помощи библиотеки Swiper.js. Анимированные частицы созданы библиотекой Particles.js

👉 @seniorFront

CSS Transforming Circle Loader

В этом видео создаётся простой loader на чистом CSS.

👉 @seniorFront

👉 @seniorFront

CSS Scroll-Driven Glow Cards

Анимация реализована при помощи gsap. Запуск осуществляется плагином ScrollTrigger.

👉 @seniorFront