DEV Community: Peace

Why I always prefer Python for machine learning.

Peace — Wed, 17 Aug 2022 13:39:00 +0000

Python has been there for so long, to this date, it is always ranked among the top giants in tech tools. I don't think it will ever fade. I've used Python for a couple of years and am still exploring other different languages and every single of them has its own potential.

🤔So why would I always prefer Python for ML?

Trust me, when it comes to Machine Learning, there is no doubt that most Machine Learning engineers use Python. Without considering how much python is simple to learn just like most people say, I think any language can be simple and easier to learn depending on the developer and his/her own background.

Personally, among all other benefits that come with using Python, I'm always fascinated by how much python makes it very simple to integrate our projects with other existing systems of different programming languages. This means that, it's even easier to blend your model or other programs into other existing AI projects😃

How about you?😀
What do you love most about Python in your own experience?
Which tool do you prefer the most for a specific task in Machine Learning?

A brief introduction to machine learning.

Peace — Tue, 16 Aug 2022 19:57:00 +0000

Just like the title implies, we are not going deep into the complexity of machine learning. This is a brief intro of what machine learning is, it's main types, and applications.

Let's get started!🤩

What is machine learning?

Machine learning is simply the art of extracting knowledge from data. With machine learning, computers are able to learn from data and perform some boring or complex tasks without following explicit instructions. This is interesting, right?😀

Now, the question is: where is it actually applied? 🤔
Machine learning has made a significant impact in our everyday life even if sometimes we don't know this. From automatic recommendation of which videos to watch, which products to buy, to recognising your friends in photos.

