Korbs / Video Timestamp and Seekbar

0 喜歡

0 分支

1 檔案

最後活躍 1743636566

1	<video controls style="width: 100%; margin-bottom: 24px;" src="./vid.mp4"></video>
2	<div class="full-seekbar">
3	<div class="video-timestamp">
4	<span id="text-live">--:--</span>
5	<span id="text-full">--:--</span>
6	</div>
7	<div class="seekbar">
8	<span class="seekbar-current-progress"></span>
9	<span class="seekbar-tooltip"></span>
10	<input id="seek" name="seekbar" type="range"/>

Korbs / i18n in Vanilla JavaScript

0 喜歡

0 分支

4 檔案

最後活躍 1743546395

1	const defaultLanguage = availableLocales[0]
2	let language = (window.navigator.language)
3	const urlParams = new URLSearchParams(window.location.search)
4	const langFromUrl = urlParams.get('lang')
5	if (langFromUrl && availableLocales.includes(langFromUrl)) {language = langFromUrl}
6	let pageLanguage = defaultLanguage
7	if (availableLocales.includes(language)) {pageLanguage = language}
8	const elements = document.querySelectorAll('[data-i18n]')
9	const json = locales[pageLanguage]
10	elements.forEach((element) => {

Korbs / Fetching JSON Data in Astro

0 喜歡

0 分支

1 檔案

最後活躍 1743282034

1	---
2	// Request Data
3	const Teams = await fetch('https://example.org/data.json').then((response) => response.json())
4	---
5
6	<!-- Map JSON Data -->
7	{Teams.map((team) =>
8	{
9	<div class="team">
10	<h2>{team.name}</h2>

Korbs / Alpine Linux on Framework 13

0 喜歡

0 分支

2 檔案

最後活躍 1740027886

1	# Alpine Linux Wiki: https://wiki.alpinelinux.org/wiki/NetworkManager#wpa_supplicant_backend
2	[main]
3	dhcp=internal
4	plugins=ifupdown,keyfile
5
6	[ifupdown]
7	managed=true
8
9	[device]
10	wifi.scan-rand-mac-address=yes

Korbs / Service Worker - Office Page

0 喜歡

0 分支

3 檔案

最後活躍 1739772657

Service Worker - Offline Page

When the end-user goes offline, it is possible to cache a page to their device to show a custom offline page. Examples of this would be sites such as YouTube and X.

Just use the JavaScript file below, make sure it's at the root of the domain in order for the web browser to pick it up. The HTML file below is an example of an offline page. I would recommend building your own custom offline page to tailor it for your website or web application.

Korbs / Web Tricks and Methods

0 喜歡

0 分支

1 檔案

最後活躍 1739770864

Web Tricks and Methods

HTML

Number Keyboard for Mobile Devices

When it comes to creating a number input, we would create an <input/> with the type attribute set to number. This makes arrow buttons show up that can let us go up and down.

On mobile, we don't want this. It's expected by the end-user that their numberic keyboard shows up, so we set the inputmode instead.

Korbs / Detect Internet Explorer with JavaScript

0 喜歡

0 分支

1 檔案

最後活躍 1737604079

Based on old code from over 5 years ago

1	function GetIEVersion() {
2	var sAgent = window.navigator.userAgent;
3	var Idx = sAgent.indexOf("MSIE");
4	if (Idx > 0)
5	return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
6	else if (!!navigator.userAgent.match(/Trident\/7\./))
7	return 11; else return 0;
8	}
9	if (GetIEVersion() > 0) {document.write("This is IE " + GetIEVersion());document.write('<div id="out"><p>You are using an unsupported browser.</p><p style="font-size: 14px;">Try a different web browser:</p><ui><li><a href="https://www.microsoft.com/en-us/edge?r=1">Microsoft Edge</a></li><li><a href="https://www.google.com/chrome/">Google Chrome</a></li><li><a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></li><li><a href="https://opera.com/">Opera</a></li></ui><p>You are using Internet Explorer ' + GetIEVersion() +'</p></div> <style>a {color: white;} li {font-size: 14px;} div#out {position: fixed;z-index: 999;background: black;color: white;border: none;top: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;}</style>')} else {}

Korbs / Zot Docker Setup

0 喜歡

0 分支

3 檔案

最後活躍 1737603702

Straight-forward setup for Zot in Docker. Steps are also included how to use it as a Docker registry.

Zot Docker Setup

Setup Zot in Docker

This is mostly how SudoVanilla's Docker registry is setup.

I'm still new to Zot, so some information below could be inaccurate and some important information could be missing too.

Configuration

Korbs / Include HTML File

0 喜歡

0 分支

3 檔案

最後活躍 1737603604

This is kinda like including a component in a JS framework using the "import" function, but with vanilla JavaScript.

1	function includeHTML() {
2	var z, i, elmnt, file, xhttp;
3	z = document.getElementsByTagName("*");
4	for (i = 0; i < z.length; i++) {
5	elmnt = z[i];
6	file = elmnt.getAttribute("include-html");
7	if (file) {
8	xhttp = new XMLHttpRequest();
9	xhttp.onreadystatechange = function() {
10	if (this.readyState == 4) {

Korbs / Detect Operating System with JavaScript

0 喜歡

0 分支

1 檔案

最後活躍 1737603155

1	var htmlElement = document.documentElement;
2	if (navigator.platform.match(/(Mac)/i)) {
3	htmlElement.className = 'Mac'
4	}
5	if (navigator.platform.match(/(Linux)/i)) {
6	htmlElement.className = 'Linux'
7	} else {
8	htmlElement.className = 'Windows'
9	}
10	document.addEventListener('click', function(event) {