cyberweb 0.7.9 → 0.8.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4252b07a6abec2328f6e7d3a71050c0f9a06face83316816f5a57c579a85a886
-  data.tar.gz: 956c7467e2e14c3109ae924edf8b0aaa34cf0991e2566892c744452b895db870
+  metadata.gz: 5b459c51f52729d3f1d19e917be17b6cf37b06fbcbe8c62c1a005c31329afe6f
+  data.tar.gz: db63e41b27cca6d25cf35fbd9417cfde6ef2313308e7cc56fee1784cb9557b2f
 SHA512:
-  metadata.gz: 0eae328a1dda370eeb858d0b21f3ef7e8872d805fbd0cce1a3095d24e8cb02b1b1e1cffafceb7920d88dec9b752d7396b4e7a33f8ab88e13b92437bae8a816de
-  data.tar.gz: 0b0f0e74482310f80c18f9e961d8c8677263ef4bddba123915809722f1a8d3e84bd4c72e6ad7bc632fc1115a1dc5de7dc829de095baa4d05e0ec1b46495fe66f
+  metadata.gz: a69c30c551b685608b53609fc9f0c83cc70cf16c3a2d4a44db708cc09e49842d8d72be18aba96636691169d94ee40c0d202f519e7e6ae07393ebb0058edaed21
+  data.tar.gz: bdd7ec2c16b04ffdd27521676176e7b6fe593a5ac94dcba84a05332e6b1bb1a56d54040b6f20735773ada8f8afa9210f3a4e8a14619e98d69a67e62bd8487c73

data/README.md

