DEV Community: Super Diana

Build an Angular & Amazon IVS player app in less than 15 minutes!! - Part 2: Create and stream to a channel!

Super Diana — Fri, 30 Jul 2021 14:26:53 +0000

Intro ⭐️

Video & Streaming don't have to be complicated for the web anymore! In part 1 of this tutorial, we built an Angular app using Amazon IVS & Video.js in less than 15 minutes. Now it's time to create a channel, point our stream to that channel, test it live, and continue creating!

Amazon IVS (Amazon Interactive Video Service) is a fully managed live streaming solution: simply stream to Amazon IVS, and the service does everything you need to make low-latency live video available to any viewer around the globe. Amazon IVS handles the ingestion, transcoding, packaging, and delivery of your live content, using the same battle-tested technology that powers Twitch.

For more information on Amazon IVS, check https://ivs.rocks

Part 1 of this tutorial: https://dev.to/amazonivs/build-an-angular-amazon-ivs-player-app-in-less-than-15-minutes-2668

Hands on! 👊🏼

⚡️ Pre-requisites:

Build your player app in 15 minutes with Part 1 of this tutorial
AWS Account:(Click to create your account!)
OBS (Open Broadcaster Software):(download here)

Create Live Streaming Channel 📽

In this step, you will create a live streaming channel using Amazon Interactive Video Service.

On the AWS console, navigate to Interactive Video Service via this link

Click on "Create Channel"
In the create channel > set up section, type your channel name (i.e 'ngivs-channel'). Under Channel configuration, choose "Default". You can customise options as you find appropriate but default options are set for HD video and ultra-low latency!. You can also auto-record your stream to an S3 bucket and serve those assets as VOD, but for now we won't enable this option.
This is the result after creating a channel!, note that once a channel is created it has a unique ARN in case you need API Access for other features we will cover in future issues of this tutorial.
On the same page you can see under Stream Configuration and Playback Configuration important information we will use to point our stream to and include our video source in our player app.

🎉 HOORAY! A channel has been created... let the streaming begin! 🎉

Stream Using OBS

Open OBS, click on "Settings" and select Stream. Set Service as Custom. Copy/paste the Ingest server to the "Server", and copy/paste the Stream key to "Stream Key".

Click on "Video", and configure the output video bitstream’s resolution and frame rate. In this example, they are set to 480p30 (852x480). For testing purposes, this is the recommended setting for a smooth stream with minimal bandwidth and processing power consumption on your computer).

