DEV Community: ∮

Type Conversion (or "Type Coercion") from one type to another in JavaScript

Mon, 22 Feb 2021 07:26:09 +0000

Simply put: Type Coercion is the process of converting from one data type to another(be it a number, string or a boolean). Coercion can be necessary for cases where you have a number in the form of a string(say, "67"), and you need to perform some numeric operations on it, for example.

In this article, we're going to look at how to convert from a data type to a number or string in JavaScript. You cannot(you can, but it's a bit clunky 😭) convert something to an array or object since they are not primitives.

String/Boolean → Number

To convert a string or Boolean to a number, there are 3 possible ways:

`parseInt()` and `parseFloat()` function

The parseInt() and parseFloat() methods are built-in to the global or window object in JavaScript. These methods take in a string and try to parse the value from the first character until the string has a valid numeral.
The parseInt function returns only the integer part, while parseFloat function returns whatever is parsed, with the decimal part.
You can also specify an optional parameter radix(only available in parseInt), which tells the function the numeral system to use while parsing. If nothing is specified, the following conditions are applicable:

If the string starts with "0x", then the radix parameter will default to 16(hexadecimal)
If the string starts with 0, then the radix parameter will default to 8(octal). This behaviour is deprecated since ES6, where it will default to 10 unless specified otherwise.
If the above conditions are not met, the value of the radix parameter will be 10.

If the value cannot be parsed, the function will return NaN(not a number).

Usage:

parseInt("123582jdme"); // 123582
parseInt("37.19"); // 37
parseFloat("37.19"); // 37.19
parseInt("0x8F"); // 143
parseInt("abcr2929"); // NaN
parseInt(true); // NaN
parseInt(10n); // 10

`Number` constructor

The Number constructor function or "primitive object wrapper" is, again, a built-in one in JavaScript. It takes in any primitive type and converts it into a number. It can take a boolean or string(or even a number!) and tries to convert it into a numeric value. You need not use the new keyword with it, since it is a primitive type wrapper. Like parseInt and parseFloat, you can pass into it a hexadecimal number starting with "0x", and if it cannot be converted, it returns NaN
Usage:

Number("0x89FAC"); // 565164
Number("0x0F"); // 15
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number("123abc"); // NaN
Number(10n); // 10

If you notice the last line, it returns NaN if 123abc is tried to be converted. If you are using parseInt, this will be 123. This is because parseInt and parseFloat coerce a string to a number "from the first non-whitespace character until a valid numeral", while the Number function tries to convert the number in a whole.

Also, you may notice that when a boolean is passed to parseInt or parseFloat, it returns NaN, while Number returns a number, 1 or 0, depending on the boolean. This has to do with "auto-coercion". Any thing passed to parseInt or parseFloat will be coerced to a string behind the scenes, so true will be coerced to "true" and false will be coerced to "false".

The unary plus(+) operator

The unary plus operator is used before its operand. The expression will be evaluated to the numeric form of the operand(if not already a number). Again, like Number, you can have hexadecimal numbers, prefixed with "0x", and the expression will be evaluated to NaN if the operand cannot be parsed.

Usage:

+"7" // 7
+"-3" // -3
+true // 1
+false // 0
+null // 0
+"abc123" // NaN
+10n // Uncaught TypeError: Cannot convert a BigInt value to a number

Here, you may notice that when we try to convert a BigInt value to a number using the unary plus, it throws an exception, while the other two methods stated above convert it to regular numbers.

If you don't know what a BigInt is, check out the MDN docs.

My fav: Unary plus(+)

Browser support

You can check that out from the caniuse reports:

parseInt and parseFloat: https://caniuse.com/mdn-javascript_builtins_parseint and https://caniuse.com/mdn-javascript_builtins_parsefloat
Number: https://caniuse.com/mdn-javascript_builtins_number
Unary plus: https://caniuse.com/mdn-javascript_operators_unary_plus

Number/Boolean/Array → String

To convert a boolean, number or an array to a string, there are two possible ways:

`String` constructor

Like Number, String is a primitive object wrapper built-in to JavaScript. It coerces whatever is passed into it, to a string. This is a super straightforward one and doesn't have any sort of weird effects.

