e6data

Server Sent Events 101: A Guide

Unity Realtime Multiplayer, Part 2: TCP, UDP, WebSocket Protocols

ইউনিটি রিয়েলটাইম মাল্টিপ্লেয়ার, পার্ট 2: টিসিপি, ইউডিপি, ওয়েবসকেট প্রোটোকল

Unity Realtime Multiplayer, Teil 2: TCP-, UDP- und WebSocket-Protokolle

Multijugador en tiempo real de Unity, Parte 2: Protocolos TCP, UDP y WebSocket

Unity Realtime Multiplayer, partie 2 : TCP, UDP, protocoles WebSocket

यूनिटी रीयलटाइम मल्टीप्लेयर, भाग 2: टीसीपी, यूडीपी, वेबसॉकेट प्रोटोकॉल

Unity リアルタイム マルチプレイヤー、パート 2: TCP、UDP、WebSocket プロトコル

Unity 실시간 멀티플레이어, 2부: TCP, UDP, WebSocket 프로토콜

Unity Realtime Multiplayer, Parte 2: Protocolos TCP, UDP, WebSocket

Unity Gerçek Zamanlı Çok Oyunculu, Bölüm 2: TCP, UDP, WebSocket Protokolleri

Unity Realtime Multiplayer, Phần 2: Giao thức TCP, UDP, WebSocket

Unity 实时多人游戏，第 2 部分：TCP、UDP、WebSocket 协议

In my last few posts, we've been taking an extended look at moderating Amazon Interactive Video Service (Amazon IVS) chat rooms. Two weeks ago, we learned how to perform , and last week we saw how to . In this post, I'd like to switch gears and talk about an interesting use case for Amazon IVS chat rooms - live, interactive whiteboards. automated chat moderation with AWS Lambda functions manually moderate chat rooms Live streaming is mostly known for entertainment-related streams like gaming or sports, but it is a perfect tool for delivering educational content too. I've blogged before about on a stream, but whiteboarding is a unique way to provide a broadcaster and the viewers with a live, interactive way to visualize and even collaborate on a given topic. The demo in this post is very basic - just a "pen" tool for freehand drawing - but it has the potential to be expanded for shapes and images, making it the perfect starting point for creating your own whiteboard experience to enhance your Amazon IVS live streams. screen sharing and overlaying canvas elements Try it Out! Before we get into how to build the whiteboard, check out how it works below. You'll need to generate a chat token for an existing Amazon IVS chat room for two unique users and enter the tokens and respective values in the two CodePen embeds. In production, you'd use one of the AWS SDKs to generate your tokens, but for this demo, you can generate them with the AWS CLI to see how it works (see for more information). user-id this post $ aws ivschat create-chat-token \
  —room-identifier [CHAT ARN] \
  —user-id "1" \
  —capabilities "SEND_MESSAGE" \
  —query "token" \
  —output text Using the CLI command above, generate and enter the token for user "1" and enter that in the first CodePen. Then, repeat the process for user "2" in the second CodePen below. If your chat room was not created in , update the value to match your chat room's region. Once both users are connected, you can draw on one canvas and observe the drawing on the other canvas. user-id us-east-1 Endpoint If you don't have any Amazon IVS chat rooms to test things out with - WHY NOT?? Just kidding, of course. Here's a gif showing it in action where you can see my amazing art skills on display: Setting Things Up For this demo, I'm collecting the user id, pen color, chat token, and chat endpoint via a . In production, you'll have a dedicated user id, and your chat token and endpoint will come from a call to a server (or serverless function). It's important to track the user id to prevent the drawing from being replicated on the of the user who is currently drawing. Here is the HTML markup for the collection form and the drawing canvas. I've removed the Bootstrap classes used in the CodePen to make the code easier to read here. <form> <canvas> <div id="settings">
  <div>Settings</div>
  <div>
    <div>
      <label for="chat-userid">Chat UserId</label>
      <div>
        <input type="text" id="chat-userid" required />
      </div>
    </div>
    <div>
      <label for="pen-color">Pen Color</label>
      <div>
        <input type="color" id="pen-color" required />
      </div>
    </div>
    <div>
      <label for="chat-token">Chat Token</label>
      <div>
        <input type="text" id="chat-token" required />
      </div>
    </div>
    <div>
      <label for="chat-endpoint">Endpoint</label>
      <div>
        <input type="text" id="chat-endpoint" required />
      </div>
    </div>
    <div>
      <div>
        <button type="button" id="submit-settings">Submit</button>
      </div>
    </div>
  </div>
</div>
<div id="whiteboard-container">
  <canvas id="whiteboard">
    Sorry, your browser does not support HTML5 canvas technology.
  </canvas>
</div> Next, I've added a listener to set a random pen color and listen for the button click. DOMContentLoaded Submit document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('pen-color').value = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  document.getElementById('submit-settings').addEventListener('click', () => {
    init();
  })
}); In the function, I set some global values for the information that we'll need later on to initialize the chat connection. In your application, you'll most likely be working with a modern JS framework and, therefore would avoid using global variables like this. init() const init = () => {
  window.chatEndpoint = document.getElementById('chat-endpoint').value;
  window.userId = document.getElementById('chat-userid').value;
  window.chatToken = document.getElementById('chat-token').value;
  window.penColor = document.getElementById('pen-color').value;
  if (!window.chatEndpoint || !window.chatToken || !window.userId) {
    alert('Chat Endpoint, Token and UserId are required!');
    return;
  }
  document.getElementById('settings').classList.add('d-none');

  // init chat connection
} Initializing a Chat Connection Now that we have the , , and , we can initialize our WebSocket connection to the Amazon IVS chat room by adding it to the function: userId chatToken chatEndpoint init() window.connection = new WebSocket(window.chatEndpoint, window.chatToken);
window.connection.addEventListener('message', (e) => {
  // todo: handle message
}); We'll populate the message handler in just a bit. For now, let's look at how to draw on the canvas. Drawing on the Canvas Before we can draw on the canvas, we'll add a bit of configuration to the canvas element to the function. init() const whiteboardContainer = document.getElementById('whiteboard-container');
const canvasEl = document.getElementById('whiteboard');
canvasEl.width = whiteboardContainer.offsetWidth;
canvasEl.height = whiteboardContainer.offsetHeight;
const ctx = canvasEl.getContext('2d');
ctx.lineWidth = 5;
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); The snippet above sets the width and height of the and sets the default background color. <canvas> Handling Mouse Events We'll add three listeners to our element: , , and . The handlers for these events will need to do two things: handle drawing on the current user's canvas, and publish an event via the WebSocket connection to other users so that the drawing can be replicated on all connected clients. <canvas> mousedown mousemove mouseup Consider using pointer events instead of mouse events ( , , and ) to make your whiteboard respond to both touch and mouse events. pointerdown pointermove pointerup canvasEl.addEventListener('mousedown', (e) => {
  window.isDrawing = true;
  const evt = { x: e.offsetX, y: e.offsetY, type: 'mousedown' };
  onMouseDown(evt);
  // queue event for publishing
});
canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };
    // queue event for publishing
    onMouseMove(evt);
  }
});
canvasEl.addEventListener('mouseup', (e) => {
  window.isDrawing = false;
  onMouseUp({});
  // queue event for publishing
}); Now let's look at each of the functions that perform the actual canvas drawing. First, which gets the context for the canvas, begins a path, and moves to the proper and coordinates. onMouseDown() 2d x y const onMouseDown = (e) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  ctx.beginPath();
  const x = e.x;
  const y = e.y;
  ctx.moveTo(x, y);
}; Next, , which draws a line to the current and . Because we set a global variable to before calling , this method will be called continuously until the event sets the flag back to false. This means that will draw a line until we release the mouse button. onMouseMove() x y isDrawing true onMouseDown() mouseup isDrawing onMouseMove() const onMouseMove = (e, color) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  const x = e.x;
  const y = e.y;
  ctx.lineTo(x, y);
  ctx.strokeStyle = color || window.penColor;
  ctx.stroke();
}; Finally, closes the path that we started in . onMouseUp() onMouseUp() const onMouseUp = (e) => {
  const canvasEl = document.getElementById('whiteboard');
  const ctx = canvasEl.getContext('2d');
  ctx.closePath();
} At this point, each connected user can draw on their local , but none of the other connected users will be able to see what they have drawn. For this, we need to publish the events via the WebSocket connection. <canvas> Publishing Drawing Events There is no guarantee for how often a mouse event will get fired, but most browsers will fire . If we look at the , we can see that we're limited to 10 transactions per second. It would be pretty easy to hit quota limits if we tried to publish every single event for all connected chat users. To workaround this, we can do do two things: send events in a batch, and only publish a sample of the events to other connected clients. mousemove quite often service quotas for Amazon IVS chat mousemove mousemove Queuing Mouse Events Let's start by looking at how we can batch the events. First, we'll set up a few global variables to manage a queue of events. window.queue = [];
window.maxQueueSize = 20; Next, we'll create a method to build up a batch of events. When the batch size is greater than our configured (or when a event is received), we'll send the current batch. handleQueue() window.maxQueueSize mouseup const handleQueue = (event) => {
  if (window.queue.length <= window.maxQueueSize) {
    window.queue.push(event);
  }
  if (window.queue.length === window.maxQueueSize || event.type == 'mouseup') {
    sendEvents();
  }
}; Publishing Mouse Events The method builds a payload containing a JSON serialized version of the event queue and sends it just like we would normally post a chat message to a chat room with . Notice the object contains a of which we can use to differentiate whiteboard messages from normal chat messages in the handler (we'll look at that handler below). sendEvents() SEND_MESSAGE Attribute type whiteboard message const sendEvents = () => {
  const payload = {
    'Action': 'SEND_MESSAGE',
    'Content': '[whiteboard event]',
    'Attributes': {
      'type': 'whiteboard',
      'color': window.penColor,
      'events': JSON.stringify(window.queue),
    }
  }
  try {
    window.connection.send(JSON.stringify(payload));
    window.queue = [];
  }
  catch (e) {
    console.error(e);
  }
} Now we can modify the event handlers to call . mouse handleQueue() canvasEl.addEventListener('mousedown', (e) => {
  window.isDrawing = true;
  const evt = { x: e.offsetX, y: e.offsetY, type: 'mousedown' };
  onMouseDown(evt);
  handleQueue(evt);
});
canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };  
  handleQueue(evt);
  onMouseMove(evt);
  }
});
canvasEl.addEventListener('mouseup', (e) => {
  window.isDrawing = false;
  onMouseUp({});
  handleQueue(evt);
}); Sampling Mouse Move Events If we were to run this application at this point, we'd probably quickly hit our service quota even though we're sending the events in batches. As mentioned above, we can sample the event to prevent this. We'll add a method and limit our call to in the handler to being called every 50-100ms. In my tests, I found this to be an acceptable range that both prevents hitting the service quota and provides a reasonably good recreation of the event sequence on the other client's . mousemove throttle() handleQueue() mousemove <canvas> window.throttlePause;

const throttle = (callback, time) => {
  if (window.throttlePause) return;
  window.throttlePause = true;
  setTimeout(() => {
    callback();
    window.throttlePause = false;
  }, time);
}; The only thing left to do to implement this sampling is to modify the handler to only queue the event every 50ms. mousemove canvasEl.addEventListener('mousemove', (e) => {
  if (window.isDrawing) {
    const evt = { x: e.offsetX, y: e.offsetY, type: 'mousemove' };
    throttle(() => {
      handleQueue(evt);
    }, 50);
    onMouseMove(evt);
  }
}); Handling Incoming Mouse Events Now that we have implemented the local drawing, and the logic to queue and publish events, we just need to add our handler for the WebSocket connection to handle the published events and recreate the drawings from other connected clients. Back inside of our function, right after we create the connection, add the following: message init() WebSocket window.connection.addEventListener('message', (e) => {
  const data = JSON.parse(e.data);
  const msgType = data.Attributes.type;

  if(msgType == 'whiteboard') {
    const events = JSON.parse(data.Attributes.events);
    const color = data.Attributes.color;
    const eventUserId = data.Sender.UserId;
    events.forEach(e => {
      const type = e.type;
      if(eventUserId != window.userId) {
        switch(type){
          case 'mousedown':
            onMouseDown({x: e.x, y: e.y});
            break;
          case 'mousemove':
            onMouseMove({x: e.x, y: e.y}, color);
            break;
          case 'mouseup':
            onMouseUp({});
            break;
        };  
      }      
    });  
  }

  // otherwise, handle as an incoming chat...
}); In the handler above, we first check the object for the key that we used when publishing the messages to differentiate these events from "normal" chat messages. If that is , we parse the JSON string which contains an array of events and loop over the array. Within the loop, we check to make sure the - the person publishing the event - is not the current . If not, we recreate the drawing operation on the local by calling the appropriate function. Attributes type type whiteboard events eventUserId userId <canvas> Potential Improvements In a production application, a whiteboard might need additional features like shapes, images, and text. To add such features, your application can utilize the same architecture that we have seen in the demo above. Improving Performance Since this demo uses JSON to publish events, the payload that we are publishing is larger than it has to be. To improve on the number of events that could be published in a single message, your application can publish events in a delimited text format and use identifiers for the events. For example, instead of a JSON array like this that publishes a payload of 94 bytes: [
  {
    "x": 100,
    "y": 100,
    "type": "mousedown"
  },
  {
    "x": 100,
    "y": 100,
    "type": "mousemove"
  },
  {
    "type": "mouseup"
  }
] You could instead format the data like this: 0,100,100|1,100,100,#ff9911|2 Enter fullscreen mode Exit fullscreen mode Here we have delimited each event with a pipe ( ) and the data within each event by a comma. The first character of the event ( , , ) represents the event type ( for a , for , and for ). The second and third characters are the and positions respectively. The fourth character, only necessary for events, is the pen color. This format results in a payload of 31 bytes - a 67% decrease in size. | 0 1 2 0 mousedown 1 mousemove 2 mouseup x y mousemove You could then handle this new payload format with this: payload = '0,100,100|1,100,100,#ff9911|2';
events = payload.split('|');
events.forEach((e) => {
  let type = e[0];
  let x = e[1];
  let y = e[2];
  let color = e[3];
  switch(type){
    case 0:
      onMouseDown({x, y});
      break;
    case 1:
      onMouseMove({x,y}, color);
      break;
    case 2:
      onMouseUp({});
      break;
  }
}) Summary In this post, we created a basic proof of concept that uses Amazon IVS chat messages to give chat developers the ability to add whiteboarding to their interactive live-streaming applications. We also discussed some potential ways to improve the application in production. If you have any questions, leave a comment or reach out to me on . Twitter Also Published Here

