Mauricio Valenzuela
I'm an IT Engineer who loves Music, Videogames and Memes.
Posted on Jul 12th 2019

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

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.

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


Props to Geoff Graham and Peter Cooper for this little reverse engineering project based on what the BBC News uses as a widget for timelines on their website!

Reading Client-Side Files for Validation with Vue.js

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

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.

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.


In this gif, we can see how the component “happynrwl-greeting” is being used in both the React and the Angular app. You can check out the whole tutorial and learn more about NX on this entry by Victor Savkin, co-founder of Nrwl, definitely an interesting technology to check out!

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!.