Анимированная кнопка с различными эффектами свечения. Сделана на CSS, Svg и JavaScript.
Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Узнайте, как использовать хуки 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
У вас есть базовые знания HTML и CSS, но вы не уверены, как «оживить» сайт с помощью JavaScript?
На открытом уроке 26 августа в 20:00 МСК мы разберём, как использовать JavaScript для работы с DOM, создавать динамичные элементы и анимации, и всё это без фреймворков! На вебинаре мы создадим мини-проект — интерактивную карточку, которая будет реагировать на действия пользователя.
❗️ Изучив основы работы с JavaScript и DOM, вы сможете самостоятельно управлять интерактивными элементами на сайте. Получите полезные навыки, которые сразу сможете применить на практике и добавить в портфолио.
👉 Запишитесь на открытый урок → https://vk.cc/cONB9m
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
😁1
Как Всемирная паутина изменила мир? В статье рассказывается о ключевых этапах эволюции 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
👉 Востребованное обучение для разработчиков с опытом программирования от года, которые хотят получить навыки написания кода и аудита безопасности, чтобы попасть в одну из самых перспективных и высокооплачиваемых сфер IT.
Освойте разработку децентрализованных приложений на профессиональном уровне всего за 5 месяцев на онлайн-курсе «Solidity Developer» от OTUS!
Забудьте о скучном обучении — здесь вас ждут настоящие челленджи и нестандартные практические решения. А еще крутые проекты для портфолио!
👉 Пройдите вступительные тест для оценки подходит ли вам курс: https://vk.cc/cOPfvu
🎁 Получите welcome скидку для успешное прохождение теста. Подробности уточняйте у менеджера.
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
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 библиотеках с открытым исходным кодом, которые улучшат ваш проект.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Из этой статьи вы узнаете, что собой представляет ключевое слово this в JavaScript и как оно ведет себя в разных юзкейсах.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🧹 Убирай мусор сразу
Оставленные console.log, временные файлы и старые TODO кажутся безобидными, но они делают проект грязным и замедляют чтение кода.
👉 Совет: внедри правило: закончил задачу — оставь проект чище, чем он был. Даже мелочи в сумме дают огромную разницу в удобстве работы.
Оставленные console.log, временные файлы и старые TODO кажутся безобидными, но они делают проект грязным и замедляют чтение кода.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍3😁2
Как настроить библиотеку пакетов AutoRoute? Как назвать страницы маршрута? Как управлять стеком и полностью очищать его, чтобы возвращаться на первую экранную страницу? Предлагаем краткое руководство по навигации во Flutter - оно даст ответы на эти и многие другие вопросы.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
Расскажем о такой эффективной технике в JavaScript, как каррирование. Продемонстрируем на практических примерах принцип ее действия и преимущества.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Определите функцию, которая принимает целочисленный аргумент и возвращает логическое значение 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
• Tuner — гибкий конфигуратор проекта as code для Deno
• Yaml — король мета-описаний
• «От идеи и до продакшена»: как разработать веб-приложение и загрузить в VK Mini Apps
• Магия CSS на практике: советы по вёрстке от гика. Часть 3
• Атрибут charset и важность его использования
Please open Telegram to view this post
VIEW IN TELEGRAM
Вокруг React Hooks так и вьются постоянные интриги и расследования. Разберемся, что за штуки такие – эти useCallback, useMemo и прочие.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👎2😁2👍1
Завершите функцию/метод так, чтобы он возвращал 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!
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Анимированная кнопка с эффектом при наведении. Сделана на чистом CSS.
Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
Как изменить CSS-стили? Ответ очевиден — отредактировать CSS-файл. Возможно, после этого понадобится компиляция.
Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1👎1
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