PDF Stream in Browser

If you are using  or <object> tag to display a streamed PDF file (or other file types) from a server as in:

<object data=”SomeServlet?do=get_doc&id=6″ type=”application/pdf” width=”800″ height=”400″>

make sure the server sends the proper http content-disposition value, which in this case would be inline.

REF: http://stackoverflow.com/questions/9840230/how-to-display-a-pdf-stream-in-a-browser-using-javascript

 

 

SERVER CHANGE

response.setHeader(“Content-Disposition”, “inline; filename=file.pdf”);

 

webpack 2 features

SYSTEMJS INTEROPERABIL ITY

  • SystemJS is a DYNAMIC module loader that Angular 2 uses. It doesn’t work with Webpack  coz it’s a STATIC Module Bundler.
  • But now there’s a Webpack Plugin that creates a MOCK spec that confirms with the SystemJS Spec. This way, SystemJS is fooled into believing that the modules are dynamic, when they’re actually all inside a single static js file outputed by the webpack’s module bundler at build time.

 

SEED

A simple Angular 2 seed featuring Angular 2 and Webpack 2: https://github.com/AngularClass/angular2-seed

FEATURES

https://docs.google.com/document/d/1tRc0MzvRdGK7EbG2LRW8vSyoxKhR_EvRUz3AQRyFZso/edit?pli=1)

List of new webpack 2 features:

  • native ES6 import, export and System.import
  • Tree Shaking for ES6
  • Needs Promise polyfill in old browsers
  • chunk error handling
  • Many plugins now take options objects instead of multiple parameters
  • config can be a function and –env
  • Removed deprecated argument configs (except with one argument shortcut if possible)
  • loaders now match resourcePath instead of resource with query
  • webpack config can return a Promise
  • -p sets NODE_ENV = “production”
  • the uglifyjs plugin no longer minimize other assets
    • there is the LoaderOptionsPlugin now
  • webpackfile.js is now also supported
  • added HashedModuleIdsPlugin
  • webpack differs from the ES6 modules spec: imports are not hoisted
  • everything in resolve.* and resolveLoader.* renamed
  • ResolverPlugin removed, resolve.plugins added
  • loaders in configuration resolve relative to context instead of resource
  • enhanced-resolve should be useable standalone
  • Use emitter approch from webworker pull request to send events
  • Inline mode should be default in webpack-dev-server
  • add array with options to loaders config
  • resolve loaders from webpack config relative to context

 

Introduction

webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

TL; DR

  • Bundles both CommonJS and AMD modules (even combined).
  • Can create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time).
  • Dependencies are resolved during compilation reducing the runtime size.
  • Loaders can preprocess files while compiling, e.g. coffeescript to JavaScript, handlebars strings to compiled functions, images to Base64, etc.
  • Highly modular plugin system to do whatever else your application requires.

Get Nightly Version of NodeJS

npm install -g node-nightly

OR https://nodejs.org/download/nightly/

  • Check if nightly version of node is available if not install it. (For the first time.)
  • If there is a new version available will notify the user saying there is a newer version available and can update using node-nightly --update

BEST thing about it is the New Support for Chrome Dev Tools Debugging in the Nightly Version of Node 7:

Sample usage:

$ node-nightly --inspect --debug-brk index.js
Debugger listening on port 9229.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/remote/serve_file/@521e5b7e2b7cc66b4006a8a54cb9c4e57494a5ef/inspector.html?experiments=true&v8only=true&ws=localhost:9229/node
Debugger attached.
Waiting for the debugger to disconnect...


REF: https://nmotw.in/node-nightly/

 

HTML and XHR Breakpoints…and other cool stuff in Chrome Dev Tools

 

  • Right Click on element in elements tab to set HTML Breakpoints and also to scroll it into view
  • Sources Tab now has XHR Breakpoints
  • Record the page as it’s loading to see what comes last by using Network pane to take screenshots on load
  • Timeline Panel:
    • Summary view shows CPU usage
    • JS Profile is memory profiler and so make sure the memory curve is jigsaw and not upward curve coz that would indicate possible memory leak
    • Force garbage collection using the trash can icon