xaymar/com.xaymar.www
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix some things and improve alert boxes

Browse Source
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2024-05-16 12:00:42 +02:00
parent ee2b80d388
commit ae4921fbb9
3 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/footer.liquid
+1 -1
View File
@@ -1,6 +1,6 @@
<footer id="footer" class="footer">
<div class="content">
<span>{{ site.xaymar.info.footer.copyright }}</span><br/>
<span>{{ site.xaymar.info.footer.copyright }}, All Rights Reserved</span><br/>
<span>Powered by <a href="https://jekyllrb.com/">Jekyll</a>, <a href="https://highlightjs.org/">highlight.JS</a>, <a href="https://disqus.com/">Disqus</a></span>
</div>
</footer>
_posts/2024/2024-05-10-fast-shallow-array-cloning-in-javascript/2024-05-10-fast-shallow-array-cloning-in-javascript.html
+4 -4
View File
@@ -9,12 +9,12 @@ tags: ["JavaScript", "Array", "Shallow-Clone", "Clone", "Duplicate", "ECMAScript
<p class="block">Searching for an answer, I stumbled on <a href="https://stackoverflow.com/questions/3978492/fastest-way-to-duplicate-an-array-in-javascript-slice-vs-for-loop" target="_blank">this StackOverflow question</a>. And as usual, almost all of the answers are simply regurgitated content with nothing to back it up. So with nothing else to do on a weekend, I threw my entire knowlEdge 124.0.2478.97 at the problem, wrote a benchmarking "tool", wrote several ways to do the same, and I think I found it.</p>
<h2 class="block">Coding a Benchmark</h2>
<alert class="block" type="warning">
<alert class="block" data-type="notice">
All code and information provided in this article is licensed under the <a href="https://opensource.org/license/bsd-3-clause" target="_blank">3-Clause BSD License</a>.<br />
Please make sure include the necessary credit in your derivative work: <code>Copyright 2024 Michael Fabian 'Xaymar' Dirks <info-at-xaymar-dot-com></code>
</alert>
<p class="block">I'm not a fan of services like JSPerf or JSBench, so I wrote a generalized JavaScript benchmark. Many of them rely on third-party libraries, which tend to include to rely on more third-party libraries, and when something breaks you never know why or when it'll be fixed. So instead I wrote my own generic benchmarking function using only standard JavaScript, compatible with NodeJS and common Browsers:</p>
<p class="block">I'm not a fan of services like JSPerf or JSBench, as many of them tend to rely on third-party libraries and include permanently running code on the side. And when something breaks you never know why or when it'll be fixed, resulting in delays that really shouldn't be necessary. So instead I wrote my own generic benchmarking function using only standard JavaScript, compatible with NodeJS and common Browsers:</p>
<figure class="block">
<code class="block language-javascript">{% capture "code" %}{% include_relative benchTime.mjs %}{% endcapture %}{{ code | escape }}</code>
@@ -30,7 +30,7 @@ tags: ["JavaScript", "Array", "Shallow-Clone", "Clone", "Duplicate", "ECMAScript
<h1 class="block">Running a Markbench</h1>
<alert class="block" type="warning">These results were generated on 2024-05-16 with an AMD Ryzen 7950X3D paired with 6400Mhz RAM. It is possible that JavaScript engine developers address the shortcomings in the future and as such the results may not be comparable anymore.</alert>
<alert class="block" data-type="warning">These results were generated on 2024-05-16 with an AMD Ryzen 7950X3D paired with 6400Mhz RAM. It is possible that JavaScript engine developers address the shortcomings in the future and as such the results may not be comparable anymore.</alert>
<p class="block">Now that we have everything, we just need to run the test, and even you can do it in your Browsers' Developer Console. Just paste this in: <code>const { default: asc } = await import("./arrayShallowClone.mjs"); for (let e of [256, 2048, 16384, 131072, 1048576]){ console.log(e); asc(e); };</code>, hit enter/return and it should start measuring. For my own sanity, I limited myself to NodeJS V8, Firefox SpiderMonkey and Chromium V8 only.</p>
@@ -432,7 +432,7 @@ tags: ["JavaScript", "Array", "Shallow-Clone", "Clone", "Duplicate", "ECMAScript
</figure>
</details>
<p class="block">This is practically insanity, but hey - why not test it anyway. This is effectively a repeat of the previous block, but the numbers are even smaller. In NodeJS the fastest way is still <code>array.slice()</code>, in Edge it is <code>Object.assign([], array)</code>, and Firefox is still cheating.</p>
<p class="block">This is practically insanity, but hey - why not test it anyway. It's effectively a repeat of the previous block, but the numbers are even smaller. In NodeJS the fastest way is still <code>array.slice()</code>, in Edge it is <code>Object.assign([], array)</code>, and Firefox is still cheating.</p>
<h2 class="block">What is truly the fastest way to shallow clone an array?</h2>
_sass/_block-alert.scss
+52 -10
View File
@@ -1,19 +1,23 @@
alert.block {
position: relative;
display: block;
margin: .5em;
margin-left: 1.5em;
margin-right: 1.5em;
padding: 0.5em;
padding: .5em;
padding-left: 4em;
min-height: 4em;
border: 1px solid hsl($theme-hue 30% 40%);
border-radius: 1em;
border: 2px solid hsl($theme-hue 30% 40%);
border-radius: 0.2rem;
background: hsl($theme-hue 20% 30%);
box-shadow: 0px 0px 2px 2px rgb(0, 0, 0);
overflow: hidden;
}
alert::before {
content: "✅";
position: absolute;
top: 0px;
bottom: 0px;
@@ -23,22 +27,60 @@ alert::before {
min-width: 4rem;
min-height: 4rem;
font-size: 4rem;
content: "⚠";
font-size: 3rem;
white-space: no-wrap;
text-align: center;
line-height: 1em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
alert[data-type="hint"] {
alert.block[data-type*="good"] {
border-color: oklch(75.52% 0.1158 150.35);
background: oklch(54.45% 0.1158 150.35);
}
alert[data-type*="good"]::before {
content: "👍";
}
alert.block[data-type*="bad"] {
border-color: oklch(62.8% 0.2568 29.234);
background: oklch(52.37% 0.1576 29.234);
}
alert[data-type*="bad"]::before {
content: "👎";
}
alert.block[data-type*="hint"] {
border-color: oklch(69.41% 0.138 238.24);
background: oklch(49.11% 0.0785 238.24);
}
alert[data-type*="hint"]::before {
content: "❔";
}
alert[data-type="warning"]::before {
alert.block[data-type*="notice"] {
border-color: oklch(69.41% 0.138 238.24);
background: oklch(49.11% 0.0785 238.24);
}
alert[data-type*="notice"]::before {
content: "🔍";
}
alert.block[data-type*="warning"] {
border-color: oklch(71.76% 0.187 49.76);
background: oklch(52.65% 0.113 49.76);
}
alert[data-type*="warning"]::before {
content: "⚠";
}
alert[data-type="error"]::before {
alert.block[data-type*="error"] {
border-color: oklch(62.8% 0.2568 29.234);
background: oklch(52.37% 0.1576 29.234);
}
alert[data-type*="error"]::before {
content: "❌";
}