Hi folks, Welcome to CodeMix Fun Friday Links, where you can find a lot of interesting code Developers are having fun with, we wanted to check out some of those projects and see them working using our latest CodeMix release. Here are 5 examples of things we found interesting and wanted to share them, don’t forget to stay tuned for more cool entries about interesting things Developers are doing, you may find them useful!.
Build a Voice and Video Chat App with Vue.js and CometChat
Do you want to add a reliable voice and video chat to your @vuejs application? @CometChat has got you covered. Written by yours trulyhttps://t.co/zSX16TP3Sk
— olususi k oluyemi (@yemiwebby) May 23, 2019
How great would it be to add a Voice and Video chat to your Vue projects? CometChat integrates voice, video and text into your websites, web apps and mobile apps, so if you are developing a project using Vue.js, you may find this tool helpful. First, you need to create an account on CometChat.
Once you log in and create a new project, you are given a unique APP ID and API Key, which are the credentials to your project. The CometChat API gives access to a number of helpful methods for creating calls, receiving and listening to calls, etc.
I tried it out with two instances of the CodeMix preview pane, with the app running on two windows, using the accounts we made earlier—it couldn’t be easier!
Olosusi Oluyemi made the complete guide on how to implement CometChat on Vue, check it out!
Lists as a Timeline
How can you have some fun with lists and CSS? The answer is pseudo-elements. In CSS, a pseudo-element is used to style specified parts of an element before and after it. For example, it can add icons, strings, images, etc.I really liked how the BBC News had an HTML list where the bullets were joined by a line. So I reverse engineered it and put a simple example on @CodePen if you want to do it too: https://t.co/tkRNspia0H pic.twitter.com/8Vli1KaKOq
— Peter Cooper (@peterc) May 7, 2019
We have the option to change the way lists are displayed. In this example, we get a timeline or linked elements in a list, by giving properties to the lists pseudo-elements ::before and ::after
https://twitter.com/peterc/status/1125723928490643458
Reading Client-Side Files for Validation with Vue.js
I wrote up a look at reading (and validating) client-side files with @vuejs – https://t.co/VSVIkD6RRJ
— Raymond Camden ? (@raymondcamden) May 21, 2019
When we upload a file, sometimes it would be a good idea to check the data before uploading it. Wouldn’t it be nice to show the content of a file in our browser before uploading it?
For this we are going to add the `ref` attribute to our input element, this way we can refer it on our Vue instance, and then back on our DOM, but how?
That’s where $refs comes to play.
Refs allow us to access all of the elements referenced on our Vue HTML instance and get all of the different properties they have. This allows us to read and work with them, printing them as a text field for the user to check before uploading.
This example is a good way to see how we can work with refs in Vue. Check the complete article made by Raymond Camden.
Custom Hover Effect using Custom Properties
Direction aware menu hover with CSS variables: https://t.co/zkaURzKHEe (@CodePen) pic.twitter.com/8DkpFnuijg
— Tobias Reich (@electerious) April 22, 2019
This is a great example of the versatility that CSS+Javascript can bring to the table. I created a CodeMix web project and here is the result:
Here you can see how the animation of an anchor item starts where the cursor is hovering, making it really pleasing to the eye. This is a great example of how you can use the CSS custom properties to modify components very easily.
Basically, you can add values to them and use those values in other properties elsewhere in the document, making it easier to read large files and less error-prone in case we need to change a value (just change the variable).
Using JavaScript we can modify the custom properties using style.setProperty(); as you can see here:
The results are great! I just modified the anchors’ custom properties using JS, creating this really good-looking effect. If you want to take a closer look at the code, Tobias Reich shared it on CodePen, check it out!
Creating a Full Stack Application using Angular Ivy and Nest with Nx
Nx is a set of Angular CLI power-ups for development, that lets you integrate tools that will make our projects share their components, services, utilities, etc.Your Angular, Nest and React apps can now share code. And you can develop them using the same tools.
— Victor Savkin (@victorsavkin) May 23, 2019
This is very useful because many companies use multiple frontend frameworks to build their products but share the same components, utilities or services.
Setting this up can be very challenging for companies, but that’s what NX lets us do easily.
This is all for our first entry on Fun Friday Links! we will be adding more interesting content shared by developers all over the web, feel free to leave us a Tweet or a post on our CodeMix forums if you have any ideas for our next entry, and don’t forget to download your free trial of CodeMix here!.