Учимся работать с DOM в JS

Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:

— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.

Смотреть можно здесь или на YouTube.

#видео #javascript #начинающим

Что происходит, когда вы вводите адрес сайта и нажимаете Enter

Несмотря на фундаментальность вопроса, в нем ошибаются или не могут дать точного ответа даже Senior-разработчкии. Что уж говорить о джунах.

Но теперь вы можете разобраться в вопросе благодаря этой статье. Здесь без сложных терминов вы изучите процесс от ввода URL до полной загрузки и отображения страницы в браузере.

#веб #сеть

10 признаков плохого кода

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

Чтобы вы не стали плохими программистами, лучше заранее знать о признаках, выдающих плохие практики в разработке ПО. Например, хардкод, сложные условия и так далее. Изучите их, чтобы быть уверенными в собственном коде.

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

#советы

Подборка бесплатных библиотек иконок для ваших проектов

Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:

Iconoir — коллекция из более чем 1500 иконок, поддерживающая работу с React, Vue и Flutter. Благодаря SVG и JSX легко адаптируется для разных платформ.

Phosphor Icons — библиотека с более чем 9000 иконок в разных стилях и весах. Pixel-perfect дизайн делает её подходящей для профессиональных решений.

Material Icons — классика Material Design с 2100+ иконками в разных форматах и стилях. Подходит для универсальных и лаконичных интерфейсов.

Bootstrap Icons — официальная библиотека Bootstrap с 2000+ иконками. Универсальный выбор благодаря поддержке SVG, PNG и других форматов.

Feather Icons — минималистичная коллекция из 280+ иконок, созданная для современных интерфейсов. Простота и элегантность — её главные черты.

Octicons — иконки от GitHub с простым дизайном, которые подходят для интерфейсов разработчиков. Отличный выбор для веб-платформ.

Heroicons — набор из 450+ иконок в двух стилях: контурном и с заливкой. Чистый и современный внешний вид гарантирует стильный дизайн.

Lineicons — современная библиотека с 500+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.


Какую ещё библиотеку нам стоило включить в подборку?

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

Саморисующиеся фигуры на CSS

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

Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS:

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Этого достаточно для того, чтобы оживить ваше изображение. Конечно, лучше всего это работает с простыми картинками, как в примере из видео. Но вы можете поэкспериментировать и с более сложными вариантами.

Подробнее о способе можно почитать здесь.

#css #лайфхак

Яндекс Практикум обучает аналитиков данных

Если вы хотите перезапустить карьеру без отрыва от привычной жизни, курс с 75% практики идеально подойдёт. Вас ждут 4+ больших проекта, диплом гособразца, подарки, а также помощь с поиском работы.

А ещё у ребят идет черная пятница: пройдите первую учебную тему курса до 30 ноября и получите скидку 20% на обучение.

Станьте частью востребованной профессии!

Начать учиться

Это #партнёрский пост

Буква D в IDE означает Dramatic

Простыми словами: Что такое Virtual DOM в React

Если вы изучаете React, наверняка слышали о Virtual DOM, который делает React быстрым. Давайте разберёмся, как это работает.

Что такое DOM?

DOM — это модель страницы, где каждый элемент HTML представлен как объект в дереве:

<div>
  <h1>Hello!</h1>
  <p>React is awesome</p>
</div>

В DOM:

div
├── h1
└── p

Когда вы изменяете, например, текст в <p>, браузер обновляет весь DOM, что может быть медленно для больших страниц.

Что такое Virtual DOM

Virtual DOM — это копия реального DOM, которая существует в памяти.

Как это решает проблему обновления DOM для больших страниц:
— React сначала обновляет Virtual DOM.
— Затем сравнивает новый Virtual DOM с предыдущей версией (diffing).
— После этого изменяет только нужные части реального DOM, а не всё дерево.

Это намного быстрее, чем манипуляции с реальным DOM.

Пример Virtual DOM в деле

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Счётчик: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Когда изменяется count, React обновляет только текст в <h1>, остальные элементы (<div> и <button>) остаются нетронутыми.

Зачем это нужно?

— Быстрая работа: только новые или изменённые части DOM обновляются.
— Простота кода: больше фокус на логике, меньше на оптимизации.
— Сложные интерфейсы становятся лёгкими: React справляется даже с большими приложениями.

Подведём итог

Virtual DOM — это умная копия DOM, которая работает в памяти, сравнивает изменения и обновляет только то, что нужно. Благодаря этому React становится быстрым, простым и мощным.

Напишите в комментариях понравился ли вам формат и про что ещё хотели бы узнать.

#простымисловами #react

Верстка сайта по макету из Figma без Dev Mode в бесплатной версии

Как вы знаете, бесплатно сейчас работать в DEV-режиме фигмы уже нельзя. Но если денег на подписку у вас нет или просто жалко, а макет уже ждёт, то всё-таки кое-что можно сделать.

В этом видео вы узнаете, как правильно переносить элементы дизайна из бесплатной версии Figma на HTML и CSS, чтобы ваш сайт выглядел точно так же, как в макете.

#видео #урок #figma #фронтенд

Эффект матового стекла для веба

Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.

Своим опытом и готовым проектом автор поделился в статье.

#html #css #ui

Портируем олдскульную головоломку в веб с использованием LLM и Midjourney для бати

Помните этот старый маджонг с покемонами? Я вот в своё время вдоволь наигрался в неё.

Ностальгирующий автор этой статьи тоже помнит её и хотел поиграть вновь, но сегодня это сделать уже проблематично. Поэтому он решил переписать её заново и перенести в веб. Он поделился своим опытом и рассказал с какими сложностями столкнулся.

#gamedev

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

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

Скрытые возможности элемента input

Большинство собратьев элемента input вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики