DEV Community: Jordan Irabor

How to identify and fix open-source vulnerabilities

Jordan Irabor — Sun, 15 Dec 2019 13:38:14 +0000

How to identify and fix open-source vulnerabilities

Introduction

SaaS organisations rely on open-source software to shorten their turnaround time as it gives developers access to a myriad of top-notch projects. With open-source, developers can harness a variety of efficient tools that would be time-consuming to build.

For this reason, open-source is very important to both traditional and agile development processes.

Although the benefits of open-source can be alluring, there is a drawback worthy of note:

Open-source can potentially expose your projects to different kinds of vulnerabilities which can pose a security risk.

How do vulnerabilities creep in through open-source?

The basis of an open-source project is the voluntary contribution from different developers. It is not a strict requirement that these developers possess advanced security knowledge, and a lack of this knowledge can lead to the unintended creation of vulnerabilities.

When developing proprietary software, there is a testing phase that subjects the software to several security checks. Open-source, on the other hand, rarely goes through a similar level of security checks and some vulnerabilities may go unnoticed even with a large developer community reviewing the code.

When companies build their software on a layer of open-source components (with such vulnerabilities), they become potentially exposed to threats such as Denial-of-Service (DoS) attacks, malware injections and data breaches. Cyber-criminals keep abreast with these vulnerabilities and can use this information to exploit organisations that do not promptly update their vulnerable open-source components.

The Apache Struts (a framework wildly used in web applications) is a good case in point. Equifax (a consumer reporting agency) was slow to patch its Apache Struts framework, and this resulted in a data breach that affected millions of people:

The patches were, in fact, available two months before the breach.

Identifying and fixing vulnerabilities

There are two steps to resolving software vulnerabilities:

Identifying vulnerabilities
Fixing vulnerabilities

In a proprietary software project, vulnerabilities can go unnoticed for long if no deliberate checks are regularly made. Developers need to use the right tools to scan for and fix vulnerabilities. When a vulnerable dependency is identified, it must be remediated correctly.

In this section, we will go over a few methods to identify and fix open-source vulnerabilities.

Enable security alerts on source-code hosting platforms

Source-code hosting platforms can scan through your project’s dependency graph to find vulnerabilities. For example, GitHub can detect vulnerabilities from the GitHub Advisory Database or WhiteSource Bolt in one of the dependencies in your repository’s dependency graph.

Be sure to opt-in to such vulnerability detection alerts so you are always updated and protected.

Use an IDE plugin that detects vulnerabilities

Developers feel comfortable working in their favourite IDEs because it keeps them productive. IDEs are getting smarter by the day and even allow you to install plugins to enhance your coding experience.

On the issue of security, developers can install plugins that can scan direct and indirect dependencies in your projects, identify vulnerabilities and license issues and report them back to you.

Using automation

Besides making your work easier, automation can help resolve vulnerabilities in your software projects. Technology is moving towards automation and companies already use real-time monitoring to detect abnormalities (including security issues) in their systems.

Automated systems can scan dependency graphs for the latest updates and patches and send alerts when found. This way, the developer teams will always be aware of vulnerabilities and this can prevent a security breach scenario like Equifax.

Using NPM (JavaScript)

When you install a Node package using NPM, you might get a small informative error that warns you about several dependency vulnerabilities:

What this text means is that there are vulnerabilities in your project, ranging from low to high. NPM provides an inbuilt command to fix these vulnerabilities:

npm audit --fix

However, this command may not be able to fix all vulnerabilities or will leave you with just as many vulnerabilities as before. When this is the case, an alternative is to fix the vulnerabilities manually.

The audit command recommends installation commands to individually resolve vulnerable dependencies:

Some of these individual updates may be semver-breaking changes, so you need to carefully take the time to ensure that your project still works correctly.

Note: avoid using the —force flag when running the NPM audit command as it will forcefully update all packages with vulnerabilities, even if they introduce breaking changes.

Check vulnerability databases

Wikipedia describes a vulnerability database as:

A platform aimed at collecting, maintaining, and disseminating information about discovered computer security vulnerabilities. The database will customarily describe the identified vulnerability, assess the potential impact on affected systems, and any workarounds or updates to mitigate the issue. For a hacker to surmount a system's information assurance, three elements must apply: a susceptibility within the system, access to the susceptibility, and the ability to exploit the susceptibility.

Several platforms supply information on known vulnerabilities. They let you search through a database of vulnerabilities and may even show you the most severe vulnerabilities published in the last 90 days or suggest a fix (where it is available):

Manually fixing a vulnerability

For most vulnerabilities, the remediation process is as straightforward as updating the software to a non-vulnerable version. An adverse effect of such an upgrade is that it might introduce breaking changes to the project that depends on it.

For this reason, popular dependencies usually have point releases with security fixes. This makes it possible to remediate the vulnerabilities without introducing any breaking changes to the overall project.

In some cases where the project is no longer maintained and there are no updates available, you may need to investigate the vulnerability to understand it and create a working patch for yourself.

Conclusion

Building software with open-source components comes with several challenges, including the risk of security. It is important to regularly check (manually or with tools) your projects for open-source vulnerabilities and fix them when found.

Luckily for the contemporary developer, there are platforms dedicated to collecting information on different types of vulnerabilities. These platforms are called vulnerability databases and they can point you in the right direction towards resolving security issues.

Explain Time Complexity Like I'm Five

Jordan Irabor — Tue, 24 Apr 2018 09:18:21 +0000

Guys, no better way to put this, I'm having an exam in about an hour and I want to be certain I have this thing figured out.

Quick responses would be appreciated :)

Thank you!

Build An Audio Translator With Vue.js, Yandex Translate API and Responsive Voice

Jordan Irabor — Sun, 11 Mar 2018 18:21:00 +0000

Introduction

A few weeks ago, I decided to put together a list of cool projects to do in Vue.js and for this reason, I started digging around the internet in search of valuable resources. At the end of the day, I had gathered significant chunks of knowledge on some useful APIs. Among the others, I found the Yandex Translate API really fascinating; it's able to take almost any text and return its equivalent in over 90 languages.

After playing around with the API ( using Postman ) for a bit, I decided to take my Vue.js knowledge and wrap it within the awesomeness of this API. The result? I hacked together a Vue.js translator web application.

During the project, I integrated audio functionally by referencing the ResponsiveVoiceJS CDN and firing a simple function.

Here's a visual display of the completed project :

Let's see how I built it.

Requirements

Since we are going to be building this application with the Progressive Javascript Framework Vue.js, we need to be sure to have a few things installed before proceeding:

Node.js
Node Package Manager ( npm )
Vue-CLI tool ( npm install -g vue-cli )

We also need:

An API key to use the Yandex Translate API

To create an account with Yandex, go here:

To create a free API key, go here:

Once the dependencies are installed and you have a key, we are set to begin!

Creating The Project

We'll be creating this project with the Vue-CLI tool, an alternative would be to reference Vue.js from a CDN and you can do that if you choose to.

We'll be using the webpack-simple template since this will not be overly complex to develop.

You might need to change the ownership for the project directory and run some of these commands as root ( using sudo )

vue init webpack-simple translator

With this command, you'll need to respond to a few lines of command prompt query:

Let's navigate to the project directory and install dependencies :

cd translator
npm install

Creating The Translate Component

We will create exactly one component for this project since we don't want to clutter up the development environment with unnecessary components. This component will contain two textareas positioned side by side; one would hold the text to be translated while the other displays the translated text, both sides will also have an audio functionality.

Let's create a components directory and a translate file in the src directory of our freshly installed project.

mkdir -p src/components
cd src/components
touch translate.vue

This file will contain all the code for the translate component.

Writing The Code For The Translate Component

Before we write any code at all, let's think of the relationship between the root component ( App.vue ) and the child component ( translate.vue ). Let's assume that the heavy lifting would be done by the root component, so the child component would receive props, register a few variables and emit events up to the root component on user interaction.

Now that we understand how this is going to work, let's write some code in the script tag to receive props and initialize variables.


export default {

  name: 'translate',

  props: {

   AvailableLanguages : {
     type : Object
   },

   ResponseText : {
     type : String
   },

   CurrentLanguage : {
     type : String
   },

   TranslateLanguage : {
     type : String
   }
 },

  data () {
    return {
      Text: '',
      FromLanguage : "English",
      ToLanguage : "French"
    }
  }
}

Let's analyze the above code from top to bottom so we understand what is going on:

First, we are exporting default, which is what would allow us to import this component into the root component.
We initialize the name variable then receive and validate some props, apparently, these props would be coming from the root component. Here's what they are and what they do:

AvailableLanguages would hold an object of the available languages for translation returned by the Yandex API.

ResponseText would hold the translated text for a specified language returned by the Yandex API.

