DEV Community: Sanchit Gupta

More then 10 String cases - I didn't knew about before today

Sanchit Gupta — Thu, 10 Mar 2022 06:18:48 +0000

apps 4 developers
Lower Case

apps_4Developers
Camel Case

Apps 4 Developers
Capital Case

APPS_4_DEVELOPERS
Constant Case

apps.4.developers
Dot Case

Apps-4-Developers
Header Case

apps 4 developers
No Case

apps-4-developers
Param Case

Apps_4Developers
Pascal Case

apps/4/developers
Path Case

Apps 4 developers
Sentence Case

apps_4_developers
Snake Case

Learn more on Apps4Developers.com - https://www.apps4developers.com/string-case-change/

Snippet... QR Code - Yes it's that easy to generate a QR Code

Sanchit Gupta — Thu, 10 Mar 2022 06:08:05 +0000

See it in Action : https://www.apps4developers.com/qr-code/

Installing `qrcode`

Install QrCode library from npm.

npm install qrcode

Generate QR Code from String

import QRCode from 'qrcode';

QRCode.toDataURL(
  `https://www.apps4developers.com`,
  { margin: 2},
  function (err, url) {
    if (err) throw err;
   console.log(url);
  }
);

Snippet... Working with CSV in Javascript with PapaParse

Sanchit Gupta — Thu, 10 Mar 2022 03:33:41 +0000

https://www.apps4developers.com/csv/

Installing `papaparse`

Install PapaParse library from npm.

npm install papaparse

Learn more about PapaParse here.

CSV to JSON With Header

import Papa from 'papaparse';

const csvString = `Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`;
const jsonObj = Papa.parse(csvString, { header: true })

console.log(jsonObj);

CSV to JSON Without Header

import Papa from 'papaparse';

const csvString = `1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7`;
const jsonObj = Papa.parse(csvString, { header: false })

console.log(jsonObj);

Convert JSON to CSV

import Papa from 'papaparse';

const jsonObj = [
    {
        "Column 1": "1-1",
        "Column 2": "1-2",
        "Column 3": "1-3",
        "Column 4": "1-4"
    },
    {
        "Column 1": "2-1",
        "Column 2": "2-2",
        "Column 3": "2-3",
        "Column 4": "2-4"
    },
    {
        "Column 1": "3-1",
        "Column 2": "3-2",
        "Column 3": "3-3",
        "Column 4": "3-4"
    },
    {
        "Column 1": 4,
        "Column 2": 5,
        "Column 3": 6,
        "Column 4": 7
    }
];
const csvString = Papa.unparse(jsonObj, { header: false })

console.log(csvString);

Snippet... Color Converter

Sanchit Gupta — Thu, 10 Mar 2022 03:31:37 +0000

https://www.apps4developers.com/color-converter/

Convert Color code using `w3color.js`

Get w3color.js from here.

import w3color from './w3color';

const colorObj = w3color(`#424242`);

Get Color Name

colorObj.toName();

Get Hex Code

colorObj.toHexString();

Get RGB Code

colorObj.toRgbString();

Get RGB Code with Alpha

colorObj.toRgbaString();

Get HSL Code

colorObj.toHslString();

Get HSL Code with Alpha

colorObj.toHslaString();

Get HSL Decimal Code

colorObj.toHslStringDecimal();

Get HWB Code

colorObj.toHwbString();

Get HWB Code with Alpha

colorObj.toHwbaString();

Get HWB Decimal Code

colorObj.toHwbStringDecimal();

Get CMYK Code

colorObj.toCmykString();

Get CMYK Decimal Code

colorObj.toCmykStringDecimal();

Get NCOL Code

colorObj.toNcolString();

Get NCOL Code with Alpha

colorObj.toNcolaString();

Get NCOL Decimal Code

colorObj.toNcolStringDecimal();

Snippets... JSON

Sanchit Gupta — Thu, 10 Mar 2022 03:29:23 +0000

https://www.apps4developers.com/json/

JSON String to JSON Object

const jsonString = `{"name":"Apps4Developers.com","url":"https://apps4developers.com","description":"A collection of web development tutorials and examples","author":{"name":"Apps4Developers.com","url":"https://apps4developers.com"}}`;
const jsonObj = JSON.parse(jsonString);

