Новая фича CSS - Nesting
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
👉 С нововведением мы сможем написать так:
❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
.link { color: red;}.link:hover,.link:focus { color: blue;}👉 С нововведением мы сможем написать так:
.link { color: red; &:hover, &:focus { color: blue; }}❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.
🚀JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...
Использование переменных в CSS
Всем привет!
В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.
Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.
Пример:
Собственно как то так, удачи вам в экспериментах!
Всем привет!
В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.
Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.
Пример:
:root { --base: #ffc600; --spacing: 10px; --blur: 10px;}img { padding: var(--spacing); background: var(--base); -webkit-filter: blur(var(--blur)); filter: blur(var(--blur));}.hl { color: var(--base);}Собственно как то так, удачи вам в экспериментах!
3 крутых GitHub репы для фронта
Приветствую! Собрал для вас небольшую подборку GitHub реп которые скорее всего будут интересны всем.
👉 JavaScript Algorithms - ресурс для всех, кто хочет получить четкое представление об алгоритмах и структурах данных. Он содержит примеры многих популярных алгоритмов и структур данных, реализованных на JavaScript.
👉 Front End interview handbook - В этой репе вы найдете ответы на все распространенные вопросы, которые так любят задавать на собесах.
👉 30 seconds of code - этот ресурс содержит короткие фрагменты кода на JavaScript для всех рутинных манипуляций в разработке.
❗ Есть нюанс с репой 30 seconds of code, у нее нет варианта на русском языке, но думаю что для большинства из нас это не будет огромной проблемой. Первые две - переведены.
Как обычно удачи в изучении и экспериментах!
Приветствую! Собрал для вас небольшую подборку GitHub реп которые скорее всего будут интересны всем.
👉 JavaScript Algorithms - ресурс для всех, кто хочет получить четкое представление об алгоритмах и структурах данных. Он содержит примеры многих популярных алгоритмов и структур данных, реализованных на JavaScript.
👉 Front End interview handbook - В этой репе вы найдете ответы на все распространенные вопросы, которые так любят задавать на собесах.
👉 30 seconds of code - этот ресурс содержит короткие фрагменты кода на JavaScript для всех рутинных манипуляций в разработке.
❗ Есть нюанс с репой 30 seconds of code, у нее нет варианта на русском языке, но думаю что для большинства из нас это не будет огромной проблемой. Первые две - переведены.
Как обычно удачи в изучении и экспериментах!
CSS media запрос any-hover
Приветствую товарищи фронты! Знаете ли вы про такой медиа запрос?
Он предназначен для того что бы некоторые стили работали только на устройствах с мышью, а соответственно на сенсорных экранах не работали.
Пример применения:
Если верить ресурсу caniuse то у этого медиа запроса уже довольно высокий уровень поддержки и из основных браузеров его не поддерживает только IE так что в большинстве случаев юзайте на здоровье.
Приветствую товарищи фронты! Знаете ли вы про такой медиа запрос?
Он предназначен для того что бы некоторые стили работали только на устройствах с мышью, а соответственно на сенсорных экранах не работали.
Пример применения:
@media(any-hover: hover) { .element: hover { // ваши стили }}Если верить ресурсу caniuse то у этого медиа запроса уже довольно высокий уровень поддержки и из основных браузеров его не поддерживает только IE так что в большинстве случаев юзайте на здоровье.
🗣Трудности перевода в разработке: как делать интернациональные проекты и говорить с пользователями на одном языке
В этой статье я расскажу о том, как инфраструктура переводов позволяет поддерживать 10 языков в нашем продукте и какие технические нюансы стоит учитывать при работе с разными языками.
Читать...
В этой статье я расскажу о том, как инфраструктура переводов позволяет поддерживать 10 языков в нашем продукте и какие технические нюансы стоит учитывать при работе с разными языками.
Читать...
👍1