Фронтенд Гайд

⚡️ Ouroborus — CSS only

Крутая анимированная сцена, выполненная с помощью Pug и SCSS, без использования JavaScript.

🖥 Анимированный контур кнопки для HTML-элемента, который останавливается при наведении на неё.

Эффект неонового свечения, подойдет для темной темы приложения.

​​Turrit - на основе Telegram
(для iOS и Android)

Turrit является бесплатным сторонним клиентом, разработанным на основе Telegram API. В нем:
🔅 AI-переводчики
🚀 ускорение загрузки в 20 раз
💭 неограниченное облачное хранилище
🌏 онлайн-просмотр видео TikTok
💫 элегантный и простой интерфейс
⛓ защита безопасности и конфиденциальности

В настоящее время у Turrit уже более 100 000 ежедневных активных пользователей. В России он также пользуется признанием, вот в форуме 4PDA идет горячее обсуждение.

Скачать можно в Google Play и App Store.
Присоединяйтесь к официальной группе Turrit!

⚡️ Demo:Input Field Animation Floating Label | HTML & CSS

При вводе данных поле становится объёмным.

Господи, да в чём проблема стать фронтендером?

Подписался на эти три канала:

👉 Фронтенд
👉 Верстка
👉 Node.JS

Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ!

Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

🤔 В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

🚩Event Loop в браузере

В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

🟠DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

🟠Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

🟠Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

🟠UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

🚩Event Loop в Node.js

Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

🟠Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.
🟠Timers
Эта фаза обрабатывает колбэки от setTimeout и setInterval.
🟠I/O callbacks
Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
🟠Poll
Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
🟠Check
Обрабатывает колбэки от setImmediate.
🟠Close callbacks
Обрабатывает колбэки от закрытия всех I/O операций.
🟠Microtasks (process.nextTick и Promises)
Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

🚩Различия

🟠Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

🟠Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

🟠Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

🟠Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

Как работают map, reduce и filter ?
Спросят с вероятностью 7%

map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом.

Метод map

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию.
✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled.

Метод reduce

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию, которая обновляет аккумулятор.
✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0.

Метод filter

Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию-условие.
✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

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

✅map: создает новый массив, преобразуя каждый элемент по заданной функции.
✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу.
✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию.

🖥 Бесплатный фоновый ремувер заднего фона, работающий в вашем браузере на базе WebGPU (с использованием transformer.js)

Кубик крутится - страница грузится 🤪

Прелоадер с простым эффектом вращения куба, выполненный без JS.

p.s. буквы на сторонах куба можно менять на свои.

Успей ухватить 7 дней бесплатного обучения фронтенд-разработке!

🔥 С нас обучение, практика и помощь с выходом на фриланс.

Скоро Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью.

На эти 7 дней план такой:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг;
- Получишь советы по доработке своего проекта.

В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.

👉 Забрать бесплатно 7 дней обучения frontend-разработке

А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.

🖥 Интересная идея для прелоадера страницы на чистом CSS

Фигурки тетриса бесконечно складываются в правильном порядке — выглядит довольно оригинально
Может неплохо сказаться на конверсии

⚡️ Анимация Пикачу в коробке

Анимированный пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:

🤔 Почему нельзя отправлять в get запросах чувствительную информацию?

🟠URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.

🟠Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.

🟠Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.

🟠Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.

🟠Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.

🟠HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).

🚩Использование POST-запросов в качестве альтернативы

Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Secure Form</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

🖥 Если навести мышь на изображение, то можно увидеть, что за ним скрывается текст.

Разработай прорывное решение для автоматического Code Review с помощью ИИ на хакатоне ЕВРАЗа 3.0🔥

🦾 Создай будущее Code Review с ИИ! 

Участвуйте в нашем уникальном хакатоне по созданию ИИ-чатбота, который станет незаменимым помощником для разработчиков ЕВРАЗа! Выберите одно из направлений — Python, TypeScript или C#, и разработайте решение для анализа кода на соответствие нашим стандартам. 

Дата: 29 ноября – 1 декабря 2024.
Формат: гибридный (онлайн и офлайн).
Призовой фонд: 500.000 рублей.

🧑‍💻 Присоединяйся к хакатону, если ты:
– AI-специалист;
– Frontend / Backend-разработчик;
– Студент или выпускник технического вуза.