@@ -2,7 +2,7 @@
 [![forthebadge](https://forthebadge.com/images/badges/made-with-ruby.svg)](https://www.ruby-lang.org/en/)
 [![Gem Version](https://badge.fury.io/rb/cyberweb.svg)](https://badge.fury.io/rb/cyberweb)
 
-This gem was <b>last updated</b> on the <span style="color: darkblue; font-weight: bold">28.11.2022</span> (dd.mm.yyyy notation), at <span style="color: steelblue; font-weight: bold">13:02:00</span> o'clock.
+This gem was <b>last updated</b> on the <span style="color: darkblue; font-weight: bold">26.01.2023</span> (dd.mm.yyyy notation), at <span style="color: steelblue; font-weight: bold">00:01:32</span> o'clock.
 
 <img src="https://i.imgur.com/aC4YzSk.png" style="margin-left: 1.2em">
 
@@ -39,7 +39,7 @@ In PHP this is not easily possible, because the syntax is more rigid.
 Thus, at the least in regards to the syntax, ruby is better than 
 PHP - more flexibility syntax-wise is available to ruby users than
 is for PHP users. This flexibility helps a <b>lot</b> when writing
-more dynamic, and more succint, code.
+more dynamic, and more succinct, code.
 
 During that **transition phase**, from **php** to **ruby**, the cyberweb
 project was renamed several times as well - first to **web_foundation**,
@@ -886,6 +886,33 @@ useful for short header-entries, such as "Goals" or
 functionality purely exists due to convenience - I wanted
 to quickly generate the default id entry for a sitemap. 
 
+Note that at the least h2_id() has been improved a bit,
+directly and indirectly, in <b>January 2023</b>.
+
+Specifically the following is now valid:
+
+    h2_id('Stickstofffixierung - eine symbiotische Beziehung, als '\
+          'Teil des Stickstoffkreislaufs') { :clickable_image }
+
+So, what does this do?
+
+First, as normal, it will "autogenerate" the corresponding
+ID entry, via the newly created method .sanitize_this_id().
+I intend to re-use this method for all other parts of the
+cyberweb gem that require autogeneration of valid ID tags.
+
+But, even more importantly than that, the block and the
+Symbol called :clickable_image, will now add an image
+(a small dot) to the left side of this header. This image
+is clickable by the user. If the user clicks on that dot,
+he/she will be re-directed to that specific header as
+intralink. In other words: this functionality allows us
+to "tag" any paragraph as intralink, by clicking on it.
+
+I needed this functionality for many different local
+websites, so I thought it was more useful if it is made
+a proper method as-is.
+
 ## Redirecting to another page
 
 You can combine BeautifulUrl, and Cyberweb, to redirect
@@ -1899,18 +1926,6 @@ 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
@@ -2674,20 +2689,6 @@ 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:
@@ -3730,23 +3731,6 @@ image at hand if you want it to "lose" colours (for display
 purposes only; of course nothing is lost in the image as 
 such, only the display of said image is modified via CSS).
 
-## The progress bar in HTML5
-
-You can use a progressbar to indicate progress based on
-percentage values. This is described here in detail:
-
-https://css-tricks.com/html5-progress-element/
-
-In cyberweb you can use:
-
-    progress
-    progress('35 / 100') # 35%
-
-At a later time we may add some javascript to indicate
-a counter-progress. Right now (as of February 2022)
-this is not possible though, so this part has to come
-at a later time.
-
 ## Converting from a .html page to a cyberweb-object
 
 The file **bin/html_to_cyberweb_converter** can be used
@@ -3891,90 +3875,6 @@ of boilerplate code, which I think is useful in its own right.
 Future changes may even simplify this further, but for now 
 <b>let's keep it simple</b>.
 
-## Working with HTML forms, including creating input-buttons in such a 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>
-
-You can style &lsaquo;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
-
-View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
-to see this work in action.
-
-You can modify the &lsaquo;input> tag within that via css by using:
-
-    input.view_css {}
-
-Note that &lsaquo;input type="text"> only works for a single line of
-user input. If you would like to have the user work via multiple
-lines then you have to use the &lsaquo;textarea> tag instead.
-There may be work-arounds, such as giving the text-input the
-<b>word-break: break-word;</b> attribute, but this may not work
-on every browser.
-
-Some shortcuts exist within the Cyberweb project. For instance,
-rather than do:
-
-    input :checkbox
-
-You can do:
-
-    input_checkbox
-
-Same with submit and other variants:
-
-    input_submit
-    input_radio
-
-This may not be a huge improvement, but I wanted to offer
-it in the event that some users like to avoid using the
-<b>:</b> for the symbol.
-
-Combining a label and input-text is possible via Cyberweb
-too. Examples:
-
-    label_and_input_text :foobar
-    label_and_input_text id: :foobar
-    label_and_input_text id: :foobar, :br
-    label_and_input_text id: :foobar, :linebreak
-    label_and_input_text id: :foobar, :middle_break
-    label_and_input_text :fname, 'First name:'
-
-The last variant is essentially the same as this in HTML:
-
-    <label for="fname">First name:</label><br>
-    <input type="text" id="fname" name="fname"><br>
-
-If you have a need or use case to use a checked checkbox
-then you can use a variant such as this:
-
-    checked_checkbox name: 'valid_ninja'
-
-It may be important to specify the name parameter, as
-shown above; otherwise it can be omitted.
-
-This checked checkbox looks about like this:
-
-<img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
-
-## 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%'
-
 ## The CSS class called select_everything
 
 This document already mentioned how to use JavaScript to select
@@ -4441,10 +4341,11 @@ the border via border-color then this will default to <b>black</b>.
 
 ## Cyberweb::HtmlTemplate
 
-class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
+class **Cyberweb::HtmlTemplate** can be used to describe (and ultimately
+generate) a .html file - that is, to fill this class with HTML
 specific content.
 
-Let's show a specific example how this may be used:
+Let's show a specific example how this may be used first:
 
     require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
 
@@ -4458,7 +4359,7 @@ Let's show a specific example how this may be used:
 This would represent a "full" HTML page, as a String.
 
 It is possible, since as of **18.06.2021**, to pass **CSS classes**
-into this, via:
+into this class, via the entry called <b>css_classes</b>:
 
     css_classes:
 
@@ -4466,19 +4367,19 @@ For example, passing 'darkblue' to that key means that the CSS
 class 'darkblue' will be made 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.
+This functionality was necessary in order to pull in only the CSS
+classes that are used on a particular web-page generated or
+represented by class <b>Cyberweb::HtmlTemplate</b>.
 
-Various additional entries are available. For example, if
-you want to modify the css-style in use for the body tag
-then you can simply use the following variant:
+Various additional entries are available. For example, if you want
+to modify the css-style in use for the body tag then you can
+simply use the following variant:
 
     body_css_style: 'background-color:#DFD1FF'
 
-In the long run the goal here is to extend class HtmlTemplate
-in such a way that all html-generation used within the
-Cyberweb project can be handled by it.
+In the long run the goal here is to <b>extend</b> class
+HtmlTemplate in such a way that all html-generation used
+within the Cyberweb project can be handled by it.
 
 You can also pass ad-hoc CSS style into it. Example:
 
@@ -4681,6 +4582,29 @@ This would yield the following Array:
       "https://www.projectaon.org/en/xhtml/lw/02fotw/right.png"
     ]
 
+## Examples distributed in the cyberweb project
+
+This subsection has a few noteworthy points to make about
+examples distributed in the cyberweb project.
+
+You can find these examples under the directory called
+<b>examples/</b> - easy to remember.
+
+You can find plain HTML examples, and examples that
+use JavaScript and CSS. Additionally some examples
+stored as .cgi files are distributed as well, to 
+demonstrate how the cyberweb project works. I recommend
+that you have a look at the simple examples first,
+without .cgi, unless you already know HTML/CSS/JavaScript,
+and then transition into the .cgi files. That should make
+it a bit easier to understand what is going on. 
+
+You may find that these examples sort of follow a specific
+style, more or less. For instance, I tend to name all
+animations with a trailing <b>_animation</b> tag. That
+helps me identify which animations exist more easily
+so.
+
 ## JavaScript support in the cyberweb project
 
 ### JavaScript for-in and for-of loops:
@@ -4829,6 +4753,183 @@ Example:
 
     <script src="path/foobar.js" async></script>
 
+### 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**.
+
+### 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
+
+## Showing a fancy CSS keyboard
+
+If you use Cyberweb::WebObject then a fancy CSS keyboard
+can be shown. The method to do this is called:
+
+    show_the_keyboard
+
+Right now this is not too terribly useful, but I can imagine
+that this could serve as the basis to add an ad-hoc keyboard
+to a website, such as for smartphone users.
+
+## The progress bar in HTML5
+
+You can use a <b>progressbar</b> to indicate progress based on
+percentage values. This is described here in more detail:
+
+https://css-tricks.com/html5-progress-element/
+
+In cyberweb you can use the following API to indicate this:
+
+    progress
+    progress('35 / 100') # this will display 35%
+
+At a later time some javascript code may be added to indicate
+a counter-progress. Right now (as of <b>February 2022</b>)
+this is not possible though, so this part has to come at
+a later time.
+
+The raw HTML code would look like this, for 35%:
+
+    <progress max="100" value="35"></progress>
+
+If you want to style the progressbar then you have to use
+CSS. This can then be done via the <b>progress[value]</b>
+selector. 
+
+Example for this:
+
+    progress[value] {
+      /* Reset the default appearance */
+      -webkit-appearance: none;
+      appearance: none;
+      width:  250px;
+      height:  20px;
+    }
+
+## Working with HTML forms, including creating input-buttons in such a 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>
+
+You can style &lsaquo;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
+
+View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
+to see this work in action.
+
+You can modify the &lsaquo;input> tag within that via css by using:
+
+    input.view_css {}
+
+Note that &lsaquo;input type="text"> only works for a single line of
+user input. If you would like to have the user work via multiple
+lines then you have to use the &lsaquo;textarea> tag instead.
+There may be work-arounds, such as giving the text-input the
+<b>word-break: break-word;</b> attribute, but this may not work
+on every browser.
+
+Some shortcuts exist within the Cyberweb project. For instance,
+rather than do:
+
+    input :checkbox
+
+You can do:
+
+    input_checkbox
+
+Same with submit and other variants:
+
+    input_submit
+    input_radio
+
+This may not be a huge improvement, but I wanted to offer it in
+the event that some users like to avoid using the <b>:</b> for
+the symbol.
+
+Combining a label and input-text is possible via Cyberweb
+too. Examples:
+
+    label_and_input_text :foobar
+    label_and_input_text id: :foobar
+    label_and_input_text id: :foobar, :br
+    label_and_input_text id: :foobar, :linebreak
+    label_and_input_text id: :foobar, :middle_break
+    label_and_input_text :fname, 'First name:'
+
+The last variant is essentially the same as this in HTML:
+
+    <label for="fname">First name:</label><br>
+    <input type="text" id="fname" name="fname"><br>
+
+If you have a need or use case to use a checked checkbox
+then you can use a variant such as this:
+
+    checked_checkbox name: 'valid_ninja'
+
+It may be important to specify the name parameter, as
+shown above; otherwise it can be omitted.
+
+This <b>checked checkbox</b> looks about like this:
+
+<img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
+
+## 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%'
+
+## Science links
+
+This is only useful for me and my home system. I have 
+a few different science-specific subpages.
+
+I can then link to these via:
+
+    science_links
+
+This is quite plain, though, so I tend to add small
+images via:
+
+    science_links {{ use_this_image: dot109? }}
+
+Other images could be supplied as well.
+
+(Note that while this paragraph is for my own home system,
+the above could eventually be repurposed for other
+users too, if they have a bunch of external links
+they want to display on their homepage as well.
+I'll think about this for a while.)
 ## Useful quotes when designing websites and web-apps
 
 The following subsection collects a few <b>interesting statements</b> -

data/cyberweb.gemspec

@@ -13,12 +13,12 @@ Cyberweb is a tool-set project for the www.
 
 The project attempts to explore different ideas, including use
 cases as an (incomplete) web "framework". Thus, the project is
-of a somewhat medium-to-large size as-is.
+of a somewhat large size as-is these days.
 
 As a project, cyberweb is quite far away from being feature-complete
 or reasonably finished - consider the project to be more a
-proof-of-concept project than something that should be used in
-production.
+proof-of-concept work at this point in time, rather than something 
+that should be used in production.
 
 The cyberweb project in its present state is not fully documented,
 which is unfortunate - the documentation will be subsequently
@@ -30,9 +30,9 @@ works fairly well. Since as of May 2021, sinatra is another
 option in this regard, so the cyberweb project tries to adjust
 to different use cases when necessary.
 
-.cgi scripts are not that common to see in use past the year
-2015. Nonetheless I still consider .cgi scripts to be extremely
-SIMPLE to use.
+.cgi scripts are not that commonly seen in use past the year
+2015. Nonetheless I still consider .cgi scripts to be 
+extremely SIMPLE to use.
 
 If you need a framework that is more sophisticated then it is
 recommended to look at sinatra and padrino instead.