#веб #тильда #хакинг #frontend

В очередной раз я погрузился в недра исходников Тильды при разработке казалось бы простой модификации.

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

У Tilda есть JS API, которое открыто, но не документировано. Это части большого набора функций, которые Tilda использует под капотом в своих готовых блоках.

и вот тут разгорелся мой хакерский азарт

Оказывается за отправку товара вместе с формой отвечает атрибут data-formcart="y".

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

С помощью доступного JS API можно заставить Tilda отправить информацию о товаре вместе с остальными полями формы. Тогда Tilda создаст новый заказ и свяжет его с товаром — в обход интерфейса корзины.

Опубликовал новый пост на vc.ru о разработке слайдера для Tilda в виде карточек

#кейс #модификация #tilda

Этот кейс — хороший пример того как можно комбинировать готовую библиотеку (Swiper) и функционал no-code конструктора (Zero-блок)

https://vc.ru/1624724

Что общего между веб-сайтами, векторной графикой и Microsoft Word: для чего нужны языки разметки HTML и XML

#веб #интересное

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

В своей последней статье я рассказываю о том, откуда появилась идея размечать текст и где еще используются языки разметки, подобные HTML.

Продолжение экспериментов с Windsurf и ИИ-ассистентами

#ai #программирование

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

Сейчас писал программу, которая должна получать данные из Google Таблиц по достаточно сложной логике: выборка осуществляется по столбцу и по подмножеству строк, при том некоторые строки ниже зависят от строк выше.

Оказывается в Windsurf при использовании Claude 3.5 Sonnet помимо отправки текстовых инструкций также можно и отправлять изображения.

В результате я написал запрос: описал предметную область и желаемый результат и вместе с текстом отправил скриншот таблицы.

Модель практически без ошибок написала код под мою задачу! В этот момент я ощущал себя руководителем, который сидит рядом с программистом и говорит ему: «вот это нужно сделать так-то, а вот это должно работать вот так-то».

Конечно, первый вариант кода был трудно читаемый, но он уже работал. После проверки всех кейсов я просто попросил модель отрефакторить код: сделать его структурированным и легко читаемым — и готово!

В итоге я «написал» прототип фичи за ~10 минут вместо получаса или даже больше. Думаю именно это имеется в виду, когда говорят, что ИИ не заменит, но увеличит продуктивность программистов.

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

Отображение наличия товаров в интернет-магазине на Tilda

#кейс #интеграция #tilda

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

Данный кейс — хороший пример, когда no-code инструменты для разработки интеграций не подходят, потому что у сервиса, с которым нужна интеграция уже есть готовая библиотека на PHP и легче и гибче написать маленькое приложение, чем воссоздавать логику этой библиотеки с нуля.

Если этот кейс для вас оказался интересным, то буду рад вашей поддержке лайком на vc.ru 🔥
‎

Когда концепции и экосистема важнее языка программирования

#веб #программирование #php #laravel

Кстати говоря о PHP: предыдущий кейс интеграции позволил мне взглянуть на этот язык по-другому. В одном из своих последних серьезных проектов я использовал PHP фреймворк Laravel. Работа с ним дала мне ценный опыт разработки сложных приложений, который я применил при создании этой интеграции.

Работу над тем проектом на Laravel я начал ещё в 2015 году — несколько лет велась активная разработка, после окончания которой я продолжил поддерживать проект с минимальными усилиями, в том числе благодаря данному фреймворку. В нем было множество готовых решений, которые были уже созданы его разработчиками — это сэкономило много времени.

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

Выбор в пользу Laravel определили несколько факторов:

1. Тогда у меня уже был опыт с PHP, потому что свой путь в веб-разработке я начинал именно с этого языка;

2. Обширная документация Laravel лаконично описывала все части фреймворка;

3. Самым важным фактором при выборе для меня явилась развитая экосистема вокруг Laravel: все необходимые компоненты уже были в комплекте, а если готовых не хватало, то open-source сообщество вокруг Laravel на тот момент уже создало множество других готовых решений.

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

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

Именно так я и поступил при разработке интеграции:

Вместо создания большого приложения на Laravel я взял набор концепций, которые я узнал из данного фреймворка и применил их отдельно от него.

Микрофреймворк Slim, который я использовал при разработке интеграции дал возможность применить эти концепции отдельно. В нем реализовано всего 2 компонента, которые также лежат в основе Laravel:

- Маршрутизатор HTTP запросов (Router)
- Контейнер для внедрения зависимостей (Dependency Injection)

Это позволило создать маленькое приложение на PHP, которое по духу очень похоже на Laravel, но значительно более компактное.