CurrentLanguage would be the code for the current language we are typing in.

TranslateLanguage would be the code for the language that the translation would come in.

Lastly, we initialize a Text ( this is for the text being typed ) variable to an empty string. We then initialize two other variables, FromLanguage and ToLanguage, to "English" and "French" respectively. These are the variables that would hold the full name ( not code ) of the selected language.

Awesome.

Writing The MarkUp

Having received the props and initialized some variables in the code above, we should write the HTML now. We will mostly be binding the textareas to their matching data variables and triggering events upon user interaction. The HTML will be written within the template tags so that Vue.js knows that this is MarkUp and renders it at runtime.

<div id="parent_translate">

<div id="input">

<div id="imageholder">

<select v-model="FromLanguage" @change="changeFromLanguage">

<option v-for="(lang, code) in AvailableLanguages" :value="code"> {{ lang }} </option>

</select>

<img @click="translateSpeak" src="../assets/speaker.png">

</div>

<textarea placeholder="Type in something here" v-model="Text"></textarea>

<button @click="submit" id="submit">SUBMIT</button>
</div>

<div id="output">


<div id="imageholder">

<select v-model="ToLanguage" @change="changeToLanguage">

  <option v-for="(lang, code) in AvailableLanguages" :value="code"> {{ lang }} </option>

</select>

<img @click="responseSpeak" src="../assets/speaker.png">

</div>

<textarea placeholder="Your output goes here" disabled v-model="ResponseText"> </textarea>

</div>

</div>

Let's take a close look at the functionality bound to this MarkUp:

The first select tag is bound to the FromLanguage data variable using the v-model directive and it triggers an event handler "changeFromLanguage", whenever its value is changed.

The option tag nested within the first select tag accepts the object of available languages ( which will come as a property from the root component ) and loops through it using the v-for directive. It's :value directive is bound to the code variable so that each option tag created during the loop has it's own unique code.

Let's see some more of the MarkUp :

<select v-model="FromLanguage" @change="changeFromLanguage">

<option v-for="(lang, code) in AvailableLanguages" :value="code"> {{ lang }} </option>

</select>

The img tag just below the previously discussed select tag holds an image representation for audio functionality and directs click events to a "translateSpeak" event handler.

<img @click="translateSpeak" src="../assets/speaker.png">

The first textarea is quite straightforward with what it does, it binds the Text variable with itself so that it displays a placeholder only when there is no text written in it.

<textarea placeholder="Type in something here" v-model="Text"></textarea>

<button @click="submit" id="submit">SUBMIT</button>

The button tag performs a single function; it triggers a submit method whenever it is clicked.

After this point in the MarkUp, the remaining code is just a repetition of what has already been displayed, no new logic or functionality.

Let's write the event handlers within the methods object.

Writing The Event Handlers

Let's begin this section by writing the handlers for the select boxes, they are triggered whenever the selected option is changed.


  changeFromLanguage:function( ev ) {
    let LanguageCode = ev.target.value;
    this.$emit('updateFromLanguage', LanguageCode)
  },

  changeToLanguage:function( ev ) {
    let LanguageCode = ev.target.value;
    this.$emit('updateToLanguage', LanguageCode)
  }

The function of these two handlers is quite obvious. First, a new variable holds the language code for the selected option and then this update is emitted to the root component. The handlers on the root component to handle these emitted events are also specified.

  submit:function( ev ){
    let Word = this.Text
    if ( Word ) {
    this.$emit('translate', Word)
    }
  }

The submit method above is called whenever the Submit button is clicked and its simple job is to emit an event while passing the typed text to the parent component.

Before we look into the event handlers for the audio functions, we have to pull in the ResponsiveVoiceJS library because we depend on it for the audio functions, we can do this by plugging in a script tag just before the closing </body> tag of the index.html file.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <title>A simple translator application using the Yandex API</title>
    <style>

    body{
      overflow-x: hidden;
      overflow-y: hidden; 
      background: linear-gradient( to right, DodgerBlue, lightblue);
    }

    </style>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <script src='https://code.responsivevoice.org/responsivevoice.js'></script>
  </body>
</html>

To make the application speak, we require a single function from the ResponsiveVoiceJS library:

responsiveVoice.speak()

We can embed this function within our audio handlers and have something like this:

  translateSpeak:function(){
    responsiveVoice.speak(this.Text);
  },

  responseSpeak:function(){
    responsiveVoice.speak(this.ResponseText);
  }

The speak() function takes in the text in either one of the two data variables and plays it.

Inlcuding Styles

Lastly, let's include some scoped Styles to help things stay pretty:

<style scoped>
#parent_translate {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
select {
  padding: 0.2em 0em;
  margin: 0;
  font-family: 'Indie Flower', cursive;
}
#submit {
background: #4ed34c;
padding: 0.7em;
border: none;
border-radius: 1px;
cursor: pointer;
color: black;
}
#input, #output {
  background-color: #f1f1f1;
  width: inherit;
  height: inherit;
  text-align: center;
  font-size: 30px;
  border-radius: 60px;
}
#input {
  margin: 0px 2px 0px 0px;
}
#output {
    margin: 0px 0px 0px 2px;  
}
textarea {
  width: inherit;
  height: 60%;
  margin: 0px;
  padding: 45px 20px;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-align: center;
  font-size: 25px;
  font-family: 'Indie Flower', cursive;
  font-weight: bold;
}
#input > div, #output > div {
  width: inherit;
  height: 20%;
  margin: 0px;
  padding: 0px;
}
#input > div > img, #output > div > img {
 padding: 10px 0px 0px 0px;
 width: 12%;
 height: 60%;
 cursor: pointer;
}
</style>

That's really everything for the translate component, things are about to get functional and way more interesting.

Building The Root Component

Before we start writing code for this component, I want us to quickly explore the Yandex Translate API and retrieve a free key if you haven't already done that because it's essential to the further parts of this project.

After creating an account with Yandex :

You will be able to create a free key :

Writing The MarkUp

The root component doesn't need so much MarkUp so we will only write a few lines in which we would plug in the translate component as a custom tag :

<div id="app">

<h2>VUE AUDIO TRANSLATOR </h2>

<div id="translate">

<translate v-bind:AvailableLanguages="AvailableLanguages" v-bind:TranslateText="TranslateText" v-bind:ResponseText="ResponseText"  @updateFromLanguage="updateFromLanguage($event)" @updateToLanguage="updateToLanguage($event)" @translate="handleTranslation($event)">
</translate>

</div>

</div>

There are quite two noteworthy activities going on on the <translate> custom tag, let's look at them:

AvailableLanguages, TranslateText and ResponseText are passed down as props.
@updateFromLanguage, @updateToLanguage and @translate are received as emitted events by the root component from the translate component.

Including Styles

Let's include some styles to help the UI look good:

<style scoped>
#translate {
  height: 45vh;
  max-width: 90%;
  margin: 2.5vh auto;
}
h2 {
  text-align: center;
  font-size: 1.6rem;
  color: black;
  font-weight: bold;
  font-family: 'Indie Flower', cursive;
}
</style>

At this point, we can run the application with this command:

npm run dev

The output shows that the UI of both components have been done but when the dropdown is clicked, it is not populated with languages. This is because we have not written the scripts to drive this functionality.

Let's do that now.

Writing The Javascript

Let's do three things in this component:

Import the translate component.
Register the component
Initialize variables

import translate from './components/translate.vue'

export default {
  name: 'app',

  components: {
    translate : translate
  },

  data () {
    return {
      TranslateText : '',
      ResponseText : '',
      CurrentLanguage : 'en',
      TranslateLanguage : 'fr',
      AvailableLanguages : {}
    }
  }

  }

Hooking Into The Created() Lifecycle Method

Vue.js allows us to hook into different component lifecycle methods and do different things to enhance the flexibility of the application. For this application, we want to send a GET request to the Yandex Translate API when the application is created. Since Yandex Translate API allows us to make an HTTP request for a JSON payload of the supported languages alongside their codes, we will send a request whenever the application is created.

We need an HTTP client to send this request so let's get one, while there are a number of competent alternatives ( vue-resource, Fetch API etc ), we’ll be using the Promise based HTTP client axios.

Let's pull in axios and a small wrapper for integrating axios to Vue.js :

npm install --save axios vue-axios

To actually use axios and vue-axios, we need to import and use them into the src/main.js file :

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

new Vue({
  el: '#app',
  render: h => h(App)
})

Now that we have set up axios, we can request for the object of supported languages and their codes on every creation of the application:

 created(){

  var self = this;

 this.axios.get('https://translate.yandex.net/api/v1.5/tr.json/getLangs?ui=en&key=YOUR_KEY_GOES_HERE')
  .then(function (response) {
    self.AvailableLanguages = response.data.langs;
  })
  .catch(function (error) {
    console.log(error);
  })

  }

