DEV Community: Kolja

Copy as MarkdownLink

Kolja — Fri, 13 Oct 2023 18:39:34 +0000

Admittedly I am lazy, sometimes very lazy.
But who isn't?

I often insert links to interesting websites in markdown files. For this I always have to copy the link from the address bar and type in the title of the page manually.

But JavaScript and bookmarks are your friend!

Save this code as a bookmark and be as lazy as me:

javascript: (function () {
    var title = document.title;
    var url = window.location.href;
    var textarea = document.createElement('textarea');
    textarea.value = '[' + title + '](' + url + ')';
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
})();

Build counter

Kolja — Wed, 22 Mar 2023 22:09:35 +0000

I asked myself, "how often did I build this project"?

Therefore, I'm using Vite (with SvelteKit), I searched for a build-in build-counter, but it seems, that there is nothing like that.

Okay, I didn't search that long, because this is a well working solution:

#!/bin/bash

# read the .env file
source .env

# Increase the version number in .env
NEW=$(($PUBLIC_BUILD_COUNT+1))

# write the new version number to .env
sed -i~ '/^PUBLIC_BUILD_COUNT=/s/=.*/='$NEW'/' .env

So in my package.json I added this:

"build": "bash increase.sh && vite build",

and the .ENV file will have a counter:

PUBLIC_BUILD_COUNT=39
PUBLIC_BUILD_DATE=22.03.2023-15:52

Oh wait, there is more:

# Get the current date and time
DATE=$(date +'%d.%m.%Y-%H:%M')

# write the new date to .env
sed -i~ '/^PUBLIC_BUILD_DATE=/s/=.*/='$DATE'/' .env

I think, you got it ;-)

nice URLs with SvelteKit

Kolja — Thu, 02 Mar 2023 23:25:51 +0000

TL;DR

If you want URLs like these:

for topics:

  awesome.app/best-topic-in-the-world--t5173

for user:

  awesome.app/sherlock-holmes--u5173

Then your routes folder has to look like this:

routes/
│   
├─[topic]--t[id]/
│ ├─ +page.server.ts
│ └─ +page.svelte
│   
└─ [user]--u[id]/
   ├─ +page.server.ts
   └─ +page.svelte

Unique URLs

One of the most important properties of a URL is its uniqueness. For our examples, this is technically relatively easy to implement, since each topic and each user in the database also has a unique ID. Mostly this is achieved with a consecutive number. But it can also be a string of random letters and numbers. Theoretically it can also be the name of the topic or the user, but then there must not be two topics or users with the same name, otherwise the uniqueness is no longer given.

For example, URLs can look like this:

for topics: awesome.app/topic/5173
for user: awesome.app/user/5173

Technically okay, but when we see the link, we would like to know a bit more about what awaits us behind it.

Advanced routing in SvelteKit

SvelteKit has an advanced routing documentation, but the closest approach to my case is this:

If the folder is enclosed with square brackets, this part of the URL is available as a parameter.

So this folder structure:

routes/
│   
├─ topic/
│  └─ [id]/ 
│     ├─ +page.server.ts
│     └─ +page.svelte
└─ ...

Will give us the the id from the URL inside the +page.server.ts files:

