Chiperoni ku Basel

Category: tech

  • 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
  • My robotic future

    My robotic future

    I chatted* Facebook support to get an issue at the day job fixed.

    The Facebook support person decides to call me.

    I answer the phone and don’t understand a single word.

    Another call. The same experience.

    Having spoken to a lot of support hotlines, I know the company wants my consent to record the call.

    don't be a robot
    “Don’t be a robot”

    A robot is reading a German text with a strong American accent. I have a Swiss cell phone, live in the German-speaking part of Switzerland, and I am German-speaking. A German message is good.

    However, a robot trained on American English will get the pronunciation totally wrong.

    It was incomprehensible. Gibberish.

    I chat with the Facebook support person. They still want to call me.

    I try to press the usual keys, and get in on the 4th or 5th call.

    Rather than dissing the robot for not knowing how to pronounce German, I say test your client-facing interfaces and channels. Most people will give up.

    *to show I am 199% comfortable using digital.

  • Social Objects and how they help me to connect

    In a recent offline conversation, I dropped a comment:

    That’s my common social object with so-and-so.

    Me in an informal conversation

    I realized how much this old blog post from the beginnings of blogging has influenced me.

    My observation: If I find a common social object, it helps me re-connect. If I find a common topic, sport, technology, political view, geographic place, hobby, shared past experiences, the depth of interactions changes.

    Sounds obvious.

    As 2020 has changed many social interactions, routines, and aspects. I am curious to see what will return and in which way.

    2020 is a catalyst for changes that started happening already.

    inner courtyard

    I am curious how work will evolve. Language change is an indicator of societal change. I attended a meeting on Friday where one participant said to another:

    I Slack-ed you.

    ironically on a Teams call

    The tools may change. But, the trajectory will probably remain the same.

    Note to myself: My blogger skills are very useful.

    roses
    Photography is a social object