#игра дня

Такого я ещё точно не встречал. Вам предлагается найти убийцу, изучая улики, фотографии и рапорты с места преступления. Чтобы собственно все это прочесть и связать воедино — придётся вводить SQL-запросы к имитированной базе данных.

Дикая штука :) Есть примеры, есть и прохождение. Но попробуйте, особенно если изучаете базы данных прямо сейчас.

https://mystery.knightlab.com/

#db #sql

#статья, а заодно и #инструмент, дня

Я очень люблю заказывать себе и другим футболки с разными глупыми и не очень рисунками. Очень часто найти оригинал изображения не представляется возможным по разным причинам. В наличии только хреновенький растр.

Естественно, это никуда не годится и приходится переводить изображение в векторный формат, SVG. Трассировать его, выражаясь профессиональным языком.

Обычно залетаешь в поиск с запросом "image to vector online" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде http://potrace.sourceforge.net/ или условными Inkscape, люстрой, дровами.

И вот Томас Штайнер взял Potrace, собрал его под WebAssembly и выдал SVGcode. По пути не преминув запилить целую статью: https://web.dev/noscriptcode/

Она сильно поможет тем, кто тоже хочет научиться писать универсальные утилиты используя доступные инструменты, с чего начать и какие API использовать.

Да и сам SVGCode весьма хорош :)

#noscript #pwa #trace

#статья дня

Соскучились по геометрии? Да не врите, по ней невозможно не соскучиться.

Представьте такую задачу: вам надо бесконечно скроллить всего 3-5 слайдов. Причём, скроллить нативно, без дёрганий. Как обычный скролл на мобилах, в общем.

Очевидно, на ум придёт Swiper, есть у него опция freeMode, но он, во-первых монструозный, во-вторых — бесконечный режим на нём столь же бесконечно баганутый.

Я же предлагаю мыслить в 3d: расположите карусель как… как реальную карусель с задолбавшими всех лошадками. И сделайте её достаточно большой, чтобы нивелировать искажение перспективы.

Не знаете, как? Да вот так же: https://3dtransforms.desandro.com/carousel

freeMode уж сами допишете.

Острожно — геометрия! И CSS 3d-преобразования 🤪

Великолепная статья, такие в школе надо преподавать.

#css #js #carousel #3d

#инструмент дня

В Google Chrome DevTools присутствует такая штука, как Recorder. Это, грубо говоря, инструмент для записи и воспроизведения последовательности взаимодействия пользователя с вашим ресурсом.

Чтобы вытащить его на панель DevTools, нужно нажать «трёхточечное» меню 👉 More tools 👉 Recorder.

Нажать «Начать запись», проделать необходимые операции, ну а дальше — выгрузить в простом JSON, описывающем последовательность, или в виде скрипта для Puppeteer.

И естественно, для этого инструмента уже имеются расширения! Одно из них — Testing Library Recorder.

Как можно догадаться, результатом экспорта будет скрипт для Testing Library.

Я не могу сказать, что результат идеален. Сгенерированный CSS-селекторы всегда выглядят диковато. С другой стороны, он помогает избежать рутины.

Удачи в тестировании, котаны :)

#test #jest #devtools #testinglibrary

#ссылка дня

Хотите обучающих ресурсов? Их есть у меня. Желаете "дорожную карту" для обучения? Тоже.

Вот как вам такой вариант: https://andreasbm.github.io/web-skills/, подходит?

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

И никто не мешает дополнить самим.

#css #web #education

#заметка дня

Пока одни считают эмодзи языком неграмотных, другие используют их как метаязык и даже преуспевают в этом.

Мир был бы гораздо скучнее без сложных эмодзи. Но не будете же вы каждый раз менять стандарт для очередной бородатой картинки?

И вот тут на сцену выходят лигатуры.

Что такое лигатура в цифровой типографике? Это замена шрифтом некой комбинации символов на один. А что такое эмодзи? Это лишь ещё один шрифт, который система применяет (или нет, сорян) к определённому диапазону символов.

И вот сочетание из чёрного квадрата и Санта Клауса превращается в чёрного Санту Клауса. Удивительное рядом.

