DEV Community: yogeshwaran

let,const & old var revisited

yogeshwaran — Fri, 29 Mar 2024 03:49:07 +0000

Every application in real life we need some temporary storage to save, process and get output from it. They are called variables.

A variable is a “named storage” for data. We can use variables to store cart, visitor count, and other data.

Let

We can store variable data in let by using let keyword

let str1; // variable created
str1 = "Message" // Value assigned to a variabled

// we can assign while declaring a variable
let str2 = "message";

It is possible to declare multiple let variables in a single line but it is recommended to keep in each line for better readability

// Not recommended
let newStr = "content1", str2 = "Content2", str3= "Content3";

// Best practice 
let newStr = "content1";
let str2 = "content2";
let str3 = "content3";

Variable naming in LET

There are some limitations on variable names in JavaScript:

The name must contain only letters, digits, or the symbols $ and _.
The first character must not be a digit.
We can't use reserve keywords for naming variables like let, class, return, and function, and more
Case sensitive : gender and GENDER are considered as different

// Valid names 

let userGender;
let test123;

// Invalid 

let user-gender; // Hypens not allowed 
let 1a; // Should not start with number

Const

To store constant values which can't be modified by any operations, we use CONST keyword.

const gender = "male";
gender = "female" //error can't reassign the const

Naming CONST

It is a best practice across industry to name CONSTANTS in full caps with underscores.

const DATE_OF_BIRTH = 18/02/1998;

old VAR

VAR is the old way of declaring variables in javascript which is similar to LET. It's generally not used in modern javascript due to its different limitations and behavior.

var has no BLOCK scope

Variables declared with var are not either has block or function scope.

// var lives even after if blocks
if (true) {
  var isOpen = true; // use "var" instead of "let"
}

alert(isOpen); // true;

// Rewrite with let
if (true) {
  let isOpen = true; // use "var" instead of "let"
}

alert(isOpen); // Reference error

Redeclaration is possible with var

We can redeclare any variables using var and it won't throw any erros.

var name = 'kate';
var name = 'winslet';
console.log(name); // winslet

Hoisting with 'var'

There is a famous interview question Explain hoisting in javascript . Variables declared with var and moved to top by default. This behavior of moving up is known as hoisting

// Value assigned before creating variable.
function sayHi() {
  phrase = "Hi";
  alert(phrase);
  var phrase;
}
sayHi(); // Hi

But we should understand that only declarations are hoisted not assignment.

function sayHi() {
  alert(phrase);

  var phrase = "Hello";
}

sayHi(); // undefined

To mitigate the limitations of scoping in var. developers used concept called IIFE - Immediately invoked function expression.

Summary

Let - used to declare varying variables
CONST - used to store constant variables
Var - Old textbook way Don't use now

Hope we are refreshing good parts of javascript. I will come up with more interview part in upcoming parts. Subscribe and follow up for upcoming posts.

Data types in javascript

yogeshwaran — Sun, 24 Mar 2024 00:27:00 +0000

Javascript is a dynamically typed language. Values are not bound to any of the data type. Javascript itself responsible for handling data types of the values

It is also a weakly typed language, which means it allows implicit type conversion when an operation involves mismatched types, instead of throwing type errors.

const num = 24; // num is a number
/* JavaScript converts num to a string, 
so it can be concatenated with the other operand */
const result = num + "1"; console.log(result); // 241

Primarily there are 7 primitive data types in javascript

1.Number
2.BigInt
3.String
4.Boolean
5.null
6.undefined
7.symbol

1.Number

Number represents both integer **and **floating point numbers. NaN ("Not a Number") is a special kind of number value that's typically encountered when the result of an arithmetic operation cannot be expressed as a number. It is also the only value in JavaScript that is not equal to itself.

let num1 = 245;

2.BigInt

Javascript 'Number' datatype cannot safely represents integers which are larger than 2⁵³ - 1 which is 9007199254740991.

We can't store values larger than this in number data type. This data type is used by adding *n * at the end of integer.

In real time we don't required this large numbers in operations.

let largeNum = 9007199254740993n;

3.String

String in javascript must be surronded by single/double quotes or backticks.

Backticks are also known as template literals which is used to concatenate string along with variables.

let str1 = 'This is a string';
let str2 = "This is also a string"
let str3 = `${str1} with backtick` 
// This is also a string with backtick

4.Boolean

Boolean represents **truthiness **of the variable. It is always true or false or 0 or 1.

let x = 1;
let y = 2;
let z = 3;
console.log(x == y); // True
console.log(y == z); // false

5.Null

Special null values does not belong to any of the other data types. Mostly used when there is no value assigned while intialization.

foo; //ReferenceError: foo is not defined
// foo is known to exist now but it has no type or value:
const foo = null;
foo; //null

6.Undefined

If a variable is declared and not assigned it is said to be undefined.

Technically it is possible to assigned undefined to any variables but it is not recommended to use it. Instead use null and undefined will be reserved for unknown undefined values only.

7.Symbols

Symbol is a built-in object whose constructor returns a symbol primitive — also called a Symbol value or just a Symbol — that's guaranteed to be unique. Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object.

let sym1 = Symbol('cat');
let sym2 = Symbol('cat);
console.log(sym1 === sym2); //False

typeof operator in javascript

typeof is a operator which is used to find datatype of any value.

let a = 22;
let b = 'test';
let c = '22';
console.log(typeof a); // number 
console.log(typeof b); // string
console.log(typeof c); // string

Hope you are started refreshing your javascript skills. follow me and subscribe for more posts like this. Feel free to comment any suggestions or doubts

Intro to javascript

yogeshwaran — Sat, 23 Mar 2024 13:34:40 +0000

Hi Everyone.

As i am brushing up my knowledge in Javascript and their frameworks. i have planned to post a series of posts what i have learned now and then. Follow the series for refresh your knowledge in javascript.

Javascript is a light weight, Cross platform, object oriented **scripting **language which primarily runs of web browsers and in servers.

Interpreted or compiled

Interpreted languages runs code from top to bottom and execute result immediately while compiled languages converts the code to binary format and execute it.

Javascript is a interpreted language but from a technical point most javascript interpreters use Just-in-time compilation to improve performance and faster execution of the javascript code.

Javascript engine

JavaScript engine is simply a computer program that executes JavaScript code. It is responsible for translating human-readable JavaScript code into machine-readable instructions that the computer's hardware can execute.

Old javascript engines are mere compilers but modern javascript engines like v8 use just-in-time compilation to improve performance.

Popular javascript engines are

*v8 *: Used in chrome and node
Spider monkey : Used in firefox browser
Javascript core : powered safari

Single threaded or multi threaded

It is a single threaded synchronous language which can execute only one command at a time in a specific order.

Client side or server side

javascript is initially a client side scripting language which runs mostly on browser. but now a days modern javascript runs on both Client (browsers), Server side(Node) and almost everywhere from desktop to mobile applications.

To be continued...

Why tailwind is trending recently ?

yogeshwaran — Thu, 21 Jan 2021 15:28:07 +0000

Media query for dark mode in css

yogeshwaran — Wed, 20 Jan 2021 00:00:00 +0000

Its 2021 almost every android,ios and windows devices have the option to choose light/dark mode as their preferable mode. its nice to have dark/light mode in your websites. Fancy isn't it ?

Media query for Dark mode

@media (prefers-color-scheme: dark) {
}

if your website theme is already have dark backrounds and light text. you can do it in reverse by adding light mode media query.

Media query for Light mode

@media (prefers-color-scheme: light) {
}

If you are not using css variables or any preprocessors in your website. you need to overwrite most of the color for having it in dark/light mode.

CSS Variables are handy

Using css variables it is easy to setup colors for dark/light mode in a simple way by replacing color variables in media query

:root {
  --background: #fff;
  --text-color: #323232;
}

// Dark mode
@media (prefers-color-scheme: dark) {
  :root {
    --background: #323232;
    --text-color: #fff;
  }
}

Live example

Try switching dark and light mode in your device and see how the below page renders

See the Pen Media query for dark mode by yogeshwaran
(@yoyo) on CodePen.

Feel free to ask me in case of doubts. i am very much happy to help you.

Position:sticky

yogeshwaran — Thu, 07 Jan 2021 00:00:00 +0000

Hello everyone, Welcome to my first post of 2021.

What is position:sticky ?

Sticky is simply the combination of fixed and relative positions. Sticky Elements remain relative untill it touches the declared threshold level.

.sticky{
  position:sticky;
  //Related Elements become fixed at their top:0
  top:0;
}

Simple example of sticky - Article with sub titles

See the Pen position:sticky by yogeshwaran
(@yoyo) on CodePen.

Can i use sticky in my project ?

All latest browser supports sticky except in HTML table’s th or tr.If you are not considering IE11. you should definetly give a try on this.

See Browser support table here

My best codepens of all time

yogeshwaran — Sat, 08 Aug 2020 00:00:00 +0000

If you are a frontend developer definetly you visited codepen once or frequently. i have used codepen extensively during last few years as a documentation and experimental playground.

some days tried #100dayscss and challenged myself for learning javascript by series of codepens.

Here i have listed some of my best codepens which might be useful for you in someway.you can see My codepen profile here.

1.Animation using scss loops

See the Pen 100dayscss-44 by yogeshwaran
(@yoyo) on CodePen.

2.CSS only bulb

See the Pen 100dayscss-43 by yogeshwaran
(@yoyo) on CodePen.

3.User friendly 404 page

See the Pen User friendly 404 page by yogeshwaran
(@yoyo) on CodePen.

4.Single div Coffee cup

See the Pen #codevember - 14 - Single div coffee cup by yogeshwaran
(@yoyo) on CodePen.

5.Guess the number javascript game

See the Pen Guess the number #Javascript by yogeshwaran
(@yoyo) on CodePen.

SCSS Mixins and snippets you must use in all projects

yogeshwaran — Sun, 02 Aug 2020 00:00:00 +0000

We all should accept css preprocessors like scss/less makes our(developer) life easier. Variables and nestings helps us to maintain a quality code and we are not yet using the most powerful feature of all MIXINS.

Mixins are really helpful in lot of ways. But when to use mixin is the key and if you are creating a mixin. you must follow the golden rule.

Mixins without arguments are bad

Here are the few mixins that can be used in all projects.

1.Ellipsis

Adding a ellipis to your website text is not simple. but when you have this handy mixin you just need to include the mixin with the number of lines as a argument.

@include text-shorten(2);

For single line ellipsis you have to pass null.

@include text-shorten(null);

Note : Line clamp is not supported in internet explorer.Don’t use if you are supporting IE 11 or below.

See the Pen @mixin ellipsis by yogeshwaran
(@yoyo) on CodePen.

2.Linear gradients

Linear gradients are fancy and adding all those syntax with fallback is little tricky.

See the Pen wvazwjd by yogeshwaran
(@yoyo) on CodePen.

3.Generate dynamic classes for icon fonts

If you are using custom iconfont like icomoon you may require to use the classes generated from the iconfont generator. instead you can add all icons in a key value pair and use @each function in scss to create icon classes and add the respective unicode to them.

Click view compiled to see the compiled css results.

See the Pen Dynamically generate icon font classes in scss by yogeshwaran
(@yoyo) on CodePen.

Front end Developer blogs to follow in 2020

yogeshwaran — Mon, 03 Feb 2020 00:00:00 +0000

Hey guys

After a too enthusiastic first ‘new beginning’ post. i don’t have any new ideas or i didn’t do anything apart from my regular office work to blog a post. so in order to break the ice. I would like to introduce some of the best developers blogs i follow.

Dave cedia

React Guy. He writes mostly on react,redux,svelte and everything frontend. He runs couple of courses on react Pure react and pure redux. Follow him on

https://daveceddia.com/

Florin pop

Florin pop is well known for his challenges. He is a inspirational front end developer who blogs mostly on frontend. He recently completed his 100 days 100 project challenge. currently he is working on 30 days 30 video challenges. i am always wonder how he work on these apart from the regular work.

https://www.florin-pop.com

Tania rascia

Tania rascia is a full stack developer. She blogs mostly on modern javascript,css and everything frontend. She also Won 3rd place for Personal Developer Blog of the Year 2019 - Hackernoon.

https://www.taniarascia.com/

Chris ferdinandi

Vannila javascript expert. Chris runs couple of training programs on javascript. His developer tips newsletter is read by over 7000+ develooper each day/.

https://gomakethings.com/

I will introduce more blogs to you over the time because sharing is always caring.

New beginning

yogeshwaran — Tue, 10 Sep 2019 00:00:00 +0000

“It is never too late to be what you might have been.” —George Eliot

It is very hard to start something new even it is the thing you love most. Web designing is my passion and profession since 2013. But lauching a simple personal website/blog for me become a nightmare. Why ?

Thinking too much.🤔

I have developed various layouts for my new website, Bought a different domain name every year, Looking for the cool brand name and nothing works so far.Over thinking paralyzed my brain 🤯.So Finally stopped thinking and started a simple blog with standard theme and some css tinkering for my satisfaction. thats it MY BLOG is live now and you are reading my first post 👏👏👏.

Blogging is not new to me. I can proudly say i am a Tamil blogger running a blog called Jillthanni.Even though it is full of my bla bla thought and memories i can carry through the little experience to run this a new.

I have planned to use this blog as a materialistic partner to document my learnings in Web design,css and whatever in front end development.

Since this is my first post i have to short introduce myself.

Yogeshwaran - Weaving web since 2013 - Coffee addict - Adorable husband to a beautiful wife - Occasional book worm.

See you soon in upcoming posts.