Интересно, как для того, чтобы иметь возможность осознанно использовать такие минималистичные и «простые» инструменты вроде Slim сначала нужно несколько лет посвятить работе с более сложными и «полноценными» инструментами вроде Laravel.

Как я случайно стал соавтором шрифта, верстая лендинг
‎
#дизайн #типографика #верстка #веб

Недавно я работал над версткой лендинга для сайта codly.cc.

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

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

Лично мне больше всего нравится геометрический гротеск — это такой стиль, когда в основе букв лежат идеальные геометрические формы вроде окружностей, треугольников и т.п.

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

Копнув глубже, я выяснил, что такое странное начертание — это не ошибка, а другая разновидность кириллицы: Болгарская. В ней черты для букв «к», «ж» и «ю» продолжаются вверх.

Сила open-source сообщества

Я открыл issue на GitHub проекта Unageo, где я описал свою проблему и предложил свою помощь в создании дополнительных глифов.

На мое удивление, Ричард, автор проекта, ответил очень оперативно и сам внес необходимые правки в гарнитуру, добавив новый вариант начертания для русской кириллицы.
Кстати, это не первый раз, когда я участвовал в open-source проекте. Возможно, как-нибудь ещё расскажу про свои приключения на GitHub.

Расширенная версия с иллюстрациями доступна на vc.ru. Если вам понравилась история — поставьте огонек 🔥
‎

Новый кейс Tilda: создание калькулятора для расчета полисов страхования

#кейс #интеграция #tilda

Опубликовал новый кейс о том, как я создавал калькулятор страховых полисов для сайта на Tilda с помощью API Финуслуг.

Кейс состоит из двух частей:
- разработка интерфейса калькулятора с помощью Zero-блока
- создание API-шлюза для API Финуслуг, чтобы обойти ограничения CORS

Полная версия кейса с иллюстрациями и кодом как обычно на vc.ru:
‎

‎
#верстка #веб #frontend

Помимо Тильды я занимаюсь также разработкой сложных веб-приложений с нуля. Часто при старте нового проекта я пытаюсь использовать инструменты, которые уже знаю, чтобы ускорить процесс разработки.
‎
Однако обычно я выбираю одну новую технологию или инструмент для того, чтобы было интереснее 😅, особенно если проект мой.

Последний пример — это TailwindCSS. Это CSS фреймворк, который облегчает верстку страницы за счет того, что в нем уже заданы готовые цвета, отступы и прочие штуки, которые иначе пришлось бы описывать самому с помощью CSS.

Вообще, CSS-фреймворков существует множество, однако разные фреймворки решают разные задачи:

▫️ Дают возможность использовать готовые компоненты, такие как кнопки, карточки, меню и т.п. Например: Bootstrap, Bulma

▫️ Добавляют стили по умолчанию. Достаточно добавить CSS файл на страницу, и к HTML элементам применяются стили без назначения классов. Например: PureCSS, PicoCSS

▫️ Добавляют CSS классы-утилиты для помощи в разработке. Это как конструктор Лего, где есть совсем базовые детали, из которых можно собрать и машину, и дом. Такие утилиты облегчают задание отступов, размеров, цвета и т.п. Именно к таким фреймворкам относится TailwindCSS

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

Для этого идеально подошел TailwindCSS, потому что за счет того, что в нем уже задана модульная сетка мне не пришлось тратить на это время.

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

Подробнее про плюсы и минусы этого фреймворка я написал в статье на vc.ru:
‎

Сделай за меня: Claude Computer Use

#ai #ml #anthropic #claude

Область применения искусственного интеллекта активно расширяется: сейчас все чаще появляются инструменты, использующие не просто нейронную сеть, а агентов искусственного интеллекта. Это интеллектуальные программы, которые не просто предоставляют информацию, но и могут самостоятельно выполнять различные действия.

Новость, о которой сегодня хочу рассказать, прошла довольно незаметно, но я думаю она достаточно важная.

Компания Anthropic, конкурент OpenAI (создатель ChatGPT), недавно выпустила обновление для своей модели Claude — Computer Use (использование компьютера).

Суть в том, что теперь Claude может более точно координировать действия, выполняемые за компьютером: нажатия клавиш и перемещение курсора — он делает это по скриншотам экрана.

В 2024 году уже стали появляться сервисы, которые используют агентов ИИ и я думаю, что в следующем году подобная тенденция только продолжит набирать обороты.

Нас уже 25 ⭐️

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

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

Поэтому каждый мой пост пишется очень легко, хотя редактировать иногда бывает довольно скучно 😅

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