Usage:

String(true); // "true"
String(false); // "false"
String(0x0F); // "15"
String(27); // "27"
String(undefined); // "undefined"
String(null); // "null"
String(12948975894798759879867587646); // "1.294897589479876e+28"
String(12948975894798759879867587646n); // "12948975894798759879867587646"
String([1,2,3,true]); // "1,2,3,true"
String({a: 1, b: 2, c: 3}); // '[object Object]'

`.toString()` function

The toString() method is a property in all data types: number, string(!), boolean, array and object and even things like Date, Error, etc. This method, when used, yields the same result as the String primitive object wrapper, except that the undefined and null do not contain any .toString method(will error out), as they are... undefined and null 😉

Usage:

true.toString(); // "true"
false.toString(); // "false"
(0x0F).toString(); // "15"
(27).toString(); // "27"
(12948975894798759879867587646).toString(); // "1.294897589479876e+28"
(12948975894798759879867587646n).toString(); // "12948975894798759879867587646"
[1,2,3,true].toString(); // "1,2,3,true"
({a: 1, b: 2, c: 3}).toString(); // '[object Object]'

Conclusion

Aaaaaannnd, that's it for this one. I hope you've enjoyed this article and learnt something new.

Thank you and have a great day!

Fixing "vimtutor" command - The Ultimate Guide to the Vim-way

Mon, 08 Feb 2021 10:54:31 +0000

Backstory

OK, so today you sat down on your desk and ambitioned that today, you have to learn Vim, often known as the ubiquitous editor. You started searching for tutorials, and you find tutorials 1-hour long, 2-hours long and even 4-hours long... just for a text editor. Then, someone around suggested that you should have a primer on the subject by the vimtutor, a simple text file that teaches you the basics of Vim. It is bundled with Vim and can be run by executing vimtutor in the terminal. You, following suit, did exactly that, but you get something like this:

shrihan@shrihan-pc:~ $ vimtutor
-bash: vimtutor: command not found
shrihan@shrihan-pc:~ $ # wait what?!

or maybe this:

PS C:\Users\Shrihan> vimtutor
vimtutor : The term 'vimtut
tor' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the
name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ vimtutor
+ ~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (vimtuttor:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

PS C:\Users\Shrihan> # seriously?

Whatever the error maybe, you obviously know that something's wrong.

Solution

This happens because vimtutor is not installed in the system. It should be installed with vim, but for some reason, if it didn't, let's fix it 😉

First of all, download the following text file from the below link and save the file as .vimtutor in your user home directory (~/ on Unix-like, C:\Users\[YourUserName] on Windows; replace [YourUserName] with the appropriate one!):

https://drive.google.com/file/d/1histC_BIPtIWpum-wqWGct5qgHLPW9UL/view?usp=sharing

Next, copy the following code as needed, and paste it in a new file called vimtutor for Unix-like(Mac/Linux) and vimtutor.cmd for Windows.

(a) Windows(vimtutor.cmd)

@ECHO OFF

COPY /Y %USERPROFILE%\.vimtutor %TEMP%\vimtutor.tmp

vim %TEMP%\vimtutor.tmp
del %TEMP%\vimtutor.tmp

(b) Unix-like(vimtutor)

#!/usr/bin/env sh
cp ~/.vimtutor $TMPDIR/vimtutor.tmp
vim $TMPDIR/vimtutor.tmp
rm $TMPDIR/vimtutor.tmp

Note that the above will only work if you have Vim installed and you have access to the vim command without any errors.

Save the file in a location in your $PATH. On Windows, you can safely(!) copy the file to the C:\Windows directory, for others you can copy it to the /usr/bin folder. I don't know how paths work in MacOS, please Google that if needed, sorry 😭

There's one last step for Unix-like systems. There, you have to go to the location where you've saved the vimtutor script, open a terminal there and run the following command(again, make sure you're in the location of the file):

shrihan@shrihan-pc:/usr/bin $ chmod +x vimtutor

Finally, the moment of truth, run the vimtutor command in the terminal, after some nanoseconds(maybe) the vim should launch with the vim tutor! Happy hacking with Vim 😉

Thank you and have a wonderful day! P.S. Stay safe in these bad times, you know :)

Higher Order Array Methods in JavaScript

Sun, 31 Jan 2021 17:50:45 +0000

Introduction

Higher order functions are functions that operate on other functions, either by receiving them as arguments or by returning them. It is a function that accepts a function as a parameter or returns a function as the output.

In this article, I am going to show you the most commonly used such methods when it comes to arrays.

`Array.prototype.map`

This is one of the simplest functions you are going to use while working with Arrays. It forms a new array by calling the function passed into it as an argument, on each and every element of the Array. It will map each of the return values of the callback and create a new array.

The callback passed to the map() function can accept any of the three arguments: item, index, array.

Example 1

Given an array of integers, create a new array in which the double of each integer in the first array is stored, and log it to the console.

Solution:

const givenArray = [477, 8914, 40461, 599148];
const newArray = givenArray.map(n => n * 2);
console.log(newArray); // console: [954, 17828, 80922, 1198296]

Example 2

Given an array of singular nouns, create a new array that stores the plural noun of each of the words in the first array, and log it to the console (assume that the singular nouns can be made plural by adding a 's').

Solution:

const givenArray = [ 'pen', 'book', 'code' ];
const newArray = givenArray.map(w => w + 's');
console.log(newArray); // console: ['pens', 'books', 'codes']

`Array.prototype.filter`

The filter() function is what you'd use if you're creating a search bar from a given list of items, for example. The filter() method also creates a new array by executing the passed callback on every element of the array, and keeps it in the resulting array IF and ONLY IF the element passes the Boolean test returned by the callback.

The callback passed into the filter() method accepts any of the three arguments: item, index and array; same as the map() method.

Example 1

Given an array of costs of different products, create a new array with the costs from the input array if the cost is <= $350, and print it to the console.

Solution:

const givenArray = [390, 190, 311.85, 67, 19048, 5000, 670];
const newArray = givenArray.filter(c => c <= 350);
console.log(newArray) // console: [190, 311.85, 67];

Example 2

Given an array of objects with the city name and population, create an array with objects from the first array if the population of that particular city is >= 5 million.

Solution:

const givenArray = [
  { "name": "Shanghai", "population": 24300000 },
  { "name": "Los Angeles", "population": 3792621 },
  { "name": "New Delhi", "population": 21800000 },
  { "name": "Mumbai", "population": 18400000 },
  { "name": "Chicago", "population": 2695598 },
  { "name": "Houston", "population": 2100263 },
];
const newArray = givenArray.filter( ({ population }) => population >= 5000000);
console.log(newArray); // console: [{name: "Shanghai", population: 24300000}, {name: "New Delhi", population: 21800000}, {name: "Mumbai", population: 18400000}]

`Array.prototype.reduce`

The reduce() method creates a new array, executing the callback passed into it on every element, and outputs a single value. It does something on every element and keeps a record of the calculations in an accumulator variable and when no more elements are left, it returns the accumulator.

The reduce() function itself takes two inputs: (a) the reducer function or callback; (b) an optional starting point or initialValue.

The reducer function or the callback accepts 4 arguments: accumulator, currentItem, index, array.

If the optional initialValue is given, the accumulator at the first iteration will be equal to the initialValue and the currentItem will be equal to the first element in the array. Otherwise, the accumulator would be equal to the first item in the input array, and the currentItem will be equal to the second item in the array.

Sounds confusing? Let's have a look at two examples:

Example 1

(i) Given an array of numbers, find the sum of every element in the array, and log it to the console.

Solution:

const givenArray = [1, 2, 3, 4, 5];
const sum = givenArray.reduce((acc, curr) => acc + curr);
console.log(sum); // console: 15

Let's have a look at the accumulator and the current value...:

at the first iteration: acc=1(givenArray[0]), curr=2(givenArray[1])
at the second iteration: acc=3(givenArray[0] + givenArray[1]), curr=3(givenArray[2])
at the third iteration: acc=6(givenArray[0] + givenArray[1] + givenArray[2]), curr=4(givenArray[3])
at the fourth iteration: acc=10(givenArray[0] + givenArray[1] + givenArray[2] + givenArray[3]), curr=5(givenArray=[4])
finally: acc=15 (sum of all elements) (array iteration ended)

You can view this yourself by running a console.log inside the function like so: console.log("iteration: acc="+acc+" curr="+curr);

(ii) Given an array of numbers, find the sum of every element in the array, starting with 8, and log the result to the console

Solution:

const givenArray = [1, 2, 3, 4, 5];
const sum = givenArray.reduce((acc, curr) => acc + curr, 8);
console.log(sum); // console: 23

Note: Here, we are passing the optional initialValue parameter to the reduce() function, saying that we want to start with 8 and do whatever we want inside the callback.
Again, you can test the values of acc and curr and by adding a console.log like above.

Example 2

Given an array of numbers, find the average of them, and log it to the console.

Solution:

const givenArray = [1, 2, 3, 456, 108115, 45909.15154, 1988.1545, 145e8];
const average = (givenArray.reduce((acc, curr) => acc + curr)) / givenArray.length;
console.log(average); // console: 1812519559.288255

If you're confused from the third line, it basically calculates the sum first, and divides the return value by the length of givenArray. You could also use:

const givenArray = [1, 2, 3, 456, 108115, 45909.15154, 1988.1545, 145e8];
const average = givenArray.reduce((acc, curr, index) => ( index == (givenArray.length -1) ) ? (acc + curr) / givenArray.length : acc + curr);
console.log(average); // console: 1812519559.288255

This is a complete no-no for readability and for the KISS principle, but I ain't a cop, use whichever method you like 😉

`Array.prototype.forEach`

The forEach method is similar to the for(let i = 0; i < array.length, i++){} syntax. It loops through the array and runs the given callback for each of the elements of the array.

The callback function passed to the forEach function can accept the currentItem, index, array.

Example

Given an array of numbers, log every number to the console(wat?!).

Solution:

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.forEach(val => console.log(val));
/* console:
1
2
3
4
5
6
7
8
*/

The big difference between the map and forEach method is that the map method creates a new array, "mapping" the return value of the callback and create a new array, while the forEach method just iterates over the array.

`Array.prototype.some` and `Array.prototype.every`

The some method tests whether at least one element of the array complies with the given test in the callback, and returns true or false.

The callback function passed to the some function can accept the currentItem, index, array.

Example 1

Given two arrays of numbers, test whether each of the arrays have at least one number that is > 5, and log the result to the console.

Solution:

const givenArray1 = [1, 2, 3, 5, 8];
const givenArray2 = [1, 2, 3, 4, 5];
const testArray1 = givenArray1.some(n => n > 5);
const testArray2 = givenArray2.some(n => n > 5);
console.log(`givenArray1: ${testArray1}; givenArray2: ${testArray2}`); // console: givenArray1: true; givenArray2: false

The every method is pretty similar to the some method, but it tests whether all the elements of the array complies with the given test in the callback, and returns true or false.

The callback function passed to the every function can accept the currentItem, index, array.

Example 2

Given two arrays of numbers, test whether each of the arrays have all the numbers >= 5, and log the result to the console.

Solution:

const givenArray1 = [10, 9, 8, 7, 6];
const givenArray2 = [5, 1, 2, 785, 45];
const testArray1 = givenArray1.every(n => n > 5);
const testArray2 = givenArray2.every(n => n > 5);
console.log(`givenArray1: ${testArray1}; givenArray2: ${testArray2}`); // console: givenArray1: true; givenArray2: false

`Array.prototype.flat` and `Array.prototype.flatMap`

The flat method creates a new Array with all the elements, and if the element is an array, then it "flattens" the element and adds all the sub-array elements to the returned array. By default, it will only flatten the array upto 1 level.

The flat method can accept only one optional argument, the level or depth up till which the array will be "flattened".

Example 1

Given an array of arrays of numbers, find the sum of every number inside the array as well as the sub-arrays, and log the sum to the console.

Solution:

const givenArray = [
  [1, 2, 3, 4, 5, 6],
  [10, 20, 30, 40, 50, 60],
  [100, 200, 300, 400, 500, 600]
];
const sum = 
  givenArray
    .flat() // flattens the array
    .reduce((acc, curr) => acc + curr); // finds the sum
console.log(sum); // console: 2331

The flatMap method is the combination of the flat method and the map method. It first "flattens" the array, runs the callback for each element and "maps" the return value to the corresponding element, and finally returns the "flattened and mapped" array. If you use something like: arr.flatMap(...), its equivalent to arr.flat().map(...). But, there's one catch: you cannot flatten the array by levels more than one, for that you need to use the .flat(...).map(...) syntax.

The flatMap method accepts the same arguments as the map method, and so does the callback.

Example 2

Given an array of arrays of users, create a new array with a single list of all the first names of the users, and log it to the console.

Solution:

const users = [
  [
    { "firstName": "Lorem", "lastName": "Ipsum" },
    { "firstName": "Dolor", "lastName": "Sit" },
    { "firstName": "Amet", "lastName": "Consectetur" }
  ],
  [
    { "firstName": "Adipiscing", "lastName": "Elit" },
    { "firstName": "Etiam", "lastName": "Lobortis" },
    { "firstName": "Lorem", "lastName": "Elit" }
  ],
  [
    { "firstName": "Lorem", "lastName": "Ipsum" },
    { "firstName": "Dolor", "lastName": "Sit" },
    { "firstName": "Amet", "lastName": "Consectetur" }
  ],
  [
    { "firstName": "Adipiscing", "lastName": "Elit" },
    { "firstName": "Etiam", "lastName": "Lobortis" },
    { "firstName": "Lorem", "lastName": "Elit" }
  ]
];

const usersFirstNames = users.flatMap(usersGroup => usersGroup.map(u => u.firstName));

console.log(usersFirstNames); // console: ["Lorem", "Dolor", "Amet", "Adipiscing", "Etiam", "Lorem", "Lorem", "Dolor", "Amet", "Adipiscing", "Etiam", "Lorem"]

`Array.prototype.find`

The find method returns the first element of the array that satisfies the Boolean test in the callback. If no element passes the Boolean test, undefined is returned.

The callback passed to the find function can accept any of the three arguments: item, index, array.

Example

Given an array of objects with fruits, find the 'apples' and log the corresponding object to the console.

Solution:

const fruits = [
  {"name": "bananas", "quantity": 8},
  {"name": "cherries", "quantity": 3},
  {"name": "apples", "quantity": 80}
];

const apples = fruits.find( ({name}) => name == "apples" );
console.log(apples); // console: {"name": "apples", "quantity": 80}

`Array.prototype.sort`

The sort method is self-explanatory: it "sorts" an array in place and returns a sorted the array. The default sort order is ascending.

Note the words "in place". It means that the original array is changed and the same reference to the array is returned. So, originalArray===newArray, if nothing is sorted.

It takes a Function that specifies the criteria of sorting.

Example 1

Given an array of numbers, sort the array by ascending order and log the sorted array to the console.

Solution:

const givenArray = [4, 5, 2, 1, 3];
givenArray.sort((a, b) => a - b);
console.log(givenArray);

Example 2

Given an array of contacts, sort them in alphabetical order by name, and log the sorted array.

Solution:

const givenArray = [
  {"name": "Yosha Gamuda", "phone": 1234567890},
  {"name": "Portia Umeng", "phone": 4894759371},
  {"name": "Yosha Gamuda", "phone": 1234567890},
  {"name": "Portia Umeng", "phone": 4894759371}
];
givenArray.sort(({name1}, {name2}) => {
  name1 = name1.toUpperCase();
  name2 = name2.toUpperCase();
  return (name1 < name2) ? -1 : (name1 > name2) ? 1 : 0);
});
console.log(givenArray);

The way sort() works is a bit different than the others. Quoting this MDN doc:

If compareFunction is supplied, all non-undefined array elements are sorted according to the return value of the compare function (all undefined elements are sorted to the end of the array, with no call to compareFunction). If a and b are two elements being compared, then:

If compareFunction(a, b) returns less than 0, sort a to an index lower than b (i.e. a comes first).

If compareFunction(a, b) returns 0, leave a and b unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAScript standard only started guaranteeing this behavior in 2019, thus, older browsers may not respect this.

If compareFunction(a, b) returns greater than 0, sort b to an index lower than a (i.e. b comes first).

compareFunction(a, b) must always return the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned, then the sort order is undefined.

To compare numbers instead of strings, the compare function can subtract b from a. The following function will sort the array in ascending order (if it doesn't contain Infinity and NaN).

Conclusion

I know this article has ABSOLUTELY LEVIATHAN AMOUNT of information. There are loads of others, but essentially, you need not know every method in Array.prototype to work with arrays. Thank you for reading this article, I hope you enjoyed it. Any feedback will be much, much appreciated: good or bad ;)

Make your terminal look Swag with MSYS2 and ZSH

Thu, 19 Nov 2020 13:24:56 +0000

Yeah, I know, I know; you can use Bash on Ubuntu on Windows via WSL, but this article is specially for users using Windows 8.1 and below (and also for enterprise/LTSB Users)

