JS
Статьи о JavaScript — инструкции, советы, полезные руководства.
Как проверить поддержку CSS-селекторов с помощью JavaScript
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Есть много способов убедиться, заработает ли ваш CSS-код в браузере. Если вы хотите проверить, поддерживается ли конкретное свойство, используйте директиву @supports, например, так:
@supports (display: grid) {
div {
display: grid;
}
}
Если браузер поддерживает свойство display:grid, он будет использовать стили из этой директивы, а иначе просто проигнорирует весь блок кода.
Если хотите проверить целый селектор, используйте функцию @supports selector(), которую удивительно хорошо поддерживают браузеры.
@supports selector(:nth-child(1 of .class)) {
/* Сделать что-то */
}
Если хотите узнать больше, Крис Койер написал неплохую заметку о @supports selector().
В текущем проекте я оказался в ситуации, где нужно было проверить поддержку относительно нового селектора : where (). Ситуация непростая: и :where(), и @supports selector() появились в браузерах примерно в одно и то же время, так что если вы хотите таким способом проверить, поддерживается ли селектор старыми браузерами вроде Safari 13, то ничего не получится. А мне нужно было нормальное решение для старых браузеров, так что я стал искать альтернативы и в итоге решил использовать JavaScript.
Я нашёл это решение в посте Леа Веру. В 2011 она писала о том, как проверить поддержку CSS-селекторов через создание нового элемента style с нужным селектором. После этого мы проверяем, появилось ли правило в таблице стилей. Это хороший ход даже для браузеров старше IE8.
Но Леа упомянула и более простой способ: использование document.querySelector() в выражении с try... catch (). И учитывая, что Selectors API уже работает довольно хорошо, я остановился на этом варианте. Смотрите сами:
try {
document.querySelector(selector)
} catch (error) {
console.error(error)
}
Браузер попробует выполнить метод document.querySelector() с тем селектором, который мы хотим проверить. Если селектор не поддерживается, программа выдаст исключение и выполнит код в блоке catch. В примере выше ошибка выведется в консоль.
Обернем это в переиспользуемую функцию, которая вернет true, если селектор поддерживается, или false, если нет.
const isSelectorSupported = (selector) => {
try {
document.querySelector(selector)
return true
} catch (error) {
return false
}
}
Теперь вы можете проверить поддержку любого селектора и, например, добавить класс прямо к элементу <html>, если браузер в порядке.
if (isSelectorSupported(":where(body)")) {
document.documentElement.classList.add("supports-where")
}
Я бы рекомендовал проверять поддержку селекторов только с помощью CSS. Но если по каким-то причинам этот способ вам не подходит, используйте эту маленькую полезную функцию.
- 9 августа 2022
Зачем фронтендерам React, если есть JavaScript
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Сайты на чистом JavaScript давно стали редкостью: обычно при разработке используют библиотеки и фреймворки. Одна из самых популярных библиотек — React. В этой статье мы познакомимся с её основными принципами и идеями. Мы расскажем, что из себя представляет React, какие у него преимущества в сравнении с другими инструментами и как работать с React-компонентами.
- 8 апреля 2022
TypeScript. Зачем он нужен и почему так популярен
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
JavaScript-код должен работать предсказуемо в любой ситуации. Мы можем добавить в него огромное количество проверок, но тогда он станет громоздким, и его будет сложно сопровождать. Или можно добавить комментарии и подсказки, но это не защитит нас от неверного использования кода. В такой ситуации на помощь приходит TypeScript. Давайте разбираться, чем он полезен для JavaScript-разработчиков.
- 23 марта 2022
Типы данных в JavaScript. Инструкция для начинающих
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Как и любая компьютерная программа, JavaScript нуждается в наведении порядка в данных, в их структурировании. На языке JavaScript мы говорим, что если данные имеют одинаковую структуру, то они имеют одинаковый тип. Внутренняя организация данных может быть простой, как ДА или НЕТ, а может быть весьма замысловатой, как дерево HTML-элементов или маршруты на карте навигатора.
Примитивные типы. JavaScript предлагает разработчику несколько простых, примитивных, типов. Среди них: boolean, number, string. Примитивными эти типы называют за то, что значения этих типов нельзя поменять. Их можно клонировать, встроить в другие значения... Через минуту увидим как это происходит
Работа с наборами. Дополнительно JavaScript предлагает несколько типов объектов для работы с наборами — массивы, словари, множества. Это очень кстати, попробуй вспомни, как эффективно реализовать сортировку.
Готовые структуры для хранения информации на все случаи жизни не напасешься, поэтому JavaScript предоставляет разработчику полную свободу в этих вопросах, и разработчик может создавать самостоятельно бесконечное разнообразие типов для собственных нужд.
Давайте обсудим детали разных типов данных, как примитивных, так и встроенных. Поговорим и о кастомных типах.
- 3 марта 2022
Как работать с Redux
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Всё, что находится в оперативной памяти компьютера и относится к работе программы, можно назвать состоянием приложения. Приложения могут быть составлены из блоков, модулей и компонентов. У каждого блока может быть своё собственное состояние. У выпадающего списка собственным можно считать состояние признака видимости опций. Это следствие того, что пока значение выпадающего списка не поменялось, поведение остальных частей приложения не изменится.
Глобальное состояние приложения — это часть состояния приложения, которое используется, учитывается и изменяется в разных частях, модулях, компонентах этого приложения.
Будем считать, что остальные части приложения меняют свое поведение в зависимости от того, какой пункт списка выбран. Это и есть пример глобального состояния.
Глобальное состояние должно быть доступно из любой части приложения, а при его изменении компоненты приложения должны произвести необходимые вычисления. Следовательно, нам необходимо правильно управлять глобальным состоянием.
- 19 февраля 2022
Что такое и зачем нужны алгоритмы
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
В начале карьеры разработчикам бывает трудно представить, зачем нужны алгоритмы во фронтенде, потому что большинство задач джунов можно решить и без них. Но когда дело доходит до серьёзных задач, грейдов и зарплат, знание алгоритмов выходит на первое место.
- 10 февраля 2022
Кодгайд: почему, зачем и как
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
«Пора выбрать единый способ оформления кота» — подумали мы с Сашей, когда перестали понимать, что происходит. Мы выпускаем много обучающего материала, и пора привести его в порядок.
Конечно, первым делом мы пошли смотреть на текущие гайды. Каждый нас чем-то не устраивал, поэтому мы решили создать собственный. Мы внимательно изучили и взяли всё лучшее из:
- Code Guide by @mdo
- CSS Guidelines by Harry Roberts
- Idiomatic CSS by Nicolas Gallagher
- Primer Guidelines by GitHub
Так мы собрали репозиторий с нашим кодгайдом и отправили его в публичное плавание
- 9 февраля 2022
Регулярные выражения
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Регулярные выражения — это инструмент, который позволяет фронтендеру быстрее находить и анализировать информацию. Благодаря ему можно не только эффективнее решать задачи, но и писать код, который будет лучше работать. Причем не стоит использовать этот метод везде: иногда он только усложняет жизнь.
Наше недавнее исследование вакансий показало: знание регулярных выражений и навык работы с ними требуется в 24% вакансий продуктовых компаний для фронтенд-разработчиков с опытом больше двух лет.
Давайте разберёмся, что такое регулярные выражения и как грамотно их применять.
- 13 декабря 2021
6 книг по JavaScript для начинающих
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Все вокруг говорят, что книги — прошлый век. Но вовремя прочитанная хорошая книжка может здорово помочь в изучении нового языка или технологии, а то и вообще целиком объяснить какую-нибудь важную штуку. Например, какие бывают алгоритмы, или зачем нужен рефакторинг. К тому же, хоть фреймворки меняются каждый год, основы обычно долго не меняются.
Мы опросили знакомых разработчиков, узнали, что читают они сами, и предлагаем вам подборку свежих (на момент выхода статьи) изданий хороших книг по JavaScript.
- 1 сентября 2021
12 полезных книг по JavaScript
🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
Делимся подборкой книг, которая пригодится любому программисту (но особенно веб–разработчику) — в ней 12 книг, от подробных руководств по JavaScript до классики Роберта Мартина о чистом коде.
- 27 октября 2020