[Из песочницы] То, чего вы не знаете о веб-разработке16.10.2016 21:48

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


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


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


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


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


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

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


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

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


Вкусности 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 запросы совпадают
  • Есть целая куча тегов для пользовательского ввода, не только или 
    . Например,  для обозначения текста с клавиатуры или названия клавиш,  для обозначения переменных и  для вывода программы.
  • Можно сделать вращение по кругу с помощью transform: rotate(1turn).
  • text-align-last устанавливает выравнивание последней строчки текста.
  • Существует Presentation API для показа контента не втором экране.
  • Вы можете узнать поддержку CSS в JS. Например, вы могли бы добавить/удалить DOM-элемент если CSS.supports('display', 'flex').
  •  — элемент имеет методы .insertRow() и .deleteRow().
  • Элемент
    скрывает/показывает свой контент.
  • Интерфейсы событий имеют удобные константы: если вы захотите узнать фазу обработки события, вместо 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 во время простоя браузера.

    • Комментарии (6)

    • 16 октября 2016 в 20:23

      0

      ↑

      ↓

      document.images — наследие диких времён web 1.0. Есть ещё document.links, document.forms и печально известный document.all — все работают для обратной совместимости.

      Например, на Хабре document.forms[0] — форма поиска, document.forms[2].comment_text — поле ввода комментария.

      А так, и правда есть много интересного, хотя большинство — давно известные фишки. Про currentColor я даже на докладе «Приручаем SVG» рассказывал год назад.

      • 16 октября 2016 в 21:21 (комментарий был изменён)

        0

        ↑

        ↓

        document.forms[2].comment_text — поле ввода комментария.

        document.forms.comments_form.elements.text

    • 16 октября 2016 в 20:25

      +5

      ↑

      ↓

      А где ссылка на оригинал? Перевод читать невозможно.


      Я не преднамеренный человек

    • 16 октября 2016 в 20:51

      +1

      ↑

      ↓

      что-то много переводов —, а самим не получается

    • 16 октября 2016 в 21:03 (комментарий был изменён)

      +2

      ↑

      ↓

      Оригинал:
      by David Gilbertson

    • 16 октября 2016 в 21:10

      +1

      ↑

      ↓

      Обо всём и ни о чём.

    © Habrahabr.ru