oc-guy/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The OC Guy — Odoo Community tips and tricks</title>
<meta name="description" content="Welcome. Best tips and tricks for Odoo Community, the open-source ERP: how to install it, back it up, extend it, and bolt AI on top. By The OC Guy, Oliver Arnold.">
<meta name="color-scheme" content="dark">
<link rel="preconnect" href="https://api.fontshare.com">
<link rel="preconnect" href="https://cdn.fontshare.com" crossorigin>
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/site.css">
</head>
<body>

<a class="skip" href="#tips">Skip to the tips</a>

<header class="topbar">
  <a class="mark" href="#top">The OC Guy</a>
  <nav class="nav" aria-label="Sections">
    <a href="#welcome">Welcome</a>
    <a href="#open">Open source</a>
    <a href="#tips">Tips</a>
    <a href="#about">About</a>
    <a class="nav-action" href="#ask">Ask</a>
  </nav>
</header>

<main id="top">

  <!-- HERO: the sentence is the layout -->
  <section class="hero" aria-labelledby="hero-title">
    <h1 class="hero-line" id="hero-title">
      <span class="hero-part">Odoo Community</span>
      <span class="slot"><img src="assets/world-map-1689.jpg" alt="A 1689 engraved world map in two hemispheres, ringed by allegorical figures and ships" width="1400" height="1208"></span>
      <span class="hero-part">tips and tricks.</span>
    </h1>
    <div class="hero-foot">
      <p class="hero-say">Hey — welcome. Here you find the best tips and tricks for Odoo Community,
        the open-source ERP small companies run themselves: install it, back it up, extend it, and
        bolt AI on top. I am The OC Guy, Oliver Arnold.</p>
      <a class="btn" href="#tips">Read the tips</a>
    </div>
  </section>

  <!-- INTRO: statement with inline thumbnails -->
  <section class="intro" id="welcome" aria-labelledby="intro-title">
    <h2 class="sr-only" id="intro-title">What Odoo Community is</h2>
    <p class="statement">
      A full ERP whose licence costs nothing:
      <span class="thumb"><img src="assets/geography-four-types-of-globe-engraving.jpg" alt="An engraving of four kinds of globe, opened to show their rings and axes" width="900" height="600"></span>
      read every line, change it, run it on your own server
      <span class="thumb"><img src="assets/a-printer-s-workshop-on-the-left.jpg" alt="An engraved seventeenth-century printer's workshop: a hand press, workmen setting type" width="900" height="600"></span>
      and it answers to you.
    </p>
  </section>

  <!-- OPEN: the map opens to full width -->
  <section class="open" id="open" aria-labelledby="open-title">
    <figure class="map-figure">
      <img id="worldmap" src="assets/a-general-map-of-the-world-or.jpg" alt="A 1794 wall map of the world in two hemispheres, engraved with notes on voyages and discoveries" width="1920" height="1400">
      <figcaption>A 1794 double-hemisphere map: knowledge printed once, copied by hand, corrected by everyone who used it.</figcaption>
    </figure>
    <div class="open-copy">
      <h2 id="open-title">Written in the open, used in the open</h2>
      <p>Odoo Community is published under LGPL v3. No seat count, no trial that expires, no module you must
        rent back. The people who make it stronger are the people who run it: localisation packs for your
        country's taxes, modules for your industry, a patch for the bug you hit last week. That is the deal —
        you inherit a working ERP, and you owe the next person what you learned.</p>
      <figure class="open-figure">
        <img src="assets/world-map-1689.jpg" alt="The 1689 world map again, closer: the engraved landmasses and sea routes of two hemispheres" width="1400" height="1750">
      </figure>
    </div>
  </section>

  <!-- CLAIMS: sentences with switches -->
  <section class="claims" aria-labelledby="claims-title">
    <h2 class="sr-only" id="claims-title">What you get with Odoo Community</h2>

    <div class="band" data-on="true">
      <button class="band-switch" type="button" role="switch" aria-checked="true" aria-describedby="c1v">
        <span class="band-text">No licence fee, ever.</span>
        <span class="track"><span class="knob"></span></span>
      </button>
      <p class="band-value" id="c1v">Zero per user, per month. Odoo Community is LGPL v3: you pay for a server and your own time, not for permission.</p>
    </div>

    <div class="band" data-on="true">
      <button class="band-switch" type="button" role="switch" aria-checked="true" aria-describedby="c2v">
        <span class="band-text">Your records stay on your disk.</span>
        <span class="track"><span class="knob"></span></span>
      </button>
      <p class="band-value" id="c2v">PostgreSQL on your own machine. One <code>pg_dump</code> is the whole company, portable to any host you like.</p>
    </div>

    <div class="band">
      <button class="band-switch" type="button" role="switch" aria-checked="false" aria-describedby="c3v">
        <span class="band-text">Every line is readable.</span>
        <span class="track"><span class="knob"></span></span>
      </button>
      <p class="band-value" id="c3v">The source is public. Find the field, change the field, keep the change — no vendor to convince, no feature request to queue.</p>
    </div>

    <div class="band">
      <button class="band-switch" type="button" role="switch" aria-checked="false" aria-describedby="c4v">
        <span class="band-text">Modules come from neighbours.</span>
        <span class="track"><span class="knob"></span></span>
      </button>
      <p class="band-value" id="c4v">The OCA repositories and the Odoo app store carry thousands of modules, most of them free, written by people solving their own problem first.</p>
    </div>

    <div class="band">
      <button class="band-switch" type="button" role="switch" aria-checked="false" aria-describedby="c5v">
        <span class="band-text">AI sits on top, not instead.</span>
        <span class="track"><span class="knob"></span></span>
      </button>
      <p class="band-value" id="c5v">The ERP keeps the truth — stock, invoices, orders. The model reads it and drafts with it. Boring, correct data in; useful answers out.</p>
    </div>
  </section>

  <!-- TIPS: statement, table pushed right -->
  <section class="tips" id="tips" aria-labelledby="tips-title">
    <h2 id="tips-title">Tips that save a weekend</h2>
    <div class="tips-grid">
      <div class="tips-side">
        <p class="tips-note">Seven things worth knowing before your first install, and before every upgrade after it.</p>

        <!-- The live thing: pick what the company does, get the modules to install first -->
        <div class="picker" data-ui>
          <p class="picker-q" id="picker-q">What does your company actually do?</p>
          <div class="chips" role="group" aria-labelledby="picker-q">
            <button class="chip" type="button" data-modules="Sales, Invoicing, Inventory">Sell goods</button>
            <button class="chip" type="button" data-modules="Sales, Invoicing, CRM">Sell services</button>
            <button class="chip" type="button" data-modules="Manufacturing, Inventory, Purchase">Make things</button>
            <button class="chip" type="button" data-modules="Purchase, Inventory, Invoicing">Buy and resell</button>
            <button class="chip" type="button" data-modules="Project, Timesheets, Invoicing">Run projects</button>
            <button class="chip" type="button" data-modules="Expenses, Invoicing, Accounting">Track the books</button>
          </div>
          <p class="picker-out" aria-live="polite">Choose one, or several. The modules stack in the order you would install them.</p>
        </div>

        <figure class="tips-figure">
          <img src="assets/geography-four-types-of-globe-engraving.jpg" alt="An engraving of four kinds of globe on stands, opened to show their rings and axes" width="900" height="1120">
        </figure>
      </div>

      <ol class="tips-list">
        <li>
          <span class="tip-kind">Install</span>
          <span class="tip-what">Run it from Docker Compose, not from source.</span>
          <a class="tip-where" href="https://www.odoo.com/documentation" target="_blank" rel="noopener">One file, two containers<span aria-hidden="true"> →</span></a>
        </li>
        <li>
          <span class="tip-kind">Backup</span>
          <span class="tip-what">Dump the database nightly and actually restore it monthly.</span>
          <span class="tip-where">pg_dump, then psql</span>
        </li>
        <li>
          <span class="tip-kind">Upgrade</span>
          <span class="tip-what">Stay on one major series, and migrate a copy before the live one.</span>
          <span class="tip-where">Never in place</span>
        </li>
        <li>
          <span class="tip-kind">Extend</span>
          <span class="tip-what">Take an OCA module before you write your own.</span>
          <a class="tip-where" href="https://github.com/OCA" target="_blank" rel="noopener">github.com/OCA<span aria-hidden="true"> →</span></a>
        </li>
        <li>
          <span class="tip-kind">Extend</span>
          <span class="tip-what">Keep your code in one addons path and never edit core files.</span>
          <span class="tip-where">Inherit, do not patch</span>
        </li>
        <li>
          <span class="tip-kind">Debug</span>
          <span class="tip-what">Answer "where does this field live" with the Odoo shell, not with grep.</span>
          <span class="tip-where">odoo shell</span>
        </li>
        <li>
          <span class="tip-kind">Invoice</span>
          <span class="tip-what">Load the localisation pack for your country before the first invoice.</span>
          <span class="tip-where">l10n_&lt;your country&gt;</span>
        </li>
      </ol>
    </div>
  </section>

  <!-- ABOUT: portrait as drop cap -->
  <section class="about" id="about" aria-labelledby="about-title">
    <h2 id="about-title">Who is typing</h2>
    <p class="bio">
      <img class="dropcap" src="assets/a-printer-s-workshop-on-the-left.jpg" alt="An engraved printer's workshop: a hand press on the left, workmen setting type in the centre" width="480" height="480">
      I am Oliver. I run Odoo Community for my own company and write down what breaks.
      No partner, no licences: own your ERP, bolt AI on.
    </p>
    <p class="about-facts">
      <span>Oliver Arnold, 安雷威</span>
      <a href="mailto:o.arnold@projektbox.de">o.arnold@projektbox.de</a>
    </p>
  </section>

  <!-- CTA: a sentence with a blank -->
  <section class="ask" id="ask" aria-labelledby="ask-title">
    <h2 class="sr-only" id="ask-title">Ask a question</h2>
    <p class="ask-line">
      <label for="ask-mail">Ask me anything about Odoo</label>
      <input id="ask-mail" type="email" inputmode="email" placeholder="you@company.com" autocomplete="email">
      <button class="ask-send" type="button">Send it.</button>
    </p>
    <p class="ask-note">One question, one answer, by mail. No list, no tracking, no sequence of follow-ups.</p>
  </section>
