tag: Learn

Easy and right ways to calculate difference between two dates in Javascript. Problem We are given two dates and we have to print the difference between those two dates in days. Since we are given two valid dates, half of our problem is already gone and we have not started yet. Get started Calculate number of days - simple and plain. const from = new Date(2019, 0, 1); const to = new Date(2020, 0, 1); console.log((to - from) / (1000 * 3600 * 24)); // 365 Date in Javascript is in millseconds since 1970. So the difference between two date objects is a big millisecond number. We just convert that to days. ...

Array sorting is easy, but can yield unexpected results if you are not careful. Consider this example - const nums = [5, 2, 7, 9]; console.log(nums.sort()); // [ 2, 5, 7, 9 ] All beautiful and compliant so far. But, what if Loki lurks his head? const nums = [5, 2, undefined, 7, null, 9]; This problem occurs all the time since you are receiving arrays from external systems, from other libraries, or from code written by your “best friends” (quote intended). Arrays can now turn up results like this.. ...

SVGs are optimized image files that bend to your will, er.. size. They stay sharp at various resolutions, are small in size, and can change colour through code! And, it is really easy to use them in Vue single file components. Consider this example of a tomato. <svg style="display:none;" version="1.1" class="hidden" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" > <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.679 51.679" id="tomato"> <path d="M40.47 8.458c-2.562-1.642-7.374-3.93-11.997-1.816a.67.67 0 0 1-.952-.607V1.786C27.522.804 26.855 0 26.04 0h-2.223c-.815 0-1.482.804-1.482 1.786v4.501a.67.67 0 0 1-.802.661c-1.877-.387-6.751-.989-11.412 1.795-.638.381-.268 1.381.464 1.247 2.17-.397 5.026-.67 6.956.092a.674.674 0 0 1 .124 1.189c-1.371.895-3.9 2.953-5.557 6.737-.282.644.51 1.221 1.053.774 2.117-1.744 5.6-4.107 8.554-3.726a.68.68 0 0 1 .607.68c-.03 1.982-.005 8.716 1.632 11.265a.675.675 0 0 0 1.117.035c1.043-1.433 3.304-5.233 3.211-11.167a.677.677 0 0 1 .697-.694c1.49.048 5.008.469 7.798 3.194.457.447 1.214.061 1.134-.573-.219-1.735-1.174-4.359-4.631-6.394-.525-.309-.436-1.095.155-1.24 1.194-.293 3.252-.572 6.644-.46.689.021.97-.873.391-1.244z" fill="#88c057" /> <path d="M41.248 9.99a.698.698 0 0 0-.314-.12c-.4-.049-.801-.095-1.201-.149-.143-.014-.287-.025-.429-.039-2.914-.048-4.743.206-5.846.474a.674.674 0 0 0-.175 1.244c3.457 2.035 4.411 4.659 4.63 6.393.08.634-.677 1.02-1.134.573-2.79-2.724-6.308-3.145-7.798-3.194a.676.676 0 0 0-.697.694c.092 5.934-2.168 9.734-3.211 11.167a.675.675 0 0 1-1.117-.035c-1.637-2.549-1.662-9.283-1.632-11.265a.681.681 0 0 0-.607-.68c-2.954-.382-6.437 1.982-8.554 3.726-.543.447-1.335-.13-1.053-.774 1.655-3.779 4.18-5.836 5.552-6.733a.674.674 0 0 0-.128-1.19 6.461 6.461 0 0 0-1.203-.324.735.735 0 0 0-.234-.004 57.35 57.35 0 0 0-7.119 1.411.718.718 0 0 0-.278.144C3.597 15.555.393 21.668.393 28.465c0 12.821 11.393 23.214 25.446 23.214s25.446-10.393 25.446-23.214c.001-7.537-3.937-14.235-10.037-18.475z" fill="#d13834" /> <path d="M5.791 34.636a.998.998 0 0 1-.861-.49A11.328 11.328 0 0 1 3.473 30a1 1 0 0 1 .844-1.135.991.991 0 0 1 1.135.844 9.457 9.457 0 0 0 1.199 3.418 1 1 0 0 1-.86 1.509zm-1.203-7.958a1 1 0 0 1-.999-1.069c.094-1.327.366-2.616.811-3.834a1.001 1.001 0 0 1 1.879.687 11.997 11.997 0 0 0-.694 3.285 1 1 0 0 1-.997.931z" fill="#ed7161" /> </symbol> </svg> You may have noticed that SVGs are simply a bunch of coordinates? Well, the above code is just an example. ...

Vue enables you to define more than one prop against a component. See which component communication is effective and how props compare to Vuex Defining prop in a component is simple enough - <!-- Target.vue --> <template> {{ tinyInput }} <!-- display the prop --> </template> <script> export default { props: { tinyInput: { type: String, required: false } } }; </script> Just include additional prop to Target to accept more than one prop - <!-- Target.vue --> <template> {{ tinyInput }} {{ tinierIn }} <!-- display the prop --> </template> <script> export default { props: { tinyInput: { type: String, required: false }, tinierIn: { type: String, required: false } } }; </script> To do the same without using a single file component - ...

Vue enables you to define more than one props against a component. Defining props and passing around values are one of the ways of getting components to react to values passed to them (think arguments), or talk to each other :). See which component communication is effective and how props compare to Vuex Defining prop in a component is simple enough - <!-- Target.vue --> <template> {{ tinyInput }} <!-- display the prop --> </template> <script> export default { props: { tinyInput: { type: String, required: false } } }; </script> You can now call this component from another component/view like so - ...

It can get confusing if you have packages installed globally, and within project folder. Find out where the command originates from when you are using NPM. See below depending on what you are looking for. Info about a command that you put in the command line For e.g you do a - vue create test1 .. and you see NPM run and create folder structure. But, you don’t know which this vue thing. ...

npm is quite simple but immensely powerful for what we do as developers. At the heart of it, NPM just downloads stuff from its own registry on the Internet. But the underlying dependency management makes it an easy-to-use, super efficient tool. Here are some commands that I find useful in day-to-day work. Install / Uninstall Of course, I am joking. You would have seen this a billion times. npm install nodemon npm uninstall nodemon You could follow the shortcut notation ...

Since this blog existed and for many centuries before that, we had - “package managers”. These utilities have been quenching the thirst to build better applications and even better applications while standing on the shoulders of giants that grow ever bigger. Yes, they do all that despite their drab name. Package managers address a single function - package code and manage dependencies so that they could be used as a whole. ...

Regular expressions are patterns used to match and/or manipulate strings. This is a high-level overview of a few of the practical applications of a RegEx in Javascript. What is RegEx and what’s it doing in Javascript? A RegEx consists of simple and special characters that together form a language of its own. Regular expressions can be used to match strings, identify specified patterns, and extract parts of strings. RegEx is a common enough function available in programming languages. They provide powerful ways to recognize patterns and test a given string efficiently and quickly. ...

Use this if you want to repeatedly call a function for known arguments, or in case you just need a IIFE. If you want a repeatedly called functions, you would typically - Call function in a loop Use recursion For e.g. - function printStr(str) { console.log(str); } printStr("hello"); printStr("people"); /* hello people */ You can do it in a more concise way like so - (function(str) { console.log(str); return arguments.callee; // return function for next call })("hello")("world")("and")("people"); /* hello world and people */ Note that you are not returning a string, but a whole function and calling that function for the given arguments. In the statement, we use arguments to call the function that returns a function, and invoke the returned function on a specific argument thereon. ...