Коллекция лоадеров и скелетонов для вашего проекта

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

Все они выполнены на HTML и CSS с применением препроцессоров. Так что всё, что вам нужно сделать — скопировать их в свой проект.

#html #css #лоадер

Сокращения JavaScript экономящие время

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

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

https://www.dev-notes.ru/articles/javascript/ten-javascript-shortcuts-to-save-hours-of-coding/

#javascript

Учимся работать с 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