VS Code: Good Enough Light Themes

Pradeep — Sun, 09 May 2021 10:28:06 +0000

No theme out there is best, so what makes them good enough?

Good contrast ratio between background and foreground colors.
Adequate set of colors to identify keywords of a particular language.
A light color to highlight the current line.
High text legibility on every component of the application.
Good contrast ratio between Title Bar, Side Bar, Files Menu, Tabs and Footer to separate them out.
Overall package should be easy on the eyes.

Presenting to you my collection of hand-picked light color themes for VS Code. All of them have been tested against the parameters above. I hope you like them.

1. JetJet - Light

Authored by Johny Georges, it comes within a set of 5 themes. Built on top of default VS Code Light theme, it offers a pleasing background color with good text legibility. However, sometimes I find it hard to highlight current tab which is permissible considering it fares well on other parameters.

Javascript

HTML

CSS

2. Winter is Coming - Light

Authored by John Papa, it comes within a set of 6 themes. It offers a duotone outlook and distinguishes well the various parts of the editor, text legibility is also good, fares well on the parameters. However, the borders around highlighted tabs and icons in the navigation panel look annoying to me.

Javascript

HTML

CSS

3. Atom One - Light

Extracted from the Atom editor, it comes as a standalone theme. It has a flattish outlook and manages to highlight well the various parts of the editor, fares equally well on the parameters as other themes.

Javascript

HTML

CSS

4. GitHub Sharp

Authored by Joao Moreno, it is a fork of the GitHub Plus theme. The duotone look distinguishes well the exteriors and interiors of the editor. It offers a pleasing color scheme. No complaints so far from it.

Javascript

HTML

CSS

Cover Photo by Artem Sapegin on Unsplash

Javascript: Remove a specific element from an array

Pradeep — Sun, 09 May 2021 10:26:17 +0000

In this blog post, we are going to take a look at some of the widely used, battle tested methods to remove a specific element from an array in Javascript.

01. The splice() method

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. From MDN Docs.

Syntax

Array.splice(begin_removal_at_this_index, number_of_elements_to_remove)

Return Value

An array containing the deleted elements.

Usage

1. Remove by Index

var testArr = [1, 2, 3, 4, 5];
const output = testArr.splice(2, 1);
console.log(output); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

2. Remove by Value

var testArr = [1, 2, 3, 4, 5];
const val = 3; // Value to remove

for (let i = 0; i < testArr.length; i++) {
    if (testArr[i] === val) {
        const removedElements = testArr.splice(i, 1);
        console.log(removedElements); // Outputs [3]
        i--; // Since the indexes of elements following this index get updated after removal
    }
}

console.log(testArr); // Outputs [1, 2, 4, 5]

02. The filter() method

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It does not mutate the existing array in place. From MDN Docs.

Syntax

Array.filter(callback(value, index, array) { // Boolean expression });

Return Value

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

Usage

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = testArr.filter(val => (val != filterVal));
console.log(testArr); // Outputs [1, 2, 3, 4, 5]
console.log(filteredElements); // Outputs [1, 2, 4, 5]

03. Using Lodash ._remove() method

Lodash is a popular Javascript utility library. You need to install and import it to use this solution.

The _.remove() method removes all elements from array that predicate returns truthy for by manipulating the original array in place. From Lodash Docs.

Syntax

_.remove(array, function(n) {
    return // A boolean expression;
});

Return Value

It returns an array of the removed elements.

Usage

var testArr = [1, 2, 3, 4, 5];
const filterVal = 3; // Value to remove

const filteredElements = _.remove(testArr, function(elem) {
    return elem === filterVal;
});
console.log(filteredElements); // Outputs [3]
console.log(testArr); // Outputs [1, 2, 4, 5]

04. Adding a native remove() method to Array.prototype using the splice() method

To better understand this approach. There should be some familiarity with Javascript Object Prototypes. However, you may simply proceed with the solution.

Usage

Array.prototype.remove = function (index) {
    this.splice(index, 1);
};

var testArr = [1, 2, 3, 4, 5];
testArr.remove(2); // This will remove 3
console.log(testArr); // Outputs [1, 2, 4, 5]

It is advised to name the custom methods being added to the object prototypes cautiously, since some external libraries may try to manipulate the object prototype their own way and may conflict with the names of methods added by the user.

Cover Photo By Brett Jordan on Unsplash

DEV Community: Pradeep

VS Code: Good Enough Light Themes

No theme out there is best, so what makes them good enough?

1. JetJet - Light

2. Winter is Coming - Light

3. Atom One - Light

4. GitHub Sharp

Javascript: Remove a specific element from an array

01. The splice() method

Syntax

Return Value

Usage

1. Remove by Index

2. Remove by Value

02. The filter() method

Syntax

Return Value

Usage

03. Using Lodash ._remove() method

Syntax

Return Value

Usage

04. Adding a native remove() method to Array.prototype using the splice() method

Usage