Глобальные ключевые слова в CSS

Для всех свойств CSS, помимо их стандартных значений, можно задать значения в виде ключевых слов:

initial
У каждого из свойств в CSS есть значение по умолчанию. Оно применяется ещё до того, как вы написали что-либо в вашем файле стилей.
Ключевое слово initial сбрасывает все указанные значения свойства для конкретного блока до этих самых значений по умолчанию.

inherit
CSS-свойства делятся на наследуемые и ненаследуемые.
Значения наследуемых свойств применяются не только к элементу, для которого прописаны, но и для всех вложенных дочерних элементов. Это очень удобно, чтобы не писать много одинаковых свойств для разных селекторов, перечисляя всех потомков.

unset
Это ключевое слово ведёт себя по-разному с наследуемыми и ненаследуемыми свойствами:
- С наследуемыми свойствами ключевое слово unset ведёт себя как inherit.
- С ненаследуемыми свойствами оно ведёт себя как initial.

revert
Это ключевое слово сбрасывает значение свойства до указанного в стилях браузера.

👩‍💻 Radios With Sliding Focus

Анимированный переключатель с плавающей рамкой. Сделан на чистом CSS.

Открыть код


Original post link: t.me/frontendnoteschannel/3604
Forwarded and filtered by @smartfeed_bot

Magnify Glass w/ Zoom

Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.

https://codepen.io/kitjenson/pen/ExLRrgw


Original post link: t.me/senior_front/2029
Forwarded and filtered by @smartfeed_bot

🐙 OpenLayers – высокопроизводительная библиотека для создания интерактивных географических карт. Библиотека написана на JavaScript и имеет открытый исходный код.

Сайтодел | #репозиторий #github


Original post link: t.me/sitodel/1783
Forwarded and filtered by @smartfeed_bot

CSS 3D Bending Effect - Page Flip

Создано на чистом CSS с использованием возможностей препроцессора Haml.

👉 @seniorFront


Original post link: t.me/seniorFront/4124
Forwarded and filtered by @smartfeed_bot

👩‍💻 Попытка создать идеальный компонент формы

Как я создавал свою библиотеку для работы с формой, какие сложности встретил и как их решал. Попытка типизировать вообще все и несколько интересных typescript кейсов, которые могут оказаться полезными.

Читать...


Original post link: t.me/frontendnoteschannel/3606
Forwarded and filtered by @smartfeed_bot

3D glass weather icons

Иконки, сверстанные на HTML и SCSS.

https://codepen.io/onediv/pen/MWQKgmv


Original post link: t.me/senior_front/2030
Forwarded and filtered by @smartfeed_bot

​Как очистить карму своему коду?

Часто ли у так бывает, что вы встречаете плохой код и мысленно ругаете автора?
А потом приходите к выводу, что код не так уж и плох, и автора ругали зря… Но осадок-то остался!

В общем, медитировал я давеча перед монитором, и посетил меня код с картинки:
Вслед за этим кодом меня посещает, конечно, Негативная Эмоция. Недоумение.
Почему надо делить на сто и тут же умножать на сто?
Зачем надо прибавлять сто и делать на сто? Что тут вообще происходит? WTF?

Разгадка
В ходе дебага выясняется, что код этот вполне работает. Поскольку речь идёт о целых числах, то при делении на 100 результат округляется, а при повторном умножении на сто получается меньшее число. Например, из 666 получается (666/100) * 100 = 6*100 = 600. То есть значение округляется до ближайшей сотни.

Что получается? Код как бы есть, он как бы работает, то есть обвинить программиста как бы и не в чем. Но в то же время я потратил силы, чтобы в нём разобраться, а самое главное — я произнёс вслух "What The Fuck" что увеличило мою карму на единичку.

Как же очистить карму своего кода?
Как утверждается в ведических текстах, любой программер может изменить судьбу кода, если напишет тесты и сотрет непотребные комментарии и сделав код втрое короче

👉 @seniorFront

👩‍💻 Гибкая ORM для Node.js – Sequelize

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

Читать...


Original post link: t.me/frontendnoteschannel/3609
Forwarded and filtered by @smartfeed_bot

Prompt engineering — путь к эффективной работе с ChatGPT

В этой статье рассказывается о том, как эффективно работать с ChatGPT в разных задачах и архитектуре. Многие пробовали, но не у всех получилось. Статья написана по мотивам доклада для конференции Highload.