Спасибо, что читаете!

Опубликовал новый кейс модификации для Tilda: множественный выбор опций товара с ограничением количества вариантов.

Сейчас в Tilda есть возможность создавать опции с множественным выбором для товаров, но на момент разработки этой модификации этого ещё нельзя было сделать.

За основу я взял модификацию с mo-ti.ru, которую пришлось достаточно сильно изменить. Помимо изменения интерфейса, также надо было добавить возможность указывать ограничение на количество выбираемых вариантов и текст «заглушку» (placeholder) для случая, когда не выбран ни один из вариантов.

О том, как работает модификация и какой необычный трюк я придумал для сохранения настроек опций через админку подробно рассказал в новом посте на vc.ru:

Сегодня 25 декабря — начало католического Рождества, а Новый Год всего через 6 дней 🎄
‎
Пользуясь случаем, хочу разбавить посты с кейсами и создать немного праздничного настроения.

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

Обычно я генерирую музыку по настроению — стиль имеет второстепенное значение. Последнее время чаще получается музыка в стиле Chip Tune. Это стиль музыки, в котором звук не записан заранее в виде семплов музыкальных инструментов (как, например, в MIDI).

Вместо этого музыка создается самим «железом» — звуковыми микросхемами (отсюда название Chip). Из-за этого получается довольно характерный звук. Несмотря на такую машинную «грубость», с помощью такого подхода также возможно передавать широкий спектр эмоций и настроений.

Ниже я прикрепил свой последний трек — Toy Store

Остальную музыку можно найти в канале Telegram: @toneprism

Как я создаю трехмерные иконки для сайтов на прозрачном фоне с помощью нейронной сети

В новой статье рассказываю и показываю картинками о том, как я делаю красивые трехмерные иконки на прозрачном фоне.

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

С появлением нейронных сетей вроде MidJourney и DALL·E стало возможно создавать красивые и уникальные иллюстрации значительно быстрее, чем вручную в 3D или графическом редакторе. Единственный минус — обычно с первого раза желаемый результат получить не удается... и со второго, третьего и четвертого раза тоже.

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

Привет! Сегодня не хочу расписывать большой пост про подведение итогов и прочее.

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

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

Встретимся уже в новом году — впереди очень много интересного и познавательного. Спасибо, что читаете и хороших праздников!

Время начала эпохи Unix: как компьютеры считают время

#разработка #web #unix #linux

Начало года — отличный повод поговорить о том, как компьютеры отсчитывают время. Ведь именно 1 января 1970 года началась так называемая «эпоха Unix» — точка отсчета времени для большинства современных компьютерных систем.

Unix-время — это способ представления времени в виде количества секунд, прошедших с полуночи 1 января 1970 года по Гринвичу. Эта дата называется "Unix Epoch" или "начало эпохи Unix".

Почему именно эта дата?

Когда в конце 60-х создавалась операционная система Unix, разработчикам нужна была удобная отправная точка. 1970 год был достаточно близок к моменту создания системы, а первое января естественным образом ложилось на начало календарного года.

Проблема 2038 года

Интересный факт: в 32-битных системах время с момента начала эпохи Unix хранится как целое число со знаком. Это значит, что его максимальное значение ограничено, и 19 января 2038 года в полночь (также по Гринвичу) счетчик времени достигнет своего предела и начнет отсчет заново.

Конечно, современные 64-битные системы уже решают эту проблему, но некоторые старые устройства (например, промышленные датчики или медицинское оборудование) все еще могут с ней столкнуться. Суть этой проблемы такая же как и проблема Y2K в начале 2000-х.

Где применяется такое время?

В веб-разработке время Unix используется повсеместно. Например, когда вы фильтруете записи в блоге по дате или сортируете комментарии от новых к старым — внутри все это работает через время Unix. Особенно удобно оно при работе с разными часовыми поясами.

Важная особенность времени Unix в том, что оно всегда хранится по Гринвичу (UTC+0). Когда вы читаете новости, соцсети или мессенджеры в своем часовом поясе, приложение берет это базовое время и преобразует его в ваше локальное. Поэтому вы всегда видите правильное время, где бы ни находились.

Например, время, которое в формате Unix выглядит как число 1735948800 — это количество секунд, прошедших с начала эпохи Unix до полуночи, 4 января 2025 года по Гринвичу. Именно в таком формате время чаще всего хранится в базах данных приложений.

Таким образом, технология, придуманная более 50 лет назад, до сих пор остается основным способом хранения времени в компьютерных системах. Это показывает, что иногда простые решения оказываются самыми эффективными и долговечными.