Нет, это не очередной пост, говорящий вам, что вы хуже. Я здесь не для того, чтобы рассказать вам то, чего вы не знаете о веб-разработке.

Я здесь для того, чтобы спросить вас… Откуда вам знать то, чего вы не знаете о веб-разработке?

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

То же самое и с веб-разработкой: чем больше вы знаете, тем утомительней будет найти оставшиеся крупицы информации. Это и проблема.

Эту проблему стоит попытаться решить.

Но я знаю все, что мне нужно знать

Если вы так считаете, это здорово. Я не преднамеренный человек, и я думаю, что это совершенно нормальный, идиотский взгляд на жизнь.

Что-то полезное

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

Вкусности JSON parse и stringify

Знали ли вы, что JSON.parse() может делать умные вещи? Представьте, что вы получаете информацию из API и он возвращает вам строки true и false вместо логического типа и цену в виде строки со знаком доллара, а не число. Мы можем использовать JSON.parse() для того, чтобы их конвертировать.

Затем мы снова преобразуем объект в строку, передавая JSON.stringify() дополнительные параметры, чтобы вывести красивый JSON с отступами во вкладке результата ниже.

String.replace принимает функции

Это — как мой зеленый жакет из крокодиловой кожи. Я знаю, что это хорошая идея. Я знаю, что однажды я буду рад, что он у меня есть, но на данный момент я не уверен, что мне с ним делать.

Во всяком случае, при использовании string.replace(), во втором параметре можно передавать функцию, которая будет вызываться при каждом совпадении. Пример ниже заменяет все обратные апострофы в тексте открывающим или закрывающим <сode> — тегом

CurrentColor

Отличный пример того, как знание отличается от мудрости. Я знал, что в CSS есть ключевое слово currentColor, я просто знал. Но я не был достаточно умным, чтобы понять, что это — лучший способ раскрасить SVG-иконки.

_{^{(JSfiddle автоматически отображает вкладку с JS, нас интересуют оставшиеся три)}}

Теперь, когда мы знаем, что количество перевешивает качество, вот еще 21 вещь, для которых я не потрудился сделать пример кода:

• Вы можете использовать CSS функцию attr(), чтобы получить доступ к атрибутам элемента.
• Написав document.designMode = 'on' в консоли, можно сделать всю страницу редактируемой
• MediaQueryList будет создавать события, если media запросы совпадают
• Есть целая куча тегов для пользовательского ввода, не только <cоde> или <pre>. Например, <kbd> для обозначения текста с клавиатуры или названия клавиш, <var> для обозначения переменных и <samp> для вывода программы.
• Можно сделать вращение по кругу с помощью transform: rotate(1turn).
• text-align-last устанавливает выравнивание последней строчки текста.
• Существует Presentation API для показа контента не втором экране.
• Вы можете узнать поддержку CSS в JS. Например, вы могли бы добавить/удалить DOM-элемент если CSS.supports('display', 'flex').
• <table> — элемент имеет методы .insertRow() и .deleteRow().
• Элемент <details> скрывает/показывает свой контент.
• Интерфейсы событий имеют удобные константы: если вы захотите узнать фазу обработки события, вместо e.eventPhase === 2 вы можете использовать более читабельное e.eventPhase === Event.AT_TARGET (если ввести Event.AT_TARGET в консоли, вы увидите просто '2')
• document.images содержит список всех изображений на странице. Не знаю, зачем.
• Можно вызвать отмену (Ctrl+z) программно: document.execCommand('undo').
• С помощью Node.contains() можно узнать, содержит ли элемент другой элемент. Например: if (document.querySelector('.modal').contains(e.target)) return
• Метод Element.matches() вернет true или false, в зависимости от того, соответствует ли элемент указанному CSS-селектору.
• Трио TreeWalker, NodeIterator и NodeFilter может понадобиться, например, для удаления всех комментариев в DOM.
• Метод Element.classList.toggle добавляет класс, если он отсутствует у элемента, иначе — убирает. Когда вторым параметром передано false — удаляет указанный класс, а если true — добавляет.
• В новых браузерах можно использовать forEach для NodeList, например, document.querySelectorAll('img').forEach(img => console.log(img.src)) выводит ссылки на все изображения в консоль.
• Существует инструмент для работы с запросами в URL, например, new URLSearchParams(location.search).get('sourceid') вернет значение параметра 'sourceid'.
• Я съем свою шляпу, если вы уже знали, что возвращает Window.length.
• window.requestIdleCallback(func) вызывает функцию func во время простоя браузера.

Автор: Eblonko

Источник