Skip to main content

Posts

Showing posts from 2023

«⨁» #raspi-env-tst-h20 #raspi-env-tst-air

📌 «⨁»  #raspi-env-tst-h20 Raspberry Pi-based smart sensing platform for drinking-water quality monitoring system: a Python framework approach  by  Punit Khatri, Karunesh Kumar Gupta, and Raj Kumar Gupta <https://dwes.copernicus.org/articles/12/31/2019> DWES – Drinking Water Engineering and Science — <https://dwes.copernicus.org/> Copernicus Publications — https://publications.copernicus.org/ Drinking Water Engineering and Science An interactive open-access journal — <https://www.drinking-water-engineering-and-science.net/> " on-site efficient water quality monitoring " Section 3 ...

Blogger Image Storage Ex

The image below was copy-pasted (as source code) from a previous blog post. Note that the URL values for href and src properties are auto-generated by Google and so are human-unreadable and would benefit from an URL-shortening service. Also note that the A element in which the inserted image is situated has what appears to be a custom

CSS Web Animation Ninjas

CSS Animation Videos on YouTube I have been binging on the Kevin Powell YouTube Channel and I found stuff to blog, there — CodePen A very useful site. CodePen is a source-code demonstration and sharing site for CSS, HTML, and Javascript. Amit Sheen a guest Powell features in 3D CSS - lighting, animations, and more! video, Amit Sheen ; more from Amit Sheen at … Website: https://amitsh.com/ Twitter: https://twitter.com/amit_sheen Codepen: https://codepen.io/amit_sheen Article: How CSS Perspective Works at *CSS-TRICKS ...

Responsive Web Design (RWD) Notes

… from W3 Schools TryIt ™ Examples … TryIt ™ Ex:   CSS Navbar Horizontal Black Fixed TryIt ™ Ex:   CSS Cursor Property TryIt ™ Ex:   CSS 3 @media Rule … reference material from W3 Schools … CSS Responsive Web Design – Introduction CSS 3 @media Rule CSS Media Queries CSS 3 Media Queries – Examples The CSS 3 box-sizing Property CSS 3 User Interface properties are resize and  outline-offset . resize   — Specifies whether or not an element is resizable by the user Values for resize are: none both vertical horizontal outline-offset — Adds space between an outline and the ...

Audio Capture and Visualization on the Web

Audio Visualization in HTML Web Audio API Reccomendation 2021-06-17 from W3C Media Capture and Streams from W3C — This document defines a set of JavaScript APIs that allow local media, including audio and video, to be requested from a platform. Media Capture from DOM Element   from  W3C WebRTC: Real-Time Communication in Browsers  from W3C Making an Audio Waveform Virtualizer with Vanilla Javascript — code from this article is on codepen.io at Audio waveform visualizer Detecting pitch with the Web Audio API and autocorrelation from StackOverflow : real-time processing web audio api simple code to calculate frequency of live mic audio using webaudio api live WebRTC audio waveform can i add effects to realtime audio sream in javacript Mozilla Developers Network (MDN) MediaDevices: getUserMedia() method — ...

CSS cursor Property

The cursor Property Mouse over the words to change the cursor. auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait

Olde Bookmarques Fylez

Open Source Software From GNU.org , Free Software Foundation , and Mozilla Developer Network List of Free GNU/Linux Distributions Free Software Directory Semanitic Elements Debian Desktop How-To from Debian Wiki Blog post about OpenSSH Certificates from Blargh Install sshfs and FUSE on CentOS or RedHat Linux — from CrazyToon How to install WordPress in a subdirectory Step-by-Step

brainstorm

HTML 5 elements embed object canvas nav section Fonts CSS @font-face and font-family — CSS @font-face Rule CSS Web Fonts CSS font-family Property HTML canvas font Property CSS font-kerning Property CSS font-size-adjust Property Websafe Downloadable GOOG cloudflare w3schools Icon & Symbol Fonts (Font Awesome) Using Emojis in HTML character sets HTML Encoding (character sets) Javascript & JSON How do I convert HTML code to escaped, HTML-safe text in Javascript ? Can I store & load JSON data to & from local storage or web storage? CSS topics :before and :after selectors variables functions eval() url() SVG What ...

w3 PlayCSS Review

