Vibe coding: A new era of software development?!

Vibe coding is an innovative approach to software development in which developers no longer write code directly, but instead formulate their ideas in natural language with the help of AI-supported development tools. The AI then generates the appropriate code, making programming more accessible and efficient.

How it works

With vibe coding, developers provide verbal instructions such as "Create a navigation bar with a dropdown menu" or "Optimize the page's loading speed." The AI analyzes these inputs and generates the appropriate code. If adjustments are necessary, the developer can provide further instructions, creating an iterative process.

Framework

AI Models: Vibe Coding is based on powerful Large Language Models (LLMs) that can generate and optimize code.
Tools: Platforms such as Cursor Composer or Replit Agent use AI models from OpenAI or Anthropic.
Areas of Use: Particularly useful for rapid prototyping, web development, and automation.

Advantages and Disadvantages of Vibe Coding

Advantages	Disadvantages
Accessibility – Even people without in-depth programming knowledge can develop software.	Quality Assurance – Generated code may contain errors or be inefficient.
Speed – Projects can be implemented significantly faster.	Security Risks – Untested code may contain vulnerabilities.
Creativity – Developers can focus more on ideas and concepts.	Reliance on AI – Less control over the code can be problematic in the long run.
Automation – Recurring tasks can be completed efficiently.	Debugging – Troubleshooting can be more difficult if the code is not fully understood.
Documentation – AI can write documentation faster and often better than humans.	Documentation – Outsourcing to AI deprives you of the opportunity to reflect on the code and its usefulness.
	Espionage – For vibe coding, the AI must be consulted. If it is not located within the company, there is a risk of industrial espionage. There can also be problems with patents because the necessary inventive step could be denied.
Testing – Using natural language instructions, you can formulate the essence of tests and leave the technical details to the AI. In particular, AI writes unit tests quickly and effectively.

Vibe coding is revolutionizing software development by lowering the barriers to programming and facilitating creative processes. At the same time, however, it requires critical thinking to ensure the quality and security of the generated code.

Postscript
The above text was created by an AI. The italicized parts were added by me later. Large parts of the TYPO3 extension webhelp were also created with an AI—i.e., with the help of vibe coding. My experience is that you have to keep the programming project small. The selected web components were just the right size not to overwhelm the AI services used. Vibe coding forces developers to think about test scenarios early on, similar to test-driven coding. With Web Components, this is easy because you can instruct the AI to develop specific variants for the Web Components themselves. A nice feature is that you can also use the AI to create documentation.

Everything was translated and posted online using google.translate.de without further review.

Web Components from the TYPO3 extension `webhelp`

porthd-tocgenerator: Integrate table of contents as a web component

Error message instead of directory

Directory working correctly

/porthd-tocgenerator>

porthd-breadcrumb: Generate breadcrumb menu from a descriptive link

For current page

Error when creating breadcrumb menu

porthd-ajax: Show `Sitemap.xml` loaded via Ajax using a callback with a button

Faulty Ajax import without a button

Ajax import with button (loader for Google Maps or social media)

Without button

With button and start text and a maximum of 3 click events

For data protection reasons, the Ajax request is only executed when you click the button.

porthd-barchart-from-table : Example table to chart - `transposed` reading

Person	Alice	Bob	Clara
Value A	10	20	30
Value B	5	15	25

porthd-codeview: PHP code included in a <script> tag

porthd-infomodal: Modal window with slots in the template

Example: Modal with a template defined outside the web component

Example: Modal with a template included by the web component

porthd-listselect: Expandable/collapsible and searchable mega menu enclosed by the web component

Here's also a <div> instead of a <li>.