И да, раз это просто несколько символов – к ним можно применять любые средства работы со строками. А пустые символы на самом деле не пустые, это буквально символы склейки: zero-width joiner, чтобы мы были в курсе, что это не отдельные картинки.

Кстати, некоторые из вас наверняка применяют шрифты с лигатурами в своей IDE. Так что не так уж и далеки вы от эмодзи :)

#emoji #ligature #font #unicode

#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

Прелесть этой сетки логотипов в том, что она удивительным образом сбалансирована. Недостаточно просто взять и сделать все изображения одной ширины или одной высоты. Тут думать надо.

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.

Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…

А то часто встречаю весьма халтурный подход.

#js #grid #img

#статья дня

Те из вас, кто использует Instagram, TikTok, Facebook + Messenger, Snapchat, наверняка замечали, что они открывают все ссылки насильно внутри приложения. Telegram, кстати, тоже (но есть настройка). Наверное же, не просто так?

Конечно не просто так :)

Приложения на голубом глазу встраивают свой код прямо в страницу, которую открывают. И могут трекать всё, что угодно. Особенно этим отличился TikTok. Он логирует вообще всё, вплоть до нажатий клавиш: https://krausefx.com/blog/announcing-inappbrowsercom-see-what-javanoscript-commands-get-executed-in-an-in-app-browser

Ну а Facebook естественно божится, что они встраивают код, чтобы повысить вашу безопасность :)

Рекомендую внимательно изучить эту статью и инструмент за ней. Заставляет задуматься.

#security #privacy

#видео дня

И продолжая тему трекинга (который на самом-то деле не всегда зловредный и хочет вам навредить) вот прекрасное видео нашёл.

Утилита заставляет ваш компьютер издавать звук каждый раз, когда Chrome посылает данные в Google. Льёт в уши, так сказать. Гляньте, удивитесь.

Ну и ссылка на саму утилиту, для Linux: https://github.com/berthubert/googerteller

#security #privacy

#шпаргалка дня

Ну теперь-то ты точно не забудешь, как работает justify-content…

…пока не придёт время использовать flex-direction: column 🤪

#css #flex #video

#заметка дня

Безопасный фронтенд в 2022 году выглядит так (в оригинальном твите есть совсем спорные моменты, здесь я их стараюсь убрать или уточнить):

1. HTTPS

2. Токен (авторизационный, или рефреш — зависит от вашей спецификации) должен храниться в secure, samesite, httponly куке. Т. е. не быть доступным из JS (в случае XSS, cross-site noscripting, внедрения кода, токен нельзя будет вытащить с помощью этого самого внедрённого кода).

Если не используете SSR для хотя бы для логина, fetch-запрос (ajax) вполне себе может выставить вам куку с httponly. Главное соблюсти все остальные условия и правильно выставить атрибут Path=/.

3. Объявляйте CSP (Content security policy), чтобы снизить вероятность проведения XSS.

4. Генерируйте куки заново при каждом входе пользователя. Это нужно для предотвращения session fixation, «застывшей» сессии.

5. Задавайте короткое время жизни кук (опять же, застывшие сессии).

По 2 пункту: я вижу столько кандидатов, сдающих тестовые задания с токеном в local storage… Это ладно. Но невозможность ответить на вопрос, почему это плохо — 🚩

#security #cookie #js

Выбирали с командой лучшее название для переменной счетчика цикла. Я победил с…

…формулировкой: «Никаких циклов в новом коде, вы оборзели? Используйте методы перебора».

#фишка дня

Наверняка вы встречали подобные (на иллюстраци) предложения по генерации пароля. Заставить браузер предложить подобное на форме регистрации довольно просто: достаточно установить значение атрибута autocomplete как new-password.

Это не первый раз, когда у нас заходит речь об этом зачастую раздражающем атрибуте. Например, не так давно я писал заметку о том, как заставить Safari перестать пытаться исправить ваш одноразовый код: https://news.1rj.ru/str/htmlshit/477

