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

в 16:48, , рубрики: css, javascript, Веб, Разработка веб-сайтов

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

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

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

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

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

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

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

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

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

Вкусности 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

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js