// routes/topic/+page.server.ts
export const load = (async ({ params }) => {
  console.log('topic id: ', params.id)

  // prisma example
  const topic = await prisma.topic.findUnique({
    where: {id: parseInt(params.id)} 
  })
  return { topic: topic }
}

And we can use an URL like this: awesome.app/topic/5173

But what could be more obvious than to combine the information for the human and the information for the server?

This method is by far nothing new in the internet, but for SvelteKit I didn't find any examples of it in the documentation.

The sensation

This method also works with multiple parameters in one folder name!

routes/
│ 
├─ [topic]--t[id]/
│ 
└─ [user]--u[id]/

So if we divide our human--server URL by a unique string (--t or --u in this example), we get two parameters for one route.

The first one is for readability and the second one is for the database query. What is in the first parameter doesn't matter at all for processing on the server, as long as our separator is not included.

Now we can use URLs like this: awesome.app/best-topic-in-the-world--t5173 and get two parameters inside the +page.server.ts

// routes/[topic]--t[id]/+page.server.ts
export const load = (async ({ params }) => {
  console.log('topic id: ', params.id)
  console.log('topic slug: ', params.topic)
}

// output
// topic id:  "5173"                       <- always a string!
// topic slug: "best-topic-in-the-world"   <- usecase?

Happy advanced Routing with SvelteKit

Disclaimer:

I wrote this article a few weeks ago. In the meantime the SvelteKit Docs got some more examples, but not exactly this case.

Any constructive feedback is welcome :-)

Rainbow Scroll

Kolja — Wed, 07 Sep 2022 20:55:33 +0000

Simple and fun idea:

The color of the headings (or whatever) changes depending on how far the page was scrolled down.

This function gives us the percentage value:

function getScrollPercent() {
    var h = document.documentElement,
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}

We have to multiply that by 3.6 so that we have the HSL circle complete.

Then just an event listener:

var r = document.querySelector(':root'); 

document.addEventListener('scroll', (e) => {
    let percent = getScrollPercent();
    let hsl = Math.round(percent * 3.6); 
    r.style.setProperty('--rainbowColor', 'hsl(' + hsl + ', 70%, 50%)');
})

And the corresponding CSS:

:root {
    --rainbowColor: hsl(0, 100%, 50%);
}

h1,h2,strong {
    color: var(--rainbowColor);
}

Try it out

Repo

PHPen

Kolja — Mon, 05 Sep 2022 22:21:54 +0000

Not the first, but a simple one.

Just in short:
It is what it sounds like, a PHP variant of CodePen.

Functions

Write any PHP code in the editor on the left, click RUN or control + Enter.
Save your code by simply writing a name in the text field above.
Load existing scripts using the dropdown menu.

Technical

The content of the code editor is written to a PHP file and displayed in the iframe on the right.

It's that simple :-)

The rest is a bit of javascript to enable linking, saving and loading files.

Link to repo: https://github.com/KoljaL/PHPen

multiple Themeswitch in Svelte with Tailwind

Kolja — Wed, 10 Aug 2022 09:26:00 +0000

You need a running svelte app with tailwind.

Create a new component components/themeSwitch.svelte

<script>
    // define themes
    const themes = ['theme-dark', 'theme-light'];

    // loox in localstorage for a theme & set it as body attribute
    if (localStorage.getItem('data-theme')) {
        document.body.setAttribute('data-theme', localStorage.getItem('data-theme'));
    }

    // set first theme as default theme (if no :root{})
    else {
        document.body.setAttribute('data-theme', themes[0]);
    }

    // get currentTheme from body, step to the next theme & set this in licalStorage & body
    function toggleTheme() {
        let currentTheme = document.body.getAttribute('data-theme');
        let themeIndex = themes.indexOf(currentTheme) + 1;
        if (themeIndex === themes.length) themeIndex = 0;
        localStorage.setItem('data-theme', themes[themeIndex]);
        document.body.setAttribute('data-theme', themes[themeIndex]);
    }
</script>

<button on:click={toggleTheme}>
    <svg class="SVGicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path id="Palette_1_" d="M84.71,80.953c-0.169-4.002-6.185-15.902-6.043-20.52c0.162-5.236,3.329-11.685,9.923,0.922  c3.951,7.555,10.016,2.854,10.752-0.822c2.223-11.12-1.078-24.458-11.591-37.527C69.567,0.405,37.605-5.802,16.38,9.144  C-4.844,24.092-5.271,57.752,14.097,77.26c17.555,17.676,41.765,25.445,62.007,16.926C78.197,93.301,85.123,90.59,84.71,80.953z   M27.852,15.419c3.83-2.697,9.12-1.78,11.819,2.052c2.699,3.831,1.779,9.122-2.051,11.819c-3.833,2.699-9.122,1.78-11.821-2.051  C23.1,23.408,24.018,18.119,27.852,15.419z M11.314,49.892c-2.697-3.831-1.777-9.122,2.053-11.819  c3.828-2.697,9.122-1.782,11.819,2.049c2.699,3.832,1.777,9.124-2.051,11.821C19.305,54.641,14.012,53.727,11.314,49.892z   M52.489,27.813c-2.701-3.831-1.781-9.124,2.051-11.821c3.831-2.697,9.12-1.779,11.821,2.053c2.697,3.83,1.778,9.12-2.053,11.819  C60.477,32.562,55.187,31.645,52.489,27.813z M23.794,71.543c-2.697-3.834-1.78-9.127,2.05-11.824  c3.831-2.697,9.124-1.779,11.821,2.051c2.697,3.832,1.78,9.125-2.051,11.822C31.784,76.291,26.492,75.371,23.794,71.543z" />
    </svg>
</button>

<style>
    .SVGicon {
        fill: var(--text-prim);
    }
    .SVGicon:hover {
        filter: brightness(150%);
    }
</style>

Load this in yout svelte app

<script>
    import themeSwitch from '../components/themeSwitch.svelte';
</script>

<nav class="sm:block">
    <themeSwitch />
</nav>

Add Theme colors to .app.css or ./custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;


[data-theme="theme-light"] {
    --text-prim: #6c757d;
    --text-seco: #007bff;
    --text-tert: #17a2b8;
    --bg-prim: #F8F9FA;
    --bg-seco: #F7F7F9;
    --bg-tert: #EFEFEF;
    --border-prim: #777777;
    --border-seco: #dddddf;
    --border-tert: #c9c9cc;
    --success: #007E33;
    --info: #0099CC;
    --warn: #FF8800;
    --error: #CC0000;
}

[data-theme="theme-dark"] {
    --text-prim: #d7d7d8;
    --text-seco: #2798e4;
    --text-tert: #988cca;
    --bg-prim: #232327;
    --bg-seco: #27272B;
    --bg-tert: #2C2C31;
    --border-prim: #1b1b20;
    --border-seco: #991b1b;
    --border-tert: #991b1b;
    --success: #6a8759;
    --info: #c9ac57;
    --warn: #cb7832;
    --error: #e9553b;
}

Set these vars to your tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    content: ['./src/**/*.{svelte,js,ts}'],
    theme: {

        backgroundColor: {
            "prim": "var(--bg-prim)",
            "seco": "var(--bg-seco)",
            "tert": "var(--bg-tert)",
            "info": "var(--info)",
            "warn": "var(--warn)",
            "error": "var(--error)",
            ...colors
        },
        textColor: {
            "prim": "var(--text-prim)",
            "seco": "var(--text-seco)",
            "tert": "var(--text-tert)",
            "success": "var(--success)",
            "info": "var(--info)",
            "warn": "var(--warn)",
            "error": "var(--error)",
            ...colors
        },
        borderColor: {
            "prim": "var(--border-prim)",
            "seco": "var(--border-seco)",
            "tert": "var(--border-tert)",
            ...colors

        },
        extend: {

        },
    },
    plugins: [],
}