Using Amazon IVS Chat to Create an Interactive Whiteboard

These past few months, I challenged myself to solve a problem that many software content creators encounter — wanting to create video tutorials without the hassle of video editing. I released and deployed the project you can find (try on the desktop for the best user experience). here Inspiration There are two things software engineers constantly do — learn new programming concepts and explain their code to other people. is a developer’s best friend due to its convenience — You can view code snippets and apply them to your work. However, more detail is required than a few lines of code when a question is rather complex or esoteric. Stack Overflow Video content sites like YouTube are a bit better — they provide more context and they’re engaging to watch. But it isn’t time-efficient for creators to make short content because it takes too long to edit videos. Therefore, they make longer videos about broader topics to reach wider audiences — a nightmare for more experienced developers. Lightbulb Moment The thought arose that there needs to be a tool that provides just the right amount of context to a concept, is as detailed as an article, as engaging as a video, but isn’t a huge time cost for the creator. Feeling energized, I tasked myself to build such a thing — a browser-based IDE where users simply code as they normally would in editors like and Atom. In the background, it tracks and stores every action a user performs — writing in files, running commands, and making notes. VSCode With the click of a button, the editor generates a playback of the user’s actions which they can share on the platform for others to view and interact with. Architecture The application is structured as two micro-services: the main application and a language compilation server. I went with the classic MERN ( , , , ) stack for the main application. A non-relational database like MongoDB was perfect since the type of data stored would vary significantly based on the layout of the IDE and the code being written by a user. React is my bread and butter, and I am a huge fan of components. MongoDB Express React Node Material UI’s The code editor uses for its rich syntax highlighting. It also features a notes section with multimedia support made with and a terminal UI made with . Codemirror Quill Xterm.js The language compilation server encompasses a container running a Node server that exposes a pseudo-terminal interface using . The server is provisioned with a environment that pre-installs the required packages to compile various languages and frameworks. The IDE currently supports 14 of the most popular programming languages. Docker Node-pty NixOS The two micro-services are deployed as individual nodes in an cluster and communicate via . AWS ECS WebSockets The Magic The application’s core functionality is the ability to monitor a user’s action and create a playback as an interactive video. This is accomplished using , , and . Redux setTimeout() MediaRecorder Redux allows me to persist application state while passing information between React elements. The main application consists of two : canvas and playback. reducers The canvas reducer is responsible for storing two sets of data. The first is the layout of the IDE called the . This is a 2D array of objects where each object can be a file editor, notepad, or terminal type. These objects are rendered in the by mapping over the and displaying the objects as corresponding React elements. windowGrid UI windowGrid // The layout of the windows in the IDE.
this.windowGrid = [
        [new FileWindow(), new NoteWindow()],
        [new TerminalWindow()],
];

const getWindow = (window) => {
        let component;
        switch (window.type) {
            case constants.NOTE:
                component = (
                    <NoteWindow
                        key={window.Id}
                        id={window.Id}
                        width={calculatedColumnWidthPX}
                    />
                );
                break;
            case constants.TERMINAL:
                component = (
                    <TerminalWindow
                        key={window.Id}
                        id={window.Id}
                        height={calculatedRowHeightPX}
                        width={calculatedColumnWidthPX}
                    />
                );
                break;
            case constants.FILE:
                component = (
                    <FileWindow
                        height={calculatedRowHeightPX}
                        key={window.Id}
                        id={window.Id}
                        width={calculatedColumnWidthPX}
                        fileTabWidth={fileTabWidth}
                    />
                );
                break;
            default:
                break;
        }

        return component;
}; The second set of data stored by the canvas reducer is user input. I register custom input event listeners to each of the objects in the such that an action is dispatched to update the redux store when a user interacts with the IDE. windowGrid const fileEditorChangeHandler = (newValue) => {
    props.fileEditorContentChanged({
      windowId: props.id,
      value: newValue,
    });
}; The playback reducer also keeps track of two sets of data. The first data set is stored in the speed and position of text as it is rendered during playback. Text is displayed sequentially as it was typed. This is accomplished by keeping a timestamped record of text input and updating the state of the React component inside a call. setTimeout() const startAnimation = () => {
  if (retrievedDiff) {
    ANIMATION_WINDOW_MAP[props.id] = setTimeout(
        () => displayCharacter(),
         constants.SPEED_SETTING[props.currentSpeed].File
    );
  }
}; The second set of information stored by the playback reducer is audio metadata. With the help of MediaRecorder, a user can overlay audio onto a post. Audio data is saved as chunks, stitched into a object, and converted into an audio element when the IDE component mounts. I use to store the audio files. Blob AWS S3 initRecorder = async () => {
        navigator.getUserMedia =
            navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia;

        if (navigator.mediaDevices) {
            const s = await navigator.mediaDevices.getUserMedia({
                audio: true,
            });
            this.mediaRecorder = new MediaRecorder(s);
            this.chunks = [];
            this.mediaRecorder.ondataavailable = (e) => {
                if (e.data && e.data.size > 0) {
                    this.chunks.push(e.data);
                }
            };
            this.stream = s;
            this.mediaRecorder.addEventListener("stop", () => {
                this.setStream(null);
            });
        }
};

export const uploadAudioToS3 = async (
    postId,
    userId,
    blob,
    redirect = false
) => {
    s3.upload(
        {
            Bucket: "test",
            Body: blob,
            Key: `${userId}/${postId}.mp3`,
            ContentType: "audio/mp3",
        },
        function (err, data) {
            if (err) {
                console.log(err);
            } else if (redirect) {
                // reload and redirect to explore page.
                window.location.href = "/explore";
            }
        }
    );
}; Final Remarks We’ve become accustomed to being told what a concept is and then expected to use that knowledge and apply it to our work. However, putting beginners in the perspective of an experienced programmer facilitates a bottom-up approach to teaching, where viewers learn how and why a concept works the way it does. Why exactly this approach has not been wholly adopted can most likely be attributed to both inertia and a lack of realization of potential. The “memorize and adapt” teaching style has been predominant for so long, mainly because of its logistical simplicity. And since it has been just functional enough to output some number of knowledgeable learners, there is not a significant market push to fundamentally change the status quo. However, in recent years, companies like and a growing level of research in the area have shown that a bottom-up approach to teaching is far more effective and reaps much greater long-term gains in education. Khan Academy Want to Connect? Join the discord community to provide feedback on the project and tag along the development process. here Also published here.

How to Auto-Generate Interactive Coding Videos for Software Developers

Fetch the Right Data With Next.js and  React SSR

A while ago I created where I covered useful HTML tags and their types. This week I decided to make a sequel, reviewing some of the HTML attributes you might want to use. an article All of the attributes are easy to set up and can help you to achieve common tasks, which you would otherwise get by using some complex external libraries. In this article, I will review each attribute and include the code snippets, so it is easier for you to understand the use cases and syntax of the attributes. 1. Accept Describes which input file types are allowed. <input type="file" accept=".jpg, .png"> Only used with type of the tag.  Takes in a comma-separated list of one or more file types. To allow all files of specific media type, use . file <input> accept="image/*" 2. Autofocus Indicates that the particular element should be focused on page load. <input type="text" autofocus> Only one element in the document or dialog may have the attribute. If applied to multiple elements the first one will receive focus. autofocus 3. Inputmode Hints at the type of data that might be entered by the user while editing the element or its contents. <input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" /> This allows a browser to display an appropriate virtual keyboard. 4. Pattern Specifies a regular expression that the value is checked against on form submission. <input> <input name="username" id="username" pattern="[A-Za-z0-9]+"> 5. Required Ensures that the element must be filled out before submitting the form. <form action="/send_form.js">  
Username: <input type="text" name="username" required>  
<input type="submit">  
</form> 6. Autocomplete Specifies whether the browser has permission to provide assistance to fill out form fields like email, phone numbers, country, etc. <input name="credit-card-number" id="credit-card-number" autocomplete="off"> For the full list of available values, see . autocomplete MDN reference 7. Multiple This attribute allows the user to select multiple values. <input type="file" multiple> You can use it with and types of and the tag. file email <input> <select> 8. Download Specifies that the target will be downloaded when the user clicks on the hyperlink. <a href="document.pdf" download>Download PDF</a> 9. Contenteditable This attribute allows the user to edit the content of the element. <div contenteditable="true">
  This text can be edited by the user.
</div> 10. Readonly Specifies that an input field is read-only. <input type="text" id="sports" name="sports" value="golf" readonly> A user can still tab to it, highlight it, and copy the text from it. To forbid those actions, use the attribute, instead. disabled 11. Hidden Specifies whether or not the element is visible. <p hidden>This text is hidden</p> 12. Spellcheck Defines whether the element is checked for spelling errors. <p contenteditable="true" spellcheck="true">Myy spellinng is checkd</p> Typically, all the non-editable elements are not checked, even if the attribute is set to and the browser supports spellchecking. spellcheck true 13. Translate Specifies whether the element should be translated when the page is localized. <footer><p translate="no">Printing Works, Inc</p></footer> An example use case would be your company name, book titles, locations, etc. 14. Loading Specifies whether a browser should load an image immediately or to defer loading of off-screen images until, for example, the user scrolls near them. <img src="https://cdn.mysite.com/media/image.jpg" loading="lazy"> is the default behavior, is used to defer (aka lazy loading). eager lazy 15. Onerror Allows adding a fallback image if the original is not loaded. <img src="imageafound.png" onerror="this.onerror=null;this.src='imagenotfound.png';"/> The is used to prevent the loop if the fallback image itself is not available. this.onerror=null 16. Poster Allows adding an image to be shown while the video is downloading. <video 
src="https://cdn.mysite.com/media/video.mp4"
poster="image.png">
</video> If not specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. 17. Controls Specifies whether or not the audio/video controls should be displayed on the player. <audio controls
<source src="track11.mp3"  type="audio/mpeg">
</audio> 18. Autoplay Ensures that the audio/video will automatically start playing as soon as it is loaded. <video autoplay
src="https://cdn.mysite.com/media/myvideo.mp4"
poster="image.png">
</video> 19. Loop Specifies that the audio/video will start over again, every time it is finished. <audio loop
<source src="track323.mp3"  type="audio/mpeg">
</audio> 20. Cite Points to where the content is taken from, or change or deletion is referred. <blockquote cite="https://mysite.com/original-source-url">
  <p>Some awesome quote</p>
</blockquote> 21. Datetime Specifies the date and time when the text was deleted/inserted. <p>
  My plans for 2021 include visiting Thailand,
  <del datetime="2021-01-01T18:21">creating 6 courses,</del> 
  <ins datetime="2021-02-02T14:07">writing 12 articles.</ins>
</p>
<p>I will evaluate the completion on <time datetime="2021-12-31"></time>.</p> When used with the element, it represents a date and/or time in the machine-readable format. <time> 22. Async Ensures the script is executed asynchronously with the rest of the page. <script src="script.js" async></script> The attribute only has an effect on external scripts ( attribute must be present). async src 23. Defer Ensures the script is executed when the page has finished parsing. <script src="script.js" defer></script> The attribute only has an effect on external scripts ( attribute must be present). defer src 24. Draggable Specifies whether an element is draggable or not. <script>
const allowDrop = (e) => e.preventDefault();
const drag = (e) => e.dataTransfer.setData("text", e.target.id);
const drop = (e) => {
  var data = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(data));
}
</script>
<div ondrop="drop(event)" ondragover="allowDrop(event)" style="width:150px; height:50px; padding: 10px; border:1px solid black"></div>
<p id="drag" draggable="true" ondragstart="drag(event)">Drag me into box</p> Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , and ! Twitter LinkedIn GitHub Visit my for more articles like this. Blog Also Published Here

24 HTML Attributes You Want to Use ✨📚

In this tutorial, we are going to build a web application using and integrate it with to create a real-time dashboard based on streaming data using standard SQL. AdonisJS Materialize Materialize lets you define views you want to maintain on your data, just as you would with any SQL table, and then get the results in real-time, unlike traditional databases which frequently act as if they've never been asked that question before. Prerequisites You need to have the following things installed before getting started: Install Docker Install Docker Compose Install Node.js What is Materialize that takes data coming from sources like Kafka, PostgreSQL, S3 buckets, and more and allows you to effectively transform it in real-time using SQL. is a streaming database Materialize Unlike a traditional database, Materialize is able to incrementally maintain views on top of streaming data, providing fresh and correct results as new data arrives. This means that, instead of recomputing the view from scratch every time it needs to be updated, it only does work proportional to the changes in its inputs, so it is fast and efficient. In the context of web development, Materialize can be used as a backend to power real-time applications (as we'll see in this demo)! Running a Materialize Demo For the sake of this tutorial we are going to run the following Materialize Demo: Materialize - Log Parsing Demo The setup of the demo is the following: We would not get into too much details here, but if you have not gone through this demo before, make sure to read it! To run the demo, follow these steps: First things first, before you could run the demo, you need to clone the repository: Clone the repository: git clone https://github.com/bobbyiliev/mz-http-logs.git Once that is done, switch to the repository directory: cd mz-http-logs Then start all services: docker-compose up -d With that, you would have your Materialize instance up and running. Next we will prepare our AdonisJS installation and use AdonisJS to create our Materialize sources and views! What is AdonisJS? AdonisJS is a web framework for Node.js. It includes everything that you would need to create a fully functional web application or an API. AdonisJS has been inspired by Laravel and it has its own ORM, Auth support, and a CLI tool called Ace which is very similar to Artisan. At the end we would extend the Log parsing Materialize demo and have the following setup: Install AdonisJS Let's start by installing AdonisJS. To do so, you would need to run the following command: npm init adonis-ts-app@latest hello-materialize Once you run that, you will be asked to select a project structure. You will be able to choose between an API, Web App, and a minimal possible AdonisJS app: CUSTOMIZE PROJECT
❯ Select the project structure …  Press <ENTER> to select
  api   (Tailored for creating a REST API server)
❯ web   (Traditional web application with server-rendered templates)
  slim  (A smallest possible AdonisJS application) For this tutorial let's go with the app! Using your arrow keys select and hit enter. web web After that you will be asked to choose a name for the project, I will leave this as but feel free to choose a different name. hello-materialize I will then press enter and say yes to the rest of the settings: ❯ Enter the project name · hello-materialize
