HTML *

В Go есть очень полезная фишка – go:embed, это поддержка встраивания файлов и папок в исполняемый файл приложения во время компиляции без использования внешних инструментов.

С помощью этой функции вы можете встроить все ресурсы, необходимые для работы веб-приложения, в один бинарный файл.

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

В качестве примера, простое приложение/каталог AI моделей, которое читает JSON файл со списком моделей.

https://github.com/avkcode/AwesomeAI

//go:embed LICENSE README.md favicon.svg index.html models.json
var content embed.FS

То есть можно фронт и бэк встраивать в один исполняемый файл. Мы не ограничены в выборе файлов – это может и база данных SQLite или TLS сертификаты. Для некоторых use-кейсов это может изрядно упростить работу.

Как я выбил 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 под капотом для включения динамических обновлений контента без полной перезагрузки страницы.

Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Сегодня поговорим про отображение HTML-тегов как виджетов в наших приложениях на Flutter.

Чаще всего для этого используется библиотека flutter_html:

Html(data: ‘<p>Hello World</p>’);

Но у нее есть несколько минусов:

– Она больше года не обновлялась, что с одной стороны хорошо, так как она стабильна, а с другой — она уже устаревает.
–В ней есть баги. Например, если внутри тега <p> окажется список (<ul>, <ol>), то снизу появляется отступ, равный высоте списка.
– Не очень понятная система стилизации. Чтобы что-то изменить, нужно разобраться, как это делается, так как вместо CSS-атрибутов используются собственные подходы.

Пример стилизации, где нужно поменять размер шрифта для всего документа:

  data: ...,
  style: {
    ‘*’: Style(
      fontSize: FontSize(15),
    ),
  }
);

Столкнувшись с этими минусами, мы решили перейти на вторую по популярности библиотеку — flutter_widget_from_html_core. Во-первых, она лишена вышеописанных багов. Во-вторых, она модульная, и к ней можно многое прикрутить.

HtmlWidget(‘<p>Hello World</p>’);

Со стилями всё интереснее. Шрифт устанавливается через стандартный TextStyle:

  ...,
  textStyle: 
TextStyle(...),
);

Но если нужно его раскрасить или что-то ещё, всё становится сложнее. Продолжение по ссылке.

Омар Шехата поделился одним из своих самых популярных проектов. Это крошечное веб-приложение JPEG Viewer для демонстрации алгоритмов, которые работают в формате сжатия JPEG.

Страница демонстрирует, как изображение разбивается на блоки 8×8 пикселей, каждый из которых затем подвергается алгоритму дискретного косинусного преобразования. Упрощённо можно сказать, что каждый из блоков математически преобразуется из двумерного изображения в сигнал, а затем представляется как сумма синусоид. Интересно в инструменте Омара то, что он допускает ручное редактирование преобразования каждого из блоков 8×8 пикселей.

Также Омар рекомендует свою статью про алгоритмы сжатия JPEG, в которой он применил схожие инструменты.

Игровые движки и HTML5: а что по размеру билдов?

На рынке игровых движков полно вариантов на любой вкус и цвет, начиная от Open Source решений и заканчивая огромными коммерческими комбайнами. Большое количество игровых движков поддерживают сборку проекта для веб-платформ. Но от движка к движку различается итоговый размер собранного проекта. И это может влиять очень критично - не все платформы дистрибуции готовы хостить веб-проекты сами, а если и готовы, то они часто имеют ограничение на размер проекта.

В связи с этим решил посмотреть, а что по размеру сборок у основных игроков на рынке?

Тестовая сцена влючает в себя лого Godot 128x128 32 бита, размер 4,209 килобайт.
Результаты сборки при максимальных возможных оптимизациях на уровне движка:
1. Godot (4.2.2) - 18.7 мегабайта. Остались включенными только модули GDScript, OpenGL, Brotli. Для полноценной работы маловато, но терпимо. Снизить ниже уже в разы сложнее.
2. Unity (2022.3 LTS) - 8.42 мегабайта. Потенциально можно дойти до 3-5 мегабайт.
3. Defold (1.8.1) - 2.62 мегабайта. Размер сборок мониторится, графики правдоподобные.
4. Game Maker (2024.4.1) - 2.32 мегабайта. Ужать дальше можно только с сжатием контента. upd можно залезть в код

Сюда не вошли:
1. Unreal Engine. Последняя версия с поддержкой web-платформ была 4.24, дальше только в виде отдельного расширения.
2. Нативные для браузеров движки на JS/TS, коих множество.
3. Прочие решения, которые не подошли мне по разным параметрам: Phaser, PlayCanvas, Construct, GDevelop и другие.

Q-OTP - двухфакторная аутентификация на VueJS.

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

Компонент подключается как Quasar App Extension:

quasar ext add q-otp

Пример подключения:

<template>
  <QOtp
      field-classes="q-ml-xs q-mr-xs"
      @complete="(code) => alert(code)"
  />
</template>
<script lang="ts" setup>
  import QOtp from 'quasar-app-extension-q-otp'
</script>

Исходный код доступен на Гитхаб под лицензией MIT.

WT Contact anywhere with fields плагин для Joomla 5

Этот пакет плагинов нужен для вывода информации из компонента контактов com_contact Joomla. Например, Вы создали каталог онлайн курсов на одном из компонентов для электронной коммерции или материалах Joomla и Вам нужно вывести информацию о преподавателе курса - Вы можете использовать этот плагин. Плагин позволяет отображать данные контакта со всеми стандартными полями, а так же данными пользовательских полей. Для этого нужно создать свой макет вывода в папке tmpl плагина и указать его в параметре шорт-кода.

Пакет состоит из двух плагинов:

• Плагин контента - обрабатывает шорт-коды и выводит информацию об авторе в материалах Joomla.

• Плагин кнопки редактора - позволяет удобно искать и выбирать контакты в модальном окне и вставлять шорт-код с выбранным макетом вывода.

Информация об авторе статьи в Joomla

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

Системные требования

Минимальная версия Joomla - Joomla 5. На Joomla 4 плагины из пакета не будут работать.

Страница расширения

GitHub расширения

Как отключить кеширование браузера с помощью мета-тегов HTML.

Правильный минимальный набор заголовков, который работает в наиболее распространённых браузерах:

• Cache-Control: no-cache, no-store, must-revalidate

• Pragma: no-cache

• Expires: 0

Где:

• Cache-Control для HTTP 1.1

• Pragmaдля HTTP 1.0

• Expires для proxies