DEV Community: Edison Augusthy

Sell your skills

Edison Augusthy — Mon, 21 Jun 2021 04:51:05 +0000

one of the main goals in my life is to retire early and enjoy rest by traveling all over the world. I know all of you also have some goals like this. but we know it's hard to save enough money for your retirement life. here am sharing some of my side income techniques, which you can adapt and achieve your financial goals

1) share market

above image just shows the growth of tesla on last few years. If you have invested 1000 dollars on Tesla shares in January 2020 that would be 8800 dollars by January 2021, that means 800% increment in your amount. This itself simply explain the power of share market. I usually make around 60 USD a week, which is much more than enough to cover my family's medical bills. so if you have 1 hour to spend daily, you can easily make more profit from the share market. most people say it is hard to learn share market concepts but I say actually it's not. it's super easy to learn the foundations which is much more than enough to be an investor. first start with some tutorials on youtube, then find some good shares, start investing

2) Sell your skills on amazon

In my home, everyone is super talented except me. my mom makes really good chips, and my sister is good at making crafts from wastes and empty bottles. actually, I was looking for a place to sell their skills, and I landed on amazon. we started an amazon seller account last year and started selling chips and crafts, surprisingly we got good reviews from customers and we are now able to make around 90 USD per month. this was a simple idea that came to my mind on the country-wide lock down in India started on 2020 March, I never thought it would be a success, but it is.

you can sell almost anything on amazon or any other online store. if your son is good at painting then start selling his painting, if you are good at farming just start selling some of your agricultural yields. if you are good at gardening even you can sell some plant seeds too.

its just find out what skills you can sell.. sell it .. and save for future

3) A simple app can give you 100 Dollars each month

last year I was planing to make some apps for learning new the technologies. I don't want to make something just show on my Github, but I wanted one app that can pay me in the future. at last, I came to an idea to make a app that can help people to crack professional exams. I just created a simple app and Deployed it on the play store. surprisingly people started using it, so I just kept updated with new content. later last month I was able to make 100 dollars from my app.

"the best time to start was yesterday. the next best time is Now"

Just remember there are plenty of ways that you can achieve your financial goals. all you have to do is just find out one and start doing it. the best time to start was yesterday. the next best time is Now so start now.

✨♻️One line - Date Operations in JavaScript

Edison Augusthy — Mon, 14 Sep 2020 04:32:56 +0000

See some of the useful single line JavaScript snippets for dealing with dates

Cheking

Is Before

Check if a date is before another date.

// 2020/10/20 is before 2020/10/21
new Date('2020/10/20') < new Date('2020/10/21');
// => true

Is Same

Check if a date is the same as another date.

// '2020-10-20' is same of '2020-10-21'

new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 21).valueOf();
// => false
new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 20).valueOf();
// => true
new Date(2020, 9, 20).getTime() === new Date(2020, 9, 20).getTime();
// => true
new Date(2020, 9, 20).valueOf() === new Date(2020, 9, 20).getTime();
// => true
new Date(2020, 9, 20).toDateString().substring(4, 7) ===
  new Date(2020, 9, 21).toDateString().substring(4, 7);
// => true

Is After

Check if a date is after another date

new Date(2020, 9, 20) > new Date(2020, 9, 19);
// => true

Is Leap Year

Check if a year is a leap year

new Date(2000, 1, 29).getDate() === 29;
// => true

Is a Date

Check if a variable is a native js Date object.


new Date() instanceof Date;
// => true

Get Or Set

Get the Millisecond/Second/Minute/Hour of the given date

new Date().getSeconds();
// => 49
new Date().getHours();
// => 19

Set the Millisecond/Second/Minute/Hour of the given date.

new Date(new Date().setSeconds(30));
// => "2020-09-09T09:12:30.695Z"
new Date(new Date().setHours(13));
// => "2020-09-09T03:12:49.695Z"

Date of Month

Gets the day of the month.


new Date().getDate();
// => 9

Sets the day of the month

new Date().setDate(4);
// => "2020-09-04T09:12:49.695Z"

Day of Week

Gets the day of the week.


new Date().getDay();
// => 0 (Sunday)

Sets the day of the week


new Date().setDate(new Date().getDate() - 14);
// => "2020-08-26T09:12:49.695Z"

Day of Year

Gets or sets the day of the year.


Math.floor(
  (new Date() - new Date(new Date().getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
);
// => 252

Week of Year

Gets the week of the year

const day = new Date();
const MILLISECONDS_IN_WEEK = 604800000;
const firstDayOfWeek = 1; // monday as the first day (0 = sunday)
const startOfYear = new Date(day.getFullYear(), 0, 1);
startOfYear.setDate(
  startOfYear.getDate() + (firstDayOfWeek - (startOfYear.getDay() % 7))
);
const dayWeek = Math.round((day - startOfYear) / MILLISECONDS_IN_WEEK) + 1;
// => 37

Sets the week of the year


const day = new Date();
const week = 24;
const MILLISECONDS_IN_WEEK = 604800000;
const firstDayOfWeek = 1; // monday as the first day (0 = sunday)
const startOfYear = new Date(day.getFullYear(), 0, 1);
startOfYear.setDate(
  startOfYear.getDate() + (firstDayOfWeek - (startOfYear.getDay() % 7))
);
const dayWeek = Math.round((day - startOfYear) / MILLISECONDS_IN_WEEK) + 1;
day.setDate(day.getDate() - (dayWeek - week) * 7);
day.toISOString();
// => "2020-06-10T09:12:49.794Z

Days in Month

Get the number of days in the current month

new Date(2012, 02, 0).getDate();
// => 29

Parse

Return the Date parsed from date string using the given format string

const datePattern = /^(\d{2})-(\d{2})-(\d{4})$/;
const [, month, day, year] = datePattern.exec('12-25-1995');
new Date(`${month}, ${day} ${year}`);
// => "1995-12-24T13:00:00.000Z"

Return the Date parsed from time string using the given format string

const datePattern = /^(\d{4})-(\d{2})-(\d{2})\s(\d{1,2}):(\d{2})$/;
const [, year, month, day, rawHour, min] = datePattern.exec('2010-10-20 4:30');
new Date(`${year}-${month}-${day}T${('0' + rawHour).slice(-2)}:${min}:00`);
// => "2010-10-19T17:30:00.000Z"

Manipulate

Add

Add the specified number of days to the given date.

// add 7 days
const now = new Date();
now.setDate(now.getDate() + 7);
// => "Sun Sep 16 2018 09:12:49"

Subtract

Subtract the specified number of days from the given date.

// subsctact 7 days
new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 7);
// => Sun Sep 09 2018 09:12:49

End of Time

Return the end of a unit of time for the given date.

const end = new Date();
end.setHours(23, 59, 59, 999);
end.toISOString();
// => "2018-09-09T16:59:59.999Z"

Display

Time from now

Return time from now.


new Intl.RelativeTimeFormat().format(-4, 'day');
// => "4 days ago"

Difference

Get the unit of time between the given dates


// difference betwwen '2007-01-27' to '2007-01-29'
new Date(2007, 0, 27) - new Date(2007, 0, 29);
// => -172800000
Math.ceil(
  (new Date(2007, 0, 27) - new Date(2007, 0, 29)) / 1000 / 60 / 60 / 24
);
// => -2

🚀⚙️Deep Dive in to JavaScript Engine - (Chrome V8)

Edison Augusthy — Mon, 07 Sep 2020 02:42:34 +0000

The web browser are the main part of internet world. When ever we type a URL in the address bar, it fetch resources from remote server, and display them on the screen, through this time it mainly undergoes 3 process

Fetch
Process
Display

At first it fetching data from subsequent web servers via the internet.

Then the Render engine, will process the received resourses. After that the Browser Engine will performs data presentation.

so how all this happen...?

To know better about these processes, we should know how a browser process JavaScript . And that is done by JavaScript engines.

A JavaScript engine is a program or an interpreter which executes JavaScript code. JS is a higher level dynamic language and it has no way to directly interact with our machines lower level logic. So JavaScript engine can be implemented as a standard interpreter, or just-in-time compiler that compiles JavaScript to bytecode in some form . see the high level overview of the js engine in below image

Parser The Html Parser will fetch all scripts loaded via <script> tag. The source code inside this script gets loaded as a UTF-16 byte stream to a byte stream decoder. This byte stream decoder then decodes the bytes into token and then its sent to parser.
AST(Abstract Syntax Tree)
The parser creates nodes based on the tokens it gets. With these nodes, it creates an Abstract Syntax Tree (AST).
Interpreter
The interpreter walks through the AST and generates byte code. It reads the code line by line. When the byte code has been generated, the AST is deleted for clearing up memory space.
Profiler
The Profiler monitors and watches code to optimize it.
Compiler
The compiler works ahead of time and creates a translation of the code that has been written and compiles down to a lower level language that machines can read.

We have seen different components of js engine . Now lets check what are the Different JavaScript engines available..

V8 — open source, developed by Google, written in C++
Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java
Spider Monkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox
JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari
KJS — KDE’s engine originally developed by Harri Porten for the KDE project’s Konqueror web browser
Chakra (JScript9) — Internet Explorer
Chakra Core(JavaScript) — Microsoft Edge (Now uses v8)
Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group
JerryScript — is a lightweight engine for the Internet of Things.

V8

The V8 Engine which is built by Google is open source and written in C++. This engine is used inside Google Chrome. V8 is also used for the popular Node.js And Deno. To obtain High performance, V8 translates JavaScript code into more efficient machine code instead of using an interpreter. Even though Most modern JavaScript engines has the same approach, but V8 stand out is that it does not produce any intermediate code.

HOW V8 WORKS

V8 compiles JavaScript code into machine code at execution by implementing a JIT (Just-In-Time) compiler. A JIT compiler takes the benefits from both the traditional compiler and an interpreter and mixes them together.

When V8 compiles JavaScript code, the parser generates an AST (abstract syntax tree). A syntax tree is a tree representation of the syntactic structure of the JavaScript code. Ignition, the interpreter, generates bytecode from this syntax tree. TurboFan, the optimizing compiler, eventually takes the bytecode and generates optimized machine code from it.

Lets check v8's 2 main pipelines behind its performance Ignition interpreter and the compiler Turbofan little bit more

Ignition

The interpreter in v8 is called Ignition. The interpreter generates the byte-code. This is good for code that only needed to run only once. The byte-code runs inside the JavaScript engine itself. Interpreted code is falser to get something running but is a bit slower. Ignition resolve overhead memory consumption by achieving three objectives

reducing memory usage
reducing startup time
reducing complexity

TurboFan

The TurboFan pipeline follows some steps to translate bytecode into machine code. Optimizations in the pipeline are performed based on feedback collected by Ignition.

TurboFan’s online, JIT-style compilations and optimizations concludes V8’s translation from source code to machine code.

Sometimes, we may have repeated code blocks. The JavaScript compilers run feedback and collect profiling data for the code being executed. If it comes across the function that is being called with the same type of parameters every time and has been called multiple times, this code goes through TurboFan. The TurboFan produces highly optimized machine-level code which runs directly on the CPU for the hot code. TurboFan only kicks in when JS engine detects a code to be hot. A code is hot when it runs quite often, runs inside a loop, etc. The compiled code has direct CPU instructions and is quite faster.

🌳Say goodbye to LocalStorage 🚀

Edison Augusthy — Tue, 01 Sep 2020 10:48:54 +0000

Being a front-end developer one of the common things that we wanted is to store and share data in the client browser, And most of us really rely on local storage. So what is localStorage..?
according to MDN:

The localStorage provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. data stored in localStorage has no expiration time. Data in a localStorage object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.

So the data stored in localStorage is specific to the protocol of the page. In particular, data stored by a script on a site accessed with HTTP (e.g., http://example.com) is put in a different localStorage object from the same site accessed with HTTPS (e.g., https://example.com).

The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

So what are `localStorage` disadvantages..?

data stored in localStorage has no expiration time
localStorage will be available for any tab or window in the browser,
Have to constantly keep back up of data to prevent loss
The user is completely responsible for the safety of the data
Takes up more storage space if you store locally

Switching to session storage

Window.sessionStorage is a better alternative option for localStorage.
A page session lasts only as long as the browser tab is open, and it will survive over page reloads and restores. But opening a page in a new tab or window will create a new session. And we have a storage limit is larger than a cookie (at most 5MB)

Using Session storage

setting data

We can store data using setItem method.
syntax :



sessionStorage.setItem('key', 'Value');

the above code will add the given key-value pair to session storage.
EG:

so the session storage now has data with key MyCat

Getting data

We can get data using the getItem method.
syntax :




sessionStorage.getItem("key")

the above code will return data of that key from session storage.
EG:

Removing Data

We can remove data using removeItem or clearmethod.
syntax :



sessionStorage.removeItem("key")
sessionStorage.clear()

removeItem will remove a specific key from session storage, whereas the clear method will clean up the entire session storage