❯ Setup eslint? (y/N) · y
❯ Configure webpack encore for compiling frontend assets? (y/N) › y This will instantiate the project and might take up to a minute to complete: Once ready, you can into the new project directory: cd cd hello-materialize And then start the webserver: node ace serve --watch If you are coming from the Laravel world, this would be just like running . The CLI tool is just like and comes with a lot of the same functionalities. php artisan serve ace artisan To check all of the commands, you can run: . ace node ace Installing Lucid Lucid is the AdonisJS ORM. It is quite similar to Laravel Eloquent. Lucid comes with an Active Record ORM, Query Builder, Migrations, Seeds, and Factories. Let's go ahead and install it! To do so, just run the following command: npm i @adonisjs/lucid Once done, you would need to do a quick configuration. Configuring Lucid In order to configure Lucid, you need to run the following command: ace node ace configure @adonisjs/lucid You will be asked to select the database driver that you want to use. As Materialize is wire-compatible with PostgreSQL, you can connect to it using any driver; here, make sure to select PostgreSQL! pg ![AdonisJS lucid configuration](https://cdn.hackernoon.com/images/ckwysasxk-004-m-0-as-6-d-20-z-32-q-0.jpg) Next, you will be asked to select where you want to display the configuration instructions. I chose , which prints out the necessary environment variables that you have to add to your file. In the terminal .env Configure the Materialize env variables In order to let our AdonisJS application connect to Materialize, we need to change the details in the file. PG_* .env With your favorite text editor, open the file and update the environment variables to: .env PG_ DB_CONNECTION=pg
PG_HOST=localhost
PG_PORT=6875
PG_USER=materialize
PG_PASSWORD=
PG_DB_NAME=materialize This will allow AdonisJS to connect to Materialize just as it would when connecting to PostgreSQL. One thing to keep in mind is that Materialize doesn’t yet support the full system catalog of PostgreSQL (we're working on it!), which means that ORMs like Lucid, Prisma, Sequelize, or TypeORM might fail during some attempts to interact with Materialize. As we work to broaden coverage, the integration with these tools will gradually improve! pg_catalog Creating a Controller Let's create a controller where we will add the functionality that would allow us to connect to Materialize! As the Materialize demo is simulating an application log with a lot of visitors, let's call our AdonisJS controller : VisitorsController node ace make:controller VisitorsController This will create a controller file at: app/Controllers/Http/VisitorsController.ts Next, let's create the routes that we would need! Creating the AdonisJS routes Your routes file is stored at . In there we can specify our application URLs and map them to different controllers and methods! start/routes.ts We do not yet have the methods ready, but we know that we would need the following routes: : When visited, this route would create a Materialize /source source : When visited, this route would create a /view materialized view : This route would return an event stream with all of the latest changes to our materialized view /visitors : This will be the landing page where we will display the streaming data that we are getting from the endpoint and Materialize / /visitors Open your routes file at and update it so that it has the following content: start/routes.ts import Route from '@ioc:Adonis/Core/Route'

Route.get('/', 'VisitorsController.index')
Route.get('/visitors', 'VisitorsController.visitors')
Route.get('/source', 'VisitorsController.source')
Route.get('/view', 'VisitorsController.view') Next, let's add a method that would allow us to create a Materialize source as described in the ! Materialize Log Parsing Demo Creating a Materialize Source from logs If you were accessing Materialize directly via a SQL client (like ), in order to access data from a continuously produced log file, you would execute the following statement: psql CREATE SOURCE requests
FROM FILE '/log/requests' WITH (tail = true)
FORMAT REGEX '(?P<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) - - \[(?P<ts>[^]]+)\] "(?P<path>(?:GET /search/\?kw=(?P<search_kw>[^ ]*) HTTP/\d\.\d)|(?:GET /detail/(?P<product_detail_id>[a-zA-Z0-9]+) HTTP/\d\.\d)|(?:[^"]+))" (?P<code>\d{3}) -'; Let's see how we could do that via AdonisJS! First, open the file with your favorite text editor. app/Controllers/Http/VisitorsController.ts The file would have the following content initially: // import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class VisitorsController {} There are a few things that we would want to do: Import Lucid: import Database from '@ioc:Adonis/Lucid/Database' Then inside the VisitorsController class, let's create a method called and source // import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import Database from '@ioc:Adonis/Lucid/Database'

export default class VisitorsController {

    public async source({request, response}) {

        //Using Ludic to connect to Materialize, we are executing a CREATE SOURCE statement
        const res = await Database.rawQuery(
            `CREATE SOURCE requests
                FROM FILE '/log/requests' WITH (tail = true)
                FORMAT REGEX '(\\?P<ip>\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}) - - \[(\\?P<ts>[^]]+)\] "(\\?P<path>(\\?:GET /search/\\\?kw=(\\?P<search_kw>[^ ]*) HTTP/\d\.\d)|(\\?:GET /detail/(\\?P<product_detail_id>[a-zA-Z0-9]+) HTTP/\d\.\d)|(\\?:[^"]+))" (\\?P<code>\d{3}) -';`
            );
        return res;

    }

} Now, if you were to visit the URL via your browser ( ) it would create your Materialize source: /source http://127.0.0.1:3333/source Creating a Materialize View You may be familiar with materialized views from the world of traditional databases like PostgreSQL, which are essentially cached queries. The unique feature here is the materialized view we are about to create is automatically kept up-to-date. Let's do the same thing as before, but to create a materialized view based on our file source! To do that, let's create a method called with the following content: view Add this right after the end of the method source public async view({request, response}) {

        //Using Ludic to connect to Materialize, we are executing a CREATE VIEW statement
        const res = await Database.rawQuery(
            `CREATE OR REPLACE MATERIALIZED VIEW unique_visitors AS
             SELECT count(DISTINCT ip) FROM requests;`
            );
        return res;

    } Our materialized view would show the count of the unique visitors flowing through our demo application. To create the view, visit the URL via your browser (eg. ). /view http://127.0.0.1:3333/view With that, our view will be created and we can move on to the next step! Creating an event stream You can query the new materialized view, that we've just created, as usual with a standard statement: SELECT SELECT * FROM unique_visitors; However, in order to take full advantage of the incrementally updated materialized view right from our AdonisJS app, rather than querying Materialize with a standard to get the state of the view at a point in time, we will use a statement to request a stream of updates as the view changes. SELECT TAIL public async visitors({request, response}) {

        // First we set a header to identify that this would be an event stream
        response.response.setHeader('Content-Type',  'text/event-stream');

        // Then we declare a TAIL cursor
        await Database.rawQuery('BEGIN');
        await Database.rawQuery('DECLARE visitors_c CURSOR FOR TAIL unique_visitors');

        // Finally we use FETCH in a loop to retrieve each batch of results as soon as it is ready
        while (true) {
            const res = await Database.rawQuery('FETCH ALL visitors_c');
            response.response.write(`data: ${JSON.stringify(res.rows)}\n\n`)
        }
    } For more information about , make sure to check out the official documentation here: TAIL statement. Materialize TAIL If you were to now visit the URL via your browser, you would see the following output: /visitors Next, let's create a view where we would use the endpoint as an event source and continuously update our web page. /visitors Displaying the number of unique visitors on the frontend First, before we get started, make sure that you've executed the following command to configure Encore which is used to compile and serve the frontend assets for your AdonisJS app: node ace configure encore Then create a new file at: resources/views/visitors.edge And add the following content: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize and AdonisJS</title>
  @entryPointStyles('app')
  @entryPointScripts('app')
