Статьи с тегом «Frontend»
FrontendCSS Соглашения об именовании CSS улучшают взаимодействие членов команды при работе над проектами, повышают сопровождаемость и масштабируемость проекта, позволяя разработчикам оптимизировать свои рабочие процессы. В этой статье мы погрузимся в мир соглашений об именовании CSS, покажем практические примеры и преимущества, которые они дают в процессе разработки.BackendPHPFrontendJavaScript Насладитесь быстрым процессом создания зависимостей front-end в ваших PHP-проектах благодаря возможностям управления пакетами Bun.FrontendCSS CSS развивается быстрее, чем когда-либо. С учётом всех новых возможностей, которые появились — и ещё появятся — после появления Flexbox и Grid несколько лет назад, меняется и способ написания CSS. В этой статье Geoff Graham рассказывает о том, какие функции оказали наибольшее влияние на его нынешние подходы к CSS, а также о тех, которые не оказали (по крайней мере, пока).FrontendCSS Сдвиги макета CSS означают неожиданное перемещение (или сдвиг) элементов в макете веб-страницы в процессе рендеринга. Это происходит при изменении размеров или положения элементов, что приводит к перетеканию или смещению содержимого на странице. Сдвиги макета могут привести к ухудшению пользовательского интерфейса, так как перемещение может нарушить взаимодействие с пользователем или затруднить чтение, или доступ к содержимому.FrontendCSS Пользовательские свойства CSS, известные как переменные, — это мощная функция, позволяющая разработчикам определять многократно используемые значения в таблицах стилей. Использование пользовательских свойств позволяет значительно повысить удобство повторного использования и сопровождения кода, а также создавать динамические стили для своих веб-проектов. Цель данной статьи — всесторонне объяснить пользовательские свойства CSS и их применение с помощью функции var.FrontendJavaScriptCSSHTML В Интернете пагинация — это способ разбиения больших фрагментов содержимого на более мелкие части. В этой статье мы рассмотрим простой способ разделения содержимого на ряд "страниц" с помощью HTML, CSS и обычного JavaScript.FrontendCSS Рефакторинг кодовой базы должен привести к аналогичной или повышенной производительности и улучшению состояния кодовой базы. В конце концов, если развёртывание обновлённой базы вызовет проблемы с загрузкой или производительностью, это приведёт к снижению трафика и доходов. К счастью, существует множество методов оптимизации, которые можно применить для решения потенциальных проблем с размером файлов и производительностью.FrontendCSS Логические свойства CSS — эффективный способ управления макетом веб-страниц. С течением времени CSS развивался в соответствии с требованиями современного веб-дизайна, и одним из значительных достижений последних лет стало появление логических свойств CSS. В этой статье мы познакомимся с логическими свойствами CSS, покажем, что они собой представляют, чем отличаются от традиционных (физических) свойств и почему они важны для создания гибких и отзывчивых макетов.FrontendCSS z-index — свойство, используемое для управления порядком расположения слоёв в документе. Элементы с большим значением z-index располагаются над элементами с меньшим значением. Подобно тому, как оси x и y на странице определяют расположение элементов по горизонтали и вертикали, z-index определяет, как они располагаются друг над другом по оси z.FrontendCSS В этой статье мы подробно рассмотрим сам процесс рефакторинга, стратегию инкрементного рефакторинга, визуальное регрессионное тестирование и сопровождение отрефакторенной кодовой базы.FrontendCSS Рефакторинг CSS — задача не из лёгких: его нужно провести так, чтобы не создать проблем. Сначала необходимо проанализировать существующую кодовую базу, провести аудит состояния CSS-кодовой базы, выявить слабые места, согласовать подход и убедить руководство в необходимости вложения времени и ресурсов в этот процесс.FrontendCSS Контейнерные запросы CSS — интересное дополнение к миру CSS. В этой статье мы дадим вам базовое представление о контейнерных запросах CSS и о том, как они работают.FrontendCSSSCSSSass Миксины SCSS обеспечивают эффективный способ повторного использования CSS-кода. Миксины уменьшают дублирование и улучшают структуру кода за счёт инкапсуляции стилей в блоки многократного использования. Благодаря возможности принимать аргументы, миксины становятся невероятно адаптивными и универсальными. В этой статье мы расскажем о том, как SCSS-миксины улучшают разработку фронтенда, способствуя модульности и согласованности кода, и упрощая написание CSS.FrontendCSS В этой статье мы рассмотрим несколько способов стилизации полосы прокрутки в CSS, в разных браузерах, чтобы вы могли настроить полосу прокрутки по умолчанию в соответствии с вашим брендом или дизайном.FrontendCSS Со свойствами фона CSS можно сделать очень многое. В этой статье мы рассмотрим, как использовать свойство background-size для установки размера фонового изображения, а также изучим варианты позиционирования фонового изображения с помощью background-position.FrontendCSS Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio.FrontendCSS В этой статье мы рассмотрим некоторые CSS трюки, которые позволят создать анимацию наведения для раскрытия наших изображений.Frontend Существуют различные способы использования веб-хранилищ в веб-приложениях. Front-end разработчики используют современный браузерный API веб-хранилища для создания более персонализированных, эффективных и отзывчивых веб-сайтов. В этой статье мы рассмотрим множество примеров использования, которые помогут вам создавать привлекательные веб-приложения.FrontendCSSBEM Следование CSS методологии гарантирует, что все, кто участвует в процессе разработки, говорят на одном языке. БЭМ и SMACSS отличаются друг от друга, но имеют ряд уникальных преимуществ.FrontendCSSHTML В современном цифровом ландшафте подход, ориентированный на мобильные решения (mobile-first), приобрёл большое значение в веб-дизайне и разработке. Применяя подход mobile-first в HTML и CSS, вы отдаёте приоритет потребностям мобильных пользователей и обеспечиваете бесперебойную и увлекательную работу вашего сайта на небольших экранах. В этой статье мы расскажем о принципах и преимуществах mobile-first
дизайна и реализации конкретных стратегий в HTML и CSS, чтобы вы могли применить эту методику.FrontendCSS Мы изучим различные подходы к сокрытию элементов веб-страниц с помощью CSS и оценим их производительность.FrontendCSS В статье объясняется и демонстрируется, как использовать два CSS свойства, которые могут помочь при создании отзывчивых макетов — object-fit и object-position.FrontendCSS Предварительно отфильтруйте набор дочерних элементов, прежде чем применять к нему логику Ab+B.FrontendCSS Одна из наших любимых функций CSS препроцессора теперь встроена в CSS: вложения правил стиля.FrontendCSS В этой статье я расскажу о том, как лучше всего использовать CSS медиа-запросы для достижения отзывчивости сайта.FrontendCSS В постоянно развивающемся мире веб-разработки, где CSS является ключевым элементом стиля, освоение техники рефакторинга CSS имеет решающее значение для создания эффективных и удобных в обслуживании таблиц стилей. Рефакторинг CSS позволяет оптимизировать код, устранить избыточность и повысить общее качество кода. Применение правильных техник может превратить запутанные таблицы стилей в хорошо организованный, модульный и легко обслуживаемый код. В этой статье мы расскажем вам о техниках рефакторинга CSS.FrontendHTML Если вы новичок в веб-разработке, возможно, слышали термин Семантический HTML
и задавались вопросом, что он означает. Проще говоря, Семантический HTML означает использование разметки HTML для передачи смысла содержимого веб-страницы, а не только её внешнего вида.FrontendSass Написание CSS имеет решающее значение для создания красивых и функциональных веб-сайтов, но управление CSS может стать сложной задачей по мере роста размеров и сложности сайтов. Вот тут-то и появляются препроцессоры CSS, такие, как Sass. В этой статье вы познакомитесь с Sass и узнаете, как он может упростить рабочий процесс и помочь писать более эффективный и удобный код.FrontendCSS Контейнерные запросы позволяют стилизовать элементы в зависимости от доступного пространства. Они позволяют создавать устойчивые адаптивные компоненты.FrontendCSS Узнайте, как Flexbox и Grid позволяют создавать плавно реагирующие макетные сетки без медиа-запросов.SEOFrontend Вы создали замечательный веб-сайт, но как сделать так, чтобы люди могли найти его через поисковые системы? В этой статье мы рассмотрим 10 лучших рекомендаций, чтобы ваша статья не только выделялась, но и хорошо ранжировалась в поисковых системах.FrontendCSSBEM Чистый и организованный код имеет решающее значение в современных веб-проектах, и разработчики постоянно ищут способы улучшить удобство сопровождения и организации кода. К счастью, для достижения этой цели существуют различные методы, включая популярную методологию Блок Элемент Модификатор (БЭМ), и в этой статье объясняется, как работает БЭМ и почему вы должны начать его применять.FrontendCSS Новые viewport единицы измерения — интригующая и мощная функция, которую рассматривают для включения в CSS, и эта статья поможет узнать о них и о том, как ими пользоваться.FrontendCSS Шпаргалка по CSS селекторам. С подсказками, как выбирать HTML элементы по классу, имени, атрибутам и списку дочерних селекторов.FrontendCSS В дополнение к математическим функциям CSS были добавлены тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле Значения и единицы измерения CSS уровня 4
и доступны во всех браузерах.FrontendCSS Более детальный контроль над CSS трансформациями с помощью индивидуальных свойств трансформации элементов translate, rotate и scale.FrontendCSS CSS функция color-mix() появилась в Chrome 111. В этой статье объясняется, как использовать эту функцию для смешивания цветов в таблицах стилей.FrontendCSS В мире дизайна маскирование — популярная техника достижения уникальных дизайнерских эффектов. Как дизайнер, я использовал его много раз, но редко использую в Интернете. Думаю, причина, по которой я не использую CSS маски, заключается в поддержке браузеров. Они частично поддерживаются в браузерах blink (Chrome и Edge) и полностью поддерживаются в Safari и Firefox.FrontendCSSTailwind Tailwind CSS v3.3 уже здесь — он содержит множество новых функций, о которых люди давно просили, и множество новых вещей, о которых вы даже не подозревали.JavaScriptFrontend Cookie были единственным способом хранения временной и локальной информации, но теперь у нас есть localStorage. Он широко обсуждается и используется во множестве приложений JavaScript. В этой статье мы рассмотрим всё, что нужно знать о localStorage в JavaScript.JavaScriptFrontend Удалите функции таймаута и избавьтесь от связанных с ними багов, вот событие которое действительно нужно: scrollend.FrontendCSS CSS — важная часть дизайна любого сайта и у него есть нюансы. Один из них — разница между em и rem, когда и зачем их нужно использовать.JavaScriptFrontendBackend Большинство языков программирования имеют концепцию модулей: способ определить функции в одном файле и использовать их в другом.JavaScriptFrontendHTMLCSS Во второй части рассмотрим несколько примеров непосредственного использования веб-платформы в качестве альтернативы некоторым решениям, предлагаемым фреймворкамиJavaScriptFrontend В этой статье подробно рассматривается несколько технических возможностей, которые являются общими для всех фреймворков. Объясняется как они реализуются в различных фреймворках и какова стоимость их применения.JavaScriptFrontendHTML Проверка формы — одна из основных причин использования клиентского JavaScript. Это может предотвратить ошибки ввода пользователя до того, как выше приложение попытается отправить данные на сервер.CSSTailwindFrontend Я продемонстрирую 10 лучших функций, предлагаемых в Tailwind CSS v3.0, чтобы вы могли начать использовать их и улучшать свой опыт фронтэнд разработки.SassFrontend В зависимости от размера проекта над которым вы работаете, вы можете структурировать Sass двумя способами: простым для небольших и более сложным для крупных проектов.TailwindCSSFrontend В этом году было много шумихи вокруг популярного CSS фреймворка Tailwind. Хочу поделиться мыслями и опасениями по поводу UI этого фреймворка. У меня был небольшой опыт написания utility-first CSS кода, когда я начинал свою карьеру во фронтенде несколько лет назад.JavaScriptFrontendBackend На днях коллега подошёл ко мне со строкой кода, которую нашёл на StackOverflow, и спросил, как это работает. И я подумал, что это отличный пример четырёх концепций от среднего до продвинутого уровня JavaScript, поэтому решил записать и обосновать своё объяснение.HTMLFrontend Семь редко используемых HTML атрибутов, о которых вы возможно не знали.CSSFrontend Часто хочется, чтобы был способ избежать возникновения определённой проблемы или поведения CSS. Вы знаете, что контент динамический, и на веб-странице всё может измениться, что увеличивает вероятность возникновения проблемы с CSS или странного поведения.JavaScriptFrontendBackend В JavaScript hoisting позволяет использовать функции и переменные до их объявления. В этой статье мы узнаем что такое hoisting, и как он работает.CSSFrontend Важно иметь постоянное соотношение ширины и высоты изображений и других отзывчивых элементов. Мы много лет использовали в CSS хак с отступами, но сейчас у нас есть встроенная поддержка соотношения сторон в CSS. В этой статье я расскажу, что такое соотношение сторон, как мы его использовали и как это делать по-новому. Конечно, будут варианты использования с подходящими запасными вариантами.CSSFrontend В этой статье я хочу поделиться, тем что я делаю при CSS масштабировании элементов в DevTools браузера.CSSFrontend Мы не можем говорить о веб-разработке, не упоминая Отзывчивый Дизайн. В наши дни это просто данность, и так было уже много лет. Медиа запросы — часть отзывчивого дизайна, и они никуда не денутся. С момента появления медиа-запросов (буквально десятилетия назад) CSS эволюционировал до такой степени, что существует множество трюков, которые могут нам помочь существенно сократить количество медиа-запросов. В некоторых случая я покажу вам, как заменить несколько медиа-запросов только одним CSS объявлением. Эти подходы могут привести к уменьшению объёма кода, упрощению обслуживания и большей степени привязаны к имеющемуся контенту.CSSGridFrontend Если вы когда-нибудь пытались разместить прилипающий элемент в макетной сетке grid и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы могли прийти к выводу, что position: sticky не работает с CSS Grid.CSSSassFrontend Небольшое введение в селекторы атрибутов. В течение пяти минут, я покажу пять способов практического использования селектора атрибутов.CSSFrontend Недавно я добавил в этот блог простой визуальный эффект, который мне быстро понравился: когда вы наводите курсор на ссылку, анимированное подчёркивание ссылки раскрывается из центра. Создать этот эффект на удивление легко и не требует добавления каких-либо дополнительных элементов в DOM HTML.CSSGuideFrontend В этой статье мы рассмотрим лучшие на сегодня способы обработки цветов в CSS, несколько советов по их использованию в дизайн-системе и то, что мы можем ожидать от наших цветов в недалёком будущем.VimToolsHTMLFrontend Мы рассмотрим несколько возможностей Emmet плагина для vim на конкретных примерах, и к концу этой статьи вы будете выдавать html-код, как по волшебству, и вам будет интересно узнать больше!FrontendHTML Пора переосмыслить, как мы готовим набор иконок для современных браузеров и остановить безумие генераторов иконок. Сейчас, фронтэнд разработчику приходится иметь дело с 20+ статических PNG файлов для отображения крошечного логотипа сайта во вкладке браузера или на сенсорном экране. Читайте дальше и вы узнаете, как применить более разумный подход и использовать минимальный набор иконок, который соответствует большинству современных потребностей.CSSBEMFrontend При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований.