Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Ох, что тут принесло!
Вот вы все, наверняка, знаете о том, что существуют приложения, позволяющие редактировать документы нескольким людям сразу. И что любой современный проект не может без этого обойтись.
Далеко ходить не надо: Google Sheets, Google Docs, Miro, да даже Microsoft в онлайн и не очень офисных пакетах это позволяет. И, кстати, онлайн игры это тоже самое что ни на есть приложение для совместной работы. Особенно это интересно в файтингах, но об этом потом.
Общее название структур данных для организации подобного это CRDT. Conflict-free Replicated Data Type, или, по-русски, бесконфликтная репликация данных.
Там на самом деле довольно сложная алгебра, можно хотя бы глянуть программу обучения в ВШЭ, чтобы сойти с ума. Но гораздо интереснее посмотреть на примерах, как это работает. И сегодняшняя статья дня это позволяет.
Встречайте: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/
Статью не назвать простой, а реализацию — промышленной, но оно работает и очень впечатляет! Всем рекомендую, котаны.
#crdt #algorithm
Белый хакер , пентестер, разработчик , программист , только начинаешь разбираться в азах защиты , обхода уязвимости - если это о тебе , то добро пожаловать 🧑🏻💻
- Полезный софт
- Проверка систем на уязвимость
- Как узнать пароль от Wi-Fi
- Как обезопасить свои личные данные
- Подборки бесплатных и полезных сервисов
Канал с взрослой аудиторией
интересующейся информационной безопасностью и в частности языками C++,SQL,Java,Python,JavaScript,C#, Html
Подписывайся и обучайся вместе с нами
👉 /channel/soft_bezopasno
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect
. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect start
После чего
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2 bisect
выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.
Если эта версия работает хорошо, сообщаем bisect
об этом: git bisect good
. Ну или bad
, если нет. И продолжаем; снова случится checkout
коммита посередине.
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good
и bad
есть ещё old
и new
.
Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
#такое дня
Вы, наверное, уже слышали, что Adobe выпустила Photoshop for Web: https://photoshop.adobe.com/
Работает только в Chrome, потому что — кто бы мог подумать — Google активно участвовал в создании и подгонке кода. По этому поводу даже выпустили статью о процессе создания и об используемых технологиях: https://web.dev/ps-on-the-web/
Впрочем, со времён порта Quake 3 мало что поменялось, разве что, используя всё тот же Emscripten, код на C++ стали собирать в WebAssembly, а не чистый JavaScript 🙂
Кстати, по этому поводу они в процессе добавили отладку WebAssembly в девтулзы.
Собственно, вот и статья: https://web.dev/ps-on-the-web/
А теперь здоровая такая ложка дёгтя.
Не секрет, что я нахожусь в Финляндии. Но я не могу потестировать! Мне пишет, что продукт заблокирован в моей стране.
И всё бы ничего, GPDR и прочее, вот только нюанс: не открывается лишь с личного профиля. С рабочего и дублёра — открывается.
И единственное отличие, что я нашёл — это второй язык в профиле браузера. Русский.
И есть у меня дикое предположение, что Adobe использует сложный фингерпринтинг и блокирует по языку, предполагая, что я в РФ. Даже если это не связано конкретно с языком — причина очевидна.
Не очень приятно. Поэтому, используйте https://www.photopea.com/ для ваших мелких задач. Меня не подводила, дизайны сайтов и превьюшек открываются отлично 🙂
#webassembly #chrome #photoshop
#статья дня
Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?
Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:
transform: translateX(20px) rotate(40deg) scale(1.5);
может быть записано как:
translate: 20px;
rotate: 40deg;
scale: 1.5;
Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate
👉rotate
👉scale
. И, естественно, повторяющиеся правила будут схлопнуты.
Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.
#css #transform #бородач
#статья дня
Глупо считать, что сложные системы это привилегия айти, пусть даже айти зачастую пронизывает их с ног до головы. Хотя, конечно, стоит признать, что даже кажущиеся простыми системы на самом деле далеко не такие (на иллюстрации — система уведомлений в Slack).
Поэтому ровно так же глупо считать, что отладка сложных систем и разбор инцидентов должны происходить только по айтишным принципам и правилам. Например, тот же самый «подход «пяти почему?», широко разрекламированный книгой и движением «Бережливый стартап», слишком часто применяется чтобы найти виноватого, но никак не чтобы улучшить систему.
Сегодняшняя статья имеет простое и понятное название: «How Complex Systems Fail», имеется перевод на русский: «Как ломаются сложные системы». Автор — доктор Ричард Кук. В смысле медицины доктор.
В чём суть? Всё просто: опасность – неотъемлемый атрибут сложных систем. На этом можно было бы и закончить, но там ещё 17 пунктов. Кому-то они помогут расслабиться, очень надеюсь.
Забавно, что некоторые из пунктов отлично вписываются в рефакторинг. Например:
10. Все действия специалистов – авантюры
14. Изменения создают новые виды сбоев
18. Работа без сбоев требует опыта работы со сбоями
Прописные истины? Возможно. Но их стоило собрать в одном месте. И собрали — аж в 1998 году.
В общем, всем рекомендую, котаны.
#system #testing
#ссылка дня
В сентябре прошла Practical ML Conf от Яндекса и вот, наконец, стали доступны записи.
Наиболее интересные доклады:
1. Zero-cost fault tolerance в распределённом глубоком обучении
Руководитель группы модернизации нейронных сетей Яндекса, Алексей Морозов о том, что делать чтобы избавить специалистов от необходимости постоянно проверять работоспособность системы и вообще не думать об инфраструктурных вопросах
2. Multi-view pathology detection on medical images
Евгений Сидоров, Head of AI, Third Opinion, рассказал о методе анализа медицинских снимков на основе множественных проекций – он позволяет восполнить недостаток трехмерной визуальной информации. Интересно, что здесь применили опыт из самоуправляемых автомобилей.
Я в университете максимум такие изображения воссоздавал по данным, но уж никак не анализировал...
3. Геоэмбеддинги: векторное представление контекста в пространственной аналитике
Юлий Шамаев из ВТБ рассказал как его команда использует ИИ, чтобы определить лучшее расположение для банкоматов и банковских отделений.
Записи докладов доступны здесь
💉 SQL Injection Master - самый полный курс по SQL инъекциям
Старт: 9 октября
Продолжительность: 3 месяца
На курсе подробно разберём эксплуатацию SQL-инъекций, одного из наиболее распространенных и опасных видов атак на веб-приложения. Вы узнаете не только о том, как обнаруживать и эксплуатировать SQL-инъекции, но и как защитить свои веб-приложения от подобных атак.
Курс будет полезен как новичкам в сфере информационной безопасности, так и продвинутым специалистам.
🎓 В ходе обучения вы научитесь:
- Базовым навыкам работы с SQL
- Поиску уязвимостей в базах данных
- Внедрению произвольного SQL-кода в уязвимые приложения
У данного курса нет аналогов в СНГ и англоязычном пространстве.
🏆 Выдаём УПК/сертификат при успешной сдаче экзамена. Возможна оплата в рассрочку
📌 Узнать подробнее о курсе
Реклама. ООО "АКАДЕМИЯ КОДЕБАЙ". ИНН 9706020333. erid: LjN8KXzRw
📣 Как не провалить свой проект после релиза?!
Наверно, каждый из вас слышал что-то про custdev, бережливый стартап и т.д
Так вот, СРО MasterTMS на практике показывает, как этим пользоваться в своем новом канале!
Советую подписаться тем, кто хочет чтобы проект реально полетел!
Ссылка
#фишка дня
Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort()
.
Вы не представляете какое количество людей просто не задумывается о том, что sort
— мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.
Да, в большинстве случаев ничего страшного не произойдёт, но в остальных — будет неприятно.
Так вот, к чему это я. С выходом Firefox 115 в июле этого года мы получили иммутабельные методы работы с массивами во всех браузерах:.toReversed()
.toSorted()
.toSpliced()
.with()
Если что, with
— это про замену элементов по индексам.
Есть и полифиллы на core-js, так что без работы никто не останется.
И это прекрасно.
#js #array #sort
Привет читателям Будней разработчика от сеошника Гайдука Константина! Предлагаю подписаться на мой авторский канал о продвижении сайтов.
У себя на канале делюсь новыми методами, в том числе опубликовал инструкцию по накрутке пф в Гугле, привожу списки работающих ссылочных доноров, недавно рассказал, как заработал 450 тыс. на партнёрках хостингов, выкладываю результаты SEO экспериментов, в общем, ценю время читателей и даю только полезную информацию без воды)
#фишка дня
Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).
Вот только есть нюанс.
Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?
Использовать селектор атрибута: [readonly].
Пример: https://codepen.io/elad2412/pen/wvpmjGR
Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.
Скелетон вернётся с новыми подробностями о фронтенде завтра.
#css #html #input #бородач
#заметка дня
Чем отличаются auto-fit и auto-fill в гридах?
Отвечает Александр Друзь.
Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)
Так в чем же разница, словами? :)
При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.
В общем, всё довольно просто.
#css #grid #repeat #бородач
#фишка дня
Я недавно писал пост про реализацию панелей с изменяемым размером. Ну как в редакторах или на том же кодпене: /channel/htmlshit/2211
Так вот, забудьте. Если стоит задача просто сделать пару панелек и дать возможность изменять их размер, это можно сделать чистым CSS!
Да, многие уже догадались, что речь идёт о свойстве resize: https://codepen.io/alinaki/pen/MWZXzMY
Интересный момент — если элемент блочный, overflow обязательно должно быть hidden.
«Не, погоди, а где панели-то?»
Терпение! Глядите, что придумал небезызвестный Jhey: https://codepen.io/alinaki/pen/zYyaMQB
Суть в том, что создаётся грид:
grid-template-columns: auto 1fr;
Представляем вам Kaspersky Team — там разработчики и руководители «Лаборатории Касперского» делятся своим опытом в IT-индустрии и ищут новых коллег.
Переходите на канал, чтобы:
● узнавать новости про IT;
● почитать про C/C++, C#, Java, React, TypeScript, SQL, Python, Git, Docker, DevOps;
● быть в курсе актуальных вакансий, стажировках и мероприятий;
● пообщаться с экспертами и задать вопросы.
Нам, например, понравились эти посты:
● Интересно узнать про традиции GReAT превращать все в перформанс? Почитайте историю Виталия Комлюка про веселую жизнь в компании;
● Хотите превратить работу в хобби? Тогда вам пост от ведущего исследователя киберугроз Бориса Ларина.
Подписывайтесь на Kaspersky Team и узнавайте все о вакансиях и жизни компании 😎
Реклама. АО "ЛАБОРАТОРИЯ КАСПЕРСКОГО". ИНН 7713140469. erid: LjN8K3jhJ
#статья дня
Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/
Итак, что такое View Transitions API?
Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.
Ну да ладно, в общем, суть в том, что теперь можно браузеру объяснить, как конкретно применять изменения к DOM, какой элемент за каким закреплять и что делать с остальными.
В статье огромное число примеров, от простейших патчей дерева до анимирования нескольких элементов разом.
Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.
Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd
Никаких плагинов! Будущее здесь 🙂
#css #view #transition #бородач
#фишка дня
Понадобилось мне тут создать список полей для функции watch
(обозреватель введенных значений) в react-hook-form.
Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants]
.
А watch
на вход принимает одномерный массив строк. Так что же делать?
А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.
Удобно? Удобно.
#js #map #flatMap
Как делать релизы простыми и безболезненными? Поговорим об этом на бесплатном вебинаре 10 октября в 18:00.
На встрече Java-разработчик СИБУР Диджитал с 12-летним опытом Анатолий Саблин:
— поделится опытом, как правильно разрабатывать и обновлять программные продукты;
— расскажет, чем отличаются методы управления проектами (SCRUM, kanban);
— проведет Q&A-сессию.
Регистрируйтесь здесь, чтобы узнать секрет, как легко перейти от разработки к эксплуатации.
Реклама, ПАО «СИБУР Холдинг», ИНН 7727547261, Erid 2VtzqvnrLrw
#фишка дня
Как предотвратить взаимодействие пользователя с элементом?pointer-events: none
— скажете вы.
Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.
Благо, есть решение!
Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert
. Что это такое?
Ну, исходя из названия inert (
инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).
То есть, если вы зададите элементу атрибут inert
, то:
1. Будет предотвращена обработка события click
.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).
Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.
Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB
#inert #attribute #html #a11y #бородач
5 и 6 декабря ждём разработчиков на главной конференции Яндекса YaTalks 2023
Более 100 экспертов, управленцев и учёных выступят на мероприятии и поделятся опытом известных российских и международных компаний.
Впервые за три года мероприятие пройдёт офлайн в Москве и Белграде. В первый день обсудят хардовые технологии и последние тренды в IT, а во второй — командную работу и научные явления.
Кроме докладов, участников ждут:
👉 Встречи и индивидуальные консультации с топовыми экспертами из российских и международных IT-компаний
👉 Лайвкодинг, воркшопы и нетворкинг
Регистрируйтесь и приходите. Если не сможете быть офлайн, всё равно регистрируйтесь — мы пришлём вам доступ ко всем записям выступлений, которых не будет в трансляции.
Онлайн-трансляцию, как и всегда, можно будет посмотреть из любой точки мира.
Зарегистрироваться
#фишка дня
Я не знаю, зачем вам эта информация, но в CSS в числе типов есть Infinity.
Ах, вы не знали, что CSS давно уже типизированный язык? Ну я напомню: /channel/htmlshit/1971
Скоро вернусь с постом, котаны, не переключайтесь.
#codepen дня
Гори всё синим пламенем!
Эх, жаль, в своё время на проекте, где подобное было уместно, я не шибко много знал о шейдерах.
Впрочем Awwwards получили :)
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
#видео дня
Тут Андрей Ситник (PostCSS и Logux) выложил видео с митапа Злых Марсиан в Лиссабоне. Мне кажется, ни Андрея ни Марсиан отдельно представлять не надо 🙂
Продублирую выложеные видео здесь и, заодно, напомню об одном предстоящем событии, уже не Марсиан 🙂
1. Роман Шамин о том, как делать динамическую тему приложения: https://www.youtube.com/watch?v=K6ksuVzTz5U
2. Ольга Русакова о том, как продвигать опенсорс-проекты: https://www.youtube.com/watch?v=9Xg__hgL8zg
3. Глеб Строганов об адаптации иконок к особенностям шрифтаа: https://www.youtube.com/watch?v=0fQhhEM1AMw
4. Александр Байгельдин о Cloudflare Workers: https://www.youtube.com/watch?v=mjCMW8MpP30
5. И рэп про разработку, а заодно как сделать рабочую кассету на React и SVG, от Элизабет Оливейры: https://www.youtube.com/watch?v=bcbnkm2IZjk
А отдельное событие, о котором я хотел вам напомнить, это ViteConf, уже завтра: https://viteconf.org/23/
Сгенерируйте себе билетик и добавьте в календарь, котаны!
#events #vite
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...
...и ваша секция уехала под шапку ко всем чертям. Что же делать?
Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.
В чем отличие 2 от 3?
Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.
Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html
#css #scroll #snap #anchor #бородач
#заметка дня
Итак, пару недель назад вышел Chrome 117.
Мне очень нравится как работает их PR-команда. На каких фишках заострено внимание в заметках о выпуске? Естественно, о наисвежайших! Тех, которые в остальных браузерах либо на горизонте, либо за ним.
А что PR-команда запнёт в самый коней заметки? Естественно, многими желанные сабгриды. Хотя уж о них говорят с десяток лет.
Сабгриды поддерживаются в Firefox уже несколько лет. Больше года — в Safari. И вот, наконец, добрались и до Chrome.
Ладно, с сарказмом закончили, что же такое сабгриды, subgrid?
Это возможность указывать потомкам расположение в основной сетке родителей. На MDN хорошо описано, не поленитесь пройти. Ну или вот, собственно, и Google разродились, очень подробно: https://web.dev/css-subgrid/
Но мы же с вами хотим получить моментальную дозу эндорфинов и решить свои насущие проблемы, не правда ли, котаны?
А что может быть насущней единой высоты картинок в описаниях товаров? Да, пожалуй, ничего.
Поэтому я вынесу этот кодпен отдельно: https://codepen.io/jh3y/pen/zYyYGLx
Включите там сабгрид, насладитесь, прочитайте код. Прочувствуйте момент.
Молитвы были услышаны, жить стало проще 🎉
#css #grid #sudgrid
#шпаргалка дня
Уникальное предложение!
Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg
Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.
#pr #process #work #бородач
Нейросети Яндекса можно использовать для самых разных задач. Например, чтобы составить учебный план, придумать поздравление к празднику или получить краткий пересказ длинного текста. Но YandexGPT — это ещё и мощный инструмент для бизнеса. Последние несколько месяцев мы тестируем его вместе с сотнями компаний. Рассказываем, как проходит процесс и каковы первые результаты.
💡Кто участвует в тестировании?
Разработчики, ритейл и банки, а также промышленные и медиакомпании. Около 75% участников — это малый бизнес.
💡Как YandexGPT может помочь бизнесу?
Компании используют нейросеть для автоматизации процессов и решения реальных задач. Например, для анализа пользовательских запросов или создания чат-ботов, которые умеют учитывать информацию из внутренних баз данных. Также участники тестов применяют языковую модель для написания, анализа и редактирования текстов. Так, один из них придумывал с помощью YandexGPT стихотворные слоганы.
💡Какими были первые результаты тестирования?
Разработчики Яндекса смогли лучше понять потребности бизнеса — теперь у них будет возможность усовершенствовать YandexGPT, основываясь на отзывах и пожеланиях участников теста. Тестирование уже позволило реализовать новую функциональность. В частности, теперь компании могут дообучать нейросеть на собственных данных, чтобы адаптировать её под свои задачи. До конца года обновлённая нейросеть станет доступна всем клиентам Yandex Cloud для разработки собственных приложений.
Подписывайтесь 👉@techno_yandex
Не пропускайте новости Яндекса тут @yandex
Ищем IT-специалистов в крупные, интересные проекты.
Вакансии регулярно публикуются на нашем канале IT_One, подписывайтесь, чтобы не потерять!
Прямо сейчас мы в поисках:
- Java Разработчика
- Эксперта по разработке ETL
- Devops инженера и др.
Канал с вакансиями по различным IT-направлениям здесь
Реклама. ООО "ИТ1-РТК". ИНН 9717097105. erid: LjN8KUw3N
#ссылка дня
Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.
Нарисовал его бывший коллега, а потом я много раз пытался обновить и освежить. Но терялась душа 🙂 Так что обновлённую версию вы могли встретить разве что в рекламе канала, многие по ней же подписались.
Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/
По его названию можно было бы подумать, что там одни только иконки. Но нет!
Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!
А я потратил тогда кучу времени на поиск логотипов и приведение их в приличный вид... Аж обидно.
Но вот вам, котаны, берите и пользуйтесь 🙂
#icons #logos #emoji #flags
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (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