Does your terminal look, boring, ugly and slow? Well, after reading this, your terminal will look like this:

Pretty cool, right?

Let’s begin!

First things first, make sure you have:

a good understanding of Computer Basics, obviously ;)
a good understanding of Terminal (Bash recommended) Basics, again obviously :)
a decent internet connection.

Installing Cmder

First of all, head over to this website to download and install Cmder, a console emulator. You can install the Mini version. No problems.

Open Cmder, you must see this screen:

This may look different, but the overall interface must be the same.

Let’s customize it, as it looks pitch black!

Press Win+Alt+P, to bring the settings option. Download the MesloLGS NF font from here.

Click on the four files one by one; after it downloads, select the four .ttf files, then right click, then Install. You may need to provide the Administrator password for that.

After you install the MesloLGS NF font, head over to General → Fonts in the left pane of Cmder Settings, and change the main console font and alternative font to MesloLGS NF. Change the font size to something larger, as the prompt looks like: What is this? A prompt for ants? :) Ok, jokes apart. Your settings should look something like this:

Optional: Head over to the Features → Colors tab and change the Schemes option to <Ubuntu>. You can select whatever you like. If you didn’t like any of these, then head over to this page and follow the instructions to install a theme you like. And wherever it says, ConfigPath, it means the path written near the Storage section above all the settings. Mine is C:\tools\Cmder\vendor\conemu-maximus5\ConEmu.xml. I personally prefer <Ubuntu>, provided with Cmder already.

