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

Animated Card

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

👉 @seniorFront

Javascript Scroll Animation

В этом видео создаётся анимация, которая активируется при скроле. Для этого создаётся обработчик события scroll, в котором изменяется значение CSS свойства clip-path целевого элемента

👉 @seniorFront

Encrypted Password Reveal

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

👉 @seniorFront