14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Никак не мог вчера понять, почему в части проекта аутентификационные попапы отрабатывают нормально, а в другой — нет.
Флоу-то классический, тяжёлый, надёжный как швейцарские часы:
1. Кликнули по кнопке
2. Открылся попап аутентификации
3. Пока пользователь проходит процесс, ждём закрытия окна (а точнее, проверяем свойство closed по интервалу)
4. Как только окно закрылось — обновляем список токенов.
Так вот в некоторых проектах пункт 3 отваливался. Терялся контекст окна и всё тут. Хотя флоу и инструменты везде одни и те же.
Как оказалось, аддон koa-helmet для Koa.js когда-то давно в патч-версию вкинул заголовки CORS и COOP. И врубил их по-умолчанию.
Что такое CORS знают, в общем, все. А что такое COOP?
Это сравнительно новая штука и она устанавливает правила общения с окном, открытым через window.open. И в случае same-origin, достучаться до свойства closed уже не выйдет.
Есть same-origin-allow-popups, но оно совсем новое и мало где поддерживается.
Ну и в какой-то момент старую версию Koa обновили до поновее и получили упс.
Менять поведение в патч-версиях — это мерзко. Но мы уже не в первый раз такое наблюдаем.
P. S. Очередная серия продвижения интересных каналов! На сей раз — бакенд.
Всё, что остаётся за кадром, но без чего ничего не работает. Каналы от опытных разработчиков, которые пишут про архитектуру, логи, прод, выбор между быстротой и качеством, выгорание, рефакторинг, читаемый код, сложные конфиги и продакшен-факапы. Есть про Node, Go, Django. Добавлены пару каналов с вакансиями. Делимся с вами — забирайте!
#koa #js #backend #popup #coop
#такое дня
Я достаточно долго сидел на Ubuntu и использовал WINE для запуска Photoshop CS6 и CC до того, как Figma стала индустриальным стандартом.
Ну и игры, само собой.
Так вот, в среде линуксоидов, особенно начинающих, распространено мнение, что вирусы в WINE не запустятся, потому что то ли WINE настолько хорош, то ли настолько плох, то ли Linux-based OS настолько безопасные.
Так вот, запустятся. Знаменитый WannaCry прекрасно шифрует файлы и каталоги за пределами выделенной WINE папки. Почему?
Потому что диск Z:\ в WINE по-умолчанию замаплен на всю файловую систему Linux.
WINE не только не эмулятор, но ещё и не песочница. Так что осторожнее с этим, и, как минимум, уберите Z:\ из winecfg.
А вообще, это явно признак того, что WINE очень даже повзрослевший продукт.
Такой вот понедельник.
P. S. если кто не в курсе, Valve Proton и Apple GPTK тоже основаны на WINE.
#linux #wine
#такое дня
Не открывайте этот кодпен, если не хотите повесить ваш Chrome!
https://codepen.io/chasewackerfuss/pen/JKGrJJ
Да-да, не вкладку, а весь браузер. Закрыть-то её можно, но на MacBook на M2 Pro я смог это сделать только через минуту.
Изоляция вкладок, говорили они. Нестинг и анимации не будут влиять на производительность стилей, твердили они... Ха-ха.
У Safari, кстати, всё хорошо. А Firefox сильно тормозит, но не так и не настолько плохо, как Chrome. И весь браузер не вешается.
#codepen #css #nesting #fail
⚡️ Эти каналы реально помогают изучать программирование и IT с нуля!
Не веришь? Проверь сам:
👩💻 Easy GitHub — лучшие проекты гитхаба для практики и освоения IT.
🖥 Easy WebDev — всё о создании сайтов: Frontend, Backend и Fullstack.
🖥 Easy Python — лёгкое изучение Python и необходимого стека навыков.
🔠 Easy InfoSec — кибербезопасность, хакинг, анонимность и многое другое.
🖥 Easy Coder — а здесь вообще про всё, что нужно знать для работы в IT.
Всё бесплатно и простым языком! ❤️Читать полностью…
#ссылка дня
А как сделать кнопку? А как тулбар? А как сверстать несколько колонок с перекрытием? А если мне анимации стандартные не подходят?
Ни слова больше! Google has us covered!
https://web.dev/patterns/
От простых вещей вроде кнопки или описания кривой Безье для анимации до загрузки файлов, работы с буфером обмена и превращения сайта в PWA.
Хотелось бы больше примеров, конечно, но кому не хочется? :)
#web #app #patterns #бородач
#ссылка дня
Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.
Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javascript.memory-leaks
Он пока небольшой, но уже есть достаточное количество примеров, от неверной проверки статуса запроса, до дырявого сервиса кеширования.
Не позволяйте памяти утечь, котаны! И дополняйте примеры :)
#javascript #memory #бородач
#шрифт дня
Microsoft выкатили Kermit — первый в своём роде шрифт, в котором каждая буква анимируется поштрихово, как будто её пишут от руки.
Сделан он студией Underware — и не просто для красоты. Этот шрифт помогает детям учиться читать и писать, показывая, как именно строятся буквы.
И, что особенно приятно — всё это работает и для
кириллицы.
В Office уже есть 4 начертания, в мае обещают добавить ещё 38. Всё это — один вариативный файл без привычного набора Regular/Bold/Italic.
📌 Презентация Kermit на microsoft.design
📌 Тест шрифта и эссе от Underware
📌 PDF со всеми стилями и "анатомией" букв
Если ты работаешь со шрифтами — обязательно посмотри. Это очень крутой пример того, на что вообще способны вариативные гарнитуры.
#font
Валера искал работу в ИТшечке, посоны. Сижу литерали часами, и вот это вот: клик, клик, клик. Короче, наст%!&ело по итогу.
А че делает разраб, когда зае@!лся? Пральна — пет-проект. Хоба-на: аппка, которая сама кликает по 200 вакансий на HH в день. Итог: 10 собесов в неделю.
Минусы: кринжевать на собесах и выбирать оффер один х@р надо самому.
Короче, вэлкам потыкать в мою поделку, если кому нада.
@hmailer
#фишка дня
Сейчас возвращается мода (и, по-моему, это правильно) на сохранение состояния вашего веб-приложения в адресной строке браузера.
Буквально — используя параметры строки запроса (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 #бородач
#фишка дня
В iOS Safari есть такая фишка: при удерживании пальца на, например, ссылке появляется всплывающее окошко с её предпросмотром. Но иногда это вообще не к месту, потому надо бы найти способ отключить.
Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.
#safari #callout #бородач
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота": .box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick #бородач
#инструмент дня
Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды?
Ой, только не говорите, что я один тут верстаю вслепую.
Вашему вниманию Bramus Van Damme и его caniuse-cli: bramus/caniuse-cli" rel="nofollow">https://www.npmjs.com/package/@bramus/caniuse-cli
$ caniuse "viewport units"
$ caniuse @property
#фишка дня
Как убедиться, что ваш switch покрывает все кейсы, а default остаётся только на случай косяков в рантайме?
Очень просто! Два варианта:
1. Используем never, от Кори Хауса:
interface Dog {
kind: "dog";
favoriteToy: string;
}
interface Parrot {
kind: "parrot";
knowsWords: number;
}
type Pet = Dog | Parrot;
function logPetTalent(pet: Pet) {
switch (pet. kind) {
case "dog":
return console. log (Dog loves ${pet. favoriteToy}. ');
case "parrot":
return console. log (Parrot knows ${pet.knowsWords} words. *);
default:
const exhaustiveCheck: never = pet;
}
}
switch-exhaustiveness-check. И уже дальше решаем, разрешать default, или нет. Конфигураия это позволяет.
💲Каналы с Junior IT вакансиями и стажировками
Подписывайся и забирай свой оффер⚡
1. IT вакансии по СНГ
2. IT стажировки по СНГ
3. IT стажировки в топовых компаниях мира
4. Удалённые IT вакансии и стажировки
5. Python вакансии и стажировки
6. БИГТЕХ вакансии и стажировки
7. Design вакансии и стажировки
8. QA вакансии и стажировки
9. Junior вакансии и стажировки
10. Frontend вакансии и вопросы собесов
11. Вакансии и стажировки для аналитиков
12. Вакансии в русских стартапах за границей
13. Вакансии и стажировки для DevOps
14. Вакансии, которых нет на ХХ.РУ
#баг дня
Кажется, когда-то я уже использовал свой немногочисленный медийный ресурс, чтобы продвигать библиотечные баги, которые напрямую меня касаются.
Пришло время повторить! С небольшим историческим экскурсом :)
Итак, некая библиотека компонентов Radix. И написана она в технике bring your own styles. То есть буквально стыкуются с чем угодно, не навязывая своё оформление (темы есть, но они — отдельно).
В чём же тогда смысл таких UI-китов? Ну, собственно, создание своих компонентов и дизайн-систем не ограничивается наложением стилей на стандартные input да button, это большая работа по объединению их в доступные группы, в задание нужного поведения и так далее.
А уже потом как, например, в нашем случае — можно хоть Tailwind накинуть. Ирония какая.
Так вот, среди UI-китов есть некое подобие конкуренции и моды. Как и везде. И одна из модных тенденций — пытаться сделать работу интерфейса быстрее. Неважно как, визуально или фактически.
И один из достаточно неожиданных способов этого добиться — это поменять обработчик onClick на onMouseDown.
И вуаля, на мобильных устройствах как будто бы стало на 300 мс быстрее!
Но, конечно, это достаточно спорное решение. Как минимум, нельзя отменить клик, убрав курсор с элемента.
А тут я обнаружил ещё одну проблему: https://github.com/radix-ui/primitives/issues/3600
Там есть и видео, и демо.
Суть: на вкладках тоже применена техника onMouseDown. В итоге, когда мы анмаунтим вкладку с полем ввода, на котором висит onBlur, это событие — не срабатывает. В нашем случае это приводит к проблемам с форматированием полей, которое как раз на onBlur и повешено.
Почему так происходит? Потому что во всех браузерах обработка событий происходит в таком порядке:
0. mousedown
1. change
2. blur
3. focus
4. mouseup
5. click
...остальное посмотрите по ссылке.
Логично, что при замене mousedown на click всё прекрасно работает. Но кому-то в Radix очень захотелось, чтобы на мобилах их UI-кит казался быстрее других.
Выстрелили себе в ногу получается.
В общем, как обычно, прошу ваших комментариев и реакций на issue в GitHub!
#ui #kit #radix #onmousedown
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
#код дня
Ладно, стратегия взять вас на понт не получилась, ни одного лайка и, видимо, почти ни одного просмотра ссылки!
Если боитесь смотреть, код, который вешает браузер, на иллюстрации.
Такая себе рекурсия! Куча вложенных блоков, а на них ещё и нестинг. Всего-то 8 раз по 40 вложенных элементов.
Я как-то на большее рассчитывал, если честно :)
#фишка дня от Jhey
Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.
Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!
Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:
button:hover span:after {
animation: flip 0.2s calc(var(--i) * 0.05s);
}
@keyframes flip {
20% { content: '_'; }
40% { content: var(--c1); }
60% { content: var(--c2); }
}
<span
style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
>C</span>
#фишка дня
В TypeScript получение keyof [string, number] кортежа даст не "0" | "1", а:"0" | "1" | "length" | "push" | "toString" | ...
Пу-пу-пу...
Хочешь только индексы?
type IndexKeys<T extends any[]> = Extract<keyof T, `${number}`>;
IndexKeys<[string, number]> → "0" | "1".
👩💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много!
Специально для Вас, собираем лучшие вакансии по JavaScript с прямыми контактами в Telegram:
👩💻 Fronted Jobs - для фронтендеров
👩💻 Node.Js Jobs - для бекендеров
Подпишись чтобы не упустить свой шанс получить лучший оффер!
12 июля в Казани, в экстрим-парке «Урам» пройдет мероприятие Сезон Кода от Т-Технологий, соберутся разработчики, аналитики, QA и продакты, чтобы поговорить о технологиях — не в переговорке, а рядом со скейт-парком и видом на мост Миллениум.
Формат — как лето этого и просит:
→ короткие, насыщенные доклады от практикующих инженеров Т-Банка
→ инженерные зоны и карьерные консультации
→ музыка, граффити, движение, нетворкинг
Темы:
— как проектировать клиентский API, чтобы не захотелось всё выкинуть через месяц
— как не сломать ничего, выкатываясь по 200 раз в день
— что такое микросервисы по-честному
— как тестить прод — и не бояться
— зачем разработчику понимать продуктовую воронку
— и почему инфраструктура — не "где-то там"
📍 Казань, экстрим-парк «Урам»
🕥 12 июля
🌐 Подробности и регистрация по ссылке
Регистрация = короткая форма + пожертвование от 1000 ₽ в один из трех благотворительных фондов.
Важно: при пожертвовании укажите ту же почту, что и в регистрации — туда придёт билет.
Приезжайте. Будет по делу — и по настроению. Не конференция, а техно-фест под открытым небом.
Реклама. АО "ТБанк", ИНН 7710140679, лицензия ЦБ РФ № 2673 от 24.03.2015 г. Erid: 2W5zFGUvVpL
#фишка дня
Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.
Например, как затемнить все элементы, кроме того, на который наведена мышь?
Вот как-то так:
main:has(article:hover) article:not(:hover) {
opacity: 0.3;
}
main:hover article:not(:hover) {
opacity: 0.3;
}
#фишка дня
Понадобилось мне тут создать список полей для функции watch (обозреватель введенных значений) в react-hook-form.
Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants].
А watch на вход принимает одномерный массив строк. Так что же делать?
А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.
Удобно? Удобно.
#js #map #flatMap #бородач
25 июня прошел второй Young Con — масштабный фест Яндекса для специалистов, студентов и школьников, которые хотят начать карьеру в IT.
8 000 участников пришли, чтобы познакомиться с инженерами и нанимающими менеджерами компании, попробовать силы в пробных собеседованиях и послушать десятки лекций о карьере, ИИ и технологиях, которые меняют нашу жизнь. А еще посетить интерактивные зоны с технологиями Яндекса, где можно было узнать, как работают лидары в автономном транспорте и увидеть робота, собирающего кубик Рубика за долю секунды — личный проект одного из сотрудников компании.
Помимо экспертов Яндекса, на фесте выступили и приглашенные спикеры. Научпоп-блогер Ян Топлес рассказал про разнообразие карьерных возможностей, а блогер и артист Денис Кукояка обсудил с Глебом Соломиным, как стать креативным продюсером собственной жизни и поговорил о том, почему важно не бояться отсутствия опыта.
Вечером на фестивале прошел финал «Баттла вузов», хедлайнером которого стала популярная музыкальная группа Tritia. Кубок и 1 млн рублей забрал студент из Факультета компьютерных наук НИУ ВШЭ. А после — гости слэмились на лайф-выступлениях от Доры и Feduk.
Подобные фестивали — не только возможность для общения, но шанс узнать про востребованные направления, понять, чем занимаются команды разных сервисов и погрузиться в технологии, которые вы сами сможете развивать в будущем.
Запись выступлений можно посмотреть на VK или YouTube.
#фишка дня
Electron так сильно пытается мимикрировать под нативные приложения, что доходит до абсурда.
Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!
Вот вам -electron-corner-smoothing!
Что это правило делает?
А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.
И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.
.box {
width: 128px;
height: 128px;
background-color: cornflowerblue;
border-radius: 24px;
-electron-corner-smoothing: system-ui; /* Match the system UI design. */
}
react rerender too many times — тебе сюда.
Хард-скиллы — это то, за что нас нанимают. Софт-скиллы — то, за что нас потом терпят, повышают или, наоборот, обходят стороной.
Вечный спор: что важнее? Ответ зависит от контекста. Но чем выше в карьере, тем заметнее, что технических знаний уже недостаточно.
На управленческих позициях особенно важна способность не только делать, но и объяснять, договариваться, делегировать, выстраивать доверие. Всё это — про софт-скиллы.
В бесплатном курсе от Нетологии можно спокойно оценить свои гибкие навыки, понять, что работает, а что мешает.
Обсуждаются темы эмоционального интеллекта, коммуникации, управления временем и критического мышления.
Если хотите прокачать не только хард, но и то, что с годами оказывается важнее — вот ссылка на курс → https://netolo.gy/eepI
Реклама. ООО "Нетология", ИНН: 7726464125, erid: 2W5zFK5okZ6
Как оптимизировать PostgreSQL и не лишиться сна: разбор для разработчиков
Когда вы разворачиваете веб-приложение, чаще всего веб-сервер, бэкенд, база данных и авторизация оказываются на одном сервере.
Тестировщики и менеджер счастливы — все летает. Но потом приложение выходит в продакшн и начинается боль. Запросы тормозят и отвечают по пять секунд, CPU не загружен даже на треть, а веб-сервер выдает 504 Gateway Timeout.
И вот вы сидите ночью и чините прод, потому что PostgreSQL не просто «табличка с данными», а сложный инструмент с кэшем, индексами, буферами и планировщиком запросов.
Как избежать такой ситуации и грамотно подойти к проектированию схем — рассказали в статье Академии Selectel.
Переходите по ссылке и учитесь настраивать СУБД правильно.
Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2Vtzqwmd9RY
#статья дня
От перемены мест слагаемых сумма не меняется, не правда ли?
А если речь о композиции? Например, композиции трансформаций в CSS?
Ну, вот, например раз:
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
.demo {
transition: transform 1s ease;
}
.demo.zoom {
transform: translate(-33.1%, 20.2%) scale(3);
}
.demo {
transition: transform 1s ease;
transform: rotate(0);
}
.demo.zoom {
transform: scale(3) translate(-33.1%, 20.2%);
}
#инструмент дня
Если доступность для вас не пустой звук (а мы уже как-то обсуждали, что рано или поздно с проблемами управления интерфейсом столкнутся все), то поддерживать горячие клавиши точно придётся.
А для этого о них надо как-то договориться, продемонстрировать, выявить возможные проблемы и нестыковки. К примеру, стрелки не работают там, где должны.
Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!
Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr
Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.
Очень круто было наблюдать, как наш техлид джирой манипулирует :)
Ну и я уже вовсю создаю баги поддержки хоткеев с видео. Гораздо удобнее, чем описывать проблему словами.
Upd.
Альтернатива для Windows: http://carnackeys.com/
Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon
#hotkey #a11y #record
😁😀😂😱🤔
Как управлять проектами и планировать работу команды?
Не Джирой единой, как говорится 😎 Навести порядок в рабочих процессах и повысить продуктивность команды помогут инструменты Сферы.
Сфера.Знания — корпоративная база знаний, которая позволяет систематизировать информацию по проектам и дает возможность совместно работать с требованиями, инструкциями, описаниями процессов и другой документацией.
Сфера.Задачи — умный конструктор, который поддерживает различные методологии управления проектами и подходит для команд любого размера, работающих со Scrum / Agile / SAFE / Kanban.
Совместное использование инструментов Сфера.Задачи и Сфера.Знания позволяет:
✅ Быстро искать информацию. Задачи привязаны к статьям в Сфера.Знания.
✅ Фиксировать лучшие практики и решения из задач в базе знаний, чтобы использовать их в дальнейшем.
✅ Работать с актуальной информацией, так как при изменении статуса проекта задача по обновлению создается автоматически.
✅ Оперативно находить необходимую документацию по продукту благодаря связи задач со статьями в базе знаний.
📤 Узнать подробнее о том, как работают инструменты Сферы, можно тут.
Информация о рекламодателе.