Tag Tip/Trick

Read from console in VS Code

Sandeep Mewara Leave a comment

I moved to Apple Mac late last year because of different set of technologies now I work in. As shared in one of my previous posts, I use Visual Studio Code for programming in Python exploring Machine Learning. Though, for anything in .NET, I switch to a Windows VM and use Visual Studio.

For quick console apps, it feels painful to switch to a VM and work. Thus, I looked and installed C# extension in VS Code to try of. Details are here.

While running a console app, I got stuck to read any value from Console. In debug mode, IDE would stop on the Console.ReadLine() but whatever I type in Console would not go through.

I looked around and found that there are few settings for Console in VS Code. The console setting controls what console (terminal) window the target app is launched into.

"internalConsole" (default) : This does NOT work for applications that want to read from the console (ex: Console.ReadLine).

How to Solve it?

Suggested way to take input is to set the console setting as integratedTerminal. This is a configuration setting in the launch.json file under .vscode folder.

"integratedTerminal" : the target process will run inside VS Code’s integrated terminal (Terminal tab in the tab group beneath the editor). Alternatively add "internalConsoleOptions": "neverOpen" to make it so that the default foreground tab is the terminal tab.

Change the default setting like below:

vscode-read-console

With above change, the input and output will happen through integrated terminal like:

vscode-read-console-2

So far, it looks good and seems I will stick to Visual Studio Code on Mac for quick console applications.

Reference here.


Keep learning!

LearnByInsight
GitHub Profile Readme Samples

Make browser a basic html editor

Sandeep Mewara Leave a comment

While working on one of my recent blogs, I stumbled upon an HTML DOM property that looked interesting.

In past,

  • I have to see how the text change looks in a webpage – make change, refresh page or run the application again
  • I have to inspect, find the related DOM to make any text change to it and then write code to make the change to see it
  • I downloaded HTML page and then made some change in its text to add/edit/remove some comments for clean print.
  • Have some logic to provide an editable HTML page to users

Well, no more. Seems we have a new property (surely it was not there few years back but introduced recently): document.designMode

I tried in Firefox, from menu items, go to: Tools -> Web Developer -> Web Console. Write:

document.designMode = "on"

Post this, you can edit the webpage text right in your browser!

documentModeEx

Sample real use case could be providing a portion of page editable to users. Add that in an iframe and then turn the designMode of that to ‘on’: 

iframeNode.contentDocument.designMode = "on";

A string indicating whether designMode is (or should be) set to on or off. Valid values are on and off

In IE, it would be under Developer Tools, and so on for other browsers.

design-mode
Browser Compatibility

Nice to have something like it to to convert browser into a basic HTML editor! Keep learning.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode

HTML5: Tips !!!

smewara Leave a comment

Long time, since I have blogged. Specifically, this particular post – had all the details and wanted to post more than a year back. I guess, better late than never!
Here are few of the HTML5 tips that might help while using it’s various features:

HTML5 WebSocket Protocol is present only from IIS 8.0

HTML5 Web Socket provides a two-way communication over one TCP connection (socket). IIS 8.0 (ships with Windows 8) is capable of accepting Web Socket communications. In order to use the new protocol, one has to enable it in IIS 8.0, using option “Turn Windows features on or off” present in the control panel. It should look like below:
WebSocketIIS8
A quick detail on how WebSocket works can be looked here in my article: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#websocket
 

One can support new HTML5 elements in older browsers using HTML5 shiv

Older browsers that are still widely used by end users (namely IE6/7/8) do not have support for the new elements in HTML5. One great way to enable HTML5 element support in IE6/7/8 is to have the http://code.google.com/p/html5shiv/
As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.
In case interested, I came across a good sample example and details out here: http://www.sitepoint.com/html5-older-browsers-and-the-shiv/
 

Elements in HTML5 can easily be made draggable

The specifications defines an event-based mechanism – a JavaScript API and additional markup for declaring it. Any type of element can be marked draggable on a page. It’s a known fact that having a native browser support for a particular feature is best as they would be faster and provide a more responsive application.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#dragdrop
 

‘Type’ attribute for script and link are no more required in HTML5

Type attribute is optional and one does not need to provide it for script and link tag in HTML5.
Earlier, one used to give:

<link rel="stylesheet" href="somepath/somestylesheet.css" type="text/css" />
<script type="text/javascript" src="somepath/somescript.js" />

Now, in HTML5, same references can be provided as:

<link rel="stylesheet" href="somepath/somestylesheet.css" />
<script src="somepath/somescript.js" />

This makes things simpler as the file extension and the tag were enough to interpret the type.
 

async attribute has been added to <script> tag in HTML5

HTML5 has added a new attribute for <script> tag, which is async. With this attribute, the external script will be executed asynchronously as soon as it is available. It has no effect on inline scripts.
Inline scripts and scripts without async or defer attributes are fetched and executed immediately, before the browser continues to parse the page.
 

In HMTL5, all unknown element in all browsers are displayed inline by default

The three most commonly used values are none, block, and inline. All elements have an initial or default state for their display value.For all HTML5 elements, by default they have a computed display value of inline.
 

In HTML5, page and worker do not share the same instance

In HTML5, page and worker do not share the same instance – a duplicate is created on each pass. Data passed between the main page and workers are copied. Objects are serialized as they’re handed to the worker, and subsequently, deserialized on the other end. I read that most browsers implement this feature as structured cloning. (The structured clone algorithm is a new algorithm defined by the HTML5 specification for serializing complex JavaScript objects.)
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#webworkers
 

In HMTL5 Offline, relative URLs listed in a manifest are resolved relative to the manifest file

Yes, the urls in the manifest are relative to manifest’s own url. It is not to be confused that they are relative to root. Though it might happen that the urls relative to root work good because the manifest file might be located in the application root.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#offlineapp