HTML *

Эффект «стены Дурова», который я открыл за 10 лет до самого Дурова

По студенчеству я, как и любой джун, совершал ошибки. Одна из них — классический пример истины «работает — не трожь».

2004 год. Я на 3-м курсе факультета прикладной математики и информатики АГУ (г. Майкоп), параллельно работаю программистом в математической школе при университете. Моя вотчина — программа для подсчёта рейтингов учеников, набор текстов для методичек и небольшой сайт с гостевой книгой.

Кто не застал — гостевая книга тогда была чем-то вроде бесконечного чата без регистрации. У детей мат. школы в ней кипела жизнь: по 100–200 сообщений в день (иногда даже больше), свои шутки, обсуждения задачек, разговоры «за жизнь». Формат был простой и лёгкий — написал ник, сообщение, и готово.

А я молодой, амбициозный и несу людям счастье)))

Я тогда подумал. Почему они мучаются с этим бесконечным тредом сообщений? Это же жутко неудобно! А что если я уберу эту гостевую книгу и заменю ее на удобный форум для своих? Хорошая же идея? Ну, если судить логически, то да. Свой форум, регистрация, понятно, кто пишет, можно делать свои темы и не тонуть в бесконечной беседе. На тот момент мне казалось, что это отличная идея сделать жизнь определенного круга людей лучше.

Нашел на просторах хороший движок и в один прекрасный день заменил гостевую книгу на этот форум. Создал темы и стал ждать, как мне люди скажут спасибо.

Догадываетесь, что было дальше? )))

Правильно. Провал… Ученики не стали использовать новый форум!

Была попытка одного человека что-то написать, но когда никто не ответил, то и он перестал что-то писать + пара регистраций пользователей. Моя попытка это исправить ни к чему не привела. Я даже старые сообщения пользователей из гостевой книги загрузил в новый форум. Все бестолку. Сайт, у которого был отличный трафик, буквально за неделю перестали посещать.

Для меня это было потрясение. Как так вообще? Я же хотел сделать как лучше для пользователей! Почему они не стали использовать новый форум?

Рефлексия и мои мысли на эту тему прилагаются:

• Новый форум не взлетел, т. к. старый был ламповый, легкий. Можно добавить одну запись под ником «Препод такой-то», а следующую «Иванов Иван». Было интересно переписываться в таком легком формате. Был вайб от использования такого формата. Может, помните в VK знаменитое: «Дуров, верни стену!»? Этот косяк Павла из той же оперы.

• Если какой-то сервис работает хорошо, но, на твой взгляд, там все организовано очень нелогично, не надо это исправлять сию минуту! Надо сделать опрос, проверить гипотезы, попробовать узнать мнение пользователей. Бывает, конечно, и такое, что пользователи не могут тебе сказать, что нужно добавить, и при добавлении этого «чего-то» оно действительно взлетает, но делать это нужно аккуратно, просчитывая варианты.

• Этот студенческий урок 20-летней давности я вспоминаю до сих пор каждый раз, когда моя команда предлагает «быстро улучшить» какой-нибудь работающий модуль. Часто при взгляде на проблему задаю себе вопрос: «Какую настоящую работу выполняет для пользователя этот старый, неудобный, но привычный функционал? И не убьем ли мы ту самую "ламповость", просто заменив ее на "правильное" решение?»

Вот такая история.

P. S. Если кто-то читает мой пост из тех, кто тогда сидел в этой гостевой книге, прошу у вас прощения. Я не хотел, чтобы так все вышло.

---

Понравилась эта история? Это пример того, как я анализирую ошибки и извлекаю из них практические уроки. В моем ТГ канале Код ИТ-директора я гораздо чаще делюсь подобными мыслями, короткими кейсами и полезными инструментами, которые не всегда доходят до формата большой статьи.

Меня давно стал мучать вопрос, почему на разных Freelance платформах возникают странные заказы на разработку сайта, но с припиской "Студиям не писать".

Я понимаю требовать портфолио для клиента, это нормально, хочется у видеть человека в деле, но чем студия то не угодила, организация имеющая в своем штате квалифицированных специалистов с хорошим опытом в веб разработке, фактически дающая гарантии качественного исполнения работ, выглядит менее привлекательно чем школьник нагенеривший сайты через нейронку?

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

Так в чем же может быть секрет такой не любви?

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

Очень хочу увидеть ваши комментарии объясняющие такое поведение.

Как немножко хакнуть Мосрег⁠⁠

Всем привет!

При оформлении заявлений в детский сад на детей на uslugi.mosreg.ru столкнулся с тем, что если ранее было подано заявление и нужно какие-то данные в нём поправить, то выбрать год зачисления ребёнка в ДС можно только следующий. То есть, мы подали в 2024, а теперь можно выбрать только 2026 год, потому что текущий нельзя.

Мне показалось это не очень удобным, решил немножко изучить фронтенд сайта и обнаружил, что валидации на простановку года нет :)

В видео подробнее, как обойти ограничение

P.S. На записи не видно контекстного меню в браузере, когда нажимаешь ПКМ, нас интересует последний пункт "Просмотреть код"

Я сделал таймер Pomodoro с котами

Привет, ребята!
Я создал небольшой сторонний проект — милый маленький таймер Pomodoro с котами под названием Meowdoro.

Это бесплатное расширение Chrome, которое помогает вам оставаться сосредоточенным с помощью техники Pomodoro.

Вы можете настраивать сеансы работы/перерыва, отслеживать свою статистику и даже соревноваться в простой таблице лидеров.
О, и есть кот, который мурлычет, когда наступает время перерыва.

Ничего особенного — просто то, что я хотел для себя и решил поделиться.
Буду рад любым конструктивным отзывам или идеям по улучшению!

→ https://chromewebstore.google.com/detail/meowdoro-tracker-pomodoro/gmmcoggmjnbbklphjcbnpfepmagelgkk

Спасибо за чтение! 😺

Верстаем письмо на 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>
   );
}

Больше компонентов — в документации.

Создание аккаунта в облаке

1. Создадим сервисный аккаунт в том же каталоге, в котором находится адрес. Если создать сервисный аккаунт и адрес в разных каталогах, при попытке отправить письмо возникнет ошибка.

2. Назначим сервисному аккаунту роль postbox.sender.

3. Для отправки письма с помощью 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. Информация на ресурсе подана максимально понятно, сопровождается графиками и примерами использования технологии.

Angular Hack: Цикл без данных (в тэмплейте)

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

Вот мой способ (по крайней мере, я нигде такого не видел):

@for (_ of [].constructor(10); track $index) {
<div class="item"></div>
}

Используется Array.constructor, чтобы создать пустую массив фиксированной длины, который @for может перебрать по индексам.

Плюсы ✅

• Чудо-код (удивит коллег)

• Минимум кода (не нужно объявлять массив в компоненте)

Минусы ⚠️

• Чудо-код (может ненадолго ввести в ступор чающего код человека)

Конечно, можно просто использовать Array.from({length: 10})... но так все делают, не интересно)

Норм тема? Как считаете?

Как я выбил 350к в месяц, не написав ни одной строчки кода сам

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

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

Инструменты

Harvi.pro — мой основной инструмент. Норм генерит фронт по текстовому описанию, меньше заморочек с оплатой для наших:

• 999₽ — 10М токенов

• 2499₽ — 25М + 5М бонусом

• 4999₽ — 50М + 10М бонусом

Под капотом Claude 3.7 Sonnet. Беру средний тариф, хватает на 3-4 недели активной работы.

V0.dev от Vercel — тоже неплохой, но дороговат для меня:

• Free — 20 генераций

• Pro — $20 в месяц

• Team — $30 в месяц

Под капотом тоже Claude 3.7 Sonnet. Качество вроде чуть лучше бывает, но с оплатой сами знаете что.

Replit — тут я собираю всё в кучу, тестирую и деплою. Удобно, что можно быстро показать клиенту результат.

Как это на самом деле работает

Не буду врать, что просто нажимаю кнопку и получаю готовый продукт. Это все еще работа:

1. Собираю с клиента максимум инфы и референсов

2. Генерю компоненты по частям (целые страницы редко получаются с первого раза)

3. Много времени уходит на склеивание и фиксы

4. Приходится знать хотя бы основы, чтобы понимать, что пошло не так

Но при этом скорость выросла раза в 3-4. Раньше лендинг делал неделю, сейчас — день-два. Простое приложение с формами — было 2 недели, стало 3-4 дня.

Беру в среднем 80-100к за проект, делаю 3-4 в месяц. Вот и выходит около 350к.

Да, чувствую, что теряю навыки в некоторых областях. Зато прокачался в составлении промптов — это теперь как отдельная специальность.

Ручной кодинг... скоро только в музее)))

Разработчик под ником jslegend представил онлайн версию игры Duck Hunt в HTML5, написанную с помощью библиотеки JavaScript KAPLAY - Duck Hunter.

Игра доступна в браузерах на ПК, управление мышкой.

Обновил Блог!

Ушла эпоха, ушла первобытная романтика и подкупающая искренность прошлого дизайна.

Теперь он новый, свежий, минималистичный и с доработками.

Подробнее в статье

Также буду благодарен, если найдёте баги - пишите о них в комментариях.

Сайт, готовый ко всему — Никита Дубко / Ural Digital Weekend 2024

Опубликовали запись доклада секции «Разработка» с Ural Digital Weekend 2024.

Вспомните, где вы обычно тестируете свое веб-приложение. Скорее всего, у вас есть несколько вьюпортов, в которых вы быстро проверяете верстку и, возможно, пишете автотесты. И багов от пользователей почти нет — значит, все делаете правильно. Но как вашим сайтом пользуются на самом деле? Что нужно предусмотреть, чтобы сайт работал действительно почти везде?