console.log(jsonObj);

JSON Object to JSON String

const jsonObj = {
    "name": "Apps4Developers.com",
    "url": "https://apps4developers.com",
    "description": "A collection of web development tutorials and examples",
    "author": {
        "name": "Apps4Developers.com",
        "url": "https://apps4developers.com"
    }
};
const jsonString = JSON.stringify(jsonObj, null, 2);

console.log(jsonString);

JSON Object to Base64 String

const jsonObj = {
    "name": "Apps4Developers.com",
    "url": "https://apps4developers.com",
    "description": "A collection of web development tutorials and examples",
    "author": {
        "name": "Apps4Developers.com",
        "url": "https://apps4developers.com"
    }
};
const jsonString = JSON.stringify(jsonObj);
const base64String = btoa(jsonString);

console.log(base64String);

JSON Object to URL Parameter String

const jsonObj = {
    "name": "Apps4Developers.com",
    "url": "https://apps4developers.com"
};
const urlParams = new URLSearchParams(jsonObj).toString()

console.log(urlParams);

JSON Object to YAML using `yaml`

Install yaml package from NPM, learn more about this package here.

npm install yaml

import YAML from 'yaml';

const jsonObj = {
    "name": "Apps4Developers.com",
    "url": "https://apps4developers.com",
    "description": "A collection of web development tutorials and examples",
    "author": {
        "name": "Apps4Developers.com",
        "url": "https://apps4developers.com"
    }
};

const doc = new YAML.Document();
doc.contents = jsonObj;
yaml = doc.toString();

console.log(yaml);

JSON - YAML - Base64 and more

Sanchit Gupta — Fri, 05 Nov 2021 18:06:11 +0000

Here is a tool that you can use to transform valid JSON String to YAML, Base64, URL Parameters or just visualise it as JSON tree.

https://www.apps4developers.com/json/

Following is an example of the same object in different formats.

JSON

YAML

Base64

URL Parameters

Tree View

Creating Star using only CSS

Sanchit Gupta — Fri, 05 Nov 2021 17:24:12 +0000

.apps4developers_css_shape {
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    margin: 32px 0;
    color: #CFB53B;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 44.8px solid #CFB53B;
    transform: rotate(35deg);
}

.apps4developers_css_shape::before {
    content: '';
    position: absolute;
    top: -28.8px;
    left: -41.6px;
    display: block;
    height: 0;
    width: 0;
    border-left: 19.2px solid transparent;
    border-right: 19.2px solid transparent;
    border-bottom: 51.2px solid #CFB53B;
    transform: rotate(-35deg);
}
.apps4developers_css_shape::after {
    content: '';
    position: absolute;
    top: 1.8px;
    left: -67.2px;
    display: block;
    width: 0px;
    height: 0px;
    color: #CFB53B;
    border-left: 64px solid transparent;
    border-right: 64px solid transparent;
    border-bottom: 44.8px solid #CFB53B;
    transform: rotate(-70deg);
}

See more shares on Apps4Developers.com - https://www.apps4developers.com/css-shapes/

Let's create pac-man using CSS

Sanchit Gupta — Fri, 05 Nov 2021 17:16:24 +0000

.apps4developers_css_shape {
    width: 0px;
    height: 0px;
    border-top: 120px solid yellow;
    border-right: 120px solid transparent;
    border-bottom: 120px solid yellow;
    border-left: 120px solid yellow;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 120px;
}

See more shapes on Apps4Developers.com - https://www.apps4developers.com/css-shapes/

Base64 Encode and Decode in Javascript

Sanchit Gupta — Mon, 01 Nov 2021 13:50:35 +0000

See it in Action - https://www.apps4developers.com/base64

Converting Plain Text to Base64 Encoded String

btoa() generates a Base64 encoded ASCII string from plain text. This method is useful to encode text that is not in a URL-safe format.

Passing a string to btoa method will return a Base64 encoded string.

Example

btoa("Apps4Developers.com")

---

Converting Base64 Encoded String to Plain Text

atob() method is used to convert Base64 encoded ASCII string to plain text.

Passing a Base64 encoded ASCII string to atob method will return plain text.