tag:blogger.com,1999:blog-1993473749231830822024-03-19T08:31:32.697+01:00Kibo worldBlog about web-development and other nice things.Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.comBlogger83125tag:blogger.com,1999:blog-199347374923183082.post-26918237670041156452023-09-11T10:40:00.004+02:002023-09-11T10:46:50.846+02:00Assigns a default value<p><b>Object destructuring and default arguments</b>:</p>
<script async src="//jsfiddle.net/tomasjurman/rnkh5fvu/embed/js/"></script>
<br /><br />
<p><b>A default value to the default object</b>:</p>
<script async src="//jsfiddle.net/tomasjurman/rnkh5fvu/10/embed/js/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-69246535018678509882023-05-18T17:04:00.007+02:002023-05-18T17:06:26.340+02:00Function composition<p>Function composition is a mathematical operation that <b>combines two or more functions</b> in such a way that the output of one function becomes the input for the next function. <b>The result is a new function that combines the behavior of both functions</b>.</p>
<script async="" src="//jsfiddle.net/tomasjurman/uwztd89e/embed/js/"></script>
<br /><br />
<h3>Implementation of general composition function</h3>
<script async="" src="//jsfiddle.net/tomasjurman/uwztd89e/1/embed/js/"></script>
<p>The corresponding execution order is from left to right. If you want to execute from right to left, then you can use the Array.prototype.reduceRight method.</p>
<h3>Example</h3>
<script async="" src="//jsfiddle.net/tomasjurman/uwztd89e/3/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-88269690874454570942023-04-25T09:18:00.005+02:002023-04-25T09:22:05.795+02:00Memoization function<p>I found an interesting function while working <a href="https://github.com/Kibo/AstrologyChart2" target="_blank">on my latest project</a>. I call it <b>a memoization function</b>.</p><p>The function <b>stores the results in memory</b> and returns immediately if called repeatedly with the same arguments. Such a function is suitable for some longer and demanding calculations.</p><p>That is nothing new, but it's a nice piece of code. ;)</p>
<p>Look at this:</p>
<script async="" src="//jsfiddle.net/tomasjurman/swx8rnfc/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-22208595051843411462023-04-18T20:10:00.004+02:002023-04-18T20:12:35.700+02:00Dynamically loading font resources<p>Did you know, that <b>fonts can be downloaded with Javascript</b> using a new API, <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API" target="_blank">the CSS Font Loading API</a>?</p>
<p>The API exposes 2 objects - <b>FontFace</b> and <b>FontFaceSet</b>. A FontFace represents a font. After loaded it, the font can be added to the list of available fonts (called FontFaceSet), and then can be used normally.</p>
<p>See example:</p>
<script async src="//jsfiddle.net/tomasjurman/wjdhLpvu/5/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-74134584663766093292023-03-14T09:23:00.003+01:002023-03-14T09:24:47.284+01:00Extract the non-tagged contents of HTML in browser<p>Yes, you can use the RegularExpression of cource. But, there is cool idea, how to extract tagged content in browser:</p>
<script async src="//jsfiddle.net/tomasjurman/yfgk0nqw/9/embed/js/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-43599547522787427672023-03-14T08:34:00.003+01:002023-03-14T08:34:40.739+01:00JS String padding<p>Sometimes we want the string to have a specific length. We can use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart" target="_blank">padStart</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd" target="_blank">padEnd</a> methods.</p>
<script async src="//jsfiddle.net/tomasjurman/zkw37dre/31/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-83211588167022906182023-02-05T09:02:00.002+01:002023-02-05T09:02:45.088+01:00Removing Event Listeners with AbortController()<p>With the AbortControler you can <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController/AbortController" target="_blank">cancel fetch request</a> but <b>remove Event Listeners</b> too.</p>
<p style="margin-bottom:0">Let's look at an example:</p>
<script async src="//jsfiddle.net/tomasjurman/cxejwq8y/embed/js/"></script>
<br><br>
<p style="margin-bottom:0">You can use one signal to remove multiple listeners:</p>
<script async src="//jsfiddle.net/tomasjurman/cxejwq8y/2/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-71127850401728629602022-12-02T12:50:00.001+01:002022-12-02T12:51:04.227+01:00Promise with timeout<p>When you use <i>await</i>, it will wait until the <i>Promise</i> is either resolved or rejected. But sometimes API requests we make don’t get any response from the server.
</p><p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController" target="_blank">AbortController</a> to abort one or more Web requests. The second way to solve this is to create a promise with a timeout.
<script async="" src="//jsfiddle.net/tomasjurman/5k0dj1b6/37/embed/js/"></script>
</p><p></p>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-84350562458108562752022-11-25T11:05:00.001+01:002022-11-25T11:05:24.739+01:00Pipes and error handling<p>When using pipe(), the error events are not propagated automatically through the pipeline:
<script async="" src="//jsfiddle.net/tomasjurman/70kdxe31/2/embed/js/"></script>
</p><p>We will catch only the errors coming from stream2. </p><p>If we want to catch any
error generated from stream1 , we have to attach another error listener directly to it:
<script async="" src="//jsfiddle.net/tomasjurman/70kdxe31/5/embed/js/"></script>
</p><hr />
<h3>pipeline() helper function</h3>
<p>You can use the pipeline() from the core stream package.
<script async="" src="//jsfiddle.net/tomasjurman/70kdxe31/12/embed/js/"></script>
</p><p>This pipes every stream passed in the arguments list to the next one. For
each stream, it will also register a proper error and close listeners.</p><p></p><p></p><p></p>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-89541163049785080832022-11-04T10:41:00.002+01:002022-11-04T10:45:04.044+01:00Vue3 - Attribute Inheritance<p>The child component by default inherit the declared attributes. Vue3 calls it <a href="https://vuejs.org/guide/components/attrs.html#fallthrough-attributes" target="_blank">the Fallthrough Attributes</a>.</p>
<p></p><blockquote>A "fallthrough attribute" is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.</blockquote><p></p>
<p>If you do not want a component to automatically inherit attributes, you can set <i>inheritAttrs: false</i> in the component's options. These fallthrough attributes can be accessed directly in template expressions as <i>$attrs</i>.</p>
<p>Example:</p>
<script async src="//jsfiddle.net/tomasjurman/nz9rec6u/2/embed/js/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-4695962921047716792022-03-02T08:23:00.000+01:002022-03-02T08:23:30.488+01:00Optional object property with spread operator<p>I saw cool magic in my previous project. The optional object property.</p>
<p>Let see example:</p>
<script async src="//jsfiddle.net/tomasjurman/7yshe0gd/7/embed/js/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-25987298136058954122022-02-22T10:34:00.005+01:002022-02-23T08:11:52.008+01:00Format Dates In JavaScript<p>Working with a date and time in JS was awful in the past. I dont know about you, but I used <a href="https://momentjs.com/" target="_blank">MomentJS</a> or <a href="https://date-fns.org/" target="_blank">date-nfs</a> library. </p><p>Now it is possible to start using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat" target="_blank">Internationalization API</a> for formating a date and time. Support is good <a href="https://caniuse.com/internationalization" target="_blank">in all browsers</a>.</p><p>Let see an example:</p>
<script async="" src="//jsfiddle.net/tomasjurman/82L9mgna/6/embed/js/"></script>
<p>If you want to use the browser’s locale, you must pass an empty Array in the constructor. The second argument is <i>options</i>. For more details <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters" target="_blank">see the documentation</a>.</p><p>There is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat" target="_blank">Intl.RelativeTimeFormat()</a> class for relative manipulation with a date and time. The Intl.RelativeTimeFormat is similar to the Intl.DateTimeFormat.</p><p>Let see an example:</p>
<script async="" src="//jsfiddle.net/tomasjurman/82L9mgna/10/embed/js/"></script>
<hr />
<br />
<p><b>Bonus :)</b></p>
<script async src="//jsfiddle.net/tomasjurman/b7gvdkc0/2/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-60080690507408836192022-02-18T18:31:00.000+01:002022-02-23T15:02:37.846+01:00Streams - Transform<p>Transform streams are a <a href="https://nodejs.org/dist/latest-v16.x/docs/api/stream.html#duplex-and-transform-streams" target="_blank">special kind of Duplex stream</a>. Transform streams apply some kind of transformation to each chunk of data that they receive from the Writable side, and then make the transformed data available on the Readable side.</p><p>For implementing a new Transform stream, we have to fill <i>_transform()</i> and optionally <i>_flush()</i> methods.</p><p>Let see example:</p>
<script async src="//jsfiddle.net/tomasjurman/fhr1bquc/embed/js/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-42970180822522683962022-02-17T11:27:00.004+01:002022-02-17T11:27:59.849+01:00Streams - Readable, Writable<p><a href=" https://nodejs.org/dist/latest-v16.x/docs/api/stream.html" target="_blank">Streams</a> are one of the most important components of Node.js </p><p>For example, the <b>fs module</b> has <i>createReadStream()</i> for reading from a file and <i>createWriteStream()</i> for writing to a file, the <b>HTTP request and response</b> objects are essentially streams, the <b>zlib module</b> allows compress and decompress data using a streaming interface and, <b>crypto module</b> exposes streaming primitives like createCipheriv and createDecipheriv.</p><p>Every stream in Node.js is an implementation of one of the four base abstract classes. <b>Writable, Readable, Duplex, Transform</b>. Each stream class is also an <a href="https://nodejs.org/dist/latest-v16.x/docs/api/events.html#events" target="_blank">instance of EventEmitter</a>.</p><p>Streams support two operating modes:</p><p></p><ul style="text-align: left;"><li>Binary mode - buffers or strings</li><li>Object mode: objects</li></ul>
<hr />
<h2 style="text-align: left;">Readable streams</h2><p>A Readable stream represents a source of data. There are two approaches to receive the data from a Readable stream: non-flowing (or paused) and flowing. </p><p><b>Paused mode</b></p><p>In paused mode, you need to call <i>read()</i> on the stream instance repeatedly until every chunk of data has been read.</p>
<script async="" src="//jsfiddle.net/tomasjurman/o64emxat/embed/js/"></script>
<p>The <i>highWaterMark</i> property, passed as an option to <i>fs.createReadStream</i>, determines how much data buffers inside the stream.</p><p>All Readable streams begin in <i>paused mode</i> but can be switched to <i>flowing mode</i> in one of the following ways: </p><p></p><ul style="text-align: left;"><li>Adding a 'data' event handler.</li><li>Calling the stream.resume() method.</li><li>Calling the stream.pipe() method to send the data to a Writable.</li></ul><p></p>
<br />
<p><b>Flowing mode</b></p>
<script async="" src="//jsfiddle.net/tomasjurman/o64emxat/2/embed/js/"></script>
<p>You can call <i>readable.pause()</i> and <i>readable.resume()</i></p>
<p><b>Readable streams from iterables</b></p>
<p>You can create Readable stream instances from arrays or other iterable objects using the <i>Readable.from()</i></p>
<script async="" src="//jsfiddle.net/tomasjurman/o64emxat/4/embed/js/"></script>
<hr />
<h2 style="text-align: left;">Writable streams</h2>
<p>A Writable stream represents a data destination. The example bellow shows an elegant way to create a gziped copy of a file.</p>
<script async src="//jsfiddle.net/tomasjurman/o64emxat/8/embed/js/"></script>
<p>In the next post, I am going to look at <b>Transform streams</b>.</p>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-33088185021353575312022-02-14T11:24:00.005+01:002022-03-21T12:56:33.521+01:00Compare locale string<p>Hi guys</p><p>this is a simple post, but I feel it useful. </p><p>I wrote a comparison function for the Czech language in many times. A friend of mine show me a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator" target="_blank">Intl.Collator</a> object today. I acknowledge that I have overlooked it in the past many times.</p><p>Lets look at example:</p>
<script async="" src="//jsfiddle.net/tomasjurman/9u0jboaf/4/embed/js/"></script>
<br/>
<script async src="//jsfiddle.net/tomasjurman/wnyaocvk/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-877158835048497392022-02-14T10:44:00.003+01:002022-02-14T10:45:18.472+01:00Functions chaining with reduce<p>Functions chain is very strong pattern in functional programing.</p>
<p>Let see a very simple example:</p>
<script async="" src="//jsfiddle.net/tomasjurman/vgd48wa0/7/embed/js/"></script>
<p>The evaluation of a functions chain takes place <b>from right to left.</b></p>
<script async="" src="//jsfiddle.net/tomasjurman/vgd48wa0/17/embed/js/"></script>
<p>The last step is to create a universal chain function <b>with any number of arguments</b>. I use the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight" target="_blank">reduceRight</a> function from the array with this.</p>
<script async="" src="//jsfiddle.net/tomasjurman/vgd48wa0/24/embed/js/"></script>
<p>Happy coding.</p>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-768234114095000192022-01-31T08:32:00.005+01:002022-01-31T10:29:37.112+01:00Promises chaining with reduce
<p>Hi devs,</p>
<p>I am going to made a promises chain with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce" target="_blank">reduce function</a> in this post. I think it is an elegant solution to <b>the sequential execution of async tasks</b>.</p>
<blockquote>
"<i>Each .then() returns a newly generated promise object, which can optionally be used for chaining.</i>"
</blockquote>
<cite><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#chained_promises">MDN Web Docs</a></cite>
<p>Let's see example:</p>
<script async src="//jsfiddle.net/tomasjurman/9a6wm1tu/40/embed/js/"></script>
<br><br>
<p>Now let's make chaining with reduce:</p>
<script async src="//jsfiddle.net/tomasjurman/9a6wm1tu/25/embed/js/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-10195569369274544482022-01-28T09:27:00.002+01:002022-01-28T09:27:27.239+01:00Eager & lazy Promise<p>Promises <b>are always eager</b> to the execution process. It means that when a Promise is created, the callback <b>is immediately executed</b>. That is ok, but sometimes you need call Promise in specific time, for example after setting some resources. </p><p>The sollution is to <b>wrap a Promise in a function</b>.</p>
<p>Lets look an example:</p>
<script async src="//jsfiddle.net/tomasjurman/c7xsfq0d/7/embed/js/"></script>
<p>Happy codding.</p>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-49621924831253271482022-01-26T09:13:00.002+01:002022-01-26T09:13:52.923+01:00Conccurency Task queue<p>Spawning parallel tasks without control can often lead to excessive load. For instance sending bulk emails or downloads a lot of files slightly exceeds server resource limit.</p><p>In this post I am going to make a <b>parallel tasks queue with concurrency limit control</b>. </p><p>This queue extends <a href="https://nodejs.org/dist/latest-v16.x/docs/api/events.html#class-eventemitter" target="_blank">EventEmitter</a>. It is possible to receive errors and get a message after finish.</p>
<p>Let see a queue:</p>
<script async src="//jsfiddle.net/tomasjurman/7wsp6Lav/1/embed/js/"></script>
<p><br /></p><p>Let see a examle:</p>
<script async src="//jsfiddle.net/tomasjurman/7wsp6Lav/2/embed/js/"></script>
<p><br /></p>
<p>Happy coding.</p><p>Resource: </p><p></p><ul style="text-align: left;"><li><a href="https://github.com/Kibo/TaskQueue" target="_blank">Source code on Github</a></li></ul><p></p><p><br /></p>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-81359038422994625512022-01-25T10:28:00.004+01:002022-01-25T10:28:49.913+01:00Try/ Catch Wrapper<p>Hey Guys,</p><p>do you also have a lots of Try/ Catch in the code? Of course yes. In my previous project I saw interesting wrapper for that.</p><p>Let see it:</p>
<script async="" src="//jsfiddle.net/tomasjurman/csy03qof/17/embed/js/"></script>
<p>Happy codding!</p>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-82611992794416716752022-01-13T15:14:00.002+01:002022-01-13T15:14:04.630+01:00Arguments in arrow function in JavaScript<p>Yes, that is true. You canot use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments" target="_blank">the arguments object</a> in arrow function. But if you want to access the arguments object in an arrow function, you can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">the rest parameters feature</a>.</p><p>See the example bellow:</p>
<script async="" src="//jsfiddle.net/tomasjurman/j8mLzbva/8/embed/"></script>
<script async="" src="//jsfiddle.net/tomasjurman/j8mLzbva/9/embed/"></script>
<script async="" src="//jsfiddle.net/tomasjurman/j8mLzbva/12/embed/"></script>
<p>Happy coding.</p>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-32247558817968036222022-01-07T08:06:00.000+01:002022-01-07T08:06:19.911+01:00Conditional async import in JavaScript<p>In this post I am going to talk about conditional import module in JavaScript ( <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ECMAScript modules</a> ).</p><p>The import statemen in JavaScript is static and therefore has two limitation:</p><p></p><ol style="text-align: left;"><li>a module identifier cannot be constructed at runtime</li><li>have to be declared at the top level of file and therefore cannot be nested within control flow statement like if statement.</li></ol><p></p><p>In case you need conditional import you can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports">async dynamic import</a>. Async import can be performed at runtime using special import() function.</p><p>The module identifier can be any module identifier supported by static import.</p><p style="margin-bottom:0">Let see example:</p>
<script async src="//jsfiddle.net/tomasjurman/bkLsg6vp/1/embed/"></script>
<p style="margin-bottom:0">This form also supports the await keyword:</p>
<script async src="//jsfiddle.net/tomasjurman/314kjesb/embed/"></script>Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-62140367220916287832021-12-30T12:14:00.002+01:002021-12-30T12:15:24.110+01:00Playing with async function<p> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" target="_blank">Async/ await</a> is cool feature in JavaScript. Much has been written about it. In this post I would like to show how to resolve more independent async functions calls.</p><p>Let's have a simple promise call. It takes <b>1 second</b>.</p>
<script async="" src="//jsfiddle.net/tomasjurman/zwdpt4Lx/23/embed/"></script>
<p>Now we will call the function multiple times <b>using await</b>. It takes aproximately <b>10 seconds</b>.</p>
<script async="" src="//jsfiddle.net/tomasjurman/zwdpt4Lx/27/embed/"></script>
<p>When our asynchronous function is independent, it is <b>useful to use Promise.all() instead of await</b>. It fulfilled all promises in time approximately <b>1 second</b>.</p>
<script async="" src="//jsfiddle.net/tomasjurman/zwdpt4Lx/28/embed/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-84513648712310907612021-12-23T14:50:00.005+01:002021-12-23T15:05:31.484+01:00Javascript closures and recursion<h2>What is a closure?</h2>
A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables.
<script src="https://gist.github.com/Kibo/8f98103f2b3bcda13a725e69839cf426.js"></script>
<p>I think, that closures are very handy for <b>recursive call</b>.</p>
<h2>What is a recursion?</h2>
Simply said, the process in which a function calls itself.
<div class="separator" style="clear: both;"><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Serpiente_alquimica.jpg/220px-Serpiente_alquimica.jpg" style="display: block; padding: 1em 0px; text-align: left;"><img alt="" border="0" data-original-height="219" data-original-width="220" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Serpiente_alquimica.jpg/220px-Serpiente_alquimica.jpg" width="320" /></a></div>
<p>When you create a recursive function, keep in mind that there must be an escape from the recursive function, otherwise you will get into an infinite loop.</p>
<p>Below I created a function, which call yourself. Recursion can be very complex, but the principle is the same.</p>
Try it yourself:
<script async="" src="//jsfiddle.net/tomasjurman/14gqo5km/4/embed/"></script>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0tag:blogger.com,1999:blog-199347374923183082.post-12824941075432151402021-12-05T13:53:00.004+01:002021-12-05T13:54:51.872+01:00Simple accordion on your website<p>Hey guys! Do you know about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" target="_blank"><i>details</i> and <i>summary</i></a> HTML5 tags?</p>
<p>This creates a simple accordion on your website. It si simple and elegant, isn't it?</p>
<p>Example:</p>
<details>
<summary>JavaScript</summary>
JavaScript (/ˈdʒɑːvəˌskrɪpt/),[10] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[11] JavaScript is high-level, often just-in-time compiled and multi-paradigm. It has dynamic typing, prototype-based object-orientation and first-class functions.
</details>
<details>
<summary>Node</summary>
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,[6] unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.
</details>
Tomas Jurmanhttp://www.blogger.com/profile/00104562212599535461noreply@blogger.com0