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

RGB → Hex

Необходимо написать функцию, которая принимает десятичные значения RGB кода цвета и возвращает этот код цвета в формате HEX. Допустимыми десятичными значениями RGB являются 0-255. Любые значения, которые выходят за этот диапазон, должны быть округлены до ближайшего допустимого значения.
Обратите внимание: ваш ответ должен быть всегда 6 символов длиной, сокращенный вариант с 3 символами здесь не будет работать.

Примеры:
rgb(255, 255, 255) должна возвращать FFFFFF
rgb(255, 255, 300) должна возвращать FFFFFF
rgb(0, 0, 0) должна возвращать 000000
rgb(148, 0, 211) должна возвращать 9400D3

👉 @seniorFront

SVG Calculator Dial

Вся сцена - это svg картинка, стилизованная в SCSS и анимированная библиотекой gsap.

👉 @seniorFront

​Как определить наличие свойства в объекте?

В JavaScript есть несколько способов определить наличие свойства в объекте.

Оператор in: Можно использовать оператор in, чтобы проверить наличие свойства в объекте или его прототипе.

 const obj = { name: 'John', age: 30 };
 console.log('name' in obj); // true
 console.log('city' in obj); // false

Метод hasOwnProperty(): Метод hasOwnProperty() проверяет, содержит ли объект указанное свойство и не учитывает свойства в прототипе объекта.

 const obj = { name: 'John', age: 30 };
 console.log(obj.hasOwnProperty('name')); // true
 console.log(obj.hasOwnProperty('city')); // false

Сравнение со значением undefined: Можно сравнить значение свойства с undefined, чтобы определить его наличие.

 const obj = { name: 'John', age: 30 };
 console.log(obj.name !== undefined); // true
 console.log(obj.city !== undefined); // false

Использование Object.keys(): Можно использовать метод Object.keys() для получения массива всех свойств объекта и затем проверить наличие свойства в этом массиве.
const obj = { name: 'John', age: 30 };
console.log(Object.keys(obj).includes('name')); // true
console.log(Object.keys(obj).includes('city')); // false

👉 @seniorFront

Процесс заказной разработки можно унифицировать так, что качество продукта не пострадает, а developer experience улучшится. Об этом в своей статье пишет Тимофей Устьянцев 一 фронт-тимлид крупного веб-продакшена ДАЛЕЕ. Тимофей уже несколько лет работает над проектами Kaspersky, X5, IQOS и СБЕР, и теперь делится опытом в цикле статей.

Читайте первую статью на Хабре и переходите на канал ДАЛЕЕ 一 там посты с полезными приемами и инструментами для специалистов диджитала, советы по карьерному развитию и свежие вакансии каждый понедельник 🤟

Реклама. Erid LjN8KEPBB

Infinitely drawing icons

Вся сцена - это svg картинка, анимируемая библиотекой anime.js

👉 @seniorFront

​Что делает фронтенд-разработку интересным и сложным процессом, требующим постоянного обучения и развития?

Рост технологий. С каждым годом появляется всё больше новых технологий, фреймворков, библиотек и инструментов для разработки фронтенда. Это создаёт огромное разнообразие выбора, но и требует от разработчиков постоянного изучения и адаптации к новым решениям.

Развитие веб-стандартов. Стандарты веб-разработки тоже постоянно совершенствуются, чтобы обеспечить более безопасные, производительные и доступные веб-приложения. Следование этим стандартам становится обязательным, что повышает сложность в разработке.

Мобильные устройства и адаптивный дизайн. С появлением мобильных устройств стало важным создавать фронтенд, который отлично работает на различных экранах. Адаптивный дизайн и мобильная оптимизация требуют дополнительных усилий и знаний.

Комплексность приложений. Современные веб-приложения становятся всё сложнее и масштабнее. Они должны обеспечивать богатый пользовательский опыт (UX — user experience), взаимодействие с сервером, обработку данных и множество других функций, что требует более сложных архитектурных решений.

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

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

👉 @seniorFront

React Glow Cards – Minimal

Реализовано на React. Кастомный хук usePointerGlow отслеживает положение курсора пользователя и устанавливает значения CSS переменным.

👉 @seniorFront

Bouncy Balloon

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

👉 @seniorFront