WebRTC

I am working on a project at Hack Reactor that is giving me an introduction to the WebRTC framework. For those not yet in the know, WebRTC is a tool released by Google a few years ago that allows users to communicate in real-time via the browser (RTC = Real-Time Communication). One of the simplest tasks that can be accomplished with this technology is a browser-based chat application, but the advantages truly shine through with use cases involving audio and video communication.

WebRTC has built-in functionality to access a user’s camera and microphone through the browser. It also provides peer-to-peer connection functionality and audio+video calling. By going through the provided examples, my team was able to easily implement a basic video chat application for two individuals to communicate through the browser. No plugins were necessary, and all the user had to do was to “allow” their camera to be used when prompted by the browser.

In order to connect using WebRTC, two peers need to know one another’s information about their network connections, or ICE (Interactive Connectivity Establishment) candidates. This is how the peers know how to communicate, which will take place over a STUN (Session Traversal Utilities for NAT) or TURN (Traversal Using Relays around NAT) server. More information about this process can be found here.

Advertisements

Limit characters displayed in text with Angular

Our goal is to limit the amount of characters shown in a block of text using angular. In the aim of brevity and simplicity, let’s assume that we have a large chunk of text in a model called ‘text’, and we only want to show 150 characters at a time, with the option to expand our view to see the entire block of text. If we were to include the text without any limit, it would look like this:

{{text}}

To display only the first 150 characters, the code changes as follows:

{{text | limitTo: 150}}

That’s simple enough. But, now we have no way to view the rest of our text. To do so, we are going to need to initialize a limit value in an outer element so that we can later modify it:

<div ng-init="limit = 150">
    {{text | limitTo: limit}}
</div>

If the length of the text is greater than the limit (meaning we have cut off some text), we want to add an option to show more text:

<div ng-init="limit = 150; moreShown = false">
    {{text | limitTo: limit}}
    <a ng-show="text.length > limit"
       href ng-click="limit=text.length; moreShown = true">  More
    </a>
</div>

Here, we are also initializing a variable that will track whether or not our full block of text is displayed. If the length of the text is over the limit, ng-show will active and the href displaying a clickable “More” will appear. On click, the limit will be set to the length of the text so that the entire block is displayed, and moreShown will correctly track the change to say that all the text is displayed.

Now, maybe we would like an option to shorten our text once again. We can use a similar sort of logic to add a “Less” href- just add the following code to the above:

<a ng-show="moreShown" href ng-click="limit=150; moreShown = false"> Less </a>

The ng-show will trigger if we have the full amount of text displayed, and on click, the text limit will go back down to 150, with moreShown getting set back to false.

Finally, we can throw in some logic to add an ellipses for concatenated text; our final code will look as follows:

<div ng-init="limit = 150; moreShown = false">
    {{text | limitTo: limit}}{{text.length > limit ? '...' : ''}}
    <a ng-show="text.length > limit"
      href ng-click="limit=text.length; moreShown = true">  More
    </a>
    <a ng-show="moreShown" href ng-click="limit=150; moreShown =    false"> Less </a>
</div>

Basic HTML Tricks: Inline Text Elements, Artificial Line Breaks, and Buttons

I have encountered a handful of instances while programming where I need to create some HTML for a page, but it does not need to be a finished product. I am not yet concerned with obtaining a polished look using CSS or various libraries (or perhaps I will never be concerned about this). We are a beginner web developers just looking to get something functional on the page, to be improved later. For some quick and dirty HTML edits, look no further than the following:

One of the questions that would once plague me was: How can I make my text appear on the same line as this other text/link/element? The <p>, <h1>, <div> are all tags that I can insert text into, but each of these will put my text element on a separate line. The solution is the <span> tag, which can be used to quickly add an inline text element. Sure enough, <div>Hello </div><div>World</div> shows up differently than <span>Hello </span><span>World</span>.

Another simple HTML trick has the opposite effect: the <br> tag. Simply throw this tag into your HTML to create a line break. Later on, you’ll probably be using margins and padding to alter your spacing, but for now, a quick little <br> tag should make your primitive HTML page easier on the eyes. Try altering our <span> setup from above for a nice visual example: <span>Hello </span><br><br><span>World</span>.

Finally, a very useful HTML element is the button. Even if this button won’t make it into the final iteration of your product, it can be very useful for testing some sort of user input functionality to be added later. Here is a quick example: <button id=”hello”>Hello World</button>. Here, the text within the button is “Hello World”. I’ve also included an id; this is generally a good idea so that your button can be specifically referred to by id later, particularly if there are more buttons that will be added.