</head>
<body>

  <main>
    <div>
      <h1 class="title"> Hi there! </h1>
      <p class="subtitle">
        The number of unique visitors is: <strong><span id="count"></span></strong>
      </p>
    </div>
  </main>
  <script>
    var eventSource = new EventSource("http://127.0.0.1:3333/visitors");

    const count = 0;
    eventSource.onmessage = function(e) {
        const data  = JSON.parse(e.data)
        //const count = omit(data, 'mz_timestamp', 'mz_diff', 'mz_progressed')
        const { mz_diff, mz_progressed } = data;
        data.forEach(entry => {
          if(entry.mz_diff == -1){
            console.log('Old count: ' + entry.count)
          } else {
            console.log('New count: ' + entry.count)
            let countDiv = document.getElementById("count");
            countDiv.innerHTML = entry.count;
          }
        })
    };
  </script>
</body>
</html> A quick rundown of the main things to keep in mind: : First we define a new and specify our endpoint. new EventSource EventSource /visitors : Then we listen for new messages to show in the EventStream. eventSource.onmessage : After that we parse our data JSON.parse(e.data) : Finally we run a loop and update the total unique visitors counter on the page. data.forEach Now if you were to visit your AdonisJS application you would see the following output: As you can see, rather than making a huge amount of AJAX requests, we just tap into the stream and keep our web page up to date with the latest changes from Materialize! Conclusion This is pretty much it! You've now built a web application using AdonisJS that connects to Materialize and pulls the number of unique visitors from your application as new data is logged. As a next step, make sure to head over to the Materialize Docs and try out some of the available demos: Materialize Demos To learn more about AdonisJS, you can also find the documentation here: AdonisJS documentation You can find a link to the AdonisJS source code from this demo here: Streaming Data wiht Materialize and AdonisJS Demo files To learn more about Streaming SQL, make sure to check out this post here: Streaming SQL: What is it, why is it useful? Hope that this was helpful! First published here

Stream and Display Data in Realtime with Materialize and Adonis

In the “ ” article, I navigated the course for introducing a Spring Boot service that would leverage the well-established Salesforce RESTful API. The goal of this service was to act as a middleware layer; that way, clients not written in Salesforce could retrieve and update contact data stored in Salesforce. This backend service implemented its own caching layer to provide a faster response time and also cut down on the number of times Salesforce needed to be called. Leveraging Salesforce Using Spring Boot In “ ,” I introduced a simple client written in Svelte, which made it possible to update the Salesforce data using an inline editor—again, without actually using the Salesforce client. Leveraging Salesforce Using a Client Written In Svelte The “ ” article introduced a client application using the Vue.js framework to further interact with the Spring Boot service. Using Vue.js, the resulting client was not only able to read data from Salesforce but also processed and displayed updates made to the Salesforce data via a server-sent events (SSE) implementation. Leveraging Salesforce Using a Client Written In Vue.js The fourth article in the series, “ ,” introduced native mobile applications for Android and iOS devices leveraging a single source codebase written in React Native. This new client offering allowed senior executives to monitor the progress of the Salesforce data. Leveraging Salesforce Using Mobile Applications Written (Once) In React Native In this article, we will use the Angular framework to complete a new feature request. In this example, the same contact data from Salesforce will be utilized in a drop-down list to avoid having a different source of contact data. Revisiting the Example Use Case Let’s briefly recap our example use case: The Business Call Center is about to launch a major marketing campaign. However, they recently discovered that the title generated for the list of contacts was incorrect approximately 90% of the time. A team of interns has been updating contacts using the Svelte client, and the managerial team has been using the Vue.js client to monitor the updates as they occur, complete with server-sent events appearing as toast messages. Executives have been monitoring the progress using their Android and iOS devices from native clients which have been deployed. The feature team responsible for the new widget product line has realized that they too can benefit from the contact information stored in Salesforce. The following requirements have been added to the widget application: The new widget form requires a contact field. The selection options for the contact field will be a drop-down list. The source data will be a dynamic list of contacts from Salesforce. Each selection option will present the contact’s full name with their title in parentheses (if available). As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). The feature team for the widget product line is planning to start this work right away and should have everything they need based upon the results of prior work completed for this series. As a point of reference, below is a link to the Spring Boot service which has been used for this entire series: https://gitlab.com/johnjvester/salesforce-integration-service Why Angular? is a TypeScript-based web client framework that is led by and fueled by a very large open-source community. Of all the frameworks I have used in this series, Angular is certainly the largest—almost to the point where it may be better to call it a platform. Angular Google Some benefits of using Angular are noted below: Designed to handle enterprise web applications, accommodating next-generation design patterns, including . progressive web applications Continues to evolve with a dedicated open-source community. This leads to an impressive bug/resolution time frame and a large library of third-party solutions or dependencies which can be added to any modern Angular project. Supported by Google, serving as the primary web-client framework for technology powerhouses that include Gmail, Microsoft Office, PayPal, Upwork (freelance program), and Samsung. Personally, I have been involved with enterprise web applications running in both AngularJS and Angular since early 2014. While Angular is designed to handle large-scale applications, I have been equally successful in using the same framework for small and simple applications. Getting Started with Angular For this article, I decided to step outside of my comfort zone by giving version 12 of Angular a try. (As a point of reference, I last used version 9 for the fitness application I wrote for my sister-in-law in my “ ” series last year.) Using Heroku to Quickly Build a Multi-Tenant SaaS Product Since my Angular command-line interface (CLI) was still on version 9, I needed to use the following command to upgrade to version 12 of the Angular CLI: npm install -g @angular/cli First-time users can use this same command as well. Issuing an command provided me with the following results: ng version _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.0
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.0 (cli-only)
@angular-devkit/core         12.2.0 (cli-only)
@angular-devkit/schematics   12.2.0 (cli-only)
@schematics/angular          12.2.0 (cli-only) To create a new Angular 12 application, I issued the following Angular CLI command: ng new salesforce-integration-angular The Angular CLI created the application in a new folder called salesforce-integration-angular. Below is a summary of some of the command’s output: ? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
...
✔ Packages installed successfully. At this point, I used the command to show the newly created Angular application: ng serve Of course, there is not a lot there, but at least the Angular application started in a matter of seconds. Adding Some Dependencies The requirements for the widget application contained an interesting business rule. To avoid having to scroll back to the top of the page, I captured the information below: As changes are made to contacts in Salesforce, the list of contact selection options should automatically update (including the title value). This requirement translates to the widget application having to maintain the current state of the contact objects. Meaning, the contact list information always needs to be current. In the “Leveraging Salesforce Using a Client Written In Vue.js” article, the Spring Boot service was updated to broadcast SSEs as changes were made to the state of the contacts stored in Salesforce. The Angular application will also need to listen to those same SSEs. However, with the Angular application, I decided to use @ngrx/store, which is a Redux-inspired global state management for Angular applications—powered by RxJS. What this means is that I will wire the SSEs from Spring Boot to maintain the state of Salesforce contacts inside the browser. Then, the widget component can employ a reactive design to always have the latest changes—without having to make another call to the Spring Boot service. Adding the ngrx/store dependency to the Angular 12 application required a simple command: npm install @ngrx/store --save With this single dependency added to the project, I can focus on creating the widget component in Angular. Creating the Widget Component For this simple example, launching the Angular 12 application will present a new widget form. Because we’re keeping things simple, the form will look like this: The model field will be a freeform text field and the contact field will contain a dynamic list of Salesforce contacts, kept up to date via the SSE listeners communicating with NgRx. Creating a new component using the Angular CLI requires the following command: ng generate component widget The Angular CLI responds with the following status updates: CREATE src/app/widget/widget.component.css (0 bytes)
CREATE src/app/widget/widget.component.html (21 bytes)
CREATE src/app/widget/widget.component.spec.ts (626 bytes)
CREATE src/app/widget/widget.component.ts (275 bytes)
UPDATE src/app/app.module.ts (727 bytes) As a result, a widget component has been created and is ready to use in the folder of the Angular 12 application. /src/app/widget Configuring NgRx Rather than include all of the necessary information around configuring NgRx here, the following link to the NgRx website provides a great amount of detail: https://ngrx.io/guide/store#ngrxstore Part of this documentation includes the following diagram: At a high level, we’ll add the following elements to the Angular 12 application: ContactService: to make API calls to Spring Boot, allowing for us to receive contacts. EventService: to make the connection to the SSE URI running in the Spring Boot service. ContactEffect: to register event listeners and load the original contacts from the Spring Boot service. ContactAction: to describe the events that are dispatched from the ContactService. ContactReducer: to ensure the state changes are being processed. ContactSelector: to select and derive contact information from the store. WidgetComponent: to listen to the ContactAction and receive data from the ContactSelector. Let’s dive into the code and see how this looks in TypeScript. ContactService The ContactService handles making basic API calls to the Spring Boot service that has been used throughout this series. The Angular 12 client will simply make a call to the /contacts URI and return an “observable” containing a list of contact objects: export class ContactService {
  constructor(private http: HttpClient) { }

  getContacts(): Observable<Contact[]> {
    return this.http.get<Contact[]>( environment.api + '/contacts')
      .pipe(
        retry(1),
        catchError(this.handleError)
      )
  }
} EventService The EventService establishes a connection to the URI in Spring Boot which is broadcasting SSE updates. I added the method to make the connection: getServerSentEvent() getServerSentEvent(): Observable<any> {
    return Observable.create((observer: { next: (arg0: any) => void; error: (arg0: any) => void; }) => {
      const eventSource = this.setSource();
      eventSource.onmessage = event => {
        this.zone.run(() => {
          observer.next(event);
        });
      };
      eventSource.onerror = error => {
        this.zone.run(() => {
          observer.error(error);
        });
      };
    });
  } When a SSE arrives, the method is called: _onMessage() private _onMessage(e: MessageEvent): void {
    const message = JSON.parse(e.data);
    if (message) {
      this.dispatchActionInNgZone(processSseUpdate(message));
    }
  } This in turn dispatches the action into the NgZone: private dispatchActionInNgZone(action: Action): void {
    this.zone.run(() => this.store.dispatch(action));
  } ContactEffect The ContactEffect registers an event listener to the EventService, updates contacts from SSE messages that are received, and loads the original contacts from the Spring Boot service. registerEventListener$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(ContactActionTypes.AllContactsLoaded),
        tap(action => {
          this.eventListenerService.register();
        }),
        repeat()
      ),
    { dispatch: false }
  );

  updateContactFromSSE$ = createEffect(() =>
    this.actions$.pipe(
      ofType(processSseUpdate),
      map( payload => {
        const anyContact:any = (payload as any);
        const contact = (anyContact as Contact);
        const updatedAction:Update<Contact> = {
          id: contact.id,
          changes: { ...contact }
        };
        return new ContactUpdated({contact: updatedAction});
      })
    )
  );

  loadAllContacts$ = this.actions$.pipe(
      ofType<AllContactsRequested>(ContactActionTypes.AllContactsRequested),
      mergeMap(() => this.contactService.getContacts()),
      map(contacts => { new AllContactsLoaded({ contacts })} )
    ); ContactAction The ContactAction describes the events that are dispatched from the ContactService. export enum ContactActionTypes {
  AllContactsRequested = '[Contact API] All Contacts Requested',
  AllContactsLoaded = '[Contact API] All Contacts Loaded',
  ContactUpdated = '[Contact API] Contact Updated'
}

export class AllContactsRequested implements Action {
  readonly type = ContactActionTypes.AllContactsRequested;
}

export class AllContactsLoaded implements Action {
  readonly type = ContactActionTypes.AllContactsLoaded;
  constructor(public payload: { contacts: Contact[] }) { }
}

export class ContactUpdated implements Action {
  readonly type = ContactActionTypes.ContactUpdated;
  constructor(public payload: { contact: Update<Contact> }) { }
}

export type ContactActions = AllContactsRequested |  AllContactsLoaded | ContactUpdated; ContactReducer The ContactReducer makes sure the state changes are processed. export function contactReducer(state = initialContactsState, action: ContactActions): ContactsState {
  switch(action.type) {
    case ContactActionTypes.AllContactsLoaded:
      return adapter.setAll(action.payload.contacts, {...state, allContactsLoaded: true });
    case ContactActionTypes.ContactUpdated:
      return adapter.updateOne(action.payload.contact, state);
    default: {
      return state;
    }
  }
} WidgetComponent Finally, the WidgetComponent leverages all the NgRx state-management elements to provide a dynamic and self-updating list of contact information from Salesforce via the Spring Boot service and SSE URI. The method connects to the NgRx store, then receives the original list of contacts: ngOnInit() ngOnInit(): void {
    this.widget.model = "Some Model Description Goes Here";

    this.contactService.getContacts().subscribe((data) => {
      this.store.dispatch(new AllContactsLoaded({ contacts: data }));
      this.loading = false;
    });
  } With the NgRx implementation in place, updates will be processed as they are received from the Spring Boot service over the SSE URI. To make sure the Widget component is displayed when Angular starts, I reduced the app.component.html file to a single line: <widget></widget> Using the Angular Application Using ng serve from the Angular CLI, we start up the Angular 12 application with all of the above changes in place. This displays the widget form, showing the contact data from Salesforce in the drop-down list: Using the following cURL command, I updated the title for Rose Gonzales from “SVP, Procurement” to “SVP, Information Technology.” curl --location --request PATCH 'http://localhost:9999/contacts/0035e000008eXq0AAE' \
--header 'Content-Type: application/json' \
--data-raw '{
    "Title": "SVP, Information Technology"
}' The PATCH command resulted in an HTTP status code of 202 (Accepted) and returned the following payload: {
    "attributes": {
        "type": "Contact",
        "url": "/services/data/v52.0/sobjects/Contact/0035e000008eXq0AAE"
    },
    "id": "0035e000008eXq0AAE",
    "Name": "Rose Gonzalez",
    "Title": "SVP, Information Technology",
    "Department": "Procurement"
} Without making any changes to the widget form, the drop-down list options now appear like this: Notice how the contact title changed automatically for Rose Gonzalez. Conclusion Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” J. Vester In this article, I created a widgets component using Angular 12 which included a drop-down list of contacts populated with data from within the Salesforce implementation. I added NgRx state-management functionality to listen for SSE messages from Spring Boot in order to keep the list of contacts current. In this case, I leveraged the powerful NgRx state-management framework to do the work for me—requiring very few changes to the widget component at all. Similar to my experiences with Svelte, Vue.js, and React Native, the time to create a ready-to-deploy component was very fast, measured in minutes rather than hours. Just like in all of this series’ articles, we have been able to use Salesforce without actually using a Salesforce client. Of course, a production-ready scenario would require some additional work to prepare this application for “prime time” use. If you are interested in the source code used for the Angular client, simply navigate to the following repository on GitLab: https://gitlab.com/johnjvester/salesforce-integration-angular In the next article of this series, I plan to turn things 180 degrees and use Lightning Web Components (LWC) outside the Salesforce ecosystem. Have a really great day! Also published on: https://dzone.com/articles/leveraging-salesforce-using-a-client-written-in-an

