- PVSM.RU - https://www.pvsm.ru -

То, чего вы не знаете о веб-разработке

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

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

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

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

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

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

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

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

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

Вкусности 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 [1] для показа контента не втором экране.
  • Вы можете узнать поддержку CSS в JS. Например, вы могли бы добавить/удалить DOM-элемент если CSS.supports('display', 'flex').
  • <table> — элемент имеет методы .insertRow() [2] и .deleteRow() [3].
  • Элемент <details> [4] скрывает/показывает свой контент.
  • Интерфейсы событий имеют удобные константы: если вы захотите узнать фазу обработки события, вместо 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 [5], NodeIterator [6] и NodeFilter [7] может понадобиться, например, для удаления всех комментариев в 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

Источник [8]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/199880

Ссылки в тексте:

[1] Presentation API: https://www.w3.org/TR/2016/CR-presentation-api-20160714/

[2] .insertRow(): https://developer.mozilla.org/ru/docs/Web/API/HTMLTableElement/insertRow

[3] .deleteRow(): https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/deleteRow

[4] <details>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[5] TreeWalker: https://developer.mozilla.org/en/docs/Web/API/TreeWalker

[6] NodeIterator: https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator

[7] NodeFilter: https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter

[8] Источник: https://habrahabr.ru/post/312812/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox