Top 10 VS Code Extensions

Visual Studio Code (VS Code) is a powerful, lightweight, and versatile code editor, but its true strength lies in its expansive marketplace of extensions. Whether you're a seasoned developer or just starting, the right extensions can dramatically boost your productivity, enforce best practices, and streamline your workflow.

Here are 10 of the most impactful VS Code extensions you should consider installing today.

1. Peacock

When you're juggling multiple projects at once, it can be easy to lose track of which window belongs to which project. Peacock solves this by letting you color-code your VS Code workspace. By changing the color of your editor's frame, you can instantly distinguish between different projects, reducing mental overhead and saving time.

2. GitLens

GitLens supercharges VS Code's built-in Git capabilities, giving you unparalleled insights into your codebase's history. It helps you visualize who wrote which line of code and why, when it was changed, and a rich history of commits. This is an essential tool for collaborative projects and for understanding a codebase's evolution.

3. Prettier

Forgetting to format your code after every change is a thing of the past with Prettier. This opinionated code formatter automatically enforces a consistent style across your entire codebase, supporting many languages like JavaScript, TypeScript, CSS, HTML, and JSON. It eliminates debates over code style and ensures your code is always clean and readable.

3. ESLint

ESLint is a static code analysis tool that identifies and fixes problems in your JavaScript and TypeScript code in real-time. By enforcing specific coding standards and catching potential errors as you type, it helps maintain high code quality and consistency across projects. It can even auto-fix many common issues for you.

4. Live Share

Whether you're pair programming or conducting a code review, Live Share makes remote collaboration seamless. It allows you to share your VS Code session with teammates in real-time. You can collaboratively edit and debug in the same environment, with features like integrated chat and audio calls, making it perfect for distributed teams.

5. Docker

For developers working with containers, the Docker extension is a must-have. It simplifies the containerization process by integrating Docker commands and functionality directly into VS Code. You can easily manage containers, images, and networks, as well as debug applications running inside containers.

6. Better Comments

It enhances standard code comments by introducing color-coding and visual organization, making your code more readable and manageable. While standard comments offer simple text notes, Better Comments transforms these annotations into a more actionable and scannable format. 

7. Live Server

If you're a front-end web developer, Live Server is a game-changer. This extension launches a local development server with a live reload feature for static and dynamic pages. Any time you save a change in your code, your browser will automatically refresh, eliminating the need for manual reloads and saving you valuable time.

8. Better Comments

Elevate the quality and readability of your comments with Better Comments. This extension color-codes your comments based on specific tags (e.g., !, ?, TODO, *). This visually separates important notes, questions, alerts, and pending tasks from standard comments, making it much easier to scan your code for key information. 

9. Code Spell Checker

It's a simple yet powerful tool that helps developers and writers catch common spelling errors within their code, comments, and other text documents

10. Code Runner

The Code Runner extension for Visual Studio Code is a powerful and popular tool that allows you to run code snippets or entire code files for a large number of programming languages directly within your editor.

Angular browser cache clean

This week, had an interesting learning whilst web product launch using latest Angular framework

If the browser cache is not cleared after deploying a new version of your Angular application, users might experience issues such as:

• Stale Content: Users may see old versions of your application, causing inconsistencies if the new version contains critical updates.
• Missing Files: The new deployment might reference files (like JavaScript or CSS) that have changed or no longer exist, causing 404 errors.
• Unexpected Behavior: JavaScript and CSS changes might not reflect, leading to broken functionality or layout issues.

There are Top-5 technical solutions to avoid browser cache clearance

1. Cache Busting: Angular CLI automatically handles cache busting by appending a unique hash to the filenames of built assets. Ensure production build as ng build --prod
2. Service Worker: Implement Angular PWA (Progressive Web App) with service workers to manage cache effectively. ng add @angular/pwa Configure the ngsw-config.json file to control caching strategies.
3. HTTP Headers: Configure your server to set appropriate caching headers. This can force the browser to always fetch the latest version of your files.{   add_header Cache-Control "max-age=31536000, public"; }
4. Versioning: Use versioning in your file names or paths to ensure that users receive the updated files.<script src="main.v1.2.3.js"></script>
5. Client-Side Cache Control: Programmatically clear the cache on the client side using JavaScript when a new version is detected.
   if ('serviceWorker' in navigator) Unknown macro: {  navigator.serviceWorker.getRegistrations().then((registrations) =>Unknown macro}); }

ionic Capacitor

 

ionic Capacitor architecture is divided into 4 layers, namely

1. App layer - Shared code is built using one of the popular User Interface (UI) frameworks like Angular, React, etc.  
2. Ionic layer - This abstract layer consists of the common UI controls, which can be leveraged in application development.
3. Capacitor layer - It wraps the web application in WebView, which can display web apps inside the native app. It is an interface to inject the application into the native code of the underlying platform.
4. Platform layer - Capacitor’s shared code is portable to any platforms i.e. windows, web, android and iOS.

Google Flutter

 

There are multiple frameworks available in the industry to develop cross platform applications.  During the recent business need, got an opportunity to work in 2 popular frameworks namely Flutter and Capacitor.  

Flutter is built by Google with the first release in May 2017.  Capacitor got released during the initial days of covid pandemic i.e., April 2020.  

Flutter architecture is divided into 3 layers namely Embedder, Engine and Framework. 

1. The base bottom layer “Embedder” generates the execution instructions for the specific device/operating system.  It instructs the underlying device to perform all types of processing.  On running Flutter app in any android device, Embedder generates the runtime instructions for android.
2. The middle “Engine” handles the core operations like network requests, input, output and rendering. It is completely written in C++
3. Top “Framework” layer is the foundation element of application development, which is achieved using DART language.  Framework has all the essential UI development elements like material parts, widgets, animations, gesture detectors, etc.

  

Why is Cross platform

Historically, platform & mobile software developments were isolated with different technology frameworks.  As an example, desktop software is built using Windows form, web apps are using web form. In terms of mobile app development, iOS is using objective C/swift whereas android uses java.  

Typically, a developer will need to learn and master each platform’s specific development language and software frameworks.  It drives the development/business need to allow one shared language that could be used across multiple platforms and mobile devices.  

As noted above, Microsoft’s .NET unified platform roadmap/strategy is one of the best testimonies, which was highlighted in their recent annual tech conference.  

In this alignment, Micorsoft’s Xamarin is uplifted to Multi-platform App UI (MAUI), which builds native, cross-platform desktop and mobile apps all in one framework.

What is Cross platform

In the last 5 decades, IT computing has evolved dramatically from Mainframe (COBOL) to Artificial Intelligence/Machine Language (OpenAI).

It's no longer just about installing hardware or software; beyond this ecosystem named "Mobile devices".

Wikipedia defines mobile devices as "a computer small enough to hold and operate in the hand, which typically have a flat LCD or OLED screen, a touchscreen interface, and digital or physical buttons"

In the last two decades, the world has seen an explosion of mobile devices like phones, tablets, and now wearables. It generates great opportunities for mobile hardware and most importantly software systems.

Cross platform refers to a single solution which fits across various platforms like windows, web and mobile. Cross mobile refers to multiple mobile devices like android, iOS.