And last, click on "Output". On "Ouput Mode" select "Advanced", then set the following parameters: (don't forget to click "OK" to save your settings!) - These settings are exclusively for testing purposes and to make sure we use bare minimum resources.- For more information on streaming configurations check the official documentation
- Encoder: x264
- Rate Control: CBR
- Bitrate: 2000 (or lower)
- Keyframe Interval: 2
- CPU Usage Preset: veryfast
- Tune: zerolatency

Almost there!!. Our last step is to add our camera as a source for this test!

On your OBS main window, in "Sources", click "+" to add the following sources:
- Video Capture Device: your web cam.
- Browser: Add https://www.clocktab.com/, which will be used to measure the end-to-end latency. Drag and resize to place it where you find appropriate.

It's time to click on "Start Streaming"!!!

Let's open the angular app project created with the previous tutorial and modify the player source in our application default component to add our own streaming channel.

In order to do that let's edit app.component.html,

<vjs-ivs-player
  [options]="options"
  [appChanEndpoint]="'[INSERT YOUR PLAYBACK URL HERE]"
></vjs-ivs-player>

And Voila!

🌟 For the next part of this tutorial we will enable playback authorisation on our IVS channel. This allows us to create private channels, and only viewers with a valid playback token can watch our channel.

Announcement: Amazon IVS is on Discord!

Super Diana — Tue, 27 Jul 2021 03:18:02 +0000

Dear community, 🎊

We are happy to announce our Discord server, and we welcome all of you! This is a place to share your experience, ideas, solutions and interact with fellow developers and us too!.

There are SO MANY exciting things coming up for our community!. We want you to be part of all the great features and special announcements we have coming up.

Join us in this new adventure! Let's have a chat!

See you there!

The Amazon IVS Developer Relations Team ⭐️

Announcing ScoutX Mobile: An emergency notification app for Diabetics

Super Diana — Thu, 08 Jul 2021 04:15:32 +0000

This is a milestone for me. It's huge. Today I won't write from the technical perspective. Today I am writing as a type 1 diabetic feeling proud of a tool that can save lives as it has saved mine.

Over a year ago i released the ScoutX project. It is comprised of:

A Flask application where users can input their Nightscout entries endpoint. This app is constantly listening for values and when these are above or below range it fires and alert and calls the diabetic patient first, to alert them of irregular values. Should the patient not answer the call, an alert is sent to their trusted contacts to notify of irregular values.
A WisBlock + Helium (IoT + LoRaWan) tracker to send data to nightscout and provide GPS precise location, so emergency contacts can receive notifications with location in case of values being above or beyond the urgent high/low blood glucose levels without depending on a mobile connection.

Today, I am proudly releasing a mobile app built on Ionic & Angular that gets blood sugar data from Nightscout and adds geolocation so if values go into urgent low/high levels, alerts can be sent to emergency contacts.

You can check the repository here: https://github.com/alphacentauri82/scoutx-mobile

I know many, like me will feel safer. I can imagine parents feeling more relieved and I as a type 1 diabetic know that if anything happens, my relatives and friends who i trust will be notified and know to reach out to emergency services if necessary.

There are MANY more features to add. More ways to expand connectivity even with the IoT component of this project. This is only the beginning and I know many of you will be able to contribute with your expertise, your ideas and everything you can bring to the table to use your and our superpowers in tech for good.

I want to thank Josue Gutierrez, Jorge Cano, Salma Alam-Naylor and Natalia Venditto for all your support and help. Thank you for helping me make this project possible!

Also those who were with me from the very beginning of the ScoutX project: Maria Hernandez, Rak Wireless, Helium, Melvin Vega, Vikas Malepati and The Nightscout Foundation.

I know this is a step forward and that with more visibility and contributions from fellow developers we will make a huge difference for Diabetics around the world.

Tutorials are coming soon! ⭐️

Build an Angular & Amazon IVS player app in less than 15 minutes!!

Super Diana — Tue, 06 Jul 2021 13:26:58 +0000

Intro ⭐️

Video & Streaming don't have to be complicated for the web anymore! in this tutorial we will build an Angular app using Amazon IVS & Video.js in less than 15 minutes!!

Amazon IVS (Amazon Interactive Video Service) is a fully managed live streaming solution: simply stream to Amazon IVS, and the service does everything you need to make low-latency live video available to any viewer around the globe. Amazon IVS handles the ingestion, transcoding, packaging, and delivery of your live content, using the same battle-tested technology that powers Twitch.

For more information on Amazon IVS check https://ivs.rocks

Check the twitch stream of this tutorial: https://www.youtube.com/watch?v=xCsh88xNkKE

15 minutes... for real?! ⏰

I have a personal quest of making infrastructure and development approachable, accessible and friendly regardless of your level of expertise. For that reason, I am happy to present you with a library that will simplify the process of building a player with Angular and Amazon IVS in less than 15 minutes!!

Hands on! 👊🏼

⚡️ Pre-requisites:

NodeJS + NPM: instructions to set up/install
Angular CLI
Amazon IVS
VideoJS

Installing The Angular CLI

If you’re wondering how it’s possible to create an Angular project or app in less than 10 mins, it’s partially thanks to its very sophisticated and developer-centric CLI. If you haven’t already, please install the CLI globally. That ensures you have all necessary dependencies to quickly generate a new app.

Install the Angular CLI with npm:

npm install -g @angular/cli

Now we are ready to generate a fully functional base Angular application.

Creating our Angular Application

Create a new project. I will name it "angular-ivs", but you feel free to name it whatever you want!

We create a new app by typing and executing

ng new <APP-NAME>

In my case,

ng new angular-ivs

Working our magic ⭐️

Once our app is created, let's head to our project folder:

cd angular-ivs

Now we will install ng-ivs. This library makes your development process much easier by installing Amazon IVS, Video.js and generating a player component you can customise to meet your project requirements.

To install it, move into the root directory of the angular app you just created, and execute

npm install @cotufa82/ng-ivs --save

Customising our Application

Amazon IVS SDK supports Javascript only. This means that there are no type declarations. Since Angular projects are written in Typescript, and the typescript compiler is strict, we need to disable the mechanisms that will validate imported types, upon compilation:

...
  "compilerOptions": {
    "skipLibCheck": true,
  ...
  }
...

Now we will add the player to our application default component. In order to do that let's edit app.component.html,

<vjs-ivs-player
  [options]="options"
  [appChanEndpoint]="'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'"
></vjs-ivs-player>

For this tutorial I am using a test stream url from the Amazon IVS Samples repository. The awesome thing about this is that you can pass this URL directly in the component or trough options.source or using the environments from Angular.

Now, let's import our NgIvsModule module in app.module.ts. Your code should look like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgIvsModule } from '@cotufa82/ng-ivs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgIvsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then, create an interface to set configurations and options for the player in app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular-IVS';

  options ={
    sources: [{
      src: 'https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8',
      type: 'application/x-mpegURL'
    }],
    fluid: true,
    aspectRatio: '16:9',
    autoplay: true,
    controls: true,
} 

}

These options are standard options for Video.js and you can find more information in the docs.

At this point we have a functional player app, you can customise the CSS for your player or just use the default options by adding this to the head tag of index.html

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />

Ready to celebrate? Let's startup a server and see our app live in the browser! The angular CLI allows us to both build and serve our app on a default port, by executing

ng serve --open

You should see something like this:

🎊🎉

And that's all folks!! A fully functional player app implementing Angular and Amazon IVS!

Can't wait to read your comments and see what you can create!!!

Build an Amazon IVS Player App with Ionic-Vue

Super Diana — Tue, 08 Jun 2021 21:40:03 +0000

Intro ⭐️

I wanted to build a quick and easy Amazon IVS video player mobile app for future streams and other interesting experiments. This is the first part of a series of tutorials where I will be expanding on features of this app!.

Building native mobile apps can be beginner friendly and an enjoyable experience!. For that reason I've chosen Ionic as my framework of choice because of its simplicity combined with Vue JS, a friendly javascript framework.

Wait, but what about the video part? 🤔

To continue with keeping things simple, developer friendly and approachable, let's look at a new service offered by AWS: Amazon Interactive Video Service or IVS. It's a managed live video streaming service that allows us to:

Create channels and start streaming in minutes.
Create engaging and interactive experiences along with ultra-low latency live video.
Distribute video at scale to a variety of devices and platforms.
Easily integrate into websites and applications.

Amazon IVS allows us to focus on creating our own interactive application and audience experience and we don't need to manage infrastructure or develop and configure components, making it reliable and cost-effective.

Amazon IVS supports RTMPS streaming. RTMPS is the secure version of RTMP (Real Time Messaging Protocol), which runs over TLS. RTMP is an industry standard for transmitting video over a network.

So we are using Ionic-Vue + Amazon IVS to create a mobile player app!

Tutorial repo: https://github.com/alphacentauri82/ivs-ionic-vue

Twitch stream: https://www.youtube.com/watch?v=CeKTr83LmiY

Let's get it started 🎵

⚡️ Pre-requisites:

NodeJS + NPM: Ionic has amazing instructions to set up/install
Ionic CLI
Amazon IVS
VideoJS

Installing Ionic CLI

Install the Ionic CLI with npm:

npm install -g @ionic/cli

If there was a previous installation of the Ionic CLI, it will need to be uninstalled due to a change in package name.

npm uninstall -g ionic
npm install -g @ionic/cli

Creating our App

Make sure you're in your desired folder for this project and then run:

ionic start hello-ivs tabs --type vue --capacitor

An Ionic-Vue application will be created. Note we used the flag tabs to use a starter template with "Tabs". We also added Capacitor to give native functionality.

This starter project comes with three pre-designed pages and best practices for Ionic development - with the common building blocks already implemented, we can easily add more features!.

As this process continues, you will be asked if you want to create an Ionic account, if you type "Y + Enter" it will take you to https://ionicframework.com/signup and if you type "No + Enter" it will continue its process smoothly.

Now that the project is created, let's get in our project folder:

cd hello-ivs

🎊 ...And it's time to celebrate our first achievement!, we have a full starter app to add our player to! 🎊

Hands On! 🛠

Open your IDE/editor of choice and you should see the following structure:

Let's go to the /src folder:

There are 4 folders and 3 files. Let's go through what we see:

Components: This is where our components are stored, it will serve us to create our child component where we will have our video player.
Router: Defines the specific routes of our application.
Theme: This is where we define all styles and the look of our app.
Views: This is where we structure our app views.

Let's cd to the default component:

cd src/components/ExploreContainer.vue

And delete line #4 - Let's replace it with

<p>Hello IVS!</p>

It's time to see our "Hello IVS" App and make sure everything works so let's run"

ionic serve

It will take a few seconds to build and then we can see a web preview. We can resize it to simulate different mobile devices in the browser:

Web Preview

Mobile

Since we don't need Tabs in this first version of the application we will delete the other two and leave a single tab for now.

To do that, we need to edit Tabs.vue in the /views folder, and in the <template> block, delete from line #10 to #18 leaving just a single tab like this:

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

Let's save our file and our app will reload displaying this:

Adding Video to our App 🎥

Stop the presses! Let's hit ctrl + c In our terminal. We have to install a few dependencies to continue developing our project.

First of all, let's install VideoJS. At the time of making this tutorial, to make sure it works with Amazon IVS we need to install version 7.6.6:

npm i video.js@7.6.6

And then proceed to install Amazon IVS

npm i amazon-ivs-player

Creating the video player 🔥

Let's edit our ExploreContainer component located in the src/components folder.

Let's import our dependencies. We do this in the <script> block, but first delete lang="ts" since we won't be using Typescript. From line #8 it should look like this:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

And to make things more consistent, let's rename our default ExploreContainer component to VideoPlayer, edit line #13 and the script tag should look like this:

<script>
import videojs from 'video.js';
import { registerIVSTech } from 'amazon-ivs-player';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    name: String
  }
}
</script>

Before anything else, we also have to rename the file to VidePlayer.vue and then proceed to modify our parent component Tab1.vue and add the correct name. For this we edit src/views/Tab1.vue. Our file should look like this:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Live Stream</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Live Stream</ion-title>
        </ion-toolbar>
      </ion-header>
      <VideoPlayer />
    </ion-content>
  </ion-page>
</template>