⚡️ Зачем участвовать?
– Прокачаешь скиллы и получишь обратную связь от ведущих экспертов отрасли.
– Прикоснешься к ИТ в ЕВРАЗе.
– Получишь возможность стать частью масштабной и амбициозной команды ЕВРАЗа.

🔸 Регистрация уже открыта! Подай заявку до 25 ноября 23:59 МСК по ссылке.

🖥 Material Input Animation

Заголовок поля смещается как только начинают вводить данные.

Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.

В новом выпуске подкаста «Времена НаСтали» руководитель отдела frontend-разработки Олег Рогов и руководитель команды дизайна Анна Труфанова рассказали о low-code решениях в веб-дизайне.
Технология использования платформ позволяет создавать приложения без глубоких знаний в области программирования. Такой подход полезен, если к разработке веб-интерфейсов нужно привлечь бизнес-аналитиков или экспертов из другой нетехнической области.
В подкасте ответили на следующие вопросы.
— Как low-code влияет на процесс дизайна?
— В чем главные преимущества использования этих инструментов по сравнению с традиционными методами разработки?
— Нужно ли иметь базовые знания программирования?
— Каковы текущие тенденции и будущее развитие low-code инструментов в контексте дизайна?

Слушать подкаст на Яндекс.Музыке!

Как получить реальный опыт во фронтенд-разработке за 7 дней?

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

📌 Как задать последовательность выполнения скриптов?

Последовательность выполнения скриптов можно контролировать несколькими способами:

1️⃣ Порядок размещения в HTML:

Скрипты выполняются в порядке их появления в документе.

   <script src="script1.js"></script>
   <script src="script2.js"></script>
   

2️⃣ Атрибут defer:

Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.

   <script src="script1.js" defer></script>
   <script src="script2.js" defer></script>
   

3️⃣ Атрибут async:

Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.

   <script src="script1.js" async></script>
   <script src="script2.js" async></script>

⚡️Всероссийский Хакатон ФИЦ 2024

🚀Попробуйте себя в одном из предложенных кейсов:
- Информационная система управления проектами в строительстве
- Выявление трендов в сфере бухгалтерского учета
- Разработка модуля классификации опор ЛЭП
- Погонщик нейронок
- Оценка уровня экспертности по резюме
- Контекстный перевод названий научных работ
- Прогнозирование бизнес драйверов
- Формирование фото и видео контента с использованием нейросетей на основе биографии и фото персоны
- Разработка алгоритма трекинга людей в видеопотоке с нескольких камер
- Цифровая карта подземных коммуникаций с использованием Cesium
- Симуляция записи в расписание
- Цифровой сервис для ведения реестра зеленых насаждений города Москвы
- Предсказание необходимого количества средств досмотра
- Система контроля и управления доступом
- Семантический делитель текстов
- Разработка сервиса печати этикеток для производителей одежды
И др. кейсы смотрите на сайте: https://фиц2024.рф/hackathon

Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.

🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 26 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря

Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon

Реклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid: 2Vtzqvam3wk

💻 ГОТОВЫЕ СТИЛИ ДЛЯ ВЕБ-РАЗРАБОТКИ НА КАНАЛЕ WEB BEKS

✅ Готовые шаблоны для вашего сайта

✅ Решения по HTML, CSS, и JavaScript, которые можно сразу использовать

✅ Оптимизированный код для современных веб-проектов

✅ Инструкции и примеры для новичков и профессионалов

Подписывайся и экономь время на разработку!

ZUMA

Легендарная игра, реализованная на HTML, SCSS и TypeScript.

В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻

Что такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?

Обо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»

Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️

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

Какими свойствами обладает порождаемое equals() отношение эквивалентности?

- Рефлексивность: для любой ссылки на значение x, x.equals(x) вернет true;

- Симметричность: для любых ссылок на значения x и y, x.equals(y) должно вернуть true, тогда и только тогда, когда y.equals(x) возвращает true.

- Транзитивность: для любых ссылок на значения x, y и z, если x.equals(y) и y.equals(z) возвращают true, тогда и x.equals(z) вернёт true;

- Непротиворечивость: для любых ссылок на значения х и у, если несколько раз вызвать х.equals(y), постоянно будет возвращаться значение true либо постоянно будет возвращаться значение false при условии, что никакая информация, используемая при сравнении объектов, не поменялась.

Для любой ненулевой ссылки на значение х выражение х.equals(null) должно возвращать false.

🖥 Material Input Animation

Заголовок поля смещается как только начинают вводить данные.

Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.

