Christian Heilmann

You are currently browsing the archives for the General category.

Archive for the ‘General’ Category

Quick reminder: HTML5 required and pattern are not a security feature

Thursday, September 22nd, 2022

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:

Screen recording of a demo of a form preventing submission and Console working around it

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

Celebrating 1M installs of Edge DevTools for VS Code

Thursday, September 15th, 2022

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

the extension showing what it does inside visual studio code

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.

Header of the extension listing showing the amount of installs

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.
    Code problems in the document being flagged up and explained
  • 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.
    browser preview showing the current project in a simulated mobile resolution
  • Syncs changes in the developer tools – like fixing CSS issues live with your source code
    a change in the styles using the visual tool affects the source code
  • Adds a Console for testing JavaScript
    The browser console inside VS Code
  • 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.

Quick tip: embedding YouTube Videos in GitHub pages

Wednesday, September 14th, 2022

A youtube video embedded into a markdown file showing up on GitHub pages

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)

Final video of fixing issues in your code in VS Code

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.

New Developer Advocacy Handbook chapter – How to create short and concise technical videos

Tuesday, September 13th, 2022

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.

Screenshot of the handbook chapter on creating videos

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

Automatic issue fixing and filtering in Visual Studio Code

Friday, September 9th, 2022

options how to interact with a reported issue with code in the VS Code editor

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.

Recording showing how to fix an issue in your code automatically

Here’s a 25 second intro to the feature:

Want more or contribute? File an issue on GitHub .