DEV Community: Jonathan Carter

VS Code + Live Share: Putting the “We" back in "Web"

Jonathan Carter — Wed, 20 Oct 2021 23:02:31 +0000

When we first released Live Share three years ago, our goal was to enable developer collaboration to become more enjoyable, flexible, and extensible, across a diverse set of use cases. Screen sharing had served us well, but as teams and classrooms were becoming more geo-distributed, it was clearly time for a fresh take on remote pair programming.

Since then, Live Share has become a key part of many developer's workflow, and it's been amazing to build it alongside the community. However, in order for us to support collaboration to happen from anywhere, and on any device, we've been missing a fundamental part of the story: a web client.

// Detect dark theme var iframe = document.getElementById('tweet-1450853494949244929-47'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1450853494949244929&theme=dark" }

With the introduction of Visual Studio Code for the Web (and github.dev), developers now have a world-class editor, that's simply a URL away. And with this powerful foundation in place, we were able to port Live Share to run entirely in your browser, so that collaboration can be as opportunistic and lightweight as possible. Got an iPad? Sweet! Working on a new machine and don't want to install any tools? Awesome! VS Code and Live Share have got your back, no matter where/when you want to collaborate 🔥

// Detect dark theme var iframe = document.getElementById('tweet-1450868941056720899-539'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1450868941056720899&theme=dark" }

Even cooler, the Live Share web client is fully interoperable with both Visual Studio and Visual Studio Code, which allows you to collaborate with other developers, and ensure that everyone can work in their most comfortable and convenient environment. At the moment, the Live Share web experience supports the majority of features that the desktop client does (e.g. co-editing, shared cursors, text chat, inline commenting), and we'll be iterating on it in the coming weeks to fill in some of the remaining gaps (e.g. notebooks).

That said, we think that Live Share's new web support is complete enough for folks to start giving it a spin, and letting us know where and how we can improve. We're extremely excited to remove these setup and device barriers, and looking forward to hearing if/how it's making developer collaboration more enjoyable 💖

Fun Things You Can Do With github.dev 😎

Jonathan Carter — Sat, 28 Aug 2021 18:02:02 +0000

GitHub recently released github.dev, which allows you to press . on any repo in order to open it in VS Code, directly from your browser (🤯). This simple gesture can provide you with a significant productivity boost for reading, editing, and sharing code on GitHub. Including from an iPad!

Note: In addition to the . key, you can also change “.com” to “.dev” in your URL bar, in order to achieve the same effect 👍

// Detect dark theme var iframe = document.getElementById('tweet-1425505817827151872-431'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425505817827151872&theme=dark" }

Since github.dev is based on VS Code, you can customize your keybindings, color theme, file icons, snippets, and more. Even cooler, you can enable settings sync and roam your personalizations between VS Code, github.dev and Codespaces. That way, no matter where you're reading/editing code, you'll immediately feel at home 💖

However, what might not be immediately obvious, is that github.dev enables something even more compelling: the opportunity to customize and create entirely new GitHub-native workflows. Instead of relying on browser extensions or 3rd party services to augment github.com, you can simply take advantage of the editor you already love, along with its prolific ecosystem, to enhance GitHub directly. To illustrate what I mean, let's take a look at 10 examples of what Github.dev makes possible today 🚀

1. ✉️ Sharing Deep Links

In addition to pressing . from a repo page, you can also press . when viewing a specific file on GitHub.com. Furthermore, if you select some text in the currently opened file, and press ., then when VS Code is opened, it will focus that file and highlight the same text selection. You can then copy the URL in your browser, and send that to others, in order to share that exact same context. This simple capability has the potential to enable new and interesting ways to communicate about code 🔥

// Detect dark theme var iframe = document.getElementById('tweet-1430559579218137096-197'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1430559579218137096&theme=dark" }

Demo: Click this link to see how the GitDoc extension subscribes to repo events in VS Code.

2. ✅ Pull Request Reviews

In addition to hitting . on a repo or file on github.com, you can also press it when viewing a pull request. This enables you to review the PR using a rich, multi-file view, that includes the ability to view & reply to comments, suggest changes, and even approve/merge the PR directly from the editor. This has to potential to reduce “superficial reviews”, by giving developers better tools, without needing to clone or switch branches 🙅‍♂️

