14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».
⏰ Когда: уже 10 апреля в 19:00 по мск.
Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».
#библиотека дня
Сегодня не самая обычная библиотека, решающая, впрочем, достаточно сложную задачу.
Компания Evil Martians и Андрей Ситник конкретно известны своим скурпулёзным подходом к интерфейсам и их оптимизации. Если кто-то ещё не в курсе существования их блога, настоятельно рекомендую: https://evilmartians.com/chronicles
Ну конкретно по теме канала — тег Frontend, конечно же.
Так вот, одной из их достаточно новых специализаций является разработка интерфейсов профессиональных утилит, в том числе для десктопа. Например, UI для HTTPie.
А без чего нельзя представить себе профессиональное приложение? Правильно, без хоткеев. Да и вообще нынче доступность без хоткеев — не доступность вовсе.
И вот Андрей Ситник на днях выкатил обновление своей библиотеки KeyUX: https://github.com/ai/keyux
Пример её работы на видео. А что умеет?
1. Добавлять горячие клавиши по aria-keyshortcuts
2. Возвращает на место :active у кнопок при использовании клавиатуры
3. Превращает списки в навигационные элементы
4. Правильно отрабатывает стрелки, табуляцию и Esc.
5. Показывает подсказки если нужно.
В общем, мне кажется, это всё должно было быть в браузерах по-умолчанию.
#javascript #a11y #hotkeys
#релиз дня
Некоторые проекты так быстро несутся вперед, что за, казалось бы, минорным релизом скрывается целый мир.
Итак, встречайте: Bun 1.1. Теперь со вкусом Windows!
Для тех, кто пропустил последний год: Bun — это среда выполнения JavaScript, аналогичная Node.js и решающая в целом те же задачи, но построенная вокруг JavaScript-движка JSC aka JavaScript Core.
Напомню, что JSC используется в браузере Safari и в React Native. А это значит, что туда свои силы вкладывают Apple и Facebook. Node.js построен вокруг движка V8, используемого в Google Chrome.
Но дело, конечно, не только в движке. Bun весьма быстрее Node.js и включает в себя не только среду выполнения и оболочку командной строки, но и сборщик, и тесты и пакетный менеджер (npm все же не часть node если что).
Ну просто для сравнения, bun install в 18 раз быстрее pnpm и yarn, и в 30 раз быстрее npm.
К Bun были претензии, что скорость свою они достигли путем срезания углов, многие фреймворки даже принципиально не стали чинить баги, с ним связанные. И не беспочвенно.
Но в версии 1.1 нам пообещали, что множество проблем совместимости с Node.js уже устранено.
И, конечно, главное нововведение: полноценная поддержка Windows! Парни реально последние полгода на это положили.
В общем, смотрим видео о выпуске, там много всего: https://youtu.be/yXTFOeGly9o?si=F4tr_R8X8ec0_BXx
Ну и по факту это значит, что теперь смело можно рассчитывать, что написав скрипт для Bun в Linux, он прекрасно запустится в macOS и Windows и работать будет одинаково.
В общем, когда переходим, котаны? А кто уже?
#bun #node #jsc
Встречаемся в понедельник!
Приглашаем вас на онлайн-встречу с Программным комитетом FrontendConf 2024
📌 01.04 в 19:00 Мск.
Хотите выступить на FrontendConf 2024 7 и 8 октября в Москве? Заявку на доклад можно подать до 15 апреля. Собираем программу заранее, чтобы потом плотно, но в спокойном режиме поработать со спикерами над контентом и подачей.
✔️На встрече 1 апреля расскажем:
— доклады на какие темы интересны нам и нашим участникам в этом году,
— у каких заявок выше шансы пройти в программу,
— как помогаем спикерам готовиться.
Встреча будет особенно полезна, если есть желание выступить, но пока нет темы, или если идея для доклада есть, но не уверены, что она интересна. Приходите, а мы выслушаем и подскажем, как лучше выбрать и «упаковать» тему.
✔️Участие свободное, только зарегистрируйтесь по ссылке: https://tglink.io/b91d20eab4fb
Приходите сами и расскажите о встрече коллегам.
Ждем вас!
erid: LjN8KXKrj
#инструмент дня
Если меня спросят, на чем я стал бы делать ранний прототип, я бы ответил Drupal. Ну или Ruby on Rails. Ну просто потому что я их знаю. На Drupal вообще мышкой можно все накликать и получить рабочий API.
Но, конечно, это уже сравнительно оторвано от реальности :) Простой CRUD aka Create-Read-Update-Delete можно собрать тысячей разных способов.
Так что стоит принести ещё один: Remult.
https://remult.dev/
Remult использует всю мощь декораторов TypeScript для описания своих т. н. сущностей, которые потом станут моделями. import { Entity, Fields } from "remult"
@Entity("tasks", {
allowApiCrud: true
})
export class Task {
@Fields.cuid()
id = ""
@Fields.string()
title = ""
@Fields.boolean()
completed = false
@Fields.createdAt()
createdAt?: Date
}
После чего остается только зарегистрировать созданную сущность в сервере на, например, express и получить готовый CRUD API.
Останется дело за фронтендом, который автоматом тут не генерируется, зато вам доступно множество хелперов для управления своими сущностями.
Прекрасная документация, отличные пошаговые инструкции к разным фреймворкам. Ребята однозначно старались.
Горячая рекомендация, в целом.
#typescript #crud
#фишка дня
Наверное, было бы удобно отображать статус разработки компонентов в Storybook, согласитесь?
Но вот авторы Storybook так не считают. Потому никакой возможности поместить статус отдельного взятого компонента в сайдбар нет.
Хотя, не было.
Варя Степанова предлагает интересное решение с расширением компонента сайдбара. Теперь можно добавить любой лейбл к любому компоненту.
Как-то так:const meta: Meta<typeof Btn> = {
title: 'Components/Button',
component: Btn,
tags: ['NEW'], // Example of assigning status as tags
argTypes: {...},
};
Репозиторий: https://github.com/varya/storybook-8-sidebar-statuses
Пример: https://varya.me/storybook-8-sidebar-statuses/
Авторам сторибука идея, кстати, очень понравилась. Но она не очень укладывается в их концепцию тегировать стори, а не компоненты.
#storybook
Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях
Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции.
Проект «Выше вилки» фиксит этот баг.
Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте.
На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы.
Всё это — на примере реальных кейсов трудоустройства и без «душноты».
Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники.
реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941
Погрузитесь в мир Python с нашим бесплатным курсом!
🎓 Включено 45 уроков, 56 упражнений в тренажере и 163 проверочных теста. Узнаете, как создавать программы, работать с условиями и функциями.
Что вы освоите:
— Составление программ из нескольких модулей.
— Анализ ошибок в коде с использованием отладочной печати.
📚 Курс охватывает основы Python: синтаксис, условия, циклы, типы данных и библиотеки. Практика на каждом шаге поможет вам уверенно использовать язык.
Начните свое обучение с бесплатного базового курса Python и вы сможете создавать несложные программы, а так же анализировать ошибки в коде!
Вообще, оставлю заметку для себя по поводу этого репоста.
Я, в целом, понимаю, что Angie это форк nginx и цель у форка вполне конкретная, но от таких пресс-релизов можно получать пользу.
В данном случае, я, признаюсь, не знал о существовании протокола ACME, и обновлял сертификаты ручками. Ну окей, вызовом бота Let's Encrypt, но всё же.
А мог же просто:
http {
resolver 127.0.0.1:53; # требуется для директивы 'acme_client'
acme_client example https://acme-staging-v02.api.letsencrypt.org/directory;
server {
listen 80;
listen 443 ssl;
server_name example.com www.example.com;
acme example;
ssl_certificate $acme_cert_example;
ssl_certificate_key $acme_cert_key_example;
}
}
Привет, друзья! Рады сообщить, что мы обновили веб-сервер Angie и Angie PRO до версии 1.5.0! 🌟
Интересный факт: ровно год назад мы выпустили Angie PRO, а сегодня представляем новую версию веб-сервера с открытым исходным кодом Angie и Angie PRO — коммерческая версия веб-сервера.
Главным изменением в этом обновлении стало добавление модуля http_acme, который реализует поддержку протокола ACME (Automated Certificate Management Environment). Данный модуль необходим для того, чтобы значительно упростить работу с цифровыми сертификатами веб-сайтов, убирая необходимость использования сторонних решений, таких как EFF Certbot. Теперь Angie не уступает таким решениями, как Caddy!
Инструкция по установке доступна по ссылке.
А ознакомиться с полным списком всех изменений вы можете у нас на сайте.
Angie OSS и Angie PRO.
Как философ заработал состояние в $750 млн на знакомствах?
Дмитрий Волков — предприниматель из списка Forbes, инвестор, доктор философских наук, коллекционер и деятель современного искусства.
Он основал крупнейшую в мире группу компаний по созданию приложений для общения в digital — Social Discovery Group🔥 Ее миссия — решить проблему одиночества, изоляции и разъединения с помощью виртуальной реальности. В нее входит более 40 приложений, которыми пользуются уже более 250 млн пользователей по всему миру.
В своем телеграм-канале Дмитрий рассуждает о философии и будущих технологиях, а также делится особенностями образа жизни цифрового кочевника.
👉Подписывайтесь👈
и участвуйте в дискуссиях!
Напоминаю, что сегодня начинается фестиваль по трудоустройству для фронтендеров.
В рамках него вы можете:
— получить персональный фидбэк и советы по вашему резюме
— решить тестовое задание и получить разбор вашего решения
— пройти тестовое собеседование
На стримах вы сможете посмотреть, что спрашивают, как разбирают ответы участников, получить знания и стать увереннее в себе.
Сегодня вечером можно прийти посмотреть первый эфир и прокачать свое резюме по ссылке — будет полезно и интересно 🥸
В DevTools Chrome 123 встроили какую-то пасхалку. Мол, искать под эмодзи 💫 (комета).
Кто искал? Кто нашёл?
Upd. окей, в комментариях рассказали, как это сделать. Скоро выкачу и сюда :)
#фишка дня
Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.
Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота": .box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}
Пример: https://codepen.io/t_afif/pen/XWQMPqY
#css #animation #transform #trick
#фишка дня
Эмулируем различные особенности зрения легко и просто!
Если залезть в Chrome DevTools, нажать на меню "три точки", выбрать Rendering и найти раздел Emulate vision deficiencies, можно легко понять, как видят ваш сайт, например, люди с искажённым цветовосприятием. Дальтоники.
Список эмулируемых особенностей:
1. Нечёткое зрение (тут и близорукость, и дальнозоркость подойдёт)
2. Протанопия (нет красного)
3. Дейтеранопия (нет зелёного)
4. Тританопия (нет синего)
5. Ахроматопсия (нет цвета)
Начиная с Chrome 112 есть возможность имитировать пониженную контрастность (для имитации катаракты, например): https://developer.chrome.com/blog/new-in-devtools-112/#reduced-contrast
#a11y #chrome #devtools #бородач
#статья дня
Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.
i18n, если ещё короче.
Если говорить строго, правильная локализация — это жопа.
1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.
Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/
TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.
#slack #i18n
Погружение в мир программирования сегодня может стать вашим судьбоносным решением. Я здесь, чтобы показать вам путь, который прошёл сам и доказать, что на это способен каждый! ✨🛣
1. Научу как создавать конкуренцию среди опытных разработчиков на рынке🧑🎓💵
2. Расскажу как создавать качественное ПО, готовое к изменчивым требованиям бизнеса📊📈📉
3. Покажу как тренировать навыки принятия решений в сложных ситуациях💪
Я – опытный разработчик Python, который готов поделиться с вами не только многолетним опытом в коммерческой разработке, но и знанием глубинных секретов и лайфхаков профессии. 📘💼🚀
Получить доступ
#фишка дня
Рукописи не горят! А веб-сайты?
У нас уже был пример сгорающего попапа от Ксении Кондрашовой. Но ей, определённо, было этого мало :)
Итак, встречайте, великолепный пример сочетания шейдеров и анимаций GSAP, а конкретно — GSAP ScrollTrigger: https://codepen.io/ksenia-k/full/GRLqZVR
Впечатляющая работа.
#webgl #animation #shader #scroll
#такое дня
Что, все уже услышали об уязвимости в xz? По ней можно фильм снять.
Для тех, кто любит поточнее: https://habr.com/ru/amp/publications/804039/
Для всех остальных суть в том, что кто-то пять лет внедрялся в доверие к разработчикам средства сжатия lz (а конкретно, библиотеки liblzma) и в какой-то момент внедрил бэкдор. И никто не заметил и внимания не обратил: ну уважаемый человек же.
А заметил это вообще чувак из Майкрософт: Андрес Фройнд. Ему показалось, что тесты как-то медленно проходят 🫠
Ладно, к сути. Информация об уязвимости распространяется вирусным путём. Бэкдор включён в версии 5.6.0 (февраль) и 5.6.1 (март). Линукс-дистрибутивы многие вряд ли этому подвержены, а вот brew в macOS вполне кому-то мог это доставить.
Так вот, не надо кидаться проверять версию через запуск xz --version! Вы буквально запустите приложение. Это касается любых новостей об уязвимостях.
Впрочем, если вредонос уже скачан — то он уже в системе, ибо библиотека-то используется ну почти везде, особенно при установлении SSH-туннелей.
Не надо это делать на своих корпоративных машинах :)
Потому:
1. Проверяйте версию через пакетные менеджерыapt-cache policy xz-utils
brew info xz
и так далее
2. Когда откатили — перезагрузитесь, обязательно.
Как-то так.
P. S. PR с уязвимостью был одобрен старым добрым LGTM.
В канале «BBE: IT-продукт» школы дизайна и технологий Bang Bang Education собираются единомышленники, объединенные любовью к профессии и интересом к технологиям.
Ежедневно в канале выходят посты, посвященные созданию цифровых продуктов и управлению ими, интервью со специалистами из IT-индустрии, подборки с полезными материалами для начинающих разработчиков, тестировщиков, аналитиков и продакт-менеджеров.
Также вы найдете здесь новости о платных и бесплатных мероприятиях школы: открытых вебинарах с преподавателями, на которые может прийти каждый, фестивалях, ознакомительных уроках, которые помогут сделать первые шаги в новой профессии, и новых наборах на курсы Bang Bang Education.
→ Присоединяйтесь к каналу «BBE: IT-продукт», чтобы развиваться в сфере технологий вместе!
Реклама. ООО «СИЛА ЗНАНИЯ», ИНН: 9701158240, erid: LjN8KB94X
#ссылка дня
Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.
У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.
https://codelabs.developers.google.com/
Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.
Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.
Моя рекомендация, в общем.
#google #dev #education #бородач
#библиотека дня
— А что, если типы надо проверять в рантайме?
— Да не, херня какая-то...
Впрочем, создателям библиотеки Typia так совсем не кажется. Да и вам, в целом, казаться не должно: TypeScript, конечно, большой молодец, но типы проверяет только на этапе компиляции. И, конечно же, мы все верим в святые контракты :)
Библиотека предлагает не только проверку входящих данных, но и соответствие JSON описанию.
Есть как простые is и equals, возвращающие логическое соответствие, так и assert и assertEquals, кидающие ошибку.
Отличие is от equals в том, что is менее строгий и позволяет расширение объекта свойствами, которых нет в интерфейсе. Но описанные при этом должны соответствовать. const input: unknown = {
id: v4(),
email: "samchon.github@gmail.com",
age: 30,
extra: "superfluous property", // extra
};
const is: boolean = typia.is<IMember>(input);const
equals: boolean = typia.equals<IMember>(input);
console.log(is, equals); // true, false
Как-то так. Кто использовал уже?
#typescript #types
#такое дня
Ничего необычного на иллюстрации не замечаете?
А здесь происходит ого-го какая драма!
Итак, я понятия не имею, зачем это всё делается, но всеми так любимый виджет выбора aka select до сих пор получает обновления!
У select только два плюса, которые могут заставить вас его выбрать: исключительное удобство на мобильных устройствах и возможность длинному списку вылезти за пределы не только видимой области браузера, но и окна вообще.
Впрочем, из-за этой особенности он не отображается в Zoom- и Meet- и прочих презентациях.
Ладно, к делу. Вы в курсе, что начиная с Chrome 119, Firefox 122 и Safari 17 вы можете использовать горизонтальный разделитель чтобы разбить список для выбора?
Да-да, больше никаких <option disabled>-----</option>! Просто ставите <hr> и всё.
Ну, типа... ну ок.
Все, конечно, ждём popover и selectlist. Эта игра в доделки раздражает.
#css #select #form #widget
#codepen дня
Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG
Это пульсирующая сетка из шестиугольников (гексагональная). Заодно и на мышь реагирует. Принимаю предложения по улучшению, перенесено как было.
Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid
Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/
Учитывая, что они часто используются в играх – почему бы и нет.
#webgl #three #hexagonal #бородач
#фишка дня от 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>
#статья дня
Забудьте всё, что вы знали о режимах смешивания aka mix-blend-mode в CSS. А если не знали ничего, почитайте пару моих постов, и возвращайтесь обратно. Например, вот: /channel/htmlshit/1757
Лучшее, для чего их обычно применяют, это убирание белого фона под логотипами. Не видели? Потом покажу, сейчас о другом.
Что если я вам скажу, что изображение выше — это, кстати, реализация циферблата с Apple Watch — целиком и полностью реализовано режимами смешивания и градиентом?
Верится с трудом, да? Весь секрет в том, чтобы выйти за рамки двух слоёв и смешать несколько за раз. Можно добиться потрясающих эффектов, вплоть до dithering.
Статья Скотта Вэндехе как раз об этом: https://cloudfour.com/thinks/the-power-of-css-blend-modes/
Была бы в 2013 году поддержка mix-blend-mode пошире, можно было бы такой техникой сделать имитацию гравировки в моём невыпущенном конструкторе надгробий, кек
#css #mix #blend #бородач
#фишка дня
Итак, в комментариях к предыдущему посту уже выяснили, что пасхалка — это игра Breakout. Или Арканоид по-нашему.
Появиться она должна 1 апреля. По крайней мере, это следует из кода (в комментариях).
Но за этой пасхалкой скрыта ещё одна: собственно, активация игры до 1 апреля.
1. Открываем профайлер
2. Записываем секунд 5-7
3. Вводим команду fixme (чтобы было интереснее, оставлю вам самим разбираться, как)
4. ...
5. Играем!
Чем хуже производительность сайта — тем лучше игра :)
P. S. Мне не удалось активировать игру на сайтах от Google 🫠 Но по профайлеру, у них всё очень плохо.
С 2 по 27 апреля программа Garage Digital запускает мастерскую по креативному программированию. Она предназначена как для начинающих программистов, так и для тех, кто впервые будет работать с кодом.
Авторы и ведущие мастерской Степан Кухарский и Алина Черейская — основатели SA lab — расскажут о том, как при помощи кода создавать автоматически генерируемые и разнообразные элементы цифровых миров. Результатом станет проект, разработанный участниками самостоятельно.
Подробнее о программе — на сайте. Купить абонемент можно по ссылке.
Токен:
Реклама. Частное учреждение культуры «Музей современного искусства «Гараж». Erid: 2VtzqvtnFiD
#фишка дня
Показать цвет белее белого? Легко!
На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...
Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.
А ещё она очень бесит в тиктоке и инстаграме.
Суть её в том, что можно увеличивать яркость отдельных участков без увеличения яркости всего изображения. Но для этого, конечно, ваш дисплей должен поддерживать такую возможность.
Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode
Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.
Вполне можно применять в билетных сервисах...
Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite
Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...
#hdr #video #ios #macos #бородач