Cyberholic Video-tutorials
Tutorials and development i uploaded to YouTube as series depending on the project i am working on, idea that i am having or knowledge i learned.

[CH v.2.1.2] - Winter CMS
Create dynamic thumbnails within Winter CMS thanks to the resize filter.
Winter CMS
gallery
image
resize
[CH v.2.1.1] - Winter CMS
How to install and use the Twig Extensions by Vojta Svoboda.
Winter CMS
twig
plugin
extension
[CH v.2.1.0] - Winter CMS
How to set up the integrated mail settings within Winter CMS.
Winter CMS
e-mail
smtp
[CH v.1.2.0] - www.inoxed.net
Introduction on how to create a skate spot website with Winter CMS
[CH v.1.1.14] - www.cyberholic.es
Adapt blog entry views depending on its category within the Winter blog plugin.
[CH v.1.1.13a] - www.cyberholic.es
How to customize the pagination for the Blog entries.
Winter CMS Fomantic UI
pagination
[CH v.1.1.13] - www.cyberholic.es
How to create a pagination of for your blog entries within Winter CMS with Fomantic UI.
Winter CMS Fomantic UI
pagination
[CH v.1.1.12] - www.cyberholic.es
How to create a gallery like overview of blog post entries with Winter CMS.
Winter CMS
blog
gallery
photos
[CH v.1.1.11a] - www.cyberholic.es
Create a minimal listing of blog posts.
Winter CMS
blog
[CH v.1.1.11] - www.cyberholic.es
How i installed the Winter blog plugin into my website.
[CH v.1.1.10a] - www.cyberholic.es
How to create a dynamic listing with Fomantic-UI in Winter CMS.
[CH v.1.1.10] - www.cyberholic.es
How to list content with a Fomantic-UI list.
[CH v.1.1.9a] - www.cyberholic.es
Solution for the last video fail.
[CH v.1.1.9] - www.cyberholic.es
How to create links to sub-pages with Winter CMS.
[CH v.1.1.8] - www.cyberholic.es
How to work with partials in Winter CMS.
[CH v.1.1.7] - www.cyberholic.es
How to add a Sidepanel and a fixed top menu to the blog.
[CH v.1.1.6] - www.cyberholic.es
Install the Agent plugin in your Winter CMS for "Mobile first"
[CH v.1.1.5b] - www.cyberholic.es
Why i did fail on the previous filter on adding Fontawesome to my Winter CMS project.
[CH v.1.1.5a] - www.cyberholic.es
Adding the Fontawesome Icons to the Fomantic-UI to be used within Winter CMS.
[CH v.1.1.4] - www.cyberholic.es
Add some META tags to the Winter CMS website and include local JS libraries.
[CH v.1.1.3] - www.cyberholic.es
How to add the Fomantic-UI CSS framework to your Winter CMS website.
[CH v.1.1.2] - www.cyberholic.es
How to create a blank Theme in Winter CMS.
HTML
theme
template
Winter CMS
[CH v.1.1.1] - www.cyberholic.es
How to create a personal blog or website with Winter CMS.
blog
news
Winter CMS
[CH v.1.1.0] - www.cyberholic.es
Introduction on how to create a blog or news website with Winter CMS.
blog
news
Winter CMS

Python rss feed checker & importer script

Ich hab gerade ein altes Python Script gefunden mit dem ich auf meinem Raspberry Pi via der CLI Webseiten URLS nach vorhandenen RSS feeds absuche. In einem simplen Array hau ich die Top Level Domains rein und als naechstes wird eine CSV Datei erzeugt mit allen gefundenen Feed URLS. Vielleicht setze ich das mal als online tool oder Electron app um. Koennte hilfreich sein.

import csv
from datetime import datetime

# Paste feed URLs here
feed_urls = [
"http://8-bit-retro-computing.blogspot.com/feeds/posts/default?alt=rss",
"http://ancientelectronics.wordpress.com/feed/",
"http://archeogaming.blogspot.com/feeds/posts/default",
"http://classic.technology/feed/",
"http://planetdestiny.com/feed/",
"http://qz.com/feed/",
"http://randoc.wordpress.com/feed/",
"http://retro-computers.eu/?feed=rss2",
"http://retro-computing.blogspot.com/feeds/posts/default?alt=rss",
"http://retro-roms.blogspot.com/feeds/posts/default?alt=rss",
"http://retroblast.com/rssfeed.php",
"http://rss.cnn.com/rss/cnn_allpolitics.rss",
"http://rss.cnn.com/rss/cnn_freevideo.rss",
"http://rss.cnn.com/rss/cnn_health.rss",
"http://rss.cnn.com/rss/cnn_latest.rss",
"http://rss.cnn.com/rss/cnn_showbiz.rss",
"http://rss.cnn.com/rss/cnn_tech.rss",
"http://rss.cnn.com/rss/cnn_topstories.rss",
"http://rss.cnn.com/rss/cnn_us.rss",
"http://rss.cnn.com/rss/cnn_world.rss",
"http://rss.cnn.com/rss/edition.rss",
"http://rss.cnn.com/rss/edition_world.rss",
"http://slashdot.org/Slashdot/slashdotMain",
"https://dusted.codes/feed/rss",
"https://engadget.com/rss.xml",
"https://eurogamer.net/feed",
"https://factcheck.org/feed/rss/",
"https://feedbin.com/starred/630a51376f6236f1db65212704980f4f.xml",
"https://feedpress.me/CoolTools",
"https://feedpress.me/the"]

