Skip to main content

Posts

Showing posts with the label javascript

Difference between webstorage, cookie, local storage & session storage

WebStorage The Window object implements the WindowLocalStorage and WindowSessionStorage objects which has localStorage(window.localStorage) and sessionStorage(window.sessionStorage) properties respectively. These properties create an instance of the Storage object, through which data items can be set, retrieved and removed for a specific domain and storage type (session or local). For example, you can read and write on local storage objects as below localStorage.setItem('logo', document.getElementById('logo').value); localStorage.getItem('logo'); What are the differences between cookie, local storage and session storage Below are some of the differences between cookie, local storage and session storage, Feature Cookie Local storage Session storage Accessed on client or server side Both server-side & client-side client-side only client-side only Lifetime As configured using Expires option until deleted until tab is closed SSL support Supported Not supported N...

Cannot call a javascript function from HTML file in codesandbox.io. ??!!!

I was a bit surprised to see that you cannot reference a javascript function using a Vanilla sandbox using codesandbox.io site. Upon googling a bit here is what I found:   https://github.com/codesandbox/codesandbox-client/issues/1502   Here is the working sandbox where we can call a javascript function from an HTML file. https://codesandbox.io/s/sleepy-sunset-w0wds?file=/src/index.js Here is the explanation provided by the codesandbox.io folks on it: k, so the explanation is that in the vanilla template / parcel environment we're doing module bundling, handling src/index.js as a module. Because modules are evaluated in their own (private) scope, if you want to access from html something inside the module, you can put it on the browser's global scope, which is window. Alternatively, you can use the static template / environment, where we don't do any bundling, like https://codesandbox.io/s/quirky-flower-rm20y (but then you lose the ability to require / import).

Some useful terminologies related to rendering on the web

  Rendering SSR:  Server-Side Rendering - rendering a client-side or universal app to HTML on the server. CSR:  Client-Side Rendering - rendering an app in a browser, generally using the DOM. Rehydration:  “booting up” JavaScript views on the client such that they reuse the server-rendered HTML’s DOM tree and data. Prerendering:  running a client-side application at build time to capture its initial state as static HTML. Performance TTFB:  Time to First Byte - seen as the time between clicking a link and the first bit of content coming in. FP:  First Paint - the first time any pixel gets becomes visible to the user. FCP:  First Contentful Paint - the time when requested content (article body, etc) becomes visible. TTI:  Time To Interactive - the time at which a page becomes interactive (events wired up, etc). Reference: developers.google.com