</main>

<!-- FOOTER: invitation over a cropped name -->
<footer class="foot">
  <div class="foot-top">
    <p class="foot-invite">Bring your question, leave with a plan.</p>
    <a class="btn btn-dark" href="mailto:o.arnold@projektbox.de?subject=Odoo%20Community%20question">Write to Oliver</a>
  </div>
  <nav class="foot-links" aria-label="Elsewhere">
    <a href="https://www.odoo.com/documentation" target="_blank" rel="noopener">Documentation</a>
    <a href="https://github.com/OCA" target="_blank" rel="noopener">OCA modules</a>
    <a href="https://apps.odoo.com" target="_blank" rel="noopener">App store</a>
    <a href="mailto:o.arnold@projektbox.de">Email</a>
  </nav>
  <p class="foot-credits">
    Pictures: <a href="https://commons.wikimedia.org/wiki/File:World_Map_1689.JPG">“World Map 1689”</a> by Gerard van Schagen, public domain;
    <a href="https://commons.wikimedia.org/wiki/File:1794_Samuel_Dunn_Wall_Map_of_the_World_in_Hemispheres_-_Geographicus_-_World2-dunn-1794.jpg">“A General Map of the World”</a> by Thomas Kitchin, public domain;
    <a href="https://commons.wikimedia.org/wiki/File:A_printer%27s_workshop;_on_the_left_a_printing_press,_on_the_r_Wellcome_V0023751.jpg">“A printer's workshop”</a>, CC BY 4.0;
    <a href="https://commons.wikimedia.org/wiki/File:Geography;_four_types_of_globe._Engraving._Wellcome_V0025077.jpg">“Four types of globe”</a>, CC BY 4.0 — all via Wikimedia Commons.
  </p>
  <p class="foot-name" aria-hidden="true">The OC Guy</p>
</footer>

<script src="js/site.js" defer></script>
</body>
</html>