14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Новый бесплатный Fullstack-интенсив от METHED «Сервис бронирования мест на StandUp»
Овладей навыками fullstack-разработки с 21 по 25 ноября!
Что будет на интенсиве:
- Напишем fullstack-приложение по выбору мест на мероприятии;
- Поработаем на фронтенде HTML, CSS, JS;
- Для бэка воспользуемся Node.js.
Уроки, прямый трансляции, общий чат и кайфовая атмосфера. Присоединяйся к нашей команде!
Переходи по ссылке, чтобы зарегистрироваться - https://tglink.io/283786ee287b
Количество мест ограничено!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite
#такое дня
Можно я немного побуду душным?
Этот мем всплывает разве что не ежегодно в твиттере и программерских пабликах и каналах.
Это, конечно, не уровень Max Howell, создателя Homebrew (самого популярного менеджера пакетов на macOS, используемого всеми разработчиками), но всё же. Напомню, он был отвергнут Гуглом за незнание структур данных.
В случае с Дэном многие пишут, что он «создатель реакта» и строят на этом панчи. Ну нет же, котаны.
Он один из разработчиков, а по большей части — лицо проекта, евангелист.
Ден Наше всё Абрамов. Кроме шуток, вы наверняка такое видели.
Что он создал — так это всем известный Redux, будучи соавтором. Потому давайте не будем распространять ерунду дальше.
Ну и понятное дело, что его не приняли в VK тогда, когда он не был ни тем, ни другим.
Что, впрочем, даёт на самом деле надежду гораздо больше, чем повод посмеяться. Если вас не приняли куда-то, подумайте, а так ли плохо это вообще.
#meme #debunk
Хотели бы попробовать свои силы в финтехе и узнать, что там и как? Такая возможность появилась благодаря симулятору от агентства Ар и Росбанка. В нем вы можете познакомиться с продуктовыми задачами Росбанка в роли product-менеджера или backend-разработчика. Пообщаться с коллегами, узнать больше о корпоративной культуре.
Чтобы начать, переходите в бота, выбираете направление, выполняете задачи, изучаете материалы и знакомитесь с командой. В конце вас ждет список актуальных вакансий, если так понравится, что захотите продолжить свой путь!
Симулятор продакта и бэкенда доступен только до 18 ноября, так что поторопитесь! Ссылка на бота тут.
Реклама. Рекламодатель
#новость дня
Кто-то тут не использует Prettier? Ладно, это я могу понять.
Но если кто-то не использует ESLint — проследуйте на выход, пожалуйста. Ладно, шучу. Но без этого в больших проектах никуда вообще. IDE подскажет многое, но процессы важнее.
Так вот, долгое время у многих (и у меня) возникали сомнения в нужности одновременного использования и форматтера aka Prettier и линтера aka ESLint.
Например, ESLint с лёгкостью может повторить все возможности Prettier и даже больше. Вот только... вот только надо ли?
Конфигурация становится раздутой, даже можно сказать, сложной. Начинаются споры о количестве свойств объекта на одной строке. Обязательно найдётся кто-то с очень важным мнением и обидится.
Но давайте честно. Задача линтера — прививать хорошие привычки кодирования и не давать неосознанно писать говнокод применять плохие практики. Да, JavaScript язык, в котором слишком много можно написать слишком плохо.
А вот форматтер — уже чистая вкусовщина. В целом, каждая IDE умеет так или иначе применять форматирование к уже написанному коду, но остаётся вопрос распространения этого на команду и процессы деплоя.
Потому Prettier остаётся хорошим выбором. Тот факт, что он уже внедрён в огромное число проектов с минимальными изменениями в конфигурации по-умолчанию, даёт уверенность в том, что люди не будут тратить время на споры (не даёт, но то такое).
К чему я веду? А вот: https://eslint.org/blog/2023/10/deprecating-formatting-rules/
Для тру: ESLint 10 больше не будет поддерживать настройки форматирования кода и вся работа ляжет на плечи сторонних средств форматирования (предлагаются Prettier, dprint и stylistic). Начиная с версии 8.53.0 эти настройки будут объявлены устаревшими.
Это сильно облегчит работу разработчиков ESLint и позволит им сосредоточиться на внедрении хороших практик, нежели на вкусовщине.
А как дела на ваших проектах, котаны?
#eslint #prettier
#заметка дня
Давайте продолжим про React Query aka TanStack Query нынче.
В комментариях писали, мол, использовать React Query (буду использовать старое название) это плохая привычка, современные браузерные API прекрасно справляются, надо всего лишь немного их расширить.
Немного в моём случае это:
1. Состояния isLoading, isSuccess, isError
2. Сообщение об ошибке
3. Отмена запроса через AbortController
4. Глобальное состояние загрузки (на всё приложение)
5. Нормализация данных
6. Инициация повторной загрузки
7. Поллинг
8. Кеширование данных в едином слое и решение об инвалидации.
Веб-приложения они потому и веб, что грузят данные из удалённого источника, необязательно одного. И необязательно сетевые! Об этом ниже.
Уследить за всем непросто, но это полбеды. Тесты писать кто будет на ваши обёртки?
Да, React Query и ему подобные SWR-решения (stale-while-revalidate в клиентских приложениях превратился в целый концепт) не являются вечнозелёными. Термин "вечнозелёный" я принёс сюда из CMS Drupal: там это означало модули, поставляющиеся с ядром системы. Это значит, вероятность их удаления или радикального изменения API крайне мала. В нашем случае вечнозелёными являются браузерные API.
Но вы забываете об одной крайне немаловажной фишке React Query и SWR: они могут работать с любыми промисами. Не только с сетью и fetch!
И вот тут начинается прекрасное. Долгие вычисления? Промис! Забрать картинку с холста? Промис! Обработать загруженный на клиенте файл? Тоже промис! Написать расширение для браузера и обратиться к данным со страницы или результату парсера? Промис! Обратиться к прослойке между Google Sheets и твоим расширением? Промис! То же самое в Excel. То же самое в Figma. Далее вообще везде.
Вы понимаете, к чему я клоню? Хватит думать сетью, начинайте думать операциями!
И вот тут у React Query в моём случае из конкурентов разве что Effector. Но есть одна проблема... его концепты мало того, что сложны, так и обзорных статей не на русском очень мало. Но об этом потом.
Буду закругляться, но напишу ещё кое что о тестировании.
Если React Query принимает на вход любой промис, то что вам нужно для того, чтобы протестировать своё приложение? Поднимать Mock API Server? Вы уверены?
Замокайте вызов промиса! Всё, вы прекрасны. Остальное уже протестировано за вас.
Задавайте ваши ответы, котаны.
#react #query #development
Как в Telegram собрать первую 1 000 подписчиков с нуля и начать получать доход?
Большинству специалистов и предпринимателей хочется свой телеграм-канал. Но непонятно, как выбрать тематику, аудиторию, разобраться в рекламе, контенте.
Решение есть — подписаться на канал Кристины Графовой и забрать бесплатный гайд «Как собрать первую 1 000 подписчиков в телеграм-канал» в закрепе.
13 страниц с 12 подробно расписанными способами привлечения подписчиков. Половина из них — бесплатные, и кроме Кристины вам о них никто не расскажет.
Вы определитесь с темой канала, аудиторией, начнёте продавать рекламу и привлечёте первых людей, которые будут покупать ваши продукты и услуги.
Вот минимум 3 причины, почему стоит следить именно за Кристиной
— Раскачала с бизнес-партнёром сетку каналов до 65 000 подписчиков и продавала рекламу «ВТБ», «Альфа-Банку», «Яндексу» и другим большим рекламодателям
— Продала сетку за 2 600 000 рублей и уехала жить в Таиланд
— 3 года помогает запускать людям каналы и делать из них источник дохода и нетворкинга
Рекомендую начать с бесплатного гайда в закрепе, получить инъекцию пользы за 0 рублей и подписаться на канал
#инструмент дня
Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.
Если тебе 14 лет, то ещё и криптобиржу.
Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/
Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.
Ещё бы туда диалоги добавить, было бы уапще.
Всем тостов, котаны! За мой счет :)
#react #toast #бородач
Более того, что делать если вам нужно создать тип, параметры которого служат для передачи в функцию, которая является библиотекой и вам нужно передать все required параметры, не делайте это ручками, используйте Parameters
const createPerson = ({
firstName,
lastName
}: {
firstName: string,
lastName: string
}) => ({
firstName,
lastName
})
type CreatePersonParams = Parameters<typeof createPerson>[0];
const params: CreatePersonParams = {
firstName: 'John',
lastName: 'Doe'
};
Читать полностью…
#заметка дня
Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?
Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?
Делать unknown или any? Копировать и переопределять с помощью as?
Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype
Пример использования — на иллюстрации. Ну или ещё можно так:const createPerson = () => ({Не делайте ерунды, котаны. Читайте документацию.
firstName: 'John',
lastName: 'Doe'
})
type Person = ReturnType<typeof createPerson>
#typescript #ts #types #бородач
#фишка дня
Стопудово вы делали эффекты как на видео через три div-а или span-а. Ну просто потому что трансформации на SVG это абсолютная боль.
Типа такого: https://codepen.io/alinaki/pen/abXpvyQ
Да, пример очень простой, но даже это на SVG бывает проблемно санимировать.
Хотя, казалось бы, для этого и предназначено.
А вся проблема в том, что для SVG определение координат для преобразований происходит немного иначе, нежели чем для элементов. Выходов из ситуации есть несколько.
Первый, от Аны Тюдор: исправить viewBox, поставив вместо 0, 0 (левый верхний угол) — -width/2,-height/2, соответственно, исправив остальные координаты.
Второй, интереснее, от Джея: указать следующие правила в CSS:
transform-box: fill-box;
transform-origin: 50% 50%;
🚁 Amphi Analytics: пока Amazon и Walmart мучаются с доставкой своих товаров дронами, в китайском Шеньчжене летательные аппараты каждый день доставляют сотни заказов.
📫 Компания Meituan выбрала довольно сложную для этого точку — густозаселенные районы мегаполиса. В этом и был весь смысл: в то время, как американский город представляет собой множество коттеджей, китайские города больше похожи на «каменные джунгли» - высотки с высокой плотностью населения. Такая бизнес модель позволила сократить главный кост - время полета. Дроны не доставляют товары прямо к двери, а делают это в специальных пунктах, где могут собираться несколько заказов одновременно — так юнит экономика легко сходится.
🔥 Автор канала Amphi Analytics пишет о новых технологиях в IT и бизнесе.
#такое дня
Сегодня на работе обновили проект до последней стабильной Node.js и была сказана немного неаккуратная фраза:
— Next on our list is Next.js 14.
И понеслась...
— I have remixed feelings about this
— You are being so reactive
— Not a good move from my vue
— Tired of this, I'll rest on my nest
— Bun intended
— I hate you all I want to underscore this. You’ve ruined everything I believe is good with humanity.
— I'll go
— This conversation is full of solid puns
Продолжим в комментариях? Или ну такое?
#инструмент дня
Полку API-клиентов прибыло! Я уже рассказывал про GUI для HTTPie, который делали Злые Марсиане, а теперь пришло время рассказать ещё об одном. Почему пришло? Ну потому что Postman борзеет просто по часам и работает отвратительно.
Итак, Bruno: https://www.usebruno.com/
Хранит все запросы и коллекции в простых текстовых файлах (разрабы придумали язык разметки Bru специально для этого). Правда, я знаю как минимум одного человека-пользователя PhpStorm, который на этом месте презрительно хмыкнул.
Как следствие, все ваши коллекции запросов хранятся просто на диске. Нужно облако — используйте Git. Вот так просто. Планов на своё облако у команды нет.
Да, есть платная версия, 12 долларов в год (двенадцать в год). В ней из интересного есть поддержка вебсокетов и массового прогона данных по коллекциям для нагрузочного тестирования.
Кажется мне, для многих профессиональных пользователей Postman основной причиной всё ещё будут скрипты, но они и в Bruno есть. Посмотрим, куда вывезет.
#api #client
#такое дня
Тут пришли сведения, что сообщение выше не поддерживается более старыми версиями Telegram, чем та, в которой оно было создано.
Я приношу свои извинения. Это не первый раз, когда команда телеги совершает подобное, и явно не в последний :(
#ссылка дня
Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.
Нарисовал его бывший коллега, а потом я много раз пытался обновить и освежить. Но терялась душа 🙂 Так что обновлённую версию вы могли встретить разве что в рекламе канала, многие по ней же подписались.
Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/
По его названию можно было бы подумать, что там одни только иконки. Но нет!
Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!
А я потратил тогда кучу времени на поиск логотипов и приведение их в приличный вид... Аж обидно.
Но вот вам, котаны, берите и пользуйтесь 🙂
#icons #logos #emoji #flags #бородач
Хотите офер мечты от международной компании?
Возьмите английский для IT-специалистов в Skyeng: в честь Чёрной пятницы скидки до 50%, а платёж за курс можно разделить на четыре части с Яндекс Сплитом. Кстати, ещё среди участников разыграют макбуки и айфоны. Подробнее на сайте.
Реклама. ООО «Яндекс Пэй»,
ИНН 7703466743,
Erid LjN8JzwE3
#фишка дня
Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.
Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.
Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.
Я устал придумывать синонимы слову скроллить.
Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Демо: https://mdn.github.io/css-examples/overscroll-behavior/
Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.
Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.
В любом случае, свойство очень удобное, на забывайте о нём.
#css #scroll #overscroll
#статья дня
Не так давно я писал о том, что мне пришлось написать плагин для ESLint, потому что а) среда, в которой я работаю — упоротая, б) инструменты — упоротые, в) люди тоже себя могут иногда вести... упорото.
Вот тут: /channel/htmlshit/1638
Мой плагин был очень простой: запрет констант уровня модуля. Ну вот так вот :( Они при сборке терялись, потому что иди нахер, вот почему.
Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/
Да, я в посте тоже писал про AST и инструменты, позволяющее это самое абстрактное синтаксическое дерево построить, но в статье тут всё гораздо подробнее. Меня редко хватает на целую статью, так что читайте что у других есть, котаны :) Ведь вышло неплохо и подробно.
#eslint #react #ast #бородач
Авито ждет Backend-разработчиков и предлагает возможность получить оффер за одни выходные!
Компания предлагает:
— зарплату от 204 до 484 тысяч рублей в зависимости от грейда;
— расширенный ДМС, компенсацию питания и другие крутые бонусы;
— формат работы на выбор: офис или удаленка;
— отличную команду с экспертами в Go- и PHP-разработке;
— возможность участвовать в запуске новых проектов и идей.
Авито — это про карьерное развитие и комфортные условия. Регистрируйтесь, чтобы присоединиться: https://u.to/BjoXIA
Реклама, ООО "Авито Тех", ИНН 9710089440, erid 2Vtzqx28DZZ
#баг дня
Вчера вечером коллега пришла с проблемой: бесконечная загрузка на паре проектов. И если на одном проекте подобное казалось логичным — он сильно зависит от платформы — то для второго это уже был перебор.
Попробовал повторить проблему, воссоздал все условия — не вышло. Утром взял её ноутбук и сел отлаживать.
Ни одной ошибки в консоли нет. На вкладке Network тоже всё чисто...
...подозрительно чисто.
Полез в дебаггер и обнаружил, что хуки, основанные на React Query не вызываются вообще. Ни разу.
Сетевые операции без React Query работают прекрасно — приложение состоит их микрофронтендов, какие-то из них легаси, какие-то нет.
Я начинаю подозревать браузер, отключаю все расширения и разрешаю все куки (мало ли). Нет, не помогает.
И тут коллега сообщает, что в Safari всё прекрасно работает.
Отчаявшись понять, что происходит, я вбил в гугл банальный запрос вида: "react query not working in chrome"
И нахожу золото.
Я понимаю, что к этому моменту уже мог вас утомить, но попробуйте понять происходящее. Это слишком хорошо.
1. Google Chrome на macOS неверно определяет состояние сети и поднимает флаг "офлайн" на navigator.onLine.
2. React-Query считывает этот флаг и ставит все ваши запросы на паузу. Без уведомлений, без ошибок. Молча.
Всё, вы в ловушке.
Как исправить? Передёрнуть wi-fi на ноутбуке. Я щас не шучу даже.
Проблеме в Chrome 7 лет! Создатели React-Query знали об этой проблеме и ничего не сделали!
Они исправили поведение на "всегда считать, что мы онлайн" только в 5 версии своего продукта, которая ломает совместимость!
Не могу передать свою злость и, одновременно, восхищение глупостью бага. И наглостью разработчиков, конечно же.
Я ничем кроме как "горе от ума" это описать не могу. React-Query в принципе делает слишком много спорных настроек по-умолчанию, но после этого случая мы буквально пересмотрим своё решение по альтернативам.
#фишка дня
Накидали секций, поставили к ним якоря, поставили ссылки вида #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 #бородач
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 ноября.
А вот в комментариях к предыдущему посту ещё полезное :)
Читать полностью…
Стань профессионалом в JavaScript!
Бесплатный интенсив для начинающих, который даст навыки разработки высококачественного кода и современных приложений.
https://in.methed.ru/md/e7a4ed84fe93b72bde0b9ef0ce74dd6f?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
- Возьмемся за разработку на JavaScript;
- Научимся взаимодействовать с сервером;
- Напишем клиентскую логику и взаимодействие с сервером
https://in.methed.ru/md/e7a4ed84fe93b72bde0b9ef0ce74dd6f?utm_source=telegram&utm_medium=october_youtube&utm_campaign=htmlshit
Регистрация займет всего несколько минут, а в результате вы получите уникальный опыт и новые знания. Не упустите свой шанс стать профессионалом в веб-разработке!
Зарегистрируйтесь на бесплатный интенсив по JavaScript уже сегодня и начните свой путь к успеху!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024. erid: LjN8KGmpt
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
#заметка дня
В чём разница между селекторами :disabled и [disabled]?
Вот вы не знали (наверное), а она есть!
Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.
Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.
Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.
Да не томи уже!
Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.
Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE
Короче, аккуратнее.
#css #disabled
Присоединяйтесь к VK Kubernetes Conf — конференции для тех, кто развивает экосистему Kubernetes
16 ноября в 14:00 (мск) в офисе VK и онлайн
Поговорим о том, как обеспечить безопасность Kubernetes-проектов, рассмотрим нетривиальные способы настройки кластера для оптимизации стоимости их обслуживания. Рассмотрим кейсы с K8s от команд Тинькофф, СберМаркет, Флант, Wildberries, Luntry, VK и других компаний.
Что вас ждёт:
🔹Экскурсия по матрицам угроз для контейнеров и Kubernetes
🔹Опыт реализации платформенного подхода для безопасности K8s: от контроля доступа – до харденинга нагрузок
🔹Опыт создания инструментов для мониторинга сетевой связанности, работы с логами и мониторинга кластеров
🔹И, конечно, поговорим о том, как за 10 лет (почти) Kubernetes повлиял на индустрию и как технология будет развиваться дальше.
Регистрируйтесь на VK Kubernetes Conf
Зарегистрироваться
#инструмент дня
Итак, перед вами стоит задача сделать встраиваемый виджет. Любого рода, от плагина дашборда с показателями продаж до интерактивного баннера. Писать нужно быстро, эффективно, поддерживаемо. И чтоб размер поменьше.
Ванильный JS — мелкий размер, но поддерживаемо — вряд ли. React — один только DOM-слой займёт 40kB, Preact — 4kB, уже очень хорошо, Svelte свернётся в 1.6kB, но учить птичий язык шаблонов — это надо иметь причину...
И тут выходит VanJS со своими 0.9kB: https://vanjs.org/
Сразу пример кода:
const Hello = () => div(
p("Hello"),
ul(
li("World"),
li(a({href: "https://vanjs.org/"}, "VanJS")),
),
)
van.add(document.body, Hello())
Максимально нативно и понятно, не правда ли? И логика построения UI сохраняется. Есть управление стейтом, поддержка TS. Не нужно никакой сборки, садись пиши. Прекрасная документация, включая примеры от сообщества!
А его шаблонный движок вообще может быть использован отдельно. Назвали Mini-Van :)
#van #framework #js #бородач
#библиотека дня
Стандартный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя.
Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.
Мой друг и, какое совпадение, подписчик решил эти вопросы реализовав библиотеку extended-fetch, о которой я даже писал, с этим же введением: /channel/htmlshit/1290
Слово автору:
если очень обобщенно - это попытка вынести в абстракцию над fetch наиболее востребованный функционал axios
цели просты - максимально возможное следование спецификации, "сквозная" типизация, ноль зависимостей, изоморфный код (да, в nodejs сейчас undici как имплементация fetch)
А теперь у него нашлось немного времени, так что он обновил библиотеку чтобы можно было в дженерике передавать свой тип возвращаемых запросом данных
https://github.com/glebcha/extended-fetch/tree/master#custom-response-type
то есть чтобы можно было делать так
typescript
const api = createHttpClient();
interface Book {
id: string,
description?: string,
}
api.get<Book>('/api/books/12’)
Если не передавать ничего в дженерике и выполнять api.get('/api/books/12'), то вернется объединение типов
typescript
Promise<string | Record<string, unknown> | RequestInit | Blob | ArrayBuffer | FormData>
По-моему, хорошая альтернатива axios-у, если неохота тянуть лишнего.
#fetch #axios #pr