<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import VideoPlayer from '@/components/VideoPlayer.vue';
export default  {
  name: 'LiveStream',
  props: {
    autoplay: Boolean
  },
  components: { VideoPlayer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

Now let's head to the router folder and in index.ts delete the lines that define the routes of the tabs that we no longer need. so the file should look like this:

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import Tabs from '../views/Tabs.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: '/tabs/tab1'
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Now we can add our data to be able to effectively use Amazon IVS in src/components/VideoPlayer.vue, the file from line #13 should look like this:

export default {
    name: 'VideoPlayer',
    props: {
      name: String
    },
    data: () => ({
      player: null,
      videoSource: process.env.VUE_APP_PLAYER_URL,
      videoOptions: {
        autoplay: true,
        controls: true,
        techOrder: ["AmazonIVS"],
        width: "800"
      },
    }),

Let's stop to explain a few things:

player: Variable that will store the properties of video.js to use Amazon IVS objects.
videoSource: This is the environment variable that will allow us to connect to a test stream. In this case we will pass a player URL.
videoOptions: This is the object that we will use to have control over the Amazon IVS technology layer.

After defining our data we are going to follow the life cycle of a component in Vue, we are going to use the mounted() hook to start it after all the elements have loaded.

mounted() {
    // register the tech with videojs
    console.log(`wasmWorker: ${this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js')}`)

    registerIVSTech(videojs,  {
      wasmWorker: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.js'),
      wasmBinary: this.createAbsolutePath('/assets/amazon-ivs-wasmworker.min.wasm'),
    });

    // Init the player
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
      console.log('Player is ready to use!');
      // play the stream
      this.player.src(this.videoSource);
    })
  },

registerIVSTech: Is the object we declare to consume the Amazon IVS service.
Videojs: Is the object provided by Video.js.
options: Options for the Amazon IVS technology layer.

The supported options are:

wasmWorker: URL where amazon-ivs-wasmworker.min.js is located.
wasmBinary: URL where amazon-ivs-wasmworker.min.wasms is located.

These files are located in node_modules/amazon-ivs-player/dist/. We need to copy and paste them into the public/assets folder to use the IVS player.

Then we use the beforeUnmount hook in order to have a conditional that allows us to show if the player instance is being consumed or if not the instance is destroyed.

beforeUnmount() {
    // Destroy the player instance
    if(this.player) {
      this.player.dispose();
    }
  },

  methods: {
    createAbsolutePath(assetPath) {
      console.log( document.URL );
      return new URL(assetPath, document.URL).toString();
    },
  }

The createAbsolutePath method allows us to create a specific path, with this method we can consume the files stored in public/assets.

Let's create our container and reference VideoPlayer to be able to receive the video with video.js like this. Let's go back to the beginning of the file, in the <template> block and replace the contents of everything contained in <div> like this:

<template>
  <div id="container">
    <video ref="videoPlayer" class="video-js"></video>   
  </div>
</template>

And then style it! - Let's edit the style block in line #61:

<style scoped>
#container {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>

And finally let's create a .env (dot env) file and save it in the root folder of the project with the following information.(For now, we are going to pass a player URL from one of the sample players in the Amazon IVS Demos Repository.

VUE_APP_PLAYER_URL='https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8'

🎉 Celebration 🎉

Let's save our work and run:

ionic serve

you should see a result similar to this:

We will continue to develop more features in this same application so stay tuned for more!!!

Nevertheless, Diana Coded in 2021!

Super Diana — Tue, 09 Mar 2021 01:52:39 +0000

New beginings

2020 was quite an intense year. I have no words to express what it meant to me, in terms of challenges and successes, of learning, of many losses including the passing of my grandmother, the woman who raised me.

Yet, 2021 brings hope, regardless of the pandemic... my eyes have opened, my horizons have broadened and I have gained SO much from last year's experience. I learned to connect with people and communities in a way I never thought I would.

My most recent achievement was…

Completing ScoutX. A Diabetes monitoring tool to notify emergency contacts in case of irregular situations. This saved my life, many times. I'm finishing work to build a GPS LoRaWan tracker powered by WisBlock and Helium. These companies have been super supportive as well as The Nightscout Foundation. I feel like this year I found a purpose, I can help others, I can use technology for good. I can help fellow diabetics like me improve their lives with the use of technology.

Advocating for myself looks like…

Standing up for my principles even if it means standing alone.

My biggest goal is…

Leave a legacy, it suffices me to know that in the last 20 years I may have done something that has paved the way for this and future generations in technology.

My advice for allies to support underrepresented folks who code is...

DO THE WORK!, actions rather than words!, educate yourself!.

Special thanks to...

Lauren Lee, Avital Tzubeli, Heather Baden, Natalia Venditto, Nina Zakharenko, Jen Looper, Erica Stanley, Angel Banks, Beth Laing, Ana Chin A Loy, Chloe Condon, Gaby Trueba ... you have had such a deep impact in my life, I have no words to express my gratitude for everything you've done for me. From the bottom of my heart, thank you!

Love is Love. Celebrate it! 🏳️‍🌈

Super Diana — Thu, 11 Jun 2020 18:38:00 +0000

Photo: Celebrating Love✨

So yeah, It's the month to be proud and celebrate who you are. Celebrate love regardless. I am Diana, Pansexual and proud.

I'm proud of...

Being who I am. Never have i felt so free before until i started worrying about what society expected and thought about me. I am a person with talents, shortcomings and dreams like everyone else. I learned to embrace myself as I am and continuously work towards improving everyday.

I’m an expert at...

I don't consider myself an expert, but I have some talents in programming, infrastructure and my passion is music.

Equality in tech looks like...

More like equity. I have been working non-stop for the last 10 years of my life with communities to make sure everyone can sit at the table!!

I find support in...

My friends, my team, myself.

Embrace yourself. Take care of the person you love the most!. Here's a shameless plug to a talk I gave a while ago: Make room, not war: Inclusion means all y'all!

Nevertheless, Diana Coded

Super Diana — Tue, 03 Mar 2020 20:36:21 +0000

Where do I begin?…

My background isn’t conventional. I grew up with an amazing family of nerds who bought programming, computer, and gaming magazines. Those were the magazines I scribbled and drew on whenever I got hold of marker pens.

My mother worked in a corporate computer supplier and she often brought “samplers” back home. The day she brought a new Commodore-64, my life changed forever. Copying game codes from magazines wasn’t a hassle for me, I found it fascinating and cathartic at the same time. I was 6 years old. With time, she saw my interest and taught me the basic things that made a difference: basic, assembler, and then Python. With time it became a normal thing and part of my conversations. I was lucky to find supportive classmates in school. I will always be grateful for the support I got from my parents.

I started “formally” coding at the age of 14 and grew up with much interest and work on infrastructure and backend. Throughout my entire career, I saw the good and the ugly in terms of diversity and inclusion, so I decided to take action and work with my environment, later with communities and worked(still working!) hard to get as far as I could, and help others. I wanted to be part of the solution. I wanted to help open programming gates to women and underrepresented communities.

The Biggest Challenge I Faced Was…

… At 18 years old. My first data centre job. Walked in ready to assemble racks and do the networking side of the operation. I was mocked and mistaken for a lost marketing intern. Then the men present assumed I was there to bring them refreshments and their tools. I had to prove not only that I was perfectly fit for the job but also prove my knowledge and I was often ridiculed or ignored for being too young… and a woman. This fueled my desire to overcome those barriers and help pave the way for others, at least wherever I went.

The Most Rewarding Thing This Year…

Getting my dream job. I am super happy to be in charge of the Nexmo Python SDK. This job combines my passions: Python and public speaking/writing content. Never have I felt so welcomed and so supported. I am definitely looking forward to what’s coming this year!!

My Message for Others…

You are awesome. We are all different and diversity is what keeps the world rocking! , Bbe yourself, celebrate, praise yourself and help others as you grow!

And like Brian May sings in “Good Company” :

“Take care of those you call your own and keep good company.”

Integrating Vue CLI 3 with Kendo UI

Super Diana — Fri, 27 Sep 2019 01:51:51 +0000

Walk through the integration process of the new Vue CLI 3 with Kendo UI, and start developing eye-catching Vue.js applications with zero hassle!

Original Post on The Telerik Blog. October 2018

Kendo UI is an awesome UI component library made by Progress. It can be used with multiple frameworks/tools (jQuery, React, Angular), but let's talk about using it with Vue.js.

We will go through the integration process explaining it step by step and solving a few issues that may occur while integrating Kendo UI with Vue CLI 3. For this, we're going to use our "Vuetiful" Rick & Morty app as an example.

For those who haven't updated to Vue CLI 3 yet, you can check out this blog post on what you need to know, and I recommend reading the official documentation to learn the proper usage of this awesome tool.

Assuming we have previously installed Vue CLI 3 let's create our project and enter its root folder:

vue create ricknmorty-vue
cd /ricknmorty-vue

Install Kendo UI Using npm

Installing:

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

For our app, we used the default theme, but among the many possibilities to get your apps rocking and looking like a million bucks, you can build your own theme, or use the default, bootstrap or material theme. Check out the Theme Builder!.

For example, for our Vuetiful Rick & Morty we used buttons:

npm install --save @progress/kendo-buttons-vue-wrapper

You can head over to the Kendo UI for Vue site for more details on themes and components.

Once we have installed all necessary packages, we shall proceed with the integration:

Open main.js
Let's import our magic adding the following to our code:

import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

Add the minimum base pack to our project and, for this particular case, adding buttons:

import { ButtonsInstaller } from '@progress/kendo-buttons-vue-wrapper'

Vue.use (ButtonsInstaller)

So now we can create our component using Kendo UI's buttons!

In our component:

import { Button } from '@progress/kendo-buttons-vue-wrapper'

Let's add it to our component list:

components: {
  Button
}

And we can now use: <kendo-button></kendo-button>. For example:

<kendo-button class="button" icon="arrow-right" @click="position++"></kendo-button>

You can get more information about buttons here.

Once we have finished our development, let's go to our terminal and use npm to run our project, just as shown in the Vue CLI 3 documentation:

To run our project type:

npm run serve

And this will trigger the following warning:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

What just happened?!

Don't sweat it! This can happen often with some Vue.js components and it can be fixed by adding a simple line of code inside of: webpack.config.js

But wait a minute!... Where is webpack.config.js in the new CLI?
Now it's inside of node_modules
But thou shall not ever modify node_modules!!!
That's actually true, because if you update your project, all the changes you make in node_modules will be lost.
Sooo??? I am lost!. How do I sort this out?

In the new Vue CLI 3, any new configs for webpack.config.js are applied in a single file we can create in our project root and it should be called vue.config.js.

Once we create the file, just add the following code:

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
  }
}

