Frontender's notes [ru]
34.4K subscribers
463 photos
29 videos
1 file
3.29K links
Годные статьи для Frontend разработчиков
HTML, CSS, JS, React, Angular, Vue, TypeScript, Redux, MobX, NodeJS.

Чаты: @frontend_ru, @javascript_ru

По вопросам рекламы или разработки:
@g_abashkin

РКН: https://vk.cc/cJPG6y
Download Telegram
👩‍💻 Multiple Glow effects Button

Анимированная кнопка с различными эффектами свечения. Сделана на CSS, Svg и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
➡️ Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

Узнайте, как использовать хуки React (useTransition, useDeferredValue и useOptimistic) для создания более отзывчивых интерфейсов. Советы, примеры и приёмы для плавной работы с данными!

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
3
Хотите научиться создавать интерактивные элементы на сайте, используя только чистый JavaScript?

У вас есть базовые знания HTML и CSS, но вы не уверены, как «оживить» сайт с помощью JavaScript?

На открытом уроке 26 августа в 20:00 МСК мы разберём, как использовать JavaScript для работы с DOM, создавать динамичные элементы и анимации, и всё это без фреймворков! На вебинаре мы создадим мини-проект — интерактивную карточку, которая будет реагировать на действия пользователя.

❗️ Изучив основы работы с JavaScript и DOM, вы сможете самостоятельно управлять интерактивными элементами на сайте. Получите полезные навыки, которые сразу сможете применить на практике и добавить в портфолио.

👉 Запишитесь на открытый урокhttps://vk.cc/cONB9m

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
😁1
⚙️ Краткая история WWW от фронтенд-разработчика

Как Всемирная паутина изменила мир? В статье рассказывается о ключевых этапах эволюции WWW — от первых страниц до современных технологий — глазами фронтенд-разработчика.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👎2👍1
💪 Хотите работать в финтехе? Освойте Solidity!

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

Освойте разработку децентрализованных приложений на профессиональном уровне всего за 5 месяцев на онлайн-курсе «Solidity Developer» от OTUS!

Забудьте о скучном обучении — здесь вас ждут настоящие челленджи и нестандартные практические решения. А еще крутые проекты для портфолио!

👉 Пройдите вступительные тест для оценки подходит ли вам курс: https://vk.cc/cOPfvu

🎁 Получите welcome скидку для успешное прохождение теста. Подробности уточняйте у менеджера.

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают?

Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов.

➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
<style>
p {
color: blue;
}
</style>
<p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)


🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.


🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
⚙️ 9 open source библиотек для вашего следующего проекта

Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же.

В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Ключевое слово this в JavaScript

Из этой статьи вы узнаете, что собой представляет ключевое слово this в JavaScript и как оно ведет себя в разных юзкейсах.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🧹 Убирай мусор сразу

Оставленные console.log, временные файлы и старые TODO кажутся безобидными, но они делают проект грязным и замедляют чтение кода.

👉 Совет: внедри правило: закончил задачу — оставь проект чище, чем он был. Даже мелочи в сумме дают огромную разницу в удобстве работы.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3😁2
⚙️ Навигация во Flutter с использованием AutoRoute

Как настроить библиотеку пакетов AutoRoute? Как назвать страницы маршрута? Как управлять стеком и полностью очищать его, чтобы возвращаться на первую экранную страницу? Предлагаем краткое руководство по навигации во Flutter - оно даст ответы на эти и многие другие вопросы.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Техника каррирования в JavaScript: суть, преимущества, примеры

Расскажем о такой эффективной технике в JavaScript, как каррирование. Продемонстрируем на практических примерах принцип ее действия и преимущества.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Is a number prime?

Определите функцию, которая принимает целочисленный аргумент и возвращает логическое значение true или false в зависимости от того, является ли целое число простым.

Натуральное число, большее 1, у которого нет положительных делителей, кроме 1 и самого себя.

Требования
• Вы можете предположить, что вам будет предоставлен целочисленный ввод.
• Вы не можете предполагать, что целое число будет только положительным. Вам • также могут быть даны отрицательные числа ( или 0 ).

Пример кода:

is_prime(1)  /* false */
is_prime(2) /* true */
is_prime(-1) /* false */


Решение задачи🔽

function isPrime(num) {
if (num <= 1) {
return false;
}

if (num === 2) {
return true; // 2 - единственное четное простое число
}

if (num % 2 === 0) {
return false; // исключаем все четные числа, кроме 2
}

// Проверка делимости от 3 до квадратного корня из num
for (let i = 3; i <= Math.sqrt(num); i += 2) {
if (num % i === 0) {
return false;
}
}

return true;
}

// Примеры использования
console.log(isPrime(1)); // false
console.log(isPrime(2)); // true
console.log(isPrime(-1)); // false
console.log(isPrime(17)); // true
console.log(isPrime(18)); // false
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍1
👩‍💻 Демистификация хуков React: useCallback, useMemo и все-все-все

Вокруг React Hooks так и вьются постоянные интриги и расследования. Разберемся, что за штуки такие – эти useCallback, useMemo и прочие.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👎2😁2👍1
👩‍💻 Remove anchor from URL

Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#).

Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"


Решение задачи🔽


function removeUrlAnchor(url) {
return url.split('#')[0];
}

// Примеры использования
console.log(removeUrlAnchor("
www.codewars.com#about")); // "www.codewars.com"
console.log(removeUrlAnchor("
www.codewars.com?page=1")); // "www.codewars.com?page=1"
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1👎1
👩‍💻 В чем разница между : и :: в CSS?

Возможно, это будет последний раз, когда вам пришлось гуглить разницу между : и :: в CSS!

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
👩‍💻 Shiny call-to-action button

Анимированная кнопка с эффектом при наведении. Сделана на чистом CSS.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Как изменить CSS-стили при помощи JavaScript

Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1👎1
⚙️ Что такое event delegation в JavaScript и зачем его использовать?

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

➡️ Пример:

// Родительский элемент
const parent = document.querySelector('#parent');

// Используем делегирование
parent.addEventListener('click', (event) => {
if (event.target.matches('.child')) {
console.log(`Клик по элементу: ${event.target.textContent}`);
}
});

// Динамическое добавление дочерних элементов
const newChild = document.createElement('div');
newChild.className = 'child';
newChild.textContent = 'Новый элемент';
parent.appendChild(newChild);


🗣️ В этом примере обработчик событий на родительском элементе обрабатывает клики по дочерним элементам, включая добавленные динамически. Это упрощает код и повышает производительность.


🖥 Подробнее тут
Please open Telegram to view this post
VIEW IN TELEGRAM