Что такое прототипное наследование ?

Прототипное наследования — это механизм, с помощью которого объекты могут наследовать свойства и методы от других объектов. Это одна из основных особенностей языка JavaScript, отличающая его от классических моделей наследования, используемых во многих других языках программирования.

Как это работает

Каждый объект имеет специальное скрытое свойство [[Prototype]] (как правило, доступное как proto или через Object.getPrototypeOf()), которое ссылается на другой объект — его прототип. Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство/метод не найдено в самом объекте, поиск продолжается по цепочке прототипов, пока свойство/метод не будет найден или не будет достигнут конец цепочки прототипов (прототип null).

Пример:

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  proto: animal
};

rabbit.walk(); // Animal walk
console.log(rabbit.eats); // true

В этом примере объект rabbit наследует свойство eats и метод walk от объекта animal через прототипную цепочку.

Основные принципы

1️⃣ Прототипная цепочка: Когда вы обращаетесь к свойству объекта, автоматически ищет это свойство в объекте, а затем — в его прототипах, пока не достигнет конца цепочки прототипов.
2️⃣ Object.prototype: В вершине прототипной цепочки находится Object.prototype. Он не имеет прототипа и содержит методы, доступные всем объектам, такие как toString(), hasOwnProperty() и другие.
3️⃣ Создание объектов с определённым прототипом: Для создания объектов с указанием прототипа можно использовать Object.create(proto), где proto — объект, который должен стать прототипом для нового объекта.

Отличия от классического наследования

В отличие от него, прототипное наследование не использует классы как таковые (до введения class в ES6, которые являются "синтаксическим сахаром" над прототипным наследованием). Вместо этого объекты напрямую наследуют свойства и методы от других объектов.

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

Changing background colour with CSS - Ползунок с изменением заднего фона сайта.

🙈 Ты не дизайнер, если игнорируешь эти каналы:

Сейф-Дизайнера, где собрали около 3 тысяч материалов: 3D-элементов, текстур, иконок, фонов, иллюстраций. Всё в НD.

Шрифтовик, куда слили тысячу шрифтов под любой дизайн. Теперь нужно меньше 5 минут, чтобы подобрать пару.

design teacher — база туториалов, гайдов и кейсов. Учись у лучших, пока это бесплатно.

Мокапы для дизайнера, чтобы презентовать проект на день раньше и срубить высокий чек.

Здесь про Figma — научишься делать в фигме всё от а до я.

Здесь про Photoshop — самый популярный редактор прямо в твоём телеграме! Гайды, макеты, шаблоны и многое другое ждут тебя здесь.

Обычно эти каналы закрыты, но на 24 часа открыт доступ для каждого. Поспеши ⏰

🖥 HiveSpace Write, Draw and Plan All at Once

HiveSpace - это универсальный рабочий инструмент с открытым исходным кодом на JS и операционная система для всех компонентов, из которых состоит ваша база знаний , заметок, майндмапов и многое другое - wiki, управление знаниями, презентации и цифровые ресурсы.

Это лучшая альтернатива Notion и Miro.

7 дней бесплатного обучения frontend-разработке!

🔥 Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью и куратором.

За 7 дней ты:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.

В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.

Ухватить бесплатно такой ценный материал можешь по ссылке 👉 Frontend Start

После подтверждения участия получишь в подарок чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.

Как работают map, reduce и filter ?
Спросят с вероятностью 7%

map, reduce и filter — это методы массивов, которые позволяют обрабатывать и трансформировать массивы функциональным способом.

Метод map

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию.
✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled.

Метод reduce

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию, которая обновляет аккумулятор.
✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0.

Метод filter

Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию-условие.
✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

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

✅map: создает новый массив, преобразуя каждый элемент по заданной функции.
✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу.
✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию.

🖥 Rotating border

Граница сделана из псевдоэлементов, которые анимируются в CSS.

🤕 Прямо сейчас в репозиториях содержится 22 тысячи опасных зависимостей

И это только в пакетном менеджере для Python

Проблема шире, чем кажется. Вы уверены, что в вашем коде нет имплантов?

🔐 Пора защитить себя и свои разработки. Нашли личный канал эксперта по информационной безопасности

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

Не только полезно, но интересно для любого представителя IT-сферы

⚡️ ПОДПИСАТЬСЯ

Floating Squares — фоновая анимация в виде плывущих вверх квадратов. Реализован с помощью CSS