Many modern websites and devices have machine learning at their core. When you look at a complex website like Facebook, Youtube, Amazon, or Netflix, it is very likely that every part of the site contains multiple machine learning models(Don't worry about some terms☺️) A machine learning model is simply a file/program that has been trained to recognise a pattern from data.

Let's look at different problems machine learning can solve😉

Real world problems are not solved by a single fixed algorithm, every problem has its own way to solve it depending on the data available and expected output, so it's up to you as a machine learning engineer to choose the right algorithm to use. They are very many machine learning algorithms and these algorithms are also classified into 3 main types.

1. Supervised Learning
Supervised learning is one of the most commonly used and successful type of machine learning. Supervised learning is used when we already have examples of input and their output and we need to build a machine learning model that will predict the output of a new given input.

An example of supervised machine learning task:

Detecting fraudulent activity in credit card transaction: Here the input is a record of the credit card transaction, and the output is whether this transaction is likely to be fraudulent or not.

2. Unsupervised Learning
Unsupervised learning is simply used when we only have input data and no output data given to the algorithm.

An example of unsupervised machine learning task:

Identifying topics is a set of blog posts: Let's say you have a large collection of text data, you might want to summarise it and find relevant themes in it. You might not even know what these topics are or how many topics there might be and therefore, they are no known outputs.

3. Reinforcement Learning
🤩This one is another level of machine learning👌. The system learns just like a human does(Learn by doing😀). The learning system called an agent can observe the environment, select and perform actions, and get rewards in return when it made a good choice or penalties when it did not do well. It might then learn by itself what is the best strategy called policy to get the most rewards over time.

An example of Reinforcement machine learning:

DeepMind's AlphaGo program: which made the headlines in March 2016 when it beat the world champion Lee Sedol at the game of Go. It learned its winning policy by analysing millions of games, then playing many games against itself. Finally, it won 💪🤩 by just applying the policy it had learned.

This is a little longer than I expected 🥱 but I couldn't bother providing the full-package I had for you.👇

🟢 An advice: When going deep into the aspects of of machine learning, it is easy to lose sight of your goals. This field is very huge and they are so many ways to solve a particular problem, it is good to keep a big picture in mind all the time.

Good luck 🥳
See ya on my next article about "How you can build your first machine learning model"😀
Feel free to comment down below👇 about anything.

Briefly, what is the difference between "var" and "let" keywords in Javascript?

Peace — Wed, 19 Jan 2022 12:14:56 +0000

var and let are both used for variable declaration in javascript but the difference between them is that a 'var' variable can be re-initialized while a 'let' variable can only be initialized once.

Example:

var name = "Peter"
var name = "Peace"
console.log(name)

Output
Peace

A keyword called let was introduced in ES6, a major update to JavaScript, to solve this potential issue with the var keyword.
Once a variable has been initialized, you can not re-initialize it.

Example:

let name = "Keza"
let name = "Gisa"
console.log(name)

Output
SyntaxError: unknown: Identifier 'name' has already been declared.

Solved: Module not found: Error: Can't resolve 'sass-loader'

Peace — Sun, 02 Jan 2022 17:44:23 +0000

I have been struggling with this problem a few minutes ago when I was trying to install node-sass and sass-loader in my Vuejs project.
I used this command :

npm i --save-dev node-sass sass-loader
Output:
Could not resolve dependency: npm ERR! dev sass-loader@"*" from the root project npm ERR!
With some sort of:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: twotter@0.1.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm ERR!   node_modules/@intervolga/optimize-cssnano-plugin
npm ERR!     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.15
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.15
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR!   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1
npm ERR!   node_modules/@soda/friendly-errors-webpack-plugin
npm ERR!     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.15
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.15
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR!   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.65.0
npm ERR!   peer webpack@"^5.0.0" from sass-loader@12.4.0
npm ERR!   node_modules/sass-loader
npm ERR!     dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.

So, I thought this was some dependency conflicts and there is actually a note about this here

This is how I solved the issue:
npm install -D sass-loader@^10 sass

Getting started with Vuejs

Peace — Thu, 02 Sep 2021 10:13:06 +0000

What is Vuejs?

Vue is a frontend JavaScript framework for building websites & user interfaces

Vue is generally used to create single-page apps that run on the client.
Vue can also run on the server-side by using SSR framework like Nuxt.

Why use Vue?

Create dynamic frontend apps and websites.
Easy learning curve
Easy to integrate with other projects.
Fast and lightweight.
Extremely popular (and rising).

What should you know first?

Like with any framework, you should be comfortable with the underlying language first. In this case, that is JavaScript

JavaScript Fundamentals
Async Programming (Working with promises)
Array Methods (forEach, map, filter, etc)
Since you'll be dealing with APIs to make requests, it's important to understand "Fetch API/HTTP Requests"
You should also have an experience with Yarn or NPM(Node Package Manager) because you're going to be installing other packages to give you extra functionalities.

Getting Started

1. Installation

npm install -g @vue/cli

OR

yarn global add @vue/cli

2. Create a New Project

vue create vue-project

Warning

If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. You must launch the command as winpty vue.cmd create vue-project. If you however want to still use the vue create vue-project syntax, you can alias the command by adding the following line to your ~/.bashrc file. alias vue='winpty vue.cmd' You will need to restart your Git Bash terminal session to pull in the updated bashrc file.

You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select "Manually select features" to pick the features you need.

The default setup is great for quickly prototyping a new project, while the manual setup provides more options that are likely needed for more production-oriented projects.

If you chose to manually select features, at the end of the prompts you also have the option to save your selections as a preset so that you can reuse it in the future.

3. Run the project

Open the project directory in your terminal and run this command.

npm run serve

Expected output:

Copy and paste the link in your browser to see the output.

http://localhost:8080/

You may play around with the Helloworld default component but before you do that, let's talk more about components and routers then we shall go deep into the codes in the next article.

Components

Components are reusable Vue instances with a name.

Basic Layout of a Vue Component

Here is an example of a button component.

<template>
<button @click="onClick()" :style="{background: color}" class="btn">{{ text }}</button>
</template>

<script>
export default {
    methods: {
    onClick() {
    console.log("Button Clicked!")
    },
},
    name: 'Button',
    props: {
        text: String,
        color: String,
    },
}

</script>

<style scoped>
  .btn {
  background: #000;
  color: #fff;
}
<style>

Components include a template for markup, logic including any state/data/methods as well as the styling for that component.

using props is a way of passing a unique data from external components.
The Button component above can be reused by other components as shown below.

Here is a Header component.

<template>
    <header>
        <h2>Title</h2>
        <Button :text="Add Task" :color='green'/>
    </header>
</template>

<script>
import Button from './Button'

export default {
    name: 'Header',
    components: {
        Button
    }
}
</script>

<style scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: cetner;
    margin-bottom: 20px;
}
</style>

For the Button component to be reused, we needed to first import the Button and include it in the components inside the script tag.

export default {
    name: 'Header',
    components: {
        Button
    }
}

Vue Router

Routing allows us to create a single page application without unnecessary reloads during the navigation. To do this we need to first install vue-router.

npm install vue-router

Let's do the routing

Create router folder in the root directory of the project.
inside the router folder, create index.js.

To create a router for a certain page (About, Home, Contact,..) you need to first import the component(Page).

import About from '../views/About'

And specify the router for your page.

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

Below is a an example of my index.js in router folder

import {createRouter, createWebHistory} from 
'vue-router'
import About from '../views/About'

const routes = [
    {
        path: '/about',
        name: 'About',
        component: About
    }
]

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

export default router

The next step is to use the router in the main.js file found in the root folder of your vue-project.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

Include the router in your App.vue template tags.

    <router-view></router-view>

Now you're good to go. You may use the routers in your components for your single page web application:
Instead of using:

 <a href="/about">About</a>

You need to use:

<router-link to="/about">About</router-link>

Thank you for visiting this post, I hope you've learnt a lot. Feel free to comment down below if you have any questions or you want to say something.