Жидкие кнопки для вашего сайта

Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.

Посмотреть код и забрать их к себе в проект можно тут:

https://codepen.io/Zaku/pen/eRmRxz

#codepen #ui #фронтенд

Главная фронтенд-конференция на подходе

15 февраля Яндекс традиционно объединит frontend-сообщество в Москве на конференции «Я 💛 Фронтенд». Вас ждут: 

— доклады топовых спикеров;

— соревнование по вёрстке вместе с Семёном Левенсоном из Яндекс Маркета;

— знакомство с интеллектуальным помощником разработчика Yandex Code Assistant;

— мастермайнды с экспертами Яндекса, которые готовы погрузиться в технические и архитектурные проблемы участников;

— много нетворка и просто хорошая атмосфера.

Вплоть до конференции можно принять участие в онлайн-активностях на сайте — там же регистрируемся на офлайн-ивент до 12 февраля.

Топовые инструменты для фронтенд-разработки в 2025 году

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

Изучаем по ссылке, а в комментариях делимся своим топом!

#фронтенд

Уверены, что знаете CSS Flexbox достаточно хорошо?

Мы подготовили тест, в котором можете проверить, насколько хорошо вы понимаете концепции и свойства Flexbox, которые делают его таким мощным инструментом: https://tproger.ru/articles/css-flexbox-test

Проходите и делитесь своим результатом в комментариях!

#css

А бэкенд тогда для чего?

Как работает буфер обмена и как в нём хранятся данные

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

На примере работы буфера обмена в вебе и его API мы узнаем, как он устроен, как хранит данные разных форматов, а также как он взаимодействует с буферами операционных систем. Переходите по ссылке и читайте: https://alexharri.com/blog/clipboard

Подборка инструмент для всех, кто хоть иногда думает

Untools — это коллекция фреймворков и инструментов, которая поможет вам решать проблемы, принимать решения и прокачать системность.

Здесь нет ИИ, это просто концепции и методологии, которые вы можете изучить и применять в работе или повседневной жизни. Всё понятно расписано, содержит иллюстрации и примеры.

Короче, кто думает, тот оценит лайком и заберёт в Избранное. Остальные просто пройдут мимо. 😏

#инструменты

10 библиотек JavaScript, которые можно забыть в 2025 году

Позавчера мы рассказали про инструменты, которые будут полезны в 2025 году всем фронтенд-разработчикам. Сегодня же поделимся библиотеками, которые точно не стоят вашего времени. Они устарели и имеют множество более современных альтернатив.

Подробнее о них в статье.

#javascript

Хватит обижать джаваскриптеров!

Вы же наверняка видели, а возможно и участвовали, в этих срачах дискуссиях по поводу того, какой язык лучше. И самыми частыми аргументами против JS являются слабая типизация, «непредсказуемое» поведение при сложении разных типов и прочее подобное.

Но ведь на самом деле всё это есть и в некоторых других языках в том или ином виде. Более того, все эти «недостатки» могут быть и преимуществами в некоторых ситуациях.

Подробнее обо всём этом можно размышляют в коротком, но интересном ролике.

#видео #javascript

Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btn

querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";

Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "<strong>Важное сообщение!</strong>";

insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.

title.insertAdjacentHTML("beforeend", "<span> 👋</span>");

3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)

4. Изменение стилей

Не стоит вручную писать style.cssText, потому что он затирает всё, что было до этого. Используйте style для отдельных свойств.

title.style.color = "red";
title.style.fontSize = "24px";

Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.

title.classList.add("error"); // В CSS заранее определите .error { color: red; }

5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");  
document.body.appendChild(newDiv); // Добавляем в конец <body>

Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title

// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));

6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM

Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход

7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Кнопка нажата!");
});

Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

#простымисловами #фронтенд

Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Кто понял, тот понял. А кто всё ещё не может разобраться о чём идёт речь и что это за @scope вообще такой, то скорее переходите по ссылке и читайте подробности этого подхода стилизации HTML-элементов.

#фронтенд #html #css