Похоже, того фронтендера, который знал, что такое margin, уже оптимизировал "Режим ИИ". Либо вайбкодинг есть - поэтому отступов нет 😅
Сделал минималистичную тему для Habr, которая убирает отвлекающие блоки и акцентирует внимание на разных элементах текста.
Тема делает следующее:
Убирает лишние элементы с экрана
Размещает текст по центру для удобства чтения
Подчеркивает заголовки для лучшего считывания структуры
Делает заголовки цветными
Выделяет жирный (красным) и курсив (зелёным)
Окрашивает ссылки: внутренние (голубым) и внешние (фиолетовым)
Делает inline-код более заметным
Улучшает стиль таблиц
Делает более комфортный для чтения междустрочный интервал
Устанавливает для текста шрифт Inter
Установливается бесплатно через расширение Stylus (firefox / chrome).
minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript
В статусбаре в vscode – очень много всего: как полезного, так и лишнего.
Сегодня посмотрим, как можно его кастомизировать:
Можно просто спрятать (как делаю я)
Можно очень детально кастомизировать
Можно перенести часть его функций в плагины
И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.
В выпуске:
Будем писать CSS для удаления лишнего из status bar
"custom-ui-style.stylesheet": {
"#status\\.problems": {
"visibility": "hidden !important",
"display": "none !important",
}
}И создавать локальные плагины на #javascript для кастомизации поведения редактора
function updateColumnPosition() {
const positionLabel = document.querySelector(
'#status\\.editor\\.selection .statusbar-item-label',
)
if (!positionLabel || !positionLabel.textContent) {
// It might not exist for some reason ¯\_(ツ)_/¯
return
}
const currentLine = document.querySelector(
'.line-numbers.active-line-number',
)
// Now we would have the column position instead of the active line number:
const colNumber = positionLabel.textContent.match(/Col (\d+)/)
currentLine.textContent = colNumber[1]
}Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича.
Верстаем письмо на React, чтобы оно корректно отображалось во всех почтовых клиентах
Чтобы свёрстанные письма хорошо выглядели на десктопе и мобильных, нужно знать, как почтовые клиенты поддерживают возможности CSS и HTML. И на практике это не всегда просто. Например, Gmail отбрасывает атрибут style целиком, если встречает в нём цвет, заданный как rgb. В итоге даже в 2025 году вёрстка писем нередко сводится к написанию таблиц и атрибутов наподобие align, valign, bgcolor и т.д.
Вдобавок, после отправки письмо нельзя поправить, как страницу на сайте, и это тоже добавляет сложности.
Наша команда решила оценить для создания писем библиотеку React Email. Она предоставляет компоненты, которые генерируют HTML и CSS для корректного отображения во всех почтовых клиентах. Письмо можно посмотреть в браузере и отправить на почту. Под капотом всё равно останутся таблицы, но писать их руками не придётся.
На примере отправки через сервис Yandex Postbox покажем, как это работает.
Начало работы. Установим библиотеку @react‑email/components и клиент для работы с почтовым сервисом AWS SESv2 — Postbox поддерживает эту версию клиента.
npm install @aws-sdk/client-sesv2 @react-email/componentsСоздадим компонент, который будет генерировать письмо:
email.tsx
import * as React from 'react';
import { Button, Html } from '@react-email/components';
export function Email(props) {
const { url } = props;
return (
<Html lang="en">
<Button href={url}>Click me</Button>
</Html>
);
}Больше компонентов — в документации.
Создание аккаунта в облаке
Создадим сервисный аккаунт в том же каталоге, в котором находится адрес. Если создать сервисный аккаунт и адрес в разных каталогах, при попытке отправить письмо возникнет ошибка.
Для отправки письма с помощью SDK создадим статический ключ доступа. Важно надёжно сохранить идентификатор и секретный ключ. После того как вы закроете окно, параметры секретного ключа станут недоступны.
Отправка письма. Ключи доступа можно передать в конструктор SESv2Client явно, как показано ниже, указать их в переменных окружения или использовать конфигурацию AWS CLI.
import { render } from '@react-email/components';
import type { SendEmailCommandInput } from '@aws-sdk/client-sesv2';
import { SendEmailCommand, SESv2Client } from '@aws-sdk/client-sesv2';
import { Email } from './email';
import React from 'react'
const sesClient = new SESv2Client({
region: 'ru-central1',
endpoint: 'https://postbox.cloud.yandex.net',
});
const emailHtml = await render(<Email url="https://example.com"/>);
const emailText = await render(<Email url="https://example.com"/>, {
pretty: true,
plainText: true,
});
const email: SendEmailCommandInput = {
Content: {
Simple: {
Body: {
Html: {
Data: emailHtml,
},
Text: {
Data: emailText,
},
},
Subject: {
Data: 'Тестовое письмо',
},
},
},
Destination: {
ToAddresses: [
'bob@example.com'
],
},
FromEmailAddress: 'Alice <alice@example.com>',
}
const command = new SendEmailCommand(email);
const result = await sesClient.send(command);
console.log(result);Чтобы удобно запускать скрипт, установим tsx loader:
npm install --save-dev tsxТеперь запустим скрипт, передав в переменные окружения ключи сервисного аккаунта:
AWS_ACCESS_KEY_ID=... AWS_SECRET_ACCESS_KEY=... node --import @nodejs-loaders/tsx index.tsxВ консоли увидим ответ от Postbox. Если письмо отправлено успешно, то в ответе будет MessageId.
{
'$metadata': {
httpStatusCode: 200,
requestId: undefined,
extendedRequestId: undefined,
cfId: undefined,
attempts: 1,
totalRetryDelay: 0
},
MessageId: 'D8BT2CX3IDK2.2HZQ4CE0E8CRL@ingress1-sas'
}Если захотите отправить несколько писем в цикле, рекомендуем добавить в код задержку между отправками, чтобы не превысить квоту.
Доступен простой и понятный учебник для начинающих веб-разработчиков для обучения HTML и CSS. Информация на ресурсе подана максимально понятно, сопровождается графиками и примерами использования технологии.
Разница между масштабирование и зумом в CSS. Зум работает так же, как и масштабное преобразование, но в отличие от масштабирования, он влияет на макет страницы. Другими словами, макет страницы пересчитывается с учётом нового размера масштабируемого элемента.
Ушла эпоха, ушла первобытная романтика и подкупающая искренность прошлого дизайна.
Теперь он новый, свежий, минималистичный и с доработками.
Также буду благодарен, если найдёте баги - пишите о них в комментариях.
Дорогие разработчики, как вы относитесь к работе в стартапах?
Если был опыт работы в них, то на каких условиях вы соглашались работать? Процент от компании или зп? Может и то и другое?
Я делаю стартап и ищу разработчиков в команду, поэтому хочу узнать какие условия могли бы быть интересными для вас
Было бы шикарно, если бы кто-нибудь смог проконсультировать по разработке
Посчитай свой кредит!
Как и обещал в прошлом посте - чуть более серьезный проект:
Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.
Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.
Самый быстрый, удобный и красивый калькулятор кредита!
Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.
Наслаждайтесь)
Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!
Вот CodeSandbox
Сделано с помощью библиотеки Fusor
Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)
Предтеча другого, более крупного проекта, который будет потом)
В иконках сайта обновление!
Теперь можно генерировать изображения иконок для сайта самостоятельно (все-таки он теперь генератор).
Работает на GigaChat API - генерирует так себе, так что это скорее для галочки.
Но если будет пользоваться популярностью может куплю токенов по-лучше
@container запросы на основании стилей — давно забытое старое, да и сделано убого.
При взгляде на эту новую технологию вспоминается давно забывая спецификация для @extend, на которую все забили, кроме пары плагинов для PostCSS. Как и та спецификация, эта технология — чуть более сложный миксин или функция, копировать — вставить с условиями. Жаль только, что сделана настолько криво. Я конечно не ожидал от приемников создателей flex и grid чудес, но не настолько же.
1: Срабатывая неявно (достаточно иметь свойство с определённым значением), они делают код похожим на минное поле. Нужно либо помнить все свойства, что вызывают запросы, либо жёстко регулировать их применение (ещё один подводный камень который будет в разработке, очень удобно).
2: Какой мыслант гигысли додумался сделать это на основе контейнерных запросов? Ведь совершенно очевидно, что запрос с названием «container» будет принимать... стили.
Иначе выражаясь — переделывать.
Ближайшие события
Программеры Vivaldi сделали кривой Dark Mode
(Видео ниже)
Если поднять яркость экрана, то очень бледный цвет виден. Примерно 5% от белого оригинала. Представьте, сколько можно потерять времени, если отлаживать код в Vivaldi. Я отложил примерно сутки с перерывами. Вместо танков. Спасибо, Вивальди.
Вы будете искать потерянные div и span в Vivaldi часами.
CHROME, EDGE не имеют таких проблем.
Больше всего возмущает такой низкий уровень проблемы. То, что сами разрабы (все абсолютно) не пользуются своим собственными продуктами, это уже давно мне известно. И Вивальди здесь впереди всех, лидер этой банды. Они там всей толпой сидят в Светлой Теме, слепят глаза себе и нам. Багов не видят. Могу еще перечислить. У них там система bug-report cкрыта, разумеется. Но их номера давно перевалили за 100 000. Этой информации достаточно, чтобы перестать писать тудой.
Не могу утверждать что через Vivaldi вообще не виден Белый Свет. По крайней мере, color: этого поста -- активно белый. Но у меня нет других мыслей, кроме ихнего кривого Dark Mode.
Я допускаю, что есть более простое объяснение. Жду его в комментах, очень интересно заполнить свои и вивальдовские пробелы. Заранее согласен на свой позор.
Жду разъяснений, в том от числе и от самих Vivaldi :)
P.S. это также видно на YouTube Shorts
Производственный календарь
Мини-сервис, который позволит удобнее выяснить свою ЗП (аванс и оплату)
Открыт к предложениям по улучшению
Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.
Напоминалки и полезные функции для рутинных задач.
Буду рад предложениям, что еще полезного можно добавить)
Как растянуть элемент #code на оставшуюся ширину?
<!DOCTYPE html>
<html>
<head>
<title>Code Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="panel">
</div>
<div class="tips">
<p>tips</p>
<hr>
</div>
<textarea id="code">
</textarea>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: #202020;
}
.container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.panel {
width: 100%;
height: 5vh;
background: #2d2d2db2;
}
.tips {
width: 30%;
height: 100%;
background: #303030;
z-index: 100;
}
.tips p {
color: #202020;
padding: 1.5vh;
}
.tips hr {
background: #202020;
border: 1px solid #202020;
}
#code {
background: red;
width: 100%;
height: 100%;
}
Препарируем Tailwind CSS и находим родовые травмы
Бандлинг лишь используемых стилей, но..
Тормоза при любой динамике.
Раздутый HTML.
Крайне слабая кастомизация стороннего кода.
Сложный массовый рефакторинг.
Куча стилей компонента в одну строку.
Копилка благодарностей: https://boosty.to/hyoo
Препарируем StyleX и находим родовые травмы
Решение от большой компании, но..
Раздутый как CSS, так и HTML, и даже JS
Несемантичный CSS и HTML
Околонулевая типизация без автодополнения
Много бойлерплейта
Зависимость от Babel
Тормозная сборка
Сложная отладка
Копилка благодарностей: https://boosty.to/hyoo
Нам обещают эффективную компиляцию utility-css ради высокой скорости, но получаем мы дикие тормоза на ровном месте.