42 Useful Visual Studio Code Shortcuts to Boost Your Productivity

Keyboard shortcuts help you work faster. Learn some of the most useful Visual Studio Code shortcuts for Windows, Linux and macOS.

In this article, we’ll go over some of the most useful Visual Studio Code shortcuts that will save you time and supercharge your development when using Visual Studio Code. This article covers default keyboard shortcuts for Windows, Linux and macOS.

Visual Studio Code (VS Code) is one of the most popular and most used code editors. It’s open source and free to use. It also provides support for many languages and frameworks, whether through built-in features or the extensive list of extensions available for the editor.

Please note that these Visual Studio Code shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it could be due to changes in shortcuts in your editor or file format, or sometimes due to extensions installed.

Easy VS Code Navigation Shortcuts

This section presents all the Visual Studio Code shortcuts that allow you to navigate different parts of the editor.

Open a file

Searching for a specific file, especially as the project gets larger, can chew up a lot of time. Even if you already know where the file is, it’s definitely handy to learn this keyboard shortcut to easily open files in your project.

• Windows/Linux: ctrl + P
• macOS: command + P

Open settings

Visual Studio Code comes with a lot of features and settings that you can change to fit your needs. This keyboard shortcut makes it easier to get to the settings whenever necessary.

• Windows/Linux: ctrl + ,
• macOS: command + ,

Toggle sidebar

A lot of times you need more space for the open file you’re working on. So, this keyboard shortcut is handy to show or hide the sidebar whenever necessary.

• Windows/Linux: ctrl + B
• macOS: command + B

Navigate tabs

When you have a lot of tabs open and you need to move between them, one easy way to do it is with this keyboard shortcut, which shows you the list of the tabs and lets you navigate between them and choose which one you want to open.

• Windows/Linux: ctrl + shift + tab
• macOS: control + shift + tab

Keep pressing tab to switch between tabs.

Navigate tab groups

One of the nice features that Visual Studio Code provides is creating tab groups. Tab groups allow you to split up your tabs into groups, and each editor group takes a part of the screen.

This keyboard shortcut makes it easier and faster to navigate between groups in the editor group history. This shortcut also allows you to create a new group if the editor group you select in the shortcut is higher than the number of groups currently open.

• Windows/Linux: ctrl + 1 or 2 or 3
• macOS: command + 1 or 2 or 3

Open the terminal

During your development, you’ll most likely be using the terminal a lot. Visual Studio Code allows you to open a terminal window right inside the editor. This saves you from moving between the editor and the terminal and allows you to completely focus on the editor and the code.

• Windows/Linux: ctrl + J
• macOS: command + J

Open the command palette

There are lots of commands you can execute in Visual Studio Code. These commands can be related to out-of-the-box features or extension features.

 

With this keyboard shortcut, you can easily open the command palette. The command palette allows you to search through the commands you can use and execute them.

• Windows/Linux: ctrl + shift + P
• macOS: command + shift + P

Quick Selections

During development, you’ll most probably need to make selections in your code, whether for copying, cutting, or other purposes.

Instead of doing so with your machine’s mouse, doing it with the keyboard saves you time. These keyboard shortcuts focus on making selections quickly.

Select current line

A lot of times you need to select the entire current line your cursor is at. This keyboard shortcut makes it very simple.

• Windows/Linux: ctrl + L
• macOS: command + L

Similar occurrences

How many times do you need to rename a variable, or simply change a certain repeated text or phrase throughout the entire file you’re working with?

Two keyboard shortcuts can be used in a situation similar to this. The first requires you to already have the word or phrases selected, while the other doesn’t.

Current selection

With this keyboard shortcut, all you need is to have one occurrence of the text you’re looking for in the file selected. Then, by pressing the keys of the shortcut, you’ll select all its occurrences in the file.

• Windows/Linux: ctrl + shift + L
• macOS: command + shift + L

Current word

This keyboard shortcut allows you to do the same as the previous one, but without having anything selected. While the cursor is placed on a word, you can press the keys of this shortcut and the current word with all of its occurrences in the current file will be selected.

• Windows/Linux: ctrl + F2
• macOS: command + F2

Note: on macOS, make sure to press fn at the same time as F2.

 

Select until the end of the word

When selecting a certain part of the code, you can easily move and expand the selection with this shortcut. You can use the right arrow or the left arrow to go in the direction you want.

• Windows/Linux: shift + alt + → or ←
• macOS: shift + option + → or ←

Multiple Selections

Mastering these keyboard shortcuts will boost your development speed and makes you a coding hero. These keyboard shortcuts allow you to select across multiple lines to make necessary modifications or additions.

This saves you from repeating yourself and saves you the additional time you’d spend doing the same operation across multiple lines.

Select a column or box of code by dragging the mouse

Dragging your cursor across lines of code or text selects each line from end to end. But you can also select a group of lines only partially with this shortcut. Multiple lines will be selected, but only as much of them as you drag over.

• Windows/Linux: shift + alt + drag mouse across the lines
• macOS: shift + option + drag mouse across the lines

Select a column or box of code with arrow keys

You can do the same as above but without using your mouse. Instead of dragging a mouse, you use they keyboard arrow keys.

• Windows/Linux: ctrl + shift + alt + → or ← or ↓ or ↑
• macOS: command + shift + option + → or ← or ↓ or ↑

How to Use Find Results

All editors, even simple editors, should have a find feature so that you can find certain words, like function or variable names, phrases, or blocks of code either in the current selected file or across multiple files.

This section will go over keyboard shortcuts that will allow us to make the best out of the results of using the find feature in Visual Studio Code.

Navigate results

You can use this keyboard shortcut to move between find results in the active file.

• Windows/Linux/macOS: F3

Note: on macOS, make sure to press fn at the same time as F3.

Select multiple results

If you’re using the find feature to find certain bits of text so that you can modify a subset of these results, you can use this shortcut to navigate and select the find results in the active file.

• Windows/Linux: ctrl + D
• macOS: command + D

Select all results

If you’re using the find feature to do certain modifications with all the find results, this keyboard shortcut allows you to select all the find results.

• Windows/Linux: alt + enter
• macOS: option + enter

Code Navigation

As each file or project grows, it becomes harder to find certain parts of the code. Finding errors or going to the code at a certain line can be hard when doing it manually.

 

These keyboard shortcuts save you the hassle and allow you to invest your time in what you actually want to do.

Go to line

Finding code at a certain line is especially helpful when you get a compile or runtime error that specifies what line of code caused it. This keyboard shortcut eliminates the need to actually find the line yourself.

• Windows/Linux: ctrl + G
• macOS: control + G

Go to matching bracket

You’ll often find yourself needing to find the matching closing bracket of a block. This is especially true when the files grow with time. This keyboard shortcut allows you to easily find the closing matching bracket of the current block. In HTML tags, it allows you to move to the end of the current tag.

• Windows/Linux: ctrl + shift + \
• macOS: command + shift + \

Fold/unfold Block

When reading a file with a lot of lines or data, it’s easier to fold (hide) an entire block that you’re not currently focusing on so you can focus on something else. This keyboard shortcut allows you to fold or unfold a block. Click anywhere in the block and then hit the following keys.

• Windows/Linux: ctrl + shift + [ or ]
• macOS: command + option + [ or ]

Fold/unfold blocks and sub-blocks

What if the block contains sub-blocks? Using the above command will fold the parent, but when the parent is unfolded the sub-blocks will have been unchanged. If you need to fold and unfold a block and its sub-blocks, you can do it with this keyboard shortcut.

• Windows/Linux: ctrl + K + [ or ]
• macOS: command + K + [ or ]

Navigate errors and warnings

Finding errors and warnings in your code is essential. Sometimes some errors are not easy to find — such as when a line doesn’t end with ; as it should. This keyboard shortcut saves you the hassle of scrolling or thoroughly looking through the line to find the exact problem. It allows you to move to the next error or warning.

• Windows/Linux/macOS: F8

Note: on macOS, make sure to press fn at the same time as F8.

Moving the Cursor

In a lot of cases, you might need to have multiple cursors, each at a different position in the file. These keyboard shortcuts help to make it easier to move around with multiple cursors.

Insert additional cursors

There are two ways to insert an additional cursor into the file: either at a specific position, or above/below the current line the cursor is at.

1. At position

This keyboard shortcut allows you to insert an additional cursor at any point in the file.

 

• Windows/Linux: alt + mouse click at the position
• macOS: option + mouse click at the position

2. Above or below

The second way you can insert a cursor is to insert it above or below each of the current cursor positions.

• Windows/Linux: ctrl + alt + ↓ or ↑
• macOS: command + option + ↓ or ↑

Undo cursor insert

What if you inserted a cursor by mistake, or realized later that you don’t want to insert the cursor at that position anymore? This keyboard shortcut allows you to undo the last cursor insert. This is very helpful when you’ve inserted multiple cursors, as it allows you to keep the others in place and just removes the last inserted one.

• Windows/Linux: ctrl + U
• macOS: command + U

Insert the cursor at the end of a highlighted selection

Another keyboard shortcut that makes your development faster is to insert the cursor at the end of a highlighted selection.

• Windows/Linux: shift + alt + I
• macOS: shift + option + I

Faster Coding

In this section, we’ll go through Visual Studio Code shortcuts that will make certain operations related to your code easier and quicker.

Move lines and blocks

A lot of times you might need to move a line from one position to another. Instead of copying or cutting and pasting the line into another position, this shortcut offers a faster solution. Just place the cursor on the line.

• Windows/Linux: alt + ↓ or ↑
• macOS: option + ↓ or ↑

This will also move a whole paragraph of text that the cursor is active in. If you want to move a block of code, simply highlight that code before pressing the shortcut above.

Copy lines and blocks

What if you need to copy a line and paste it below or above?

Instead of having to actually copy and paste the line, this shortcut duplicates the line either below or above it, based on the direction chosen with the arrows.

• Windows/Linux: shift + alt + ↓ or ↑
• macOS: shift + option + ↓ or ↑

To move a block of text or code in the same way, highlight it first and then use this shortcut.

 

Indent/outdent lines

As you copy lines from one place or file to another, or as you make changes to the code, a lot of times the code will end up wrongly indented. This shortcut allows you to easily indent or outdent lines as necessary. Select multiple lines to move them all together.

• Windows/Linux: ctrl + [ or ]
• macOS: command + [ or ]

Toggle comments

In a lot of cases, you might need to comment or uncomment a line. This can be easily done with this shortcut. This works for both line and block comments.

Line Comments

Click on the line you want to comment out. (If you highlight a block of code, this command will comment out each line individually.)

• Windows/Linux: ctrl + /
• macOS: command + /

Block Comments

Unlike the above shortcut, the following shortcut will comment out the code you highlight as a single comment.

• Windows/Linux: shift + alt + A
• macOS: shift + option + A

Code formatting

It’s essential to keep your code and files formatted for readability reasons. Visual Studio Code provides two shortcut commands for code formatting.

File

This shortcut allows you to format the entire file.

• Windows/Linux: ctrl + shift + F
• macOS: option + shift + F

Selection

This shortcut allows you to format just the selected set of lines in a file.

 

• Windows/Linux: ctrl + K, then ctrl + F
• macOS: command + K, then command + F

Quick fix

In a lot of cases when there’s an error, Visual Studio Code can resolve it if it’s a common or simple mistake — for example, if a semicolon ; is missing. This shortcut allows you to apply the quick fix to any error or warning if the quick fix is available for it.

• Windows/Linux: ctrl + .
• macOS: command + .

Renaming

Renaming a variable, function, or class that’s used multiple times can be prone to errors if done manually. You might miss a usage of it whether in the current file or a different file. This shortcut gives you a safe way to rename any symbol.

• Windows/Linux/macOS: F2

Note: on macOS, make sure to press fn at the same time as F2.

Trim white spaces

Why manually trim white spaces from the end of a line when you can just do it with this shortcut?

• Windows/Linux: ctrl + K + X
• macOS: command + K + X

Note: holding ctrl or command throughout, press K first, then X separately.

Change programming language

By default, Visual Studio Code detects the current programming language of the file you’re working on. Usually, it’s done by checking the extension of the file.

However, sometimes it doesn’t correctly detect the language if the extension of the file isn’t supported.

For that reason or any other reason, if you need to change the programming language of a file you can use this shortcut.

• Windows/Linux: ctrl + K, then M
• macOS: command + K, then M

Run code

One cool VS Code feature is the option to run code right in the editor. This depends on the language, framework, or the kind of task you need to run. For example, you can set up debugging for Javascript projects. However, if you have a debugger or task runner configured, you can use this shortcut to run code in VS Code.

• Windows/Linux/macOS: F5

Note: on macOS, make sure to press fn at the same time as F5.

Better Coding

These keyboard shortcuts revolve around understanding the code that we’re working with to produce better code.

To write good quality code, we need to understand the functions, classes, or methods we’re using.

 

Sometimes, we resort to googling a function to see its definition or signature. However, this might end up wasting our time or it might not apply to the code we’ve created.

Check definition

It’s essential to understand the definition of the code we’re using before actually using it. These Visual Studio Code shortcuts allow us to see their definition and documentation easily from the editor.

Go to definition

This shortcut takes us to the file or line where the part of code is initially defined.

• Windows/Linux/macOS: F12

Note: on macOS, make sure to press fn at the same time as F12.

Peek definition

This shortcut allows us to open definition and documentation in the same place we’re checking the definition. This makes it easier to see the definition without the need to move to another file or line.

• Windows/Linux: alt + F12
• macOS: option + F12

Note: on macOS, make sure to press fn at the same time as F12.

Toggle suggestions

While writing our code, VS Code or some of the extensions we’ll have installed will show us suggestions for our code. This shortcut allows us to toggle the suggestions to see or hide them.

• Windows/Linux: ctrl + I
• macOS: command + I

Show a function’s signature

This is very common with most, if not all developers. We tend to forget functions’ signatures, even when they’re functions that we use a lot. With this shortcut, you can easily see parameter hints for the function. With the parameter hints, you can check what parameters you need to pass to the function.

• Windows/Linux: ctrl + shift + spacebar
• macOS: command + shift + spacebar

Zen mode

Although this is not related to understanding the code and definitions, this shortcut is useful if you need to be completely focused on your code. With this shortcut, you can enable Zen mode, which will change the display to be completely focused on the currently open file.

• Windows/Linux: ctrl + K, then Z
• macOS: command + K, then Z

Press the same keyboard shortcut to return to the normal editor view.

Conclusion

VS Code is one of the best code/text editors for developers at the moment. It provides a lot of out-of-the-box features as well as an extension marketplace that allows developers to easily contribute and provide extensions for the community.

Keyboard shortcuts make development in VS Code even easier and allow you to focus on building good-quality projects in less time.

In this article, we’ve covered some useful Visual Studio Code shortcuts that are guaranteed to make your development faster.

VS Code still has a wider set of keyboard shortcuts to do more. Here are links for checking out the whole set of default keyboard shortcuts for your OS:

• Windows
• Linux
• macOS

Original article source at https://www.sitepoint.com

#vscode #programming #developer 

What is GEEK

Buddha Community

How to Use Hotwire Rails

Introduction

We are back with another exciting and much-talked-about Rails tutorial on how to use Hotwire with the Rails application. This Hotwire Rails tutorial is an alternate method for building modern web applications that consume a pinch of JavaScript.

Rails 7 Hotwire is the default front-end framework shipped with Rails 7 after it was launched. It is used to represent HTML over the wire in the Rails application. Previously, we used to add a hotwire-rails gem in our gem file and then run rails hotwire: install. However, with the introduction of Rails 7, the gem got deprecated. Now, we use turbo-rails and stimulus rails directly, which work as Hotwire’s SPA-like page accelerator and Hotwire’s modest JavaScript framework.

What is Hotwire?

Hotwire is a package of different frameworks that help to build applications. It simplifies the developer’s work for writing web pages without the need to write JavaScript, and instead sending HTML code over the wire.

Introduction to The Hotwire Framework:

1. Turbo:

It uses simplified techniques to build web applications while decreasing the usage of JavaScript in the application. Turbo offers numerous handling methods for the HTML data sent over the wire and displaying the application’s data without actually loading the entire page. It helps to maintain the simplicity of web applications without destroying the single-page application experience by using the below techniques:

Turbo Frames: Turbo Frames help to load the different sections of our markup without any dependency as it divides the page into different contexts separately called frames and updates these frames individually.
Turbo Drive: Every link doesn’t have to make the entire page reload when clicked. Only the HTML contained within the tag will be displayed.
Turbo Streams: To add real-time features to the application, this technique is used. It helps to bring real-time data to the application using CRUD actions.

2. Stimulus

It represents the JavaScript framework, which is required when JS is a requirement in the application. The interaction with the HTML is possible with the help of a stimulus, as the controllers that help those interactions are written by a stimulus.

3. Strada

Not much information is available about Strada as it has not been officially released yet. However, it works with native applications, and by using HTML bridge attributes, interaction is made possible between web applications and native apps.

Simple diagrammatic representation of Hotwire Stack:

Prerequisites For Hotwire Rails Tutorial

As we are implementing the Ruby on Rails Hotwire tutorial, make sure about the following installations before you can get started.

• Ruby on Rails
• Hotwire gem
• PostgreSQL/SQLite (choose any one database)
• Turbo Rails
• Stimulus.js

Looking for an enthusiastic team of ROR developers to shape the vision of your web project?
Contact Bacancy today and hire Ruby developers to start building your dream project!

Create a new Rails Project

Find the following commands to create a rails application.

mkdir ~/projects/railshotwire
cd ~/projects/railshotwire
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '~> 7.0.0'" >> Gemfile
bundle install  
bundle exec rails new . --force -d=postgresql

Now create some files for the project, up till now no usage of Rails Hotwire can be seen.
Fire the following command in your terminal.

• For creating a default controller for the application

echo "class HomeController < ApplicationController" > app/controllers/home_controller.rb
echo "end" >> app/controllers/home_controller.rb

• For creating another controller for the application

echo "class OtherController < ApplicationController" > app/controllers/other_controller.rb
echo "end" >> app/controllers/home_controller.rb

• For creating routes for the application

echo "Rails.application.routes.draw do" > config/routes.rb
echo '  get "home/index"' >> config/routes.rb
echo '  get "other/index"' >> config/routes.rb
echo '  root to: "home#index"' >> config/routes.rb
echo 'end' >> config/routes.rb

• For creating a default view for the application

mkdir app/views/home
echo '<h1>This is Rails Hotwire homepage</h1>' > app/views/home/index.html.erb
echo '<div><%= link_to "Enter to other page", other_index_path %></div>' >> app/views/home/index.html.erb

• For creating another view for the application

mkdir app/views/other
echo '<h1>This is Another page</h1>' > app/views/other/index.html.erb
echo '<div><%= link_to "Enter to home page", root_path %></div>' >> app/views/other/index.html.erb

• For creating a database and schema.rb file for the application

bin/rails db:create
bin/rails db:migrate

• For checking the application run bin/rails s and open your browser, your running application will have the below view.

Additionally, you can clone the code and browse through the project. Here’s the source code of the repository: Rails 7 Hotwire application

Now, let’s see how Hotwire Rails can work its magic with various Turbo techniques.

Hotwire Rails: Turbo Drive

Go to your localhost:3000 on your web browser and right-click on the Inspect and open a Network tab of the DevTools of the browser.

Now click on go to another page link that appears on the home page to redirect from the home page to another page. In our Network tab, we can see that this action of navigation is achieved via XHR. It appears only the part inside HTML is reloaded, here neither the CSS is reloaded nor the JS is reloaded when the navigation action is performed.

By performing this action we can see that Turbo Drive helps to represent the HTML response without loading the full page and only follows redirect and reindeer HTML responses which helps to make the application faster to access.

Hotwire Rails: Turbo Frame

This technique helps to divide the current page into different sections called frames that can be updated separately independently when new data is added from the server.
Below we discuss the different use cases of Turbo frame like inline edition, sorting, searching, and filtering of data.

Let’s perform some practical actions to see the example of these use cases.

Make changes in the app/controllers/home_controller.rb file

#CODE

class HomeController < ApplicationController
   def turbo_frame_form
   end
   
   def turbo_frame submit
      extracted_anynumber = params[:any][:anynumber]
      render :turbo_frame_form, status: :ok, locals: {anynumber: extracted_anynumber,      comment: 'turbo_frame_submit ok' }
   end
end

Add app/views/home/turbo_frame_form.html.erb file to the application and add this content inside the file.

#CODE

<section>

    <%= turbo_frame_tag 'anyframe' do %>
            
      <div>
          <h2>Frame view</h2>
          <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
              <%= form.label :anynumber, 'Type an integer (odd or even)', 'class' => 'my-0  d-inline'  %>
              <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}",  'aria-describedby' => 'anynumber' %>
              <%= form.submit 'Submit this number', 'id' => 'submit-number' %>
          <% end %>
      </div>
      <div>
        <h2>Data of the view</h2>
        <pre style="font-size: .7rem;"><%= JSON.pretty_generate(local_assigns) %></pre> 
      </div>
      
    <% end %>

</section>

Make some adjustments in routes.rb

#CODE

Rails.application.routes.draw do
  get 'home/index'
  get 'other/index'

  get '/home/turbo_frame_form' => 'home#turbo_frame_form', as: 'turbo_frame_form'
  post '/home/turbo_frame_submit' => 'home#turbo_frame_submit', as: 'turbo_frame_submit'


  root to: "home#index"
end

• Next step is to change homepage view in app/views/home/index.html.erb

#CODE

<h1>This is Rails Hotwire home page</h1>
<div><%= link_to "Enter to other page", other_index_path %></div>

<%= turbo_frame_tag 'anyframe' do %>        
  <div>
      <h2>Home view</h2>
      <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
          <%= form.label :anynumber, 'Type an integer (odd or even)', 'class' => 'my-0  d-inline'  %>
          <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}",  'aria-describedby' => 'anynumber' %>
          <%= form.submit 'Submit this number', 'id' => 'submit-number' %>
      <% end %>
  <div>
<% end %>

After making all the changes, restart the rails server and refresh the browser, the default view will appear on the browser.

Now in the field enter any digit, after entering the digit click on submit button, and as the submit button is clicked we can see the Turbo Frame in action in the below screen, we can observe that the frame part changed, the first title and first link didn’t move.

Hotwire Rails: Turbo Streams

Turbo Streams deliver page updates over WebSocket, SSE or in response to form submissions by only using HTML and a series of CRUD-like operations, you are free to say that either

• Update the piece of HTML while responding to all the other actions like the post, put, patch, and delete except the GET action.
• Transmit a change to all users, without reloading the browser page.

This transmit can be represented by a simple example.

• Make changes in app/controllers/other_controller.rb file of rails application

#CODE

class OtherController < ApplicationController

  def post_something
    respond_to do |format|
      format.turbo_stream {  }
    end
  end

   end

Add the below line in routes.rb file of the application

#CODE

post '/other/post_something' => 'other#post_something', as: 'post_something'

Superb! Rails will now attempt to locate the app/views/other/post_something.turbo_stream.erb template at any moment the ‘/other/post_something’ endpoint is reached.

For this, we need to add app/views/other/post_something.turbo_stream.erb template in the rails application.

#CODE

<turbo-stream action="append" target="messages">
  <template>
    <div id="message_1">This changes the existing message!</div>
  </template>
</turbo-stream>

This states that the response will try to append the template of the turbo frame with ID “messages”.

Now change the index.html.erb file in app/views/other paths with the below content.

#CODE

<h1>This is Another page</h1>
<div><%= link_to "Enter to home page", root_path %></div>

<div style="margin-top: 3rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit 'Post any message %>
  <% end %>
  <turbo-frame id="messages">
    <div>An empty message</div>
  </turbo-frame>
</div>

• After making all the changes, restart the rails server and refresh the browser, and go to the other page.

• Once the above screen appears, click on the Post any message button

This action shows that after submitting the response, the Turbo Streams help the developer to append the message, without reloading the page.

Another use case we can test is that rather than appending the message, the developer replaces the message. For that, we need to change the content of app/views/other/post_something.turbo_stream.erb template file and change the value of the action attribute from append to replace and check the changes in the browser.

#CODE

<turbo-stream action="replace" target="messages">
  <template>
    <div id="message_1">This changes the existing message!</div>
  </template>
</turbo-stream>

When we click on Post any message button, the message that appear below that button will get replaced with the message that is mentioned in the app/views/other/post_something.turbo_stream.erb template

Stimulus

There are some cases in an application where JS is needed, therefore to cover those scenarios we require Hotwire JS tool. Hotwire has a JS tool because in some scenarios Turbo-* tools are not sufficient. But as we know that Hotwire is used to reduce the usage of JS in an application, Stimulus considers HTML as the single source of truth. Consider the case where we have to give elements on a page some JavaScript attributes, such as data controller, data-action, and data target. For that, a stimulus controller that can access elements and receive events based on those characteristics will be created.

Make a change in app/views/other/index.html.erb template file in rails application

#CODE

<h1>This is Another page</h1>
<div><%= link_to "Enter to home page", root_path %></div>

<div style="margin-top: 2rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit 'Post something' %>
  <% end %>
  <turbo-frame id="messages">
    <div>An empty message</div>
  </turbo-frame>
</div>

<div style="margin-top: 2rem;">
  <h2>Stimulus</h2>  
  <div data-controller="hello">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">
      Greet
    </button>
    <span data-hello-target="output">
    </span>
  </div>
</div>

Make changes in the hello_controller.js in path app/JavaScript/controllers and add a stimulus controller in the file, which helps to bring the HTML into life.

#CODE

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

Go to your browser after making the changes in the code and click on Enter to other page link which will navigate to the localhost:3000/other/index page there you can see the changes implemented by the stimulus controller that is designed to augment your HTML with just enough behavior to make it more responsive.

With just a little bit of work, Turbo and Stimulus together offer a complete answer for applications that are quick and compelling.

Using Rails 7 Hotwire helps to load the pages at a faster speed and allows you to render templates on the server, where you have access to your whole domain model. It is a productive development experience in ROR, without compromising any of the speed or responsiveness associated with SPA.

Conclusion

We hope you were satisfied with our Rails Hotwire tutorial. Write to us at service@bacancy.com for any query that you want to resolve, or if you want us to share a tutorial on your query.

For more such solutions on RoR, check out our Ruby on Rails Tutorials. We will always strive to amaze you and cater to your needs.

Original article source at: https://www.bacancytechnology.com/

#rails #ruby 

Pdf2gerb: Perl Script Converts PDF Files to Gerber format

pdf2gerb

Perl script converts PDF files to Gerber format

Pdf2Gerb generates Gerber 274X photoplotting and Excellon drill files from PDFs of a PCB. Up to three PDFs are used: the top copper layer, the bottom copper layer (for 2-sided PCBs), and an optional silk screen layer. The PDFs can be created directly from any PDF drawing software, or a PDF print driver can be used to capture the Print output if the drawing software does not directly support output to PDF.

The general workflow is as follows:

1. Design the PCB using your favorite CAD or drawing software.
2. Print the top and bottom copper and top silk screen layers to a PDF file.
3. Run Pdf2Gerb on the PDFs to create Gerber and Excellon files.
4. Use a Gerber viewer to double-check the output against the original PCB design.
5. Make adjustments as needed.
6. Submit the files to a PCB manufacturer.

Please note that Pdf2Gerb does NOT perform DRC (Design Rule Checks), as these will vary according to individual PCB manufacturer conventions and capabilities. Also note that Pdf2Gerb is not perfect, so the output files must always be checked before submitting them. As of version 1.6, Pdf2Gerb supports most PCB elements, such as round and square pads, round holes, traces, SMD pads, ground planes, no-fill areas, and panelization. However, because it interprets the graphical output of a Print function, there are limitations in what it can recognize (or there may be bugs).

See docs/Pdf2Gerb.pdf for install/setup, config, usage, and other info.

---

pdf2gerb_cfg.pm

#Pdf2Gerb config settings:
#Put this file in same folder/directory as pdf2gerb.pl itself (global settings),
#or copy to another folder/directory with PDFs if you want PCB-specific settings.
#There is only one user of this file, so we don't need a custom package or namespace.
#NOTE: all constants defined in here will be added to main namespace.
#package pdf2gerb_cfg;

use strict; #trap undef vars (easier debug)
use warnings; #other useful info (easier debug)


##############################################################################################
#configurable settings:
#change values here instead of in main pfg2gerb.pl file

use constant WANT_COLORS => ($^O !~ m/Win/); #ANSI colors no worky on Windows? this must be set < first DebugPrint() call

#just a little warning; set realistic expectations:
#DebugPrint("${\(CYAN)}Pdf2Gerb.pl ${\(VERSION)}, $^O O/S\n${\(YELLOW)}${\(BOLD)}${\(ITALIC)}This is EXPERIMENTAL software.  \nGerber files MAY CONTAIN ERRORS.  Please CHECK them before fabrication!${\(RESET)}", 0); #if WANT_DEBUG

use constant METRIC => FALSE; #set to TRUE for metric units (only affect final numbers in output files, not internal arithmetic)
use constant APERTURE_LIMIT => 0; #34; #max #apertures to use; generate warnings if too many apertures are used (0 to not check)
use constant DRILL_FMT => '2.4'; #'2.3'; #'2.4' is the default for PCB fab; change to '2.3' for CNC

use constant WANT_DEBUG => 0; #10; #level of debug wanted; higher == more, lower == less, 0 == none
use constant GERBER_DEBUG => 0; #level of debug to include in Gerber file; DON'T USE FOR FABRICATION
use constant WANT_STREAMS => FALSE; #TRUE; #save decompressed streams to files (for debug)
use constant WANT_ALLINPUT => FALSE; #TRUE; #save entire input stream (for debug ONLY)

#DebugPrint(sprintf("${\(CYAN)}DEBUG: stdout %d, gerber %d, want streams? %d, all input? %d, O/S: $^O, Perl: $]${\(RESET)}\n", WANT_DEBUG, GERBER_DEBUG, WANT_STREAMS, WANT_ALLINPUT), 1);
#DebugPrint(sprintf("max int = %d, min int = %d\n", MAXINT, MININT), 1); 

#define standard trace and pad sizes to reduce scaling or PDF rendering errors:
#This avoids weird aperture settings and replaces them with more standardized values.
#(I'm not sure how photoplotters handle strange sizes).
#Fewer choices here gives more accurate mapping in the final Gerber files.
#units are in inches
use constant TOOL_SIZES => #add more as desired
(
#round or square pads (> 0) and drills (< 0):
    .010, -.001,  #tiny pads for SMD; dummy drill size (too small for practical use, but needed so StandardTool will use this entry)
    .031, -.014,  #used for vias
    .041, -.020,  #smallest non-filled plated hole
    .051, -.025,
    .056, -.029,  #useful for IC pins
    .070, -.033,
    .075, -.040,  #heavier leads
#    .090, -.043,  #NOTE: 600 dpi is not high enough resolution to reliably distinguish between .043" and .046", so choose 1 of the 2 here
    .100, -.046,
    .115, -.052,
    .130, -.061,
    .140, -.067,
    .150, -.079,
    .175, -.088,
    .190, -.093,
    .200, -.100,
    .220, -.110,
    .160, -.125,  #useful for mounting holes
#some additional pad sizes without holes (repeat a previous hole size if you just want the pad size):
    .090, -.040,  #want a .090 pad option, but use dummy hole size
    .065, -.040, #.065 x .065 rect pad
    .035, -.040, #.035 x .065 rect pad
#traces:
    .001,  #too thin for real traces; use only for board outlines
    .006,  #minimum real trace width; mainly used for text
    .008,  #mainly used for mid-sized text, not traces
    .010,  #minimum recommended trace width for low-current signals
    .012,
    .015,  #moderate low-voltage current
    .020,  #heavier trace for power, ground (even if a lighter one is adequate)
    .025,
    .030,  #heavy-current traces; be careful with these ones!
    .040,
    .050,
    .060,
    .080,
    .100,
    .120,
);
#Areas larger than the values below will be filled with parallel lines:
#This cuts down on the number of aperture sizes used.
#Set to 0 to always use an aperture or drill, regardless of size.
use constant { MAX_APERTURE => max((TOOL_SIZES)) + .004, MAX_DRILL => -min((TOOL_SIZES)) + .004 }; #max aperture and drill sizes (plus a little tolerance)
#DebugPrint(sprintf("using %d standard tool sizes: %s, max aper %.3f, max drill %.3f\n", scalar((TOOL_SIZES)), join(", ", (TOOL_SIZES)), MAX_APERTURE, MAX_DRILL), 1);

#NOTE: Compare the PDF to the original CAD file to check the accuracy of the PDF rendering and parsing!
#for example, the CAD software I used generated the following circles for holes:
#CAD hole size:   parsed PDF diameter:      error:
#  .014                .016                +.002
#  .020                .02267              +.00267
#  .025                .026                +.001
#  .029                .03167              +.00267
#  .033                .036                +.003
#  .040                .04267              +.00267
#This was usually ~ .002" - .003" too big compared to the hole as displayed in the CAD software.
#To compensate for PDF rendering errors (either during CAD Print function or PDF parsing logic), adjust the values below as needed.
#units are pixels; for example, a value of 2.4 at 600 dpi = .0004 inch, 2 at 600 dpi = .0033"
use constant
{
    HOLE_ADJUST => -0.004 * 600, #-2.6, #holes seemed to be slightly oversized (by .002" - .004"), so shrink them a little
    RNDPAD_ADJUST => -0.003 * 600, #-2, #-2.4, #round pads seemed to be slightly oversized, so shrink them a little
    SQRPAD_ADJUST => +0.001 * 600, #+.5, #square pads are sometimes too small by .00067, so bump them up a little
    RECTPAD_ADJUST => 0, #(pixels) rectangular pads seem to be okay? (not tested much)
    TRACE_ADJUST => 0, #(pixels) traces seemed to be okay?
    REDUCE_TOLERANCE => .001, #(inches) allow this much variation when reducing circles and rects
};

#Also, my CAD's Print function or the PDF print driver I used was a little off for circles, so define some additional adjustment values here:
#Values are added to X/Y coordinates; units are pixels; for example, a value of 1 at 600 dpi would be ~= .002 inch
use constant
{
    CIRCLE_ADJUST_MINX => 0,
    CIRCLE_ADJUST_MINY => -0.001 * 600, #-1, #circles were a little too high, so nudge them a little lower
    CIRCLE_ADJUST_MAXX => +0.001 * 600, #+1, #circles were a little too far to the left, so nudge them a little to the right
    CIRCLE_ADJUST_MAXY => 0,
    SUBST_CIRCLE_CLIPRECT => FALSE, #generate circle and substitute for clip rects (to compensate for the way some CAD software draws circles)
    WANT_CLIPRECT => TRUE, #FALSE, #AI doesn't need clip rect at all? should be on normally?
    RECT_COMPLETION => FALSE, #TRUE, #fill in 4th side of rect when 3 sides found
};

#allow .012 clearance around pads for solder mask:
#This value effectively adjusts pad sizes in the TOOL_SIZES list above (only for solder mask layers).
use constant SOLDER_MARGIN => +.012; #units are inches

#line join/cap styles:
use constant
{
    CAP_NONE => 0, #butt (none); line is exact length
    CAP_ROUND => 1, #round cap/join; line overhangs by a semi-circle at either end
    CAP_SQUARE => 2, #square cap/join; line overhangs by a half square on either end
    CAP_OVERRIDE => FALSE, #cap style overrides drawing logic
};
    
#number of elements in each shape type:
use constant
{
    RECT_SHAPELEN => 6, #x0, y0, x1, y1, count, "rect" (start, end corners)
    LINE_SHAPELEN => 6, #x0, y0, x1, y1, count, "line" (line seg)
    CURVE_SHAPELEN => 10, #xstart, ystart, x0, y0, x1, y1, xend, yend, count, "curve" (bezier 2 points)
    CIRCLE_SHAPELEN => 5, #x, y, 5, count, "circle" (center + radius)
};
#const my %SHAPELEN =
#Readonly my %SHAPELEN =>
our %SHAPELEN =
(
    rect => RECT_SHAPELEN,
    line => LINE_SHAPELEN,
    curve => CURVE_SHAPELEN,
    circle => CIRCLE_SHAPELEN,
);

#panelization:
#This will repeat the entire body the number of times indicated along the X or Y axes (files grow accordingly).
#Display elements that overhang PCB boundary can be squashed or left as-is (typically text or other silk screen markings).
#Set "overhangs" TRUE to allow overhangs, FALSE to truncate them.
#xpad and ypad allow margins to be added around outer edge of panelized PCB.
use constant PANELIZE => {'x' => 1, 'y' => 1, 'xpad' => 0, 'ypad' => 0, 'overhangs' => TRUE}; #number of times to repeat in X and Y directions

# Set this to 1 if you need TurboCAD support.
#$turboCAD = FALSE; #is this still needed as an option?

#CIRCAD pad generation uses an appropriate aperture, then moves it (stroke) "a little" - we use this to find pads and distinguish them from PCB holes. 
use constant PAD_STROKE => 0.3; #0.0005 * 600; #units are pixels
#convert very short traces to pads or holes:
use constant TRACE_MINLEN => .001; #units are inches
#use constant ALWAYS_XY => TRUE; #FALSE; #force XY even if X or Y doesn't change; NOTE: needs to be TRUE for all pads to show in FlatCAM and ViewPlot
use constant REMOVE_POLARITY => FALSE; #TRUE; #set to remove subtractive (negative) polarity; NOTE: must be FALSE for ground planes

#PDF uses "points", each point = 1/72 inch
#combined with a PDF scale factor of .12, this gives 600 dpi resolution (1/72 * .12 = 600 dpi)
use constant INCHES_PER_POINT => 1/72; #0.0138888889; #multiply point-size by this to get inches

# The precision used when computing a bezier curve. Higher numbers are more precise but slower (and generate larger files).
#$bezierPrecision = 100;
use constant BEZIER_PRECISION => 36; #100; #use const; reduced for faster rendering (mainly used for silk screen and thermal pads)

# Ground planes and silk screen or larger copper rectangles or circles are filled line-by-line using this resolution.
use constant FILL_WIDTH => .01; #fill at most 0.01 inch at a time

# The max number of characters to read into memory
use constant MAX_BYTES => 10 * M; #bumped up to 10 MB, use const

use constant DUP_DRILL1 => TRUE; #FALSE; #kludge: ViewPlot doesn't load drill files that are too small so duplicate first tool

my $runtime = time(); #Time::HiRes::gettimeofday(); #measure my execution time

print STDERR "Loaded config settings from '${\(__FILE__)}'.\n";
1; #last value must be truthful to indicate successful load


#############################################################################################
#junk/experiment:

#use Package::Constants;
#use Exporter qw(import); #https://perldoc.perl.org/Exporter.html

#my $caller = "pdf2gerb::";

#sub cfg
#{
#    my $proto = shift;
#    my $class = ref($proto) || $proto;
#    my $settings =
#    {
#        $WANT_DEBUG => 990, #10; #level of debug wanted; higher == more, lower == less, 0 == none
#    };
#    bless($settings, $class);
#    return $settings;
#}

#use constant HELLO => "hi there2"; #"main::HELLO" => "hi there";
#use constant GOODBYE => 14; #"main::GOODBYE" => 12;

#print STDERR "read cfg file\n";

#our @EXPORT_OK = Package::Constants->list(__PACKAGE__); #https://www.perlmonks.org/?node_id=1072691; NOTE: "_OK" skips short/common names

#print STDERR scalar(@EXPORT_OK) . " consts exported:\n";
#foreach(@EXPORT_OK) { print STDERR "$_\n"; }
#my $val = main::thing("xyz");
#print STDERR "caller gave me $val\n";
#foreach my $arg (@ARGV) { print STDERR "arg $arg\n"; }

---

Download Details:

Author: swannman
Source Code: https://github.com/swannman/pdf2gerb

License: GPL-3.0 license

#perl 

How to Develop an ASP.NET Core Application Using Visual Studio Code

Visual Studio Code (VS Code) is a free, cross-platform, and lightweight source-code editor developed by Microsoft for Windows, Linux, and Mac operating systems. It is a source-code editor while Visual Studio is an IDE (integrated development environment). VS Code supports development operations such as debugging, task running, and version control, like Visual Studio.

In this blog, we will learn about developing, debugging, testing, and deploying ASP.NET Core applications using Visual Studio Code.

Prerequisites

The following packages should be installed in your machine:

• .NET Core SDK
• Node.js
• Visual Studio Code

Install essential plugins

1. Install the C## extensions, which are required for development of ASP.NET Core applications. To open the list of extensions, please select the extensions icon on the left side of menu or use the Ctrl + Shift + X shortcut key. Refer to the following screenshot.
2. 
3. Then, install the NuGet Gallery extension to add and update NuGet packages in the VS Code.
4. 

#asp.net core #visual studio code #web #productivity #visual studio #vs code #web development

COMO USAR e trabalhar com Code Review no Visual Studio Code

Não é todo programador que gosta de compartilhar o seu trabalho ou até mesmo receber feedbacks de como o seu código foi escrito, mas o Code Review é cada vez mais comum em empresas do mundo todo.

Conheça uma extensão para Visual Studio Code e comece a trabalhar com Code Review em seu próximo projeto. Essa é a sua chance de saber COMO USAR e trabalhar com Code Review no Visual Studio Code.

#visual studio code #code review #visual studio #code

User Snippets (Code Shortcuts) in Visual Studio Code

Hello, my friends and fellow developers, this video is all about User Snippets. That means the Snippets (Code Shortcuts) that you can make for yourself. It is a really amazing feature. I hope you like this video

Let me know in the comments below if you want more Visual Studio Code videos or any other videos. And like the video, if you like it.

#visual studio code #visual studio #code