How to Leverage Salesforce via a Client Written In Angular

The Eventsource interface is web content's interface to server-sent events. An Eventsource instance offers a persistent connection to an HTTP server, which sends events in text/event-stream format. Eventsources are mostly used as workflow triggers. You're adding an event source when you add a new app-based trigger to your workflow. For two reasons, event sources run as independent resources from workflows: More than one workflow can be triggered by a single event source. You can construct an event source once and use it as the trigger for each process if there is any data source that you intend to use for numerous workflows. You don't need to perform a process to consume events emitted by event sources in your own application: you can immediately receive the event data via Pipedream's REST API or a private, real-time SSE stream. The constructor returns a newly-created EventSource, which represents a remote resource.  The basic syntax of  EventSource() is given below. EventSource() eventSource = new EventSource(url, configuration); Example: evtSource = EventSource( ); eventList = .querySelector( );
evtSource.onmessage = { newElement = .createElement( );
  newElement.textContent = + e.data;
  eventList.appendChild(newElement);
}; var new 'sse.php' var document 'ul' ( ) function e var document 'li' 'message: ' How do event sources work? Data is collected from apps and services such as Github, Twitter, and Google Calendar, and then emitted as individual events via event sources. The API or SSE interfaces can be used to access these events, which trigger associated workflows. The event source employs webhooks or another mechanism for real-time data delivery if the service supports them. Google Sheets, for example, offers webhooks, which allow event sources in Google Sheets to send out updates quickly. Pipedream monitors the API for changes every few minutes if a service doesn't allow real-time event delivery, and emits events as the API generates them. We poll their API for new records added to a table because Airtable doesn't support webhooks. Creating event sources The Pipedream UI and CLI can both be used to create event sources. Using the UI to create a source To create a new event source, go to and select the New + button in the top right corner. A list of sources linked to apps (such as Twitter and Github) and generic interfaces will appear (like HTTP). https://pipedream.com/sources Select your source, and you'll be prompted to link any necessary accounts (the Twitter source, for example, requires you to provide Pipedream access to your Twitter account), as well as enter the values for any source-specific configuration options. You can use a source to trigger Pipedream workflows or consume its events using Pipedream's APIs once you've created it. Using the CLI to create a source This will open an interactive menu that will ask you to choose a source. Once you've chosen a source, you'll be prompted to link any required accounts (for example, the Twitter source requires you to provide Pipedream access to your Twitter account) and input the values for any source-specific configuration options. You can use a source to trigger Pipedream workflows or consume its events using Pipedream's APIs once you've created it. Taking in events from several sources The events for a source can be found in the source's UI, under the Events section. A Pipedream process can also be started whenever your source produces a new event. This allows you to create workflows for every new tweet, RSS feed item, and more. Finally, there are a couple of ways to consume events programmatically outside of the Pipedream platform: Using the SSE stream connected to your source in real-time. Using the CLI's pd events command in real-time. Using the REST API in batches.

A Quick Guide to EventSource or SEE

In this pandemic, a lot has changed with work culture. Something we can’t get rid of yet is . While at one of those meetings, I got curious about the and after some search came to know what our browsers are capable of (inbuilt browser APIs). Remote Meetings Google meeting platform So, I planned to develop a free simple recorder that supports Audio, Video, and Screen Recording available at http://recorder.dhruv479.dev To proceed further, you should be acquainted with some terms: The MediaRecorder interface of the provides functionality to easily record media MediaRecorder: MediaStream API ref: MDN The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen-sharing MediaDevices: ref: MDN Ok, ready to roll? let’s add some code! At first, we will write a function that intakes the stream and mimeType, collect the data chunks and then enable downloading the file on the local machine from the browser. Recording Handler: handleRecord = { recordedChunks = [];
  stopped = ; mediaRecorder = MediaRecorder(stream);

  mediaRecorder.ondataavailable = { (e.data.size > ) {
      recordedChunks.push(e.data);
    } (shouldStop === && stopped === ) {
      mediaRecorder.stop();
      stopped = ;
    }
  };
  mediaRecorder.onstop = { blob = Blob(recordedChunks, { : mimeType
    });
    recordedChunks = [] filename = .prompt( ); downloadLink.href = URL.createObjectURL(blob); downloadLink.download = ; stopRecord();
  };

  mediaRecorder.start( ); }; const ( ) function {stream, mimeType} // to collect stream chunks let false const new ( ) function e if 0 // shouldStop => forceStop by user if true false true ( ) function const new type const window 'Enter file name' // input filename from user for download // create download link for the file ` .webm` ${filename} // naming the file with user provided name 200 // here 200ms is interval of chunk collection First, create a MediaRecorder instance with the input stream. Then, add events for ondataavailable (when data comes in-stream) and onstop (when the stream stops). After chunk is available, it is pushed in the array and after the stop event, all the chunks are put together to form a specifying the mimeType. Blob Later, URL is created for the blob object and can be downloaded from the browser. Going forward, we will write a function to invoke the audio recording that further calls handleRecord with the required parameters. Audio Recorder: { mimeType = ;
  shouldStop = ; stream = navigator.mediaDevices.getUserMedia({ : });
  handleRecord({stream, mimeType})
} async ( ) function recordAudio const 'audio/webm' false const await audio true Here, we will use mediaDevices.getUserMedia to get access to resources on the user’s machine. After calling this,  we will get a prompt asking for permission in the browser and after confirmation, we can access those resources. Also, we can pass additional parameters to the constraints like audio: { echoCancellation: true } which reduces the sound echo. Similar to Audio Recording, we need to add video in the parameter of the function. Video Recorder: getUserMedia { mimeType = ;
  shouldStop = ; constraints = { : , : ,
  }; stream = navigator.mediaDevices.getUserMedia(constraints);
  handleRecord({stream, mimeType})
} async ( ) function recordVideo const 'video/webm' false const audio true video true const await After adding video constraint in getUserMedia, you will get an additional prompt to camera permission and after the confirmation, guess what, we can access the camera stream. Also, additional params can be passed to video such as: video: { width: {min: 640}, height: {min: 480}} Amongst all, this is the most interesting, as the display stream is provided by getDisplayMedia, and the audio is provided by getUserMedia. So, we need to merge different streams here if need an audio background for the screen record. Screen Recorder: { mimeType = ;
  shouldStop = ; constraints = { : }; displayStream = navigator.mediaDevices.getDisplayMedia({ : , : }); voiceStream = navigator.mediaDevices.getUserMedia({ : , : }); tracks = [...displayStream.getTracks(), ...voiceStream.getAudioTracks()] stream = MediaStream(tracks);
  handleRecord({stream, mimeType})
} async ( ) function recordScreen const 'video/webm' false const video true const await video true audio true // voiceStream for recording voice with screen recording const await audio true video false let const new We merged the different streams to create a new stream and passed it to the handleRecord function. Here also, we can add more specific constraints as per the need. Constraints passed to capture media can be more specific like resolution, echo, cursor instead of true/false. Conclusion Voila, well the JavaScript part is done 😁. We just need to add some basic HTML to invoke those functions, stop recording, and of course, download the file. Here is a reference to the complete code: https://github.com/dhruv479/recorder/blob/master/index.html Also published at https://dhruv479.medium.com/583584dd3c75

Stories, News & Mentions about E6DATA

E6data’s Stories on HackerNoon