Chiperoni ku Basel

Tag: Lovable.ai

  • Using Lovable to build HTML5

    By default Lovable builds Javascript apps. Which are useful and easy-to-generate and great as a local prototype.

    However.

    For most purposes, an HTML5 version is faster and better for SEO and AI crawlers.

    It takes some persuading to get an HTML5 version from Lovable (2 to 3 prompts), but it’s totally worth it.

    HTML5 beats JS from a crawler point of view. Texts are viewable without worrying about the DOM. Keep in mind: AI cannot interpret Javascript. This Linkedin article says that ChatGPT cannot see 50% of the internet. They fetch raw HTML. They don’t run JavaScript.

    Within Lovable you can add a setting to generate HTML instead of JS. I haven’t changed my settings yet.

    HTML is much more powerful than most people realize.

    Your HTML page has several advantages over the average modern React/TanStack marketing site:

    Speed

    Your browser receives:

    • index.html
    • styles.css
    • Google Fonts

    That’s basically it.

    I avoid typical JS work steps such as:

    • React runtime
    • hydration
    • component tree
    • client-side routing
    • JavaScript bundles
    • framework overhead

    A browser can render the HTML page immediately.

    • Easy deployment on my shared web server is a huge plus for me.
    • Future-proof for search engines and AI crawlers
    • Static HTML
    • Human-readable source
    • AI-readable source
    • No framework lock-in
    • Easy-to-maintain on shared hosting

    Here is a copy of my prompt that i used to move from JS to HTML in Lovable:

    Static HTML5 Website

    Default architecture for brochure websites, landing pages, blogs, personal websites and content-focused projects.

    Requirements:

    • Semantic HTML5
    • Single index.html
    • Separate styles.css
    • Minimal vanilla JavaScript
    • No React
    • No Next.js
    • No TanStack
    • No hydration
    • No client-side rendering
    • Must work with JavaScript disabled
    • Mobile-first responsive design
    • WCAG accessibility
    • Fast loading
    • SEO-friendly
    • AI-crawler friendly

    Required files:

    • index.html
    • styles.css
    • robots.txt
    • sitemap.xml
    • llms.txt

    Required SEO:

    • title
    • meta description
    • canonical URL
    • Open Graph tags
    • JSON-LD schema

    Required accessibility:

    • skip link
    • semantic landmarks
    • proper heading hierarchy
    • alt text on images
    • keyboard navigation

    Avoid:

    • SPA architecture
    • framework dependencies
    • npm build chains unless explicitly requested
    • client-side rendering

    All primary content must be visible in the HTML source.

    new buildings in #basel
    I compare buildings to websites. Here’s a “buildings in Basel” snapshot to illustrate my post.

    I love my HTML5 generator. Saves me lots of typing time.

    Looking forward to more Lovable options.

    Modern frameworks are powerful. But many websites do not need that complexity. For blogs, small websites, and personal projects, static HTML remains a fast, future-proof, and powerful choice.



    P.S. Useful check list to build a good website.

  • Ancient Poetry

    Ancient Poetry

    Over the years I collected text passages from ancient literature. I shared the texts with a friend on Flickr and on Instagram. In the past couple of weeks, I collected the texts and added them to a self-made Lovable app. Yesterday I deployed the app to a sub-folder here. Have a look. Tell me what you think.

    Ancient Poetry
    I built an app called Ancient Poetry

    It’s my fourth AI app. I am learning lots about AI coding, Lovable, GitHub, Terminal, Antigravity, VS Code, React, JavaScript, data structuring.

    From idea to architecture to building to debugging to deployment. Here’s a summary for my AI skills portfolio:

    AI-Assisted App Development

    Built the web app Ancient Poetry, a mobile-first scripture reflection app.

    Skills demonstrated:

    • AI-assisted product design (ChatGPT + Lovable)
    • JSON data modeling for structured verse content
    • React + Vite frontend architecture
    • static web deployment and debugging
    • PWA fundamentals (manifest, service worker)
    • content architecture and metadata design
    • prompt engineering for AI development workflows