DEV Community: Thiago Monteiro

Cobrowsing: Interactive screen sharing

Thiago Monteiro — Wed, 24 Mar 2021 10:10:40 +0000

tl;dr
Cobrowsing is a Chrome extension from GitDuck that allows you to share websites that can be browsed by other people. Check a demo, read the complete instructions or download the extension.

Why did we build Cobrowsing?

We are building GitDuck to help software teams talk and collaborate more fluently. When we think about how teams interact (and how we work as a team), it is normal that many of our interactions consists of sharing some content and talking about it. We could be sharing the code, a drawing and a lot of times we are sharing a website.

Traditional screen sharing is one way of doing this by sharing 60 frames of your screen per second and allowing your team to see it in real-time. This is ok, but there some problems that we need to talk about:

Image quality. If your internet connection is not great or if a participant has a slow internet connection, the image quality would reduce dramatically and this would compromise the experience.
Lack of interactivity when screen sharing. When someones is screen sharing, the other participants are always passive. This can work on some scenarios, but most of the time people need to point things out and explore. Trying to do this via screen sharing is super frustrating.

Can you click on that button?

What button?

Wait, scroll back a little bit

Come on, it's 2021! Why were we still doing screen sharing the same way we did in the mid-2000s? These tiny frictions build up and the flow of information slows.

Screen sharing without interaction is like talking on a walkie-talkie instead of having a real-time conversation.

We want to be able to share any website and allow people to view and control it as if they had opened that website themselves. People should be able to scroll, click on things, see everyone's cursors and even type. People should have an interactive screen sharing experience.

What's the use case?

Whenever you are working remotely, one of the most common things to do is show something on your screen and talk about it. You might want to share your sprint planning and discuss the task details. Or you want to share your local server and show the most recent version running locally of your web app. Or perhaps read together a technical documentation and discussion implementation details.

Sharing localhost

When sharing the local version of your website or web app, you want people to be able to use it and get their direct feedback. If you are the one sharing your screen, then you are filling the UX gaps that might not be obvious for other people. For example, you might be taking a shortcut when showing how people are signing up for your app and you not even noticing that you are doing that.

By allowing them to use your local in development version, you are getting valuable feedback that are not compromised by your bias. Another great thing is that you can do it without deploying anything. People can literally browse the local version in your machine while you watch they doing it.

Sprint planning

At GitDuck we do weekly sprint plannings to review together our plan and discuss the tasks. It's a moment of detailed discussion that we need to be in the same page and we use the cobrowsing feature in our favor. By sharing our board page, everyone is looking at the same item and we can write specs in a more collaborative way.

QA and debugging

To be able to show and reproduce a bug is one of the most important things you need when developing a product. A lot of times this happens over screen sharing, but the context is already different as you are only seeing the screen of your colleagues. You don't have access to their logs and can't debug in real-time. With the cobrowsing feature you could share the web app and have the dev console open while your colleague is using the website. It's like they would be using the web on your machine. You can see the logs in real-time and catch bugs much faster than if you had to guess how to reproduce the issues.

Extra point: When you share a website with cobrowsing, you are really sharing your local version. When a bug happens, you can have the confidence that the bug is happening on your machine. That's one less variable to worry about and you can focus on solving the issue.

Sharing references

Whenever you need to share a documentation or any website for reference, one important feature is to be able to select and copy the text that you are seeing. With the cobrowsing feature you can do that. You can copy examples, interact with the website and make the whole process of reading a documentation much easier.

How does it work?

By leveraging the capabilities of Chrome Extensions, while you're on a call, we're able to inject JavaScript code inside of the webpage you want to share. That way, the moment you click Share tab, we start watching for changes being made to the DOM tree by using the MutationObserver API, available on all modern web browsers.

We send the DOM and their subsequent changes to all other call participants the same way we do when you share your code or terminal from any of our extensions, by using a peer-to-peer connection with WebRTC (taking advantage of all the security benefits WebRTC comes with out of the box). That DOM tree that your peers receive is going to be rebuilt inside an iframe (along with the mutations received from the MutationObserver API).