W3 PlayCSS Review by sumkittehz.codes , 2023-04-17 W3 Schools has put up a new widget called PlayCSS – it is an interactive demonstration of enumerated-type values defined for CSS properties. We would provide a link to this widget page, but we do not find one, despite some searching. This is the first of the aspects of this ware that makes it seem somewhat unfinished. Many CSS properties are included in the list of those that can be demonstrated, but not all, and the TryIt ™ examples are missing for many of the enumerated values shown in the demonstration. The tool seems mostly unfinished. There is no externally-linkable landing page, and if one removes the query portion of the URLs that display the site manually – by backspacing them out, for instance – the page returns 404 or (worse) it shows the widget form, but it is not populated by any property names. Additionally, there ...

SVG Elements in HTML

SVG OMG SVGator w3 SVG Text I love SVG Several lines: First line. Second line. Sorry, your browser does not support inline SVG. SVG with an <a> element and <text> element (from w3 TryIt ™ SVG Text 5 : I love SVG! Sorry, your browser does not support inline SVG. <svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="https://www.w3schools.com/graphics/" target="_blank"> <text x="0" y="15" fill="red">I love SVG!</text> </a> Sorry, your browser does not support inline SVG. </svg>

Reference Links

Reference Links This is a partial list of tabs I have had open on my desktop for some time and think I will need to refer to again at some point in the future. Most of these go to W3 SChools examples or reference materials. These are examples we have been using or intend to use. Sreen capture image. jsRef | Window location.assign() Javascript API | Web Storage API Javascipt AJAX jsRef | Window sessionStorage HTML <template> Tag TryIt ™ HTML5 template Element Mozilla Developer Network HTMLTemplateElement: content property HTML Audio/Video DOM Reference jsRef Style flex Property TryIt ™ jsref style border TryIt ™ jsref style flex HTML 5 Drag and Drop API HTML <object> Tag TryIt ™ H...

Emacs Meta-X stuff

GNU ELPA tramp package — this is the module that enables Emacs to open remote files via ssh:/ and sftp:/ protocol namning conventions - editting a remote file in this way allows the user to open the remote file, edit it live and in-place, then save the changes back to the remote host.

Installing Signal on the Raspberry Pi

Linux (Debian-based) Install Instructions The following instructions for installing the Signal client on Linux are copied verbatim from signal.org . These instructions are formatted so they may be used directly as a bash shell script. # NOTE: These instructions only work for 64-bit Debian-based # Linux distributions such as Ubuntu, Mint etc. # 1. Install our official public software signing key: wget -O- https://updates.signal.org/desktop/apt/keys.asc \ | gpg --dearmor > signal-desktop-keyring.gpg cat signal-desktop-keyring.gpg \ | sudo tee /usr/share/keyrings/signal-desktop-keyring.gpg > /dev/null # 2. Add our repository to your list of repositories: echo 'deb [arch=amd64 signed-by=/usr/share/keyrings/signal-desktop-keyring.gpg]\ https://updates.signal.org/desktop/apt xenial main' \ | sudo tee /etc/apt/sources.list.d/signal-xenial.list # 3. Update your package database and install Signal: sudo apt update && sudo apt install signal-desktop ...

Web Validation Services from W3C

The World Wide Web Consortium (W3C) maintains validation services for web layout, markup, and semantic markup languages. These validators are useful in learning the web languages and standards, as well as in debugging layout problems on existing web pages. The W3C ® CSS Validation Service — The CSS validation service will validate CSS Level 3 + SVG, as well as several other version of CSS and sub-sets of SVG for Mobile and TV. The page also notes that " If you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid. " W3C ® Markup Validation Service — This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available. As an alternative you can also...

Online Web Fonts and CSS Text Effects

The CSS @font-face Rule CSS @font-face rules allow the introduction of new font family identifiers and new font families into CSS that can be used to render HTML content for the site. This example is from w3 TryIt ™ The @font-face Rule @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family: myFirstFont; } Using the Google Font API Google Font API Documentation See the documentation for a complete list of fonts available through the Google Fonts API. Google Font API documentation is available from both Google and from W3 Schools. Google font API Documentation from Google: Google Fonts from the Google Developers portal. Google Fonts API documentation from W3 Schools How-To collection. Example using the Google Font Alef In order to use the Alef font family from the Google Font API , simply insert the following two lines of HTML into the <head> element of th...

