WebDevIQ

All in one place to develop new skills in web development. You can find posts by categories, interview questions, quizzes, and a lot more and in a simplified manner.

Copyright @2019-2020 © by Vinod Kumar. All rights reserved.

Monday, February 28, 2022

Developer useful chrome extensions

  February 28, 2022    

 Here I am going to list out some extensions, which will help you in your day to day life development and productivity. 

Go through the list and share your favorite extension as well as comment on very commonly used extensions. 

Before listing all of them, I have categorized them, if it does not fall under any category, I have added them into others section.

Extensions:

a. Accessibility:

  1. Accessibility Insights for web
  2. Axe Dev tools
  3. Site Improve Accessibility checker
  4. Wave evaluation tool
  5. WCAG color contrast checker

b. CSS and Theming:

  1. Page ruler redux
  2. Paint tool - marker for chrome
  3. WhatFont
  4. Material Dev tools theme collection

c. Office compliance:

  1. Windows Accounts
  2. Microsoft Compliance extension
  3. Forcepoint end point for windows

d. Others:

  1. 30 Seconds of knowledge
  2. Adblock plus - free Adblocker
  3. Picture in picture extension - by google
  4. Read Aloud - text to speech voice recorder
  5. Screencastify - screen video recorder
  6. Cisco webex extension
  7. Angular dev tools
  8. Augury
  9. Grammarly
  10. JsonVue
  11. LightHouse
  12. Touch VPN - secure and unlimited VPN proxy
  13. uBlovk origin

My favorite extensions among these are 

  • "30 Seconds of knowledge"
  • AdBlock plus
  • Picture in Picture extension.

I have shared the links beside each extension, do navigate and install - Happy Learning.
 

  No Comments

Sunday, October 25, 2020

NG: Angular versions and features list

  October 25, 2020    

Hope everyone is doing good, here we will look into the angular versions and its features at one glance. I hope it will be useful when you want to recap your angular skills for any interview preparation.

Please add any points in the comments section, if I have missed any.

Version 2:

  • Complete rewrite from A1
  • Es6 and Typescript support
  • Component-based
  • support for mobile devices

Version 4:

  • Core library changes
  • Performance improvement - AOT compiler
  • Typescript compatible
  • Else added to ngIf directive
  • Animation separated from core library.

Version 5:

  • Compiler improvements
  • Build optimizer
  • Angular universal state transfer API and DOM support
  • Preserve whitespace
  • ExportAs for component/directive
  • The new HTTP client module
  • Few new router life cycle events

Version 6:

  • Angular Elements
  • Service worker - bug fixes
  • <template> removed
  • i18n
  • ngModelChanges - Forms
  • EleRef more strict <any>
  • Bazel Compiler
  • Rxjs 6.0
  • TreeShaking - ProvideIn
  • Angular Material CDK
  • Webpack 4 in CLI

Version 7:

  • Drag and Drop
  • Virtual Scrolling
  • CLI prompts
  • Bundle Budget
  • Application performance (Removed polyfills)
  • Error handling
  • Angular compiler (8 phase AOT)
  • ngDoBootstrap (interface)
  • NS.Schematics

Version 8:

  • Differential loading
  • Dynamic imports
  • Ivy rendering
  • Bazel support
  • viewchild-static
  • web worker -CLI
  • Analytics -CLI

Version 9:

  • Default Ivy Engine
  • Improvement in bundle sizes
  • Improved type checking
  • faster testing
  • AOT compiler on by default
  • New options for "provideIn"
  • Typescript 3.7 support
  • better debugging
  • Improvements to differential loading
  • Improved css class and style binding

Version 10 Rc has been released, will update the features once the major version is released, keep looking for the updates.

  

  No Comments

Sunday, May 17, 2020

Javascript: Array Methods

  May 17, 2020    

Let's look into the complete list of methods available on the array.

  1. Length
  2. IndexOf (Back -negative, no start index
  3. Includes 
  4. LastIndexOf
  5. Search
  6. Slice - Negative (if index value is not included) 
  7. substr - Length
  8. SubString
  9. repeat (ES6)
  10. left/start Trim
  11. right/end Trim
  12. toString
  13. replace
  14. split
  15. concat
  16. charAt
  17. charCodeAt
  18. fromCharCode
  19. touppercase
  20. toLocaleUpperCase
  21. toLowerCase
  22. toLocaleLowerCase

Difference between 

1. includes and indexOf - boolean and number
2. Index of and search - Noregex and regex

  

  No Comments

Sunday, May 10, 2020

What is DENO ? kick-start tutorial

  May 10, 2020    


The person behind Deno is "Ryan Dahl", creator of Node.js. let us check out why did he create Deno.

Node js - It is an open-source, cross-platform, javascript runtime based on the V8 javascript engine.
In his talk, he explains "10 things I regret about Node.js". I will give just mention the points but still if your interested just check out the video.

Points from the talk:
  • Not sticking with promises
  • Security
  • The build system (GYPc)
  • Package.json
  • node_modules
  • Require without extension
  • index.js
  • Focused on an event I/O

Deno - A secure Typescript runtime based on the v8 javascript engine and Rust programming language.
It is a new way to write server-side javascript. It solves all the problems mentioned by Ryan over his talk.
It used the V8 engine under the hood but the runtime is implemented in typescript and Rust.

  • Security (--allow-net, --allow-write)
  • Simplified module system (remove the dependency of node_modules)
  • Typescript compiler built into the executable
  • Ship only single executable with minimal linkage
  • Bootstrap runtime by compiling node modules with parcel into a bundle
  • support for top-level await.
  • Browser compatible('window' not 'global')

I recommend watching this below video - Deno in 100 seconds. 
That's it. Github link

  

  No Comments

Saturday, May 9, 2020

NG: Setup local environment and workspace

  May 09, 2020    

Today we will discuss how to set up a local environment. This is pretty basic for developers who are working on angular applications but will discuss in detail setting up the workspace, projects and if possible we will discuss how to build and deploy, if not we will discuss in the next blog post.

We can set up the application using local development or a tool like stackblitz. 

So let on focus on setting up locally in our machine.

Steps:
1. Install Node (check version using: npm -v)
2. Node comes with a package manager which will be helpful to download dependent packages for our application (check version using: npm -v)
3. Install Angular CLI (command line Interface for scaffolding the application (ready-made application)).
        npm install -g @angular/cli
4. To create a new workspace and initial app, you will be asked for prompts just accept the defaults by pressing the Enter key (More on prompts later)
        npm new <appName> 
5. Run the application, CLI includes a built-in server to serve the app locally and it supports building, testing, bundling, and deployment of the application.
    More on CLI commands(here).
        cd <appName> 
        ng serve --open

  

  No Comments

Subscribe to: Posts (Atom)