Have a nice ThemeSwitching :-)

What PHP backend API is your favorite?

Kolja — Sun, 17 Jul 2022 16:06:56 +0000

I try to switch my webdev from HTML with PHP templates to a JS framework with an API.
Do you have some hints for a PHP based backend for me?

MediaClasses

Kolja — Sat, 02 Apr 2022 07:49:36 +0000

Wouldn't it be nice to be able to do without those ugly media-queries in CSS?
Just a class for the respective width and that's it?

No problem with a little Javascript!

First, we define the desired screen widths and the corresponding class names in an object:

const breakpoints = [
  { width: "36em", class: "small" },
  { width: "64em", class: "medium" },
  { width: "99em", class: "large" }
];

With the following query, we find out the appropriate width of the screen:

if (window.matchMedia(`(max-width: ${breakpoint.width})`).matches)

Now just add the class (don't forget to delete the old one first) to the body tag:

document.body.removeAttribute("class");
document.body.classList.add(breakpoint.class);

Put all this into a small function and call it at the beginning and at every change of the viewport:

window.addEventListener("DOMContentLoaded", mediaClasses);
window.addEventListener("resize", mediaClasses);

A small example here in this codepen.
A somewhat larger one in this template on GitHub.

no Framework JS

Kolja — Fri, 18 Mar 2022 18:01:53 +0000

TL;DR

NoFrameworkJS

Short form

In the following I would like to show you the framework of HTML, CSS and Javascript I used to create my first sigle page application,
without using any framework (Vue, React, etc) or webcomponents.

Introduction

So far I have always created websites the classical way:

PHP gets data from the database and creates a template from it.
The server generates, depending on the URL, the complete page each time and delivers it.

The browser has to rebuild the source code every time the page is changed.
Since in most cases only the content of a part of the page changes, this is quite a lot of work,
this is a lot of work without any real added value.

It is more elegant to load only the part of the data that is needed for the new view and to dynamically integrate it into the existing source code.
and integrate it dynamically into the existing source code.
This approach is followed by Javascript frameworks such as Vue, React or Angular.
Such pages can also be created with Svelte or via web components.
For my first attempt, however, the hurdle of a framework was too great and I decided to implement everything with techniques I was familiar with,
to implement everything with techniques I was familiar with:

Data
All data for the website must be delivered as JSON objects from the web server. In this example, I use freely available APIs that generate random content.

File structure

index.html
├── css
│   └── styles.css
└── js
    ├── app.js
    ├── utils.js
    └── pages
        ├── StartPage.js
        ├── ProfilPage.js
        └── ImagePage.js

The index.html file contains only a list with the entries necessary for navigation, a DIV element with the ID app and a link to the first Javascript file.

Important, this must be integrated as a module.

<body>
  <header>
    <ul>
      <li data-hash="">Start</li>
      <li data-hash="profil">Profil</li>
      <li data-hash="images">Images</li>
    </ul>
  </header>
  <div id="app"></div>
  <script type="module" src="./js/app.js"></script>
</body>

In App.js, the scripts of the individual pages and the script with the help functions are imported first:

import StartPage from './pages/StartPage.js';
import ProfilPage from './pages/ProfilPage.js';
import ImagePage from './pages/ImagePage.js';
import u from "./utils.js"

Then a function from utils.js is called that reacts to clicks on the navigation and brings the content of the respective data-hash into the address bar of the browser.

Changes to this hash are registered via the following event listener and then the router() function is called:

window.addEventListener('DOMContentLoaded', router);
window.addEventListener('hashchange', router);

function router() {

    let page = u.getHashFromURL();
    switch (page) {

        case '/':
            StartPage.render();
            break;

        case 'profil':
            ProfilPage.render();
            break;

        case 'images':
            ImagePage.render();
            break;

        default:
            StartPage.render();
            break;
    }
}

This function first reads the hash from the URL and uses it to render a specific page view.

Before we look at the structure of the page views, two functions of utils.js should be briefly introduced:

This function creates a <style> tag in the header of the HTML file with the content from the string styleTags and the ID styleID.

createStyle: async(styleID, styleTags) => {
    if (!document.getElementById(styleID + "Style")) {
        var style = document.createElement("style");
        style.type = "text/css";
        style.id = styleID + "Style";
        style.innerHTML = styleTags;
        document.getElementsByTagName("head")[0].appendChild(style);
    }
},

This function replaces the HTML code of the element el with the string innerHTML.

setInnerHTML: async(el, innerHTML) => {
    let element = document.getElementById(el);
    element.innerHTML = innerHTML;
},

Finally, the structure of the individual pages, which always follows the same pattern:

integrate CSS code into the header
insert HTML code into the element with the ID app
load data from the API and integrate it into the DOM.

let TextPage = {
    render: async() => {
        u.createStyle('TextPage_style', Style);
        await Content();
        await getData();
    }
};

export default TextPage;

The last line releases the object for export to other files.

The CSS and HTML parts are basically identical, but can be implemented in different ways:

Either as a string with the function call in the object:

const Style = /*CSS*/ `
    #TextPage h2 {
        color: blue;
    } 

    #TextPage p{
        font-family: sans;
    }`;

Or the function is called directly afterwards:

let Content = async() => {
    let innerHTML = /*HTML*/ `
    <div id=TextPage>
       <h1> nonsense Text</h1>
       <h2 id=sentence></h2>
       <p id=paragraph></p>
    </div>`;
    await u.setInnerHTML('app', innerHTML);
}

Finally, only the actual data is missing; this is fetched from the API using fetch and integrated into the corresponding tags using getElementById():

let getData = async() => {
    fetch('https://random-data-api.com/api/hipster/random_hipster_stuff')
        .then((resp) => resp.json())
        .then(function(data) {
            document.getElementById('sentence').innerHTML = data.sentence;
            document.getElementById('paragraph').innerHTML = data.paragraph;
        })
}

So, that's it.

Of course, this system can be extended as much as you like, especially components (slideshows) that are needed again and again can be stored in separate files.

I ask you for constructive criticism of this method and my description (it's the first time I've written something like this).

You can find the complete example on Github: NoFrameworkJS