Other than that, we leverage popular browser APIs and events for achieving an interactive "browser-sharing" experience: checking for scroll position, listening to events like mousemove, click, selectionchange, change from elements like <input>, etc. Note that we also need to listen to those events on the iframe representation (and send them back to the person who is sharing), so guests can scroll, click and type around in sync.

There are lots of other issues we need to take care of like private assets that are only available to the person who's sharing (e.g. because he has a cookie or is on a private network), recording iframes or canvas, keeping everything in sync when multiple people are typing at the same time, making it performant, dealing with strict security headers, etc. We're still polishing details and improving this extension with your feedback so if you notice something it's not working as expected on a certain page please let us know! Also, if you're interested in working on interesting challenges like this one, don't hesitate to keep an eye on our open positions.

Security

As with the audio communication and the code sharing features on GitDuck, the content is only being shared encrypted and peer to peer between the call participants. That's right, no content touches our servers. We take security and privacy very seriously. Check our security page for more details.

How to use Cobrowsing on GitDuck?

You will need two things to be able to use this feature.

First you need to have a GitDuck account and be part of a team so you can talk there. If you don't have one, just go to gitduck.com and create an account.
Then you need to install the GitDuck extension for Chrome. Get it on the Chrome web store. GitDuck extension on Chrome web store.

Once you complete both steps, join a call on GitDuck. The GitDuck Chrome extension will notice that you are on a call and add a small widget to the open tabs that you have. Once you click that, you will be sharing that tab to everyone that is on the call and they will be able to browse that website with you. Everybody will be on the same page and you are going to be able to see each other's cursors. If someone clicks or scrolls, everybody will see and follow.

You can also read the full instructions here.

Best Visual Studio Code Extensions in 2021

Thiago Monteiro — Thu, 11 Mar 2021 15:01:45 +0000

There are no doubts that VSCode is one of the best code editors on the market today and unlike some other code editors you’ve probably tried, it’s clearly designed for a modern tech stack and has a ton of quality-of-life features that you probably never knew you needed.

But, perhaps the most beautiful thing about Visual Studio Code is that it’s open-source and has a dedicated community of developers who are constantly working to improve the software.

On that same openness concept, you can find thousands of extensions for VSCode on its Marketplace. From extensions that make learning how to code painless to functional extensions that make development processes more efficient, there’s something for every kind of developer.

So, without further ado, let’s take a look at the best VSCode extensions for 2021.

Quokka.js

If your language of choice is JavaScript or TypeScript, then you’ll love Quokka.js. This extension aims to speed up development by displaying runtime values in your IDE as you code, so you can focus on writing code instead of building custom configs simply to try something new.

It’s a simple, lightweight extension, and one that’s perfect for both seasoned developers and newbies alike. It’s also free for community use, but if you’re a JavaScript/TypeScript professional, you can also buy a Pro license that lets you modify your runtime values without having to change your code.

Import Cost

When you’re developing a web application or a website, it’s all too easy to make something that’s bloated - particularly as a newbie dev. A big factor in this is that many devs don’t always know how big packages are when they’re imported through code.

Import Cost is a VS Code extension that displays the size of imported packages inline, so you know exactly how much importing that package will cost during the development process. So, it’ll help you to better optimize your applications and websites, particularly for mobile users who typically suffer more due to bloat.

Tabnine

Tabnine is a massively popular AI assistant for VSCode that works with all major programming languages, so there’s no doubt you’ll find it useful no matter what your skillset is.

By studying publicly shared codebases, Tabnine uses deep learning algorithms to predict what you need and offers one-click code completion so you can work through your project quickly and efficiently. For newbie coders, this makes learning a breeze, as it gives you the space to play with ideas without needing to remember coding syntax or search StackOverflow.

And, if you’re a seasoned dev, then you’ll find that Tabnine saves you oodles of time on whatever you’re working on by giving you the building blocks you need to get things running.

GitLens

If you regularly use Git, either professionally or with your own projects, then GitLens makes it even easier to integrate your IDE with Git.

With GitLens, you can quickly see who, why, and when code was changed in any given project. Plus, you can hop back through previous changes to see why other devs changed that code, and do side-by-side comparisons to get a better understanding of why things changed.

It’s super customizable, too, so you don’t need to worry about GitLens being too intrusive in your IDE.

Bracket Pair Colorizer

It’s such a simple quality of life improvement, but it’s one that every developer will be thankful for. Bracket Pair Colorizer does exactly what it says on the tin - it colors pairs of brackets, so you can find the opening and closing brackets extremely quickly.

Whether you’re working with spaghetti code, figuring out someone else’s code, or you just want to make it easier to read code, this extension is super useful. It’s also really easy to configure this extension’s settings, too, so you can even make it work if you use custom bracket characters. And, if you need specific colors, or want orphan brackets to show up in a separate color, it’s easy to do that too.

Path Intellisense

Whether you’re a seasoned dev or you’re new to the game and find the number of things you need to remember overwhelming, you won’t know how you ever lived without Path Intellisense.

Path Intellisense makes working with file paths easy by offering either an autocomplete or suggestions for your code. Simply begin typing a path in quotations, and Path Intellisense will either automatically complete the path for you or suggest a variety of different options if it’s not sure what option you want.

Plus, if you’re using hidden files, Path Intellisense can help you with that too.

It’s quite a simple quality-of-life improvement, but it’s one that every dev never knew they needed.

Prettier

We know that, with certain languages, it’s vital for you to keep your code tidy and properly formatted. But, that can be easier said than done when you’ve got deadlines to meet - or if you’re a new developer that doesn’t know all that much about formatting yet.

Prettier is a formatting extension that automatically formats your code for you every time you save it, so you don’t have to worry about forgetting to indent every now and then. Plus, if you’re still learning how to code, Prettier can save you a ton of headspace, allowing you to focus on your project instead of how to make your code readable.

We’re not saying that readable code isn’t something you should avoid learning, but it definitely takes the headache out of code editing and reading someone else’s code.

Remote - SSH

If you’re working remotely right now because of COVID-19, you might be struggling with not having the right tools at home to work with. Or, you might need to work with software that’s on a device in a remote location. Remote - SSH is here to help.

Remote - SSH allows you to remote onto any machine’s development environment to get your work done, and quickly swap between different environments to update your code. All you need for Remote - SSH to work is the extension on your computer and the remote device, and you’re set.

This makes it a great option for devs who need to access more powerful software than they can host at home, or even if you need to check out code that’s running at your work location but you can’t make it into the office.

Live Sass Compiler

Sass is an increasingly popular development language, but if you’re new to Sass, it can be pretty confusing.

Live Sass Compiler...well, compiles SAAS or SCSS files to CSS. Live. Regardless of if Sass is a requirement for your project or you just like the formatting, this extension can save you a ton of time (and headaches!) by taking care of the hard work for you.

You can even get a live preview of the compiled CSS file in your browser or the Live Sass Compiler app, so if there are any problems, you can fix them before you check your code in.

Auto Close Tag

Have you ever spent hours wondering why the hell your code isn’t working, only to realize after three cups of coffee and lots of cursing, it’s because you didn’t close a tag? Yeah, we’ve all been there.

The Auto Close Tag extension, as you might expect, automatically closes HTML or XML tags for you in the IDE. So, when you type an opening tag, this extension will create the closing tag for you. All you have to do is write your code between them, and you’re good to go.

And now, you’re safe in the knowledge that any errors that come your way aren’t because of missing HTML/XML tags. So, that’s helpful.

Code Spell Checker

If English isn’t your first language, or if you’re a coder over in the good ol’ United Kingdom, Canada, or Australia, chances are that you’ve misspelled something in your code before and spent far too much time wondering why your code keeps spitting out errors.

This extension points out spelling mistakes in your code with a helpful squiggly line that’ll take you back to your word processing days. And, if you develop in a language that works with UK English spelling variations, it’s easy to switch Code Spell Checker to work with that, too. It even works with camelCase!

It’s easy to make a typo, particularly when you’re typing furiously because you’ve suddenly realized how to make something work. The Code Spell Checker extension makes sure those typos are easy to spot.

Debugger for Chrome

Frontend and mobile developers will find this extension extremely useful. If you’re a JavaScript developer in particular, Debugger for Chrome will save you tons of time hunting down bugs.

With Debugger for Chrome, you can edit your JavaScript code directly in your Chrome browser or via your application. This powerful extension will find which lines of code bugs are hiding in, so it’s easy to find what you need to fix. It’s also compatible with some remote working extensions like Remote - SSH, making it one of the top VSCode extensions you need in your life.

Change Case

One of the most annoying things to deal with as a developer is how different languages have different case requirements. You can remember which is which after a while, but if you’re new to development and trying to pick up a few different languages, it can get confusing. Not to mention a pain in the butt when you’re constantly typing things in the wrong case.

Change Case solves this by allowing you to change a word’s casing simply by highlighting it and typing a simple command. So, it doesn’t matter if you’ve accidentally used camelCase instead of constant because, with this extension, you don’t have to delete and re-type it all.

GitDuck

Of course, we couldn’t have a list of the top VSCode extensions without throwing in a cheeky bit of self-promotion. If you’re looking for the best VSCode extensions for remote work, then GitDuck has you covered.

GitDuck is a video chat tool that allows developers to talk, share their code, and collaborate on development in real-time, all directly through the IDE and independently of what IDE your team is using. That's right, you can be using VSCode and your colleagues using WebStorm.

With remote working becoming even more popular in the tech world, even before the COVID-19 pandemic, we built GitDuck so people could easily collaborate with their team. The GitDuck extension allows you to share your code in real-time with your team, so they can follow you or code with you (like Google Docs).

We also know that security is super important, even more when we are all working remotely. On GitDuck all the communication and the code-sharing sessions are P2P and encrypted, and only team members can join your calls.

Rubber Duck Debugging as a Learning Methodology

Thiago Monteiro — Thu, 31 Oct 2019 12:53:43 +0000

Rubber Duck Debugging was created to find bugs in software, but I think it's something else much more powerful. The traditional approach is that you programmed something that contains a bug that you can't identify. The methodology says that you should debug your code by reviewing it piece by piece and explaining it to a rubber duck. By going into those details, the programmer is forced to think clearly and the problems in the code arises.

If you haven't done it, it's quite simple:

Pick your rubber duck (physical or virtual).
Explain your goals and the strategy to accomplish your task.
Go through your code and explain each line and what's happening there.

By doing this process, you are able to spot the bug and fix it.

Rubber Duck Debugging as a learning methodology

Rubber duck debugging works great for developers because it's based on a powerful learning technique: Learning by teaching. This technique has been used since early 19th century and was developed in the 80s by Jean-Pol Martin. The method consists of having students teaching other students. The teaching students should prepare presentations on the topic and by doing it, they were learning faster and more effectively.

Going back to the use cases for developers, instead of using only for debugging. The technique can be used to learn a programming language or simply to learn how something programmed by other developer works. The process is the same as when you are trying to find the bug:

Describe the goals and how the task should be performed.
Explain the code line-by-line.

If you are not able to explain it, very likely you didn't understand it yet and should do a step back and try again. If you can explain everything, great! Now you fully understand it and very likely also had ideas on how to improve it.

How rubber duck debugging technique can be used in other contexts

Just like with software, you can try to teach someone (or a rubber duck) about any subject. In the process, you will gain clarity and learn about the topic faster than if you have just read about it. It will force you to think clearly and more importantly, to express yourself in a simple and clear way.

Research about the topic you would like to teach and prepare a presentation. Doesn't matter if you fail in the first try, iteration is the key. By the time you are able to explain the concept in a concise way, you are going to have mastered it. And it's time to move to the next subject.

How to design a logo (with the rubber duck methodology)

Thiago Monteiro — Thu, 10 Oct 2019 10:32:36 +0000

Designing a logo is always a magical process. What makes something memorable and beautiful? It's rare to document the full design process, with all the alternatives and errors, but as we are building a platform for developers to show how they work, we used it to record how we created our visual identity.

By the way, if you are reading this and you are a designer, you might not know the rubber duck methodology. It’s a technique that you explain a topic to a rubber duck and in the process of articulating your ideas, you can better understand the problem you are dealing with. It's a very common technique used by programmers when they need to better understand a problem in their code.

We think that’s a powerful learning method for both the person doing it or anyone watching it. We believe so much on this method, that we decided to create a platform to allow developers to easily do rubber duck debugging. This platform is called GitDuck and allows programmers to record and share their code, screen and microphone recording in one place. You can see a demo here.

We started designing our logo from a duck icon, but as our platform is generating videos, we thought would be nice to add a play button to the duck. Honestly, we didn't know if it would work.

We used GitDuck to record all our design process. Check the time-lapse of the logo creation. It's funny how fast we got to the final (kind of) version, but then we had to do a lot of fine-tuning to make the logo perfect for all situations.

This is the process we followed. We started with a duck icon, applied the brand colors, added a play button and made a lot of fine adjustments to it. In total, we worked almost 3 hours in the logo (not counting the time we were thinking about it).

The final result 👇

What do you think about it?

Check more about GitDuck at https://gitduck.com or watch some of the recent coding sessions here.

Thank you

Live coding a live coding platform

Thiago Monteiro — Sat, 28 Sep 2019 10:40:07 +0000

How do you develop a live coding platform? Well, by developing it live. :)

It’s no surprise that working remotely is growing. The benefits are great, but what about the problems that it might generate? We started working remotely one year ago while building a screen recording tool and very quickly we noticed the convenience but some real new challenges on how we were working. Basic interactions suddenly were slow and with a lot of frictions:

If I’m facing an issue with my code, how do I ask for help?
How do I know what other people are working on?
How can I learn from the people I work with?

I’m not going to talk about the benefits of working remotely, we all know you can work from any location, have a flexible schedule and no commute. I’m actually interested in the new issues faced by the people when they are working remotely.

We identified three main challenges:

Communication
Isolation
Visibility

Communication

When you are not in the same room you must be intentional about talking to others. Is not as natural as meeting someone in the coffee break and having a quick chat. It’s also hard to know what your teammates are working on. If you are just 2 or 3 people is kind of easy, but if the team is bigger you are going to lose their progress and also their struggle.

What about when you need to ask for help? We noticed that having simple technical doubts required much more time and effort to solve. This made our interactions slower and sometimes we avoided asking for help at all.

When talking to other programmers, we discovered that mentorship and onboarding a new teammate is a big challenge.

Isolation

Accountability is hard to replicate when you are not in the presence of other people. We know that this impacts people’s productivity when they are not disciplined. We also felt sometimes working without a purpose or not building a culture. Just like accountability, recreating momentum and the feeling of achieving something fades when you don’t have the standard social interactions with other people.

Visibility

We actually didn’t face this (maybe because we were just 2). However, a lot of developers that we interviewed expressed that they are worried that their efforts might not be recognized by their managers and this might affect their promotion. When we talked with the managers we could understand the other side and that they were concerned about not feeling the team and knowing how is everybody.

How to solve this?

We believe there’s going to be a space that developers can work with others as if they were in the same room. Where is easy to learn from others and store what you know in a simple format. We are building it and it’s called GitDuck.

With this platform you can stream in real-time your code linked to the video timestamps, so you can click on the code and watch the programmer working. You can see the code side-by-side with the video, so you can easily understand the full context.

To build this platform, we are working live most of the time and sharing our progress via our profiles. We internally use it for documenting all our progress, doing video code reviews and just asking for help between ourselves. You can check us at https://gitduck.com/drag0s and https://gitduck.com/thiago.

We are seeing people using it for:

Async pair programming
Recording tutorials or walkthroughs
Video code reviews and
Live coding

Check a demo https://gitduck.com/watch/5d8f348e13b7f9378ec25c36

Let me know your thoughts!

Thank you