Web-Development

JSON/XML Parser

https://jsonformatter.org/xml-parser

Mock JSON API

https://jsonplaceholder.typicode.com/

Cloud Native Computing Foundation (CNCF)

https://landscape.cncf.io/

Design-Tools Overview

Frameworks

CMS

https://www.bludit.com/ (https://demo.bludit.com/)
https://contao.org/de/ (Cantao.org)

Icons

https://www.nerdfonts.com/
https://useiconic.com/open/
https://ionic.io/ionicons
https://github.com/twbs/icons
https://thenounproject.com/
https://github.com/lucide-icons/lucide (Open Source/expandable)
https://openmoji.org/ (Open Source/expandable)

Fonts

Certbot

sudo certbot --apache -d subdomain.domain.de
sudo vim /etc/apache2/sites-available/000-default-le-ssl.conf

Create new Virtualhost

sudo certbot --apache -d subdomain.domain.de
sudo service apache2 restart
sudo certbot renew --dry-run

Usefull Tools

https://demo.bokeh.org/ (Display Engine)
https://adminlte.io/themes/dev/AdminLTE/pages/UI/buttons.html (AdminLTE)
https://github.com/garris/BackstopJS (BackstopJS)
https://picsum.photos/
https://vaadin.com/docs/latest/guide/quick-start
https://www.elastic.co/kibana
https://opentelemetry.io/

Status Codes

https://httpstat.us/

cURL Alternative (Web interface)

https://httpie.io/cli/run

Apache2 Reverse Proxy (Redirect Trafiic to another Server)

Edit Apache2 config /etc/apache2/sites-available/000-default-le-ssl.conf

<VirtualHost *:443>
     # Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains
     ServerName <(sub)domain>
     ProxyRequests Off
     ProxyPass / <passthrough address (local; with or without port)>
     ProxyPassReverse / <passthrough address (local; with or without port)>
     SSLProxyEngine On
     SSLEngine on

     # For letsencrypt (HTTPS)
     Include /etc/letsencrypt/options-ssl-apache.conf
     SSLCertificateFile /etc/letsencrypt/live/<(sub)domain>/fullchain.pem
     SSLCertificateKeyFile /etc/letsencrypt/live/<(sub)domain>/privkey.pem
</VirtualHost>

Apache2 test config befor restart

apachectl configtest

CSS-Rapid-Dev

<body>
   <style contenteditable style="display block; white-space: pre; ">
      * {
         transition: all 0.2s;
      }

      html {
         background: #aabbcc;
      }
   </style>
</body>

Cool Effects

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

backdrop-filter: blur(10px);

Color Palette

Color	Hex Value	Example
Dusty Rose	#287094	Foo Bar Lorem Ipsum.
Peachy Keen	#d4d4ce	Foo Bar Lorem Ipsum.
Pure White	#f6f6f6	Foo Bar Lorem Ipsum.
Warm Taupe	#023246	Foo Bar Lorem Ipsum.

Color generator available at: https://jsfiddle.net/