Веб-страница
23 февраля 2025 09:41
Борьба с перерендерами в React
На тему мемоизации написано много статей, и все они хорошо раскрывают суть. Но если вам, как и автору этой статье, не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?», то вы по адресу.
Здесь вы найдёте ответы на самые частые вопросы и даже на специфические задачи. Причем, как отмечают читатели, статья будет полезна даже тем, кто с React никогда не работал.
#react
Читать полностью…
Веб-страница
22 февраля 2025 00:04
Отладка JavaScript в Chrome DevTools для начинающих фронтендеров
Поиск и исправление ошибок в JS может быть весьма ресурсозатратным мероприятием. Новичкам этот процесс может показаться неподъёмным камнем.
Но только до знакомства с отладкой в инструментах разработчика, встроенных в браузер. О ней вы узнаете в этой статье. Причём не о привычной всем console.log, а куда более эффективной альтернативе.
#javascript #qa
Читать полностью…
Веб-страница
20 февраля 2025 20:25
Обширная библиотека материалов по веб-разработке — сэнтузиаст отобрал самые полезные темы, гайды и домашние проекты, чтобы детально изучить тему и уже в этом году начать поиск работы.
• Вся база по HTML, CSS, JS, React.
• Шпаргалки, пособия и документация.
• Множество видео-гайдов.
• Пошаговый разбор пет-проектов для вашего портфолио и работа с GitHub.
• Материалы к собеседованиям и даже записи реальных технических созвонов.
• Наиболее удобные сервисы для хостинга проектов и работы фронтендера.
• Профессиональные блоги, книги и статьи для ежедневного чтения и просвещения.
Ультимативные знания берем — тут.
#фронтенд #библиотека
Читать полностью…
Веб-страница
19 февраля 2025 20:09
Флексим и создаём GUI на Python с веб-технологиями рендеренига
В этом нам поможет Flexx — набор инструментов, сделанных на чистом Python. Он позволяет писать код графических интерфейсов прямо на питоне и на ходу генерировать JavaScript с помощью транслятора PScript.
Узнать подробности о возможностях и изучить инструкцию можно на странице проекта.
#инструменты #python #javascript #gui
Читать полностью…
Веб-страница
18 февраля 2025 21:09
Интересная анимация загрузки с помощью CSS
Можете попробовать повторить такой лоадер, если хотите потренироваться в создании CSS-анимации. Здесь всего несколько DIV'ов, которые анимированы с помощью @.
Посмотреть код можно на codepen.
#codepen #css
Читать полностью…
Веб-страница
17 февраля 2025 18:13
Делаем приложение погоды на Vue.js
Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, с использованием Open Weather Map API и restful api для получения данных о погоде.
#видео #vue
Читать полностью…
Веб-страница
16 февраля 2025 16:49
Оптимизация работы с DOM. Ещё кое-что
Мы дали уже много советов по работе с DOM в прошлом посте, но кое-что не поместилось, но всё ещё осталось важным.
Как вы знаете, каждое изменение DOM вызывает его «перерисовку», что может тормозить сайт. Чтобы избежать лишних обновлений:
Используйте фрагменты при массовых изменениях. Фрагмент сначала наполняется в памяти, а потом добавляется в DOM одним движением. Это значительно быстрее, чем изменять страницу 100 раз подряд.
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
let li = document.createElement("li");
li.textContent = `Элемент ${i}`;
fragment.appendChild(li);
}
document.querySelector("ul").appendChild(fragment); // Один раз добавляем всё в DOM
Вы также можете кэшировать элементы, если используете их многократноconst button = document.querySelector("#myButton");
button.addEventListener("click", () => {
document.querySelector("#output").textContent = "Кнопка нажата!";
});Примера ниже лучше избегать, потому что тут
querySelector() вызывается каждый раз при клике, что неэффективно.
document.querySelector("#myButton").addEventListener("click", () => {
document.querySelector("#output").textContent = "Кнопка нажата!";
});#простымисловами #фронтенд
Читать полностью…
Веб-страница
15 февраля 2025 09:33
Анатомия React для начинающих. Часть 1
Большой курс по React и Create React App, который поможет вам сделать первые шаги в разработке на реакте. Каждый урок представляет собой отдельное видео, что удобно, если вы хотите обучаться не торопясь.
В курсе на YouTube 25 уроков, но чтобы вам было удобно и не нужно было куда-то переходить, мы прикрепили их к посту. В этой части первые 10 уроков, остальные выложим позднее, потому что Telegram не дают прикреплять больше 10 файлов за раз.
#react #курс
Читать полностью…
Веб-страница
14 февраля 2025 17:14
Выражаем свои чувства на языке LoveScript
Ребята из команды поиска и рекламных технологий Яндекса запустили спецпроект «День программиста Валентина», в котором валентинку можно сделать своими руками.
Вы можете написать код на LoveScript — специальном языке программирования для выражения тёплых и романтических чувств, и получить открытку, которую можно сохранить и поделиться с близкими.
Есть и более простой мод — выбирайте сообщение, фон и цвет вручную и получайте свой уникальный результат.
С днём программиста Валентина!
Это #партнёрский пост
Читать полностью…
Веб-страница
14 февраля 2025 12:00
Челлендж по запуску 12 простых IT-проектов за 12 месяцев
Летом 2023 г. появилось комьюнити инди-хакеров, в котором ребята решили запускать один простой продукт в онлайне каждый месяц.
И в реальном времени показывать: как разрабатывают, продвигают и сколько получилось заработать на запусках таких микро-проектов. Держите подборку их кейсов:
— пост про то, почему американцы платят $40 за простой конвертер картинок, который сделали за 4 недели, несмотря на обилие бесплатных аналогов.
— пост про то, как за 2 недели запустили темную тему с тарифами от $5 до $99. Четыре таких продукта приносят на пассиве как ЗП среднего разработчика.
— пост про то, как все может грустно закончиться, если 2 года пилить сложный продукт, не показывая его рынку.
— пост про то, как заработали 1,7 млн рублей на боте для создания фотокниг и какие фейлы допустили.
Первая находка в их комьюнити IT-билдеров — метод, который позволяет сделать запуск за 1 месяц.
Вторая находка — метод продвижения, который они используют. В среднем на продвижение одного IT-продукта уходит $150, причем есть продукты с 200К+ юзеров.
Вот здесь можно подписаться на канал, чтобы подглядеть за их запусками. А может, и попробовать сделать такой простой продукт самому.
Реклама. Рекламодатель: ИП Зуев Игорь Владимирович ИНН 360408359441, erid: 2W5zFJ6HzCG
Читать полностью…
Веб-страница
13 февраля 2025 12:07
Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов
Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.
Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.
#vue #фронтенд
Читать полностью…
Веб-страница
11 февраля 2025 20:24
Нереально быстрый генератор логотипов — результаты можно примерить внутри ваших приложений или сайтов.
А если вы разрабатываете цифровой продукт и решаете запустить мерч — сервис мастхевный.
Кстати, работает абсолютно бесплатно!
Креативим — здесь.
@
Читать полностью…
Веб-страница
11 февраля 2025 16:27
Обновляем роадмап по веб-разработке — чел пошагово описал путь без лишней воды. В списке только нужные темы, чтобы стать разносторонним спецом и найти работу с высокой зарплатой.
• Теория веба, об устройстве браузера, методологиях разработки и работе приложений.
• Веб-компоненты и доступность приложений.
• Все необходимые инструменты от языков разметки до масштабных фреймворков и библиотек.
• Тестирование и командная разработка.
• UX/UI-дизайн.
• Алгоритмы и структуры данных.
Сохраняем роадмап — тут.
Читать полностью…
Веб-страница
10 февраля 2025 15:13
Как правильно работать с 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"); // Получает список всех кнопок с классом .btnquerySelector и
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("Кнопка нажата!");
});Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.#простымисловами #фронтенд
Читать полностью…
Веб-страница
08 февраля 2025 22:08
10 библиотек JavaScript, которые можно забыть в 2025 году
Позавчера мы рассказали про инструменты, которые будут полезны в 2025 году всем фронтенд-разработчикам. Сегодня же поделимся библиотеками, которые точно не стоят вашего времени. Они устарели и имеют множество более современных альтернатив.
Подробнее о них в статье.
#javascript
Читать полностью…
26007