14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#молния дня
Итак, если вы используете для своих проектов сервис polyfill.io — время прямо сейчас прекратить это делать.
И причина проста: "В библиотеку, загружаемую на сайты через домен cdn.polyfill.io, был встроен вредоносный код, перенаправляющий пользователя на мошеннические сайты (например, googie-anaiytics.com), букмекерские конторы и online-казино."
Источник цитаты: https://www.opennet.ru/opennews/art.shtml?num=61440
Теперь подробнее.
Сервис Polyfill предназначен для автоматической загрузки кода, дополняющего старые браузеры новыми возможностями JavaScript (ES6+) и DOM API.
Полифиллов, короче, кто бы мог подумать.
И новый владелец — китайская компания Funnull — решил рандомно вставлять редиректы на рекламные сайты и онлайн-казино.
Делая вид, что так и надо.
Самое интересное в этом то, что сама библиотека-то вполне себе Open Source: https://github.com/polyfillpolyfill/polyfill-service
И хостить её можно где угодно. Так что проблемным оказался сам сервис.
Новый владелец старательно удаляет issue с подозрениями: https://web.archive.org/web/20240229113710/https://github.com/polyfillpolyfill/polyfill-service/issues/2834
Если вам Polyfill всё ещё необходим, можно воспользоваться вариантами библиотеки, распространяемыми компаниями Fastly и Cloudflare.
Вообще, случай далеко не первый. Я рад за прежнего владельца и создателя, жизнь себе он обеспечил, но не рад за всех остальных.
#scam #polyfill
Доклады, развлечения и полезные знакомства для ИТ-сообщества Казани ☄️
13 июля в Казани пройдет масштабный ИТ-фестиваль «Сезон кода». Это большое летнее мероприятие от Т-Банка для опытных специалистов по Java, Scala, Mobile, QA и Data в Татарстане.
Залетайте, чтобы прокачать навыки и пообщаться с коллегами в неформальной обстановке. Вот что вас ждет:
— доклады от экспертов из крупных технологичных компаний: T-Банк, VK, Сбер и Magnit Markett;
— полезные знакомства, много общения и обмен опытом со специалистами других компаний;
— ИТ-квиз, диджитал-игра на преодоление препятствий и настольная игра «Спринт или пропал» от инженеров Т-Банка;
— спортивные активности: настольный теннис и баскетбол;
— живая музыка и вечеринка.
📌 Получите билеты за благотворительный взнос от 1000 рублей.
erid:2VtzqvrFWw1
Реклама. АО "Тинькофф Банк", ИНН 7710140679, лицензия ЦБ РФ № 2673
#тип дня
Четыре ночи провёл в деревне в глубинной Финляндии и возвращаться в привычный режим очень и очень тяжело.
Прыжки со скалы просто так не проходят.
Здесь отмечают день солнцестояния. Официальный выходной, плюс многие компании добавляют ещё один день — канун. Из города уезжают вообще все, пустота.
В общем, тип дня от Кори Хауса: как указать TypeScript, что поле принимает любое строковое значение, но при этом получить автоподсказку для наиболее часто используемых из них?
Очень просто:
type Status = 'open' | 'closed' | string & {}type Status = 'open' | 'closed' | Omit<string, "open" | "closed">
#фишка дня
В iOS Safari есть такая фишка: при удерживании пальца на, например, ссылке появляется всплывающее окошко с её предпросмотром. Но иногда это вообще не к месту, потому надо бы найти способ отключить.
Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.
#safari #callout #бородач
#ссылка дня
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process #бородач
#баг дня
Разработчики спецификации:
— Вот вам предложение ввести нативный нестинг в CSS!
Разработчики браузеров:
— Мы сделали вам нативный нестинг в CSS!
Разработчики сайтов:
— Гляди, рендер одного слова занимает пять секунд
Кроме шуток, это действительно интересная проблема. Довольно больно.
Давайте посмотрим на этот пример: https://crisal.io/tmp/lots-of-nesting.html
На моей машине рендерится за 5.4 секунды. MacBook Pro M2 13", Chrome 126.0.6478.63
Safari вылетает и на ноутбуке, и на iPhone.
Firefox показывает кривые данные, но тоже близко к 5 секундам.
Вот ссылка на GitHub issue: https://github.com/w3c/csswg-drafts/issues/2881#issuecomment-1642450622
Проблема нестинга в том, что число комбинаций селектров растёт экспоненциально. И вроде бы понятно, что надо включать мозг, но...
...но делитесь вашими бенчмарками, котаны :)
#css #nesting #bug
#инструмент дня
Продолжаем инструментальную неделю :)
после поглощения VMWare компанией Broadcom, VMWare Fusion Pro (MacOS) и VMware Workstation (Win/Linux) стали бесплатными для индивидуального использования
Думаю, многие знают, что это за инструмент, но если вкратце — средство виртуализации для винды/мака с понятным GUI и уж точно на несколько порядков лучше VirtualBox.
Учитывая, что VirtualBox для macOS на M-процессорах работает максимально плохо...
Нопридется регистрировать учетную запись в Broadcom (для РФ только через VPN).
Заметка о выпуске:
https://blogs.vmware.com/teamfusion/2024/05/fusion-pro-now-available-free-for-personal-use.html
#virtualization #vmware #virtualbox
Хватит терять время на уже готовый код!
Frontend Trends — библиотека фронтендера, где собраны готовые CodePen решения для ежедневных задач. Эффекты при наведении, 3D-анимации, готовые карточки и др.
Зашли – сохранили – применили в своём проекте. Пользуйтесь: @trends_frontend
#инструмент дня
Ладно, предыдущий пост-бородач действительно произошёл слишком рано, но и вы поймите — постоянно приходят новые люди.
Зато сейчас я принёс действительно пушечную штуку: React Internals Explorer.
По названию уже можно догадаться, что эта штука визуализирует процессы, происходящие в React по каким-либо внешним или внутренним событиям.
Очень рекомендую посмотреть видео от автора с объяснением или хотя бы почитать пост в его блоге.
Видео прикреплено к этому посту, но если предпочитаете ютуб — вот https://www.youtube.com/watch?v=qIlfTZxb8_0
Ну и ссылка на сам инструмент: https://jser.pro/ddir/rie
Да, у нас уже были попытки реализации подобного, например от Алекса Сидоренко: /channel/htmlshit/1970
Но представленный инструмент намного глубже погружается в проблему. Заодно, уже сейчас можно посмотреть, как по-разному React 18 и 19 рендерят компоненты.
Не забудьте нажать на кнопку Snippets, ага.
#react #tool #explorer
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
Фронтенд задачки в картинках — просто, наглядно и понятно. Проверяй свои знания в интерактивном формате каждый день.
Присоединяйтесь: @Frontend_Task
#заметка дня
Элемент marquee, который когда-то давно долгое время использовался для создания бесконечной бегущей строки, давно объявлен устаревшим. При этом, желание создавать бегущие строки у дизайнеров и заказчиков никуда не исчезло.
Давайте сразу определимся: хоть он и устаревший, он всё ещё прекрасно работает... в Chrome. Кому-то из разработчиков было весьма интересно переделать его на Shadow DOM и оптимизировать. В Safari и Firefox всё довольно плохо, тормозит безбожно. Поэтому, если ваша задача сделать киоск или использовать в приложении на Electron — не мучайте себя, берите его.
Поэтому долгое время бегущие сроки создавали, используя translate на контейнер и дублирование содержимого. Например, так: https://codepen.io/studiojvla/pen/qVbQqW
Но мы же с вами ровные, зачем нам такие технологии? Можно же жить в 2024 году и не дублировать контент почём зря!
А сделать это можно просто: через CSS-переменные и анимацию индивидуальных элементов! Для этого прямо в разметке указываем порядковый номер элемента и передаём его в определение анимации: https://codepen.io/thebabydino/pen/BaMqgPO?editors=1100
Пример выше — от Аны Тюдор. Вот то же самое, но без Pug, чтобы легче было понять принцип: https://codepen.io/alinaki/pen/poYyaMJ?editors=1100
В чём плюс такого подхода?
1. Никакого дублирования
2. Короткий код
3. Можно применить любые трансформации к каждому элементу, помимо сдвига
4. Фон принадлежит контейнеру и никуда не сдвигается. Можно прозрачность наложить, можно маски, можно глассморфизм... далее — везде.
Не нужны даже псевдоэлементы чтобы затухание сделать (собственно, маска).
Крутота же, котаны? Крутота.
#marquee #бородач
#codepen дня
На WWDC24 Apple похвастались тем, что на SwiftUI теперь можно создавать параллакс-галереи буквально несколькими строчками кода.
Но мы же с вами все знаем, что Web намного круче, как платформа. Мы тоже так умеем!
Правда, только в Chrome...
Ведь у нас есть CSS-переменные и Scroll Timeline API, который мы рассматривали вот тут, даже с полифиллом: /channel/htmlshit/621
Итак, вашему вниманию конфигурируемая параллакс-галерея от Джея: https://codepen.io/jh3y/pen/XWwzYZo
Весь JS там — это часть универсальной панели управления, чтобы задавать параметры.
#css #scroll #animation
Заметки тестировщика - авторский канал тестировщика, который ушел в IT с опытом журналиста 👩💻
Вот уже почти 4 года в профессии, успела поработать в социальной сети и в американской компании.
Сейчас я Senior QA в Wildberries, но продолжаю учиться новому, изучаю автотестирование, базы данных и другие инструменты. В своем канале делюсь опытом, теорией, наблюдениями и ситуациями из жизни.
💡Подписывайся: @qanote
erid: LjN8JzHVV
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 18 июня в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру,сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
#статья дня
Насколько глубокая вложенность элементов влияет на производительность вашего проекта и влияет ли вообше?
Вот Google Lighthouse утверждает, что влияет. Но так ли это на самом деле?
Коннор проверит
Как хорошо, что у нас теперь есть на это ответ: https://frontendatscale.com/blog/how-deep-is-your-dom/
TL;DR:
1. Ощутимая разница начинается на 500 элементах: плоский список рендерится в два раза быстрее вложенного.
2. Далее расхождение растёт практически линейно и на 5000 элементах мы уже наблюдаем 800 мс для вложенного против 180 мс для плоского. Впрочем, это вырожденный случай.
3. И всё бы ничего, но до этого момента всё обсуждение велось для скелета без стилей, точнее, со встроенными браузерными. Набрасываем ещё немного CSS — и к этой прелесть добавляется 150 мс. Что уже может быть совсем заметно глазу.
Вместо вывода:
Да, 5000 вложенных элементов это редкость, но многие дизайн-системы и UI-киты построены вокруг максимально простой структуры Stack-Row-Col-Element, заставляющей вас создавать лишнюю вложенность. Таких комбинаций на странице могут быть тысячи.
Сама по себе вложенность не является чем-то плохим, но она задаёт базу для пересчёта стилей и JS-операций над DOM, поэтому иногда на это стоит обратить внимание.
#render #performance
#ссылка дня
Уже известный нам Ван Дамм, который Брамус, не так давно присоединился к команде деврелов Google Chrome. В какой роли?
Конечно же в роли евангелиста анимаций по скроллу! Кто бы мог подумать :)
Я уже ссылался на его работы и ранее, но теперь всё серьёзно.
Итак, под брендом Chrome for Developers (это вообще отличный проект, занимающий нишу чуть иную, нежели MDN) Брамус выпустил серию видео для обучения анимаций по скроллу в CSS.
Вот: https://developer.chrome.com/blog/scroll-driven-animations-video-course
Ну или ссылка сразу на плейлист: https://www.youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn
И не только обучению, но и паре трюков! Например, определение направления скролла или срабатывание только один раз.
Учитывая, что Scroll Timeline API уже используются даже в Airbnb (пруф), счастливое будущее не за горами!
#css #scroll #animation
Разбираем как решать задачи на LeetCode
✅ Примеры решений
✅ Пояснения
Выбери своё направление:
1. JavaScript
2. Python
3. Java
4. C#
5. C/C++
6. Golang
7. PHP
8. Kotlin
9. Swift
#игра дня
Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.
В принципе, можно и табом с пробелом, но не то...
Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.
Помоги Марио собрать все монетки!
Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.
https://codepen.io/t_afif/full/OJYbVWP
Делитесь вашими скриншотами с лучшим временем :)
#css #scroll #game
Высокотехнологичная компания YADRO в поиске тех, кто программирует на C и С++ 🔍
Актуальные вакансии:
1️⃣ Software Engineer C/C++
2️⃣ Senior C++ developer/Старший инженер-программист С++
3️⃣ Старший/ведущий инженер-программист встраиваемых интерфейсов
4️⃣ Linux Kernel Developer (Linux/WebUI) /Инженер-разработчик C (risc-V)
Ты сможешь реализовывать себя и стать частью команды специалистов, которые создают технологические решения и инновации мирового уровня.
Что ещё тебя ждёт:
– достойная зарплата (размер обсуждается на собеседовании) и прозрачная система премий;
– обучение за счёт компании: учебный портал с курсами и лекциями от экспертов, дополнительное профессиональное обучение, изучение английского, участие в конференциях;
– возможность учиться у лучших специалистов индустрии, расти в рамках своей роли, а также участвовать во множестве различных проектов;
– личное участие в становлении процессов и продуктов, возможность увидеть результат своей работы;
– большое инженерное сообщество, которое постоянно развивается;
– гибридный или удалённый формат работы;
– ДМС со стоматологией с первого дня, консультации юристов, психологов, экспертов по ЗОЖ и управлению финансами;
– скидки для сотрудников, дополнительные day-off;
– комфортные офисы в Москве, Санкт-Петербурге, Нижнем Новгороде и Минске.
Откликайся по ссылкам и присоединяйся к YADRO!
Где искать работу за рубежом?
Если вы ищете работу за рубежом, то канал Dev & ML Connectable Jobs будет полезен для вас!
Ребята собирают вакансии в международных стартапах с русскоязычными фаундерами и командами, публикуют информацию о бэкграунде фаундеров, размере команды и инвестициях, а также делятся прямыми контактами HR для отклика.
Как результат, десятки читателей получили офферы в Neon, InDrive, 1inch, Wheely, Plata и другие компании.
Несколько актуальных вакансий:
– Frontend Developer в Space307 (remote)
– Senior Frontend Engineer (React) в Bird (remote Нидерланды/Литва)
– Frontend Developer в Emerging Travel Group (remote)
– Middle Frontend Developer в Optimax Dev (Ереван)
Подписывайтесь и развивайте карьеру в будущем единороге!
#инструмент дня
Ну что же... на сегоднящний день никого не надо убеждать, что помимо системных пакетных менеджеров нужны ещё менеджеры под конкретную версию конкретной среды разработки.
Есть проекты, которые написаны под Node 18 и не заработают ни на чём ниже. Есть очень старые проекты (да), которые дай бог под 10 заведутся, но всё ещё нужны.
Я уже молчу о вечнозелёных Bun, Deno... ну и так-то Go, Python и Rust тоже требуют собственную микроинфраструктуру на вашем компьютере, которая может отличаться от версии к версии.
И нет, просто иметь разные бинарники компиляторов/интерпретаторов недостаточно — нужно, как минимум, манипулировать переменными среды и тулчейном.
Если говорить только о Node.js, я долгое время использовал nvm (Node version manager): у меня был проект на Ember.js, который собирался только очень старой нодой, а смысла переводить его на что-то новее не было.
Но потом задачи расширились. На новом (текущем) месте работы бакенд проекта на GAS надо было собирать сначала 12 нодой, потом 16... и только сейчас смогли перевести на 18. А фронтенд того же проекта изначально можно было собирать хоть бета-версией. И всё в рамках одного репозитория. И задачи по всей компании схожие.
Потому мы все разом стали использовать Volta.
Volta могла считывать версию ноды сразу из package.json и всё, магия. Но проект малость забуксовал: как минимум, до сих пор не умеет удалять ненужные установки.
Потому, встречайте: Proto.
Прото — менеджер для множества сред разом: Node.js, Bun, Deno, Python, Rust, Go.
На мобиле их сайт выглядит максимально плохо.
- Установка/удаление сред (в Volta нельзя было удалить Node.js например)
- Атомарное конфигурирование инструментов (каждому свой конфиг)
- Развитая поддержка плагинов
- Активное развитие
- Поддержка WASM-модулей.
Ну и материнский проект — moon — крайне мощный тулчейн и менеджер монорепозиториев как для локальной разработки, так и для CI/CD.
Пробуем?
P. S. А кто пробовал https://asdf-vm.com/?
#tool #nvm #volta
#фишка дня
Если вы любитель открывать кучу вкладок и нелюбитель использовать группы, для вас в Chrome есть прекрасное сочетание клавиш Ctrl-Shift-A или Cmd-Shift-A.
Это список вкладок с поиском! Очень удобная штука. Конечно, надо хоть немного помнить, что ты вообще открывал :)
Я просто к чему это, взглянул на экран «своего» джуна… ужас.
#chrome #feature #search #бородач
🚀 Знакомьтесь с AB-TASK: Вашим универсальным инструментом для коммуникации в команде! 🚀
Устали от необходимости использовать несколько приложений для общения в команде, управления задачами и документами?
AB-TASK придет на помощь и избавит вас от хаоса!
Больше нет необходимости переключаться между приложениями и оплачивать накапливающиеся подписки. Больше нет потерянных сообщений.
✅ Почему AB-TASK идеально подходит для команд:
Все вместе: Чаты, задачи, документы.
Максимальная простота: Настолько просто, что пользоваться может каждый. Без технических затруднений.
В реальном времени: Мгновенные обновления, совместное редактирование. Общение в чате такое же эффективное, как реальный разговор.
Полная гибкость: Настройте под нужды ИМЕННО ВАШЕЙ команды.
🌟 Будь то стартап, удаленная команда или любая группа людей, стремящаяся оптимизировать свое общение, AB-TASK к вашим услугам.
🌍 Доступен для всех стран без ограничений.
👉 Попробуйте БЕСПЛАТНО
https://ab-task.com/
#инструмент дня
Сколько вы берёте за разработку лендинга?
$100? $300? $3000? $10000?
Ну ладно, у меня были сметы и по $20000, но это были проекты на целую веб-студию, а не мне одному 😭
И тут я натыкаюсь на это: https://x.com/alex_barashkov/status/1801219973236342910
$89,775
Девяносто кусков! За лендинг 🫠
Который, правда, чуток подтормаживает на MacBook Pro M2. Как быстро мой ноутбук устарел, а...
Ладно, на самом деле пост не об этом. Меня повеселило, что, по факту, ребята не только сделалил лендинг, но и по пути взлетели на полмиллиона просмотров твита, пропиарив продукт и заодно наняв нескольких инженеров.
Но название: Huly... Кремниевую долину пересмотрели?
Учитывая, что хайринг инженера стоит $5000-$10000, инвестиция уже отбилась!
Типичный диалог под обсуждением лендинга выглядел так:
— С точки зрения донесения информации полная ерунда.
— Слыш, а ты сам так умеешь?
...
— О, умеешь. Давай к нам.
Кроме шуток, у меня пруфы есть: https://x.com/platoff/status/1801240777026080980
Ладно, даже сейчас пост не об этом!
Утомил, да?
Короче, меня там заинтересовал текстовый редактор в виде плавающей панельки. Я полез в их гитхаб (а хули, хули — опенсорсный продукт) и нашёл это: https://tiptap.dev/docs/editor/introduction
TipTap это, как нынче считается хорошим тоном, не готовый текстовый редактор, а фреймворк для их построения (на базе ещё более низкоуровневого решения https://prosemirror.net/).
Хочешь — плавающая панель, хочешь — тулбар. Удобно. Крайне интересная вещь.
Вот так вот, интересно, когда есть в чём покопаться.
#web #editor #wysiwyg
#заметка дня
Посмотрите внимательно на картинки, ничего необычного не замечаете?
А тут происходит ого-го какая драма!
Если вы хоть раз пробовали проанализировать запросы и понять метрику "водопад", то становится понятно: запросы на картинке слева идут параллельно, а справа — последовательно.
Итого, 2.5 секунды против 3.5.
— Да что ты сказать-то хочешь?
Я хочу сказать, что изменение это произошло не просто так. Это — график ухудшения производительности некоего приложения после обновления React до 19 Beta. Вот подробнее: https://github.com/facebook/react/issues/29898
Итак, мякотка-то в чём. Раньше компонент React Suspense пререндерил всех своих детей вне зависимости от статуса основной загрузки. Люди прекрасно этим пользовались, загружая разные сопутствующие файлы: картинки, конфигурацию, модели. И все были счастливы.
Но ребята из React решили, что нынче ветер дует в сторону серверного рендеринга, что все используют Next.js и хотят, чтобы потомки асинхронного компонента были отрендерены вместе с родителем, ведь это так удобно в SSR/SSG.
Ага, хер там плавал!
Ну то есть вы понимаете, они буквально забили на всех людей, кому нужны SPA-приложения, кого они устраивают, кому серверный рендеринг не нужен или невозможен к реализации. Ну, вот буквально PR: https://github.com/facebook/react/pull/26380
И очень хорошо, что это решение моментально подняло бурю негодования от разработчиков по всему миру. Это к слову о том, как важно общаться. Желательно вербально, иначе вас не услышат.
И мой горячий привет всем инфлюенсерам, которым лишь бы было на чём хайповать. Больше, больше нового!
В общем, ребята из React откатили изменение и принесли свои извинения с буквальной формулировкой: «Мы недооценили, сколько людей используют SPA и такой паттерн».
Вот: https://x.com/sophiebits/status/1801663976973209620
А, ну и да. Релиз React 19 из-за этого немного задерживается :)
#react #suspense
Канал «🇫🇮Пиво | Olut | Beer🍻» - это пивное окно в Европу на русском языке. Уникальный тематический блог, переехавший из Карелии в Финляндию.
Автор живëт в городе Тампере и прямо сейчас проходит стажировку на финской крафтовой пивоварне. Фото, видео и тексты о тонкостях производства публикуются ежедневно. И про сахти тоже есть 🙂
Репортажи из путешествий по Европе и обзоры на пиво из разных стран прилагаются.
Подписывайтесь, если хотите читать о том, чего не найдёте на других Telegram-каналах про пиво.
#vscode дня
Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.
Я щас не шучу, know your tools!
Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.
Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!
Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque
Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!
Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).
Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.
Но потом ка-а-ак понял!
#search #extension #бородач
#ссылка дня
Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.
1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en
2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings
Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.
Ломайте свои интерфейсы сами и избегайте XSS, котаны.
#xss #naughty #injection #бородач
#статья дня
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar