Pandiyan Murugan

Basically, I’m a user who uses shortcuts a lot. In this post, I’m going to share some of my favourite shortcuts.

Earlier, we have shared Visual studio shortcuts in this site. Please do check if you are interested.

Lets jump into content directly.

Comment out selection or current line

Ctrl + /

Usually, I use the keystroke Ctrl +K, Ctrl + C for comment out a line.

And Ctrl +K, Ctrl + U for uncomment a selection or line.

This Ctrl + / does both the job in toggle way. Reduced keystrok and achieves the same. One of the productivity hack.

Zen mode

Ctrl + K, Z

Enables Zen mode. More focused mode of programming.

The command is basically toggle. You can use same shortcut to exit Zen mode.

Look at the difference between normal and Zen mode in below image.

Show command palette

Ctrl+Shift+P or F1

Open the command palette on editor. And we can perform various quick from there.

External terminal

Ctrl + Shift + C

It opens external terminal configured with the current project file path.

This is the one main shortcut I use daily with VS Code.

Even I made separate post on how to configure external terminal in VS Code.

Inline breakpoints

Shift+F9

Inline breakpoints will only be hit when the execution reaches the column associated with the inline breakpoint. This is particularly useful when debugging minified code which contains multiple statements on a single line.

An inline breakpoint can be set using Shift+F9 or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

Inline breakpoints can also have conditions. Editing multiple breakpoints on a line is possible through the context menu in the editor’s left margin.

Navigating to previous position or forward

Alt+ ← / →

To go back previous postition or go to forward postion of your navigation again.

Use Keyboards left side alt key.

Open Integrated terminal

Ctrl+`

This symbol key will present under the Esc key. This shortcut will open up the integrated terminal available within the VS Code.

Few more shortcuts used within intergrated terminal

Ctrl+Shift+` Create new terminal
Ctrl+C Copy selection
Ctrl+V Paste into active terminal
Ctrl+↑ / ↓ Scroll up/down
Shift+PgUp / PgDn Scroll page up/down
Ctrl+Home / End Scroll to top/bottom

Breadcrumbs

Sometimes we will be working with the small screen machines. Keeping the solution explorer always open isn’t an optimal solution when we are working on the small screen laptops. One of the solutions can be keeping the files hidden and opening whenever needed.

In that case, traversing between files or folders is a bit difficult.

To resolve this problem, we have an option called breadcrumbs in the VS Code.

Breadcrumb navigation lets you jump to symbols and files in your workspace.

Breadcrumbs show the current location and allow you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the breadcrumbs.enabled setting.

You can modify the user settings by visiting the settings page using shortcut CTRL + , or visiting the option File>Preferences>settings

In the search bar, search for the option breadcrumbs. You can find the following UI

I usually enable the breadcrumbs for File Path, because don’t use symbol path navigation. You can use the available options based on your needs.

How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for HTML, haml, jade, slim, jsx, XML, xsl, CSS, scss, sass, less and stylus files.

Mostly, the Tab key is used to complete the code abbreviation. We have to type the syntax and click the tab key to expand the abbreviations.

We expand the single HTML tag or even expand the hierarchy of HTML tag at the same time by clicking the tab key.

An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to the period(.) will be considered as a class name. Emmet basically works related to CSS selectors.

And also we can create multiple lists of the same syntax with unique id as well.

We can generate lorem ipsum text with the default number of words or a certain number of text by mentioning the word count.

Let’s see some CSS abbreviation example as well

To experience more HTML & CSS shortcode check this out link https://docs.emmet.io/cheat-sheet/ (The complete cheat sheet for HTML and CSS.)

Summary

I will be updating this same post regularly based on the new tips or tricks if I come across anything new.

Happy Coding!

Bootstrap 5 alpha is released!!!

The official documentation of Bootstrap 5 is available here.

Bootstrap is one of my favorite open-source CSS frameworks.

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

The journey

Bootstrap 4 is released in Jan 2018. For Bootstrap 5, the team is currently the team working on various aspects like CSS variables, faster javascript, fewer dependencies, and better APIs.

We will get a clear picture of the entire breaking changes details and future list once the beta version released. Now the alpha version available to play around.

Bootstrap 5 alpha no longer depends on jQuery

jQuery played major roles in the earlier versions of bootstrap (let’s say up to 4.x).

Similarly, From Bootstrap version 5, we no longer need jQuery help to use the bootstrap components. Example: maintaining a toggle state, etc.

Now, Bootstrap includes its javascript to do those operations.

We can see the full list of JS related changes in the first bootstrap 5 alpha project on GitHub.

Note: Bootstrap dropped jQuery dependency doesn’t mean you can’t use jQuery at all. You can collaborate with jQuery if your project really needs it. It’s just dropped from its official packages to improve the codebase and various aspects.

Bootstrap 5 alpha CDN

Since we have discussed javascript and jQuery, let’s discuss the CDN that needs to be used in boilerplate code.

In Bootstrap 4, we need to import popper.js, jQuery slim, then bootstrap js.

From bootstrap 5, we can simply import only popper.js and bootstrap.js like below

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

And it should be imported or included in same order.

Bootstrap 5 drops support for Internet Explorer

CSS Custom Properties

Bootstrap 5 begun use CSS Custom Properties in table component. They currently experimenting to include in various component like buttons, etc.

Vaious local variables are included in bootstrap to achieve variants in table.

Example

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --bs-table-bg: #{$background};
    --bs-table-striped-bg: #{$striped-bg};
    --bs-table-striped-color: #{color-contrast($striped-bg)};
    --bs-table-active-bg: #{$active-bg};
    --bs-table-active-color: #{color-contrast($active-bg)};
    --bs-table-hover-bg: #{$hover-bg};
    --bs-table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Improved grid system

The team added a new grid tier! Say hello to xxl.
.gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. Team also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

Breakpoint	Class infix	Dimensions
X-Small	None	0–576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Take a look at the redesigned and restructured Layout docs to learn more.

RTL support is coming soon!

Bootstrap icons

Meanwhile, bootstrap has its own icon library to support its components.

You can take a look at Bootstrap icons here.

Bootstrap icons can be used as Embedded HTML, External image or custom CSS.

Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.

npm

Install Bootstrap Icons via command line with npm.

npm install bootstrap-icons

Conclusion

In conclusion, We can have a detailed blog once the beta version is released with realtime examples.

Efficient User

What I know? – Since 2014

Author: Pandiyan Murugan

The best visual studio code shortcuts

Comment out selection or current line

Zen mode

Show command palette

External terminal

Inline breakpoints

Navigating to previous position or forward

Open Integrated terminal

Few more shortcuts used within intergrated terminal

Breadcrumbs

How to expand Emmet abbreviations?

Summary

Bootstrap 5 alpha is released!

What is Bootstrap?

The journey

Bootstrap 5 alpha no longer depends on jQuery

Bootstrap 5 alpha CDN

CSS Custom Properties

Improved grid system

Bootstrap icons

npm

Conclusion

Comment out selection or current line

Zen mode

Show command palette

External terminal

Inline breakpoints

Navigating to previous position or forward

Open Integrated terminal

Few more shortcuts used within intergrated terminal

Breadcrumbs

How to expand Emmet abbreviations?

Summary

Share this:

What is Bootstrap?

The journey

Bootstrap 5 alpha no longer depends on jQuery

Bootstrap 5 alpha CDN

CSS Custom Properties

Improved grid system

Bootstrap icons

npm

Conclusion

Share this: