Using the required and/or pattern attribute on HTML input elements stops users from submitting forms with invalid values, but you can work around that using the Console tool.

In HTML5, you can provide a `required` attribute to ensure a certain field has been filled out before a form can be sent off.

<input id="tac" required name="tac" type="checkbox">
<label for="tac">I have read the terms and conditions</label>

You can go even further and define a `pattern` that the value of the field needs to comply with before it can be sent off. For example, the following only allows entries that are either upper or lowercase a to z letters.

<label for="pkey">Product key (A-Z only)</label>
<input id="pkey" required name="id" pattern="[a-z|A-Z]+">

You can read up more on MDN and see some more examples.

Whilst this is an excellent way to get the browser to provide feedback to your users, it is not a security measure. Any form that relies on this feature alone can be defeated by using the Developer Tools Console and using JavaScript to submit the form.

$('form').submit()

You can see it here in action:

In any case, you always need to check the validity of any incoming data on the server side and, if necessary sanitise the data.

The Edge DevTools for Visual Studio Code extension has over 1M downloads, time to recap a bit how it came to be

When I started my current role in Microsoft one thing that ailed me was that the browser developer tools are great for debugging, but they aren’t changing the original code. It is quickly possible to find out why something doesn’t work and it is convenient to use visual tools to fix the problem but you still need to remember what you changed and repeat those changes in your editor.

One of the engineers on our team showed me an idea he had. As both the browser and the editor (in this case Visual Studio Code) are based on the same platform (Chromium), it would be possible to integrate the convenient debugging experience of the browser developer tools right into the editor and not only change what is shown in the browser but also the source code that generates it.

I immediately latched onto this idea as a great one and after writing quite a few presentations and many an internal meeting we got funding for the product.

Fast forward to now and the DevTools for Visual Studio Code extension just broke the 1M installs mark.

We also have around 30,000 daily users and get a lot of great feedback on the GitHub repository.

I want to thank everyone involved in this project from the beginning to now. I am always humbled by how much talent the developer team has and how fast you can iterate on a product when you play fully in the open. I also want to thank the Visual Studio Code and the Visual Studio teams to be great partners to integrate with. It’s been a wild ride and it is great to see people be super excited about your work .

If you haven’t tried the extension yet, here is what it does for you:

• Highlights issues in your code with explanations what the issue is and how to fix it. This is live – so while you develop your product you get information about what you are doing and what damage it causes.
  
• Shows your product in a browser preview with emulation options (emulate different devices, modes like dark/light/high contrast) and test some of its accessibiltity.
  
• Syncs changes in the developer tools – like fixing CSS issues live with your source code
  
• Adds a Console for testing JavaScript
  
• Adds the Application tool to inspect storage and services running in the background
• Allows you to inspect the network traffic of your product
• Allows to set breakpoints in your source code and get the in-context debugger

Whilst all of this gets the web developer in me super excited, the PM in me is also very happy about what it means to the Chromium developer tools project (which are in use in all the browsers based on it, Chrome, Microsot Edge, Brave…) all up:

• We cleaned up a >10 year old code base to be not a monolithic box in the browser but allowed to use the different tools in the Developer Tools App separately.
• We upgraded the browser screencast of Chromium to a fully fledged panel inside VS code, that can be moved to anywhere you want and has all the interaction you have in a main browser window when it comes to overlays and showing CSS features.
• We integrated the functionality of the issues panel into your code to show you live issue reporting including customisability

Many of the learnings we got from releasing this extension can roll back into the developer tools themselves, with the biggest one being a new emulation/responsive web design toolbar in the main browser window .

There is a lot more to be gained from taking the Chromium Developer tools and embedding them in a different context, and I am excited that we managed to do this and reach this landmark. More to come.

GitHub Pages is a great way to host some of your content online. All you need to do is to write some markdown files and tell GitHub to create it as a page.

The problem is that you can’t just add some HTML into your markdown to – for example – embed a YouTube video. It does work if all you include is the YouTube iframe, but when you work with professional markdown repos, this will be flagged up as an error or security problem.

A workaround that many people use is to embed a linked preview of the video :

If your YouTube URL is https://www.youtube.com/watch?v=JLMbpiywVxQ the important part is the ID after the `v=`, in this case `JLMbpiywVxQ`.

You can then use the following markdown to embed a link to the video with a preview image of it. YouTube automatically creates these preview images.

[![Final video of fixing issues in your code in VS Code]
(https://img.youtube.com/vi/JLMbpiywVxQ/maxresdefault.jpg)]
(https://www.youtube.com/watch?v=JLMbpiywVxQ)

If, however, you want to embed the video in markdown files, you need to do a bit more.

1. Go to the root of your GitHub repo with the markdown files and create a folder called `_includes`.
2. In this folder, create a file called `youtube.html`. Paste this HTML and CSS and save it.

<div class="embed-container">
    <iframe width="640" height="390" 
    src="https://www.youtube.com/embed/{{ include.id }}" 
    frameborder="0" allowfullscreen></iframe>
</div>
<style>
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Now you can embed any YouTube video in your markdown files using the following:

{% include youtube.html id="JLMbpiywVxQ" %}

With the ID being the YouTube ID.

You can see this in action and fork the youtube embed demo repository if you don’t want to do it by hand.

This weekend I released a new video on the VS Code TikTok and YouTube channel which got some good interaction (53k visits on TikTok, 6k on YouTube).

Here is the VS Code portrait version:

And here’s my original landscape one.

People keep asking how I did those, so I added a new chapter to the Developer Advocacy Handbook explaining the process. Click below to read it there in detail.

In essence, the process is:

• Write a concise script
• Record yourself reading this one
• Record a screencast showing the things you talk about
• Speed up, add freeze frames and cut the screencast to match the main video

Using the Microsoft Edge DevTools for VS Code extension you get live analysis of your code and information about problems with accessibility, compatibiliity, security and performance. One highly requested feature was to automatically fix issues or allow users to never report a certain issue again. This is now part of the extension since version 2.1.1.

Here’s a 25 second intro to the feature:

Want more or contribute? File an issue on GitHub .