Ребята, смотрите какую я штуку замутил в браузере — font tester. Выводит в текстовое поле все глифы шрифта, проверяет поддержку языков, позволяет заменять в тексте любые альтернативы (даже locl) и смотреть как это все выглядит. Также можно скачать PDF-отчет о проверке с метаданными и всеми глифами и отправить его заказчику, например. Важно: загружаемые шрифты не отправляются мне на сервер. Все проверки происходят прямо у вас в браузере.Буду благодарен за обратную связь) может еще какие-то функции хотели бы прикрутить — пишитеhttps://pavljenko.ru/blogs/tools/font-tester
Веб-разработка — страница 5
Лента темы
В закрытом чатике пришла идея написать llms-txt по разработке Telegram Mini App с нуля, чтобы упростить онбординг в экосистему, ведь у Base и Farcaster тоже есть и миниаппы, и для них llms-txt.Собрал ссылки на доки, нужные библиотеки и best practices в одном месте. 🔗 github.com/ohld/tma-llms-txtИ провели стрим, где я с нуля сделал, задизайнил и задеплоил простую игру крестики-нолики (код).Обсудили:• генерацию TMA не глядя в код • автодеплой на vercel• генерацию дизайна с помощью variantЗапись стрима:🔗 youtu.be/s92JCCQB9fk
🤔 Вот есть на сайте товары с ценами за штуку, но минимальный заказ - от 50 шт. А указывать сразу цену за 50 шт. - неправильно и цена сразу неконкурентная выходит. Что делать, чтобы пользователь не тыкал 50 раз на плюсик или вводил сам эти 50 шт. товара? Вот был бы такой функционал, чтобы кликнул на кнопку "Добавить в корзину" и хоба - в корзине сразу нужное количество оказалось с актуальной ценой.😘 Да вот же он! Пользуйся, не забудь про лайк.<!-- Закидывать товар в корзину оптом. https://t.me/breeze_tilda --><script>var wholesaleQuantity = 50; // Меняйте количество товара в корзине тут$(document).ready(function() { var originalAddProduct = window.tcart__addProduct; window.tcart__addProduct = function(product) { if (!product.quantity || product.quantity === 1) { product.quantity = wholesaleQuantity; } return originalAddProduct(product); }; $(document).on('click', '[href^="#order"]', function(e) { var currentProduct = $(this).attr('href'); if (window.tcart && window.tcart.products) { var productExists = false; for (var i = 0; i < window.tcart.products.length; i++) { if (currentProduct.indexOf(window.tcart.products[i].name) !== -1) { productExists = true; break; } } if (!productExists) { setTimeout(function() { if (window.tcart.products.length > 0) { var lastProduct = window.tcart.products[window.tcart.products.length - 1]; if (lastProduct.quantity < wholesaleQuantity) { lastProduct.quantity = wholesaleQuantity; lastProduct.amount = lastProduct.price * wholesaleQuantity; tcart__updateTotalProductsinCartObj(); tcart__reDrawTotal(); tcart__saveLocalObj(); } } }, 100); } } });});</script>Копировать - вставить - заменить цифру на свой мин.заказ📺Посмотри, как работает - https://dabreeze.ru/blog/opt
Многие знают мемы про "включить-выключить и проверить не починилось ли". В современной версии это "включить-выключить адблок" и "проверить не включен ли впн".И да, это всё также решает значительную часть проблем с доступам к сайтам или их работоспособности. Когда сам постоянно это рассказываешь людям, это кажется очевидным, но порой я и сам забываюсь и не могу понять "а где моё поле ввода для оплаты этих прекрасных суши".Вообще на рынке рекламных блокировщиков часто происходят разные истории. Например, появление возможности показа "допустимой рекламы", когда с помощью некоторых договоренностей блокировщик блокирует не всю рекламу. Или истории про хардкорные решения "вы не будете читать наш сайт, пока мы детектируем у вас блокировщик". Обычно компании сталкиваются с проблемой "как сделать так, чтобы блокировщики не блокировали рекламу". Придумывают способы. Потом блокировщик обновляется. Необходимо искать новые способы. И так идёт это бесконечная борьба. Но однажды, некоторые блокировщики решили две вещи:1. Мы же можем считать рекламой всё, что пользователи помечают как реклама. А если это не реклама, то видеть они всё равно это не хотят. Поэтому мы будем блокировать эти элементы и для других наших пользователей.2. А давайте блокировать не только то, что прям явно реклама, но и некоторые технологические решения, которые позволяют размещать рекламу. И даже не будем смотреть, а что ещё на этом может быть построено внутри сайта. И в итоге некоторые компании оказались в довольно интересной ситуации, где блокировщик блокирует не только рекламу, но и часть функционала сайта. Вариантов решения не так уж и много:1. Пойти на контакт с создателем блокировщика - в текущих реалиях это не всегда возможно, потому что некоторые из них не поддерживают определенные контакты из-за санкций.2. Оставить всё как есть - пользователи должны страдать за свой блокировщик! Мы же такое не одобряем? Мы же любим пользователей?3. Затянуть ещё сильней - выйти на тропу войны с блокировщиками рекламы. Есть риски по потери пользователей. Не всегда экономически оправданные риски.4. Переманить пользователей с блокировщиками - это стратегическая история с подписками, уменьшением рекламы и тд, сложно. Очень сложно, чтобы экономика работал.5. Чинить сайт так, чтобы блокировщики не ломали его. Контринтуитивная история на самом деле. Т.е. компании берут ресурсы, которые раньше тратили на то, чтобы показать пользователю рекламу, даже если включен блокировщик, и тратит их теперь на то, чтобы пользователь чувствовал себя комфортно, даже если у него отключена реклама. В итоге местамЯ бы хотел померяться ценностью с блокировщиками, поработав с пунктом 3, наверное. Т.е. мне интересно анализировать решения того же Ютуба в этом вопросе. Но работаю я сейчас с не менее интересным пятым пунктом. Где, мы выступаем неким "тайным добряком", который во вред себе, но на благо пользователя, проделывает работу, о которой он даже не узнает. А если столкнется с проблемой, то призыв "отключить данный блокировщик" воспримет не как рабочий совет, который может ему помочь, а как "попрание его право не видеть рекламу на вашем сайте". Есть в этом что-то романтичное, знаете ли :DНо возвращаемся к началу: если что-то не работает - откройте это в режиме инкогнито и убедитесь, что не включен VPN. Помогает часто, особенно, когда речь идет о неработающих окнах оплаты.
Красивые скругления в вебеАллилуя! Наконец-то веб-юикс-дизайнеры получили то, что уже давно знали и использовали графдизайнеры — плавные скругления, суперэллипс, кривая Ламе.Теперь превращение страшных зубастых механических радиусов, как у офисного куллера, в приятный плавный угол, как у айфона, решается одной строчкой:corner-shape: superellipse(2);Можно регулировать значение в скобках. Например, 1,6 — это скругление в iOS. 1,8 — это скругление, которое нравится мне. 2,0 — это максимум, такой можно встретить у ВК.Вообще, там еще много других интересных скруглений добавили:https://habr.com/ru/articles/938886/С вами была минутка задротства. Если у вас есть сайт, бегом добавлять чудострочку на все, что скруглено!
🖥 Репозиторий: Advanced REST Client — инструмент для тестирования APIAdvanced REST Client (ARC) — это инструмент для тестирования API с открытым исходным кодом — Он позволяет делать HTTP-запросы, проверять ответы и тестировать веб-сервисы REST и SOAPВозможности: 1. поддержка всех методов HTTP (GET, POST, PUT, DELETE и др.); 2. настраиваемые заголовки и базовая аутентификация доступа; 3. предварительный просмотр форматирования тела запроса (JSON или XML); 4. история всех запросов, сделанных в приложении; 5. переменные и среды для лёгкого воспроизведения запросов; 6. генерация кода для языков, таких как JavaScript, Python, cURL и др.; 7. импорт/экспорт сред для более простого совместного использования; 8. тестирование веб-сервисов SOAP; 9. настраиваемые темы.⏺ Ссылка на GitHub⏺ Официальный сайт#API #Pentest #REST #SOAP #OpenSource
plumber2 Ребята из Posit переосмыслили plumber и выпустили plumber2. И это не «plumber v2», а полноценный перезапуск API-фреймворка для R.Идея простая: чинить старую архитектуру дальше было бессмысленно — накопилось слишком много компромиссов.В plumber:• смешивались path / query / body параметры• filters и preempt добавляли много магии и мало прозрачности• аннотации и документация были ограничены• архитектура плохо подходила для async и масштабированияВ plumber2 это всё пересобрали:• чётко разделили параметры запроса• path → аргументы функции, query → query, body → body• полностью переработали аннотации (типы, default, enum, OpenAPI)• убрали filters и preempt• построили сервер на fiery, request/response — на reqres• заложили поддержку async и WebSockets# Было (plumber)#* @get /user/<id>function(id, name) { ... }# Стало (plumber2)#* @get /user/<id:int>#* @asyncfunction(id, query) { # id — строго из пути # query$name — из параметров запроса # Выполняется асинхронно!}Важно: plumber2 не обратно совместим с plumber — это осознанное архитектурное решение.Итог простой: plumber доказал, что API на R возможны, а plumber2 делает их архитектурно нормальными — ближе к FastAPI-подходу, но в R-экосистеме.Со всей документацией можно ознакомиться по ссылке.#новости_и_релизы_по_R
20 лет назад я создал свой первый сайтВсе говорят про свой 2016, но я хочу вспомнить 2006.21 января 2006 на хостинге narod.ru появился новый сайт о Кино в Волгограде. Всего я в Интернете был тогда 6 месяцев, а отроду было 13 лет, но желание нового и интересного перевалило. В тот год бросил на постоянку компьютерные игры и дальше к ним только возвращался волнами. Дальше был школьный сайт, proLost – большой портал с форумом на 7000 участников и топ-2 в РФ. Ну и дальше пошло-поехало.Сейчас нашел в веб-архиве скрины (жаль изображения и верстка не сохранились), но прикольно, что уже тогда пытался продать рекламу на сайте)) Кстати, об эффективности и веб-аналитике задумывался и в 2006, когда из бабушки в деревне по городскому телефону звонил маме, спрашивал, сколько в публичном счетчике людей на сайте новых было за вчерашний день)#wЛичное 🤟
С субботой Вас, граждане!Начало этого года что-то прям впечатляющее на ошибки, не поднимая головы неделю правил автоматизацию для концертной организации 🥲Ещё доделал своего бота, который группирует и формирует запросы на информационные/коммерческие. На следующей неделе поделюсь ссылкой, можно будет использовать как для директа, быстро формируя смысловые группы, так и для SEO. Я лично разрабатывал бота, пока по клиенту решал задачу, как массово, быстро и эффективно группировать 20–30–50–100 тыс. запросов без потери качества. И я таки нашёл способ группировки запросов по интентам. Одним словом, на современных мощностях и с помощью вайбкодинга переизобрёл кластеризацию :)А ещё выкатил тестовую версию каталога сайтов на Тильде для вдохновения дизайнеров https://designhub.art. Пока в таком виде, буду потихоньку дорабатывать и увеличивать функционал с возможностью как посмотреть и найти внутренние страницы, так и оценить, являются ли страницы лендингами/магазинами/ многостраничниками. Если не открывает, попробуйте ЖПН, на неделе перенесу сайт в суверенный интернет, не буду хранить сайт у друзей заморских… это грешок и бесовщина.
Наткнулся на очень крутой разбор (в т.ч. математический) про ASCII-рендеринг — и это тот случай, когда “старая” идея внезапно выглядит современно.ASCII-рендеринг — это способ показывать изображение не пикселями, а символами текста. Картинку делят на сетку, для каждой ячейки оценивают яркость (иногда ещё контраст и края) и подбирают символ подходящей “плотности”: пробел — почти пусто, . и : — светлые, # и @ — тёмные и насыщенные. В итоге получается текстовая картинка, которую можно выводить в терминале, на сайте или где угодно, где есть шрифт.Там куча интерактивных демо: можно двигать сцену, переключать режимы и крутить параметры. Очень советую зайти, посмотреть и просто потыкать — затягивает.https://alexharri.com/blog/ascii-rendering
Обалдеть, чего только не бывает в природе. Наткнулся тут на pglite - Postgres, скомпилированный под wasm, который можно запускать в браузере (или на nodejs). Для сложного фронтенда, который делает хитрожопые джойны и оконные функции. Поддерживает даже пгшные расширения, типа pgvector.Может персиститься в IndexedDB и другие штуки.import { PGlite } from "@electric-sql/pglite";const db = new PGlite();await db.exec(` CREATE TABLE IF NOT EXISTS notes ( id SERIAL PRIMARY KEY, title TEXT NOT NULL, content TEXT, created_at TIMESTAMP DEFAULT NOW() );`);https://github.com/electric-sql/pglite
👩💻 Можно ли управлять тем, как ведут себя вложенные элементы в 3D-трансформациях?Свойство transform-style определяет, будут ли дочерние элементы сохранять своё 3D-положение или сплющиваться в плоскость родителя при трансформациях. Основные значения:• flat — значение по умолчанию, все дочерние элементы проецируются в плоскость родителя;• preserve-3d — сохраняет 3D-позиционирование вложенных элементов.Свойство не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.📣 Code Ready | #свойство
FunnelFox только что опубликовали первый глобальный отчёт по Web2App и там много показательных цифр.Ключевые инсайты:• LTV в Web2App в среднем в 2 раза выше, чем в in-app• 82% самых быстрорастущих приложения уже используют Web2App, и скорость внедрения продолжает расти• 56,9% выручки в веб-воронках приходит без триалов• До 17,5% подписок можно вернуть за счёт оптимизации платёжного флоу• Сильные команды запускают десятки воронок, а не одну универсальнуюГлавный вывод: Web2App — это не просто альтернативный канал, а отдельная экономика с другим потолком роста, скоростью тестов и уровнем контроля.Полный репорт здесь: https://funnelfox.com/state-of-web2app-2026?utm_source=telegram&utm_medium=matvey&utm_campaign=state-of-web2app&utm_content=external
Когда деревья еще не были большими, а некоторые юрисдикции уже были недружественными юридическая общественность обсуждала законопроект о платформенной экономике.Удивительный зверь, в который пытались включить ответственность «оператора посреднических платформ» или хотя бы возложить на него дополнительную ответственность за проверку карточек товара.Это не произошло и все не относимое из закона о платформенной экономике вымарали, хотя и оставили бомбу замедленного действия в виде частей 5 и 6 ст. 7: «Правительство Российской Федерации вправе установить иные требования к карточке товара, в том числе требования к отображению информации о цене товара, размещению карточки товара, а также требования, без соблюдения которых оператор не вправе допускать размещение такой карточки товара на посреднической цифровой платформе».«Правообладатель исключительного права на результат интеллектуальной деятельности или на средство индивидуализации в случае обнаружения нарушения его исключительного права и законных интересов вправе обратиться к оператору с заявлением о прекращении размещения на посреднической цифровой платформе информации, нарушающей такое исключительное право».Строго говоря все написанное в части 6 не противоречило и не противоречит ст. 1253.1 ГК РФ, и в практическом смысле тут даже спора нет, маркетплейсы сами провозгласили себя информационными посредниками, ибо на первый взгляд кажется, что п. 3 под них написан, но есть нюанс, который не учитывает законодательство: роль которую маркетплейс реально играет в сделке между продавцом и покупателем.Если опустить тот факт, что мы говорим не просто о некоей цифровой площадке с цифровыми товарами, а фактически о диджитал аналоге рынка толкучки, то следует вспомнить, что есть как минимум две наиболее распространенные модели работы маркетплейсов FBO (fulfillment by operator), когда маркетплейс сам хранит товар, собирает и доставляет заказы, полностью беря логистику на себя, FBS (fulfillment by seller) когда продавец хранит товар у себя, сам его упаковывает и привозит в пункт маркетплейса, после чего площадка доставляет его покупателю.При всем уважении и бухгалтерском снобизме в рамках FBO количество УПД/транспортных накладных и прочих документов делают из маркетплейса не просто информационного посредника, а субъекта гражданского оборота (возможно) спорного товара. Это уже не говоря о том, то за любым заведением карточки товара следует ее модерация, а также маркетплейс может оказывать услуги по продвижению товара на своем сайтеВ этом всем контексте не удивительно, что появилась жалоба ООО «Мир Хобби» в конституционный суд на нарушение конституционных прав п.п. 1 и 3 ст. 1253.1 ГК РФ.Но не будем забывать конечно же классику из дела А41-102093/2023:«Пассивное поведение, отстранение ответчика от возложенных на него законом обязанностей вынудили истца прибегнуть к защите своих нарушенных прав в судебном порядке… Между тем, то обстоятельство, что ответчик использует в своей деятельности разработанный им механизм обмена информацией, не свидетельствует об обязанности иных участников рынка, в данном случае истца, использовать исключительно данный, а не определенный законодательством как влекущий правовые последствия механизм обмена корреспонденцией и не освобождает ООО «ВАЙЛДБЕРРИЗ» от последствий ненадлежащей организации им порядка получения почтовой корреспонденции».Так и заживем.
Люди странныеИ очень технически неграмотныеИ очень странныеИменно такой вывод я сделал после того, как пересмотрел несколько сотен успешных Chrome ExtensionsДесятки, а то и сотни тысяч людей устанавливают платные расширения, которые делает ровно то, что уже есть в браузере!Чистят кеш например. Или историю просмотров. Или позволяют скачать картинки из гуглдока.Или вот золотая жила — экспорт странички в PDF. Вместо того, чтобы нажать Ctrl+P, человек идет в гугл, находит там специальное расширение, устанавливает его, платит долор — и у него в интерфейсе браузера появляется красивая кнопка, которая делает ровно то же самоеИ есть отдельные расширения под экспорт ChatGPT в PDF, Gemini в PDF, DeepSeek в PDF. И у каждого десятки тысяч пользователей!Еще раз, это даже не бесплатные расширения, у них платный функционал есть, и люди за него деньги заносят.Просто чудесаВот живешь в своем уютном мирке, уверенный, что каждый человек в мире знает про Ctrl+P, гадаешь, как бы денег заработать. Ан нет, можно просто фигачить экстеншены для сотен тысяч человек, которые не знают про бесплатный встроенный функционал браузераПошел делать платное расширение для экспорта переписок с нейронками в PDF, короче.
StarletteStarlette — это легкий ASGI фреймворк/инструментарий, который идеально подходит для создания асинхронных веб-сервисов на Python. Он готов к работе в production-среде и предоставляет вам легкий HTTP веб-фреймворк с низкой сложностью, производительность на основе asyncio, готовый набор миддлверов для работы с авторизацией/аутентификацией, CORS, и т.д.#для_продвинутых
Админку — допишем потом. Почему эта фраза должна вас пугатьЛегко сказать «админку сделаем в конце». Клиенту она не видна, демо получается эффектнее, сроки горят. Но это один из самых коварных технических долгов, который незаметно тормозит весь проект.Проблема в том, что админка — это не просто кнопки. Это рабочий инструмент вашей команды. Без неё любая мелкая поломка у пользователя — это паника, поиск разработчика, чтобы напрямую зайти в базу данных. Вместо пяти минут в интерфейсе вы тратите полчаса на организацию и рискуете всё сломатьОткладывая её, вы нарушаете архитектуру. Ведь по сути, админка — это тот же фронтенд, только для внутренних данных. Ей нужны те же API, та же бизнес-логика, те же проверки прав. Если отложить, велик соблазн «срезать углы»: написать прямой доступ к базе, скопипастить код, забыть про аудит. Исправлять эту спагетти-архитектуру потом будет мучительно.Ваши менеджеры, поддержка и тестировщики остаются без рук. Они не могут проверить проблему, исправить опечатку, разблокировать пользователя или посмотреть сводную статистику. Вся эта нагрузка ложится на разработчиков, которые вместо новых задач становятся операторами базы данных.Как быть правильно? С самого начала считайте админку минимально необходимой фичей. Не нужно делать с графиками и сложными отчётами. Но к первому запуску должен быть готов базовый модуль: списки и возможность их редактировать. Сделайте это на том же технологическом стеке, что и основное приложение, используя общие компоненты.Дальше она будет расти естественно: по запросу команды добавятся фильтры, массовые операции, дашборды. Вы сэкономите колоссальное количество времени на коммуникации и рутине, а ваша команда получит настоящий контроль над продуктомАдминка, сделанная «в конце», — это почти всегда кривой, небезопасный костыль. Админка, заложенная в процесс с самого начала, — это инвестиция в скорость и стабильность работы всей команды. Не лишайте себя этого инструментаDaniilak — Канал
Подготовили для вас видеотур по нашим производственным линиям 👀, а то все чужое показываем. Что в кадре:◼ SMT-монтаж: линии на базе установщиков ASM c производительностью до 400 000 компонентов в час. ◼ Пайка: показываем все виды — от классической волны до селективной пайки сложных компонентов. ◼ Контроль качества: многоступенчатая система. Автоматическая оптическая инспекция (AOI) на каждом этапе и рентген-контроль на установке Yxlon для BGA и сложных корпусов. ◼ Финализация: струйная отмывка (Super Swash), нанесение влагозащиты и финальная сборка корпусных изделий.Все процессы объединены единой MES-системой для полной прослеживаемости изделий.3pcb.ru - контрактное производство электроники.
🎨 CSS :has() - это легальный чит-код в версткеМы привыкли называть :has() «селектором родителя», но это определение сильно преуменьшает его мощь. Это инструмент, который позволяет отказаться от JS и лишних классов-модификаторов для управления состоянием UI.Вот два сценария, где :has() меняет правила игры:1. Контекстная стилизация (без BEM-модификаторов)Раньше, чтобы изменить стили карточки в зависимости от контента (например, есть ли внутри картинка или бейдж), мы писали JS-проверку или добавляли класс .card--with-image.Теперь CSS сам смотрит внутрь:/* Если внутри карточки есть картинка -> меняем грид */.card:has(img) { grid-template-columns: 1fr 1fr;}/* Если внутри есть сообщение об ошибке -> красим бордер */.form-group:has(.error-message) { border-color: red; background: #fff0f0;}2. Селектор «предыдущего соседа»В CSS всегда можно было стилизовать элемент, идущий после (h2 + p), но никогда - перед. С :has() это стало возможным.Трюк: мы выбираем элемент, если за ним следует нужный нам сосед./* Стилизуем h2, ТОЛЬКО если сразу за ним идет список ul */h2:has(+ ul) { margin-bottom: 0; /* Убираем отступ, чтобы "приклеить" к списку */ color: var(--primary);}🔥Поддержка в браузерах уже отличная (Baseline 2023). Если вы всё еще пишете useEffect или вешаете классы просто чтобы поменять стиль родителя при фокусе инпута (:focus-within не всегда хватает) или наличии элемента - удаляйте лишний код и берите :has().📲 Мы в MAX👉 @frontend_1
Интересно, когда разрабатывали позорное недоразумение по адресу aeroflot.ru, не подумали, что возможно некоторые пользователи захотят купить билеты, находясь НЕ В РОССИИ, БЛЯДЬ?Кривое, косое, а главное ЛОХОВСКОЕ говно, а не сайт. В приложении ещё удобнее. Только у вас его нет для айфонов, вы же не многомиллионная корпорация, которая может себе позволить сделать тайное приложение и пропихать его в AppStore, как Т-Банк или даже РСХБ? А, ой.Как говорят у нас в Китае, хрррр-тьфу.
🤔 Что такое Hosting?Хостинг — это услуга по размещению файлов сайта на сервере, доступном по интернету.Хостинг включает:- Сервер.- Программное обеспечение.- Поддержку подключения, безопасности и резервного копирования.Без хостинга сайт не сможет быть доступен в сети.Ставь 👍 если знал ответ, 🔥 если нетЗабирай 📚Базу Знаний
👣 Практичный, код-ориентированный гайд по изучению HTTP-фреймворков в Go.Без теории ради теории — только реальные примеры, сравнение подходов и работающий код. Отлично подходит, чтобы понять, чем на самом деле отличаются Go-фреймворки и что происходит под капотом.Полезно и новичкам, и тем, кто хочет глубже разобраться в экосистеме Go.#golang https://github.com/go-mizu/go-fw
Жертва прогрессаКанадский #стартапдня Tailwind Labs – набор готовых CSS-компонент для сайтов. Разработчик или верстальщик не рисует с нуля очередную карточку товара, а использует готовые кирпичики – красивые, удобные, правильные. Шрифты и цвета в них, в принципе, можно поменять, но многие не заморачивались. Так что если вам кажется, что многие сайты в интернете похожи друг на друга, то Tailwind – одна из причин. Использование фреймворка бесплатно, зарабатывает стартап на библиотеке более высокоуровневых шаблонов – от выпадающего меню до готовых сайтов-визиток. Пользовательский путь фрилансера был примерно таким: понравилось работать с базовой версией, зашел почитать документацию, увидел краем глаза вариант Pro, заинтересовался, заплатил один раз 300 долларов, получил пожизненную лицензию, раз в месяц перепродает классные дизайны Tailwind разным заказчикам. Работает меньше, результат лучше, жизнь хороша, довольны абсолютно все.А потом пришел AI. Часть заказчиков теперь вайбкодят себе сайты сами, разумные исполнители оставшейся доли рынка пользуются “электронными программистами”, Cursor или аналогом. Библиотека Tailwind Pro стала не нужна: нет смысла платить за то, что можно самому сгенерировать в один клик. На днях основатель опубликовал итоги последних трех лет: - посещаемость сайта упала на 40%;- выручка на 80%;- уволено 75% команды.Зато на главной странице стартапа красуется логотип Cursor – он купил спонсорский пакет, поддерживает хороший продукт. Отношения “убийца-жертва” никак не мешают любви и уважению к классному коду. Шекспир бы мог трагедию на эту тему написать.https://tailwindcss.com/#канада #насвои #ai
🚨 Tailwind CSS сейчас — главный инфоповод в айтишке. 🤯 Ситуация максимально парадоксальная: популярность либы выросла почти на 700%, а выручка при этом упала на 80%. Ребята летят в какую-то финансовую петлю.CEO Tailwind на днях вообще выдал, что им пришлось уволить 75% штата. 😱 Звучит жутко, хотя по факту это три человека из четырех. 💡 Главный виновник, по его словам, — нейронки. LLM по умолчанию используют Tailwind, и из-за этого их модель монетизации просто схлопнулась. Они зарабатывали на обучении и корпоративных курсах, а сейчас это нафиг никому не нужно. Ты просто просишь chatGPT: «сделай мне красивое скругление», и он сам подставляет нужные классы. Ты в них даже не вникаешь.И тут интересный пойнт. Мы все боялись, что LLM заберут нашу работу, а они, похоже, просто уничтожают бизнесы и инструменты которыми мы пользуемся. Если Tailwind в итоге закроется — что делать? Появится ли другой опенсорс-проект, который захочет лезть на амбразуру и пилить что-то за бесплатно после этого? 😬 Мне всё это читать особенно тревожно. Я как раз сейчас на пороге релиза своего опенсорс-проекта, и такие «подвижечки» в индустрии оптимизма не добавляют. Но ладно, поживем — увидим.Канал | Комьюнити | Бот | YHub
Год начался с существенной доработки шаблонов сайтов и чат-ботов. На них уже реализовано пока два проекта (в работе ещё 5 проектов с чат-ботами и несколько в формате только сайтов).В шаблонах сайтов теперь есть меню. Причём меню не универсальное и не сквозное, а контекстное, то есть может отличаться от страницы к странице в зависимости от контента и от проекта к проекту, так как у некоторых психологов есть уникальные блоки (например, видеовизитка и/или публикации в СМИ, профильных научных изданиях и т.п.)Реализацию меню я откладывал до последнего, потому что те базовые блоки, которые есть в Tilda, меня не устраивали, а Zero-блоки я не использую принципиально, так как с инженерной точки зрения, с точки зрения масштабируемости и передачи сайта клиенту для последующего редактирования они не очень подходят, поэтому пришлось ждать озарения и в итоге применять неочевидные возможности CSS.И из вынужденного: в связи с небезуспешными блокировками WhatsApp на территории РФ пришлось пересобрать форму отправки заявки — теперь человек оставляет не только телефон, а любые контактные данные в свободном формате (это может быть старый-добрый номер телефона, username в Telegram или даже почта).В шаблонах чат-ботов я доработал главное меню. Изменений немного: я вынес раздел с перечнем опросников в отдельное сообщение, так как в некоторых ботах планируется не 3 психологических инструмента, а 4 и более, плюс добавил раздел «Поделиться чат-ботом».🔎 Посмотреть можно на сайте Анастасии Пискалковой:🤖 https://pisklakovapsy.com/indexall (здесь акцент на чат-боте, в котором три инструмента, человек попадает сразу на главное меню чат-бота)📊 https://pisklakovapsy.com/ (а здесь акцент на трёх отдельных инструментах)Ещё на сайте есть страницы, которые посвящены конкретным инструментам и темам:🔗 https://pisklakovapsy.com/stai🔗 https://pisklakovapsy.com/bdi🔗 https://pisklakovapsy.com/osk-18И, конечно, страница с формой записи:https://pisklakovapsy.com/free_dc (напомню: не все люди готовы писать психологу в личку первыми, кому-то — например, интровертам, «молчунам» и людям с повышенной социальной тревожностью, — сильно проще отправить заявку; соотношение в нише помогающих профессий плюс-минус 50 на 50, то есть форма нужна)И полноценный юридический блок, чтобы не нарваться на штраф от РКН. Правоприменительных прецедентов пока не было, но в этом случае лучше перебдеть. Этот блок располагается внизу каждой страницы сайта (тут, кстати, тоже есть нововведение — появилась оферта).Такое количество страниц нужно для разных рекламных кампаний и разных точек входа в чат-бота (в его различные разделы): 1️⃣ в каких-то кампаниях мы будем привлекать трафик на конкретную тему (тревога, депрессия, кризис, выгорание, самооценка и т.д.);2️⃣ в каких-то кампаниях — на основную главную страницу сайта;3️⃣ а в каких-то — на вспомогательную главную страницу с прямым призывом переходить в чат-бота.Ещё внизу, в подвале, есть такой фрагмент «Разработка, маркетинг (реклама), поддержка и сопровождение Михаил Субботин, PsyMate.pro», его можно удалить. В целом логотип и/или упоминание PsyMate на сайте психолога и узнаваемая структура сайтов в будущем должны стать своего рода знаками качества и подразумевать, что специалист соблюдает технические, юридические, этические стандарты индустрии, использует признанные методы/техники/подходы, ну и с образованием у него всё ок. В 2026 году планирую активно работать над узнаваемостью PsyMate.К слову, блоки сайта можно «раскрасить», можно поменять шрифты, дизайн кнопок и т.п. Такая опция, благодаря инструментарию Tilda и тому, что я не использую Zero-блоки, имеется и можно сделать самостоятельно. Не знаю, правда, зачем, сам я предпочитаю скандинавский и нейтральный дизайн: по-моему, главное на сайте психолога это всё-таки компетентная структура и полнота информации, чтобы у человека не осталось вопросов, а кричащие цвета, манипулятивные лозунги и заголовки могут отталкивать потенциальных клиентов психологов.PS. И с наступившим нас всех: здоровья, здоровья близким и мира бы (несмотря на все новости и прогнозы).
Марафон IT-игр: Anchoreum для изучения CSSВ этой игре вы сможете научиться работать с позиционированием CSS-якорей. Игра от создателя Flexbox Froggy и Grid Garden, так что интерфейс вполне узнаваем и принцип игры понятен.Пройти бесплатно можно по ссылке: https://anchoreum.com/#css
12 ключевых сетевых протоколов которые должен знать каждый Без этих протоколов не обходится ни одно сетевое взаимодействие. От передачи веб-страниц и синхронизации времени до защиты соединений и доставки писем это фундамент, на котором строится интернетСохраняй пригодится 🕵️♂️📨 CodHub | Программирование
🤔 Как на Java писать веб-приложение?Веб-приложение на Java – это серверное приложение, которое обрабатывает HTTP-запросы и отправляет ответы клиенту. 🚩Написание веб-приложения на Spring Boot Установка зависимостей (Maven)Создайте pom.xml и добавьте<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>3.2.2</version> <!-- Используйте актуальную версию --> </dependency></dependencies>Создание основного класса (точка входа)import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublic class MyWebApp { public static void main(String[] args) { SpringApplication.run(MyWebApp.class, args); }}Создание контроллера (обработка HTTP-запросов)**import org.springframework.web.bind.annotation.*;@RestController@RequestMapping("/api")public class MyController { @GetMapping("/hello") public String sayHello() { return "Привет, это веб-приложение на Java!"; }}Теперь при открытии http://localhost:8080/api/hello сервер вернёт: Привет, это веб-приложение на Java!🚩Разработка фронтенда (HTML + Thymeleaf)Если приложение рендерит страницы на сервере, используйте Thymeleaf.Добавьте зависимость в pom.xml<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>Создайте HTML-шаблон (src/main/resources/templates/index.html)<!DOCTYPE html><html><head> <title>Главная страница</title></head><body> <h1>Привет, <span th:text="${name}"></span>!</h1></body></html>Создайте контроллер для отображения страницыimport org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;@Controllerpublic class WebController { @GetMapping("/") public String home(Model model) { model.addAttribute("name", "Гость"); return "index"; // Возвращает "index.html" }}🚩Работа с базой данных (Spring Data JPA + PostgreSQL) Добавьте зависимости в pom.xml<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency> <groupId>org.postgresql</groupId> <artifactId>postgresql</artifactId></dependency>Настройте application.properties (подключение к БД)spring.datasource.url=jdbc:postgresql://localhost:5432/mydbspring.datasource.username=postgresspring.datasource.password=secretspring.jpa.hibernate.ddl-auto=updateСоздайте сущность (таблицу в БД)import jakarta.persistence.*;@Entitypublic class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; // Геттеры и сеттеры}Создайте Repository для работы с БДimport org.springframework.data.jpa.repository.JpaRepository;public interface UserRepository extends JpaRepository<User, Long> {}Контроллер для работы с БДimport org.springframework.web.bind.annotation.*;import java.util.List;@RestController@RequestMapping("/users")public class UserController { private final UserRepository userRepository; public UserController(UserRepository userRepository) { this.userRepository = userRepository; } @GetMapping public List<User> getUsers() { return userRepository.findAll(); } @PostMapping public User addUser(@RequestBody User user) { return userRepository.save(user); }}Запустите приложение: mvn spring-boot:runПроверьте API через браузер или Postmanhttp://localhost:8080/usersСтавь 👍 и забирай 📚 Базу знаний
🖥 Small HTTP ServerSmall HTTP Server - программа родом из эпохи Windows 95 и NT, но до сих пор развивается. Написана на C++, невероятно компактная - установщик весит всего около 1 МБ.▪️ Что умеет Small HTTP Server?▪️ HTTP-сервер: поддерживает CGI/FastCGI, ISAPI, запуск внешних интерпретаторов (PHP, Perl и т.д.), виртуальные хосты и директории. Можно использовать как полноценный небольшой веб-сервер.▪️ Почтовый сервер POP3/SMTP: фильтры антиспама, чёрные/белые/серые списки, переотправка писем, запуск скриптов для обработки входящей почты, интеграция с внешними антивирусами.▪️ FTP-сервер: с виртуальными каталогами и базовым управлением пользователями.▪️ HTTP-proxy: работает с HTTP/HTTPS/FTP, умеет докачивать файлы, кешировать контент, запрашивать сжатые данные и распаковывать их на лету (через zlib).▪️ DNS-сервер: поддерживает рекурсивные запросы, кеширование, DNSBL, DoH (RFC8484), а также интересную функцию: если удалённый сервис не отвечает, сервер может автоматически подменять IP-адрес на резервный.▪️ DHCP-сервер: простой, но рабочий.▪️ HTTP-TLS VPN: есть свой мини-VPN, использующий OpenVPN TAP-драйвер. И сервер, и клиент.▪️ Интерфейс и работаПрограмма доступна под Windows, Linux и ARM, отличный вариант для маломощных одноплатников.Все службы настраиваются через удобный веб-интерфейс со статистикой. Конфигурация хранится в обычном текстовом файле. На Windows сервер запускается просто запуском EXE, по умолчанию работает как файловый листинг каталога. Можно установить как службу.#utils🧑💻 NetworkAdmin
Кейс разработки сайта для селлера, который продаёт на маркетплейсахПокажу, как за три недели создал площадку, которая объясняет клиентам ценность продукта и переводит их на Ozon готовыми к покупке.Сайт, который объясняет клиентам ценность продукта. Без вашего участия.Представьте: клиенты приходят на маркетплейс уже готовыми купить. Потому что сайт заранее объяснил им всё за вас. А вы занимаетесь развитием бизнеса, а не бесконечными переписками.Разработаю сайт, который делает всю подготовительную работу с клиентом. Объяснит ценность продукта. Расскажет историю бренда. Снимет возражения. И переведёт готового покупателя на маркетплейс.Хороший продукт заслуживает правильной подачи. Не позволяйте клиентам проходить мимо из-за невнятной карточки на маркетплейсе. Напишите в Telegram https://t.me/SM_web — покажу ваш продукт так, как он того стоит.СитуацияБренд «Рушвея» выходил на рынок с необычным продуктом — готовые наборы раскроенных элементов одежды для самостоятельного пошива.Юбки, свитшоты, футболки, майки — всё уже раскроено. Осталось только сшить.Продажи шли через Ozon, в планах – Яндекс Маркет. Но своего сайта не было.А значит — негде рассказать о бренде и продемонстрировать философию проекта. Негде объяснить, чем «Рушвея» отличается от обычных тканей или выкроек.Покупатели видели карточку товара и не понимали, за что платить. Уходили к конкурентам.Задача: создать сайт-витрину, который презентует бренд, показывает каталог и ведёт покупателей на маркетплейсы уже подготовленными.Особенность проектаЗаказчик пришёл с чётким видением стилистики — советский конструктивизм 20–30-х годов.Высокие строгие шрифты. Геометрические формы. Чередование синего и красного как в логотипе. Светло-серые фоны.Это не типовой интернет-магазин. Это сайт с характером и историей.Девиз «Для вас, подруги!» должен был встречать посетителя на каждой странице.Что сделалРазработал структуру сайта на основе детального ТЗ от заказчика.Главная страница — сразу погружает в атмосферу бренда.Логотип, девиз, краткое описание концепции. Посетитель за несколько секунд понимает: здесь продают готовые наборы для пошива одежды, аналогов которым нет на рынке.Страница «О нас» — раскрывает философию проекта.История про советские традиции рукоделия. Про швейные машинки в каждом доме. Про возрождение культуры «сделано своими руками». Формирует эмоциональную связь с аудиторией.Каталог — разбит на 5 категорий: юбки, свитшоты, футболки, майки, аксессуары.Каждая карточка товара содержит фото, описание, доступные цвета и прямые ссылки на маркетплейсы. Добавлена таблица размеров и палитра цветов.Раздел «Вопросы» — ответы на типичные вопросы покупателей о наборах. Возражения закрыты до их появления.Контакты — реквизиты компании, ссылки на магазины на Ozon и Яндекс Маркет.Техническая реализация: WordPress + Elementor, адаптивная вёрстка. Подключена Яндекс Метрика. Настроена простая навигация, чтобы заказчик мог сам добавлять новые позиции в каталог.РезультатЗа три недели с учётом правок — готовый сайт, который работает на бренд.Посетитель видит не просто каталог товаров, а цельную историю. Понимает ценность продукта. Проникается идеей. И переходит на маркетплейс уже подготовленным к покупке.Владелец больше не объясняет в переписках одно и то же. Сайт делает это за него. Круглосуточно.Узнаёте свою ситуацию?Вы продаёте на маркетплейсах, но:— клиенты не понимают, чем вы лучше конкурентов; — карточка товара не передаёт ценность продукта; — нет площадки, куда вести трафик из рекламы.Сайт-витрина решает все три проблемы.Напишите в Telegram https://t.me/SM_web — разберём вашу ситуацию и найдём решение.