Domain: Archaea
- Kingdom: Animals
  - Phylum: Chordates
    - Class: Mammalia
      - Order: Carnivora (Carnivores)
        
        Family: Felidae (Cats)
        
        Genus: Panthera
        
        Species: Panthera leo (Lion)
        
        Species: Panthera tigris (Tiger)
      - Order: Proboscidea
        
        Family: Elephantidae
        
        Genus: Loxodonta
        
        Species: Loxodonta africana (African elephant)
        
        Species: Loxodonta cyclotis (Forest elephant)
        
        Genus: Elephas
        
        Species: Elephas maximus (Asian elephant)
        
        Genus: Mammuthus (extinct)
        
        Species: Mammuthus primigenius (woolly mammoth)
        
        Species: Mammuthus columbi (Colombian mammoth)
        
        Species: Mammuthus meridionalis (southern elephant)
      - Order: Cetacea
        
        Family: Delphinidae (dolphins)
        
        Genus: Delphinus
        
        Species: Delphinus delphis (common dolphin)
        
        Species: Delphinus capensis (Long-beaked dolphin)
        
        Genus: Tursiops
        
        Species: Tursiops truncatus (Bottlenose dolphin)
        
        Species: Tursiops aduncus (Indo-Pacific bottlenose dolphin)
        
        Genus: Stenella
        
        Species: Stenella attenuata (Spotted dolphin)
        
        Species: Stenella longirostris (Spinner dolphin)
        
        Species: Stenella coeruleoalba (Striped dolphin)
        
        Genus: Orcinus
        
        Species: Orcinus orca (Killer whale / Orca)
        
        Genus: Lagenodelphis
        
        Species: Lagenodelphis hosei (Slender-tailed porpoise)
        
        Family: Phocoenidae (Porpoises)
        
        Genus: Phocoena
        
        Species: Phocoena phocoena (Common porpoise)
        
        Species: Phocoena sinus (Vaquita / California porpoise)
        
        Species: Phocoena dioptrica (Spectacled porpoise)
        
        Genus: Neophocaena
        
        Species: Neophocaena phocaenoides (finless porpoise)
        
        Genus: Australophocaena
        
        Species: Australophocaena dioptrica (Southern harbor porpoise)
    - Class: Birds
      - Species: Eagle (*Aquila chrysaetos*)
      - Species: Penguin (*Aptenodytes forsteri*)
      - Species: Parrot (*Ara ararauna*)
    - Class: Reptiles
      - Species: Crocodile (*Crocodylus niloticus*)
      - Species: Iguana (*Iguana iguana*)
      - Type: Snake (*Well, well*)
  - Tribe: Arthropods
    - Class: Insects
      - Species: Ant (*Formica rufa*)
      - Species: Butterfly (*Papilio machaon*)
      - Order: Coleoptera (beetles)
        
        Family: Coccinellidae (ladybirds)
        
        Genus: Coccinella
        
        Species: Coccinella septempunctata (Seven-spot ladybird)
    - Class: Arachnids
      - Species: Tarantula (*Theraphosa blondi*)
      - Species: Scorpion (*Androctonus australis*)
      - Type: Tick (*Ixodes ricinus*)
    - Class: Crustaceans
      - Species: Lobster (*Homarus gammarus*)
      - Species: Crab (*Carcinus maenas*)
      - Species: Shrimp (*Palaemon serratus*)
- Rich: plants
  Tribe: Angiosperm
  - Class: Monocots
    - Type: Rice (*Oryza sativa*)
    - Species: Banana (*Musa acuminata*)
    - Species: Tulip (*Tulipa gesneriana*)
  - Class: Dicots
    - Type: Rose (*Rosa canina*)
    - Type: Oak (*Quercus robur*)
    - Species: Sunflower (*Helianthus annuus*)
  - Class: Magnoliopsida
    - Type: Magnolia (*Magnolia grandiflora*)
    - Species: Maple (*Acer pseudoplatanus*)
    - Type: Clover (*Trifolium pratense*)
  Tribe: Ferns
  - Class: True fern
    - Species: Bracken fern (*Pteridium aquilinum*)
    - Type: Royal fern (*Osmunda regalis*)
    - Species: Striped fern (*Asplenium trichomanes*)
  - Class: Moss Ferns
    - Species: Selaginella (*Selaginella lepidophylla*)
    - Type: Spring moss (*Fontinalis antipyretica*)
    - Type: Hornmoss (*Anthoceros agrestis*)
- Rich: mushrooms
  - Trim: Stand mushrooms
    - Class: Cap mushrooms
      - Type: Mushroom (*Agaricus bisporus*)
      - Species: Fly agaric (*Amanita muscaria*)
      - Species: Boletus (*Boletus edulis*)
    - Class: Rust fungi
      - Species: Wheat rust (*Puccinia graminis*)
      - Species: Pear grid (*Gymnosporangium sabinae*)
      - Type: Pine bubble rust (*Cronartium ribicola*)
  - Tribe: Ascomycetes
    - Class: Yeast
      - Type: Baker's yeast (*Saccharomyces cerevisiae*)
      - Type: Brewer's yeast (*Saccharomyces pastorianus*)
      - Species: Candida (*Candida albicans*)
    - Class: Truffle mushrooms
      - Species: Black truffle (*Tuber melanosporum*)
      - Type: White truffle (*Tuber magnatum*)
      - Type: Desert truffle (*Terfezia claveryi*)

porthd-timezone: Converting time zones using JavaScript

2025-06-01T12:00:00Z

porthd-vcard: Create a VCard for contact information, for example, in the imprint

Dr. Dieter Porth

Dr. Porth;Dieter;;;

info@mobger.de

+49 161 99180688

+49 421 51483548

Extracted a file with appointments for the calendar from HTML data

No error message

87654321@example.com

20240329T120000Z

20240401T090000Z

My private meeting

VEVENT

87654323@example.com

20240329T120000Z

20240401T090000Z

The follow-up meeting

With error message

87654321@example.com

20240329T120000Z

20240401T090000Z

My meeting

VEVENT

20240329T120000Z

20240401T090000Z

My second meet