14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Если ты начинающий амбициозный frontend developer, который неравнодушен к анимациям и эстетическому дизайну, умеешь в React — эта вакансия для тебя! Нам нужен специалист, который будет работать над интересными креативными проектами, расти и развиваться, помогать всей команде добиваться новых выдающихся результатов! Присылай резюме и примеры работ (желательно сайты с анимациями) на почту hr@chipsa.ru и получи возможность попасть к нам в команду! Предполагаемый и обсуждаемый разбег по з/п: 50-65К. Полный текст вакансии тут: https://shorturl.at/cikmZ
Читать полностью…
Как я могу помочь CSS развиваться
Периодически в подкасте «Веб-стандарты» мы обсуждаем всякие новые CSS-фичи. CSS-блогеры активно делятся демками с этими фичами, выпускают про них обучающие материалы, готовят доклады. Но я, например, не часто задумываюсь, откуда у людей, которые занимаются тем, чтобы новые фичи в принципе появлялись, берётся мотивация этим заниматься.
С внедрением в браузеры всё более-менее понятно. Часто здесь мотивация либо зарплатная (есть программист на ставке, который внедряет фичи из беклога), либо саморазвивающая (привлечение стажёров и студентов в открытые части проектов, опенсорс как получение опыта), либо самоутверждение в хорошем смысле этого слова (тот же опенсорс, но для закрытия какой-то своей потребности в участии в чём-то глобальном).
А что с придумыванием этих фичей? Есть комитет w3c, рабочие группы в нём: там некоторые занимаются фичами на зарплате, а кто-то — на энтузиазме. И вот среди энтузиастов есть люди и компании, которые очень сильно влияют на стандарты как качественно, так и количественно.
Мириам Сюзанн — как раз такой человек. @scope, @layer, CSS Anchor Positioning, popover — все эти довольно революционные для CSS спецификации так или иначе дошли до браузеров благодаря OddBird — компании Мириам. Они ещё делают SCSS.
Никого ни к чему не призываю, но так как я сам спецификации писать не умею, а в браузере их реализовывать и подавно, то помогаю как могу. Буду донатить OddBird, которым сейчас нужны деньги на дальнейшую работу. Когда-то веб-разработчики всем миром собрали на атрибут inert. Я хочу таким образом двигать CSS вперёд.
Хотите так же помогать развитию CSS — https://opencollective.com/oddbird-open-source.
Вообще советую поддерживать денежкой те инструменты, которые вам очень важны. Многие опенсорс-авторы выгорают, потому что после работы приходят делать классное для всего сообщества, а им в issues прилетает не благодарность, а баги и негатив.
Ну а если ваш путь — тот самый open source, который вы хотите делать своими руками, то вот вам видео выходного дня: Андрей Ситник ещё в 2019 году поделился опытом, как продвигать open source.
https://youtu.be/-CLm8bwwL_M
🔥 Это база с 1400 вопросами с собеседований на Frontend разработчика. Фишка в том, что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏
Читать полностью…
Сегодня меня очень сильно выбесили неумением правильно верстать, потому такой наглый репост своего же старого поста.
Дамы и господа, неправильно свёрстанный макет это x2 к срокам, потому что переделывать сложнее, чем делать изначально правильно.
Ну и поскольку я не все обещания данные в посте исполнил, отметьте, что бы хотели узнать по теме, особенно новоприбывшие.
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? 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.
#ссылка дня
Внимание, важный вопрос!
Что вам больше нравится: Volvo или Porsche?
Прежде чем отвечать, подумайте! Ведь речь идёт не об автомобилях, а о...
...дизайн-системах.
Вот это поворот
Да-да, оказывается, для бесчисленных маркетинговых и корпоративных задач автопроизводителей оказывается выгодно иметь не только отдел разработчиков, но и собственные дизайн-системы.
Давайте на них посмотрим.
Volvo: https://vcc-ui.vercel.app/docs
И их Storybook: https://developer.volvocars.com/design-system/web/?path=/docs/getting-started-1-introduction--docs
Porsche: https://designsystem.porsche.com/v3/
Ребята из Volvo даже блог свой ведут. Например, они ушли от CSS-in-JS назад к CSS ещё до того, как это стало модным: https://vcc-ui.vercel.app/blog/2022-11-23-future-css
Кто найдёт дизайн-систему BMW? :)
Кто использовал эти две?
#css #design #ui #storybook
#заметка дня
Сразу с панча: не используйте input[type=“number”].
Он тащит за собой целый ворох проблем:
1. странно выглядит (ниже о том, почему);
2. плохо стилизуется;
3. не подчиняется стандартным атрибутам вроде maxlength (sick!);
4. имеет ARIA-роль spinbutton (ниже поясню, что это);
5. позволяет ввести e (10e9) и валидация даже не заикнётся;
6. в старых Safari и Chrome округляет введённые числа (например, номер кредитки) до мантиссы и экспоненты (по-моему, это уже конец);
7. во время ввода можно случайно нажать стрелку вверх или вниз (или даже тронуть колесо мышки на некоторых ос) и введённое число изменится.
Как видите, минусов немало. А откуда они вообще взялись?
А всё просто: input[type=“number”] создавался для имитации т. н. tally counter, ручного счётчика. Ну вы наверняка видели фильмы, где людей или скот считали надетым на палец устройством. Отсюда и ARIA-роль spinner (счётчик оборотов), и стрелки ввода.
Вот только числа с плавающей запятой или ввод мантиссы и экспоненты — это уже самодеятельность браузеров. Что приводит к идиотичным ситуациям вроде округления чисел.
Так что же делать?
А делать следующее:<input type="text" inputmode="numeric" pattern="[0-9]*">
В 2024 году с такой конструкцией проблем у вас не возникнет. И с точки зрения доступности всё верно. И на мобильных клавиатура нужная встанет.
Да, это не предотвращает ввод букв, только даёт валидацию. Но вы в любом случае должны задать нужное поведение вашей формы скриптом, от этого никуда не деться. даже с number.
За подробностями можно обратиться к блогу разработчиков официального сайта правительства Великобритании: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
Крайне неожиданно было вообще узнать, что ребята из техотдела правительства Великобритании вообще свой блог ведут на официальных началах.
Я помню подобное было у многих государственных сайтов,. но почти все блоги исчезли со временем...
Подытожим: input[type=“number”] делался не для того, как его применяют.
Подумайте об этом.
#css #html #number #aria #semantics #a11y #бородач
#заметка дня
#css #html #pp #pixelperfect
Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.
Сейчас справедливо поднимется вой со всех сторон, что в 2021 году верстать с точностью до пикселя не надо, что у нас десятки разных разрешений экранов, множество возможных комбинаций ориентации и устройств ввода. Да и квалификация дизайнеров зачастую вызывает вопросы.
Но всё немного интереснее.
Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.
Правильная вёрстка экономит время и силы. Даже если вы, как и я, верстаете итеративно, то есть набрасываете крупные блоки и потом начинаете приводить в нужный вид, пишите нужные значения сразу, не откладывая на потом.
У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 10, чтобы “было легче считать” (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/
Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.
Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.
Почему кратно четырём? Потому что округление в пределах четырёх пикселей вполне укладывается в общепринятое понятие точной вёрстки, но на крайний случай у вас останется ещё как минимум два уровня деления. А при использовании нечётных значений transform или устройства с полуторной плотностью экрана дадут вам размытую картинку (к счастью, последние версии браузеров эту проблему часто решают за нас).
В скором времени я попробую затронуть тему вёрстки изначально неудобных макетов: что делать если вам выдали макет в 1920 пикселей, а большинство ноутбуков до сих пор имеют 1366 и как вести диалог с дизайнером и заказчиком в такой ситуации.
Ребят, в начале или середине своего пути вам часто нужно смотреть на примеры кода и реализацию разных возможностей
⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты
Могу смело порекомендовать вам специальный канал для этого: @code_ready
У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства
➡️ Так что подписываемся
#фишка дня
Эмулируем различные особенности зрения легко и просто!
Если залезть в 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>