If you are reading this, you are probably thinking about writing a video conference / chat application. Welcome to the club! I’ve been there myself, but when I started checking examples I realized most of them only supported a limited number of static peers, in most cases only two. In this post, I’ll walk you through how to manage dynamic multi-peer connections in WebRTC.

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. …


TTinyMCE is a WYSIWYG HTML editor that you can add both to your personal and commercial websites for free. The documentation on their website is straight forward and you can easily understand how to add it to your application. Built on top of the editor are plugins, some of them created by the official project, and others by the community. In any case, there are two types of plugins that you can use: Free and Premium. So, all in all, a realm of possibilities.

Having these custom plugins to add functionality to your editor is awesome, but imagine that the…


Reading this post I’m sure you’ll probably have some ideas about the benefits of using inline SVG instead of plain <img> tags that point to a local SVG file in your assets folder.

<img src="@assets/cool-icon.svg"></img>

Let’s look at this line, it’s pretty simple and everyone does it but why they shouldn’t do it? Well, if you look at your Network (using browser developer tools) tab when running your application you’ll see that for every image tag you’ll send an HTTP request to your server to retrieve this image. And this can be a serious problem because let’s imagine that you…


For me this is a tough article to write, since I don’t have a lot of expertise in this topic, but I find it very necessary because everything that I see on the web regarding ThreeJS and applied effects on images never reveals the code or that you have to know a little bit of GLSL (OpenGL Shading Language) to create some nice effects on your images.

First of all, I just want to point out that I adapted an existing project in Codepen where I integrate into a React application. …


In this article, I hope I can show you how to protect your front-end application hosted in AWS EC2 (or any server) with an SSL certificate.

One time, I was building a web application in React and an infrastructure written in Golang. After I finished the project I wanted to deploy it somewhere. For the React application, I deployed it to Netlify (which is a great tool by the way) and, surprise surprise, it already had an SSL certificate in my Netlify application, which was awesome. …


Most of the times, if you want to get started quickly with web sockets you will go to socket.io. But are there any other solutions? In this post, I’ll tell you all about an other framework, Gorilla web sockets, that I came across during a personal project.

Golang + Gorilla

At some point, I was building a web application and felt the need to have web sockets in my infrastructure. Because this was a personal project and I had some time, I thought that I could learn something new and use another framework besides socket.io. I was learning Go at the time and…


Introduction

Just like any other developer out there, I had a project idea that I wanted to build, and when I finally had the time to research technologies that I needed I came across an issue. I needed a stylish text editor that allowed me to have multiple users edit at the same time.

After some time (actually, it was the first that appeared, but it’s comprehensible, it’s super cool) I found TinyMCE. This WYSIWYG editor had a lot of free plugins, but none of them was a collaborative plugin. I found one but it was a paid plugin (more than…


Introduction

If you came across this blog post you’ll probably want to play around with cursor positions or text selections. Maybe add a new one, or just mark text highlighted after you selected text, the options are infinite (not really).

All browsers support this (even IE9+!), so don’t you be worried about this manipulation not working in your project.

Range vs Selection

The cursor position is that small vertical bar that appears in your text editor when you are writing (and what I’m seeing as I’m writing this), but for the browser, it’s a Selection, everything is a Selection even the single caret blinking…

André Marques

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store