11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
Как построить облако с нуля? Узнайте от разработчиков новой облачной платформы MWS.
MWS запускает реалити-проект Building the Cloud о создании новой публичной облачной платформы. В прямом эфире наши эксперты и инженеры раскрывают закулисье облачной разработки, делятся уникальным опытом и отвечают на вопросы.
В первом выпуске расскажем о сердце облака — сервисе Compute.
О чём поговорим:
● Зачем мы строим новое публичное облако MWS
● Как устроена архитектура сервиса Compute в новой платформе MWS
● Что происходит «под капотом» облака, когда создаётся виртуальная машина
● Расскажем о планах и роудмапе новой платформы
Приглашаем разработчиков и профессионалов облачного рынка! Задайте свои вопросы разработчикам нового облака MWS и узнайте всё из первых рук.
📅 Дата: 20 ноября 2024, 11:00
👉 Регистрируйтесь сейчас, чтобы не пропустить эфир
#молния дня
Срочно нужно ваше мнение! Куда пихать эмодзи: в коммиты, переменные или комментарии? 👴
#видео дня
Вы думали, я забыл?
Я тут каким-то чудом выкроил время, подолбился в геометрию, документацию и ChatGPT и таки довёл свой ТВ-пульт на #Flutter до вида, в котором за него уже не стыдно.
Теперь навернуть ещё фичей, отшлифовать настройки и в продакшен, котаны!
Подумываю ввести воскресную рубрику о разработке на Flutter и для не-веба вообще, чтобы получилось некое обещание.
Надо? :)
Присоединяйтесь к III Международному Технологическому Форуму THE TRENDS!
Дата: 13-14 ноября 2024 года
Место: IRRI LOFT, Дербеневская набережная 7, строение 31, Москва
————————————
THE TRENDS - это
⚡️ Главное событие индустрии высоких технологий, объединяющее более 4500 участников и более 80 спикеров.
Гости: визионеры, инноваторы, лидеры мнений, предприниматели и топ-менеджеры из IT, AI и Blockchain секторов, представители СМИ и креативной индустрии.
Форум проходит при поддержке
генерального
спонсора JJO
-
сервис для индексного инвестирования в рынок криптовалют. JJO - это S&P 500 в мире децентрализованной экономики.
#такое дня
Тут такое дело, наткнулся на пост в, простите, 𝕏, цитирую: "Айти сообщество может сколько угодно переобуваться в прыжке, переименовывая мастеры в мейны и блэклисты в блоклисты, но в CSS всё ещё есть именованный цвет indianred, и это цвет кожи индейцев".
Давайте чуть разберёмся, вот пример использования: https://codepen.io/alinaki/pen/abPWmNy
Я специально не стал выносить его в иллюстрацию, чтобы каждый себе сам его представил.
Кажется, уже сходу можно догадаться, что это что угодно, но не цвет кожи. На самом деле, он и к индейцам отношения никакого не имеет 🫠
Это цвет почвы, богатой латеритом. В Индии!
Не знаю, зачем я в этот прекрасный вечер вынудил вас открыть форточку, но уж очень захотелось поделиться.
Впрочем, фирма Crayola, когда-то придумавшая восковые мелки, переименовала Indian Red в ореховый ровно по вышеозначенной причине...
А, ну пост был бы неполон без ссылки на обсуждение рабочей группы CSSWG, как раз об этом: https://github.com/w3c/csswg-drafts/issues/5284
Комментарии там очень интересно почитать, на самом деле. Про статистику использования там тоже есть. И про Навахо
#css #color #indianred #бородач
#новость дня
Итак, мы писали Джаваскрипт в браузере, в консоли, на серверах, на микроконтроллерах, в играх, в кофеварках, в аудиоплеерах, телевизорах, в макросах офисных пакетов, в NoSQL базах данных...
Но до сих пор не писали его в хранимых процедурах MySQL!
Встречайте: JavaScript Stored Programs in MySQL. И соответствующий пост в блоге Oracle: https://blogs.oracle.com/mysql/post/introducing-javascript-support-in-mysql
Зачем? Ну для разных целей:
1. Извлечение данных, очевидно
2. Форматирование
3. Примерный поиск
4. Валидация данных
5. Собственные алгоритмы сжатия, сериализации и десериализации данных
Пример:
CREATE FUNCTION gcd_js (a INT, b INT) RETURNS INT
LANGUAGE JAVASCRIPT AS $$
let [x, y] = [Math.abs(a), Math.abs(b)];
while(y) [x, y] = [y, x % y];
return x;
$$;
Если вы еще не в курсе, что Tesla ищет хоббитов, видео в нейросетях можно генерировать бесплатно, и появилась новая бесплатная нейросеть для создания изображений, которая уже наделала много шума, то вам срочно нужно подписаться на канал Завезли фичей!
На канале «Завезли фичей!» вы найдете всё: свежие новости, ИИ-инструменты, подробные обзоры и эксклюзивные инсайды, которыми не поделятся другие авторы.
Внутри — много постов про разработки, инновации, фичи и нейросети, которые уже сегодня трансформируют жизни и бизнесы. Это реальный шанс быть в курсе всего самого важного и интересного.
Подписывайтесь прямо сейчас - t.me/zavezlifichey.
#фишка дня
Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.
Итак, давайте поясню для тех, кто по ссылкам не ходит.
В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.
TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.
На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.
Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.
Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.
Собственно, так база для азиатских языков проникла и в мою жизнь.
Кстати, выбор Emoji из всплывающего окошка — туда же.
В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)
Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010
И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.
#javascript #composing #event #бородач
#инструмент дня
Я, конечно, прошу прощения за неожиданную иллюстрацию к посту, но у меня примерно сейчас такие вот ощущения от либы, про которую хочу рассказать :)
И называется она, какая неожиданность, cigs.
Ну, буквально: 🚬 cigs
Сразу ссылка: https://github.com/cigs-tech/cigs
Итак, что же она делает.
А она позволяет задавать вопросы по заданной Zod-схеме обычным человеческим языком используя OpenAI-токены!
Короче, ещё более просто. Описываешь некую схему объекта, а потом спрашиваешь у системы: "А какой там любимый цвет у Джона?". И получишь ответ!
Пример:
function getUserCompliment(username: string) {
const colorMap = {
"Alice": "blue",
"Bob": "green",
"Charlie": "red",
};
return {
color: colorMap[input.username as keyof typeof colorMap] || "unknown",
};
}
const userInfoSchema = z.object({
username: z.string(),
});
// Define a cig to get a user's favorite color
const getFavoriteColor = cig("getFavoriteColor", userInfoSchema)
.handler(async (input) => {
// Simulated database lookup
return getUserCompliment(input.username);
});
// Usage example
(async () => {
try {
const result = await getFavoriteColor.run(
"What is the favorite color of Alice",
); // { color: 'blue' }
console.log(result);
const result2 = await getFavoriteColor.run(
"What is the favorite color of Susan",
); // { color: 'unknown' }
console.log(result2);
// You can also call that function with the specified input
const result3 = await getFavoriteColor.run({ username: "Alice" }); // { color: 'blue' }
console.log(result3);
// Expected output: { username: 'alice', favoriteColor: 'blue', compliment: 'You have great taste!' }
} catch (error) {
console.error("Error:", error);
}
})();
Превращайте лиды в клиентов без лишних усилий c помощью LeadPlan
LeadPlan – сервис для создания эффективных поп-апов и виджетов без программирования, который поможет:
- собрать базу для рассылок;
- сегментировать аудиторию;
- настраивать стратегии показа виджетов;
- выбирать моменты, когда посетителю действительно требуется помощь в принятии решения о покупке;
- передавать данные в сервисы email-рассылок с готовыми интеграциями;передавать данные по вебхукам.
LeadPlan – это:
✅ просто: создавайте формы за пару минут, даже если вы раньше этого не делали;
✅ профессионально: режим тонкой настройки для создания индивидуального дизайна;
✅ наглядно: отслеживайте ключевые показатели работы виджетов;
✅ эффективно: проводите A/B-тесты гипотез и выбирайте рабочие стратегии.
➡️ Попробуйте LeadPlan бесплатно прямо сейчас!
Реклама. ООО "ПИСЬМО". ИНН 7811602601.
#статья дня
Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?
И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.
И решение на самом деле очевидно! Засирать консоль браузера!
Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!
А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.
То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.
Какой-то глитч на бесконечные стили. Вот бы с деньгами так.
Как-то так:
console.info(
'%c ',
`padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);
Бесплатное IT-образование в 2024
Отобрали для вас полезные телеграм-каналы, которые помогут освоить программирование и другие IT-направления
Выбирайте нужное и подписывайтесь:
👩💻 Frontend: @FrontendPortal
⚙️ Backend: @BackendPortal
📱 GitHub: @git_developer
🤓 Книги айти: @portalToIT
👩💻 Python: @PythonPortal
👩💻 Java: @Java_Iibrary
👩💻 C#: @KodBlog
👩💻 С/С++: @Cpportal
🖥 Базы Данных & SQL: @SQL
👩💻 Golang: @juniorGolang
👩💻 PHP: @PHPortal
👩💻 Моб. разработка: @MobDev
👩💻 Разработка игр: @GameDevgx
👩💻 DevOps: @loose_code
🖥 Data Science: @DataSciencegx
🤔 Хакинг & ИБ: @cybersecinform
🐞 Тестирование: @QAPortal
📱 Маркетинг: @MarketingPortal
🖥 Дизайн: @PortalToDesign
➡️ Сохраняйте себе, чтобы не потерять
#фишка дня
Как-то так получилось, что на мобильных устройствах работать с файлами и буфером обмена ну... неудобно.
И ладно iOS, но на Android тоже интерфейсы такие себе. Даже на Windows Mobile и PalmOS было как-то... стандартнее чтоль.
С другой стороны, появилась идея шэринга, aka share. И она на самом деле отвечает запросам людей: перекинуть файл из одного приложения в другое, а что нам ещё нужно-то?
Итак, встречайте: Web Share API.
Пользоваться очень просто:
navigator.share({
title: "Будни разработчика",
text: "Фронтенд и не только",
url: "/channel/htmlshit",
});
navigator.share({
files: [file],
title: 'hello.png'
});
#фишка дня
Итак, все мы знаем, что при добавлении скроллбара (если этот скроллбар, конечно, виден) у нас происходит сдвиг по фазе полей справа.
Ну или слева, если вы араб.
Но это же можно исправить! Используя правило scrollbar-gutter: stable можно зарезервировать место под скроллбар, не прибегая к иным методам вроде overflow: scroll (который буквально этот самый скроллбар заранее покажет, даже если он не нужен).
Демо от Ахмада Шадида в его Defensive CSS: https://defensivecss.dev/tip/scrollbar-gutter/
Can I Use: https://caniuse.com/?search=scrollbar-gutter
Поддержка в Chrome и Firefox. В Safari пока только в TP, но на Apple-устройствах скроллбары, как правило, скрыты и отображаются поверх контента, не занимая места.
Выглядит это, правда, как дополнительный паддинг, но!
Есть интересное но в виде scrollbar-gutter: stable both-edges, которое зарезервирует место под скроллбар, и такое же — на другой стороне. Что, в целом, избавит нас от разных паддингов.
Раньше за похожее решение отвечало правило overflow: overlay, но его отменили в пользу gutter.
Лучше всего это работает, впрочем, для попапов. Мало кого волнует скроллбар на тексте, а вот прыгающий body при появлении модалки — это уже перебор.
#css #scrollbar #gutter
Готовы получить уникальные знания, которые не найдёте даже на Stackoverflow?
Приглашаем вас на бесплатную IT-конференцию TerraTech MeetUp 31 октября!
Что вас ждёт:
— Презентации от ведущих специалистов на актуальные темы;
— Последние тренды из мира IT;
— Полезные знакомства;
— Ответы на все интересующие вопросы!
Посетить мероприятие может каждый — от начинающего разработчика до опытного специалиста, и абсолютно бесплатно!
Ждём вас 31 октября 2024 года! Сбор гостей начнется в 19:00 по адресу: Варшавское шоссе, 33с12, Megapolis Hall
Регистрация по ссылке
erid: LjN8K3nmM
#инструмент дня
Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.
Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.
И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).
И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/
Я, честно, не считаю вручную акцентированный градиент настолько лучше автоматически созданного по контрасту, но для основных, идейных изображений, наверняка кому-то пригодится.
Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.
#gradient #tool #mesh
Представьте, у вас есть продукт — например, сервис для управления задачами или приложение для планирования бюджета. Он уже на рынке, у него есть пользователи, но что-то мешает им активно и регулярно пользоваться. На этом этапе необходим продакт-менеджер — стратег и креативщик, который сможет вывести продукт на новый уровень, сделав его более привлекательным и удобным для пользователей.
Продакт-менеджер — это специалист, который решает, как должно выглядеть и работать приложение, чтобы его хотелось использовать снова и снова. Он анализирует данные, изучает поведение пользователей и на основе этого вносит улучшения, добавляя нужные функции и делая продукт удобным и полезным.
Курс по продакт-менеджменту от Яндекс Практикума подходит и начинающим продактам, и тем, кто приходит из смежных сфер — маркетинга, проектного управления или IT-предпринимательства. Он поможет систематизировать знания и научиться планировать развитие продукта так, чтобы повышать его вовлеченность и удовлетворять запросы пользователей.
Программа курса охватывает все ключевые этапы продакт-менеджмента: от анализа метрик и выявления проблем до построения стратегии роста и управления продуктом на разных этапах. Студенты учатся на практических кейсах, приближенных к задачам IT-компаний, и формируют портфолио из трех проектов. На каждом этапе они получают обратную связь от опытных продакт-менеджеров, что позволяет быстрее вникнуть в профессию и избежать типичных ошибок.
Для тех, кто хочет научиться управлять продуктом и сделать его интересным и удобным для пользователей, этот курс — отличный способ получить практические навыки и уверенность в своих силах.
Попробуйте бесплатную вводную часть курса, чтобы понять, подходит ли вам профессия. Переходите по ссылке и пройдите первую бесплатную тему до 30 ноября и получите промокод на скидку 20%.
#ссылка дня
Воскресная тема для тех, кому за!
Не так давно разработчики WinAmp решили выложить его код в открытый доступ. По пути несколько раз облажавшись и заодно открыв код, который им не принадлежал :)
Ну и под совершенно неуклюжей лицензией, которая не разрешала буквально ничего.
Но раз винамп снова оказался в сфере наших новостей, представляю вашему вниманию каталог скинов для него! Гордого и всё же непобеждённого.
Каждый скин — шедевр своего времени, выверенный до пикселя.
https://skins.webamp.org/
Скины можно попробовать тут же в проигрывателе WebAmp, который является визуальным и функциональным клоном того самого.
Открытый код, кстати! Кому нужна работа с аудио в том числе — рекомендую к ознакомлению.
#history #winamp #music #audio
#заметка дня
Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.
Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.
Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.
Но есть нюанс.
Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:<td>_markdown_ **тут**</td>
...и будет норм.
#markdown #бородач
Две недели онлайн-лекций по IT от топовых спикеров из Яндекс, VK, YADRO, Самолет, Т-банк!
Институт прикладных компьютерных наук ИТМО с 11-21 проводит онлайн-лекторий, где вы сможете:
– Разобраться в аспектах разработки HL-систем, LLVM-бэкенда для RISC-V архитектуры
– Узнать о возможных проблемах при создании своей ChatGPT
– На примерах погрузиться в аспекты процесса разработки IT-продукта
– Понять, чем на практике полезны продолжения из теории языков программирования
– Получить гайдлайны по исследованиям в области биоинформатики и Computer Science
Переходите на сайт, чтобы узнать подробности и зарегистрироваться.
Реклама. Университет ИТМО ИНН:7813045547
#проверка дня
Я обратил внимание, что уже в который раз рекламка канала про фронтенд в картинках набирает какое-то нереальное количество положительных реакций.
Чтобы проверить, не боты ли это набегают, давайте проведём эксперимент :)
Впрочем, это частично подтверждается тем, что вам всем нравится формат #фишка дня.
Вот есть такой прекрасный Твиттер-аккаунт CSS Weekly и сегодня на нём вышла подборка про логические свойства CSS, которые вы видите на иллюстрациях.
Поделитесь, пожалуйста, своими мыслями на тему. Нравится ли вам такой формат больше, чем текстовый, и почему?
Очень интересно ваше мнение и, естественно, мне надо понимать, пробовать ли в такой формат самому.
#инструмент дня
Вы, наверное, уже наслышаны от обладателей айфонов про AirDrop и дикпики.
Кроме шуток, передать файлы по локальной сети между двумя своими устройствами должно быть максимально просто же! Без ковыряний в Network Discovery, настроек Samba и так далее.
И такое решение есть, даже с открытым кодом: LocalSend.
Сайт: https://localsend.org/
Написано на Dart и Flutter, работает на всех разумно доступных платформах: Windows, Linux, MacOS, Android, iOS.
Не опирается на один протокол, а перебирает все доступные и даже может запустить свой собственный сервер по необходимости. В крайнем случае, можно донастроить.
Никаких облаков, всё по локальной сети.
Поддержка нескольких получателей, поддержка буфера обмена.
В общем, если у вас дома зоопарк устройств и пока не хватило времени настроить что-то иное, или лучше Samba вы ничего в жизни не видели — вот это самое то.
Мне особенно импонирует Flutter. Я недавно вернулся к разработке своего пульта и это всё ещё очень приятный экспириенс.
#flutter #localsend #airdrop #network
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
#codepen дня
Можно ли при помощи SVG-фильтров, не прибегая к помощи теней, экструдировать текст?
Экструзия — процесс выдавливания, как в 3D-принтере.
И да, можно! Как всегда, Ана Тюдор с прекрасным решением. На сей раз, кстати, у решения нет багов на HDR-экранах 😅 Всё отображается как надо.
Кодпен: https://codepen.io/thebabydino/pen/yLmxePV
Выглядит потрясно. Матрица экструзии там отдельная песня, конечно.
P. S. В Telegram практически отсутствует нативная раскрутка, авторам каналов приходится покупать рекламу или надеяться на внешние источники.
Инструмент похожих каналов не всегда помогает.
Но есть папки! И тема сегодняшней папки — IT-архитектура, тимлидство и фронтенд. Как минимум, на пять я уже давно подписан :)
Добавляйте папку, помогите развитию крутых каналов. /channel/addlist/Pk3F9xr4il5lZTc6
А если кто из админов желает в подборки, пишите сюда.
#инструмент дня
Этого следовало ожидать и оно свершилось!
Дамы и господа, без лишних слов: библиотека и конструктор анимаций для Tailwind — Motion.
Сходу ссылка: https://rombo.co/tailwind/#animator
Казалось бы, бери да используй CSS-анимации, но... тут уж как есть. Думаю, работающим с тейлвиндом людям должно быть удобно, да и для конструкторов самое то.
Но, кроме шуток, инструмент и правда довольно оригинальный и подход к построению его интерфейса мне очень зашёл.
#css #tailwind #motion #animation #ui
#инструмент дня
Сколько вы берёте за разработку лендинга?
$100? $300? $3000? $10000?
Ну ладно, у меня были сметы и по $20000, но это были проекты на целую веб-студию, а не мне одному 😭
И тут я натыкаюсь на это: https://x.com/alex_barashkov/status/1801219973236342910
$89,775
Девяносто кусков! За лендинг 🫠
Который, правда, чуток подтормаживает на MacBook Pro M2. Как быстро мой ноутбук устарел, а...
Ладно, на самом деле пост не об этом. Меня повеселило, что, по факту, ребята не только сделалил лендинг, но и по пути взлетели на полмиллиона просмотров твита, пропиарив продукт и заодно наняв нескольких инженеров.
Но название: Huly... Кремниевую долину пересмотрели?
Учитывая, что хайринг инженера стоит $5000-$10000, инвестиция уже отбилась!
Типичный диалог под обсуждением лендинга выглядел так:
— С точки зрения донесения информации полная ерунда.
— Слыш, а ты сам так умеешь?
...
— О, умеешь. Давай к нам.
Кроме шуток, у меня пруфы есть: https://x.com/platoff/status/1801240777026080980
Ладно, даже сейчас пост не об этом!
Утомил, да?
Короче, меня там заинтересовал текстовый редактор в виде плавающей панельки. Я полез в их гитхаб (а хули, хули — опенсорсный продукт) и нашёл это: https://tiptap.dev/docs/editor/introduction
TipTap это, как нынче считается хорошим тоном, не готовый текстовый редактор, а фреймворк для их построения (на базе ещё более низкоуровневого решения https://prosemirror.net/).
Хочешь — плавающая панель, хочешь — тулбар. Удобно. Крайне интересная вещь.
Вот так вот, интересно, когда есть в чём покопаться.
#web #editor #wysiwyg #бородач
#фишка дня
Мне очень понравился этот бред, так что в рамках субботы очень даже пойдёт.
Итак, как найти первое вхождение элемента на странице, даже если он — вложен где-то внутри другого? Можно же так?
Вы не поверите, можно!
Код:
.target {
&:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
/* your CSS here */
}
}
📚Библиотека промптов для самых разных задач и профессий
Внутри - сотни проверенных запросов для ChatGPT, которые удобно разбиты по категориям (от домашнего обучения до маркетинга и разработки)
Библиотека постоянно обновляется, а доступна она здесь - Нейрон
Сохраняй и пользуйся!💾
#ссылка дня
Продолжаем серию постов о Tailwind+React UI компонентах от Паскаля Витьелло!
У нас уже были поля ввода и кнопки. Настало время, очевидно, чекбоксов, радиокнопок и всякого рода переключателей!
На сей раз уже не 50, а даже побольше :)
Ссылка: https://originui.com/checks-radios-switches
Как обычно, основано на shadcn и Tailwind. Вообще, вышло мило и даже разнообразно.
#tailwind #shadcn #react #ui
#ссылка дня
Вы, наверняка, слышали выражение: «В экстремальной ситуации ты не поднимаешься до уровня своих ожиданий, а опускаешься до уровня своей подготовки».
Вот только соцсети настолько заездили его говорящими головами от самообороны, что мало кто воспринимает эту фразу в отрыве от «на тебя прут три гопника».
А ведь это — буквально закон Йеркса — Додсона, ссылка на Википедию.
В стрессовой ситуации легче всего даются простые задачи, иначе говоря — отработанные. Более того, чем выше стресс — тем легче они даются! Повышается внимание, становится легче удерживать фокус, раскрываются шаблоны и обходные пути.
Но если не повезёт в стрессе получить тяжёлую, сложную задачу... В какой-то момент кто-то даже начнёт кричать на монитор :)
Это я вообще к чему.
1. Слона нужно есть по-кусочкам.
2. Поведение в случае инцидента на работе должно быть строго задокументированое и разбито на понятные, простые действие.
3. Микроменеджмент, чайка-менеджмент — хороши для простых задач и абсолютное зло для больших.
4. Планирование — само по себе стресс, но в долгосрочной перспективе лучше с ним, чем без него.
5. Взгляните ещё раз на нижний график: важно знать, когда это самое планирование остановить и дать всем выдохнуть.
А ещё этот же принцип можно использовать для контроля команды и настроения команды в целом. Если человек постоянно занимается мелкими, пусть вроде и важными, задачами — самое время спросить, а всё ли в порядке, не нужен ли отпуск или выходной.
Немного сумбурно, пожалуй, но, надеюсь, я смог донести мысль.
Отдохните, котаны. И следите за собой и другими.
#stress #work