DEV Community: Arun Kumar G

Different Ways to Create Arrays

Arun Kumar G — Thu, 25 Nov 2021 16:32:04 +0000

In JavaScript arrays are very important data structures one has to learn and good to be master at after learning the language basics, here in this article I would like to cover the ways to create them and arrays are common and comes handy to solve manythings

Array literal Syntax

 const arr_name  = [];   // array without a size
 const arra_name = [5];  // with size 5 elements

Literal syntax is the easy one to create,
Its most often used by developers to create arrays
supports other array operations

Array using constructor method

 const arr_name = new Array();  // Array is the constructor
 const arr_name = new Array(5);  // Create array with 5 elements

JavaScript Challenges - Strings

Arun Kumar G — Sat, 09 Oct 2021 17:36:18 +0000

Q1. Write a function to validate given email has @ or not

    isValidEmail("test@gmail.com") === true
    isValidEmail("testmail.com") === false

Q2. Write a function check weather given email id is gmail or not

    isGmailId("test@gmail.com") === true
    isGmailId("test@yahoo.com") === false

Q3. Write a function to accept firstName and lastName as param and should return fullName

   getFullName("John","Snow") == "John Snow";

Q4. Uppercase the first character

   upperFirst("john") == "John";

Q5. Truncate a given string with a limit

   truncate("What I'd like to tell on this topic is:", 20) = 
   "What I'd like to te…"
   truncate("Hi everyone!", 20) = "Hi everyone!"

Q6. Function to extract currency value from given string

extractCurrencyValue('$120') === 120

Q7. Function mask every A with

    stringMask("Its A sunny weather") === "Its # sunny we#ther";

Q8. Function to Count Decimal Points in a given number?

   getDecimalCount("43.20") ➞ 2
   getDecimalCount("400") ➞ 0
   getDecimalCount("3.1") ➞ 1

Day3 - input & document

Arun Kumar G — Sat, 05 Jun 2021 02:56:12 +0000

<!DOCTYPE html>
<!-- html 1 to html5.x  -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<BODY>
    <!-- self closing tags -->
    <input type="text" />
    <br />
    <!-- password -->
    <input type="password" />
    <br />
    <!-- button -->
    <input type="button" value="Click me!" />
    <!-- datetime -->
    <br />
    <input type="datetime" />
    <br />
    <BUTTON>BUTTON</button>
    <Button>Button</Button>
    <input type="datetime-local" />
    <br />
    <input type="checkbox" />
    <br />
    <input type="radio" />
    <br />
    <textarea></textarea>
    <!-- https://www.w3schools.com/ -->


    <!-- headings -->
    <h1>Lorem Ipsum</h1>

    <h2>Why do we use it?</h2>

    <h6>Why do we use it?</h6>


    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at
        its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
        opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing
        packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
        will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by
        accident, sometimes on purpose (injected humour and the like).</p>

    <div>
        i am inside a div
    </div>

    <span>its span here</span>
    <br />
    <label>Username</label>
    <br />
    <label>password</label>

    <!-- list tags -->
    <!-- table -->

</body>

</html>

Learn html by building google home page

Arun Kumar G — Thu, 03 Jun 2021 13:53:16 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- comments: wil not be displayed, but part of the html document when loaded  -->
    <!-- image  -->
    <img alt="Google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    <br />
    <!-- line break -->
    <input />
    <!-- input  -->
    <br />
    <br />
    <!-- buttons clickable  -->
    <button>Google Search</button>
    <button>I am feeling lucky</button>
    <br />
    <br />
    <!-- labels -->
    <label>Google offered in:</label>
    <!-- hyper links -->
    <a href="#">हिन्दी</a>
    <a href="#">ಕನ್ನಡ</a>
</body>
</html>

Resource for Web Development

Arun Kumar G — Sun, 05 Jul 2020 03:28:01 +0000

Resources for learning html / CSS / JavaScript

https://www.freecodecamp.org/learn
https://www.w3schools.com/default.asp
scrimba - video and practice
https://github.com/HackYourFuture/curriculum
https://progate.com/courses
https://www.youtube.com/c/JavaBrainsChannel/playlists
Udemy
Couresra
https://www.faceprep.in/prograd/full-stack-developer/?source=Home
Books

Recommended tools before Web development learning

Arun Kumar G — Fri, 05 Jun 2020 15:53:26 +0000

Install nodejs

https://nodejs.org/en/download/

will help u install lot of js modules to install eg: lite-server below

Setup lite server

https://www.npmjs.com/package/lite-server

tool to run your site from html/js/css from your folder locally
so a static file server
automatically reloads your site on file changes

Install git

https://git-scm.com/download/win

to maintain versions of your files, to keep track.
to clone and maintain repos or projects from your github account

Did I miss any other tools, please share whats your recommendations? or how did you get started ?

4 + 1 rules to understand this

Arun Kumar G — Mon, 13 Apr 2020 01:19:49 +0000

Undestanding this

function foo(){ console.log(this.name); }

There are four rules to identify what this refers to in a given context

Default binding:
- points to the global or window object foo();
implicit binding
- points to the object using which the method is innvoked;
The object that is standing before the dot
is what this keyword will be bound to.

obj.foo();
Explicit binding
- possible to set explicit value by one of these methods obj.foo.apply(person,[]); obj.foo.call(person, ,,,,); foo.call(person,...);
Constructor / new Binding
- value is set the newly created/instantiated Object new Constructor();

And there is a priority, whic is 4 3 2 1

The above 4 rules apply inside a normal function, but not in arrow functions

Special case

Arrow functions

In case of an arrow function, 2,3,4 will not work.
Inside arrow function the value points to value of this which is in enclosing block where the method is invoked and not where its defined.``

Day6 - git with js challenge

Arun Kumar G — Sun, 05 Apr 2020 03:30:34 +0000

Git and JavaScript Learning

Link to challenges

https://dev.to/codeguppy/50-micro-coding-challenges-for-javascript-learners-5ace

Commands to start a local and pushing the changes to brand new remote

git init git add git commit -m "first commit" git remote add origin https://github.com/arung86/50-js-challenges.git git push -u origin master

My challenges are tracked in Repo

https://github.com/arung86/50-js-challenges.git

Day5 - Learning JavaScript

Arun Kumar G — Fri, 03 Apr 2020 03:05:46 +0000

Summary of what we discussed in our daily learning javascript and articles covered

Understanding This,call, apply, bind
Git Concepts
JavaScript naming conventions

Naming conventions dos and donts

Arun Kumar G — Fri, 03 Apr 2020 03:01:47 +0000

Freecodecamp JavaScript naming conventions

React Hooks notes

Arun Kumar G — Mon, 02 Mar 2020 07:20:14 +0000

Hooks are new additions to react in 16.8.0

Hooks are basically a JavaScript functions

They let you hook(application business logic) into react state and lifecycle features from function components.

Hooks can only be used inside function components,

Hooks make FCs state rich.

You can create your own hooks

Without hooks today Its difficult to share state-full logic in a class based component, which is made easy.

CRS map using leaflet or any other way

Arun Kumar G — Mon, 03 Feb 2020 13:47:51 +0000

Hi,
I am looking for a CRS map using leaflet

should be able to create a CRS map as in https://leafletjs.com/examples/crs-simple/crs-simple.html
I should be able to add markers
should be able to get the coordinates (x,y) on the image where markers getting added to save into db

Any help or direction on the above requirement would be a great