Но нелишним будет ещё раз напомнить: не забывайте про MDN. Все возможные значения автодополнения там отлично расписаны: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

#css #autocomplete #password

#фишка дня

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

Как писал Джон Кармак: “I can send an IP packet to Europe faster than I can send a pixel to the screen. How f’d up is that?”.

Это я к чему.

Вот выкатили вы здоровую картинку на сайт, уж не знаю, почему. Может, удивить пользователя сверхкачеством хотели. Но её надо же не только доставить, но и декодировать. А если у тебя не последний айфон?

С доставкой нам поможет атрибут loading=“lazy”, но что насчёт декодирования?

Вуаля, такое тоже есть: decoding=“async”.

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

На сладкое держите неплохую лекцию об оптимизации изображений для SEO: https://youtu.be/F6KGcb6trXc с кучей нюансов, включая вышеописанные атрибуты.

#img #decoding #html

#видео дня

Правило scroll-snap, задающее поведение скролла и недавно коротко завирусившееся в твиттере в серии:

— Как Тесла/Эппл/Мета делают такие крутые карусели?
— Да с помощью scroll-snap!

…присутствует в CSS достаточно давно. С поддержкой, правда, были нюансы. Но сейчас мы аж в 2022 году, правда?

Так вот, презентация Adam Argyle описывает не только scroll-snap, но и сопутствующие свойства вроде scroll-margin: https://www.youtube.com/watch?v=34zcWFLCDIc

Слайды: https://oh-snap.netlify.app/#intro
Коллекция примеров: https://codepen.io/collection/KpqBGW

#css #scroll #snap

#статья дня

Всем нам так набивший оскомину хорошо знакомый ESLint наконец-то обновил формат конфигурационных файлов:
https://eslint.org/blog/2022/08/new-config-system-part-1/
https://eslint.org/blog/2022/08/new-config-system-part-2/

Первая статья рассказывает, как ESLint дошёл до жизни такой, добавляя всё больше и больше настроек, extends, :root, overrides, автоматическую загрузку зависимостей…

И вот вторая часть знаменует собой стряхивание всего лишнего и внедрение плоского формата. Нужны зависимости? Укажи прямо. Нужен extends? Не нужен, просто описывай дополнительные правила ниже. Описание сред выполнения заменилось на описывание глобальных условий. И куча изменений для плагинов.

В целом, стало проще и прямолинейнее. Посмотрим.

#eslint #js

#новость дня

Помните новую среду исполнения JS для запуска серверов и использовании в качестве тулинга — Bun?

Ну она ещё использует движок JSC от WebKit, а не V8 от Google?

Ну она ещё дико быстрая, быстрее Node.js и Deno.

Нет? Ну вот я описывал: https://news.1rj.ru/str/htmlshit/1305

Так вот, они организовали свою компанию — Oven (булочка печётся в духовке же) и подняли 7 лямов баксов инвестиций в первом раунде: https://twitter.com/oven_sh/status/1562248114773565440

И начали нанимать инженеров! На Zig и C++.

Короче, можно только радоваться ☺️

#bun #js #zig #cpp

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

#заметка дня

Если вам сказали, что feature freeze — это про фикс багов, то вам сказали неправду.

Или, как минимум, полуправду.

Нельзя фиксить баги без тестов. Если ваш продукт не покрыт тестами, включая интеграционные и e2e, фикс багов в лучшем случае приведёт к тому, что вы что-то забудете починить. В худшем — принесёт новые баги.

Цель feature freeze — отладить и автоматизировать процессы, и закрепить текущее состояние продукта в тестах на каждый customer journey, чтобы не принести регресс. Чтобы не стало хуже.

Вот через это мне и команде скоро предстоит пройти. Попробую держать в курсе открытий чудных.

#такое дня

Я не могу уложить в голову, зачем Андрей Ситник ретвитнул это:

«В javanoscript можно обозвать выражение. Например, дать имя внешнему циклу, чтобы по имени остановить его уже во внутреннем цикле»

Что будет в следующий раз? «Используйте оператор goto чтобы эффективно перемещаться между частями программы?»

Что это такое было вообще?