Preface

Harbourino was created before ChatGPT existed – born from a practical wish: to organize code so that it is easy to read, clear, and modular. Similar to Clipper/FiveWin: clean syntax, clear mind.

Frameworks provide structures and components but often hide the actual source behind abstractions. The result is often identical to standard HTML/JS/PHP – only the path is harder. With Harbourino Style, I take back the freedom: syntax to my taste, short files, a patcher that assembles the parts.

In the AI era, Harbourino feels tailor-made: building blocks appear in seconds, land as modules in the project, debugging is 1:1 in the final output (thanks to marker comments). In hindsight: a stroke of luck – born from experience, future-proof today.

1. Introduction

Harbourino Style is a marker-based preprocessor approach for HTML, JS, PHP, and PRG. Instead of maintaining everything in one file, the code is split into building blocks, linked via markers, and assembled into a release file.

Metaphor: scissors & pinboard. You cut out meaningful code pieces, arrange them, and the patcher pastes them together precisely.

2. Basic Principle

  • _main serves as the table of contents of the screen/module.
  • Building blocks are stored e.g., in /source/.
  • The patcher processes markers, replaces tokens, removes comments, and builds the release file.
  • Optionally, marker comments remain in the release for quick navigation in DevTools.
<!-- HARBOURINO HEAD_RESOURCES -->

3. Marker Reference

3.1 Includes

  • -> NAME – simple include (pulls file from source path).
  • $-> NAME : key=val ; ... – include with parameter replacement (tokens).
  • % -> NAME – conditional depending on test mode.

3.2 Tokens

  • !|KEY|VALUE – defines a token (global in run), does not appear in output.
  • <KEY> or |KEY| – replaced by value.

3.3 Comments & Paragraphs

  • |- ... – comment (optionally removed in release or converted to //).
  • [ -> ... – log/debug comment (same as above).
  • &- … -& – paragraph: lines are “joined” in release.
// Example $-> with parameters
$-> FORM\LABEL : cTitle = myArrivalList ; height=48 ; h=3
$-> FORM\DATEPICK : cTitle=Arrival ; ID=date1 ; value=2019-11-22
$-> FORM\DATEPICK : cTitle=Departure ; ID=date2 ; value=2019-11-28

4. Patcher Options

  • hide=1 – remove comments |- & [ -> (otherwise in PHP as //).
  • droplog=1 – remove logline(...) (otherwise in PHP as comment).
  • test=1 – skip % -> blocks.

Output target is controlled via ini.ini (MyReleasePath etc.).

5. Workflow

  1. Create _main – as table of contents (marker list of building blocks).
  2. Write building blocks – one file per task/function.
  3. Patch – run patcher with desired options.
  4. Debug – in browser, jump directly to source via marker comments.
  5. Deploy – release file in MyReleasePath.
Recommended IDE: VS Code with split-view/grids – multiple small files open in parallel.

6. Best Practices

  • One function / one section per file (NASA rule).
  • Consistent names: MD_* for modals, TABLE_* for tables, DIRJQUERY/* for event packages.
  • Keep marker comments in release: faster debugging.
  • No business logic in _main – only structure.
  • Optional: include profiles.txt & ToDo.txt (traceability).

7. Before / After Examples

Harbourino (Excerpt)

<?php
-> PHP_HEADER
?>

<!doctype html>
<html>
<head>
  -> HEAD_RESOURCES
  <style>
    -> STYLE
    -> STYLE_TABLE
  </style>
  <!-- HARBOURINO HEAD_RESOURCES -->
</head>
<body>
  -> TOAST_CONTAINER
  -> BUTTONS_TOOLBAR
  -> TABLE_CONTAINER
  <script>
    -> GLOBALS
    -> FETCHDATA
    -> RENDERPAGE
  </script>
</body>
</html>

Release (Excerpt)

<!doctype html>
<html>
<head>
  <!-- HARBOURINO HEAD_RESOURCES -->
  <link rel="stylesheet" href="/assets/app.css">
  <style>/* <-- STYLE/STYLE_TABLE inserted --> ... </style>
</head>
<body>
  <div id="toast-container">...</div>
  <div class="toolbar">...</div>
  <div class="table-container">...</div>
  <script>/* GLOBALS/FETCHDATA/RENDERPAGE inserted */ ... </script>
</body>
</html>

8. Extensions

  • DBF Integration (configuration/logging in long-lived format).
  • Automatic debug markers before each include (HTML/PHP comment).
  • Mini table kit instead of heavy grids (sort/filter/pagination in 200–300 lines).
  • VS Code workspace with panel layout, tasks, and snippets.

9. Appendix

ini.ini (Example)

[Setup]
MyReleasePath=C:\WWW\HTDOCS\XBROWSE
ProjektDirSource=C:\WWW\HTDOCS\XBROWSE\XBROWSER\source
ProjektDirGeneral=C:\testprj\General
HarbourinoDirSource=C:\harbourinoFiles

Patcher call (Example)

/harbourino_patcher.php?main=C:\www\htdocs\XBROWSE\XBROWSER\XBROWSER_main.php&hide=1&droplog=1&test=0

© 2025 – This manual is continuously maintained.