After querying the Yandex Translate API, the response is asynchronously passed back as a Promise, we dig a bit into the response and update the value of the AvailableLanguages object.

Writing The Translate And ValidateResponse Methods

This is the central theme of this entire article because this is where the actual translation of texts and validation of requests happen. We would be doing three simple things here:

Making a request to the Yandex Translate API with our unique key and the text to be translated.
Checking the response to confirm whether the text was translated properly or if an error was returned.
Updating the value of the ResponseText data variable if the response code is 200 or logging an error string to the console when it's not.

translate:function(){

  var self = this;

 this.axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=YOUR_KEY_GOES_HERE&text='+self.TranslateText+'&lang='+self.CurrentLanguage+'-'+self.TranslateLanguage+'&format=plain')
  .then(function (response) {

  self.validateResponse(response);
  })
  .catch(function (error) {
    console.log(error);
  })

  },

  validateResponse:function(response){

        if (response.status === 422) {

            console.log('Could Not Translate Text Please Try Again Later');

        } else if (response.status === 413) {

            console.log('Please Enter A Shorter Text to translate');

        } else if (response.status === 200) { 

           this.ResponseText = response.data.text[0]

        } else {

          console.log('Cannot translate at this moment please try again later');
        }
    }

That is pretty much the entire function of these methods, let's see how the root component handles the emitted events from the translate component.

Writing The Event Handlers

From the earlier section above, we know that the root component has to handle three events emitted by the translate component:

@updateFromLanguage, @updateToLanguage and @translate

Let's write the methods to handle these respectively:

  updateFromLanguage:function( value ){
    this.CurrentLanguage = value;
    this.translate();

This handler receives a value from the translate component and updates the value of the CurrentLanguage variable with it. It then calls the translate() method to complete its job.

This is the method that is triggered on the root component whenever a new language ( the language to be translated from ) is selected.

The reason it calls on the translate method is so that a user can get instant updates on translations as they toggle between languages, without having to hit the submit button every time.

  updateToLanguage:function( value ){
    this.TranslateLanguage = value;
    this.translate();
  }

This method does nearly the same thing as the one above, the only difference is that it works on the selection of the language being translated to, rather than the language being translated from.

Lastly, behold the method for handling click events to the submit button of the translate component:

  handleTranslation:function( value ){
    this.TranslateText = value;
    this.translate();
  }

This handler simply updates the TranslateText variable with the value of the parameter received from the translate component, then it translates the text by calling the translate() method.

Running The Application

We can run the application with this command :

  npm run dev

This should open a new window in the browser at the development address localhost:8080 :

That is all! We have just built a functional audio translator application and it's ready for testing.

Build The Application

We can optionally build for production with this command:

  npm run build

Conclusion

In this tutorial, we have seen how to build a simple audio translation application in Vue.js. We also used a powerful HTTP client, axios to query the Yandex Translate API for data.

We can conclude that Vue.js is a very exciting Progressive Framework to build lots of awesome projects.

The code for this project is available on Github.

Goodbye code. No more of you for a bit.

Jordan Irabor — Thu, 14 Dec 2017 16:07:55 +0000

"You know Sam. It's quite strange how one moment you have a burning desire for something and the next, you don't even want to speak about it".

I allowed my gaze to focus on the only source of light in the room that was my computer's screen.

"I wouldn't blame you mate, you had all those clients' jobs to attend to. It sucks when you have to do stuff for money so you abandon other stuffs you enjoy doing. I'm sure you just need a break, you'll have the zeal again mate".

Sam responded accurately.

"I'm not sure about this, Sam. I believe it's over".

Hello there, my name is Jordan.

When it's May next year, it will be a complete year since I started writing actual code.

In the first few months, it was kind of a hassle to write code and be satisfied with it but then I got to understand that no one starts out perfect; we get better by the day.

Anyway, that's not the reason for this post. This is the reason:

On the first day of this month, my friend, Sam and I started the 30 days of code challenge because the university is out of session until next year.

The first, second and third days were aflame 🔥 but the fourth day came and...

I stopped.

I couldn't anymore. Here's the reason:

On the fourth day, I looked at my code schedule and said "Goodbye code. No more of you".

You can't blame me, I burnt out.

Actually, I burn out fairly easily but I thought I had everything under control this time around.

I had a plan and it was a good plan. Here's the plan:

I'll write lots of code each day for the challenge since I don't have school work to be bothered with.

I'll use the rest of the day to work on the stuff I do for clients.

Lol. Like every other time, things didn't go as planned and here's what ended up happening:

I spent the most of the day writing code for clients, because all of a sudden, they started demanding for extra features.

I had only a few hours left each day to do stuff for the challenge.

I burnt out and suddenly did not want to look at or hear about code anymore.

That's it. That's what happened.

I'm writing this post to let you know why I haven't been blogging about my code.

I'm not a loser so I didn't just give up.

I burnt out.

When I don't feel this way anymore, I'll do the challenge again and smash it this time around 🔥🔥🔥

Music And Video Player With VueJS | Day 2 & 3 [30 Days Of Code]

Jordan Irabor — Tue, 05 Dec 2017 05:53:35 +0000

Hello guys, I've been gone for a bit after writing the first technical article for the first project in my 30 days of code challenge.

I'm back now and I'm writing about the two projects I covered on the second and third days.

These projects may seem a bit rushed because I was quite occupied at the time but I'm going to write about them anyway 🔥

The source code for the music player is available here on Github

The source code for the video player is available here on Github

Building A Basic Music Player With VueJS

VueJS is an awesome JS library, it takes away the stress and simply makes everything cooler to do.

Here's a visual representation of the final results of the music player:

Enough talk, let's start building!

Setup VueJS

For the sake of this tutorial, we will be using the Vue CLI for installation and setup, an alternative would be to reference Vue from a CDN

 https://unpkg.com/vue

We can install the Vue CLI with this command:

$ npm install --global vue-cli

Next, let's create a new project:

$ vue init webpack-simple vueMusicPlayer

After responding to a few terminal prompts, we would have set everything up.

Let's navigate into the working directory, install dependencies and start our application:

$ cd vueMusicPlayer
$ npm install
$ npm run dev

Defining The Vue Components

For this application, we will be defining two components, the first will display the song's thumbnail and music frame at the left side of the screen while the other component will hold the playlist at the right side of the screen.

First, let's create a components folder in the src directory [ it's not necessary to do this but I like keeping a clean working directory ].

Next, we create the two components in the components directory. We will call them:

musicFrame.vue

playList.vue

The logic behind the components of this music player is:

The root component [ App.vue ] holds both children components [ musicFrame and playList ] and listens for the events they emit from time to time. Whenever a song in the playlist [ to the right ] is clicked on, the root component catches a new event [ also with some data ] and updates the variables that represent the current song playing.

Great!

Building The MusicFrame Component

Let's take a quick look at the template structure for the musicFrame component:

<template>

<div id="musicframe">

<div id="border">

<img v-bind:src="currentImage" width="100%" height="100%"/>

<div id="controls" @click="audioFunction">

<audio ref="audio" id="audio">

<source v-bind:src="currentSong">

Your browser does not support the audio element.

</audio>
<button>Play</button>
<button>Pause</button>

</div>

</div>
</div>

</template>

The musicFrame has a wrapping div tag with the class "musicFrame", within this tag, there is a border div tag that shelters other internal tags.