After you do that, let’s install MSYS2.

Installing MSYS2

First of all, download the installer (*.exe) from this website and follow the instructions there. It’s as simple as Next, Next and Install :)

After you install MSYS2, again open the settings of Cmder. Go to Startup → Tasks and click on Add/Refresh default tasks, and on the dialog box, click Refresh default tasks.

Refresh default tasks

After you do that, you will see some tasks in the Predefined tasks panel. Click on the {Bash::Msys2–64} task and click Clone at the bottom. Then, click on the newly cloned task and at the white input box at the right, paste the following:

set CHERE_INVOKING=1 & set MSYSTEM=MINGW64 & set "PATH=%ConEmuDrive%\msys64\mingw64\bin;%ConEmuDrive%\msys64\usr\bin;%PATH%" & %ConEmuBaseDirShort%\conemu-msys2–64.exe -new_console:p %ConEmuDrive%\msys64\usr\bin\bash.exe -- login -ic "exec zsh" -new_console:C:"%ConEmuDrive%\msys64\msys2.ico"

Change task options.

What we’re basically doing is, we’re setting CHERE_INVOKING env var to 1, which tells Bash to not cd into the HOME directory always. We’re also setting the MSYSTEM to MINGW64 to use Mingw as the MSYS System instead of the Default MSYS, which is slower. Then, we’re setting the PATH variable to the msys64\usr\bin and msys64\mingw64\bin to use Windows-native binaries, *.exe to serve the purpose of basic Unix commands, like clear , ls , rm , and even utilities like curl. Coming to the PATH, we’re also setting the path to the Native Windows %PATH% variable. This helps to use the already-installed utilities like node, kubectl, docker, npm, etc. And we’re also invoking conemu-msys2-64.exe , which helps to emulate the MSYS System. Then, we’re passing -new_console:p, which starts a new Cmder/ConEmu Console Session. After that, we’re invoking our hero, bash, and setting it as a login shell. The -c "exec zsh" part should be kept for future, now remove that. Just keep ....exe --login -i . After that, again some native Cmder commands.

