Puppeteer Getting Started

Try in browser

  • Run UI instead of headless
    • const browser = await puppeteer.launch({headless: false});
  • Samples
  • Access DOM
  • Set chrome profile to use
  • Change exe path:
    • await puppeteer.launch({
      ‘C:\\Users\\tarun\\AppData\\Local\\Chromium\\User Data’,
      To RUN AS any new profile with userID and password, change the above executablePath to use CPAU

NPM Global Config

PATH: npm config get globalconfig

Eg C:\Users\tarun\AppData\Roaming\npm-global\etc\npmrc



  • per-project config file (/path/to/my/project/.npmrc)
  • per-user config file (~/.npmrc)
  • global config file ($PREFIX/etc/npmrc)
  • npm builtin config file (/path/to/npm/npmrc)



npm config set <key> <value> [-g|–global]
npm config get <key>
npm config delete <key>
npm config list [-l] [–json]
npm config edit
npm get <key>
npm set <key> <value> [-g|–global]

aliases: c


Eg. registry=https://registry.npmjs.org/

Chrome Extensions Path

When installed from the Chrome store, the extension path is the user profile folder found here: chrome:version link under the extensions folder in : Profile Path C:\Users\tarun\AppData\Local\Google\Chrome\User Data\Default

BUT, when an extension is installed from outside the store, like from local file system, it is not copied to the profile and instead is loaded from the local path where it was originally installed from

Extensions are loaded per chrome profile and so aren’t shared across different users


Change Windows Theme using script

Custom Theme Path:


VB Script to apply (save below snippet as .vbs after changing theme path):

Set WshShell = WScript.CreateObject("WScript.Shell")

WshShell.Run "rundll32.exe %SystemRoot%\system32\shell32.dll,Control_RunDLL %SystemRoot%\system32\desk.cpl desk,@Themes /Action:OpenTheme /file:""C:\Users\tarun\AppData\Local\Microsoft\Windows\Themes\WHITE TK.theme"""

Wscript.Sleep 10000
WshShell.AppActivate("Desktop Properties")
WshShell.Sendkeys "%FC"
WshShell.Sendkeys "{F4}"



ref: https://www.sevenforums.com/themes-styles/93397-there-silent-command-line-operation-change-theme.html

Using Web Components in Ionic using StencilJS(Polymer Summit 2017)

Stencil: A Compiler for Web Components

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

  • Virtual DOM
  • Async rendering (inspired by React Fiber)
  • Reactive data-binding
  • TypeScript
  • JSX

and then generates standards-based Web Components with these features baked in.

Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components. Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

Compared to using Custom Elements directly, Stencil provides extra APIs that makes writing fast components simpler. APIs like Virtual DOM, JSX, and async rendering make fast, powerful components easy to create, while still maintaining 100% compatibility with Web Components.

The developer experience is also tuned, and comes with live reload and a small dev server baked in to the compiler.

Why Stencil?

Stencil was created by the Ionic Framework team to help build faster, more capable components that worked across all major frameworks.

While Ionic primarily targeted Cordova apps, the emergence of Progressive Web Apps as a rapidly growing target for web developers demanded a different approach to web app development performance. With Ionic’s classic use of traditional frameworks and bundling techniques, the team was struggling to meet latency and code size demands for Progressive Web Apps that ran equally well on fast and slow networks, across a diversity of platforms and devices.

Additionally, framework fragmentation had created a web development interoperability nightmare, where components built for one framework didn’t work with another framework.

Web Components offered a solution to both problems, pushing more work to the browser for better performance, and targeting a standards-based component model that all frameworks could use.

However, Web Components by themselves weren’t enough. Building fast web apps required innovations that were previously locked up inside of traditional web frameworks. Stencil was built to pull these features out of traditional frameworks and bring them to the fast emerging Web Component standard.


Slides: https://photos.app.goo.gl/iSFHwCNRXeBXeRxH2