Senior Frontend - javascript, html, css
25.7K subscribers
1.27K photos
2.25K videos
690 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
Какой цвет фона у элемента div?
Anonymous Quiz
32%
green
17%
blue
51%
red
👍20👎17🤨7👏3😐3
Media is too big
VIEW IN TELEGRAM
Animated Login Page

В этом видео создаётся анимированная форма входа на HTML и CSS.

👉 @seniorFront
🔥4👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Effect

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

👉 @seniorFront
4
Persistent Bugger

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

Пример:
39 --> 3
(because 3*9 = 27, 2*7 = 14, 1*4 = 4 )

999 --> 4
(because 9*9*9 = 729, 7*2*9 = 126, 1*2*6 = 12, 1*2 = 2)

👉 @seniorFront
👍41
This media is not supported in your browser
VIEW IN TELEGRAM
Timed Cards Opening

Свёрстано на HTML и SCSS. Анимировано при помощи библиотеки gsap.

👉 @seniorFront
👍16🔥94
Какие архитектурные решения для React вы знаете?

Существует несколько архитектурных решений и паттернов для построения React-проектов. Вот некоторые из них:
MVC (Model-View-Controller) — это традиционный архитектурный шаблон, который разделяет приложение на три основных компонента — модель, представление и контроллер. React можно использовать на уровне View для рендеринга пользовательского интерфейса, в то время как другие библиотеки или фреймворки могут быть использованы для уровней Model и Controller.

Flux — это архитектура приложений, представленная специально для приложений React. Он следует однонаправленному потоку данных, в котором данные передаются в одном направлении, что упрощает понимание и отладку изменений состояния приложения.

Atomic Design — не является специфичным для React, а представляет собой методологию проектирования, которая делит пользовательский интерфейс на более мелкие, многократно используемые компоненты. Он поощряет создание небольших, самодостаточных компонентов, которые могут быть скомпонованы для создания более сложных пользовательских интерфейсов.

Шаблон контейнера и компонента — отделяет представление (Component) от логики и управления состоянием (Container). Компоненты отвечают за рендеринг пользовательского интерфейса, в то время как контейнеры обрабатывают бизнес-логику и управление состоянием.

Feature-Sliced Design — Это современный архитектурный подход, используемый для организации и структурирования приложений React. Он направлен на решение проблем масштабируемости, удобства обслуживания и повторного использования путем разделения кодовой базы приложения на основе функций или модулей.

👉 @seniorFront
🔥14👍74👎1😐1
Media is too big
VIEW IN TELEGRAM
Image slider ripple effect

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

👉 @seniorFront
👍8🔥2👎1😁1💯1
Простой саботаж в мире ПО

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

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

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

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

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

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

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

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

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

👉 @seniorFront
👍9😁43😐3👎2💯1🤨1
This media is not supported in your browser
VIEW IN TELEGRAM
Electrified button

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

👉 @seniorFront
13👍2
This media is not supported in your browser
VIEW IN TELEGRAM
border animation on hover

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

👉 @seniorFront
🔥22👍31
Media is too big
VIEW IN TELEGRAM
Water Wave

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

👉 @seniorFront
🔥12👍3
This media is not supported in your browser
VIEW IN TELEGRAM
button hover animation

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

👉 @seniorFront
👍41🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Atom Logo

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

👉 @seniorFront
🔥17👍103😁1
Какая из функций CSS transform используется для изменения размеров элемента?
Anonymous Quiz
8%
matrix()
7%
perspective()
85%
scale()
👍13
Media is too big
VIEW IN TELEGRAM
2024 Modern Buttons

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

👉 @seniorFront
🔥12👎2🤨2😐2👍1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Threads ticket with Hologram Effect

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

👉 @seniorFront
👍51🔥1
Пагинатор

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

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

👉 @seniorFront
👍71👏1😐1
This media is not supported in your browser
VIEW IN TELEGRAM
Jigsaw puzzle

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

👉 @seniorFront
👍342👏2
Что такое SSR (рендеринг на стороне сервера)?

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

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

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

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

👉 @seniorFront
👍102