Video chat with co-editing capabilities using Twilio Sync

Imagine that you need to create a video chat, the functionality of which should be under your control, for example, for a closed group of people with their own specific requirements. At the same time, the chat is needed yesterday, it’s too late to start writing it from scratch. In this material, the translation of which we decided to share by the start of the course about Frontend development, describes how to develop a programmable video chat based on Twilio. In this article, you will find two branches of code on Github, the first contains the basic chat framework, which will be discussed in the article, and the second contains a complete chat example.

Preparation

What you will need:

Free Twilio account. If you sign up here, you will receive $ 10 in Twilio Credits when you upgrade to a paid account.
Node.js (version 14.16.1 or higher) and npm…
Code from of this repository.

Download and run the video notebook code

To download the code, select the location on your computer where you want to work with the project. Then open a terminal window and run the following command to clone the branch start:

git clone -b start https://github.com/adjeim/video-note-collab.git

Then go to your project root and install the required dependencies by running the following commands:

cd video-note-collab
npm install

Copy the .env file for environment variables with this command:

cp .env.template .env

Then open the .env file in a code editor and replace the variable values with your credentials:

TWILIO_ACCOUNT_SID
TWILIO_SYNC_SERVICE_SID
TWILIO_API_KEY_SID
TWILIO_API_KEY_SECRET

You can find your credentials in the Twilio console, the Twilio Sync Service page, and the Twilio API Keys page. The default SID can be used as the value for the TWILIO_SYNC_SERVICE_SID variable. Now that you’ve entered your credentials, start the Express server:

npm start

If you go to http: // localhost: 3000 / in your browser, you will see a note:

Test the app by typing a few words in notepad. When you enter a space, enter key, or punctuation marks, sync starts. If you open a second browser window at http: // localhost: 3000 / and look at them at the same time, you should see that the text you enter in one window is displayed in the other:

How does this happen? This application uses Twilio Sync to sync state and data between browsers and devices in real time. Here you have a Sync document called notepad. When the page loads, a new access token is generated and passed to the Sync client. If the document exists, its content is loaded into . The application keeps track of document updates by updating the cursor position and the contents of the notebook. If you open your browser’s developer tools, you will also be able to see the changes in the content that is being written to the console.</p> <p>The idea here is similar to that of other note collaboration tools like Google Docs or Notion. With this type of application, you can, together with another person <a href="https://www.twilio.com/sync/use-cases">browse </a>the same document and edit it together in real time. Run the application – and go to the next step</p> <h3>Update the app layout</h3> <p>The first thing you need to do is update your app’s layout a bit. If you open public / index.html right now in a code editor, you will see that Tailwind CSS and Twilio Sync are already included in the project. Update the <head> element to include the Twilio Video library, as shown in the code below:</p> <pre><code class="xml"><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/sync/v2.0/twilio-sync.min.js"></script> <script src="https://sdk.twilio.com/js/video/releases/2.15.0/twilio-video.min.js"></script> <title>Video Collaboration with Notes</title> </head></code></pre> <p>Update the <body data-rsssl=1> element. First, add a </p> <form> element where the user can enter their name and click a button to join the room.</p> <pre><code class="xml"> <body class="bg-grey-100 p-10 flex flex-wrap container"> <form id='login' class="w-full max-h-20 flex items-center py-2"> <input class="appearance-none bg-transparent border-b border-green-500 mr-3 py-1 px-2 focus:outline-none" id='identity' type="text" placeholder="Enter your name..." required> <button id='joinOrLeaveRoom' class="bg-green-500 hover:bg-green-700 text-white py-1 px-4 rounded" type="submit"> Join Video Call </button> </form> <textarea id='notepad' class="h-44 w-full shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1/2"></textarea> </code></pre> <p>Replace the <textarea> element. In this project, you will disable interaction with the document and set it to a gray background color when the application is first loaded.</p> <pre><code class="xml"> </form> <textarea disabled id='notepad' class="bg-gray-200 h-140 w-6/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1/2"></textarea></code></pre> <div class='code-block code-block-4' style='margin: 8px 0; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5162050706337438" data-ad-slot="4254073304" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p>Then, just below the <textarea>, add a element to display the video of the participants:</p> <pre><code class="xml"> <textarea disabled id='notepad' class="bg-gray-200 h-140 w-6/12 shadow-lg border rounded-md p-3 sm:mx-auto sm:w-1/2"></textarea> <div id='container' class="w-5/12 bg-green-100"> <div id='participantsContainer'> <div id='localParticipant'> <div id='localVideoTrack' class="participant"></div> </div> <div id='remoteParticipants'>  </div> </div> </div> </code></pre> <p>Now that you have room in your interface to display the video of the participants, it’s time to add the code to display this video.</p> <h3>Update access token generation</h3> <p>If you open index.js in your code editor, you will see that you already have the code to provide the access token and that SyncGrant will be added to those access tokens. To use video, you will also need VideoGrant.</p> <p>Under your constant for SyncGrant, also include a constant for VideoGrant. While you’re at this piece of code, make sure your application can parse JSON from the request body using the express.json () function:</p> <pre><code class="javascript">const AccessToken = require('twilio').jwt.AccessToken; const SyncGrant = AccessToken.SyncGrant; const VideoGrant = AccessToken.VideoGrant; app.use(express.json());</code></pre> <p>Update your router to receive the token, to be asynchronous and to retrieve the user ID and video room name from the POST request. Here you will also add VideoGrant to the access token.</p> <pre><code class="javascript">app.post('/token', async (req, res) => { if (!req.body.identity || !req.body.room) { return res.status(400); } // Get the user's identity from the request const identity = req.body.identity; // Create a 'grant' identifying the Sync service instance for this app. const syncGrant = new SyncGrant({ serviceSid: process.env.TWILIO_SYNC_SERVICE_SID }); // Create a video grant const videoGrant = new VideoGrant({ room: req.body.room }) // Create an access token which we will sign and return to the client, // containing the grant we just created and specifying their identity. const token = new AccessToken( process.env.TWILIO_ACCOUNT_SID, process.env.TWILIO_API_KEY_SID, process.env.TWILIO_API_KEY_SECRET, ); token.addGrant(syncGrant); token.addGrant(videoGrant); token.identity = identity; // Serialize the token to a JWT string and include it in a JSON response res.send({ identity: identity, token: token.toJwt() }); });</code></pre> <p>Your token will now give your app users access to sync and video. Now that you’ve updated the server side of the application, it’s time to go back to the client side and display the video in the browser window.</p> <h3>Connecting and outputting video of participants</h3> <p>Go back to public / index.html in your code editor. Take a look at the code in the last <script> tag at the end of the file. You will see that when the application loads in the browser, this code gets the access token from your request for the token, then connects the sync client and refreshes notepad. To add a video to this project, you need to change this code so that the application receives a token after the user enters his name and clicks the "Join Video Call" button in the user interface. This token will then be used to connect the user to the synced notebook and video call. Just below your notepad variable, add a few more variables to make it easier to refer to other elements in your user interface: <pre><code class="javascript"><script> const notepad = document.getElementById('notepad'); const localVideoTrack = document.getElementById('localVideoTrack'); const login = document.getElementById('login'); const identityInput = document.getElementById('identity'); const joinLeaveButton = document.getElementById('joinOrLeaveRoom'); const localParticipant = document.getElementById('localParticipant'); const remoteParticipants = document.getElementById('remoteParticipants'); let connected = false; let room; let syncDocument; let twilioSyncClient;</code></pre> Now you can access different parts of the video chat, as well as track whether the local user is connected to the video call. You will also be able to track if a synced document is open with which the user can interact. To preview the video call, add the addLocalVideo function just below the list of variables you updated above: <pre><code class="javascript"> const addLocalVideo = async () => { const videoTrack = await Twilio.Video.createLocalVideoTrack(); const trackElement = videoTrack.attach(); localVideoTrack.appendChild(trackElement); };</code></pre> Call this function at the end of the file, just before the closing <script> tag:</p> <pre><code class="xml"> addLocalVideo(); </script></code></pre> <p>Then create a new function named connectOrDisconnect that will handle the event when the user clicks the Join Video Call button. If the user is not yet connected to the call, this function will connect them. If the user is already connected, this function will disconnect him. Add the following code just below the addLocalVideo function:</p> <pre><code class="javascript"> const connectOrDisconnect = async (event) => { event.preventDefault(); if (!connected) { const identity = identityInput.value; joinLeaveButton.disabled = true; joinLeaveButton.innerHTML = 'Connecting...'; try { await connect(identity); } catch (error) { console.log(error); alert('Failed to connect to video room.'); joinLeaveButton.innerHTML = 'Join Video Call'; joinLeaveButton.disabled = false; } } else { disconnect(); } };</code></pre> <p>Just before the closing <script> tag, add another event listener, this time to the login form. This listener will call connectOrDisconnect whenever the user submits the form:</p> <pre><code class="javascript"> // Add listener notepad.addEventListener('keyup', (event) => { // Define array of triggers to sync (space, enter, and punctuation) // Otherwise sync will fire every time const syncKeys = [32, 13, 8, 188, 190]; if (syncKeys.includes(event.keyCode)) { syncNotepad(twilioSyncClient); } }) login.addEventListener('submit', connectOrDisconnect);</code></pre> <p>Then replace the fetch ('/ token') block with the following connect function, which will take the id passed to the form, get the token for that user from the server, download and enable the document, and connect this local user to video chat:</p> <pre><code class="javascript"> const connect = async (identity) => { const response = await fetch('/token', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({'identity': identity, room: 'My Video Room'}) }); const data = await response.json(); const token = data.token; // Set up sync document twilioSyncClient = new Twilio.Sync.Client(token); notepad.disabled = false; notepad.classList.remove('bg-gray-200'); syncDocument = await twilioSyncClient.document('notepad'); // Load the existing Document notepad.value = syncDocument.data.content || ''; // Listen to updates on the Document syncDocument.on('updated', (event) => { // Update the cursor position let cursorStartPos = notepad.selectionStart; let cursorEndPos = notepad.selectionEnd; notepad.value = event.data.content; // Reset the cursor position notepad.selectionEnd = cursorEndPos; console.log('Received Document update event. New value:', event.data.content); }) // Set up the video room room = await Twilio.Video.connect(token); const identityDiv = document.createElement('div'); identityDiv.setAttribute('class', 'identity'); identityDiv.innerHTML = identity; localParticipant.appendChild(identityDiv); room.participants.forEach(participantConnected); room.on('participantConnected', participantConnected); room.on('participantDisconnected', participantDisconnected); connected = true; joinLeaveButton.innerHTML = 'Leave Video Call'; joinLeaveButton.disabled = false; identityInput.style.display = 'none'; }; </code></pre> <p>As soon as the local participant joins the call, this video room will be assigned a global variable for room. The local user's video will be displayed in the user interface, and event listeners will track when other participants join or leave the video meeting. The “Join Video Call” button will also change to “Leave Video Call” and the input field for the name will be hidden. Now that you've added the connect function, add the disconnect function just below:</p> <pre><code class="javascript">const disconnect = () => { room.disconnect(); let removeParticipants = remoteParticipants.getElementsByClassName('participant'); while (removeParticipants[0]) { remoteParticipants.removeChild(removeParticipants[0]); } joinLeaveButton.innerHTML = 'Join Video Call'; connected = false; identityInput.style.display = 'inline-block'; localParticipant.removeChild(localParticipant.lastElementChild); syncDocument.close(); twilioSyncClient = null; notepad.value=""; notepad.disabled = true; notepad.classList.add('bg-gray-200'); }; </code></pre> <p>The disconnect function will handle a participant disconnecting from a video call when they press the Leave Video Call button. It will also go through other video call participants and remove video from the user interface for the disconnected participant. The connection status is set back to false, the username input field appears again, and the Leave Video Call button changes to Join Video Call. In addition, the notebook will be cleared and disconnected for the local participant, as soon as someone disconnects from the video call, they will also be disconnected from the shared notebook.</p> <p>Next, you'll want to work with what happens when remote participants join or disconnect from a call. Start by adding the ParticipantConnected function, which will create a new for the connected participant, showing the participant's username as their id and attaching their video and audio tracks to the if the local participant is following them.</p> <p>This function also creates event handlers to manage subscription actions related to participants' audio and video tracks. If a remote participant disconnects his audio or video stream, you want to be able to react to this event and, if necessary, connect or disconnect these tracks. Add a participantConnected function just below your shutdown function in public / index.html:</p> <pre><code class="javascript"> const participantConnected = (participant) => { const participantDiv = document.createElement('div'); participantDiv.setAttribute('id', participant.sid); participantDiv.setAttribute('class', 'participant'); const tracksDiv = document.createElement('div'); participantDiv.appendChild(tracksDiv); const identityDiv = document.createElement('div'); identityDiv.setAttribute('class', 'identity'); identityDiv.innerHTML = participant.identity; participantDiv.appendChild(identityDiv); remoteParticipants.appendChild(participantDiv); participant.tracks.forEach(publication => { if (publication.isSubscribed) { trackSubscribed(tracksDiv, publication.track); } }); participant.on('trackSubscribed', track => trackSubscribed(tracksDiv, track)); participant.on('trackUnsubscribed', trackUnsubscribed); }; </code></pre> <p>It's time to add the ParticipantDisconnected feature for a situation where a remote participant leaves a video call. This is a function that finds a member by their sid (unique identifier) and removes their div from the DOM. Add a participantDisconnected function just below your ParticipantConnected function:</p> <pre><code class="javascript"> const participantDisconnected = (participant) => { document.getElementById(participant.sid).remove(); };</code></pre> <p>Now let's add the code for the situation when the local participant subscribes to or unsubscribes from the audio or video tracks of the remote participant. Add the following trackSubscribed and trackUnsubscribed functions to public / index.html just below your code for participantDisconnected:</p> <pre><code class="javascript"> const trackSubscribed = (div, track) => { const trackElement = track.attach(); div.appendChild(trackElement); }; const trackUnsubscribed = (track) => { track.detach().forEach(element => { element.remove() }); };</code></pre> <p>You have all the code for the project. Now let's test the video notebook.</p> <h3>Testing your application</h3> <p>Go to http: // localhost: 3000 /. You should see a site similar to the one below, with a notepad on the left and a local member video stream on the right:</p> <figure class="full-width "><img loading="lazy" decoding="async" src="https://habrastorage.org/getpro/habr/upload_files/b98/7bb/3b8/b987bb3b8edc182bce23a4c21b99008c.png" width="800" height="628"><figcaption></figcaption></figure> <p>Enter your name in the input field and click "Join Video Call". You will see your name below the video. You can try typing in notepad if you like. Open another browser tab at http: // localhost: 3000 / and join the video call under a different name. Once you do that, you will see two images, which means you can chat with each other and share your notebook:</p> <figure class="full-width "><img loading="lazy" decoding="async" src="https://habrastorage.org/getpro/habr/upload_files/ce6/882/2dc/ce68822dc1fd2b564878637d854cdc48.png" width="800" height="638"><figcaption></figcaption></figure> <p>If you enter text into notepad in one tab and then switch to another, you will see that the text between them is in sync.</p> <h3>What's next for the note collaboration tool?</h3> <p>This notebook has many options, from collaborating on a written project to taking notes together during a video meeting. To see all the code, go to the master branch of this <a href="https://github.com/adjeim/video-note-collab">repository</a> GitHub.</p> <p>It's so easy today to create a video chat on the web. This means that the web, due to its universality, continues to evolve and, of course, it has long ceased to be just hypertext - a convenience for reading scientific publications, as it was at the dawn of its history. If you do not want to stay away from the development of web technologies, then you can pay attention to our course on <a href="https://skillfactory.ru/frontend?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_FR&utm_term=regular&utm_content=300621">Frontend development</a>, and if you do not want to be limited to the front-end and have a desire to understand the network more smoothly, then you can take a closer look at our course on <a href="https://skillfactory.ru/python-fullstack-web-developer?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_FPW&utm_term=regular&utm_content=300621">Fullstack development</a> in Python, where students receive all the practical and theoretical knowledge necessary to start a developer career in this language.</p> <figure class="full-width "><img loading="lazy" decoding="async" src="https://habrastorage.org/getpro/habr/upload_files/8f9/fdc/3f8/8f9fdc3f8dfad3a664d2e2fc28b8ba8d.png" width="1000" height="200"><figcaption></figcaption></figure> <p><a href="https://skillfactory.ru/courses/?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_ALLCOURSES&utm_term=regular&utm_content=300621">find out</a>how to level up in other specialties or master them from scratch:</p> <ul> <li> <p><a href="https://skillfactory.ru/dstpro?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_DSPR&utm_term=regular&utm_content=300621">Data Scientist Profession</a></p> </li> <li> <p><a href="https://skillfactory.ru/dataanalystpro?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_DAPR&utm_term=regular&utm_content=300621">Data Analyst profession</a></p> </li> <li> <p><a href="https://skillfactory.ru/dataengineer?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_DEA&utm_term=regular&utm_content=300621">Data Engineering Course</a></p> </li> </ul> <details class="spoiler"> <summary>Other professions and courses</summary> <div class="spoiler__content"> <p><strong>PROFESSION</strong></p> <ul> <li> <p> <a href="https://skillfactory.ru/python-fullstack-web-developer?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_FPW&utm_term=regular&utm_content=300621">A Fullstack Python Developer Profession</a></p> </li> <li> <p> <a href="https://skillfactory.ru/java?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_JAVA&utm_term=regular&utm_content=300621">Java developer profession</a></p> </li> <li> <p> <a href="https://skillfactory.ru/java-qa-engineer?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_QAJA&utm_term=regular&utm_content=300621">JAVA QA engineer</a></p> </li> <li> <p> <a href="https://skillfactory.ru/frontend?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_FR&utm_term=regular&utm_content=300621">Frontend developer profession</a></p> </li> <li> <p> <a href="https://skillfactory.ru/cybersecurity?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_HACKER&utm_term=regular&utm_content=300621">Profession Ethical hacker</a></p> </li> <li> <p> <a href="https://skillfactory.ru/cplus?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_CPLUS&utm_term=regular&utm_content=300621">C ++ developer profession</a></p> </li> <li> <p> <a href="https://skillfactory.ru/game-dev?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_GAMEDEV&utm_term=regular&utm_content=300621">Profession Unity Game Developer</a></p> </li> <li> <p> <a href="https://skillfactory.ru/webdev?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_WEBDEV&utm_term=regular&utm_content=300621">Profession Web developer</a></p> </li> <li> <p> <a href="https://skillfactory.ru/iosdev?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_IOSDEV&utm_term=regular&utm_content=300621">The profession of iOS developer from scratch</a></p> </li> <li> <p> <a href="https://skillfactory.ru/android?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_ANDR&utm_term=regular&utm_content=300621">Profession Android developer from scratch</a></p> </li> </ul> <p><strong>COURSES</strong></p> <ul> <li> <p> <a href="https://skillfactory.ru/ml-programma-machine-learning-online?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_ML&utm_term=regular&utm_content=300621">Machine Learning Course</a></p> </li> <li> <p> <a href="https://skillfactory.ru/ml-and-dl?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_MLDL&utm_term=regular&utm_content=300621">Course "Machine Learning and Deep Learning"</a></p> </li> <li> <p> <a href="https://skillfactory.ru/math-stat-for-ds#syllabus?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_MAT&utm_term=regular&utm_content=300621">Course "Mathematics for Data Science"</a></p> </li> <li> <p> <a href="https://skillfactory.ru/math_and_ml?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_MATML&utm_term=regular&utm_content=300621">Course "Mathematics and Machine Learning for Data Science"</a></p> </li> <li> <p> <a href="https://skillfactory.ru/python-for-web-developers?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_PWS&utm_term=regular&utm_content=300621">Python for Web Development Course</a></p> </li> <li> <p> <a href="https://skillfactory.ru/algo?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_algo&utm_term=regular&utm_content=300621">Course "Algorithms and Data Structures"</a></p> </li> <li> <p> <a href="https://skillfactory.ru/analytics?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_SDA&utm_term=regular&utm_content=300621">Data Analytics Course</a></p> </li> <li> <p> <a href="https://skillfactory.ru/devops?utm_source=infopartners&utm_medium=habr&utm_campaign=habr_DEVOPS&utm_term=regular&utm_content=300621">DevOps course</a></p> </li> </ul> </details> <div class='code-block code-block-3' style='margin: 8px 0; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5162050706337438" data-ad-slot="1578248008"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>  </div> <footer class="entry-footer"> </footer> </div> </article> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://prog.world/startups-for-medicine-russian-projects/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Previous</title><path d="M28 12.5v3c0 0.281-0.219 0.5-0.5 0.5h-19.5v3.5c0 0.203-0.109 0.375-0.297 0.453s-0.391 0.047-0.547-0.078l-6-5.469c-0.094-0.094-0.156-0.219-0.156-0.359v0c0-0.141 0.063-0.281 0.156-0.375l6-5.531c0.156-0.141 0.359-0.172 0.547-0.094 0.172 0.078 0.297 0.25 0.297 0.453v3.5h19.5c0.281 0 0.5 0.219 0.5 0.5z"></path> </svg></span>Previous</small></div>Startups for medicine: Russian projects</a></div><div class="nav-next"><a href="https://prog.world/ergolux-lamp-from-the-traffic-light-store-worse-than-ever/" rel="next"><div class="post-navigation-sub"><small>Next<span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-right-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28"><title>Continue</title><path d="M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z"></path> </svg></span></small></div>Ergolux lamp from the Traffic light store: worse than ever</a></div></div> </nav><link rel='stylesheet' id='kadence-related-posts-css' href='https://prog.world/wp-content/themes/kadence/assets/css/related-posts.min.css' media='all' /> <link rel='stylesheet' id='kad-splide-css' href='https://prog.world/wp-content/themes/kadence/assets/css/kadence-splide.min.css' media='all' /> <div class="entry-related alignfull entry-related-style-wide"> <div class="entry-related-inner content-container site-container"> <div class="entry-related-inner-content alignwide"> <h2 class="entry-related-title">Similar Posts</h2> <div class="entry-related-carousel kadence-slide-init splide" data-columns-xxl="3" data-columns-xl="3" data-columns-md="3" data-columns-sm="2" data-columns-xs="2" data-columns-ss="1" data-slider-anim-speed="400" data-slider-scroll="1" data-slider-dots="true" data-slider-arrows="true" data-slider-hover-pause="false" data-slider-auto="false" data-slider-speed="7000" data-slider-gutter="40" data-slider-loop="true" data-slider-next-label="Next" data-slider-slide-label="Posts" data-slider-prev-label="Previous"> <div class="splide__track"> <div class="splide__list grid-cols grid-sm-col-2 grid-lg-col-3"> <div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-13238 post type-post status-publish format-standard has-post-thumbnail hentry category-computer_techologies"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://prog.world/sourcing-evolution/"> <div class="post-thumbnail-inner"> <img width="768" height="432" src="https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb-768x432." class="attachment-medium_large size-medium_large wp-post-image" alt="Sourcing evolution" decoding="async" loading="lazy" srcset="https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb-768x432. 768w, https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb-300x169. 300w, https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb-360x203. 360w, https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb-545x307. 545w, https://prog.world/wp-content/uploads/2020/11/00efe4696ace46ed5f688a6a81120cbb 780w" sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/sourcing-evolution/" rel="bookmark">Sourcing evolution</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-50175 post type-post status-publish format-standard has-post-thumbnail hentry category-computer_techologies"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://prog.world/about-hiring-view-from-there/"> <div class="post-thumbnail-inner"> <img width="768" height="403" src="https://prog.world/wp-content/uploads/2024/03/558d723aa1bffcd285ef7273e15a16e8-768x403.png" class="attachment-medium_large size-medium_large wp-post-image" alt="About hiring. View from there" decoding="async" loading="lazy" srcset="https://prog.world/wp-content/uploads/2024/03/558d723aa1bffcd285ef7273e15a16e8-768x403.png 768w, https://prog.world/wp-content/uploads/2024/03/558d723aa1bffcd285ef7273e15a16e8-300x158.png 300w, https://prog.world/wp-content/uploads/2024/03/558d723aa1bffcd285ef7273e15a16e8-1024x538.png 1024w, https://prog.world/wp-content/uploads/2024/03/558d723aa1bffcd285ef7273e15a16e8.png 1200w" sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/about-hiring-view-from-there/" rel="bookmark">About hiring. View from there</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-11460 post type-post status-publish format-standard has-post-thumbnail hentry category-computer_techologies"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://prog.world/use-after-free-vulnerability/"> <div class="post-thumbnail-inner"> <img width="768" height="432" src="https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a-768x432.png" class="attachment-medium_large size-medium_large wp-post-image" alt="Use-After-Free vulnerability" decoding="async" loading="lazy" srcset="https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a-768x432.png 768w, https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a-300x169.png 300w, https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a-360x203.png 360w, https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a-545x307.png 545w, https://prog.world/wp-content/uploads/2020/08/9qpnybfuid_xl_7kgno1wtivq3a.png 780w" sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/use-after-free-vulnerability/" rel="bookmark">Use-After-Free vulnerability</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-53905 post type-post status-publish format-standard has-post-thumbnail hentry category-computer_techologies"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://prog.world/why-do-solidity-developers-need-the-basics-of-computer-science/"> <div class="post-thumbnail-inner"> <img width="768" height="433" src="https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b-768x433.png" class="attachment-medium_large size-medium_large wp-post-image" alt="Why do Solidity developers need the basics of computer science?" decoding="async" loading="lazy" srcset="https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b-768x433.png 768w, https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b-300x169.png 300w, https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b-1024x577.png 1024w, https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b-1536x865.png 1536w, https://prog.world/wp-content/uploads/2024/04/cf021064471c26e436c803523f6db15b.png 1784w" sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/why-do-solidity-developers-need-the-basics-of-computer-science/" rel="bookmark">Why do Solidity developers need the basics of computer science?</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-15499 post type-post status-publish format-standard hentry category-computer_techologies"> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/meet-wse-2-7nm-processor-with-850-thousand-cores-and-15-kw-power-consumption/" rel="bookmark">Meet WSE-2: 7nm processor with 850 thousand cores and 15 kW power consumption</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div><div class="carousel-item splide__slide"> <article class="entry content-bg loop-entry post-6011 post type-post status-publish format-standard has-post-thumbnail hentry category-computer_techologies"> <a class="post-thumbnail kadence-thumbnail-ratio-2-3" href="https://prog.world/how-we-at-tsian-tamed-terabytes-of-logs/"> <div class="post-thumbnail-inner"> <img width="768" height="403" src="https://prog.world/wp-content/uploads/2019/12/_-768x403." class="attachment-medium_large size-medium_large wp-post-image" alt="How we at TsIAN tamed terabytes of logs" decoding="async" loading="lazy" srcset="https://prog.world/wp-content/uploads/2019/12/_-768x403. 768w, https://prog.world/wp-content/uploads/2019/12/_-300x158. 300w, https://prog.world/wp-content/uploads/2019/12/_-1024x538. 1024w, https://prog.world/wp-content/uploads/2019/12/_-360x189. 360w, https://prog.world/wp-content/uploads/2019/12/_-545x286. 545w, https://prog.world/wp-content/uploads/2019/12/_ 1200w" sizes="(max-width: 768px) 100vw, 768px" /> </div> </a> <div class="entry-content-wrap"> <header class="entry-header"> <h3 class="entry-title"><a href="https://prog.world/how-we-at-tsian-tamed-terabytes-of-logs/" rel="bookmark">How we at TsIAN tamed terabytes of logs</a></h3></header> <footer class="entry-footer"> </footer> </div> </article> </div> </div> </div> </div> </div> </div> </div> <link rel='stylesheet' id='kadence-comments-css' href='https://prog.world/wp-content/themes/kadence/assets/css/comments.min.css' media='all' /> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/video-chat-with-co-editing-capabilities-using-twilio-sync/?amp#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://prog.world/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment comment-form-float-label"><textarea id="comment" name="comment" placeholder="Leave a comment..." cols="45" rows="8" maxlength="65525" aria-required="true" required="required">Comment *

Name *

Email *