Chiperoni ku Basel

Category: internet

  • 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
  • Keyword research in 2020: a brief answer

    Keyword research in 2020: a brief answer

    I received this question recently:

    If I create content for our company (articles for magazines, social media posts, etc), do I need to try to use KEYWORDS within the text as much as possible? And if yes, is there an online tool / website to check how well I did my job before I publish it?

    Here’s my answer:

    • Brainstorm and research as much as you can about your topic.
    • Ask your sales managers how they describe the service when they talk to people on the phone; write down all the phrases they mention.
    • Jot down all the phrases and questions you think people will enter into a search engine for your topic.
    • Check the monthly search volume of your phrases using a tool such as SEMRush or Searchmetrics or Ahrefs. Or use free SEO research tools.
    • Check search intent by entering the keyphrase into Google. Analyze the results you see:
      • Are you seeing some of your competitors? That’s good. You are in the right space.
      • Are you seeing dictionary or encyclopedia or university links? That’s not good, if you are a commercial company.
      • Look at the Google results and try to understand the search intent.
    • Map out the structure and SEO elements of your article.
      • Outline the topic you want to target.
      • Write a draft meta page title and meta description.
      • Write a draft Heading 1 (H1).
      • List out the questions you want to answer in your article.
        • Questions are typically Heading 2s (H2).
        • Answers are a paragraph or a bullet list.
      • List out the keyphrases you want to target in the body text.
      • List articles that you want to use as inspiration for your SEO writing process.
        • Avoid copy and paste. Google is not dumb and can find out if you copy and pasted from another site.
      • Review SEO research before starting to write.
      • Start SEO copywriting process and include all SEO elements.
        • Include main keyphrase in your meta title tag, meta description, H1, add complementary keyphrases in H2s and body of the text, add alt texts for your images.
    • There are several tools that you can use to check the keyword distribution and density in your article. I’ve used Ryte.com, Moz, and there’s a new AI tool called MarketMuse that I am testing.
    • Important: Write for humans. Make the article useful. Think about the phrases people will use to find this article.
    • Track traffic and keyphrases in a tool like SEMRush or SearchMetrics or Ahrefs or Ryte.com or similar. There’s quite a choice.

    Hope you find this list useful.

    think make check
    Continuous Improvement

  • I attended Medien-Barcamp 2019 – my notes and comments – #medienbc

    Yesterday, I set my alarm to 6 am and jumped on the 7:33 train to Zürich-Oerlikon. On a Saturday. To attend a barcamp on media.

    If you are unfamiliar with the concept of barcamps, a barcamp is a conference that organizes the talks by itself, on the day, Someone provides some rooms and infrastructure such as wifi and screens. And they send out invites via Twitter and other social media channels.

    And that’s how i found my way to #medienbc, the event’s hashtag.

    In yesterday’s case, the Medien-Barcamp organizers had access to the rooms of SRF, the Swiss public radio and TV station, in Zürich.

    It’s not my first barcamp. I’ve attended many and even presented topics at some. Yesterday I was in listening mode.

    #medienbc Medien-Barcamp 2019

    Here’s a brief recap of the talks that I attended:

    First, I attended a talk by Markus on Voice User Interfaces. He provided an excellent intro to the rise of voice. He says many new jobs are being created in this space. And I made a mental note to look up SSML.

    Fabian and David invited us to discuss how to get more “old” people engaged on social media. The discussion covered a lot of ground:

    • The decline in journalistic quality,
    • The change in speed,
    • The fact that today journalists have access to less proofreading, fact checking and editorial staff than ever,
    • Questions like do users want to see and interact with company content on Facebook (apparently yes, 1 attendee described how a Facebook ad influenced her decision to buy).

    Next, I listened to Vincenzo talk about the challenges and learnings of setting up an email newsletter for a small regional newspaper. A very honest and useful talk. His newspaper uses a tool called Revue, by a Dutch startup, cos it’s even simpler than Mailchimp.

    #medienbc Medien-Barcamp 2019

    I peeked into the session on no-budget video production. I would like to learn more about this.

    #medienbc Medien-Barcamp 2019

    I listened to a talk on analytics. Not new for me, but I was curious to see SimilarWeb. It looks a lot like SEMRush.

    We looked at the stats for Nau.ch that had just announced it is now making a profit. The stats showed Nau.ch is investing in organic search. Markus recommended that journalists do keyword research for their articles. I would think that is obvious by now.

    #medienbc Medien-Barcamp 2019

    In the last session of the day, I got valuable advice on how to prepare to speak in front of audience or take part in an interview. In my own words:

    • Stand firmly. Before you start presenting, assure yourself that you are standing firmly on the ground and that it will not disappear beneath you.
    • Find ways to relax and stand in an open, welcoming position, e.g. take deep breaths of air, yawn, make funny faces, turn into a loud and noisy monster shortly before your gig.
    • Remind yourself that you are valuable, e.g. imagine you were given a really expensive diamond worth more than 100 thousand CHF and walk thru the busy train station in Bern.
    • Prepare and know the content of your presentation. If you know your topic well, you will be persuasive.
    • It’s about your attitude and posture.
    #medienbc Medien-Barcamp 2019

    Thank you to the organisers and participants for an enjoyable and fulfilling event. Good food, awesome location, great speakers. I like barcamp sessions cos we can leave out the sales speak and dig deeper. I feel excited and encouraged.

    #medienbc Medien-Barcamp 2019
    #medienbc Medien-Barcamp 2019