Configuring DNS for the LAN

Requirements: The LAN Name Service must proide caching for external name requests. The LAN Name Service provides local network name resolution to requests from withhin the LAN. The LAN Nameservice will use local zone records to resolve local network names. The LAN Name Service will be authoritative for the local network defined as .LOCAL - This domain name / zone definition must not be propagated beyond the LAN. Platforms Raspberry Pi 3b+ with 64-bit Raspberry Pi OS Lite Procedure Install BIND9 create Zone files for named Configure caching for named Test DNS configuration Configure named to start at boot Publish LAN name server host and port

CSS Animation and Movement Effects

List of documentation with examples from w3schools.com: CSS 3 transition Property The transition property is a shorthand property for: transition-property transition-duration transition-timing-function transition-delay Note:  Always specify the transition-duration property, otherwise the duration is 0s , and the transition will have no effect. CSS Animations tutorial from W3 Schools

Real-time Digital Clocks

Links to source code for real-time digital clocks in Javascript: W3 Schools TryIt ™ Javascript Clock How to Design Digital Clock using JavaScript ? Some clocks made by sumkittehz using the examples listed above: codez: Real-time Digital Clocks codez: Clock 2 codez: Digital-Clock-js

Resources from W3 Schools

W3 Javascript Resources Javascript Date Reference JavaScript Reference for toTimeString() Method <p id="demo"> <script> const d = new Date(); let text = d.toTimeString().replace(/GMT-0400 \(Eastern Daylight Time\)/,"EDT"); document.getElementById("demo").innerHTML = text; </script> HTML snippet shows trimming of Time String returned by toTimeString() TryIt ™ JS String replace() Method Javascript Strings Reference JavaScript Date toLocaleString() Method var timeDisplay = document.getElementById("time"); function refreshTime() { var dateString = new ...

Icon Tutorial from W3 Schools

w3 Icons Tutorial w3 Font Awesome | Icons | Objects goog Google Fonts | Icons w3 HTML Symbols Reference

Live CSS Fonts from Google

Google Fonts API documentation

Configure Raspberry Pi LAMP Server

The article Build a LAMP Web Server with WordPress published by the Raspberry Pi Foundation contains what we will consider the canonical process for installing a LAMP server with Wordpress on the Raspberry Pi platform. For this particular Raspberry Pi system, we have already installed the LAMP server compoenents (Apache, PHP, MariaDB) using the default Debian apt package management system too, Aptitude. On the initial setup for the LAMP components, we also installed the WordPress apt package. While the server seemed to work well enough with very minimal tweaking, our attempts to configure the installed WordPress package led to the entire server configuration breaking — we backed the WordPress configuration out by manually manipulating the /etc/apache2/sites-enabled confiration files, so we are currently left with a working LAMP server but no WordPress. Our goal for a WordPress installation is to have wordpress installed as the root-level index for a wordpress.l...

Configuring VirtualHost Domains in Apache on Raspberry Pi

We will be paying most attention to Name-based Virtual Sub-domain Support using a single IP address, since that is the configuration we are building, here, and therefore of the greatest interest to us… Here we are configuring hosting of multiple Virtual hostnames on a single Apache server install using the *.conf files found in the /etc/apache2/sites-available and /etc/apache2/sites-enabled directories installed by default when using the Debian apt software package system. The Apache Project provides documentation and examples for this: Apache Virtual Host documentation Name­based Virtual Host Support VirtualHost Examples The Apache HTTP Server Project In studying the documentation and examples provided by Apache we find that the VirtualHost directives have a couple key features in creating the sub-domain mappings for the IP address. Specifically: The IP address selector line should be written using w...

The HEAD Element

  <head>     <meta charset="UTF-8"/>     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>     <title>Page Title Text</title>     <style>       html { font-family:sans-serif; font-size:14pt; }       p,pre {       margin-left:4em; margin-right:auto;       margin-top:0.5em; margin-bottom:0.5em;       padding-top:0.5em; padding-bottom:0.5em;       }     </style>   </head>

[DO NOT LEAVE BLANK]

Experimenting with Stackedit

So I created some Workspace in StackEdit, then created a file, then hit "Synchronize" Stackedit immeadiately popped up a modal dialog which informed me that the file was sync'd to two locations. Links were given for those two locations; those links appear below: first location second location