And voila!!!! It's all running smoothly!!

Special thanks to Gonzalo Nandez and Giselle Perez for their magic

How to boot & use an external hard drive on new mac minis

Super Diana — Mon, 26 Aug 2019 14:54:15 +0000

Intro 💅

I "rescued" a 2018 mac mini(8th Gen i3, 8Gb Ram, 128SSD). My idea was to use it for my personal home recording studio. I read the ram was upgradeable but the storage is sadly soldered into the unit. iFixit awarded the new Mac mini a repairability score of 6/10, with 10 being the easiest to repair, topping the latest MacBook Air, MacBook, MacBook Pro, iMac, and iMac Pro, and trailing only the 2013 Mac Pro. Read the original article here.

"The new Mac mini earned its higher repairability score thanks to its straightforward disassembly with no tough adhesive or proprietary pentalobe screws and user-upgradeable RAM. However, it didn't earn a perfect score due to the soldered-down CPU, storage, and ports, impacting repairs and upgrades."

So, it made sense to find an external SSD and run operations from there. Just logic pro x takes 70 Gb with all the samples etc. By the time i got everything running at minimum, i only had like 15 Gb left. So here's what i did:

Working it out 🤹‍♀️

What you will need 🧐

External SSD Hard drive. (I won't suggest brands or capacity leaving that to what you find fit for yourself)
A Mac!

Getting the job done 🤓

First of all, go to disk utility and format your new hard drive. For this you have to choose either APFS or MacOs Extended (Journaled), encryption is up to you. Just make sure you remember your password. (⚠️ THIS MEANS YOUR ENTIRE EXTERNAL HARD DRIVE CONTENT WILL BE ERASED! proceed with caution and, to be safe, use a new external hard drive)
Once you have formatted your hard drive, restart your Mac, then press and hold Command(⌘)+R immediately after you see the Apple logo. Your Mac starts up from macOS Recovery.
When you see the macOS Utilities window, choose Utilities > Startup Security Utility from the menu bar.
When you're asked to authenticate, click Enter macOS Password, then choose an administrator account and enter its password.
You will see something like this:

Select Allow booting from external media

We are almost done. Don't restart anything yet. Go back to the first screen and click on reinstall macOS:

Accept all terms and conditions, and you will be prompted to choose the hard drive where you want to install the operating system on. Click on it and install. The machine will restart a few times.
You will eventually end up at your regular login screen. If you are in the machine where you will be booting your external hard drive from, you have two options to boot. You can press the option key every time you turn on your computer, and select what hard drive to boot from, or you can switch permanently to your external hard drive.

If you want your machine to always boot from the external hard drive:

Choose Apple () menu > System Preferences, then click Startup Disk.
Click the lock icon and enter your administrator password.
Select your startup disk, then restart your Mac.

That's all folks! 🐷

Enjoy all your extra storage space!. Remember that you can always switch back to your original startup disk!

Cheerio!

20th Nov, 2020:

@DarkCisum on twitter added the following information:

Hi. I've been following your guide on booting a Mac Mini from an external SSD. Just thought, maybe it could be helpful for others, in the Disk Utility one needs to "View > Show All Devices" in order to be able to select the disk itself

Thank you very much!!

The touch of the "master's" hand.. in a tough tech world!

Super Diana — Sat, 04 Aug 2018 20:44:51 +0000

Have you ever thought how much of an impact you may have on someone else's life?. If we were more aware of the positive influence we can have on others, perhaps things could be a bit different... what if we started paying more attention to those little things that matter in the end?

Recently, I gave a couple of talks on the OH SO REAL imposter syndrome. Oh did I share some tips based on my own personal experience and how I’ve managed to overcome to a certain extent such a struggle… but, thinking about it, there is something I always forget to mention.

Yes, I am sure we can all be victorious and overcome hurdles, I am sure there are plenty of ways for each and everyone of us to seriously improve personally and in our work… we can certainly improve our code but, what role are we playing as part of the ecosystem?. What is our role in our team?, how about our local community?.

Before I became part of the Vue Vixens awesome team, I had met people who had a strong and unforgettable impact in my life. May I mention one person in particular: Matias Blayer, my mentor and the person who got me interested on Vue. "Mati" (this is how we call him!) always encouraged me to engage in more activities, to take an active role in our community. He even made part of JavaScript 101 as a mentor and always stressed the importance of sharing the little or much we know and understand with others. He always stressed how important is to help others and the same way we help others do we receive from those who know different things, at different levels and bring a different perspective to what we do as developers. True support. True empathy.

I have to say that this was totally new to me and I found it admirable. It struck me like a zillion lightning bolts and pierced my heart deeply. All of a sudden, after being given so much, I wanted to give back too.

I am 35 years old. I am a woman. I am first of all a DevOps/SRE and then a full stack developer but i had no formal studies whatsoever. I started back in 1994 when geocities was the sh!t. So throughout my life as a developer i always felt less than those who had dedicated time of their lives to pursue formal education in computer science, programming, engineering… you name it. I did a few online courses and even a bootcamp but more than that… there was my experience “from the streets”. I never really thought i could give anything back to the community.

Then, after Mati, came many others who kept on adding to that seed.. I had the desire to do something but I didn’t know how to until I met Jen Looper. Then, Vue Vixens, its magic and our amazing community...you have no idea how much my life changed after all this.

Does any of you know “The Old Violin” Poem? (i will quote it at the end). I got in touch with Jen Looper after a Vuenos Aires meetup. I was in love with the meetup but we were luckily 3 women present. It worried me and I reached Nacho Anaya, one of the organisers who told me he’d heard about Vue Vixens and that I should get in touch, which I did. The rest is history and I certainly feel like things have happened in the blink of an eye.

One day I contacted Jen. Today I write these lines after enjoying an awesome event: our very own Vue Vixens day in Buenos Aires. It’s not even about me, or my efforts. It’s how simple yet miraculous the touch of “the master’s hand” makes a difference.

I love being a Vue Vixen. I love what we have. I love that we managed to do so much in such a short period of time and the reason why this keeps on expanding is because one thing Jen does very well: she always has a kind and encouraging word. Never have i met someone so patient and so kind yet with enough character to iron kinks with whomever she has to, politely and firmly.

Imagine if we applied the same principle to our entourage. Every person we meet has special qualities that make them unique. A kind word, some encouragement… some praise and positive reinforcement DO MAKE A HUGE DIFFERENCE.

An honest compliment, a thank you, a “keep up the good work”. You have no idea how much of a big impact this can have in other people’s lives. The touch of the master is not being a “leader” and commanding others from a comfy seat behind a desk. A true leader is there with the team, shoulder to shoulder, overseeing, encouraging, participating.

We pulled a whole day mini conference with much help from many awesome people. My fellow vixens were there supporting us… but Jen, she was there in every step. I felt confident and safe, and somehow had that peaceful feeling that it was all going to go well. Even if it didn’t! (it went awesome).

Let us all make a difference. Let us all encourage if ONE person to give their best. Let us all try the benefit of the doubt and give a chance to those who were never taken into consideration for any “important” task. Let us share what we know, let us be the one with the master touch…

'Twas battered and scarred,
And the auctioneer thought it
hardly worth his while
To waste his time on the old violin,
but he held it up with a smile.

"What am I bid, good people", he cried,
"Who starts the bidding for me?"
"One dollar, one dollar, Do I hear two?"
"Two dollars, who makes it three?"
"Three dollars once, three dollars twice, going for three,"
But, No,
From the room far back a gray bearded man
Came forward and picked up the bow,
Then wiping the dust from the old violin
And tightening up the strings,
He played a melody, pure and sweet
As sweet as the angel sings.

The music ceased and the auctioneer
With a voice that was quiet and low,
Said "What now am I bid for this old violin?"
As he held it aloft with its' bow.
"One thousand, one thousand, Do I hear two?"
"Two thousand, Who makes it three?"
"Three thousand once, three thousand twice,
Going and gone", said he.

The audience cheered,
But some of them cried,
"We just don't understand."
"What changed its' worth?"
Swift came the reply.

"The Touch of the Masters Hand."
"And many a man with life out of tune
All battered and bruised with hardship
Is auctioned cheap to a thoughtless crowd
Much like that old violin
A mess of pottage, a glass of wine,
A game and he travels on.

He is going once, he is going twice,
He is going and almost gone.
But the Master comes,
And the foolish crowd never can quite understand,
The worth of a soul and the change that is wrought
By the Touch of the Masters' Hand.
-Myra Brooks Welch

Thanks to all of you who have made a huge difference in my life, directly and indirectly. I might not be able to list all of you but i'd like to shout out some kudos and appreciation for what you've done: - Jen Looper, Natalia Tepluhina, Sara Vieira, Sarah Drasner, Matias Blayer, Ignacio Anaya, Nico Quiroz, Eva Ferreira, Jorge Cano, Karen Serfaty, Leo Galante, Hugo Farji, Lupe Lazzo, Goncy Pozo, Sofia Kühne, my family and all those who have been present: Thank you. You have made a huge impact in my life.🌈

Follow Vue Vixens on Dev.to - 🦊
Check our Twitter: @vuevixens / @vuevixensAR / @vuevixensMX / @vuevixensBR