An <img/> tag sits directly below the border tag, it has the value of its 'src' attribute bound to a currentImage Vue variable [ this variable updates the song's thumbnail whenever a new song is selected ].

Now, for the more obvious part, a div tag with an id of "controls" wraps the HTML5 audio element, it also listens for onclick functions and calls an audioFunction function as a handler.

Cool!

The tag takes a ref [ it will help address the tag specifically ] while the nested tag has a dynamic src attribute to allow dynamic music behavior.

That was pretty tiring to go into detail with, let's see what the innards of the script tag hold.

<script>
import { bus } from '../main';
export default {
  name: 'music-frame',
props : {

 currentSong: {
  type : String
 },
 currentImage: {
  type : String
 }
  },
  data () {
    return {
    }
  },
  methods: {
    audioFunction: function(e){
      let value = e.target.innerText;
      switch(value) {
        case "Play" : {
              console.log(this.$refs.audio.play());
              break;
        }
        case "Pause" : {
              this.$refs.audio.pause();
              break;              
        }
      }
    }
  },
  created(){
    bus.$on('reload', () => {
    this.$refs.audio.load();
    this.$refs.audio.play();
    })
  }
}
</script>

Well, for this bit, it isn't as complicated as it may appear at first. Let's go.

Firstly, we are importing a bus [ this is just an instance of a Vue object defined on the global main.js file ] because we need it to drive events and data between the children components [ musicFrame and playList ].

After exporting default [ creating a reusable module ], we reach out and receive props from the root component [ App.vue ]. In this component, we will not be registering any variable [ it's the reason the data function returns an empty object].

Next, we register the single audioFunction method, this is the method called by the controls div whenever any of its <button/> children are clicked. This method pipes the innerText on the target element through a switch statement and is able to toggle media controls e.g play, pause etc

Lastly, we attach a live cycle hook to this component, this hook fires as soon as the application is created. It's objective is to listen for a reload on the imported bus [ from the playList component ] and play a song whenever that event is caught [ this is the logic that helps to ensure that a new song is played when selected].

That's everything with the musicFrame component.

Building The PlayList Component

Like the previous component, let's begin by examining the template structure:

<template>

  <div id="playlist">

    <div id="secborder" ref="playlist" @click="changeSource">

    <div class="song" url-value="http://sami-server.info/hossein2/95/11/Music/06/Ed%20Sheeran%20-%20Shape%20Of%20You.mp3" picture-value="https://www.billboard.com/files/media/ed-sheeran-july-2017-billboard-1548.jpg"> Ed Sheeran  &nbsp;∘ &nbsp; Shape of you </div>
    <div class="song" url-value="http://jweb.taconic.net/music/linkin_park-faint.mp3" picture-value="https://orig00.deviantart.net/65e3/f/2009/335/6/2/linkin_park__faint_by_jimeye.jpg">Linkin Park &nbsp;∘&nbsp; Faint</div>
    <div class="song" url-value="http://dl.asra-music.com/foreign%20full%20album/Pink/Pink%20-%20The%20Truth%20About%20Love%20(2012)/04%20-%20Just%20Give%20Me%20A%20Reason.mp3" picture-value="https://i.ytimg.com/vi/3pDj1U6Zd08/maxresdefault.jpg">Pink &nbsp;∘&nbsp; Just give me a reason</div>
    <div class="song" url-value="http://tegos.kz/new/mp3_full/Clean_Bandit_-_Symphony.mp3" picture-value="https://i.ytimg.com/vi/jtTI-XuW8i8/maxresdefault.jpg"> Clean Bandit &nbsp;∘&nbsp; Symphony</div>    <div class="song" url-value="http://zaycev-mp3.net/mp3/linkin_park_powerless_[zaycev-mp3.net].mp3" picture-value="https://wallpapercave.com/wp/ufT9VZa.jpg">Linkin Park &nbsp;∘&nbsp; Powerless</div>
    <div class="song" url-value="http://rm.sina.com.cn/wm/VZ2008072314565310537VK/music/MUSIC0807231507294087.mp3" picture-value="https://i.ytimg.com/vi/oY5BYjsrIHk/maxresdefault.jpg">Linkin Park &nbsp;∘&nbsp; Somewhere I belong</div>
    <div class="song" url-value="http://s4.faz-dl.xyz/mr-reese/single/july2017/week1/Rihanna%20-%20Wild%20Thoughts%20Solo%20Version%20-%20MP3%20320.mp3" picture-value="http://thetropixs.com/wp-content/uploads/2017/06/Rihanna-Wild.jpg"> Rihanna &nbsp;∘&nbsp; Wild thoughts</div>
    <div class="song" url-value="http://a.tumblr.com/tumblr_mirhiitqaC1roewk4o1_r1.mp3" picture-value="https://i.ytimg.com/vi/vAsztnDeZ1Q/maxresdefault.jpg">Demi Lovato &nbsp;∘&nbsp; Heart Attack</div>
    <div class="song" url-value="https://70mack.co/wp-content/upload/2017/10/Davido_FIA.mp3" picture-value="https://3.bp.blogspot.com/-J7w5lyePAfw/WgbF1knkwJI/AAAAAAAAVdI/t2ZOSjmLtssuxuT-czWbETE-hc2DC9wIACK4BGAYYCw/w1200-h630-p-k-no-nu/Davido%2BFia.png"> Davido &nbsp;∘&nbsp; FIA</div>    
    <div class="song" url-value="http://img0.liveinternet.ru/images/attach/b/3/3656/3656927_eminem__mockingbird.mp3" picture-value="https://wallpapercave.com/wp/WlHnNj6.jpg">Eminem &nbsp;∘&nbsp; Mocking Bird</div>    

    </div>


  </div>

</template>

Messy stuff. I know.

The template for this component is pretty straightforward, it's just a bunch of <div/> tags holding custom attributes: url-value and picture-value, we need these values to supply the and tags with dynamic data whenever a song [div] in the playlist is clicked.

Next, the <script/> section:

<script>
import { bus } from '../main';
export default {
  name: 'playlist',
  props : {

 currentSong: {
  type : String
 },
 currentImage: {
  type : String
 }
  },
  data () {
    return {
    }
  },

  methods: {
    changeSource : function(e) {
      let songValue = e.target.attributes[1].value;
      let songImage = e.target.attributes[2].value;
      this.$emit('updateData', [songValue, songImage]);
      bus.$emit('reload');
    }
  }
}
</script>

Remember that bus the previous component imported? Yes. That bus, this component has to import it too so there is a medium for communication between the both of them.

In the next steps, we do a few basic things like receiving props from the root component, not declaring any variables [ and it's not because we are too cheap to afford one ].

Lastly, we declare a method, the ChangeSource and its job is quite as its name says:

This method gets the new values [URL for song and image] from the selected song [div] in the playlist, emits an event to the root method [ with the two values earlier retrieved]. This method also emits a 'reload' event using the bus.

Awesome.

And Now For The Root Component

The root component is responsible for coordinating the data that runs between the two children component and making sense out of it. Let's see what this component has under the carpet.

As usual, the template section is examined first:

<template>

<div id="app">

<videoframe v-bind:currentVideo="currentVideo"></videoframe>

<playlist v-bind:currentVideo="currentVideo" @updateData="swapData($event)"></playlist>

</div>

</template>

Unlike the other two components, the root component has its template in a nice, precise and concise fashion. A root div tag with an id "app" wraps the two nested children components.

The children components have two variables bound to their dynamic attributes.On playlist, the root component listens for an "updateData" event and handles it with a "swapData" function.

Nice, precise and concise.

Time for a peek at the script:


<script>
import videoframe from './components/videoFrame'
import playlist from './components/playList'
export default {
  name: 'app',
  components: {
  'videoframe' : videoframe,
  'playlist' : playlist
},
  data () {
    return {
      currentVideo : ''
    }
  },
  methods: {
    swapData: function(data) {
     this.currentVideo = data;
    }
  }
}
</script>

First, we import musicFrame and playList [obviously because we need them], then we register them as components.

We define two key/value pairs in the data function, the first one will hold data for the current song playing, while the other will at first hold a default image banner for the musicFrame banner and alter adopt thumbnails dynamically.

Lastly, we define a single method called swapData, this method receives the data emitted in an event from a child component child and toggles values dynamically.

Awesome 🔥

That's all for the music player app, now it's time for the video player.

Here's a visual representation of the music player application we will be creating:

I would also go deep into explaining the video player application but the truth is, it is really similar to the music player application in logic, so there really isn't any need.

Conclusion

Awesome! 🔥 That is all it takes to build a music player and video player in VueJS.

I may have left a bit of the actual code out this article for brevity purposes.

To run these projects locally, type in the following commands in a terminal.

-- clone the repository --

git clone https://github.com/Jordanirabor/vueMusicPlayer

OR

git clone https://github.com/Jordanirabor/vueVideoPlayer


-- navigate into the directory --

cd vueMusicPlayer

OR

cd vueVideoPlayer

-- install dependencies --

npm install 

-- serve with hot reload at localhost:8080 --

npm run dev

-- build for production with minification --

npm run build

I'll be building and writing about another project tomorrow, stay tuned 🔥🔥🔥

Scientific Calculator With VueJS | Day 1 [ 30 days of code ]

Jordan Irabor — Sat, 02 Dec 2017 16:03:45 +0000

Hello guys! 🔥 I made a post about doing the 30 days of code and technical articles challenge last month, here's the article for the first project [ done yesterday ].

The source code for this article is available here on Github

Introduction

This article teaches how to build a scientific calculator using VueJS.

Here's a visual display of end result:

Let's get started.

Setup VueJS

For the sake of this tutorial, we will be using the Vue CLI for installation and setup, an alternative would be to reference Vue from a CDN

 https://unpkg.com/vue

We can install the Vue CLI with this command:

$ npm install --global vue-cli

Next, let's create a new project:

$ vue init webpack-simple vueCalulator

After responding to a few terminal prompts, we would have set everything up.

Let's navigate into the working directory, install dependencies and start our application:

$ cd vueCalulator
$ npm install
$ npm run dev

Defining The Vue Components

Since we are building a calculator with two modes [ Basic and Advanced ], let's define two components to represent each one.

First, let's create a components folder in the src directory [ it's not necessary to do this but I like keeping a clean working directory ].

Next, we create two new Vue files in the components directory. We will call these files:

Advanced.vue

Basic.vue

The logic behind the different modes of this calculator is:

The root component [ App.vue ] will hold the input field while the Basic and Advanced components will be toggled within the space beneath the input field.

Now let's get down to business!

Build the Basic component

Let's write the template, data, and methods that will reside within the Basic component.

The Basic template will hold calculator buttons that listen for click events on any of the buttons

We can see that the buttons are wrapped within a root div tag that calls a buttonClick method whenever a button is click.

Next, let's export and define the methods within our Basic component, we simply do this by writing a script tag:

In this script tag, we have not defined any data [ we don't need any on this component ], we have defined a single buttonClick method that catches click events, gets the innerText value and emits an event to the root component.

We need this method so that the root component can act on the buttons that are clicked when the calculator is in Basic mode.

Build the Advanced component

The Advanced component is very much like the Basic component in structure and logic.

First, let's write the template that will hold Advanced calculator buttons and listen for click events on any of the buttons.

Similar to the Basic component, we will not be defining any data within the data object, we will also emit an event to the root component whenever a button is clicked.

We can see that the buttonClickmethod in the Advanced component is exactly like the one in the Basic component.

Let's dig into the root component!

Lastly, let's connect the entire application together via the root component [ App.vue ].

The code structure for the root component is pretty straightforward.

Just as we did with the two children components, we need to define the template that will hold the input field and house the toggling of the other two components [ the children components mostly contain buttons for the calculator ].

The root template will have:

A mechanism to toggle between advanced and basic modes [using v-show]

An input field to display the punched digits

A housing tag for the children components [in this case, it is a div tag with a class called buttons']

Here's a visual display of the template code:

From this code, we can see that the Basic and Advanced components are nested within a div tag [with the class 'buttons'].

The root component registers an event listener to capture and act upon the emitted events by the children components.

Let's see how things are handled within the script section in the root component[:

First, we import the basic and advanced components into the root component because we need to reference them.

Next, we declare the name of the application and create a components object (this is where we register the components).

In the data section, we register three key/value pair:

current -- This keeps track of the current input value

toggle -- This stores the current toggle value

mode -- This stores the current mode

Next, we register a few methods :

The changeToggle is responsible for toggling between the Basic and Advanced mode and also updating the value of mode.

The doStuff method handles the events that are emitted by the children components. It receives a data parameter and pipes it through several cases. When a case is matched, it calls the right function to handle the mathematical calculations.

For this application to run correctly, there are a lot more mathematical functions defined, though they are not included in the snapshot.

Conclusion

Awesome! 🔥 That is all it takes to build a scientific calculator with VueJS.

The source code for this project is much longer than what is presented in these snapshots for brevity purposes.

To run this project locally, type in the following commands in a terminal.

-- clone the repository
git clone https://github.com/Jordanirabor/Scientific-Calculator-With-VueJS

-- navigate into the directory --
cd Scientific-Calculator-With-VueJS

-- install dependencies --
npm install

-- serve with hot reload at localhost:8080 --
npm run dev

-- build for production with minification --
npm run build

I'll be building and writing about another project tomorrow, stay tuned 🔥🔥🔥

30 days of code challenge starts tomorrow!

Jordan Irabor — Thu, 30 Nov 2017 07:22:50 +0000

Hello guys, the time is finally here.

While I've been following along with other developers' code projects and challenges, I've been planning on doing something of my own!

I made up my mind for good this time.

I'm going to do a 30 days of code challenge starting from tomorrow, I need all the support I can get, guys.

I'll build one [ not so complex ] project each day and blog about it here on dev.to so technically, it's also going to be a 30 days of technical articles challenge XD.

Though I've been told that it's not easy to do, I'mma do it. Countdown to tomorrow when it all starts.

Anticipate the flames and Merry Xmas.

Building Dynamic Breadcrumbs In Laravel

Jordan Irabor — Wed, 29 Nov 2017 19:15:49 +0000

The Importance of Breadcrumbs

In the past, web developers were more concerned with the functions (back-end) and information web applications could deliver and didn't pay as much attention to the visual appearance (front-end) of web pages. This wasn't entirely their fault, there weren't fitting technology to develop complex web page designs at that time. The few ones that could do a bit of magic were a hassle to use.

Today, it's a whole different story; the UI/UX design stage in web development is just as important as the pre-planning of the backend logic that keeps everything running. There lie a wide spectrum of acceptable design practices that can help a web application earn the "user-friendly" tag, but there are even more design flaws that everyone should watch out for.

People hate getting unsolicited pop-up boxes in their faces; I do too, but pop-ups aren't the only things that can grind the user's gears. The inability to locate one's self and navigate easily on a website is as bad as getting lost in a big mall; the same feeling of overwhelmingness.

While that could be a serious problem, it doesn't have to be! Breadcrumbs can be the easiest solution to giving users the smooth web navigation experience they deserve.

Breadcrumbs provide a navigation system to help users know their current location in relation to other web pages on a website. The name breadcrumbs is derived from the well-known fairy tale Hansel and Grettel because it does pretty much the same thing; leaves a trail behind to prevent users from getting lost hence promoting user experience. Breadcrumbs on a website will also reduce the number of actions a user has to trigger to reach a page of choice.

Setting up breadcrumbs in Laravel is quite simple. There is a package that takes care of most of the logic, and we will be looking at how to use this package and get the best features out of it.

The source code for this tutorial is available here on GitHub.

Setting up the Laravel application

This entire tutorial is targeted at Laravel developers.

We will be pulling in the Laravel Breadcrumbs package via Composer and writing code to render breadcrumb navigation services dynamically, depending on what page the user is viewing.

The resulting code for this article is available here on GitHub.

For the sake of this article, we will be installing a fresh instance of a Laravel application.



laravel new breadcrumbs



composer create-project --prefer-dist laravel/laravel breadcrumbs

Next, we pull in the Laravel Breadcrumbs package by typing the command below in the terminal.




composer require davejamesmiller/laravel-breadcrumbs

Creating the HTTP routing

Let's create some HTTP routes ( and name them as well ) in theroutes/web.php file — we will be referring to these routes by name in later parts of this article.

These are the routes needed for this example:

routes/web.php




Route::get('/',  ['as' => 'home', 'uses' => 'MainController@home']);

Route::get('/continent/{name}',  ['as' => 'continent', 'uses' => 'MainController@continent']);

Route::get('/country/{name}',  ['as' => 'country', 'uses' => 'MainController@country']);

Route::get('/city/{name}',  ['as' => 'city', 'uses' => 'MainController@city']);

To demonstate the power of Laravel Breadcrumbs, we will build a small application where we register continent, country and citiy models. We will also say that a continent hasMany countries and a country hasMany cities.

To create these models, we write these commands to the terminal:



php artisan make:model Continent
php artisan make:model Country
php artisan make:model City

Let's also create the migration files for each of these models:



php artisan make:migration continents
php artisan make:migration countries
php artisan make:migration cities

Next, let's define the relationship methods in each one of the model classes:

app/Continent.php



namespace App;
use App\Country;

use Illuminate\Database\Eloquent\Model;

class Continent extends Model
{
    public function country(){
        return $this->hasMany(Country::class);
    }
}

app/Country.php



namespace App;

use App\City;
use App\Continent;

use Illuminate\Database\Eloquent\Model;

class Country extends Model
{

    protected $guarded = [];
    public function city(){
        return $this->hasMany(City::class);
    }

    public function continent(){
        return $this->belongsTo(Continent::class);
    }
}

app/City.php



namespace App;


use App\Country;

use Illuminate\Database\Eloquent\Model;

class City extends Model
{

    protected $guarded = [];
    public function country(){
        return $this->belongsTo(Country::class);
    }
}

Notice that guarded is set to an empty array, this is because we intend to do some form of mass assignment when seeding the database. Whenever you make a change like this to a model file, always remember to revert the change before the application gets to production stage.

Now let's create a controller that will handle all the HTTP requests the application receives. We will call the controller MainController and will declare different actions (methods) to compact instances of models with the returning view, each view will display its own breadcrumb(s).

To create this controller, we write this command to the terminal:



php artisan make:controller MainController

Now let's write the actions (methods) that will return views after handling the HTTP requests.

app/Http/Controllers/MainControllers.php



namespace App\Http\Controllers;
use App\Continent;
use App\Country;
use App\City;
use Illuminate\Http\Request;

class MainController extends Controller
{
    public function home(){
        return view('home');
    }

     public function continent($name){
           $continent = Continent::where('name', $name)->first();
        return view('continent', compact('continent'));
    }

     public function country($name){
           $country = Country::where('name', $name)->first();
        return view('country', compact('country'));
    }

     public function city($name){
           $city = City::where('name', $name)->first();
        return view('city', compact('city'));
    }
}

We have included the relationships between models so we can explore the capabilities of the Laravel Breadcrumbs package when it comes to dynamic linking and relational properties.

Now let's create some views to match the models we just created. In the resources/views directory, we'll add four new files, we'll name them:



home.blade.php
continent.blade.php
country.blade.php
city.blade.php

Their names are quite intuitive; the first will hold the frontend code for the homepage, the second will hold the frontend code for the continent page, the third will hold the frontend code for the country page and the last will hold the frontend code for the city page.

Great, now let's put some code in these new views:

resources/views/home.blade.php



<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('home') }}

</body>
</html>

resources/views/continent.blade.php



<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('continent', $continent) }}