timestamp = datetime.utcnow().isoformat() + "Z"

rows = []
for url in feed_urls:
    # Derive a slug from the URL
    slug = url.split("//")[-1].split("/")[0].replace(".", "-")
    title = slug.replace("-", " ").title()
    website = url.split("/feed")[0] if "/feed" in url else url.rsplit("/", 1)[0]
    version = "atom" if "atom" in url else "rss"

    rows.append([
        timestamp, timestamp, title, slug, "en", "N/A", website, url, "true", version
    ])

with open("feeds.csv", "w", newline="", encoding="utf-8") as f:
    writer = csv.writer(f, quoting=csv.QUOTE_ALL)
    writer.writerow(["timestamp1","timestamp2","feed_title","feed_slug","locale","description","website","feed_url","valid","version"])
    writer.writerows(rows)

print("feeds.csv generated with", len(rows), "rows.")

Inkscape CLI zum konvertieren nutzen.

Ich habe ein altes note-it gefunden bei dem ich die Inkscape CLI genutzt habe um Adobe Illustrator oder EPS files schneller oder via batch umzukonvertieren. Hier meine script dazu...

// BATCH AI2SVG
for file in *.ai; do inkscape "$file" --export-filename "${file%ai}svg";done

// BATCH EPS2SVG
for file in *.eps; do inkscape "$file" --export-filename "${file%eps}svg";done

// BATCH EXPORT ALS PLAIN SVG
for file in *.ai; do
    inkscape "$file" --export-type=svg --export-plain-svg --export-filename "${file%ai}svg"
done

// INDIVIDUAL AI2SVG
inkscape my-file.ai --export-filename output.svg

// LOOP THROUGH WITH SCOUR OPTIMIZE SVG FILE
for file in *.ai; do
    base="${file%.ai}"
    inkscape "$file" --export-type=svg --export-plain-svg --export-filename "${base}_rawsvg"
    scour  -i "${base}_raw.svg" -o "${base}.svg" --enable-id-stripping --shorten-ids --set-precicion=3
done

Umbennung von files via Linux Terminal.

Ich hab saemtliche Fotos von Whatsapp gemeinsam mit den Camera Fotos in einen Folder geschoben. Erst via XN-View geschaut ob die files via EXIF Infos in das richtige Datum umbennen kann, danach bei jenen wo es nicht klappte (Camera Zoom App und Co.) musste ich nach der Syntax YYYY-MM-DD die Datein umbennnen.

for f in *.jpg ; do
  mv -v `$f` `${f::4}-${f:4:2}-${f:6:2}-${f:8}`
done

for f in *.jpeg ; do
  mv -v `$f` `${f::4}-${f:4:2}-${f:6:2}-${f:8}`
done

Via Flipdown.js einen Countdown darstellen.

I used this small script on a page showing a countdown to a date with the oldschool flipclock animation. As it was a multilanguage website i also added an array with several time definitions depending on the language the user has chosen. For all of this the flipdown JS library by PButcher is used.

<script>
            document.addEventListener('DOMContentLoaded', () => {
                switch('{{ appLanguage }}') {
                    case "es":
                        theheadings= ["Días", "horas", "minutos", "segundos"];
                        break;
                    case "en":
                        theheadings= ["Days", "Hours", "Minutes", "Seconds"];
                        break;
                    case "de":
                        theheadings= ["Tage", "Stunden", "Minuten", "Sekunden"];
                        break;
                    default:
                        theheadings= ["Días", "horas", "minutos", "segundos"];
                }
                
                theStartTime = parseInt( "{{ record.event_start | date('U')}}" );
                console.log(theStartTime);
                // Unix timestamp (in seconds) to count down to
                //var twoDaysFromNow = (new Date().getTime() / 1000) + (86400 * 200) + 1;
                var twoDaysFromNow = theStartTime;
                var flipdown = new FlipDown(twoDaysFromNow,{
                    //headings: ["Nap", "Óra", "Perc", "Másodperc"]
                    headings: theheadings
                }
                ).start()
                .ifEnded(() => {
                    console.log('The countdown has ended!');
                    $('.flipDownContent').hide();
                    
                });
            });
        </script>```

How to detect a mobile device with JS.

Um heraus zu finden ob der Besucher einer Seite selbige mit seinem Mobiltelefon abruft, hab ich das folgende kleine Javascript entdeckt das mit dem windows.matchmedia Tag arbeitet.

<script>
$(document).ready(function(){
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide
        alert("This is a mobile device.");
    } else{
        // The viewport is at least 768 pixels wide
        alert("This is a tablet or desktop.");
    }
});
</script>

Ich hab nicht nachgeforscht ob matchMedia neben der Seitenbreite noch weitere Daten wie Browser oder device abcheckt, aber fuer eine schnelle Umzetzung eines Check-Scripts find ich das nuetzlicher als eine ganze Library einzuladen.

How to map

Get the image mime info via PHP of an manual generated object by its ID in the array with images to show them.

<?php
$tid = $_GET['id'];

$map1 = { 
    1=>'2014/2014-06-28.jpg',
    2=>'2014/2014-06-29.jpg',
    3=>'2014/2014-06-30.jpg',
    4=>'2014/hund.jpg',
    5=>'2014/katze.jpg',
    6=>'2014/maus.jpg'
}

$path = $map1[$tid];
$str = file_get_contents($path);
echo $str; 
?>