// Detect dark theme var iframe = document.getElementById('tweet-1428266771807625226-17'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1428266771807625226&theme=dark" }

Demo: Click this link to review the PR for adding a regex parser to the CodeTour extension.

3. 📊 Editing Images + Diagrams

Beyond editing text files, VS Code also allows extensions to contribute custom editors, which enables you to edit any file type in your project. For example, if you install the Drawio extension, you can view and edit rich diagrams.

// Detect dark theme var iframe = document.getElementById('tweet-1425844785240236032-332'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425844785240236032&theme=dark" }

Additionally, if you install the Luna Paint extension you can edit images (PNG, JPG, etc.).

// Detect dark theme var iframe = document.getElementById('tweet-1430878752750280709-446'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1430878752750280709&theme=dark" }

In each case, your edits are automatically saved, and you can commit/push changee back to your GitHub repo via the Source Control tab. Even cooler, you can share a deep link for an image/diagram with others, and as long as they install neccessary extension(s), they'll be able to collaborate with you via the exact same experience. This effectively makes github.dev a hackable "canvas" for any file type that is stored in GitHub 😎

4. 🗺 Codebase Walkthroughs

Learning a new codebase is hard, since it's typically unclear where to start, or how various files/folders relate to each other. With github.dev, you can install the CodeTour extension, which allows you to create and playback guided walkthroughs of a codebase. Since github.dev is available entirely in the browser, this makes it easy for anyone on the team, or in your community, to get up to speed quickly, without needing to install anything locally.

// Detect dark theme var iframe = document.getElementById('tweet-1425901618780729345-997'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425901618780729345&theme=dark" }

Demo: Open this repo and install CodeTour. You'll be presented with a toast that asks if you'd like to take the Getting Started tour.

5. 📕 Code Snippets + Gists

Gists are a popular way for developers to manage and share code snippets, config files, notes, and more. In github.dev, you can install the GistPad extension and view/edit your gists. This allows you to maintain code snippets across multiple repos, and access them from both your desktop editor, as well as whenever you're browsing/editing code on GitHub.

// Detect dark theme var iframe = document.getElementById('tweet-1426583542432112647-232'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1426583542432112647&theme=dark" }

6. 🎢 Web Playgrounds + Tutorials

Coding playgrounds (e.g. CodePen, JSFiddle) are a popular way to learn programming languages/libraries, and then share them with others. With github.dev, you can install the CodeSwing extension and begin creating web playgrounds, using your existing editor setup, and with your files persisted back to GitHub.

// Detect dark theme var iframe = document.getElementById('tweet-1426285127244468226-692'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1426285127244468226&theme=dark" }

Demo: Open this repo and install CodeSwing + CodeTour. After a few seconds, you'll be presented with the playground environment.

7. ✏️ Notetaking + Knowledge Bases

VS Code is a world-class markdown editor, and therefore, you can start using github.dev to edit and preview all of your personal notes/documentation. Even cooler, you can install the WikiLens extension in order to get a Roam/Obsidian-like editing experience, for maintaining a knowledge base, that's stored in GitHub and is able to benefit from the ecosystem of extensions/personalizations for VS Code.

// Detect dark theme var iframe = document.getElementById('tweet-1429483662257446916-751'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1429483662257446916&theme=dark" }

8. 📽 Presentations

Once you get used to using github.dev for markdown-based note taking, you’ll inevitably want to author other document types using markdown, since the experience is so simple and elegant. If you install the Marp extension, you can begin creating slide decks using nothing but markdown, and present them directly from your browser. I’ve begun using this workflow, and when coupled with GistPad (for storing presentations as gists), it’s the most amazing way to drive conversations/meetings 🥰

// Detect dark theme var iframe = document.getElementById('tweet-1433893272879964160-641'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1433893272879964160&theme=dark" }

9. 📓 Jupyter Notebooks

In addition to coding playgrounds, another popular way to learn and share code, is via Jupyter notebooks. If you open an .ipynb file in github.dev, you can immediately view the cells and cached outputs of the notebook. Even better, you can install the Pyodide extension in order to actually run Python code, entirely in your browser!

// Detect dark theme var iframe = document.getElementById('tweet-1425502379777019909-297'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425502379777019909&theme=dark" }

10. 🛠 Creating Your Own Extension!

As you probably noticed, most of the items above were enabled by means of an extension, that someone created and published to the marketplace. Since VS Code is fully extensible, using simple JavaScript APIs, you can create your own extensions that support not only VS Code desktop, but also, github.dev. So if you have an awesome idea, for how to make coding on GitHub more productive and fun, then you now have everything you need to get started 🏃

🔮 Looking Forward

While there’s already a ton of use cases for GitHub.dev, it’s still early days, and so this is a space worth watching, as the ecosystem continues to innovate. In particular, I’m excited to see real-time collaboration, and classroom assignments become fully supported, 💯 in the browser. Exciting times 🙌

Do you prefer desktop or web clients?

Jonathan Carter — Sun, 25 Oct 2020 19:09:02 +0000

For apps that have rich clients for both web and desktop (e.g. Slack, Teams, Zoom, Discord, Notion, Outlook, Spotify, etc.), when/why do you choose to use one vs. the other? For example, do you prefer desktop clients because of feature superiority? Do you generally prefer web clients when you're performing an ad-hoc task and/or need on-to-go/quick access to something?

I'm really curious to learn more about folks workflows and how they incorporate web vs. desktop clients into it effectively. If you've already written about this, feel free to share a link. Thanks!

Community Showcase for GitHub Gists in VS Code

Jonathan Carter — Thu, 20 Feb 2020 18:53:51 +0000

The developer community uses GitHub Gists for a pretty diverse set of use cases. Since it effectively provides "universal cloud storage", it enables you to manage everything from code snippets, reference materials/notes, and common utility scripts, all from a single location, that is available from anywhere (it's just GitHub!). When I built the GistPad extension for VS Code, I wanted to simplify the process of adopting/using Gists, as well as extend the applicability of Gists in new and interesting ways (e.g. interactive playgrounds, in-editor tutorials). So far, I've been pretty excited to see how folks are using it 🙌

However, to further spark the imagination of what can be done with Gists/GistPad, as well as highlight some of the awesome work that is happening across the community, I just shipped a new "community showcase" in the extension.

Jonathan Carter

@lostintangent

GitHub Gists provide developers with cloud storage that can be leveraged for a variety of compelling use cases (e.g. code snippets, reference materials, utility scripts). To illustrate that diversity of value, GistPad (aka.ms/gistpad) now includes a community "Showcase"

18:17 PM - 20 Feb 2020

The showcase itself is simply a JSON file, which defines a set of categories and their associated gist IDs. As a result, my hope is to continuously update the showcase based on community engagement/submissions, as we redefine what is new/exciting in the GitHub Gists/GistPad ecosystem. So if you have a Gist that you use all the time and/or find extremely valuable, let us know!

Furthermore, I'd love to hear whether folks would be interested in periodic "challenges", where we advertise a theme (via a GitHub issue?), you then create GistPad playgrounds based around that theme, and then submit them for consideration as comments on the theme issue.

In general, I want the showcase to shine a light on what's possible with Gists, and also, be a fun way for developers to demonstrate their work/ideas. So if you any and all thoughts on how to best accomplish that and/or make the GistPad/showcase experience more compelling, please let me know!

What are your favorite/most useful GitHub Gists and/or CodePen samples?

Jonathan Carter — Sun, 16 Feb 2020 22:42:22 +0000

Hi all! I built GistPad (https://aka.ms/gistpad), which is a VS Code extension that allows you to create, share and talk about code samples, documentation, tutorials, and interactive playgrounds, all backed by GitHub Gists (that way you keep/manage your own data!).

// Detect dark theme var iframe = document.getElementById('tweet-1207718123241033728-578'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1207718123241033728&theme=dark" }

In order to help new users get started quicker, and spark the imagination of what can be done with GistPad and GitHub Gists, I'm adding a new "showcase" view that will highlight some of the most interesting and useful examples across the community. The showcase will include multiple categories and will be updated every week. That way, we can drive weekly "challenges" (e.g. coolest outer space playgrounds) and continuously keep the content "fresh".

Below is what GistPad and the new showcase will look like (categories/gists are for illustration purposes).
However, before I release the showcase v1, I need your help! In order to ensure the initial showcase is as compelling/diverse as possible, I'd love to hear from folks about what their favorite GitHub Gists, CodePen pens, Bl.ocks, etc. are. The content/subject matter can be literally anything, as long as you find it cool. I'll then use folks votes to start the showcase, and then we can iterate from there 👍

Using VS Code and GitHub Gists As a Web Development Playground

Jonathan Carter — Thu, 19 Dec 2019 22:07:41 +0000

Developing web applications can be hard! And as result, it can be extremely valuable to experiment with HTML, JavaScript and CSS, and then visually iterate towards the solution you're looking for (e.g. a specific behavior or styling). Because this kind of "exploration" is so useful--and for many of us, happens regularly--it felt like it should be easy to create/share/fork new ideas, without having to leave your editor in order to do it.

To address this problem, I built the notion of "web playgrounds" into the GistPad extension, so that at any time, you can create new playgrounds within VS Code, and then edit HTML, JavaScript and CSS, alongside a live preview experience. Once you're done with the playground, simply close the preview panel and move on, without having had to switch contexts and/or losing the power of your VS Code editor + highly-personalized extensions 🔥

// Detect dark theme var iframe = document.getElementById('tweet-1207718123241033728-723'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1207718123241033728&theme=dark" }

Behind the scenes, playgrounds are stored as GitHub Gists, which ensures the code is persisted and reusable in the future. Furthermore, since GitHub Gists can be shared and forked by others, this enables an entire ecosystem of playgrounds to form as new "base templates" are defined, which can increase productivity for specific types of playground scenarios (e.g. TypeScript, Angular, Vue.js).

This playground experience is very early, but I'm excited to begin engaging with the community, learn new use cases and requirements, and see how we can improve the experimentation experience for web development within VS Code 🚀

VS Code + GitHub Gist = Developer Micro-Blogging (aka a "GistLog")

Jonathan Carter — Sun, 15 Dec 2019 21:07:32 +0000

In a previous post, I introduced GistPad, a new VS Code extension that provides an in-editor scratchpad/code snippet manager, built on top of GitHub Gists. However, after releasing the extension, and talking with many developers, I learned that there was another interesting use case for Gists, that could benefit from further optimization: documentation/mini-blogging. Since Gists are persisted, tied to your GitHub identity, and easy to create, they represent a great solution for maintaining your personal "knowledge base" and sharing it with your team/colleagues/friends 📚

In order to reduce context switches, and allow you to easily document/retain valuable information as you acquire it, GistPad now allows you to create micro-blog posts directly from VS Code, and stored as GitHub Gists. Since VS Code is a world-class markdown editor, this provides you with an awesome authoring experience, that is easy and familiar to use. Finally, by means of an integration with GistLog, your micro-posts are easily shareable with others, thanks to a beautiful web publishing experience and support for RSS subscription 🚀 Check out what this looks like in the following gif:

Jonathan Carter

@lostintangent

Thanks to the awesome folks at Tighten (tighten.co) you can now use GistPad (aka.ms/gistpad) to author and publish code-centric, Gist-based blog posts (aka a "GistLog"). Share your thoughts, code snippets, and learnings with the world, directly from @code 🚀

00:13 AM - 15 Dec 2019

I'm excited to see how this can be used as a middle ground between tweeting and blogging, where the information you want to share/retain is more than a quick thought, but not quite an entire post. Additionally, since GistPad allows you to easily migrate local files/snippets to Gists, this makes it really easy to write content that is centered around what matters most: code. If this experience looks at all interesting and/or you get a chance to check out GistPad, please let me know what you think and any feedback you may have. I want this extension to be by and for the community 🙌🏻

For more details, check out the documentation for GistPad's micro-blogging support here.

VS Code + GitHub Gist = Cloud-Based Developer Scratchpad

Jonathan Carter — Sun, 24 Nov 2019 18:15:55 +0000

GitHub Gist provides a powerful and flexible platform for quickly creating, editing and sharing code files and snippets. In order to make it easier to iterate on Gists from a feature-rich editor, I created a VS Code extension that exposes Gists via a “virtual file system”, that allows you to edit gists as if the files were local: GistPad.

Liquid error: internal

My team builds both Visual Studio Online and Visual Studio Live Share, so I’m keen to explore adding this Gist editing experience to the web-based editor and then enabling you to collaborate with others in real-time 🚀

That said, I’m curious to hear if people think this kind of experience could be useful, and also, what you’re currently using Gists for (or want to use them for!). This is largely just a proof-of-concept, so any feedback would be hugely welcome 🙏

What are the biggest challenges when onboarding and contributing to a new codebase/project?

Jonathan Carter — Sat, 14 Sep 2019 18:25:35 +0000

Hey All!

In your experience, what have been some of the biggest challenges you (or others on your team) have faced when getting setup and familiar with a new codebase, and then ultimately, merging in your first change? For example:

Setting up your machine with the right SDKs to build/run the app (e.g. specific version of Node/Java)?
Knowing which IDE and extensions are needed in order to productively work on the app?
Configuring access to private repositories, package managers or registries?
Setting up the needed service dependencies for the app (e.g. a database)?
Actually getting familiar with the codebase itself? (e.g. it’s directory organization, any specific style conventions)
Understanding architectural decisions that have been made, and how to best apply those for future work?
Learning the team processes for how to handle commits/PRs (e.g. thoughts on rebasing, do we use conventional commits?)
Determining who to ask questions about specific parts of the codebase?
Something else?

Many of these have potential solutions, and so I’d love to hear not only what challenges you’ve faced, but also, how you’ve worked around them. In general,
I’m just very curious to hear how teams are able to improve the onboarding and contribution process for new members. Thanks!

Have you used a paid on-demand expert help service to screen share/pair program/review code with someone?

Jonathan Carter — Sat, 07 Sep 2019 16:04:14 +0000

Hey All! As the PM for Visual Studio Live Share, I care a lot about making team-based collaboration amongst teams more enjoyable 🚀 That said, in some cases, you may be working solo on a side-project, or your team might not have the answer to a question you have, and therefore, it may be worth using an on-demand expert help service to get quickly unblocked (e.g. CodeMentor, Pullrequest.com).

Have you ever used (or considered using) a service like this? I’m curious to hear if folks have ever paid to get help, have a peer code review, do some pair programming, etc. and if so, what service you used. I’d also be interested to hear the scope of the task (e.g. quick question vs. 2 hour pairing session), the programming language your used, and overall, how your experience was. Thanks! 🙌

What have you built/automated with headless browsers (e.g. Puppeteer)?

Jonathan Carter — Thu, 05 Sep 2019 19:37:50 +0000

Hey All! I’ve been recently exploring Puppeteer in order to automate simple tasks for myself (e.g. capturing screenshots and PDFs). I'm extremely amazed by how easy it is to drive the browser UI, as well as inspect network requests/performance data/etc., and I can only imagine how powerful headless browser automation can be, not only for E2E tests, but also business processes (e.g. automate data collection/entry) 🚀

I'm curious to hear from others, in order to learn whether you've used headless browsers for automation, and if so, what for? (e.g. end-to-end tests, automating a business process, etc.) In particular, it would be awesome to know what tasks you're automating, which specific tools/frameworks you've used (e.g. Selenium), and what your experience was like building/maintaining the automation scripts. Thanks!

VS Code: Does your team or school use a custom “extension pack” to share their tooling stack?

Jonathan Carter — Mon, 26 Aug 2019 03:01:33 +0000

Hey All!

I’ve noticed a trend where teams and/or schools will create a VS Code extension pack, and use that to simplify the acquisition of all extensions needed to work on a project or curriculum (e.g. LBCC CS Pack, Boundary Studio). That way, it’s easy for everyone to get started (you simply install the pack), and stay consistent as new extensions are added/removed.

Has your team/school done this? If so, could you share the extension pack you use? I’m curious to see how folks are using this method, and also, hear whether it’s worked well as a means of sharing a standard tooling stack (as compared to, or complimented by recommended extensions). Thanks! 🙏