Skip to main content

Posts

Showing posts from 2021

What is Web Components & How to create a web component using HTML, Javascript, and CSS?

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web applications. Web Components are supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, the level of support may vary slightly between browsers and versions. Web Components are based on four specifications: Custom Elements, Shadow DOM, HTML Templates, and HTML Imports. Custom Elements and Shadow DOM have been implemented in all modern browsers, while HTML Templates and HTML Imports are less widely supported. Web Components are a relatively recent addition to web development, with the first specifications being developed and published by the W3C Web Components Working Group in 2011-2013. The first browsers to implement support for Web Components were Google Chrome and Opera, which added support for the Custom Elements and Shadow DOM specifications in 2013-2014. Since t

How to do CPU profiling an Ionic iOS app using Safari on a Mac machine?

To do CPU profiling of an Ionic app using Safari on a Mac machine, you can follow these steps: Connect your iOS device to your Mac machine and open Safari. In Safari, go to the "Develop" menu and select your connected iOS device. Open your Ionic app on the device. In Safari, go to the "Develop" menu and select "Start Remote Debugging" to start the debugging session. In the Safari developer tools, go to the "Timelines" tab and select "CPU" from the sidebar. Click the "Record" button to start recording the CPU usage. Use the app and perform the actions you want to profile. Click the "Stop" button to stop recording. Analyze the recorded data to identify any performance bottlenecks. It will not be possible to do remote debugging and CPU profiling of an iOS app that is not signed with a valid provisioning profile and code signing identity. This requires that the app is built and deployed using a development or distributio

An explanation of JavaScript Event Loop

In JavaScript, the event loop is a mechanism that allows asynchronous code to run without blocking the main thread. It continuously monitors the call stack and the task queue for new tasks and schedules them to run in the appropriate order. What is a call stack? The call stack is a data structure used by JavaScript runtime to keep track of the sequence of function calls in the execution context. Every time a function is called, a new frame is pushed onto the top of the stack, and when a function completes its execution, the frame is popped off the top of the stack. When a JavaScript program starts executing, a global execution context is created, and its corresponding frame is pushed onto the call stack. As functions are called, new frames are pushed onto the stack, and when a function returns, its frame is popped off the stack. For example, consider the following code: function greet(name) { console.log( ` Hello, $