#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook

#ссылка дня

Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook

#ссылка дня

Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook #бородач

#фишка дня

Позавчера вышел Chrome 117. И по его поводу надо бы написать пост побольше. Ну хотя бы по той причине, что там появились сабгриды!

Наш властелин гридов, думаю, будет рад.

CSS Subgrid были внедрены в Firefox 2 декабря 2019 года, а в Safari — 11 сентября 2022 года. Я специально так растягиваю даты, чтобы вы насладились отставанием Хрома от недооценённых конкурентов.

Edge ещё тупит, но он по факту тоже Хром на свистоперделках, так что скоро, скоро.

Ну а фишка дня — наконец-то для понимания HTTP-кодов вам не придётся смотреть на котов! Какой каламбур, ня.

Они теперь прописаны прямо в описании запроса на вкладке Network.

Почему это важно?

Ну, например, потому что больше и больше сервисов начинают правильно их использовать, а их фронтенды — правильно им подчиняться. Так что всплывает множество не самых ожидаемых кодов.

Всем коданы, котаны!

#http #chrome #subgrid

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.

Не пишите лишнего, котаны!

#http #html #trick

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.

Не пишите лишнего, котаны!

#http #html #trick #бородач

#статья дня

Встроенная в браузеры функция выполнения HTTP-запросов fetch — штука достаточно кондовая.

Топорная, если хотите.

Ошибки бросает только на ошибках сервера или соединения (404 — не ошибка), нужно самому формировать заголовки запроса, даже самому формировать строку с JSON или данными формы в urlencode...

Очень многие вместо неё как использовали, так и продолжают использовать тот же axios, кто-то берёт разные иные обёртки, как Tanstack Query aka React Query, а кто-то один раз написал свою реализацию обработки ошибок и прочего бойлерплейта — и забыл.

Так вот, позвольте вам напомнить, что таки есть причина для этой кондовости. По-порядку.

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

let response = await fetch("/some-url")
let myObject = await response.json()

Но почему? Почему fetch сразу данные-то не отдаёт? К чему эти танцы?

Так вот, всё дело в том, что мир не ограничивается гонянием джисонов по сети. Возможно, нужен просто текст. Возможно, решение нужно принять ещё до того, как заняться обработкой тела запроса. Возможно, бинарные данные. А, возможно, данные кусками или потоком — stream — который можно прервать в любой момент:

async function readData(url) {
  const response = await fetch(url);
  for await (const chunk of response.body) {
    // Do something with each "chunk"
  }
  // Exit when done
}

В любом случае, так или иначе, собственно, fetch возвращает промис с результатами запроса, а уже потом — дело за вами, как его обработать.

И вот хороший пример — от Тома Стивена: https://tomontheinternet.com/why-two-awaits/

В статье он даёт ссылку на код с демонстрацией: https://github.com/tom-on-the-internet/fetch-demonstration

Ну и я решил и в песочницу этот код запихать, для наглядности и понимания процесса: https://codesandbox.io/p/devbox/mvhrgz

Так что, возможно, fetch хорош таким, какой он есть. Универсальным.

#fetch #http #stream

#ссылка дня

Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook #бородач

#ссылка дня

Наверное, стоило прислать это сразу после пятничных котов :)

Итак, вашему вниманию: диаграмма разрешения кодов HTTP.

Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file

Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.

Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.

Ну и там, где в спецификациях оставлены пробелы — дополняет.

Всё весьма хорошо укладывается в голове.

#http #diagram

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

В спеке буквально прописано, что такая ссылка ведёт на текущий документ, со всеми его параметрами запроса.

Не пишите лишнего, котаны!

#http #html #trick #бородач