mic drop……………

So, after that, go to Startup section (the parent one, neither the Tasks, nor Environment) and select the Specified named task to the one we’ve just created/edited.

Installing essential utilities

Let’s install some basic utilities:

pacman -S man vim nano tar
pacman -S openssh rsync make
pacman -S zip unzip
pacman -S mingw64/mingw-w64-x86_64-jq

Notice how easy it is to install things. For example, adding rsync to Windows is historically not easy at all — you end up going through various ports, forks, etc. This is much easier.

Note about sudo: MSYS2 doesn't provide it. See this question or imachug/win-sudo.

Installing Git for Windows

If you had Git for Windows installed previously, uninstall it or just remove C:\Program Files\Git\..., or wherever you installed Git, from $PATH.

Reference

Edit /etc/pacman.conf and just before [mingw32] , add the git-for-windows packages repository:

[git-for-windows]
Server = https://wingit.blob.core.windows.net/x86-64

Authorize a signing key:

curl -L https://raw.githubusercontent.com/git-for-windows/build-extra/HEAD/git-for-windows-keyring/git-for-windows.gpg |
pacman-key --add - &&
pacman-key --lsign-key 3B6D86A1BA7701CD0F23AED888138B9E1A9F3986

Then, update/synchronise the repository with:

pacman -Syyuu

This updates msys2-runtime and therefore will ask you to close the window (not just exit the pacman process). Don't panic, simply close all currently open MSYS2 shells and MSYS2 programs. Double-check Task Manager and kill pacman.exe if it's still running after the window is closed, because it can linger. Once all are closed, start a new terminal again.

Then synchronize again (updating the non-core part of the packages):

pacman -Syuu

After that, install git and necessary things:

pacman -S git git-extras
pacman -S mingw-w64-x86_64-git-credential-manager mingw-w64-x86_64-git-lfs mingw-w64-x86_64-git-doc-man mingw-w64-x86_64-git-doc-html

Check that everything works by doing git --version and it should output something like git version 2.14.1.windows.1 (or newer).

Output for `git --version`.

Installing ZSH

Finally, our heroine, ZSH! To install it, use:

pacman -S zsh

After that, run clear to clear everything up :)

Remember above, I told to keep -c "exec zsh" for future? Now the time comes. Add the -c "exec zsh" to the required place. Now, exit Cmder and open it again, you will get zsh! Yay!

It looks cool at this point, but it still needs its supporting actor.

Installing Oh-My-Zsh

Here’s our supporting actor, Oh-My-Zsh, which helps us to theme our zsh to the one we’ve seen at the top!

So, first of all, run:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

This installs oh-my-zsh. Done.

Theme-ing Oh-My-Zsh

To achieve the result above, we need to install a theme called Powerlevel10k. Run:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Then, type nano ~/.zshrc. This opens nano, a text editor. Edit the line where it says, ZSH_THEME="robbyrussell" to ZSH_THEME="powerlevel10k/powerlevel10k". Restart Cmder.

After that, it automatically runs p10k configure. This asks some questions, just follow whatever is told on the screen. To achieve the result above, use the Rainbow Prompt style. I recommend turning on Instant Prompt. You can read more about it here. Also, you can turn on Transient Prompt. You can read more about it here.

At this point, my ~/.zshrc looks like this:

# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH
# Path to your oh-my-zsh installation.
export ZSH="/c/Users/AnotherUser.APPLE.000/.oh-my-zsh"
# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="powerlevel10k/powerlevel10k"
# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in $ZSH/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )
# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"
# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"
# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"
# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"
# Uncomment the following line to change how often to auto-update (in days).
# export UPDATE_ZSH_DAYS=13
# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS="true"
# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"
# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"
# Uncomment the following line to enable command auto-correction.
# ENABLE_CORRECTION="true"
# Uncomment the following line to display red dots whilst waiting for completion.
# COMPLETION_WAITING_DOTS="true"
# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"
# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# You can set one of the optional three formats:
# "mm/dd/yyyy"|"dd.mm.yyyy"|"yyyy-mm-dd"
# or set a custom format using the strftime function format specifications,
# see 'man strftime' for details.
# HIST_STAMPS="mm/dd/yyyy"
# Would you like to use another custom folder than $ZSH/custom?
# ZSH_CUSTOM=/path/to/new-custom-folder
# Which plugins would you like to load?
# Standard plugins can be found in $ZSH/plugins/
# Custom plugins may be added to $ZSH_CUSTOM/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)
source $ZSH/oh-my-zsh.sh
# User configuration
# export MANPATH="/usr/local/man:$MANPATH"
# You may need to manually set your language environment
# export LANG=en_US.UTF-8
# Preferred editor for local and remote sessions
# if [[ -n $SSH_CONNECTION ]]; then
#   export EDITOR='vim'
# else
#   export EDITOR='mvim'
# fi
# Compilation flags
# export ARCHFLAGS="-arch x86_64"
# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"
#source /usr/share/git/completion/git-completion.sh
#ZSH_THEME="powerlevel10k/powerlevel10k"
#parse_git_branch() {
 #git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
#}
#PROMPT_USER="\[\033[32m\]\u@\h\[\033[00m\]"
#PROMPT_DIR="\[\033[33m\]\w\[\033[00m\]"
#PROMPT_BRANCH="\[\033[35m\]\$(parse_git_branch)\[\033[00m\]"
#export PS1="$PROMPT_USER $PROMPT_DIR$PROMPT_BRANCH"$'\n$ '
# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

Note that I’ve added two extra plugins (look for the plugins=... line), zsh-autosuggestions and zsh-autocomplete. You can copy this and paste this to nano editor while editing ~/.zshrc . But you do need to install them. To do that, run:

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

You can learn more about them here and here

After that, restart your terminal.

Conclusion

Therefore, I conclude that, Windows users can also have a Linux-y environment, the most powerful!
If you have any questions/suggestions, please write down below. And if I’ve made any mistake, please tell me. I’ll fix it ASAP.
Happy hacking!

DEV Community: ∮

Type Conversion (or "Type Coercion") from one type to another in JavaScript

String/Boolean → Number

parseInt() and parseFloat() function

Number constructor

The unary plus(+) operator

My fav: Unary plus(+)

Browser support

Number/Boolean/Array → String

String constructor

.toString() function

Conclusion

Fixing "vimtutor" command - The Ultimate Guide to the Vim-way

Backstory

Solution

Higher Order Array Methods in JavaScript

Introduction

Array.prototype.map

Example 1

Example 2

Array.prototype.filter

Example 1

Example 2

Array.prototype.reduce

Example 1

Example 2

Array.prototype.forEach

Example

Array.prototype.some and Array.prototype.every

Example 1

Example 2

Array.prototype.flat and Array.prototype.flatMap

Example 1

Example 2

Array.prototype.find

Example

Array.prototype.sort

Example 1

Example 2

Conclusion

Make your terminal look Swag with MSYS2 and ZSH

Yeah, I know, I know; you can use Bash on Ubuntu on Windows via WSL, but this article is specially for users using Windows 8.1 and below (and also for enterprise/LTSB Users)

Pretty cool, right?

Let’s begin!

Installing Cmder

This may look different, but the overall interface must be the same.

Installing MSYS2

Refresh default tasks

Change task options.

mic drop……………

Installing essential utilities

Note about sudo: MSYS2 doesn't provide it. See this question or imachug/win-sudo.

Installing Git for Windows

Reference

Output for git --version.

Installing ZSH

Installing Oh-My-Zsh

Theme-ing Oh-My-Zsh

Conclusion

`parseInt()` and `parseFloat()` function

`Number` constructor

`String` constructor

`.toString()` function

`Array.prototype.map`

`Array.prototype.filter`

`Array.prototype.reduce`

`Array.prototype.forEach`

`Array.prototype.some` and `Array.prototype.every`

`Array.prototype.flat` and `Array.prototype.flatMap`

`Array.prototype.find`

`Array.prototype.sort`

Note about `sudo`: MSYS2 doesn't provide it. See this question or imachug/win-sudo.

Output for `git --version`.