Какие темы обсуждаются:
- Поговорим о GPT;
- Разберёмся, зачем нужны промпты;
- Рассмотрим фреймворки для создания промптов;
- Создадим ассистента архитектора.

👉 @seniorFront


Original post link: t.me/seniorFront/4132
Forwarded and filtered by @smartfeed_bot

🖥 Ecommerce App – дизайн приложения для интернет-магазина. Здесь есть два типа карточек: заполненные градиентом и прозрачные с круглым фоном для товара.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1787
Forwarded and filtered by @smartfeed_bot

🔝 ТОП-10 шаблонизаторов для фронтенд-разработки

Шаблонизаторы применяют в разработке фронтенда для создания компонентов. Они позволяют создать более чистую и удобную для обслуживания кодовую базу, избавляя программиста от необходимости писать повторяющийся код несколько раз. В статье рассмотрим десять популярных во фронтенд-разработке шаблонизаторов и способы создания простых шаблонов.

Читать...


Original post link: t.me/frontendnoteschannel/3615
Forwarded and filtered by @smartfeed_bot

👩‍💻 Отложенная загрузка на уровне шаблонов в Angular

Знакомьтесь с новой фичей Angular 17  —  Deferrable Views. Этот API для отложенной загрузки зависимостей шаблонов обеспечит беспрецедентный уровень эргономики. Чтобы оценить его преимущества, предлагаем сравнить новый и традиционный подходы к отложенной загрузке шаблонов.

Читать...


Original post link: t.me/frontendnoteschannel/3618
Forwarded and filtered by @smartfeed_bot

​​​5 ошибок, которые можно допустить при запуске первого проекта React

Даже самая лучшая документация не охватывает абсолютно всё. Поэтому, работая с новым инструментом, можно столкнуться с различного рода ошибками и проблемами. Это касается даже такой популярной библиотеки, как React.

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

https://css-tricks.com/5-mistakes-starting-react/

#react


Original post link: t.me/tproger_web/4598
Forwarded and filtered by @smartfeed_bot

Array.values()

Массив в JavaScript имеет различные методы для перебора элементов. Например, map() или forEach(). Но иногда удобнее работать не с самим массивом, а с итерируемым объектом.
Метод values() возвращает новый объект-итератор, созданный из значений элементов массива. Подробнее о том, что такое итератор, можно прочитать в посте «Итератор».

Пример:
const array = [1, 2, 3]
const iterator = array.values()

for (const item of iterator) {
console.log(item)
}
// 1
// 2
// 3

👉 @seniorFront


Original post link: t.me/seniorFront/4146
Forwarded and filtered by @smartfeed_bot

👩‍💻 Освоение различных видов линий в Jetpack Compose с помощью PathEffect

Устали от однообразных линий в Jetpack Compose? Вы не одиноки! Сегодня поговорим о том, как создавать различные стили линий и фигур в рамках Jetpack Compose и использовать их на практике.

Читать...


Original post link: t.me/frontendnoteschannel/3629
Forwarded and filtered by @smartfeed_bot

​​Про UI/UX в двух словах: как и зачем применяют принципы логики в дизайне интерфейсов?

Логика — фундаментальный инструмент, который помогает принимать решения и преодолевать проблемы. Она применима во всём — от простых повседневных действий до сложных научных исследований. И, конечно же, она играет огромную роль в дизайне интерфейсов.

Логика и дизайн-мышление помогают создавать выдающиеся интерфейсы. О том, как это работает, и как «прокачать» эти навыки, рассказывает наш читатель Иван Сержантов: https://tproger.ru/articles/kak-i-zachem-primenyayut-principy-logiki-v-dizajne-interfejsov

#дизайн #ux


Original post link: t.me/tproger_web/4604
Forwarded and filtered by @smartfeed_bot

🖥 Template Plants Animated – дизайн веб-страниц в оттенках холодного и теплого зеленого. Приятный бонус - изображения растений без фона в формате PNG.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1800
Forwarded and filtered by @smartfeed_bot

👩‍💻 10 полезных методик во фронтенд-разработке React

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

Читать...


Original post link: t.me/frontendnoteschannel/3638
Forwarded and filtered by @smartfeed_bot

Stacked Cards with Autoplay

В JS создана функция перелистывания карточек, которая запускается по заданному интервалу.

👉 @seniorFront


Original post link: t.me/seniorFront/4157
Forwarded and filtered by @smartfeed_bot