cyberweb 0.4.174

data/doc/README.gen

@@ -0,0 +1,3231 @@
+ADD_GOBOLINUX_AND_RUBY_HEADER
+ADD_TIME_STAMP
+
+<img src="https://i.imgur.com/GatV3S5.png" style="margin-left: 0.5em">
+<img src="http://shevy.bplaced.net/cyberweb_theme.png" style="margin-left: 0.5em">
+
+## The History of the Cyberweb project
+
+This project was created a very long time ago, in PHP - in the year
+2004 or so, give or take. (I used to think it was in 2002, but looking
+at old notes, it was more likely started in early 2004.)
+
+I was using custom functions to regulate serving web-related content
+back then, written in PHP.
+
+The original **class WebObject**, for example, was written a very long time
+ago, perhaps in the year **2004** or something like this, when I
+transitioned away from PHP into ruby. I took all the old PHP code 
+and adapted it at that point.
+
+The Cyberweb-project was rewritten several times, so it may not be
+very similar to the old code from ~almost 20 years ago. The important
+core methods, though, may still be quite similar. For example, I
+was using div() in PHP already, and I am using div() in ruby too.
+
+Ruby allows for more functionality out of the box, though, so I 
+can do:
+
+    div {
+    }
+
+In PHP this is not easily possible, so ruby is better in this regard -
+more flexible.
+
+During that transition phase, from **php** to **ruby**, the project
+was renamed several times - first to **web_foundation**, then to
+**cybersprawl**, then to **Cyberweb**, then to **web_object** and
+then back to **Cyberweb** again. I think the name **Cyberweb** 
+is best among these alternatives. While **web_object** is the
+more technically correct and accurate term, as everything related
+to the www is handled via that object, I prefer the name
+**Cyberweb** in general for the whole project - it sounds
+futuristic. The name **WebObject** is a good name too, though,
+as we attempt to describe a particular "web-page" as a
+"web-object", basically.
+
+**class WebObject** was originally the very main class I was
+using in PHP to describe my local knowledge base, an "app" where
+I kept useful information bits about linux, and ruby, and other 
+parts together. The code for this project in PHP was simpler, and
+also uglier though, and less flexible. (Actually the name was
+not even WebObject back then, but let's not make this too overly
+complicated and convoluted; it's already a fairly messy history.)
+
+When I switched to **ruby**, I rewrote all my PHP code in ruby,
+as stated; and eventually put the web-specific parts into a project
+called <b>web_foundation</b>, which was the actual **predecessor**
+to <b>Cyberweb</b> (with cybersprawl being part of it, but mostly
+the idea here for **cybersprawl** being a custom **webforum**;
+lateron cybersprawl became an incomplete **webmin clone**, which
+I still want to finish one day. The wish to have a web-forum
+is still retained, though).
+
+The original <b>Cyberweb project</b> was "officially" started on
+**13.06.2012** (13th June in the year 2012) - that is, the name
+was first used in the year **2012**. In 2020 it came to an end
+and was replaced with the <b>WebObject</b> project, but in May
+2021 the original name was re-instated. Quite confusing!
+
+The project called <b>html_tags</b> was created at about the same
+time back then, in the year **2012**, in order to keep the code
+base of the newly generated project somewhat cleaner and smaller.
+**WebFoundation** was thus renamed to Cyberweb, but there still
+was a directory called **foundation/**. Old gem releases of **cyberweb**
+may still show that, back when I kept these old releases.
+
+In **August 2018**, I removed the **foundation/** subdirectory and
+integrated the code into other parts of the project instead.
+
+The transition phase in **2012** happened to some extent because
+I was still using ruby 1.8.x and had to make several changes to
+the old web-foundation project, in order to have my code work on
+**ruby 1.9.3** anyway.
+
+The rewrite would allow me to change some design decisions I made earlier
+on, which were not that ideal - in other words, to allow me to discard
+some of the old code at the same time (which again happened in 2018,
+when I cleaned up the cyberweb project, after many years of
+"semi-activity" only).
+
+The **rewrite** step worked for the most part, even though it took me
+longer than expected. While the code base is still not "perfect", it is
+quite ok and also to some extent documented this time - at the least much
+better than it used to be in the old code before. I will continue to
+improve the documentation slowly over time.
+
+In my opinion, it is quite common to rewrite web-related projects in ruby 
+in general- see manveru's old **Ramaze** project, for instance, which
+unfortunately was abandoned at a later time. (Innate was created prior
+to that **→** https://github.com/Ramaze/innate.)
+
+Essentially **cyberweb** integrates what I learned over the years, so
+I built some sort of "framework" for the web. It is actually not 
+necessarily a framework only as such but more a tool-set project for
+the www. There won't be a lot of idioms used such as could be seen
+in rails - because the cyberweb project is way too simple to make use
+of complicated idioms. You can even call it a dumb project, too, on
+purpose. I do not like the proliferation of complication and complexity
+that the modern web-era induced onto developers - just look at the
+amount of JavaScript frameworks that emerge and disappear over the
+years. Anyone still remember Mochikit? Or the era before Mochikit?
+
+The **cyberweb project** has combined, and thus integrated, the
+following **older components** that have existed at various 
+moments in time or may still exist:
+
+    - web foundation
+    - Ruby-CGI (a snapshot, including the excellent cgi-exceptions functionality)
+    - cybersprawl
+    - sinatra mapping
+
+This may not be hugely important to know, but it explains a bit of
+the historic origin for the cyberweb project.
+
+## Aim, Goals and Scope of the Cyberweb project
+
+This subsection will detail some of the goals of the Cyberweb project.
+
+Before describing the **cyberweb** project in more detail, please keep in
+mind that the project is fairly incomplete, not even in an early beta stage;
+and that it is presently catered to my own use cases, so it may not work for
+you. Consider it more as a proof-of-concept project than something you
+may want to use for production. Sinatra may be a much better choice for
+the latter.
+
+At any rate, let's next see for the aims and goals of the **web_object**
+project.
+
+The **Cyberweb** project is both a collection of web-related tools
+(thus, **a toolset project**) and a web "framework". Both terms
+will be defined next.
+
+What is meant with a "set of web-related tools"? This means that there
+will be code, written in ruby, that aims to solve problems related to
+the **world wide web**, ranging from small to medium-sized issues.
+
+This may also include formatters and linters for e. g. JavaScript in
+principle, but it can also include file-generators or related to
+managing files, directories, css files, javascript files, and so
+forth. A **set of tools**.
+
+The other part of the Cyberweb project is to act as a "framework",
+that is - to provide code that can be used for higher abstractions
+when creating **web-apps**.
+
+Note that the Cyberweb project itself is not necessarily extremely
+opinionated. Different strategies may be used, be it **MVC** (model,
+view, controller), be it plain oldschool .cgi or be it modern
+microservices and REST APIs as such, such as used in rack and
+sinatra/padrino. All can be combined and mixed together - in theory.
+In practice, Cyberweb is of course limited mostly by my own time
+investment, so different parts of the project will be more
+comprehensive (and better) than other parts. The bottom line is
+that there is "**no single strategy to rule them all**", as far
+as the cyberweb project is concerned.
+
+It is true that the Cyberweb project is, in itself, very traditionally
+focused on the .cgi centric ways to develop web-apps. In theory, a
+.cgi page could also be thought of as a **WebApp**. Nothing prevents
+this really, other than some old assumptions about CGI.
+
+In the long run, expect the Cyberweb project to become more general and
+hopefully more "modern" as well, as I work on improving the documentation
+in the next step (no possibility to have more users without **high
+quality documentation**).
+
+Since June 2021 two new goals were added to this project:
+
+- It will contain documentation in regards to useful CSS knowledge.
+- It will contain documentation in regards to useful JavaScript knowledge.
+
+There are two reasons for this. The more important reason was that I
+wanted to bundle web-related stuff into one project, and just use
+that project, rather than dilute this to many separate projects.
+
+The second reason was that I have collected a lot of knowledge over
+the years about CSS and JavaScript, and wanted to keep them 
+presented (and presentable) in a single project as well. This means
+that there may be pure CSS, pure HTML and pure JavaScript 
+examples distributed within the Cyberweb project as well.
+
+## Features
+
+For a more complete documentation of the above features, please check
+out the file FEATURES.
+
+- You can select various different default CSS templates. They will be
+  stored in the CSS/ directory by default. To use them, pass a symbol
+  to the method invocation for css_style=(). They are numbered in
+  succession, so template1, template2 etc..
+
+Example for this on the main w object:
+ 
+   w.css_style = :template1
+ 
+This will default to the template1.
+ 
+Currently the way to add new templates is to expand the case menu.
+
+## CSS templates
+
+CSS templates can be designated by assigning to a symbol, such as
+this:
+
+    w.css_style = :template1
+  
+The templates are stored in the cascading_style_sheets/ subdirectory.
+
+Other templates are :default and :code.
+
+Note that it is currently (2021) unsure whether templates will be
+expanded. They will probably be retained, but may have to be
+reviewed again to determine whether they are sufficiently useful
+or not.
+
+## Cyberweb.set_path_to_images
+
+The method **Cyberweb.set_path_to_images()** can be used to set the
+path to a global image directory, that is - a directory that holds all
+images. On my home system this defaults to **/home/x/data/images/**.
+
+I put almost all images into this directory, but there are exceptions
+to this.
+
+Note that this directory will only be of relevance if the configuration
+options for web_object were set up to use such a directory in the
+first place. Only image-related methods are affected by this 
+setting anyway.
+
+## Images
+
+If an image is not existing, but used within the Cyberweb
+framework, then a a red border and a red text will be
+displayed around that (non-existing) image.
+
+This way, the user is being encouraged to fix the problem at hand.
+
+However had, it may also be annoying to see it if the user can NOT
+fix/change this.
+
+This is why the red warning or warnings in general, can be reduced
+or disabled - have a look at the configuration file for this.
+
+If warnings are set to verbose, then the web_object project will
+display the above notification for images not found. If it is set
+to normal or lower than that, the web_object project will not
+display that warning.
+
+## Balloon.css
+
+You can download the **balloon.css** file via class
+**DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
+
+This file resides at the location 
+<b>web_object/utility_scripts/download_balloon_css.rb</b>.
+
+It presently (May 2018) does not do much other than download
+that remote .css file.
+
+I needed a small "pop-up" for displaying additional information
+to some entries in a table, which is how I found **Balloon.css**. 
+
+## Proper (default) order of arguments to many methods in the Cyberweb project
+
+The Cyberweb project uses quite a few methods that have more than 4
+or 5 parameters.
+
+The typical order for these methods is the following:
+
+(**1**) the content belonging to the tag at hand
+(**2**) the css class that is to be used for that tag (defaults to class WebTag)
+(**3**) the id to that HTML element (optional)
+(**4**) the css style for that tag (optional)
+(**5**) javascript code to that tag (optional)
+
+## Greek letters
+
+The old greek letters are specified via shortcuts such as <b>&sigma;</b>
+in HTML. The **&sigma;** variant would display the small sigma
+character; the constant SIGMA_SMALL or just SIGMA will allow you to
+refer to this constant within the Cyberweb project.
+
+You can output a table with all available greek letters by issugin
+the following command:
+
+    Cyberweb.show_greek_letters
+
+## SVG
+
+If you wish to make use of SVG it is recommended to install the
+**svg_paradise** project. Then, you can use it through Cyberweb
+such as in the following case:
+
+    ee Cyberweb.circle
+
+This will output a SVG circle. Do note that this can be customized;
+simply have a look for the SVG Paradise project for more
+documentation pertaining to this part.
+
+## Javascript-support in the Cyberweb project
+
+Have a look at the subdirectory called **javascript/**.
+
+If a new javascript-component is added, it should be registered
+in one of the .rb files in said directory.
+
+## Commandline usage
+
+A commandline program exists, at <b>bin/cyberweb</b>.
+
+This file allows you to generate a new file-skeleton, such as
+via:
+
+    cyberweb foo.cgi
+    cyberweb index.cgi
+
+You can also get some feedback over what it can do, via
+"cyberweb --help".
+
+## The interactive web_object-shell
+
+There also exists an interactive **cyberweb-shell**, which may be
+used to test out various things - but it is fairly unfinished, so I
+do not recommend anyone to use it as of yet (2018).
+
+The idea is to have this work as some kind of developer-console
+where web-related activities can be tested.
+
+## HtmlTags
+
+Since as of cyberweb version 0.0.5, a dependency exists on a
+project called **html_tags**, which was created in order to
+separate the generation of HTML tags out from the rest of
+the framework.
+
+The idea is to hold a full HTML page in a special object, the so
+called "web_object", and to then .serve() said object when it is
+required. Which essentially is done through a .cgi page.
+
+Since as of **April 2019**, the old .cgi approach will be extended;
+while .cgi will be always supported in the Cyberweb project, an
+approach similar to **sinatra** will eventually be adopted as well.
+
+## Include the cyberweb project on a website
+
+To include the cyberweb project on a website, in your .cgi script
+for instance, do use this line:
+
+    require 'cyberweb/autoinclude'
+
+You can then populate the @web_object object, which resides in the
+main Cyberweb-namespace, and which is also aliased through a
+convenience method called w(). If you autoinclude Cyberweb
+then you can use the w() method directly.
+
+This allows you to describe a webpage, such as by issuing the 
+following code:
+
+    w {
+      title 'My first homepage'
+      body_css 'mar1em'
+      h2 'Hello World!'
+      use_jquery
+    }
+
+Note that this should happen on separate lines - the description
+here for the gem does not replace newlines with the html <br> tag.
+
+Inside **w {}** you can issue special instructions, such as use_jquery
+or disable_webimages. The former allows us to use jquery, the latter
+disables webimages. (Webimages are small icons that I find myself
+to use a lot. If you wish to use these images, have a look at
+
+  http://shevegen.square7.ch/STD.tar.xz
+
+)
+
+## Configuration - and editing the configuration file (which is a yaml file)
+
+Keep in mind that you can modify a lot of the configuration that
+the Cyberweb project uses, through the yaml files stored in the
+<b>configuration/</b> subdirectory.
+
+If you need to display the configuration settings via web-page,
+you can always use the method .show_config(), on the main
+Cyberweb, such as via either of the following code:
+
+    w.show_config
+    div('mars3em') { w.show_config }
+
+You can also just show the configuration setting without depending
+on the web-object, through this module-level method:
+
+    Cyberweb.show_configuration_settings
+
+The main **configuration file**, a .yml file, can also be modified
+through a commandline "interface", via:
+
+    cyberweb edit
+
+This presently uses a hardcoded value (towards the editor
+called **vim**).
+
+You can also query the current configuration via appending **config?**
+such as in:
+
+    http://localhost/DATA/personal/sitemap.cgi?config?
+
+## HTML Tables and the Cyberweb project
+
+The method table() is the primary entry point for table-related
+tags. The first three arguments are:
+
+    css class to use
+    ID of the table
+    css style to use
+
+You can also, optionally, pass in a dataset to the table,
+such as an Array, via a block argument.
+
+The following example shows how to do that:
+
+    table('mars1em','test_table1','border:1px solid rand') { %w(
+      this is a test table1 with every individual
+      entry becoming populated into the table
+    )}
+
+The part after the {} constitutes the Array that is passed into
+the table.
+
+By default this will use two td-elements, aka table data elements.
+The third element goes on a new line, aka via a closing **tr**
+tag (in HTML parlance).
+
+Note that you can use variants of table() if you need a different
+amount of **td** tags.
+
+For example, **table4()** can be used to denote a table with
+4 elements per row:
+
+    table4('mars1em','test_table1','border:1px solid rand') { array_goes_here }
+
+You can also set global CSS classes to class Table:
+
+    Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
+
+For a longer explanation of that .set_css_class() functionality, have a
+look at the link here at **HTML Tables and the Cyberweb project**.
+
+Note that you do not have to supply any arguments to table() aside
+from the dataset given into it as block - a simple Array will suffice:
+
+    table { pass_array_here }
+
+You can also style each **td** element, such as by tagging them
+with a block border:
+
+    Td.set_css_class 'bblack1'
+    table('mars2em') { %w(
+      This is just an example Array
+    )}
+    Td.set_css_class ''
+
+The last line of code will again clear the default set to **Td**.
+
+## The name cyberweb
+
+You may wonder why the name used to be **cyberweb**.
+
+There is not a single good reason for this other than, firstly, I
+thought it was related to the web - so I included web. And
+cyber? Well, I like science fiction; and cyber sort of fits
+to the www too, at the least to some parts.
+
+The idea for a "social" web, from the point of view of the
+older web-foundation project (the predecessor to the
+cyberweb project), was to call this the "cybersprawl".
+The name **cybersprawl** would indicate a **virtual
+meet-up place for people**.
+
+This may sound a bit confusing but it is sort of how the name
+gradually evolved - and eventually became **cyberweb**,
+before it was renamed to **web_object** in 2020. And at
+a later time back to **cyberweb** - yup, I change 
+the project names way too quickly. But the name used to
+by cyberweb in the past, so I am slowly getting used to
+that name.
+
+## Creating input-buttons in a HTML-form field
+
+    <form> 
+    <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+
+    <form>
+    <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+  
+## HTML Entities
+
+If you wish to remove HTML entities from a given input string
+at hand, you can use **Cyberweb.escape_html()** or one of its
+alias.
+
+Example:
+
+    Cyberweb.escape_html('abc') # => 'abc'
+    x = '<p>this is (&nbsp;) a test</p><div> Ok -&amp; outcome will be </div>'; y = Cyberweb.html_entities(x) # => "&lt;p&gt;this is (&amp;nbsp;) a test&lt;/p&gt;&lt;div&gt; Ok -&amp;amp; outcome will be &lt;/div&gt;"
+
+## Specifying a monospace font to use
+
+The Cyberweb has a method that allows you to use a monospace font.
+
+Within your Cyberweb instance, such as:
+
+    w {
+    }
+
+You can add any of the following two lines:
+
+    use_monospace_font
+    monospace_font
+
+This will use a monospaced font. I needed this functionality because
+I sometimes use the pre-tag, and display numbers in a table-fashion,
+for where it may be useful to use a monospaced font, so that the
+alignment of the text is easier.
+
+## Setting a title on a webobject
+
+You can set a title on the default webobject via:
+
+    set_title()
+
+You can omit this call, in which case we will default to
+the filename of the page in question, such as for a 
+file named **foobar.cgi**, the corresponding title
+would simply be "foobar".
+  
+You can also use markdown files if you want to. I personally
+use a file such as **TITLE.md** or **TITEL.md**. The method
+call will try to read in the file content, and then use
+that as the title, **if the file exists**.
+
+## The default image directory
+
+The default image directory is defined in default_image_directory.yml
+
+At least the name of the image directory.
+
+## Viewing the source of a webpage
+
+Use the view_source() method to add a javascript button,
+to view the source of a page. The method view_source()
+is defined in the file shared.rb.
+
+## Modify the input tag
+
+You can modify the <input> tag within that via css by using:
+
+    input.view_css {}
+
+## HTML IDs
+
+All HTML ids are registered into an array. To then show whether
+you have duplicated IDs in a page, do this:
+  
+    show_duplicated_ids()
+  
+Or in a more general way, use the #debug method, like so:
+  
+    w.debug
+
+This will report whether you have a duplicated ID or not.
+When the page is served, we will also display a little error
+message in case we have found duplicated IDs. This way we
+can notify the developer that there is some mistake in his
+page and we can correct this mistake then.
+
+## The table-tag
+
+The tag table() now supports blocks. That means you can use arrays
+in tables:
+
+    table { %w( one two three for ) }
+
+Or styled with CSS:
+
+    table('s1em bblack1') { %w(one two three for) }
+
+You can combine fieldset with table and a caption, by doing:
+  
+    table_with_caption('title of caption goes in here')
+
+## Global CSS classes
+
+In general, every HTML tag has **a representative ruby
+class**, with the first character being upcased.
+
+For example, the div tag can be accessed, in some ways,
+through **class Div**. An example follows next.
+
+Say that you wish to colourize all div tags on the
+given webpage with the colour red. The following code
+will do that:
+
+    Div.set_css_class 'red' # Now all divs are red.
+
+This will still require a CSS class defined called .red,
+which has the content **{ color: red; }**. However had,
+in a future release, Cyberweb may do this automatically,
+at the least for colours (we need to keep in mind that
+code should not be ambiguous).
+
+The point of the above code is to provide you with a
+simple way to quickly style all HTML tags in some
+way. You may not want to find this too overly useful,
+but at the least the functionality exists for when
+you **may** need this.
+
+Do note that you can remove the above via:
+
+    Div.clear
+
+again.
+
+This works for **all** HTML tags by the way, for when
+it makes sense for such a tag to have that possibility.
+
+An alternative may be:
+
+    Cyberweb.clear :div
+
+This would clear any predefined-css-class for any tag.
+Both Div.clear and Cyberweb.clear :div are equivalent -
+use whatever seems better or easier for you.
+ 
+Let's give another example - say that you want to modify
+the default CSS class for the html table tag:
+ 
+    Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
+    Cyberweb::Table.set_css_class 'bblack5 pink_border3 marl2em mart1em'
+
+(The second variant is necessary if you did not do
+**include Cyberweb** before.)
+
+After this was done, you can always query the css class via:
+
+    Table.to_s
+
+In fact, this is used as default argument to arguments in
+method definitions (with the corresponding name of the
+html tag).
+
+Cyberweb also has some pre-defined tags, and CSS classes that
+can be used across different projects.
+
+One such method is **cmd()** - this originally stood for
+"command", and was used to display commands that the user
+could input into a terminal/shell, on Linux.
+
+The method cmd() has a pre-defined CSS class that can be
+queried like this:
+
+    Cyberweb.css_for_cmd? # => "marl1em BOLD"
+
+These are two CSS classes. **marl1em** means **margin-left: 1em**,
+and **BOLD** means, well, **font-style: bold**.
+
+This query method exists primarily due to convenience. In November
+2019 I needed to query the old default, change it, then re-assign
+it to the main CSS class in use there.
+
+You can also designate another default, like by this way:
+
+    Cyberweb.css_for_cmd = 'marl1em steelblue BOLD'
+
+## Hiding / disabling scrollbars
+
+You can use:
+
+    hide_scrollbars
+
+in the **main web_object** to hide the scrollbar, by making use
+of CSS. I recommend against this, because it may annoy some
+users, but it was enabled because sometimes there may be use
+cases to NOT have a scrollbar at all.
+
+The idea was taken from:
+
+https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
+
+## Showing the source code of a particular file
+
+By default every file that is part of the cyberweb project can
+show its source to the visitor, by appending:
+
+    ?source
+    ?view_source
+
+to the URL.
+
+For example, on my home system I make use of this like so:
+
+    http://localhost/data/video/play_this_video_file.cgi?source
+
+Evidently this is not always wanted and will, in the future,
+have means to disable this (or selectively enable it in the
+configuration file). But for the time being (January 2020)
+this is the way how things work - after all, even with
+criticism about this functionality, it **is** a feature
+too.
+
+## HTML header tags
+
+HTML has, by default, different header tags, starting with **h**.
+
+For example we have:
+
+    <h1>This is h1</h1>
+    <h2>This is h2</h2>
+    <h3>This is h3</h3>
+    <h4>This is h4</h4>
+    <h5>This is h5</h5>
+    <h6>This is h6</h6>
+
+The corresponding generator in Cyberweb is:
+
+    h1 'This is h1'
+    h2 'This is h2'
+    h3 'This is h3'
+    h4 'This is h4'
+    h5 'This is h5'
+    h6 'This is h6'
+
+If you also wish to make the content displayed there as
+the id="" setting, then you can use:
+
+    h1_id 'This is h1'
+    h2_id 'This is h2'
+    h3_id 'This is h3'
+    h4_id 'This is h4'
+    h5_id 'This is h5'
+    h6_id 'This is h6'
+
+The **id** at hand will be the content, so this is more 
+useful for short header-entries, such as "Goals" or 
+"Aims" or "Introduction" and so forth. The latter
+functionality purely exists due to convenience - I wanted
+to quickly generate the default id entry for a sitemap. 
+
+## JavaScript clock
+
+If you wish to display a small JavaScript "clock" that just
+shows the time, you could use this:
+
+    display_clock('pad1em') { :larger_font_size }
+
+The block argument just increases the font-size a bit; it can
+be omitted of course, as can all arguments, too:
+
+    display_clock
+
+## Redirecting to another page
+
+You can combine BeautifulUrl, and Cyberweb, to redirect
+to another page.
+
+Example:
+
+   http://localhost/DATA/misc/sitemap.cgi?redirect_to=ruby_todo
+
+This would redirect me to my local todo-file in ruby. In fact:
+that was the primary reason why the code was added, so that I
+can use the web-server as a pseudo file system.
+
+Evidently not everyone may want this feature, so in the long
+run this may have to be modified - but for now it will remain
+as it is. It can be used to quickly "jump" to another page,
+both a local page or a remote page.
+
+## Viewing the content of any file
+
+You can view the content of any file via:
+
+    http://localhost/DATA/misc/sitemap.cgi?view_file=ruby_todo
+
+This can be disabled since as of **May 2021, by setting the
+**view_file: true** in the project configuration .yml file.
+I recommend to do so, as you probably don't need this 
+functionality. I needed it for my local webserver, to
+quickly test things, and view local files in the browser,
+no matter where they reside (which is handled by another
+gem, which is not published, as it is for internal use
+only).
+
+## dropdown()
+
+You can use the dropdown() method to use several &lt;select>
+statements.
+
+Examples:
+
+    dropdown( %w( a b c ) )
+    dropdown( %w( a b c ) ) {{ selected: 2 }}
+    dropdown( %w( a b c ) ) {{ selected: 3 }}
+
+The latter variant will have the second entry selected as default;
+we begin to count at 1 here, not 0.
+
+## Cyberweb.display_all_files_in_this_directory
+
+The method **Cyberweb.display_all_files_in_this_directory()**
+can be used to simply and quickly display the content of
+all files in the given (target) directory.
+
+Example:
+
+    Cyberweb.display_all_files_in_this_directory '/tmp'
+
+I needed this functionality because I had many standalone
+.py files holding matplotlib code and I needed to display
+them, so this functionality was added in **May 2020**.
+
+## Register on-click events
+
+If you want to register an on-click event and change the opacity value
+of an element, you can use this method:
+
+    on_click_change_opacity '#drag_notepad','0.95'
+
+The first argument is the ID of the target element, and the second value
+is the opacity value - the lower that value is, the higher the opacity
+(and thus, the highlighting).
+
+Note that you can also combine this with a drag-action. For instance,
+the symbol :drag_and_highlight means that we will combine both 
+actions here, thus allowing a drag-object action, and also a
+on-click-highlighting action on the same object.
+  
+## Body id
+
+To set a body-id for the Cyberweb, you can use something like this:
+
+    body_id 'foobar'
+    set_body_id 'foobar'
+
+This is equivalent to:
+
+    <body id="foobar">
+
+Not a huge saving *per se*, but if you just want to keep a separate
+entry for the id of the body, you can use this method on a
+web_object instance.
+
+## Default CSS classes
+
+The Cyberweb comes with some CSS classes pre-defined.
+
+I am aware that not everyone may want this, but it is simpler
+to bundle my css-classes into this project - both for my own
+personal use case, but also because other people may see
+how the project works. Furthermore, these CSS classes can
+be quite convenient, allowing us to make use of shortcuts
+to style elements on a given webpage.
+
+## Editable text
+
+HTML5 allows the visitor to modify text on a webpage (although
+not persistently).
+
+The Cyberweb project also allows this. Example:
+
+    e('Type something here.') { :editable }
+
+This would make a span-tag, following by a br-tag,
+and the attribute that this is editable.
+
+## CSS helper code and how it relates to the Cyberweb project
+
+This subsection attempts to detail how the **cyberweb** project
+relates (and makes use of) **CSS**.
+
+All my custom CSS rules are distributed in the subdirectory called
+**cascading_style_sheets/**. You can find files such as **colours.css**
+or **default.css** and so forth. Furthermore I have a local
+directory at **/home/x/data/CSS/** which contains symlinks to the
+subdirectory **cascading_style_sheets/**. This was done mostly
+because it saves me some typing-work on the commandline.
+
+**CSS** can, in principle, be accessed through the predefined global
+object named **@css**.
+
+This object can be accessed via "css" or via the helper method
+called **css()**. (Remember that you can omit the () in ruby).
+
+A specific usage example would look like this:
+
+    css.foobar
+
+The idea here was that we could treat all the CSS code in any given
+web-app as an object too, and manipulate it if needed.
+
+Additionally, we would also be able to modify default CSS assignments
+given to some methods, redefine them and so on.
+
+Do note that since as of 2020, I am no longer as convinced that
+this is really that useful. So consider this a bit of 
+**work-in-progress** rather than a finished solution that other
+people should use.
+
+For instance, to change the default for the HTML tag **h4**, the
+following code could be used:
+
+    css.h4.custom_css = 'padl1em'
+
+The idea here was to be able to re-define which custom CSS class is to
+be used. (padl1em is my abbreviation for **padding-left: 1em**)
+
+An alternative syntax exists as well - this is the better way, in my
+opinion, and **should be used**:
+
+    Table.set_css_class 'bblack5 pink_border'
+    Div.set_css_class 'mar3em'
+
+I personally like explicit setters like the above, but the following
+variants are equivalent:
+
+    Table.css_class = 'bblack5 pink_border'
+    Div.css_class = 'mar3em'
+
+## CSS Basics
+
+This short subsection just keeps some information about CSS, in the
+event I forget stuff, or need to look it up quickly, or other people
+may read something new.
+
+A style sheet in CSS can be broken down into the following smaller
+bits:
+
+    ➤ Style sheet
+    ➤ Rule
+    ➤ Selector
+    ➤ Declaration
+    ➤ Property
+    ➤ Value
+
+When more than one selector appears in the same rule, they are said
+to be <b>grouped</b>.
+
+An example for grouping in CSS is shown next:
+
+    th, td { padding: 0 10px 0 0; }
+
+You can space out the selectors onto different lines, such as via
+this way:
+
+    th,
+    td {
+      padding: 0 10px 0 0;
+    }
+
+Use whatever style you prefer.
+
+HTML elements may treat CSS-width differently. The <table> element,
+for instance, only expands horizontally to accommodate its data,
+which is also called "shrink-to-fit". The <div> element, on the other
+hand, expands horizontally as far as there is space, which is
+called "expand-to-fit".
+
+If you encounter a CSS rule with a <b>!important</b> classifier
+then this rule can not be overruled. It became a fixed rule.
+
+The hexadecimal notation #FFF is a short hand for #FFFFFF (which
+is actually white).
+
+RGB values in CSS may also be represented using percentages.
+
+Example for this:
+
+    body {
+      background-color: rgb(50%, 50%, 50%);
+    }
+
+A class-selector looks like this:
+
+    .foobar {
+      margin: 10px 0; # And similar comments
+    }
+
+The **.** indicates that we want to use a class-selector definition.
+
+The above class-selector is valid for every HTML tag that wants to
+use it. You can limit this and confine it to only some elements.
+
+For example, to limited this only to div-tags, use:
+
+    div.foobar {
+    }
+
+Interestingly you can also chain class names together such as:
+
+    .foo.bar {
+      background-image: url(foobar.jpg);
+    }
+
+This means that it will only apply to any element that
+has both foo and bar as classes.
+
+ID selectors in CSS can be used like this:
+
+    <style type="text/css">
+      #foobar {
+        background-image: url(foobar.jpg);
+      }
+    </style>
+    <div class="planet" id="foobar">
+      <h2>Foobar</h2>
+    </div>
+
+The **universal selector** in CSS is an asterisk. When used
+alone, the **universal selector** tells the CSS interpreter to
+**apply the CSS rule to all elements in the document**.
+
+An example showing this follows next:
+
+    * {
+      font-family: Arial, Helvetica,sans-serif;
+    }
+
+In CSS, **descendant** refers to an element that is a
+child of another element.
+
+To target an element based on its ancestor the CSS should be
+written in this way:
+
+    div.foobar h2 {
+      font-size: 18px;
+      margin-top: 0;
+    }
+
+CSS pseudo-classes are used to represent dynamic events, a change
+in state, or a more general condition present in the document
+that is not easily accomplished through other means. Unlike normal
+classes, pseudo-classes have a single colon before the 
+pseudo-class property.
+
+Some browsers will apply the :link pseudo class styles to all links.
+Therefore it may be prudent to define the same properties in :link 
+and :visited, so that the correct styles are applied.
+
+For keyboard-focus you can use the pseudo-element **:focus**:
+
+    a:focus {
+      text-decoration: underline;
+    }
+
+## Cyberweb.string_image()
+
+The method **Cyberweb.string_image()** can be used to return
+a proper HTML img tag, as String. This can then be used to
+embed it into some website.
+
+The input to this method will be an Array, since we use
+*args there. The first entry should be the URL to the
+image at hand - this can be a local URL or a remote URL.
+
+A Hash can also be given. Such a Hash should have a key
+called **:url** to denote the image.
+
+Note that the method **Cyberweb.string_image()** is quite
+long, in order to cover for different use cases. The
+document here will not detail all these options, but a 
+few may be explained next:
+
+    :guess_id           # This means that the ID will be "guessed" based on the filename at hand.
+    :guess_draggable_id # This is as above, but will prepend the string 'drag_' before, to allow for dragging the image at hand.
+
+Personally I use **:guess_draggable_id** usually, as it helps me
+remember what this is doing. :-)
+
+To make all images draggable, use this API:
+
+    all_images_will_be_draggable
+
+## Future goals for the Cyberweb project
+
+There are a tons of things I always wanted to add or have
+available in a web-toolkit - a simple webforum; a blog engine
+and system for managing the content therein; the possibility
+to easily scrape remote websites, with code that is simple
+to understand, write, use (via a web-interface) and maintain.
+And many more goals - in short, to use the browser as the
+main tool.
+
+Inertia and laziness is one (or two) reason(s) why these goals have
+not yet been implemented, largely because I find myself facing
+non-web related issues more often than web-related issues.
+So naturally, more of my time goes into non-web related
+issues. Furthermore, I really dislike JavaScript - if only
+we could describe everything via Ruby instead ... 
+
+For the design of the Cyberweb project (and I am aware that
+a LOT of it could be improved here), I am wondering whether
+it would not be better to actually replace all of the
+dichotomy out there in regards to the www, with "**one language
+to rule them all**" as a solution. I don't even refer to ruby
+primarily as such, even though Cyberweb is evidently written
+in ruby - but what I mean is ... **consider the following** ...
+
+Why do we have to write JavaScript?
+Why do we have to write CSS?
+
+Why can't we let our computers actually generate the "logic"
+behind these programming languages or markup languages?
+
+For example, take:
+
+    set_font 16
+
+This could mean a (any) font with 16 pixels in size.
+
+It's quite simple to use this from within Cyberweb:
+
+    w {
+      set_font 16
+    }
+
+Done!
+
+We could even get rid of the '_' there perhaps:
+
+    w {
+      set font 16
+    }
+
+Don't mind the "set_font" name; we could easily use
+this (or allow several aliases):
+
+    w {
+      fontsize 16
+    }
+
+Or:
+
+    w {
+      font size 16
+    }
+
+(The **w** is a shortcut to tap into the web-object
+instance.)
+
+The primary thing of note here is - why would we **HAVE**
+to use CSS in order to style a webpage? Why not use, in
+this case, Ruby? Or any other language for that matter?
+Ideally one language to describe all these disparate
+languages (**HTML/CSS/JavaScript**) and the logic found
+in them.
+
+Based on this thinking, when you apply this on everything,
+including JavaScript, you actually should be able to 
+write something that is simple and works - and have
+ruby interprete it correctly. Or perhaps another language,
+similar to how LLVM works or perhaps the WebAssembly
+project, to some extent.
+
+So, for example:
+
+    on_mouse_click highlight_id('mouse_pic')
+    on_mouse_click highlight_id(:mouse_pic)
+
+Now, if you as the visitor are to click on this, say, a
+button or some other container element, you would highlight
+the element that has the **mouse_pic** id. This is quite
+easy to do via jquery as-is, but why even have to
+think about JavaScript at all?
+
+I would like to have **a platform** where I can do simple
+manipulations, without having to worry about the
+underlying code implementation **AT ALL**.
+
+So, this would constitute one **future goal** for web_object -
+to be able to do tasks, from Ruby, and have it applied
+to the whole **Cyberweb component**.
+
+Note that WASM is in some ways a bit similar to this, in the
+sense that we become **less dependent** on JavaScript than
+before, since we can also use **other** languages. Of course
+this is still a far cry away from using just one format to
+describe everything, but still, it helps break up the monopoly
+of JavaScript, which is good that this happens. That way we
+aren't as imposed by the constraints that JavaScript puts
+onto us here anymore (in theory, at least).
+
+## Saving (storing) the content of the main web_object into a local file
+
+You can save the main string into a file quickly, by using:
+
+  save
+  # or
+  web_object?.save
+
+Note that this will save into the temp-directory. Your webserver
+needs to have access to it, as otherwise no file can be saved.
+
+It may be simpler to use the last option, because of the main
+doc {} clause that is only finished after the w {} has completed.
+
+That toplevel web_object? call taps into the main web-object.
+
+## Favicons
+
+Favicons are **small images** that may be shown in the tab of
+the browser. I consider them potentially cute and even useful,
+as it may allow the user to quickly look for specific images
+through the browser-tabs.
+
+According to this blog https://getkiss.org/blog/20191004a 
+all among the major browsers will request a favicon, even
+if one has not been set. This evidently wastes a tiny
+bit of bandwith.
+
+If you wish to avoid this then you can simply inline a
+favicon. The smallest "inline" favicon which 
+which ensures zero HTTP requests is the following:
+
+    <link href=data:, rel=icon>
+
+You can do so in Cyberweb too, as part of the 
+**Cyberweb class**, via:
+
+    favicon :inline
+    favicon :minimal
+    favicon :none
+
+Use any of these three variants and it will lead to the above
+minimal "inline" favicon. This is admittedly not too overly
+useful, but the functionality was added nonetheless simply as
+a proof-of-principle. And, who knows - perhaps the web_object
+project will one day also offer support for "minimal
+webpages".
+
+## rem units in CSS
+
+In the past, the **em** unit was quite popular in .css files.
+
+Since some years, such as 2011, **rem** units are increasingly
+more popular - see articles such as 
+https://www.sitepoint.com/understanding-and-using-rem-units-in-css/.
+
+I have not yet decided whether to use rem units or not, but
+I am aware of the differences. I may be too used toward **em**
+to transition into **rem**, and add more complexity that
+way - but for the time being (August 2020) nothing changes
+in this regard.
+
+## The td_row() method
+
+The Cyberweb project has support for &lt;td> tags, via td() method
+calls.
+
+Since inputting an Array of values padded with a td-tag is
+quite tedious, the method td_row() was added.
+
+An example may be simplest to demonstrate this method:
+
+    td_row( %w( 256 128 64 32 16 8 4 2 1 ) )
+
+This will generate valid td-tags for each of the given Array
+member, thus shortening the HTML code generated.
+
+## The WebImages components
+
+**WebImages** are essentially just a small component of the
+Cyberweb project, available under the namespace 
+**Cyberweb::WebImages**.
+
+Since as of July 2020 the web_images component resides under
+the subdirectory at **web_object/images/**.
+
+WebImages provide a way to map certain symbols, such as **:big_star**
+or **:rainbow_circle**, to **a corresponding image**.
+
+To give another example for this: the symbol called **:alert** could
+be interpreted as **showing a small icon that is useful for
+notification towards the end user**. This is usually tied to a 
+particular image, which is displayed on the webpage.
+
+In the past, up until September 2020, these images were not 
+distributed with the **web_object gem** for various reasons -
+one was that the **.gem** would become quite bigger. In
+September 2020 this approach was changed, and the WebImages
+are now also distributed as images. Some of these images were 
+autogenerated via ruby code; others were "hand"-drawn in 
+photoshop, kolourpaint or gimp, and others were re-used from
+permissive sources/licences. The licence for the images is
+different for the code: CC BY 4.0 (Attribution 4.0 International;
+see the following URL
+https://creativecommons.org/licenses/by/4.0/
+).
+
+Do note that even prior to September 2020, in **May 2019** I modified
+the prior assumption that no images are bundled within the
+web_object project slightly - some images were distributed within
+the **web_object project**, but not as an "actual" image; instead,
+they were (and still are) available as **base64-encoded
+Strings**. The following subsection describes how to make
+use of such base64-encoded Strings.
+
+First, we have to **limit** the above statement - not all images will
+be distributed as base64-encoded Strings, only those that may be
+**somewhat useful** to lots of different people. Simple elements
+such as a dot, or an arrow-image - the latter could be used to
+indicate which hyperlinks could be clicked on a website, for
+instance. (You can also use the Unicode symbols in general,
+of course, which does not require any .png file or base64-encoded
+String. In some ways, Unicode has actually made it a lot easier 
+to work on web-projects without needing to bundle specific images as such.)
+
+Note that some websites claim that **Base64-encoded Strings** load up
+faster than e. g. loading up .png files. This may or may not be the
+case, but what we do know is that base64-encoded strings will be 
+**somewhat larger** than the corresponding binary image. So I think
+this statement about a speed gain is really only true for smaller 
+images at best - which is an advice that is repeated on the www in
+general, small is beautiful, and fast. So we will limit this approach
+mostly to **smaller images** in this context; this makes it a bit
+simpler to distribute the **web_object** gem as well.
+
+If you want to see the available images, you can use this method to
+help you:
+
+    Cyberweb.display_the_registered_base64_images
+
+In September 2020, this would tap onto this Array:
+
+    ["AUSRUFUNGSZEICHEN", "BLUEARROW", "BUBBLE", "CAT", "CAUTION",
+    "CHEERING_PERSON", "CURSOR", "DUCKY", "DOT_01", "ELEPHANT",
+    "HALLOWEEN", "HANGING_MONKEY", "LENS", "TU_WIEN_LOGO",
+    "VOGEL"]
+
+So, 15 images are so far made available as base64 string-encoded
+images.
+
+Note that the images can be found under this directory:
+
+    web_object/images/real/
+
+Unfortunately a major design constraint (aka a major bug) was
+discovered on 18.09.2020 (September 2020), leading to the
+reversion of this change. I may at a later time re-evaluate
+this; in the long run I really want to include these images
+too, by default. But since that change broke a lot of 
+code in my own web-apps, I had to revert this for the time
+being. This will eventually be fixed, but it requires some
+larger rewrite, and I don't quite have the time commitment
+for this right now (it will include some architecture
+changes in the web_object library as well).
+
+In June 2021 experimental support for arbitrarily converting
+image files to base64 strings was added to the Cyberweb
+project. This currently depends on imagemagick, so make
+sure to install it first. This is highly experimental, so
+do not yet use it. The idea is that we will simply convert
+any image to base64 if the user wants to do so.
+
+The API currently looks like this:
+
+    img_base64 'STD/ZAUBERHUT.png'
+
+This refers to my base directory for images; and then the
+path within that base directory.
+
+This is currently only tested on my home system. At a later
+time I'll add support for any image-conversion, and most
+likely a cache system, to not have to decode all these
+images again and again and again. Instead, to just convert
+it once; right now Cyberweb always converts this, as that
+was easier to do in code.
+
+You can also make this image draggable via:
+
+    draggable_img_base64(path_to_the_image_goes_in_here)
+
+## The Application Root
+
+A typical web-related project needs to define and designate
+the **starting-point directory**. This is often called the
+"**application root**". The Cyberweb project will also refer
+to the base directory as the application root.
+
+Presently Cyberweb uses a hardcoded approach mostly (sorry),
+but eventually it will transition into a more flexible
+approach.
+
+## Buttons
+
+The following should work, in principle:
+
+    button {}
+
+My long-term goal is to make this DSL work in web-applications
+as well as toolkits such as ruby-gtk.
+
+## How to vertically align any element via CSS
+
+You can use:
+
+    display: flex
+
+**display: flex** specifies a Flexbox layout for the element.
+
+You can also use **align-items: center**, which would take
+care of the **vertical centering** in a container-element.
+
+The CSS property **shape-outside** can be used to allow
+geometric shapes to be set, in order to define an area
+for text to flow around.
+
+Example:
+
+    .shape {
+      width: 500px;
+      float: left;
+      shape-outside: circle(50%);
+    }
+
+You do not need to use the flexbox, though. An older way is to define
+three div elements, such as by using these CSS classes:
+
+    .left {
+      display: inline-block;
+      width: 30%;
+      height: auto;
+    }
+
+    .middle {
+       display: inline-block;
+       width: 30%;
+       height: auto;
+    }
+
+    .right {
+      display: inline-block;
+      width: 30%;
+      float: right;
+      height: auto;
+    }
+
+Use the variant that more suits your way to think about things. I
+actually prefer the oldschool div-CSS approach and avoid flexbox
+altogether. Keep it simple! \o/
+
+This is not equivalent to a grid, though, in particular if you
+want a layout such as 3x3. In that case I recommend to use a
+grid. Example for this can be seen here:
+
+https://codepen.io/chris__sev/pen/bYmpxw
+
+## Working with Frames
+
+You can use Frames.
+
+This example shows how, in the main frame:
+
+   w.frame_left  'foo.cgi' # specify frame to the left
+   w.frame_right 'bar.cgi' # specify frame to the right
+   w.use_frames
+   w.serve
+
+## Working with Grids in HTML/CSS
+
+You can add padding between the grid containers using grid padding or
+row-gap and column-gap.
+
+Examples:
+
+    gap
+    row-gap
+    column-gap
+
+    row-gap:    6px;
+    column-gap: 6px;
+  
+## Colours and the Colour chart in the Cyberweb project
+
+If you wish to show a HTML colour chart, you can use
+the following method: 
+
+    Cyberweb.show_html_colour_chart
+
+If you want to return a random HTML colour, as a String, you
+can use this toplevel method:
+
+    Cyberweb.random_colour?
+
+## CSS colour gradient
+
+You can "create" a colour gradient via:
+
+    colour_gradient_left_to_right(:steelblue, :darkgreen)
+
+The third argument will be the name of the generated CSS class, 
+defaulting to **.gradient1**.
+
+You can then use this in a div-element like this:
+
+    add_to_css_class(
+      colour_gradient_left_to_right(:steelblue, :darkgreen)
+    )
+
+    # And then later:
+    div('gradient1') {
+      h4 'Hello'
+    }
+
+## Show directories
+
+If you wish to display directories from somewhere, use the method:
+
+    display_directories()
+
+## Predefined methods
+
+- Some commonly used methods are predefined, such as:
+
+    question()
+    answer()
+    frage()
+    antwort()
+  
+This is mostly because I use them quite often personally.
+
+They are defined in:
+
+    $CYBERWEB/predefined_methods.rb
+
+## Disabling web images
+
+You can disable the webimages component even in an URL by issuing:
+
+    ?disable_webimages
+  
+Of course you can also disable them through a configuration setting,
+in the configuration file - see the other command "**cyberweb edit**"
+how to edit that file. The idea is to allow several ways to achieve
+the same effect.
+  
+## Modifying the configuration of the cyberweb project
+
+The configuration is stored in a single yaml file. This file can be
+edited by issuing:
+  
+    cyberweb edit
+  
+For a full listing of options, issue:
+  
+    cyberweb --help
+
+or
+
+    cyberweb HELP
+
+## The base directory
+
+The base directory can be defined through the yaml file, with the
+entry called base_directory.
+
+## Standalone .cgi files
+
+You can load standalone .cgi files, by supplying the path to the .cgi
+file in question.
+
+Be careful however, we will use eval() to load that code.
+
+Usage example for this:
+
+    load_cgi('bla.cgi')
+
+  or the alias:
+
+    run_cgi 'bla.cgi'
+
+## Support for markdown
+
+You can use markdown formatting via the method **markdown()**.
+
+
+Example how to use markdown:
+
+    markdown(i = '/home/x/data/PC/MARKDOWN/example.md')
+
+## Tables with alternate backgrounds
+
+You can use **tables with alternate background** such as by doing 
+the following:
+
+    Table.alternate_backgrounds(%w( one two three four ))
+
+The following partial screenshot shows how this may look like,
+via an additional black border, to indicate where the table
+begins and starts:
+
+<img src="https://i.imgur.com/DeASwyg.png" style="margin-left: 2em">
+
+The two classes are currently (**September 2021**) called
+**dark_background** and **light_background**, respectively.
+Never mind the name - if you want to style them differently
+then simply modify these classes in your web-page. Right
+now this is not trivial if you re-use the distributed .css
+files; at another moment in time the API may be changed to
+allow you to re-define the CSS class as-is.
+          
+## Input fields with a different background colour
+
+You can use input fields with a different background colour upon
+a mouse-focus event.
+
+Examples for this would be: 
+
+    input :text, 'Hello world!', :focus_with_salmon_background
+    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
+
+## Editing content on a webpage
+
+You can make some content editable. This currently (**March 2017**)
+only works for the e() tag, which creates a span-tag.
+
+The command for this is:
+
+    { :editable }
+
+To do this, try: 
+
+    p {
+      e('This text should now be editable.') { :editable }
+    }
+
+## Specify javascript files
+
+You can specify a specific javascript file via:
+    
+    w.javascript_file = '../../CODE/JS/FADER.js'
+    w.javascript_file = :fader
+  
+As you can see, both a string version giving the full path, and a
+Symbol shortcut, will work - provided that the Symbol was registered.
+
+I recommend to use the Symbol version for two reasons: first, it is
+less to type. Second, it is trivial to change the path lateron.
+
+## Configuration
+
+All meaningful options that can be configured, can be configured
+via a yaml file. Settings such as the global font size and so on.
+
+This is stored in the file **cyberweb_configuration.yml**.
+
+## Do simple counting via list()
+
+Do simple counting via list().
+
+    list "one"
+    list "two"
+    list "three"
+
+To reset it again, do:
+
+    clear_list
+
+or:
+
+    reset_listing
+
+To use a specific CSS style for these listings, do something like:
+
+    Cyberweb.listing_css = '<b class="red">'
+
+## Link in pages via link()
+
+You can link in other pages via the method link().
+
+This method also accepts '*', in which case we will
+try to use Dir.glob (or more accurately, Dir[])
+  
+Specific Usage Example:
+
+    link 'BIOCH*/BIOCHE*.cgi'
+
+## The licence of the Cyberweb project
+
+Since as of **May 2021** the cyberweb project is using the MIT licence.
+
+You can read the requirements for this licence here:
+
+https://opensource.org/licenses/MIT
+
+Before **May 2021**, cyberweb used the GPLv2 licence. The reason as
+to why the licence was changed was mostly because I consider the 
+cyberweb project to be not extremely "important" in regards to
+mandating that the GPL-specific restrictions should apply. I
+ultimately don't quite care about the licence in regards to the
+cyberweb project. If others find the project useful then this is
+fine. If they want to contribute code, that's fine - and if they
+don't want to, that's fine as well, as far as the cyberweb
+project is concerned.
+
+## Simple JavaScript Calculator
+
+Use:
+
+    add_simple_javascript_calculator
+
+You may need to style the input-tag a bit.
+
+See the following file for a working example:
+
+    cyberweb/examples/advanced/simple_calculator.cgi
+
+## Drag and drop support in general and drag-and-drop support via Dragula
+
+Via the new attribute **draggable="true"** it is possible to drag any
+element in HTML. An image can simply contain set this attribute. 
+
+The JavaScript library **Dragula** is used, aside from jquery,
+for drag-and-drop support.
+
+If you wish to make use of it, keep the dragula-related
+entry set to true in the file <b>project_configuration.yml</b>.
+
+Example:
+ 
+    use_dragula: true
+
+Keep in mind that the ID for a HTML tag has to have a certain format.
+For instance, using a '.' dot is not allowed as part of an ID; this
+is why cyberweb will automatically replace this via a '_' character
+instead.
+
+## Sinatra interface
+
+The Cyberweb project is **a toolset project**, so there is also a class
+called **Cyberweb::Sinatra**. This can be used to quickly write a
+subclass for use as a web-page, based on sinatra.
+
+To use this in your own code, do subclass from it such as via this
+variant:
+
+    require 'cyberweb/requires/require_sinatra.rb'
+
+    class Foo < Cyberweb::Sinatra
+
+**@root_string** will carry the content (aka the **index**) of the main
+**/** route by default. A few other projects make use of class
+Cyberweb::Sinatra, such as the studium gem or the
+beautiful_url gem - see files such as
+**studium/lib/studium/www/sinatra_main_entry.rb**
+or
+**beautiful_url/lib/beautiful_url/www/app.rb**.
+
+Since as of **June 2021** I am changing the old approach in regards to
+**.cgi** files. While I will retain support for .cgi files, I am
+also exploring offering the very same content via sinatra for some
+of the files - at the least in the roebe project, as a test-project
+for now. My idea here is that the Cyberweb project can already
+handle all HTML, CSS or JavaScript-related part that I may need.
+On Windows, using .cgi is somewhat annoying (but possible - I use
+lighttpd for this), whereas using sinatra is a lot simpler. So my
+idea is that I will slowly add and extend support for both .cgi and
+sinatra, and re-purpose the cyberweb project to achieve this. This
+currently lacks documentation, but eventually I'll add more
+documentation in how to solve this.
+
+You can designate that Cyberweb::WebObject is serving a 
+sinatra application right now via the following method
+invocation:
+
+    is_a_sinatra_application
+
+And to query the state:
+
+    is_a_sinatra_application?
+
+If you use a file extension such as **.sinatra** then this is
+automatically done. In fact that was the reason why I added
+this functionality in June 2021. The idea in the long run 
+is to be able to do sinatra-specific calls that enable or
+disable certain things, in particular in regards to images,
+and have images work properly at the least on my home
+setup.
+  
+## JQuery
+
+The Cyberweb framework/toolset favours the use of jquery. Presently,
+since **May 2021**, the version that is to be used by default will be
+for jquery <b>3.6.0</b>. This may change at a later time.
+
+In the event that it is changed and the documentation here is not
+updated, you can always rely on the following method call to yield
+the correct version of jquery to be used:
+
+    Cyberweb.jquery_version?
+
+For example, the above method called would yield **3.6.0** in
+**May 2021**. Personally I always use the latest stable
+version of jquery.
+
+You can also query the jquery-ui version in use, via:
+
+    Cyberweb.jquery_ui_version?
+
+Again, this also has to be synced manually, via the
+.yml file called **project_configuration.yml**.
+
+Since as of **May 2021**, the cyberweb will also bundle this
+corresponding version of jquery and jquery-ui into the 
+**javascript_code/jquery/** subdirectory of the gem. This
+is solely done to simplify the use of jquery so that, for
+example, dragging an object becomes simpler and available
+by default, even if access to the www is unavailable at
+the current time.
+
+You can also call this method on a **Cyberweb::WebObject**
+instance via the following method:
+
+    report_the_jquery_version_in_use
+
+Both jquery-ui and jquery use the same licence as the Cyberweb
+project (MIT licence). See also this wikipedia entry if
+you want to read more about jquery and its history:
+
+https://en.wikipedia.org/wiki/JQuery
+
+To make a container **resizable** via the mouse, by using
+jquery, try this method:
+
+    jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
+
+As **id** you simply pass in the id of the HTML element at hand.
+In this case, the symbol called :resizable_via_the_mouse.
+
+See also the file **JQUERY.md** for a more thorough reference.
+
+Note that in **May 2021**, support for jquery is actually mildly
+deprecated. This is not set in stone and it does not mean that
+jquery support will be removed, as far as the cyberweb project
+is concerned; it is more that I want to see whether we have
+better or simpler alternatives, without being tied into jquery
+too closely.
+
+The basic syntax for jquery, in javascript, goes like this:
+
+    $(selector).action()
+
+The general rules for JQuery go along these lines, in JavaScript:
+
+    $(this).hide()    # hides the current element.
+    $("p").hide()     # hides all <p> elements.
+    $(".test").hide() # hides all elements with class="test".
+    $("#test").hide() # hides the element with id="test".
+
+## draggable_image() and the HTML draggable attribute
+
+HTML added the draggable global attribute. This can be
+either true or false. A value of true indicates that the
+element can be dragged.
+
+So, for example, in HTML:
+
+    <img src="cat.png" draggable="true">
+
+This should enable drag-support for that image.
+
+The default value is **auto**, which means that drag behaviour
+will default to the given browser behaviour. Only text
+selections, images, and links can be dragged by default. For
+other elements, the event ondragstart must be set for
+drag and drop to work.
+
+## in_dir_image()
+
+To quickly display an in-dir image, that is an image that resides
+within the current directory, you can try the following API:
+
+    in_dir_image 'foobar.png', 'marl3em bblack1'
+
+## Textarea in HTML
+
+You can make a textarea HTML tag readonly via readonly.
+
+Example for this:
+
+    <textarea readonly>
+    Foobar.
+    </textarea> 
+
+To prevent a textarea from being resized by the user, use a CSS rule such
+as:
+
+    textarea {
+      resize: none;
+    }
+
+## CSS first-line rule
+
+The **first-line** rule can be used to style the first line in a given
+HTML tag (the specified selector), such as the p (paragraph).
+
+Example:
+
+    p:first-line
+    {
+      color:#ff0000;
+      font-size: 30em;
+      font-variant:small-caps;
+    }
+
+The first line would then appear larger and in another colour.
+
+Several properties can be modified within the :first-line
+rule, such as **font properties**, **color properties**, 
+**background properties**, **word-spacing**, **letter-spacing**, 
+**text-decoration**, **vertical-align**, **text-transform**, 
+**line-height** or **clear**.
+
+## CSS text-transform properties
+
+The three main variants are:
+
+    div.a { text-transform: uppercase; }
+    div.b { text-transform: lowercase; }
+    div.c { text-transform: capitalize; }
+
+## CSS, text-shadow support and drop-shadow support
+
+If you want to have shadows added to a given text then the text-shadow
+CSS property may be useful. Be careful when using this, though, because
+it can make the text harder to read.
+
+Let's look at an example for the h1 HTML tag:
+
+    h1 {text-shadow:2px 2px #FF0000;}
+
+Syntax used here (and in general):
+
+    text-shadow: h-shadow, v-shadow, blur, color
+    text-shadow: 2px 5px tomato;
+
+Another example, for a CSS rule:
+
+    .red_text_shadow {
+      text-shadow: red 0 -2px;
+    }
+
+Strangely enough you can also re-arrange the arguments a litte:
+
+    /* colour | offset-x | offset-y | blur-radius */
+    text-shadow: #fc0 1px 0 10px;
+
+    /* offset-x | offset-y | blur-radius | colour */
+    text-shadow: 1px 1px 2px black; # This is my preferred style.
+
+I do not know why they went that route, but I recommend to just
+stick to one style, and avoid the other.
+
+Note that text-shadow is not the only way you can use to modify
+text. drop-shadow is another example.
+
+In CSS the rule would be like this:
+
+    drop-shadow(2px 4px 8px #585858);
+
+In cyberweb, you can use this API:
+
+    generate_drop_shadow :red, :default, 'drop_shadow_red'
+    div('drop_shadow_red') {
+      h3 'This part should show a drop-shadow effect - but in red'
+    }
+
+This would yield the following text (shown as image):
+
+    <img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
+
+## CSS letter-spacing property
+
+<b>letter-spacing</b> can be used to decrease or increase the 
+distance between texts within a given text.
+
+Example:
+
+    <div style="letter-spacing: 5px"><h2>Hello world!</div>
+
+## CSS and the border-spacing property for HTML tables
+
+You can style HTML tables via CSS, by making use of
+<b class="steelblue">border-spacing</b>.
+
+Example:
+
+    border-spacing: 20pt
+
+The values for border-spacing can be: <b>length|initial|inherit</b>.
+
+## IDs for use in HTML tags
+
+An ID may occur only once on a given webpage.
+
+## CSS text-decoration
+
+Via <b>text-decoration</b> you can modify text such as by 
+underlining it or line-through the text.
+
+Examples for this:
+
+    h1 {
+      text-decoration: overline;
+    }
+    h2 {
+      text-decoration: line-through;
+    }
+    h3 {
+      text-decoration: underline;
+    }
+    h4 {
+      text-decoration: underline overline;
+    }
+    h5 {
+      text-decoration: underline overline dotted red;
+    }
+    h6 {
+      text-decoration: underline overline wavy blue;
+    }
+
+As you can see from the last example, you can combine several
+values for the same modifier, e. g. both **underline** and
+**overline**.
+
+The allowed values for text-decoration are:
+
+    inherit
+    none
+    underline
+    overline
+    line-through
+    blink
+
+## HTML Frames
+
+HTML frames are rarely used nowadays. Syntax-wise they may be defined
+like this:
+
+    <frameset rows="100,*,60"> <frame ...></frameset>
+
+Two frames:
+
+    <frameset cols="200,*">'),'default'
+    <frame src="contents_of_frame1.html">
+    <frame src="contents_of_frame2.html">
+    </frameset>
+
+## HTML accesskeys
+
+You can use an accesskey in HTML like so:
+
+    <input type="button" value="Button (accesskey is b)" accesskey="b">
+    <button accesskey="f">Foobar</button>
+
+The attribute <b>accesskey</b> is allowed in the following tags:
+
+    input
+    textarea
+    label
+    legend und button
+
+## CSS ::before and CSS ::after
+
+Via <b>:before</b> it is possible to insert elements before another
+element. Even graphics can be inserted.
+
+Let's look at a simple example:
+
+    p::before {
+      content: "Read this: ";
+    }
+
+As you can see, the text that should be inserted comes after the
+**content:** part.
+
+This can also be used to play audio files:
+
+    h1::before {
+      content: url(beep.wav)
+    }
+
+Now a slightly more convoluted example:
+
+    h2::before {
+      content: "";
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: hotpink;
+      displEvolution_of_Metabolic_Pathways-2000.pdfay: inline-block;
+      vertical-align: middle;
+      margin-right: 10px;
+    }
+
+To make use of an image, you can use something like:
+
+    img:before {
+      content:url(https://example.com/image.png);
+    }
+
+CSS2 used the **:before** notation, but this was changed to **:before**
+in CSS3. I was a bit surprised to see ::before, because I used to
+use :before only.
+
+The same exists for appending text, called ::after.
+
+Example:
+
+    p::after {
+      content: "»";
+      color: red;
+    }
+
+## CSS input autofocus
+
+You can modify <input> elements by setting the focus onto 
+them the moment a page loads.
+
+Example:
+
+    <form action="/action_page.php">
+      <label for="fname">First name:</label>
+      <input type="text" id="fname" name="fname" autofocus><br>
+      <label for="lname">Last name:</label>
+      <input type="text" id="lname" name="lname"><br><br>
+      <input type="submit">
+    </form> 
+
+This is a bit similar to ruby-gtk3, e. g. .do_focus or .set_focus(true). 
+
+## CSS grouping and CSS selectors
+
+CSS selectors, such as the typeselector, can be used to refer to
+specific HTML tags. This can be used to style these HTML tags
+via CSS rules.
+
+The following example shows how to use a margin of 10 pixels for
+each p tag:
+
+    p { margin: 10 px; }
+
+This is fairly convenient and elegant. It is also quite flexible
+in that you can group several selectors together, and apply
+the same CSS rules to each element listed therein.
+
+You have to use a ',' as separator between the individual elements 
+in order for this to work.
+
+An example for this follows:
+
+   h1,h2,h3,h4,h5,h6 
+   {
+     color: green;
+   }
+
+Now all **HTML headers** (h1 up to h6) will be displayed in 
+a green colour.
+
+This can be extended for particular tags that occur as part
+of other tags as well.
+
+For example, in order to colourize all h2 headers that occur
+within the ID called #nav, use the following:
+
+    #nav h2 {
+      color: tomato;
+    }
+
+In plain HTML this would be used via code like this:
+
+    <div id="nav">
+      <h2>Hello world!</h2>
+    </div>
+
+This allows you to use conditional rules in CSS. Don't forget
+to use the correct ID; in this case #nav.
+
+## CSS box-shadow effects
+
+How does <b>box-shadow</b> work in CSS?
+
+The general syntax may look like this:
+
+    div {
+      box-shadow: 10px 10px 5px #888888;
+    }
+    div('Black','box_shadow_one'){
+      h3 'Hier die obige Box'
+    }
+  
+See also: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
+
+The allowed values to box-shadow are:
+
+    box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
+
+<b>h-shadow</b> refers to a <b>horizontal shadow</b>, whereas
+<b>v-shadow</b> refers to a <b>vertical shadow</b>.
+
+A <b>box-shadow Generator</b> can be used as shown on the following
+webpage:
+
+http://www.cssmatic.com/box-shadow
+
+## Add a .js file, as-is
+
+The following API can be used to ad-hoc add a .js javascript file:
+
+    link_in_javascript 'app.js'
+
+## CSS Cursors
+
+To use a different cursor, set a CSS style rule such as:
+
+    cursor: pointer;
+    cursor: auto;
+
+Alternatively use a defined CSS class such as:
+
+    .crosshair { cursor: crosshair; }
+
+And then in HTML:
+
+    <p class="crosshair">crosshair</p>
+
+Valid cursors include:
+
+    auto
+    crosshair
+    default
+    e-resize
+    grab
+    help
+    move
+    n-resize
+    ne-resize
+    nw-resize
+    pointer
+    progress
+    s-resize
+    se-resize
+    sw-resize
+    text
+    w-resize
+    wait
+    not-allowed
+    no-drop
+
+## Removing child elements in JavaScript
+
+An element can be removed via JavaScript by issueing:
+
+    this.parentNode.removeChild(this)
+
+## Default parameters to functions in JavaScript
+
+You can use default values to functions in JavaScript.
+
+Example:
+
+    function multiply(a, b = 1) {
+      return a * b;
+    }
+
+    console.log(multiply(5, 2));
+    console.log(multiply(5));
+
+Alternatively you could also use || inside of the function
+body, to simulate default values.
+
+It may then look like this inside of a function:
+
+    bar = bar || "Default Value";
+
+## Using language-specific files as content of a webpage
+
+The typical way how I describe the main content of a web-page
+is via:
+
+    doc {
+    }
+
+This **doc** refers to document and is ultimately just a <div>
+tag. So I put my web-applications into a big <div> tag
+ultimately.
+
+Since late 2020 I am also using language variants such as:
+
+    english {
+    }
+    # or
+    german {
+    }
+
+To denote a webpage in german, or in english. Not as 
+replacement for doc {}, but as the start point in
+general.
+
+In June 2021 this was extended in that I added the method
+called:
+
+    doc_skeleton
+
+The word <b>skeleton</b> refers to a separate file, the
+skeleton of the web-application.
+
+Say that you have five called index.rb, index.cgi,
+index.sinatra, index_english.md and index.german.md.
+
+This allows us to read in either the english or the german
+language.
+
+To let the cyberweb project guess on its own, consider
+using a variant via the following Symbol:
+
+    doc_skeleton(:english_or_german)
+
+This currently defaults to german. You can pass ?use_english
+or ?english to the .cgi page to overrule this and force
+the web-application to view the english content instead.
+
+In order for this to work, the corresponding .md file must
+exist, e. g. **index_english.md** or **index_german.md**.
+
+Note that this is currently (June 2021) quite experimental,
+but I wanted to add the feature that we can offer different
+languages. In the long run I may adapt this approach, to
+make it easier to use different languages on any given 
+weba-application, but for now I only use this in the
+**roebe** gem. For example, luft.cfg under **roebe/www/luft/**
+will show this. It may not work on your home system,
+though, as it is catered to my home setup. But it shows
+how this could be done in theory. So, who knows - in the
+long run I may integrate this as a 'default' feature.
+
+Note that **?use_german** will work as well, to force
+the **_german.md** file to be read.
+
+## Obtaining user input in JavaScript
+
+The following code example shows how to obtain user input via JavScript:
+
+    var x, y;
+    x = prompt("Gib mal eine Zahl ein","")
+    y = prompt("Gib mir noch eine Zahl","")
+    alert(Number(x)+Number(y)
+
+So the primary way to obtain user through JavaScript goes via
+<b>window.prompt</b>. The second argument to that method 
+specifies the default value of the input-field.
+
+## CSS border-style property
+
+CSS gives you the possibility to style borders via different properties,
+through **border-style**.
+
+Let's showcase some examples for this:
+
+    p.solid  { border-style: solid;}
+    p.dotted { border-style: dotted;}
+    p.dashed { border-style: dashed;}
+    p.double { border-style: double;}
+    p.groove { border-style: groove;}
+    p.ridge  { border-style: ridge;}
+    p.inset  { border-style: inset;}
+    p.outset { border-style: outset;}
+    p.none   { border-style: none;}
+    p.hidden { border-style: hidden;}
+    p.mix    { border-style: dotted dashed solid double;}
+
+Personally I like **solid** the most, followed by **dotted**, then **dashed**.
+
+The other properties may be useful in some cases, e. g. when you
+wish to indicate some button-like element - but visually, I think
+the first three styles are by far the most appealing ones.
+
+## CSS first-letter
+
+CSS allows us to modify the first-letter in, for example, a 
+HTML paragraph. This is enabled via the so-called 
+**:first-letter selector**.
+
+In CSS rule this will look like this:
+
+    .fl:first-letter { font-size: 120%; }
+
+The ':' is the important identifier.
+
+Some time ago this was modified though. It is now required
+to use two ':' rather than one.
+
+Example:
+
+    p::first-letter {
+      font-size: 150%;
+      color: steelblue;
+    }
+
+Take note that this is limited to block-level elements, so
+by default the span tag is unable to make use of this, unless
+it is turned into a block-level element as well.
+
+## CSS and Hovering
+
+CSS allows us to make use of
+<b style="color: gold; padding: 3px; background-color:black">:hover</b> 
+in order to have certain effects happen when the mouse cursor
+hovers over an element.
+
+The general API respectively syntax for <b>CSS hover</b>
+goes like this:
+
+    .NAME_OF_ELEMENT:hover { background: COLOUR_HERE; }
+
+    .NAME_OF_ELEMENT:hover { background: COLOUR_HERE; }
+    .test:hover { background: green; }
+    .button:hover {opacity: 1;}
+
+To then test this via cyberweb:
+
+    p('hover_test2 mart1px','') {
+      ee sg(:pfeil_rechts,'marl1em marr6px')+
+         'Hier drüberfahren'
+    }
+
+To make all HTML links, aka the **a** tag, change the colour
+when the mouse hovers over them, the following CSS
+rule should work just fine:
+
+    a:hover {
+      background-color: yellow;
+    }
+
+You can style several tags in one go, via:
+
+    p:hover, h1:hover, a:hover {
+      background-color: lightblue;
+    }
+
+This also works inline.
+
+## Shortcomings of JavaScript
+
+This subsection lists some shortcomings of JavaScript. This may be
+subject to change, as JavaScript changes as well. It is not a rant
+as such either - the focus will be on syntax.
+
+- You can not use inline JavaScript if it contains the end
+part </script>, such as:
+
+    <script>
+    function foobar() {
+      console.log("</script>");
+    }
+    </script>
+
+## Including external .css files
+
+The syntax for adding external (standalone) .css files is as shown in
+the following examples:
+
+    <link rel="stylesheet" type="text/css" href="name_of_the_css_file_goes_in_here.css">
+    <link rel="stylesheet" type="text/css" href="base.css">
+
+## Embeddable Interfaces
+
+Since as of June 2021 I am experimenting with **embeddable interfaces**
+in regards to web-related components - most importantly sinatra.
+
+The basic idea here is that we can easily make available additional
+routes for other applications. Let's explain this by using an
+example.
+
+The PdfParadise project defines a route such as **/view**. This
+entry will become **/pdf/view** if I want to use it within the
+Roebe::Controller - my master-class for controlling all the
+various web-APIs that I use locally.
+
+To enable this functionality, I decided to settle for a module
+name called **EmbeddableInterface**. I am trying to use this
+consistently for my own projects. Different details may change,
+but ultimately this should be used when I want to extend
+functionality of the core controller.
+
+This module then typically looks like this:
+
+    module EmbeddableInterface # === Wetter::EmbeddableInterface
+
+      begin
+        require 'html_tags'
+        include HtmlTags::BaseModule
+      rescue LoadError; end
+
+      begin
+        require 'cyberweb/sinatra/custom_extensions.rb'
+        include Cyberweb::Sinatra::CustomExtensions
+      rescue LoadError; end
+
+      # Some methods defined next
+
+    end
+    def self.embeddable_interface
+      object = Object.new
+      object.extend(Wetter::EmbeddableInterface)
+      return object
+    end
+
+That's the skeleton for it right now, roughly.
+
+In the future this may be simplified, but for now this is
+the way it is.
+
+You can use the following toplevel method for merging new routes into
+an application; again, for the time being, this is a bit hackish. It
+may take a while before this becomes officially endorsed.
+
+The API is:
+
+    Cyberweb::Sinatra::CustomExtensions.merge_interface
+
+Arguments should be:
+
+    Cyberweb::Sinatra::CustomExtensions.merge_interface(
+      i, # Should be an Array of routes that are to be used.
+      prepend_this_to_the_route = '/',
+      namespace_to_use # For example, PdfParadise or Repackage.
+    )
+
+Some methods are assumed to exist within module EmbeddableInterface.
+This may be subject to change in the future, but for now simply
+look at the **repackage gem** to find out how this is done. 
+Documentation is missing in this regard, but will be added over
+the next weeks slowly.
+
+## JavaScript variables
+
+The variables in JavaScript are by default global. You can make
+them local if you attach the **var** keyword to them.
+
+You can also define several variables in one go, via:
+
+    var message = "hi",
+    found = false,
+    age = 29;
+
+The keyword **let** has the lowest scope, even less than when
+compared to **var**.
+
+## Including CSS into a webpage
+
+If you want to include CSS into a webpage, use the following HTML tag:
+
+    <style type="text/css"></style>
+
+## Including external .js files into a HTML (web)page
+
+The syntax for adding standalone .js files goes like this:
+
+    <script type="text/javascript" src="path/to/javascript/file.js"></script>
+
+    # or simpler:
+
+    <script src="path/to/javascript/file.js"></script>
+
+## CSS comments
+
+If you want to use comments in a CSS file, use something like this:
+
+    /* This is a CSS comment. */
+
+## JavaScript comments
+
+The simplest way to use comments in JavaScript, in my opinion, is
+via:
+
+    /* This is a comment */
+
+## JavaScript loops
+
+To do a loop in "modern" JavaScript, try:
+
+    for (let i = 0; i < 5; ++i) {
+      /* do stuff here */
+    }
+
+The index variable **i** will remain completely local to the
+block, and not appear outside of it.
+
+## CSS font-face property (in CSS3)
+
+Via the <b>@font-face</b> property it is possible to make use of
+different (custom) fonts. This font can be loaded from
+a remote server, or it can be provided on the local system,
+thus a locally installed font on the user's computer.
+
+An URL should be given as argument.
+
+The syntax rules for this goes as follows:
+
+    (1) first give the name of the font
+    (2) provide the path to the font
+
+If you then wish to make use of that font you can declare
+this in CSS.
+
+An example for this follows:
+
+    @font-face {
+      font-family: myFirstFont;
+      src: url("sansation_light.woff"); # Here you can provide the URL
+    }
+
+Another example:
+
+    @font-face {
+      font-family: "Open Sans";
+      src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+           url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+    }
+
+## Lazy loading of images
+
+You can use **loading=lazy** to defer the loading of that image
+until the user scrolls to the image.
+
+Example in HTML:
+
+    <img src='foobar.jpg' loading='lazy' alt='Alternative Text'>
+
+## JavaScript for-in and for-of loops:
+
+Just examples for each:
+
+    for (const key in {a: 1, b: 2}) {
+      console.log(key);
+    }
+    // a, b
+
+    for (const value of [1,2,3,4,5]) {
+      console.log(value);
+    }
+    // 1, 2, 3, 4, 5
+
+## Data Types in JavaScript (ECMAScript)
+
+There are six simple data types:
+
+    Undefined
+    Null
+    Boolean
+    Number
+    String
+    Symbol
+
+## How to use the typeof() operator in JavaScript
+
+The typeof operator is called like this:
+
+    let x = "some string";
+    typeof(x)  # "string"
+    typeof(95) # "number"
+
+Note that the () for typeof() could be omitted, as typeof is
+an operator and not a function - but it seems simpler to use
+the () just as it is used for other functions in JavaScript
+as well.
+
+## Use image-checkbox (on and off)
+
+Examples:
+
+    show_image_checkbox :on, 'posab','top:10em;right:18%'
+    show_image_checkbox :off, 'posab','top:10em;right:18%'
+
+## CSS zoom-on-hover effect
+
+This can be done like this:
+
+    .images {
+      display: flex;
+      width: 100vw;
+      juftify-content: center;
+      align-items: center;
+    }
+
+    img {
+      width: 400px;
+    }
+
+    img:hover {
+      transform: scale(1.3);
+    }
+
+The important part is the **transform: scale** specification.
+
+I typically put this into a special CSS class such as:
+
+    .enlarge_this_image_on_hover:hover {
+      transform: scale(1.1);
+    }
+
+## Valid values for CSS font-size:
+
+    xx-small
+    x-small
+    small
+    smaller
+    medium
+    large
+    x-large
+    xx-large
+    larger
+
+## Useful quotes when designing websites and web-apps
+ 
+"When you are creating a website, the primary goal as a designer
+should be to get rid of the question marks users have when 
+visiting that site."
+
+"The most important thing a designer can do is to understand
+the basic principle of eliminating question marks that a user
+has when visiting a website. Keep things simple."
+
+"If you can not make something self-evident, you should at the
+least make it self-explanatory."
+
+"If a web page is going to be effective, it has to work most
+of its beautiful magic at a single glance."
+
+"The average visitor rarely spends much time reading all 
+content on a given web page, so focus on designing fewer
+elements that can be easily navigated, without too much
+distracting clutter."
+
+"If your design forces a visitor to incur a small learning 
+curve, make sure that the added value from this design 
+change leads to it being worth that additional learning 
+curve."
+
+"Clarity trumps consistency."
+
+"Each webpage should have a clear visual hierarchy."
+
+"Components in a webpage that are related logically
+should also be related visually."
+
+"In order to make a website 'scan-friendly', make good use of
+headings having a larger font size. The headings should 
+indicate what a subsection is about."
+
+"When using a heading, make them visually somewhat closer
+to the section they belong to, rather than equally spaced
+to the preceding paragraph."
+
+"If you need the visitor to make a difficult choice, provide as
+much guidance as necessary - but not more. Be succinct here
+and provide only the smallest amount of information that
+will help the user."
+
+"Omit needless words. Vigorous writing is concise."
+
+"Try to make everything on a web-site self-explanatory or as
+close to it as possible."
+
+"Navigation should ideally remain clear, simple, and consistent."
+
+"It may be useful to consider using an identifier, such as a logo
+or an image, for the website, and display this e. g. on the
+upper left corner. This may help visitors identify where they
+are, in particular if they tend to use several tabs in their
+browser."
+
+"If your website makes use of a menu-bar or navigation-bar, 
+consider highlighting the current location that the user
+has or uses on that website."
+
+"Ideally a website should convey the big picture, and make it
+clear what the site is about."
+
+"If possible consider to use visual identifiers on the
+whole web-application at hand, to give visitors the
+right idea about this being a cohesive and integrated
+unit."
+
+"Changing a website at a later time is not necessarily trivial.
+Some percentage of users that have grown accustomed to a 
+layout will resist almost any kind of change, and even
+apparently simple changes often turn out to have
+far-reaching effects."
+
+"Focus ruthlessly on fixing the most serious problems first."
+
+## Cyberweb::Header
+
+Examples:
+
+    Cyberweb::Header.size = 'h3' # Set to a smaller header.
+    Cyberweb::Header.reset
+
+Not sure if this is still necessary in 2021; at a later time
+it will be decided whether to keep this or not. If it is kept
+then this subsection will be expanded.
+
+## Working with HTML form elements
+
+Within a HTML form tag, the following tags are valid or have a
+special meaning:
+
+    button
+    input
+    select
+    textarea
+
+## CSS ::before rule
+
+You can add content via CSS like this:
+
+    .some_class::before {
+      content: "Only today offer ";
+      font-size: larger; 
+      color: red; 
+    }
+
+    <p class="some_class">Wood only € 4.95</p>
+
+I don't think this is too overly useful when you can dynamically
+generate the web-app as-is, though.
+
+## Cyberweb::HtmlTemplate
+
+class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
+specific content. More documentation will be added here eventually;
+for now, let's just show a simple example how I tend to use this
+class:
+
+    Cyberweb::HtmlTemplate[
+      title: 'Status',
+      body:  '<pre style="font-size:150%">'+
+             ::EnvironmentInformation.return_the_most_important_info+
+               '</pre>'
+    ].to_s
+
+It is possible since as of 18.06.2021 to pass CSS classes into this,
+via:
+
+    css_classes:
+
+For example, passing 'darkblue' to that key means that the CSS
+class 'darkblue' will be available, which ultimately comes down
+to <b>color: darkblue</b>.
+
+I needed this functionality to pull in only the CSS classes that
+I use on a particular page generated by class Cyberweb::HtmlTemplate.
+
+Various additional entries are available. For example, if
+you want to modify the css-style in use for the body tag
+then you can use the following variant:
+
+    body_css_style: 'background-color:#DFD1FF'
+
+In the long run the goal is to extend class HtmlTemplate in
+such a way that all html-generation used within the Cyberweb
+project can be handled by it.
+
+## Embed youtube videos and videos in general
+
+You can embed youtube videos, thanks to the MultimediaParadise
+project, by issuing this:
+  
+    youtube_embedder 'https://www.youtube.com/watch?v=7L6uEstbd9Y',250
+  
+The second argument tells us the width to use for this video.
+
+More generally, to embed videos in HTML5, you can use code like this:
+
+    <video controls width="250">
+        <source src="/media/cc0-videos/flower.webm" type="video/webm">
+        <source src="/media/cc0-videos/flower.mp4"  type="video/mp4">
+    </video>
+
+## How to work with form-elements
+
+This subsection was added because I tend to forget how to work with
+&lt;form> elements in **HTML**.
+
+**HTML** allows us to make use of &lt;form> elements.
+
+Any such &lt;form> element is typically associated with an action,
+which is determined via **action=""**.
+  
+This may look like this:
+
+    <form action="/foobar.php">
+    </form>
+
+The attribute **action** determines the recipient, that is,
+the one who will receive the transmitted data from the 
+&lt;form> element. In the example above, the file called
+**foobar.php**.
+
+The attribute <b>method</b> determines **how** the data will
+be transmitted. If omitted then the <b>default</b> is
+**get**.
+
+You can also send this to an email, such as via this:
+
+    <form action="mailto:foo@bar.org" method="post" enctype="text/plain">
+
+Within any such given element, we can use &lt;input>, as in:
+
+    &lt;input type="text" id="first_name" name="first_name"> 
+
+To use a web-form via **cyberweb**, try:
+
+    form('SELF', :post, 'mars2em') {
+    }
+
+## simple_table2
+
+Since as of **24 Aug 2011** we can also use the method
+**simple_table2()** which is stored in the file
+html_tables.rb.
+
+Example for this:
+
+    simple_table2(ARRAY_ALL_LINKS)
+  
+This will simple make a 2 data-cell table, and accepts an Array
+as its input. Very easy way to make tables!
+
+## Sitemaps
+
+A sitemap is a navigational tool, displaying to the user which links
+may exist on a given webpage.
+
+If you want to use a sitemap via the Cyberweb project, do something
+like this here:
+
+    sitemap :h4, 'Schnelles Abnehmen'
+    autogenerated_sitemap
+
+If you also want to autogenerate a sitemap, as-is, then you can
+use the following method:
+
+    header_for_sitemap 'This is some generic header.'
+
+## Generating standalone webpages (.html files)
+
+This subsection deals with the cyberweb project generating standalone
+.html files.
+
+First, the general method to create a HTML dump is via:
+
+    .to_html
+
+This is only possible on a WebObject instance. This alone will just
+return the HTML representation.
+
+To store it into a local file use this method:
+
+    .create_standalone_html_page
+
+This presently (**August 2021**) uses hardcoded file paths. In the
+future more flexibility will be added to the method, but for the
+time being it was only added to quickly do some ad-hoc testing.
+
+## Spinbuttons in HTML
+
+Use something like:
+
+    <input type="number" value="1" min="1" max="999">
+
+You may even style them via CSS like:
+
+    input[type=number]::-webkit-inner-spin-button {
+      opacity: 0.3
+    }
+
+## HTML-links
+
+Since as of **19.02.2020** (19th February 2020), the
+**cyberweb project** now uses the **HtmlTags project** for
+generating **a href hyperlinks** (HTML hyperlinks).
+
+While this led to some broken links on my home system, the code
+as well as the usage pattern for links is now more consistent,
+and simpler to use in the long run - I hope. Before that I used
+tons of different HTML-generating methods, all of which used
+different signatures. This was too confusing to maintain in
+the long run.
+
+The typical API for use of such a HTML link may look like this:
+
+    a 'https://www.manualslib.de/manual/123/Gerät_xyz.html',
+       content: 'Handbuch zum Gerät xyz',
+       css_class: 'mars2em'
+
+So essentially, you can describe the **HyperLink** as a **Hash**,
+where **content** is the content (the text you wish to display),
+**css_class** is the CSS class to use for that link, and so on
+and so forth.
+
+For the actual CSS code, I recommend to group the a-related
+tags together, such as via:
+
+    a:link, a:visited, a:active { color: #3366FF; text-decoration: none; }
+
+The hover-action should be styled separately:
+
+    a:hover { color: #006699; text-decoration: underline; }
+
+To globally style all HTML hyperlinks, you can use CSS style such as
+the following:
+
+    <style>
+    a {
+      color: steelblue;
+    }
+    </style>
+
+## The br-tag
+
+The br-tag can be used in HTML to add a linebreak.
+
+You can style the height of the line break via CSS such as:
+
+    br {
+      line-height: 30%;
+    }
+
+I needed this on a webpage to control the distance between
+individual HREF-links, and I did not want to use div-tags
+or p-tags as such. So using the <b>line-height</b> property
+was very useful.
+
+## Remote images versus local images
+
+I use various www-related projects, including local webpages.
+
+Some of these pages lateron became available for everyone,
+such as in the roebe gem, via the www/ subdirectory.
+
+However had, images are normally not distributed for these
+webpages - it would inflate the gem size way too much.
+
+This in turn means that a visitor does not see any image,
+when some of these images are important or helpful. This
+is not an ideal situation.
+
+So, in September 2021 I decided to add a new API, called:
+
+    drag_local_image_or_remote_image()
+    drag_local_image_or_remote_image('foo/bar.png')
+    drag_local_image_or_remote_image('foo/bar.png','www.some_page.com/yo/foo/bar.png')
+
+The idea here is to default to my local image, but to 
+provide a second argument as well, containing a remote URL
+to an image that can be used as a substitute, in the event
+that there is no local image available (such as when other
+users look at a webpage distributed in the roebe gem).
+
+I tested this in September 2021 and it works, so in the
+future I expect a few more images to be made available.
+But this is quite experimental as of now, and probably
+still not too hugely useful for other users. In the
+event you may have a need case to document such a web-page
+via images, you can modify these API calls and supply
+your own images.
+
+If you do not need drag-and-drop support then simply use:
+
+    local_image_or_remote_image()
+
+If **drag_local_image_or_remote_image()** is too long to type,
+use the alias called **dimg2**.
+
+## Objectified HTML Tags
+
+Objectified HTML tags are something like this:
+
+    puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there') # => "<span>hey there</span>"
+    puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
+
+In other words we may treat HTML tags as strings that can be
+embedded. The idea for this has been inspired by ruby-gtk,
+such as:
+
+    widget1.add(widget2)
+
+I needed to add a lot of OOP-centric methods to the cyberweb
+framework. Objectified HTML tags may solve this issue.
+
+As of now in September 2021 this is, however had, experimental.
+In due time it will be evaluated whether we could enable these
+tags for use in a unified code base in the future. Stay tuned.
+
+In late September 2021, the textarea-tag was added.
+
+Example:
+
+    textarea = Cyberweb::ObjectifiedHtmlTags::Textarea.new('content')
+    # You can also use this instead:
+    #   textarea = html_textarea
+    textarea.class = 'rounded_border_6px bblack1 FS2em pad8px'
+    textarea.id = 'ask_a_question'
+    textarea.name = 'ask_a_question'
+    textarea.rows = 6
+    textarea.cols = 90
+
+Again - this is all highly experimental, but in the long run all
+HTML tags will become objectified, as an additional option. You
+need to decide for yourself whether you want to use this or not;
+the one-line approach in regular HTML is probably shorter.
+
+The following table, alphabetically sorted, shows the currently
+(**September 2021**) available objectified HTML tags as part of
+the cyberweb project. More may be added in the future.
+
+Name of the HTML tag | Implementation Status    | True HTML tag
+---------------------|--------------------------|--------------
+  a                  |          added           |     yes
+  abb3               |          added           |     yes
+  button             |          added           |     yes
+  combobox           |          added           |     no
+  div                |          added           |     yes
+  embed              |          added           |     yes
+  form               |          added           |     yes
+  h1                 |          added           |     yes
+  h2                 |          added           |     yes
+  h3                 |          added           |     yes
+  h4                 |          added           |     yes
+  h5                 |          added           |     yes
+  h6                 |          added           |     yes
+  hbox               |          added           |     no
+  img                |          added           |     yes
+  p                  |          added           |     yes
+  pre                |          added           |     yes
+  span               |          added           |     yes
+  table              |          added           |     yes
+  textarea           |          added           |     yes
+  title              |          added           |     yes
+  window             |          added           |     no
+
+Note that some of the above, such as window, hbox or combobox, are
+not directly HTML tags. Nonetheless these were added, largely to
+improve compatibility with ruby-gtk3 and other toolkits that make
+use of a more object-centric nature in how to handle such entities.
+Some aliases may exist to "simulate" dealing with "real HTML tags".
+
+Table is a bit special in that you can feed it an array, and it
+will generate the proper <td> entries and <tr> entries - so it
+is a bit of a "meta"-tag in this regard.
+
+You can also do some ad-hoc trickery with this.
+
+Example:
+
+    _ = html_image('../../images/foobar.jpg')
+    _.css_class 'bblack3'
+    _.on_mouse_over {{
+
+      upscale: '+50%',
+      delay:   1.0 # in seconds
+
+    }}
+    e _
+
+This would embed the image called foobar.jpg into the current
+website, and add an upscale effect of +50% when the mouse hovers
+over it.
+
+This is not yet ideal; I am experimenting. But in the long run
+I want to try to combine an OOP approach for the www with the
+old variant that cyberweb used in the last 15 years. It is a 
+bit too verbose for my taste still, but eventually I should
+have ironed this out. 
+  
+## Useful Links
+
+This subsection just keeps a few useful resources. This may
+become obsolete over time, so don't expect all links to 
+work or be very useful. It's just a random collection
+really, last updated in **May 2021**.
+
+https://catswhocode.com/css-tricks/
+https://validator.w3.org/
+https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten
+https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
+https://meiert.com/en/indices/css-properties/
+https://webdesignerwall.com/tutorials/advanced-css-menu
+http://www.ericmeyeroncss.com/projects/01/
+http://www.selfhtml5.org/html5-tag-systematik/
+https://hyperstack.org/
+
+HTML Tutorial (HTML for beginners): https://html.com/
+
+Self-HTML: https://selfhtml.org/
+
+Fancy Scrollbars: http://www.n-son.com/scripts/jsScrolling/example2.html
+
+For a quick list (a table) of available HTML tags, you may want to visit:
+
+https://way2tutorial.com/html/tag/index.php
+
+(Obviously there are many other resources available in this regard.
+I only wanted to list one, so the above link is somewhat random.)
+
+ADD_CONTACT_INFORMATION