Те, чого ви не знаєте про веб-розробку

Ні, це не черговий пост, що говорить вам, що ви гірше. Я тут не для того, щоб розповісти вам те, чого ви не знаєте про веб-розробці.
Я тут для того, щоб запитати вас… Звідки вам знати те, чого ви не знаєте про веб-розробку?
Уявіть місто, який ви добре знаєте. Можливо, ви жили в ньому все своє життя. Ви знаєте кожну вулицю і провулок, кожен закуток, чи не так? Звичайно немає. Неважливо, наскільки добре ви знаєте місце, там, безумовно, буде сходова клітка, дверний отвір або підземний клуб, розміщений у вагоні поїзда, про яку ви не знали. Але, без ходіння по кожній вулиці міста, як ви знайдете ці невідомі місця? Все невідоме ховається за відомим, похована глибоко.
Те ж саме і з веб-розробкою: чим більше ви знаєте, тим утомительней буде знайти що залишилися крихти інформації. Це і проблема.
Цю проблему варто спробувати вирішити.
Але я знаю все, що мені потрібно знати
Якщо ви так вважаєте, це здорово. Я не навмисний людина, і я думаю, що це абсолютно нормальний, ідіотський погляд на життя.
щось корисне
Замість того, щоб ви читали мої нескладні думки, я хотів би залишити можливо-корисну інформацію. Отже, без зайвих слів, ось кілька речей, які я дізнався за недавній час.
Смаколики 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 під час простою браузера.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.