</body>
</html>

resources/views/country.blade.php



<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('country', $country->continent, $country) }}

</body>
</html>

resources/views/city.blade.php



<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

 </head>
 <body>

{{ Breadcrumbs::render('city', $city->country->continent, $city->country, $city) }}

</body>
</html>

The Continent and Country models exhibit a One To Many relationship. Many cities belong to one country and many countries belong to one continent. A continent is the grandparent of a city while a country is the parent of a city. We won't be diving into the logic that binds Laravel relationships in this article but if you wish to learn about it, you can find good knowledge here.

Lastly, Let's modify the migration files a bit so they define the proper structure for the tables in the database.

database/migrations/2017_11_02_092826_continents.php



use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Continents extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('continents', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

database/migrations/2017_11_02_092835_countries.php



use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Countries extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('countries', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('continent_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

database/migrations/2017_11_02_092845_cities.php



use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class Cities extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('cities', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('country_id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        //
    }
}

We can run the migrations with this command on the terminal:



php artisan migrate

Let's insert some data into the database so we can test this application. To do this, we'd create three factory files [ one for each model ] and update the run method of the [ already existing ] DatabaseSeeder.php file in the database/seeds directory.

To create the factory files, we'd write these commands to the terminal:



php artisan make:factory ContinentFactory --model=Continent
php artisan make:factory CountryFactory --model=Country
php artisan make:factory CityFactory --model=City

The commands above will create these files respectively:

database/factories/ContinentFactory.php




use Faker\Generator as Faker;

$factory->define(App\Continent::class, function (Faker $faker) {
    return [
        //
    ];
});

database/factories/CountryFactory.php




use Faker\Generator as Faker;

$factory->define(App\Country::class, function (Faker $faker) {
    return [
        //
    ];
});

database/factories/CityFactory.php




use Faker\Generator as Faker;

$factory->define(App\City::class, function (Faker $faker) {
    return [
        //
    ];
});

Lastly, let's update the DatabaseSeeder.php file that ships with every fresh instance of a Laravel application. We'll use this file to insert three rows into the database, we'll insert Africa [ of the continent model], South Africa [ of the country model ] and Johannesburg[ of the city model ], we'll also specify their relationships :




use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {

      factory(App\City::class)->create([
        'name' => 'Johannesburg',
        'country_id' => function(){

            return factory(App\Country::class)->create([
                'name' => 'South Africa',
                'continent_id' => function(){

                    return factory(App\Continent::class)->create([
                        'name' => 'Africa' ])->id;
                }
                ])->id;
        }
        ]);
    }
}

We can seed the database with this command to the terminal:



php artisan db:seed --class=DatabaseSeeder

Setting up the breadcrumbs file

We need to create a breadcrumbs.php file in the routes directory. This file will be referenced whenever a breadcrumb is rendered because it instructs Laravel on how to process the breadcrumb information. Without this file, Laravel will squawk an error in our faces whenever it encounters a call to a breadcrumb function in the views.

The first breadcrumb function we will be defining in our newly created breadcrumbs.php file is the one for our homepage. The 'home' breadcrumb will be loaded whenever the route named 'home' is visited.

routes/breadcrumbs.php



Breadcrumbs::register('home', function ($breadcrumbs) {
     $breadcrumbs->push('Home', route('home'));
});

Rendering a static breadcrumb

In the above code, we see that the Breadcrumbs class is used to call a static method. The register method registers a new breadcrumb with the name home and calls a closure. Then the closure takes a $breadcrumbs parameter and pushes a new breadcrumb instance alongside its URL.



 $breadcrumbs->push('Home', route('home'));

The 'Home' in the push method is hard-coded and what will appear when the breadcrumb is rendered on the home view or any other view that requires the Home breadcrumb to display a complete navigation chain.

The route('home') returns the URL of 'home' and will be the link Home leads to when it is rendered on any view.

Finally, in the home view code, this is how we render the breadcrumb.

resources/views/home.blade.php



{{ Breadcrumbs::render('home') }}

The render method receives the name of the breadcrumb to display on the home view. In more complex navigation chains that include some form of database relationship, the render function will accept as many instances of Models as arguments, as are required to render the complete breadcrumb navigation chain.

We will talk more about this next.

Rendering a dynamic breadcrumb

What happens when we have a web application where we do not know the exact attributes of the pages users will be visiting? For example, we have a website that displays information about continents, countries, and cities. We can't always hard-code the name of any continent, country or city to the routes/breadcrumbs.php file because we never know which one a user will be viewing.

To make it possible for dynamic breadcrumb rendering in real time, we can write the routes/breadcrumbs.php file to efficiently work with the dynamic Models in our application and create the breadcrumb navigation chain as users explore deeper layers in our web application.

As we said before, the continent Model hasMany countries and the country Model hasMany cities. Knowing this, we should be able to get a breadcrumb display that looks like this if we visit Johannesburg of South Africa where South Africa belongs to Africa.

To generate the chain of breadcrumb navigation using Model relationships as we see above, we start by writing the code for registering the continent breadcrumb:

routes/breadcrumbs.php



Breadcrumbs::register('continent', function ($breadcrumbs, $continent) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($continent->name, route('continent', ['name' => $continent->name]));
});

We register a continent breadcrumb and pass a closure. The closure accepts a new parameter, the $continent (which will be supplied by the calling view in real time). Next, the home breadcrumb is assigned as the parent and lastly, the name and URL of the $continent breadcrumb is pushed.

To render the breadcrumb in the continent view code, we write this snippet:

resources/views/continent.blade.php



{{ Breadcrumbs::render('continent', $continent) }}

The render method receives the name of the breadcrumb as the first argument. It also receives a $continent argument that will help in resolving the instance of the continent Model to its basic properties such as name and URL.

On my local machine, visiting http://127.0.0.1:8000/continent/africa will result in the Africa continent page with this breadcrumb display.

Rendering a complete navigation chain

We have looked at the code to render individual breadcrumbs, now let's look at the code and logic to render a complete breadcrumb chain. For the sake of this article, we will be rendering a city page that is related to a country page, then a continent page and lastly, a home page.

This is the final code [for this article, it can get way bigger depending of what you aim to achieve ] for the routes/breadcrumbs.php file:

routes/breadcrumbs.php



Breadcrumbs::register('home', function ($breadcrumbs) {
     $breadcrumbs->push('Home', route('home'));
});

Breadcrumbs::register('continent', function ($breadcrumbs, $continent) {
    $breadcrumbs->parent('home');
    $breadcrumbs->push($continent->name, route('continent', ['name' => $continent->name]));
});

Breadcrumbs::register('country', function ($breadcrumbs, $continent, $country) {
    $breadcrumbs->parent('continent', $continent);
    $breadcrumbs->push($country->name, route('country', ['name' => $country->name]));
});

Breadcrumbs::register('city', function ($breadcrumbs, $continent, $country, $city) {
    $breadcrumbs->parent('country', $continent, $country);
    $breadcrumbs->push($city->name, route('city', ['name' => $city->name]));
});

We have added two more breadcrumbs — country and city — We need these additional breadcrumbs so that all the breadcrumbs can effectively communicate with one another when a view calls for a navigation chain that involves more than one breadcrumb.

The methods for registering and pushing the country and city breadcrumbs are the same as the ones for the continent breadcrumb so we will not be looking at it in detail.

To render the breadcrumb in the view code for the city page, we simply insert this snippet of code in the desired location:

resources/views/city.blade.php



   {{ Breadcrumbs::render('city', $city->country->continent, $city->country, $city) }}

The render method here receives the name of the breadcrumb as the first argument. Next, it receives a $city->country->continent argument which will evaluate to an instance of a continent Model, also it receives a $city->country argument which is the country the city belongsTo and lastly a $city instance.

That is it. We have completely generated our fully functional and dynamic breadcrumb navigation in only a few lines of code.

Conclusion

In a world where the 'users' of internet services seek for the easiest to use products, it is only be right for developers to add breadcrumbs to websites. This article has taught that, with just a few lines of code, we can create a fully functional navigation service. There are lots more that can be done with the Laravel Breadcrumb package [ for example, we can affect the style and layout to our taste ], feel free to explore it to its fullest power.

The source code for this tutorial is available here on GitHub.

Real-Time Smart Facebook Messenger Bot With No Code.

Jordan Irabor — Tue, 28 Nov 2017 20:03:44 +0000

In the past, building a regular bot would require large blocks of code and careful structuring of the logic that would drive the entire process. Today, developing simple and fairly complex bots can be achieved pretty easily, even without writing a single line of code; thanks to the technology that is available to us.

By the end of this article, we would have built a smart Facebook Messanger bot that is able to process messages sent to a Facebook page and respond appropriately in real time. We will not write a single line of code ( though we should if we intend to build a more complex bot ) for this implementation.

While this article promises that zero code is required to follow along, the article also assumes very basic knowledge working with the Facebook developer platform and DialogFlow ( formerly Api.ai ).

Let's create our own Facebook bot in just four steps:

Create An Agent
Integrating Facebook Messenger
Configuring Facebook Messenger
Testing the Facebook Messenger Bot

Create An Agent:

First, let's visit DialogFlow ( formerly Api.ai ) and sign in with a Google account. Immediately after that, we will be redirected to the 'Get Started' Page with an option to create a new agent. Click on the 'Create Agent' option to the left of the screen.

Next, let's fill out the form that is presented to us. For the sake of this article, we will call the agent smallTalkBot ( Well, why not? ). After the necessary fields are filled, click on the 'Save' button.

There really is no need to specify the ADD SAMPLE DATA field as we intend to create an empty agent.

On the new page, there will be a scrollable section to the left, we'll scroll down a bit so we can find the option that says 'Small Talk', click on it.

Great, now we are on the Small Talk dashboard and this is where most of the logic will be done so let's begin by enabling the Small Talk feature.

On the Small Talk dashboard, we can train our agent on how to engage in small conversations and respond adequately depending on the messages it receives. Let's begin by teaching the agent how to respond to questions under the About Agent category.

Protip: A great way to make the agent ( bot ) seem smarter is by entering several answer variants, it will help the agent respond differently to similar questions.

Though you don't have to fill in everything, for the sake of this article we will provide answers to all the suggested questions in the small talk dashboard. Click on the Save option when you are done.

Awesome stuff! We have completed the first step.

Integrating Facebook Messenger

On the left section of the agent's dashboard, there is an option that says Integrations, click on it. Great, now we have a page body that says One-click integrations.The page also has lots of integration options, let's modify the settings for the 'Facebook Messenger' integration by clicking on the 'SETTINGS' just below the icon.

We get a pop up with three fields, we need to enable the Facebook Messenger integration before we can start filling in the fields, so let's do that.

The three fields are:

Callback URL - This is the URL facebook will be sending data to whenever our page gets a message.

Verify Token - We need to specify a custom token here ( we'll specify the same token on Facebook when we create our app, so write a token you can remember ).

Page Access Token- This token will be given to us by Facebook after we create an app.

At this point, we cannot continue setting up the integration until we create the Facebook app that will be linked to the smallTalkBot. The reason is that we need the Page Access Token to proceed. Let's head over to the Facebook for developers platform ( in a new tab ) and create an app.

Now that we are here, let's fill in the details for a new Facebook app. Immediately that is done, we'll automatically be redirected to the app's dashboard. The screen also says Select A Product so let's select the messenger option and click on Set up.

Now, we scroll down a bit till we get to the Token Generation section. We need to select a page for our app and generate a token.

The generated token is the reason we came here, let's briefly go back to DialogFlow (in the other tab) and do three simple things:

Paste the token from Facebook in the Page Access Token field.

Copy the Callback URL ( Facebook needs this URL so it knows where to send data to )

Click on the Start Option to run our bot!

Hooray! Our bot is running now but let's not rejoice just yet, we need to do a bit more before we can start exchanging crazy texts with our creation over Facebook.

Configuring Facebook Messenger

Now, back on the Facebook Messenger Platform, just below where we generated the token for DialogFlow, there is a section that says Webhooks. Click on the Setup Webhooks Option.

Great work! Now there is a pop up with two fields and several checkboxes in our face, let's fill in the fields with the right data:

Callback URL - This is quite obvious, remember the Callback URL we copied from DialogFlow? Paste it in here.

Verify Token - Here, let's enter the same custom Verify Token we entered for DialogFlow. In my case, it's VERIFY_ME_HERE.

The checkboxes - We can ignore most of the checkboxes, we only need to subscribe to two events so let's check messages & messaging_postbacks.

Great! Now click on Verify and Save and we are good to go!

Congratulations, we have set the bot up successfully.

Testing the Facebook Messenger Bot

To test the bot, simply message the linked Facebook page and wait for the lightning response.

Conclusion

As promised in the beginning of this article, we have successfully built a ( seemingly smart and sarcastic ) bot that is able to respond to messages sent to a Facebook page based on the intent ( This is mostly NLP technology ) of the text it receives. As you test your bot out, you will realise that it isn't as smart as it appears and the reason is; it only responds to messages using the predefined texts we supplied when we created smallTalkBot.

Working with the Small Talk feature DialogFlow provides is just an atom of the awesome things that can be done with DialogFlow, for instance, you can train your bot to respond more accurately to the messages it receives!

While we haven't fully explored the complexity of DialogFlow, you can read the docs here if you wish to build an awesome bot that doesn't give the same responses all the time.

A Super-Simple Guide To Bitcoin And The Blockchain

Jordan Irabor — Tue, 10 Oct 2017 03:55:46 +0000

If children were asked to invent money for themselves, how would they do it?

Imagine that you’re back in kindergarten and this is the situation; each child may own one or more crayons, or own none at all. The kids with crayons can give them out in exchange for other items of equivalent value.

In the playground, some kids exchange their crayon for a pen, others do for a ruler or an eraser. More often, kids exchange crayons for money. It really depends on what is agreed upon at the time of the transaction. One thing remains constant though; a piece of crayon is an asset.

For a transaction to occur (“for example, let’s say Johnny wants to give Peter three crayons”), Johnny and Peter will go together to the teacher and inform her so she has it documented in the central register. Miss Juliet ( the teacher ) documents all transactions to prevent future troubles among the pupils.

During the transaction between Johnny and Peter, Miss Juliet ensured that Johnny actually has three crayons to give to Peter. Immediately she verified this, she updated the central register to say that Johnny has three fewer crayons and Peter owns three more.

Although Miss Juliet does a good job, she isn't always accurate; sometimes it is difficult for her to focus because she is always busy processing school work. Occasionally, she doesn't write the proper number of crayons traded.

One day, after teaching hours, a group of fifteen smart kids who frowned upon Miss Juliet’s documenting process (due to obvious flaws and lack of speed), decided to make their own crayon transaction system ( yes, because crayon is very important ).

These pupils (including Johnny and Peter) came up with a method to trade crayons among one another and have no intermediary ( Miss Juliet ) whatsoever controlling the transaction flow.

Here's their idea:

Whenever two children want to transact crayons, they will have to inform everyone in the group (simply screaming for attention does the trick). The other kids in the group will quickly verify that pupil A has enough crayons to give pupil B.

Immediately this verification is done, every kid will take note of it by recording it in his/her own ledger (there will be no central ledger but each kid will have a separate ledger) and the transfer will be approved. This way, transactions will always be secure and accurate.

Lastly, for the pupils who do the work of verifying that a crayon transaction is valid; the parents (obviously the parents are the ones who buy the kids crayons in the first place) of the entire group will jointly issue a number of crayons to them as a reward for their efforts.

This is actually a good idea, think about it. The structure of this newly contrived system annihilates the need for an intermediary. Transactions will be very secure since each kid has his own ledger and updates it whenever a new transaction occurs. The best part is, the kids who tirelessly verify and seal transactions in their ledgers will be rewarded with more crayons!

If only such a system existed in real life but for transacting actual currency, right? Well, guess what? It already exists and it is called the blockchain technology.

The kindergarten story we started off with is merely an analogy to help us understand bitcoin and the blockchain without delving into technical details, let’s break it down one by one:

The crayons are what bitcoins are to the blockchain – a bitcoin is a unit of digital currency ( there are several other digital currencies ).

The intermediary (Miss Juliet) represents bodies like banks, the government, and accountants. In actual life, we have trusted these third parties for many years to coordinate transactions for us but they are obviously flawed and not very secure (if someone is able to hack into a bank’s central system, files could be corrupted).

The kids who verify transactions between two members of the group are analogous to miners in the blockchain; they are of high importance to the system.

Miners are the reason bitcoins are very secure. They are constantly using their computers to do thousands (or millions or less, it depends) of complex mathematics each second to ensure that the ledger is always correct. This way, it is impossible for a single miner or a group of miners to cheat the system in their favour; the entire thing wouldn’t add up!

For a transaction to be approved, all the ledgers within the system must tally and the miners must agree upon the mathematical result.

We already saw that to reward the efforts of the kids who verify transactions, they are given new crayons. Something similar happens in the blockchain; whenever a miner is able to solve the mathematics ( using a computer) and verify a transaction, the other miners confirm that his work is correct before they all document it into their ledgers. He/she is then rewarded with an amount of bitcoins.

When a miner receives bitcoins as a reward for hard work, new bitcoins are introduced into the blockchain.

The cryptocurrency paradigm presents humanity with endless possibilities, only the future will tell what we make out of it.

By the day, more people are finding the concept of bitcoins interesting, here are a few reasons:

Bitcoins are scarce.
Bitcoins are divisible.
Bitcoins are durable.
Bitcoins can be stored.
Bitcoins are portable.
Bitcoins are transferable.
Bitcoins are difficult to counterfeit.

These qualities, the attention, and security have translated to an increase in value for bitcoins over the years. While some people think that bitcoin and the blockchain technology will change the world for the better, others believe that the entire concept is just worthless. What do you think?

Explain DevOps like I'm five

Jordan Irabor — Thu, 28 Sep 2017 16:36:48 +0000

For a while now, I've heard software engineers talk about DevOps and I just can't wrap my head around the idea. I tried digging into it one time and met even scarier terms like continuous integration etc.

Can someone explain DevOps to me and state its simplest purpose. You don't have to be a DevOps expert to contribute, any insight is valuable!

Using Google Analytics with Angular

Jordan Irabor — Thu, 28 Sep 2017 05:31:52 +0000

Google Analytics is known to be very efficient and easy to integrate into web applications. Once installed, it will send detailed information about the navigation history of visitors on the website.

Installing Google Analytics for traditional web applications is as easy as copying and pasting the JavaScript tracking snippet provided on registration of a new property. The only setup necessary is adding the snippet to the <head> tag of the HTML files to be tracked and the entire navigation history of each visitor will be updated in real time.

For SPAs, this is not the case, setting up Google Analytics requires a little more effort.

Do not get lost in the comfort of pasting snippets around because the era of single page applications is forcing developers and non-developers alike to adopt new approaches towards implementing web analytics services on their applications.

Why are SPAs so different?

The JavaScript tracking snippet works well with traditional web applications because whenever a new page is loaded, the snippet is freshly run; hence Google Analytics information is updated for that page. For a SPA where no actual full-page request is made, the analytics.js code will run only once and user navigation information will not be tracked correctly.

In this article, we will write our application to inform Google Analytics on the successful load of every new page and send the correct page information.

Angular is an awesome JavaScript framework for developing single page applications; it has a robust routing framework called the UI-Router that is responsible for updating the view based on the state of the application, this article will mainly discuss how Angular applications can be intentionally written to support Google Analytics services.

The source code is available here on GitHub.

Below is a step by step guide:

Setting up Google Analytics

We begin by setting up a Google Analytics account and registering a property here.

If you have Angular and other modules installed on your local machine, be sure to have the UI-Router module also available because we will be injecting it as a module dependency when initializing our app's main module.

If you'd rather use Angular and other modules from another computer, you can get Angular on this URL and the UI-Router module on this URL (For the sake of this article, I will be referencing Angular and its modules from a CDN).

Setting up the `head` tag

Copy and paste the JavaScript tracking snippet with its unique tracking ID just above the closing </head> tag.

Now comment out the two lines of code that look like this:

ga('create', 'UA-XXXXX-X', 'auto');

ga('send', 'pageview');

Where UA-XXXXX-X is your unique tracking ID.

We are commenting these lines out right now because we are building a SPA and not a traditional application, we'd later wrap them in the run block of our Angular script to ensure that when our app begins running, they will only be triggered based on certain changes in the application's state.

Following the above instructions, we should have a </head> tag looking similar to this:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>
</head>
</html>

Setting up the body as a view container

First things first, let's understand how the view section of a SPA works; since the entire application behaves as if it is a single page, Angular loads the content of other requested pages into the view section. We can think of this view section as a container within the main application. To help Angular indentify the view section in our markup, we assign the ui-view directive of the UI-Router module to a div tag, just like this:

<body ng-app="myApp">
<div ui-view>
<a ui-sref="first">This is the first page.</a>
<a ui-sref="second">This is the second page.</a>
<a ui-sref="third">This is the third page.</a>
<h1>{{ title }}</h1>
</div>
</body>

This body section above looks simple but it defines the basic structure for defining the Angular app and the view section.

Configuring the application

We begin by initializing the main Angular module and injecting UI-Router as a module dependency.

var app = angular.module("myApp", ['ui.router']);

Next we write the configuration block of our application and inject all the providers we will be needing for this application, the result looks like this:

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('index', {
            url: '/',
            templateUrl: 'index.html',
            controller: function($scope){
            $scope.title = 'I am the root page, ergo, submit thyself to me.'
    }
  })

Again, this is just a simple demonstration but it defines how an actual application should be set up.

Lastly, we write the run block of the Angular app to ensure that our application sends data to Google Analytics whenever a new page is loaded into the view section. We do this by injecting some services and using their methods during the run phase of our app's lifecycle.

We inject the $location service and it will help us determine the current location of the browser using its path() method.

Remember the two lines of code we commented out above? We'll be needing them very soon since we've gotten to the run block we spoke about earlier.

Next, we inject the global $window service and what this will do for us is:- Trigger the ga's (google analytics object) methods we commented out in the </head> of our program.

Next, we inject the $transitions service that will help us determine when a user has made or is making a transition to a new state.

In the end, we combine all these services and their methods to jointly instruct Angular to send data (containing information about the browsers current location) to Google Analytics when a transition to a new state is successful.

Here is what the code for the run block looks like:

app.run(['$location', '$window','$transitions', function($location, $window, $transitions){
        $window.ga('create', 'UA-XXXXX-X', 'auto');
        $transitions.onSuccess({}, function(){
              $window.ga('send', 'pageview', $location.path());
        });
}])

Awesome, now for every transition to a new state in our application, we'd get an update on our Google Analytics dashboard. On my web browser, I have visited my application and have navigated to a view that has a URL of /first.

This is the immediate update on my Google Analytics dashboard:

Conclusion

Just like that, our application is now being tracked correctly by Google Analytics, we get a real-time update on the navigation history of visitors to our web application. It requires just a little modification but goes a long way in ensuring that we stay in control and know our users!

DEV Community: Jordan Irabor

How to identify and fix open-source vulnerabilities

How to identify and fix open-source vulnerabilities

Introduction

How do vulnerabilities creep in through open-source?

Identifying and fixing vulnerabilities

Conclusion

Explain Time Complexity Like I'm Five

Build An Audio Translator With Vue.js, Yandex Translate API and Responsive Voice

Introduction

Requirements

Creating The Project

Creating The Translate Component

Writing The Code For The Translate Component

Writing The MarkUp

Writing The Event Handlers

Inlcuding Styles

Building The Root Component

Writing The MarkUp

Including Styles

Writing The Javascript

Hooking Into The Created() Lifecycle Method

Writing The Translate And ValidateResponse Methods

Writing The Event Handlers

Running The Application

Build The Application

Conclusion

Goodbye code. No more of you for a bit.

Music And Video Player With VueJS | Day 2 & 3 [30 Days Of Code]

Building A Basic Music Player With VueJS

Setup VueJS

Defining The Vue Components

Building The MusicFrame Component

Building The PlayList Component

And Now For The Root Component

Conclusion

Scientific Calculator With VueJS | Day 1 [ 30 days of code ]

Introduction

Setup VueJS

Defining The Vue Components

Build the Basic component

Build the Advanced component

Let's dig into the root component!

Conclusion

30 days of code challenge starts tomorrow!

Building Dynamic Breadcrumbs In Laravel

The Importance of Breadcrumbs

Setting up the Laravel application

Creating the HTTP routing

Setting up the breadcrumbs file

Rendering a static breadcrumb

Rendering a dynamic breadcrumb

Rendering a complete navigation chain

Conclusion

Real-Time Smart Facebook Messenger Bot With No Code.

Create An Agent:

Integrating Facebook Messenger

Configuring Facebook Messenger

Testing the Facebook Messenger Bot

Conclusion

A Super-Simple Guide To Bitcoin And The Blockchain

Explain DevOps like I'm five

Using Google Analytics with Angular

Why are SPAs so different?

Setting up Google Analytics

Setting up the head tag

Setting up the body as a view container

Configuring the application

Conclusion

Setting up the `head` tag