В докладе вы найдете множество интересных примеров и отсылок. Заходите посмотреть!

Ссылка на запись доклада в ВКонтакте.

Ссылка на презентацию: https://goo.su/NRS

Посчитай свой кредит!

Как и обещал в прошлом посте - чуть более серьезный проект:

Калькулятор Кредита

Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.

Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.

Самый быстрый, удобный и красивый калькулятор кредита!

Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.

Наслаждайтесь)

Как бы выглядел Хабр в 1993 году.

Приветствую хабравчане, сидел я вечером за ПК, пил кофе и пришла ко мне идея, как бы Хабр выглядел в 1993 году на html 1.0.

Нашел старые сайты тех лет и попытался в простом варианте воспроизвести Хабр. Вот, что получилось. Довольно забавно:)

<HEADER>
<TITLE>Хабр</TITLE>
</HEADER>
<BODY>
<H1>Хабр</H1>

 <dt>Пришли статью, стань автором! <A NAME=69 HREF="">habr.mail.ru</A></dt>
<A NAME=69 HREF="">Моя лента</A>
<A NAME=69 HREF="">Все потоки</A>
<A NAME=69 HREF="">Разработка</A>
<A NAME=69 HREF="">Администрирование</A>
<A NAME=69 HREF="">Дизайн</A>
<A NAME=69 HREF="">Менеджмент</A>
<A NAME=69 HREF="">Маркетинг</A>
<A NAME=69 HREF="">Научпоп</A>


 <dl>
  <dt><H3>Вышел Linux версии 0.2</H3></dt>
  <dd>
Привет, Хабр!
Ядро Linux набирает обороты. Я расскажу как устроено ядро и почему многие энтузиасты выбирают Linux.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>Ричард Столман хоронит Windows</H3></dt>
  <dd>
В данной статье я приведу 10 причин, почему windows 3.1 и последующие её версии не будут иметь успеха.
   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

 <dl>
  <dt><H3>В программном обеспечении всё плохо</H3></dt>
  <dd>
 Программы тормозят, новые версии требуют всё более мощного железа им уже не хватает 386 процессора на целых 20mhz.

   </dd>
   <dd>
   <A NAME=69 HREF="">Читать</A>
    </dd>
 </dl>

  <dl>
  <dt><H3>Почему С самый лучшмй языка программирования</H3></dt>
  <dd>
Всем приве

Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!

Вот CodeSandbox

Сделано с помощью библиотеки Fusor

Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)

Предтеча другого, более крупного проекта, который будет потом)

В иконках сайта обновление!

Теперь можно генерировать изображения иконок для сайта самостоятельно (все-таки он теперь генератор).

Работает на GigaChat API - генерирует так себе, так что это скорее для галочки.

Но если будет пользоваться популярностью может куплю токенов по-лучше

Программеры Vivaldi сделали кривой Dark Mode

(Видео ниже)

Если поднять яркость экрана, то очень бледный цвет виден. Примерно 5% от белого оригинала. Представьте, сколько можно потерять времени, если отлаживать код в Vivaldi. Я отложил примерно сутки с перерывами. Вместо танков. Спасибо, Вивальди.

Вы будете искать потерянные div и span в Vivaldi часами.

CHROME, EDGE не имеют таких проблем.

Больше всего возмущает такой низкий уровень проблемы. То, что сами разрабы (все абсолютно) не пользуются своим собственными продуктами, это уже давно мне известно. И Вивальди здесь впереди всех, лидер этой банды. Они там всей толпой сидят в Светлой Теме, слепят глаза себе и нам. Багов не видят. Могу еще перечислить. У них там система bug-report cкрыта, разумеется. Но их номера давно перевалили за 100 000. Этой информации достаточно, чтобы перестать писать тудой.

Не могу утверждать что через Vivaldi вообще не виден Белый Свет. По крайней мере, color: этого поста -- активно белый. Но у меня нет других мыслей, кроме ихнего кривого Dark Mode.

Я допускаю, что есть более простое объяснение. Жду его в комментах, очень интересно заполнить свои и вивальдовские пробелы. Заранее согласен на свой позор.

Жду разъяснений, в том от числе и от самих Vivaldi :)

P.S. это также видно на YouTube Shorts

Производственный календарь

Мини-сервис, который позволит удобнее выяснить свою ЗП (аванс и оплату)

Открыт к предложениям по улучшению

Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.

Напоминалки и полезные функции для рутинных задач.

Буду рад предложениям, что еще полезного можно добавить)

В сети вышло видео FastHTML за 100 секунд.

FastHTML — это новый веб-фреймворк Python, который позволяет легко создавать интерактивные веб-приложения без необходимости изучать фреймворк JavaScript, такой как React или Angular. Проект использует HTMX под капотом для включения динамических обновлений контента без полной перезагрузки страницы.