DEV Community: owieczka

Lepsza Inicjalizacja Tablic 2D | Better 2D Array Init

owieczka — Sat, 24 May 2025 08:00:00 +0000

𝐏𝐫𝐨𝐬𝐭𝐬𝐳𝐲 𝐤𝐨𝐝 - 𝐋𝐞𝐩𝐬𝐳𝐲 𝐤𝐨𝐝

Zawsze tworzyłem tablice w #JavaScript za pomocą dwóch zagnieżdżonych pętli for

𝚌𝚘𝚗𝚜𝚝 𝚛𝚘𝚠𝚜 = 𝟷𝟶, 𝚌𝚘𝚕𝚜 = 𝟷𝟶;
𝚕𝚎𝚝 𝚐𝚛𝚒𝚍 = [];
𝚏𝚘𝚛(𝚕𝚎𝚝 𝚒 = 𝟶 ; 𝚒 < 𝚌𝚘𝚕𝚜; 𝚒++) {
𝚕𝚎𝚝 𝚛𝚘𝚠 = [];
𝚏𝚘𝚛 (𝚕𝚎𝚝 𝚓=𝟶 ; 𝚓 < 𝚛𝚘𝚠𝚜 ; 𝚓++) 𝚛𝚘𝚠.𝚙𝚞𝚜𝚑(𝟷)
𝚐𝚛𝚒𝚍.𝚙𝚞𝚜𝚑(𝚛𝚘𝚠)
}

a od lat istnieje lepszy sposób

𝚌𝚘𝚗𝚜𝚝 𝚛𝚘𝚠𝚜 = 𝟷𝟶, 𝚌𝚘𝚕𝚜 = 𝟷𝟶;
𝚕𝚎𝚝 𝚐𝚛𝚒𝚍 = 𝙰𝚛𝚛𝚊𝚢.𝚏𝚛𝚘𝚖({ 𝚕𝚎𝚗𝚐𝚝𝚑: 𝚛𝚘𝚠𝚜 }, () => 𝙰𝚛𝚛𝚊𝚢(𝚌𝚘𝚕𝚜).𝚏𝚒𝚕𝚕(𝟷));

𝐒𝐢𝐦𝐩𝐥𝐞𝐫 𝐜𝐨𝐝𝐞 - 𝐁𝐞𝐭𝐭𝐞𝐫 𝐜𝐨𝐝𝐞

I've always created 2d arrays in #JavaScript using two nested loops

while from years there is a better way

saas #software #javascript #owieczka #css #web #webdevelopment #code #softwarehouse #math #matematyka #developer

Javascript SVG Maze Generator

owieczka — Sat, 10 May 2025 07:20:18 +0000

𝐋𝐚𝐛𝐢𝐫𝐲𝐧𝐭𝐲 𝐭𝐨 𝐟𝐚𝐬𝐜𝐲𝐧𝐮𝐣ą𝐜𝐞 𝐬𝐭𝐫𝐮𝐤𝐭𝐮𝐫𝐲, a ich generowanie może być wręcz 𝐡𝐢𝐩𝐧𝐨𝐭𝐲𝐳𝐮𝐣ą𝐜𝐞

Istnieje wiele algorytmów tworzenia labiryntów, takich jak 𝐃𝐅𝐒 (𝐃𝐞𝐩𝐭𝐡-𝐅𝐢𝐫𝐬𝐭 𝐒𝐞𝐚𝐫𝐜𝐡), 𝐏𝐫𝐢𝐦𝐬 𝐀𝐥𝐠𝐨𝐫𝐢𝐭𝐡𝐦 czy 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐁𝐚𝐜𝐤𝐭𝐫𝐚𝐜𝐤𝐢𝐧𝐠. Jednym z najprostszych i najbardziej satysfakcjonujących jest właśnie 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐁𝐚𝐜𝐤𝐭𝐫𝐚𝐜𝐤𝐢𝐧𝐠, znany jako 𝐚𝐥𝐠𝐨𝐫𝐲𝐭𝐦 𝐤𝐨𝐩𝐚𝐧𝐢𝐚 𝐭𝐮𝐧𝐞𝐥𝐢.

Działa on według kilku podstawowych kroków:
🔹Rozpoczyna się od losowego punktu.
🔹Kopie tunel w kierunku nieodwiedzonych sąsiadów.
🔹Cofanie następuje wtedy, gdy nie ma dostępnych ścieżek.

Najlepszym sposobem wizualizacji procesu tworzenia labiryntu jest pokazanie jego stopniowego powstawania i rozwoju. W idealnym przypadku można by wykorzystać grafikę Żół𝐰𝐢𝐚 (#Turtle), która świetnie nadaje się do procedur graficznych. Niestety, w środowisku webowym nie ma natywnego wsparcia dla tej techniki. 𝐍𝐚 𝐬𝐳𝐜𝐳ęś𝐜𝐢𝐞 𝐒𝐕𝐆 𝐨𝐟𝐞𝐫𝐮𝐣𝐞 𝐤𝐫𝐳𝐲𝐰𝐞 𝐢 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐲 𝐏𝐀𝐓𝐇, 𝐤𝐭ó𝐫𝐞 𝐩𝐨𝐳𝐰𝐚𝐥𝐚𝐣ą 𝐧𝐚 𝐩𝐫𝐨𝐜𝐞𝐝𝐮𝐫𝐚𝐥𝐧𝐞 𝐨𝐩𝐢𝐬𝐚𝐧𝐢𝐞 𝐠𝐫𝐚𝐟𝐢𝐤𝐢 𝐢 𝐣𝐞𝐣 𝐝𝐲𝐧𝐚𝐦𝐢𝐜𝐳𝐧𝐞 𝐠𝐞𝐧𝐞𝐫𝐨𝐰𝐚𝐧𝐢𝐞.

Zobaczcie sami, jak łatwo można stworzyć własny, hipnotyzujący labirynt za pomocą #JavaScript i #SVG
https://codepen.io/owcakw/pen/dPPmoBQ

Jeśli potrzebujesz pomocy ze swoim projektem, albo masz pomysł ale nie wiesz jak to zrealizować, 𝐳𝐠ł𝐨ś 𝐬𝐢ę 𝐝𝐨 𝐧𝐚𝐬, na pewno pomożemy.

𝐌𝐚𝐳𝐞𝐬 𝐚𝐫𝐞 𝐟𝐚𝐬𝐜𝐢𝐧𝐚𝐭𝐢𝐧𝐠 𝐬𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞𝐬, and watching them being generated can be 𝐡𝐲𝐩𝐧𝐨𝐭𝐢𝐜.

There are many algorithms for maze generation, such as 𝐃𝐅𝐒 (𝐃𝐞𝐩𝐭𝐡-𝐅𝐢𝐫𝐬𝐭 𝐒𝐞𝐚𝐫𝐜𝐡), 𝐏𝐫𝐢𝐦’𝐬 𝐀𝐥𝐠𝐨𝐫𝐢𝐭𝐡𝐦, and 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐁𝐚𝐜𝐤𝐭𝐫𝐚𝐜𝐤𝐢𝐧𝐠. One of the simplest and most satisfying methods is 𝐑𝐞𝐜𝐮𝐫𝐬𝐢𝐯𝐞 𝐁𝐚𝐜𝐤𝐭𝐫𝐚𝐜𝐤𝐢𝐧𝐠.

It follows a few basic steps:
🔹Starts from a random point.
🔹Digs tunnels toward unvisited neighbors.
🔹Backtracks when no paths are available.

The best way to visualize the maze creation process is by showing its gradual formation and growth. Ideally, #Turtle Graphics would be a great tool for this, as they are perfect for procedural drawing. However, the web environment lacks native support for turtle-based graphics. 𝐅𝐨𝐫𝐭𝐮𝐧𝐚𝐭𝐞𝐥𝐲, 𝐒𝐕𝐆 𝐩𝐫𝐨𝐯𝐢𝐝𝐞𝐬 𝐜𝐮𝐫𝐯𝐞𝐬 𝐚𝐧𝐝 𝐏𝐀𝐓𝐇 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 𝐭𝐡𝐚𝐭 𝐞𝐧𝐚𝐛𝐥𝐞 𝐩𝐫𝐨𝐜𝐞𝐝𝐮𝐫𝐚𝐥 𝐠𝐫𝐚𝐩𝐡𝐢𝐜𝐬 𝐝𝐞𝐬𝐜𝐫𝐢𝐩𝐭𝐢𝐨𝐧𝐬 𝐚𝐧𝐝 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 𝐠𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐨𝐧.

See for yourself how easy it is to create your own hypnotic maze using #JavaScript and #SVG!
https://codepen.io/owcakw/pen/dPPmoBQ

If you need help with your project, or you have an idea but you don't know how to implement it, and you need help, 𝐰𝐫𝐢𝐭𝐞 𝐭𝐨 𝐮𝐬 𝐚𝐧𝐝 𝐰𝐞 𝐰𝐢𝐥𝐥 𝐡𝐞𝐥𝐩 𝐲𝐨𝐮!!.

saas #software #javascript #owieczka #css #web #webdevelopment #code #softwarehouse #developer #maze #algorithm

Pure CSS prime calculation

owieczka — Fri, 29 Mar 2024 21:16:16 +0000

Use CSS selector power to calculate Primes

You probably didn't know that pure CSS can be used to calculate prime numbers. Prime numbers are such a numbers that divided only by 1 and itself.

Normaly we can compute primes by Sieve of Eratosthenes. It's a clever algorytm invented by Greeks 3rd cent BCE. You starts with list of all numbers. In HTML we can create list of all numbers with help of CSS counters and i element.

<div class="container">
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
  align-content: flex-start;
  counter-reset: i_counter; 
}

.container i {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  transition: 
    width 2s ease-out,
    background-color 0.2s ease-out;
  width: 2.0rem;
  height: 2.0rem;
  border-radius: 5px;
  border: 1px solid hsl(45 0% 90%);
  box-shadow: 4px 4px 8px -4px rgba(66, 68, 90, 1);
  overflow: hidden;
  font-style: normal;
}

.container i:before {
  counter-increment: i_counter;
  content: counter(i_counter);
}

Step two is to remove all composite numbers. We can use CSS selectors :nth-child to remove all multiplication of a given number. But we must keep 0th element of a series. We can do it with :is and :not selectors.

.container :is(
i:nth-child(0n+1),
i:nth-child(2n):is(:not(i:nth-child(0n+2))),
i:nth-child(3n):is(:not(i:nth-child(0n+3))),
i:nth-child(4n):is(:not(i:nth-child(0n+4))),
i:nth-child(5n):is(:not(i:nth-child(0n+5))),
i:nth-child(6n):is(:not(i:nth-child(0n+6))),
i:nth-child(7n):is(:not(i:nth-child(0n+7))),
i:nth-child(8n):is(:not(i:nth-child(0n+8))),
i:nth-child(9n):is(:not(i:nth-child(0n+9))),
i:nth-child(10n):is(:not(i:nth-child(0n+10))),
)
{
  width: 10px;
  background-color: hsl(0 60% 90%);
  /*display: none;*/
  font-size: 0.5rem;
}

For finding all primes up to 100 it is sufficient to remove all multiplicative of a numbers from 1 to 10.

Full solution - on Codepen

Pure CSS BarChart

owieczka — Sat, 16 Mar 2024 14:13:36 +0000

Modern CSS allows for many fantastic stuff like pure css barcharts. We can just define data series in HTML and bunch of css and woula. No needs for any Javascript.

<div class="barchart" style="--scale-x:5;--scale-y:10;">
  <div style="--value: 10;" name="Dogs"></div>
  <div style="--value: 13;" name="Cows"></div>
  <div style="--value: 8;" name="Sheeps"></div>
</div>

Details can be examinded in my codepen

CSS Only Working Clock

owieczka — Sun, 18 Feb 2024 21:23:49 +0000

Did you ever wonder if it is posible to create working analog clock in web browser with out javascript at all just with css styling.

I do. So I have create one. At the beginning as with all old clocks you need to set the clock hands to correct time, but its all, after initial setup it works on its own. All of this is possible with css animation.

Try it yourself https://codepen.io/owcakw/pen/vYPPWLg

Key to its working is a long css animation of a hands. 3600s long for minut hand and 43200s long for hour hand. Current time can be set via css variables and animation delay tick (negative value can setup animation progress).

You may render the clock with time taken from the serwer at html request time, and from that it will works alone without a single line of javascript.

CSS Equivalent of the "if" statement

owieczka — Sun, 11 Feb 2024 00:15:37 +0000

Sometimes there is a need to select between two values based on some condition in css styling. One can uses simple two classes or javascript two select right stiling. But thanks to css variables if statements can be done also in pure CSS.

To select between two values in pure CSS you can use folowing math trick

Pseudocod:

if( valueSel < th) 
  return valueA
else
  return valueB

This statement can be converted to folowing pseudocod:

selector = (sign(valueSel-th)+1)/2
return valueA * (1-selector) + valueB * selector

Which can be expresed with help of css variables as:

CSS:

.some-class {
  --valueSel: /* Some Value - predicate */;
  --th: /* Some Treshold */;
  --valueA: /* Result A */;
  --valueB: /* Result B */;
  --selector: calc(clamp(0,tan( clamp(-1,var(--valueSel) - th, 1) ),1));
  --result: calc( var(--valueA) * (1 - var(--selector) ) + var(--valueB) * var(--selector) );    
}

The selection can be extended to selecting colors via mix-color

You can see usage if this in Pure CSS radiational progress bar
https://codepen.io/owcakw/pen/KKEGvgZ

Bramki logiczne w Excelu

owieczka — Tue, 30 Jan 2024 20:41:32 +0000

Arkusz kalkulacyjny może być doskonałym narzędziem do nauki.

Współczesne komputery bazują na dwóch stanach 0 i 1 oraz na 3 prostych bramkach logicznych: AND, OR, NOT. Każda informacja, liczba, tekst, zdjęcie czy film składa się w istocie z serii zer i jedynek zapisanych w pamięci komputera. A same komputery to bardzo skomplikowane urządzenia złożone z bardzo dużej (miliardy) liczby bramek logicznych.

W sieci można znaleźć zaawansowane programy pozwalające na symulowanie układów elektronicznych złożone z sieci bramek logicznych. Jednak zwykły arkusz kalkulacyjny może z powodzeniem służyć do zobrazowania i symulacji prostych układów elektronicznych, od prostych pojedynczych bramek aż do całych procesorów.

Na początek przedstawiam wam arkusz kalkulacyjny z prostym 3 bitowym symulatorem.

Link do arkusza kalkulacyjnego - z prezentacją działania podstawowych bramek logicznych

https://docs.google.com/spreadsheets/d/13_JWoGkYPzL5NPdI42MAoRUFRXRORGx4/edit?usp=sharing&ouid=111887487108574597440&rtpof=true&sd=true