Рубрика «css» - 10

Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным правительством Кировской области в 2022 году.

Что получилось сделать и как это было реализовано.

Как я написал удобную оболочку над электронным дневником - 1

Предыстория

Читать полностью »

Интересные трюки HTML, CSS и JS - 1


Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать полностью »

Создание карты потоков с помощью JavaScript: пошаговое руководство - 1


Карты потоков – это мощный способ представления движения объектов между различными географическими локациями, который очень легко реализуется с помощью JavaScript. По сути, они совмещают в себе функциональность карты и потоковой диаграммы. Такой тип визуализации показывает направление движения людей, товаров, денег или информации, а также их количество.

В текущем руководстве мы познакомим вас с процессом создания карты потоков. А чтобы сделать этот процесс более практичным, мы используем пример визуализации количества студентов из Индии, обучающихся в разных странах. Следуя этому руководству, вы научитесь создавать собственные карты потоков с помощью JS для любых видов данных.Читать полностью »

Основы веба, которые должен знать начинающий разработчик - 1


В этом посте я объясню, как работает Интернет. Мы ответим на вопросы наподобие «Как браузер находит файл HTML для запрошенной веб-страницы?», «Как файл HTML превращается в интерфейс пользователя?», «Что можно сделать, чтобы ускорить этот процесс?», «Как устанавливается и поддерживается связь с сервером?», а также рассмотрим следующие концепции:

  • Клиент-серверную модель
  • Жизненный цикл запроса веб-страницы
  • Hypertext Transfer Protocol
  • Как браузеры рендерят контент

Читать полностью »

Руководство по цветовым функциям CSS - 1


Возможно, вы использовали CSS для изменения цвета элемента на веб-странице, но слышали ли вы что-нибудь о цветовых функциях CSS? Если нет, то из этой статьи узнаете нечто новое и крайне полезное!

Что такое цветовые функции CSS?

Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей.

При помощи цветовых функций можно настраивать тон (hue), насыщенность (saturation), светлоту (lightness) и непрозрачность (opacity) цвета и даже смешивать вместе несколько цветов.
Читать полностью »

Подробное руководство о настройке сборщика Webpack 5 и о создании шаблона, который позволит разрабатывать фронтенд сайтов с использованием Pug, Sass, JavaScript и Markdown

Настройка Webpack 5 - 1

Содержание

Я считаю, что CSS Модули — это монументальный проект. С его помощью можно решить одну худших проблем CSS — коллизию имен классов. Давайте рассмотрим простой пример, чтобы было понятно, о чем идет речь.

Представим, что мы разрабатываем компонент Button. Использовать "чистый" CSS опасно, потому что есть риск, что кто-то ещё в вашем проекте (или ещё хуже — в подключенной библиотеке) использует то же имя класса:

/* Button.css */

.button {
  color: #f00;
  padding: 10px;
  font-size: 18px;
}

/* node_modules/some_lib/styles.css */

.button {
  color: #0f0;
}
// Button.tsx

import { FC } from "react";
import "./Button.module.css";
import "some_lib/styles.css";

export const Button: FC = (props) =>Читать полностью »

Знакомство с тестированием веб-приложений - 1


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

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 11–17 июля.

Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире - 1

🧬 HTML

📔 Создадим табы на веб-компонентах. Для создания потребуется хорошо знать разметку, ариа-роли и UX.

📔 Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js