Skill Blog: Веб-разработка

Мультиколонки Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете CSS:

.article {
// Шорткат columns даёт возможность указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок
  columns: 200px 2;
  column-gap: 25px;
}
.title{
// Свойство column-span позволяет элементу растянуться на несколько колонок
  column-span: all;
}

Как отобразить теги на веб-странице? Любые теги (вроде <p>) никак не показываются в браузере, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы &lt; и &gt; для замены угловых скобок < и >. При этом <p> будет выглядеть как &lt;p&gt; Статья

​ Какие минусы у React? Несмотря на множество преимуществ, у React есть и недостатки, которые могут повлиять на выбор этой библиотеки для проекта. Вот основные из них: Крутая кривая обучения Для новых разработчиков React может показаться сложным из-за концепций, таких как JSX, компоненты, хуки и управление состоянием. Требуется время и усилия для освоения всех особенностей и возможностей библиотеки. Быстрая эволюция React и его экосистема развиваются очень быстро, часто выходят новые версии и дополнительные библиотеки. Разработчикам нужно постоянно следить за обновлениями и адаптироваться к изменениям, что может быть трудоемким. Неисчерпывающая документация для продвинутых тем Хотя базовая документация у React хорошая, для более сложных или специфичных задач может не хватать примеров и объяснений. Разработчики могут столкнуться с трудностями при поиске решений для нестандартных проблем. Ограниченные возможности для SEO Приложения на чистом React рендерятся на стороне клиента, что может ухудшить индексацию страниц поисковыми системами. Требуется дополнительная настройка, например, использование серверного рендеринга (Next.js), для улучшения SEO. Сложность в конфигурировании и настройке В отличие от некоторых фреймворков, React не предоставляет единого "из коробки" решения. Нужно самостоятельно выбирать и настраивать инструменты для маршрутизации, управления состоянием и сборки проекта. Это увеличивает время на первоначальную настройку и требует знаний в области различных инструментов и библиотек. Производительность при большом количестве компонентов При большом количестве компонентов и частых обновлениях состояния могут возникнуть проблемы с производительностью.Требуется оптимизация кода и использование таких инструментов, как мемоизация (React.memo, хуки useMemo и useCallback), чтобы избежать ненужных перерисовок. Пример проблемы с производительностью:

import React, { useState, useMemo } from 'react';

function ExpensiveComponent({ num }) {
  const computedValue = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < num * 1000; i++) {
      sum += i;
    }
    return sum;
  }, [num]);

  return <div>Computed Value: {computedValue}</div>;
}

function App() {
  const [num, setNum] = useState(1);

  return (
    <div>
      <button onClick={() => setNum(num + 1)}>Increase</button>
      <ExpensiveComponent num={num} />
    </div>
  );
}

export default App;

В этом примере показана оптимизация вычислений с использованием useMemo.

JavaScript Visualizer 9000 — потрясающий инструмент, позволяющий наглядно видеть порядок выполнения JavaScript кода Можно выбрать из предлагаемых примеров или запустить выполнение своего кода (думаю, часто встречали такие задачи - "в каком порядке выполнится код?") Очень полезно для понимания JavaScript в целом Ссылка: https://www.jsv9000.app/

Как сделать ссылку на верх веб-страницы? Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта. Для создания такой ссылки, в её адресе достаточно указать #top. Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.

<a href="#top">Наверх</a>

Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top

<button onclick="window.location.href='#top'">Наверх</button>

Подробнее

TypeHero — платформа для изучения TypeScript на практике с готовыми задачами и возможностью создания собственных задач Ссылка: https://typehero.dev

Web Share API Web Share API позволяет вам обмениваться текстом, ссылками и даже файлами с веб-страницы с другими приложениями, установленными на устройстве CodePen

Псевдоэлемент для работы с маркерами элементов списка Псевдоэлемент ::marker — это маркерное поле в котором находится маркер Как анимировать маркер в списке — пост

Атрибут poster Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео

Маскирование в CSS c помощью свойства mask Cвойство устанавливает изображение, которое используется как слой маски для элемента

<img src="picture.jpg" alt="...">

Свойство определяется подобно background:

img {
    mask: url("../shape.png");
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
}

Либо можно записать в одну строку, как на картинке Статья