Подробное руководство о настройке сборщика Webpack 5 и о создании шаблона, который позволит разрабатывать фронтенд сайтов с использованием Pug, Sass, JavaScript и Markdown
Рубрика «css» - 5
Настройка Webpack 5
2022-11-25 в 19:03, admin, рубрики: css, html, javascript, webpack 5, Разработка веб-сайтов, руководствоWebpack + CSS Modules + TS = Love
2022-09-17 в 23:31, admin, рубрики: css, TypeScript, webpack, Разработка веб-сайтовЯ считаю, что 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) =>Читать полностью »
Знакомство с тестированием веб-приложений
2022-07-17 в 10:00, admin, рубрики: css, html, javascript, ruvds_перевод, Блог компании RUVDS.com, веб-тестирование, модульное тестирование, Разработка веб-сайтов, Тестирование веб-сервисов, Тестирование мобильных приложенийДаже в случае самой базовой конфигурации по мере добавления новых страниц и функциональности тестировать веб-приложение становится все сложнее. И чтобы помочь начинающим в этом нелегком деле, я написал небольшое вводное руководство. Читать полностью »
Фронтенд-новости №15. CSS становится сложнее, VITE 3.0, самый высокий сайт в мире
2022-07-17 в 7:38, admin, рубрики: css, html, javascript, Блог компании HTML Academy, НовостиДайджест новостей и полезных статей из мира фронтенд-разработки за неделю 11–17 июля.
🧬 HTML
📔 Создадим табы на веб-компонентах. Для создания потребуется хорошо знать разметку, ариа-роли и UX.
Как я перешел из нефтянки в IT за 1 год
2022-07-06 в 14:50, admin, рубрики: css, html, javascript, React, ReactJS, redux, войти в IT, первые шаги в it, план развития frontend разработчикаДелаем отзывчивый и максимально возможный размер шрифта динамического текста относительно контейнера
2022-06-18 в 10:50, admin, рубрики: css, font, html, javascript, markdown, markup, react.js, ReactJS, responsive, дизайнПеред нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В данной статье мы будем рассматривать решение небольшой задачи: как сделать максимально возможный размер шрифта динамического текста в его родительском контейнере. Или же, как впихнуть невпихуемое.
Предисловие
Мой краткий чек-лист по скилам системного аналитика
2022-06-06 в 14:32, admin, рубрики: css, javascript, sql, Анализ и проектирование систем, аналитик, архитектура, архитектура по, веб-технологии, диаграммы, интеграция сервисов, Карьера в IT-индустрии, софт-скиллыПривет! Меня зовут Валид Панин, хочу поделиться кратким чек-листом скилов аналитика. Расскажу какие харды и соф-скилы использую в своей работе с примерами, пояснениями и списком литературы и ресурсов, которые помогут подтянуть знания. Мне бы пригодился такой чек-лист как карта развития, если бы я сейчас начинал свой путь аналитиком.
Введение в SVG-анимации для верстальщиков
2022-05-22 в 15:35, admin, рубрики: css, javascript, JS, svg, анимации, Разработка веб-сайтов
Время идет, технологии меняются, набитые шишки копятся, настала пора обновить материалы по SVG-анимациям. Тем более, что тема для многих фронтендеров все еще остается странной и запутанной. В этой статье мы рассмотрим SVG-анимации с разных сторон, посмотрим на актуальное состояние дел, возможности и сопутствующие инструменты. Мы не будем разбирать каждое свойство и каждый хак. Слишком большой объем материала получится. Для этого есть MDN и ему подобные сайты. Задача текущей статьи — дать общее представление о том, что бывает, и от чего можно оттолкнуться, если вы решили изучать эту тему, а у вас полная каша в голове.
11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком
2022-05-01 в 10:26, admin, рубрики: chrome, chrome devtools, console, css, DevTools, Google Chrome, html, javascript, верстальщик, верстка, Разработка веб-сайтов, Учебный процесс в ITПредисловие
Я полагаю, что вы должны быть знакомы с браузером Chrome, так как это ближайший партнер разработчиков интерфейса. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.
В дополнение к этому, он также предоставляет множество мощных, но необычных функций, которые могут значительно повысить эффективность нашей разработки.
Давайте посмотрим.
1. Повторно отправить запрос XHR
Как написать калькулятор на HTML и CSS без JavaScript
2022-04-16 в 20:28, admin, рубрики: css, html, skillfactory, Блог компании SkillFactory, декларативное программирование, ненормальное программирование, Программирование, селекторы, трюки, трюки в кодеМатериалом о разработке калькулятора на CSS и HTML, без файла JS, тега script и обработчиков событий в HTML делимся к старту курса по Fullstack-разработке на Python. За подробностями приглашаем под кат.