teleren/devto huggingface dataset:
Project 46 of 100 - Simple Interactive Map Component
Tags: react, javascript, 100daysofcode
Published: 2021-02-16 06:30:07

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-46-simple-map-component.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-46-react-map)

Just made a map today- was sort of feeling it as an extension of [my project from yesterday](https://dev.to/jwhubert91/project-45-of-100-introducing-the-react-golden-business-gb-template-29fg). First tried Google Maps API but discovered I needed to submit credentials and be approved even for a test app. Nah.

Then tried `react-mapbox-gl` because I do love Mapbox. Built the whole app and discovered it does not compile properly because of a conflict with the default webpack version bundled with Create React App.

Tried some workarounds. Nothing worked.

Then ripped out `react-mapbox-gl` and the component I had made in favor of `react-map-gl`, a Mapbox-based map maintained by Uber. The map looks like an Uber map but other than that it looks pretty swell.

Wrestled with `nodenv` for a few minuted before realizing you have to put `REACT_APP_` before an environment variable in a React app. Then was able to build and commit properly.

That's how you turn a 45 minute project that was supposed to be quick so you could run errands and go to bed early into a 5 hour project that forces you to skip your errands and get too little sleep!

Curious how other project-builders get around debugging on a defined timeline. What if you build and it doesn't work? Ditch the schedule and keep working or ditch the project until tomorrow?

If you want to make a map fast in React sign up for a Mapbox account, get the API token, then follow the awesome, detailed docs for [`react-map-gl`](https://visgl.github.io/react-map-gl/docs/advanced/custom-components). You won't regret it.

Peace and love. As always find me on [Twitter](https://github.com/jwhubert91/100daysofreact/tree/master/day-46-react-map) :)
Fix: Chrome.exe Bad Image 2021 error message
Published: 2021-02-16 06:29:31

While using the latest version of Google Chrome browser on my Windows 8 recently, I received the Chrome.exe Bad Image error message . Chrome won't load, and I'm wondering what has happened and what to do now, other than going in to uninstall and a fresh install.



Chrome.exe - Bad Image

Certain files are also not designed to run on Windows or contain errors. Error status 0xc000012f.

This post will tell you what you can do if you get an error message like that:

First of all, I suggest that you try resetting your Chrome using the newly introduced Chrome Reset feature.

If this doesn't help, maybe you can try this approach. It helped me and I'm sure it will help you too.

Navigate to the following folder:

C: Users Username AppData Local Google Chrome Application

Here you will see the file. One chrome.exe and the other old_chrome.exe . Delete chrome.exe and rename old_chrome.exe to chrome.exe.



Now see if you can open your Chrome. If you can be great.

But if you look now, under About Google Chrome, you'll see it shows the previous version. Click the Update button to update your Chrome to the latest version and you are good to go.

If nothing else helps, you should probably consider uninstalling Chrome and signing in for a fresh install.
Using Sendchamp Multi-Channel Messaging API For Your Next Project
Published: 2021-02-16 06:25:43

---
title: Using Sendchamp Multi-Channel Messaging API For Your Next Project 
published: true
description: Sendchamp is a Multi-channel messaging tool for devs & businesses in Africa.
tags: 
cover_image: https://res.cloudinary.com/bolub/image/upload/v1611296852/WhatsApp_Image_2021-01-21_at_8.30.06_AM.jpg
---

👋 Hi Devs,

I'm super excited to introduce Sendchamp to you 🙌

Businesses in Africa have messaging problems and when choosing communication platforms there is either an issue of single-channel messaging, high pricing, delivery issues due to regulations, or poor developer experience. 

This made us build Sendchamp to cater to the communication needs of African Businesses.

See what Sendchamp’s end-to-end communication solution offers:

1. Simple APIs to send messages via SMS, Email, Voice & WhatsApp. [Docs](https://developers.sendchamp.com)
2. Simulators for you to test your integration before going live. Check it [here](https://simulator.sendchamp.com)
3. Better Dev Experience. If you don’t think it is good enough, we are ready to listen and improve. Join our dev community [here](https://t.me/joinchat/CO_ZnxjdAFgBRHspazzoGA)
4. We created a Pop Up to handle your verification without writing codes. Check demo [here](https://developers.sendchamp.com/verification/verification-pop-up)
5. Our dashboard is built such that you can switch between live and test data


Docs: [https://developers.sendchamp.com](https://developers.sendchamp.com)
Telegram Community: [https://t.me/joinchat/CO_ZnxjdAFgBRHspazzoGA](https://t.me/joinchat/CO_ZnxjdAFgBRHspazzoGA)



We'd love for you to check out Sendchamp and we will be writing more tutorials on how to use Sendchamp!

Would love to hear your feedback!

Cheers❤️
Beginners guide to Hoisting in Javascript
Tags: javascript, tutorial, beginners
Published: 2021-02-16 06:20:49

Hoisting is one of the most commonly asked concepts in a  Javascript interview. In this blog, we’ll find out how the hoisting mechanism occurs in JavaScript.

>  Hoisting is a mechanism in which variable and function declarations are physically moved to the top of your code(hoisted).

*let's go through a simple example to understand hoisting*

```
function blogName(name) {
  console.log("Title of the blog is " + Hoisting);
}

blogName("Hoisting");

/*
The result of the code above is: "Title of the blog is Hoisting"
*/

```
The above example is how we expect the code to work without any issues. A function declaration followed by the call to the function.

*let's take another example where we call the function before we declare it*

```
blogName("Hoisting");

function blogName(name) {
  console.log("Title of the blog is " + Hoisting);
}

/*
The result of the code above is: "Title of the blog is Hoisting"
*/
```
In the above example gives us the same output even though the function is called before declartion. This is because the function `blogName()` was hoisted to the top.

**Note: JavaScript only hoists declarations, not initialization**

```
blogName("Hoisting");

var blogName = function(name) {
  console.log("Title of the blog is " + Hoisting);
}

/*
The result of the code will be Uncaught TypeError: blogName is not a function
*/
```

> All you need to know Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

That's All folks, Thank you.
Using the GIT CLI
Tags: git, bash, tutorial
Published: 2021-02-16 06:08:46

In this post I will be explaining how to use the GIT **CLI(Command Line Interface)**. This will require GIT to be installed on your device if you don't have it then install it by following the steps mentioned in the [previous post](https://dev.to/aadityasivas/installing-git-on-your-system-52on).
## Before we start
If you want to check if GIT is installed run this command
```bash
git --version
```
And if it prints out the version number you are good to go.

## Making a GIT repository with the CLI
To make a GIT repository with the CLI run this
```bash
git init
```
This will initialize an empty repository

## Moving files to the staging area with GIT
To add a single file to the staging area run this
```bash
git add <FILE TO ADD>
```
To add all the changed files to the staging area run this
```bash
git add .
```
## Committing changed files
To commit the files in the staging area to the main repository we need to run.
```bash
git commit -m "<insert commit message here>"
```

## Viewing all commits in a repository
```bash
git log
```
This command will log all the commits made to a repository

## Reverting a commit
In order to revert a commit you will need to know the commit id it can be known by running `git log`
```bash
git revert <commit id>
```

## Making a new branch
A branch is a copy of the main files it lets you test out features or something else which does not conflict with the main branch so to make a new branch you need to run
```bash
git checkout -b your-branch-name
```

## Viewing the list of branches
To see the list of branches run this
```bash
git branch -a
```

## Switching branches
This command will switch the branch
```bash
git checkout -b your-branch-name
```

## Merging branches with the main branch
To merge a branch with the main branch run this
```bash
git merge your-branch-name
```

### There are many more commands there but for now I am ending the post here bye and have a nice day!
50+ FREE Online Courses for AI and Machine Learning
Tags: machinelearning, deeplearning, datascience, analytics
Published: 2021-02-16 06:08:07

Are you looking for the **FREE Online Courses for AI and Machine Learning?** If yes, then this article will definitely help you and provide the 50+ best FREE Online Courses for AI and Machine Learning from various platforms.

I would recommend you bookmark this article for future reference. Because this article will not only provide free courses but also saves your searching time for different free courses for machine learning and artificial intelligence.

For your convenience, I have created a table, so that you can filter out the course according to your need.

So without any further ado, let’s get started-
**[Click to continue reading...](https://www.mltut.com/best-free-online-courses-for-machine-learning-and-ai/)**
hatiku tlah babak belur 
cintaku yang kini hancur
Tags: ggjf
Published: 2021-02-16 06:06:16


Open:
cukup sudah tarik ulur
hatiku tlah babak belur 
cintaku yang kini hancur
kuputuskan mundur teratur

bait 1:
awalnya baik baik saja
semua terasa sempurna
entah setan darimana
buatmu berubah seketika

coda:
diriku butuh perhatian
cinta bukanlah permainan
ragu <a href="https://lagucloud.com">LaguCloud.com</a> tak karuan
kita putus atau teruskan

Reff:
hatiku bukan layangan
kau tarik ulur sembarangan
tak pernah ada kejelasan
kita lanjut atau udahan

cukup sudah tarik ulur
hatiku tlah babak belur 
cintaku yang kini hancur
kuputuskan mundur teratur


bait 2
tiba tiba kau menghilang
tiba tiba kamu datang
semakin aku jadi bimbang
serius atau abaikan
Python Skills That Will Take Your Career to The Next Level
Tags: pythonskills, pythoncareer, python
Published: 2021-02-16 06:03:56

Python is one of the best programming languages nowadays. So it's no surprise that Python developers are in high demand. It is widely used as it can provide a solution to problems in various fields. Python deals with backend components support the front and developers and connect applications with third-party web services. Python developers are most in-demand today. You are well paid too. If you are looking to take your career to the next level, these are the Python skills you need to prepare for. Look for institutes offering Python online training in the UK to equip yourself with industry-standard skills.

Python The Language

If you want to become a Python developer, you must first become familiar with the language. If you're already a developer, switching to Python may be the easiest step on your journey! It's a general-purpose language. With its simple syntax and semantics, it is known for being beginner-friendly. It's an aspect-oriented language. So it has several modules. However, it is not necessary to know all modules. Data structures are at the heart of every programming language. Python is no exception. Data structures are important for both small and large projects. Familiarize yourself with the basics of implementing data structures in Python. Some institutes offer the best online Python training in India to help you with Python.

Basic Knowledge of Front-End Technologies

As a Python developer, you have to coordinate with the front-end team very often. Hence, you need a basic understanding of common front-end tools - HTML5, CSS3, Javascript, and Bootstrap. In large companies, some employees are specially appointed to coordinate the workflow. There is no need to know how front-end tools work.  Even so, it will help you work with front-end developers.

Python Libraries

Good knowledge of the Python libraries is a boon for you and your team. Once you have thought of the type of project you are dealing with, you can know the libraries that you will be using. If you want to be prepared in advance, many websites list the most commonly used Python libraries. You can use the list to get a general idea.

Python Frameworks

Knowing the frameworks in Python is a must for every Python developer. However, it is not necessary to know every framework. Django, Flask, and CherryPy are some of the most commonly used frameworks. Depending on your project, you will again be asked to learn the frameworks that you will be implementing. The structure of the frameworks is helpful for developers when trying to figure out the core logic of the application in addition to the above skills, you must have knowledge of version control, AI, and machine learning, and be familiar with Object Relational Mapper (ORM) libraries.
Learn Python Course and upgrade your skills.
Visit: https://nareshit.com/python-online-training/
Object Literals
Tags: javascript
Published: 2021-02-16 05:57:32

An object is a collection of key-value pairs.
Here's a snippet of an object with one property and one function.
```javascript
const person = {
    name: "Harsha",
    greet: (msg, name) => {
        console.log(message + "" + name + "!");
    }
}
```
With `ES6`, we got some enhancements to object literals.

---
## Key Shorthand and Function Shorthand

```javascript
const name = 'Harsha'
const age = 19

const person = {
    name: name,
    age: age
    greet: function () => {
      console.log("Hi")
    }
}
```
In the above code, we are creating an object person with name and age property and we assigned them the values of our constant variables `name` and `age`. And we also have a greet property that has a function assigned to it. 

Javascript introduced a shorthand notation to set object keys that have the same name as the variable you are assigning the value with. And also we can omit the function keyword in the object and define functions in a similar way as we do in class.

With the key shorthand notation and function shorthand notation, the above code can be written as:

```javascript
const name = 'Harsha'
const age = 19

const person = {
    name,
    age,
    greet() => {
      console.log("Hi")
    }
}
```
As you can see the above code looks way better, cleaner, and easier in terms of writing.

---

## Dynamic Properties
With `ES6` we can directly use our variable as a property in the object literal.
```javascript
const dynamicKey="name"
const object = {
  [dynamicKey]: "Harsha"
}
```
As you can see in the above example, we need to wrap our computed property names in the square brackets. The above object is the same as
```javascript
const object = {
   "name": "Harsha"
}
```
Laravel 8 - Custom nl2br Blade Directive
Tags: laravel
Published: 2021-02-16 05:55:18

Wouldn't it be cool if Laravel came with a few helper directives like nl2br? Well, hopefully, they will include it in the future. For now, I am going to show you how to set up a custom one yourself.
#The Setup
First, open up your `AppServiceProvider.php` file from `app/Providers`.

Here we define, our blade directive in the `boot()` function as follows:
```php
<?php

namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        //
        Blade::directive('nl2br', function ($string) {
            return "<?php echo nl2br(htmlentities($string)); ?>";
        });
    }
}

```
#The Usage
You can now use our custom-built `@nl2br()` directive in any our your Blade views.
An example:
```php
<div class="description">
    @nl2br($description)
</div>
```
#That's All
Great, now you know just a bit more about the Laravel world. If you come up with more such directives I'd love to see them in the comments.

Thanks for reading.
872. Leaf-Similar Trees

Tags: javascript, algorithms, trees, leetcode
Published: 2021-02-16 05:40:27

###Description:
Consider all the leaves of a binary tree, from left to right order, the values of those leaves form a leaf value sequence.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// DFS approach
// Staring from the left side of the tree, 
// push all leaf nodes from each root into 2 respective arrays
// Check if the values in those 2 arrays are the same
var leafSimilar = function(root1, root2) {
    const output1 = []
    const output2 = []
    
    dfs(root1, output1)
    dfs(root2, output2)

    return (output1.length == output2.length &&
            output1.every((val, index) => val === output2[index]));
    
    function dfs(node, output) {
        if(!node) return
        // Leaf node if the current ndoe has no children
        // Push value into it's respective array
        if(!node.left && !node.right) {
            output.push(node.val)
            return
        }
        if(node.left) dfs(node.left, output)
        if(node.right) dfs(node.right, output)
    }
};
```
Git, iniciando con main
Tags: git, github, codenewbie, beginners
Published: 2021-02-16 05:39:16

Mi experiencia con GIT ha sido mínima, cuando me aparece un error reviso que escribí mal y si no encuentro el origen de la falla me remito a buscar por internet. Hoy quiero aprovechar que quiero iniciar un proyecto nuevo para empezar casi desde cero. Digo casi porque no incluyo la instalación que la realice en linux.

Hace algunos meses, no recuerdo bien la fecha y no quiero buscar, Github realizó unos cambios en su plataforma, uno de ellos y con el cual he tenido que lidiar un poco es que antes todas las ramas principales se trabajaban sobre `master` pero ahora, con el cambio, la rama principal en para cualquier proyecto nuevo es `main`. 

Cuando quiero comenzar un proyecto que quiero subir a GITHUB debo inicializar GIT dentro del proyecto y para hacerlo el comando a ejecutar en la consola o terminal es:

```git
git init
```
Pasa que si no tienes bien configurado a GIT entonces el sistema intentará inicializar el proyecto con la rama master la cual ya se encuentra en desuso y además mostrará mensajes de advertencia:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ffosa75gf39zuwmzr9p.png)

La solución la brindan las mismas alertas, se debe realizar una configuración global donde indicaremos cual es el nombre de la rama principal que va a quedar por defecto con el comando que aparece en la siguiente imagen:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51w4c3l5k5dit1s72u58.png)

Conociendo que en la configuración ya especificamos la rama principal por defecto, procedemos a inicializar el proyecto:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr8p0srfy34qu1lamy7e.png)

y con `git status` lo compruebo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5lv4s0spa2j0i06q6v8.png)

Espero que este artículo haya servido para alguien. Por favor compartelo si crees que es útil o dejame tus comentarios.
Install Java With SDKman in Ubuntu
Tags: java, sdkman, linux, software
Published: 2021-02-16 05:22:11

Are you a java/kotlin Developer, it is very important to maintain all its java versions and use them accordingly and it is very hard and want to maintain it, then this video is for you.
In this video, I try to explain how sdkman helps us to install, maintain and use different JDK tools for the Linux system.

To install sdkman you require to run the below commands: 
curl -s "https://get.sdkman.io" | bash
source "$HOME/.sdkman/bin/sdkman-init.sh"

once sdkman verify its version using 
1. sdk version

you are ready to go, java is a single command from you let's grab it

1. sdk i java {version}

really done!!!

yes you are now if you want you can list all different version for java using 

1. sdk ls java

you can install another version on java too and to use that only run 
1. sdk use java {version}


In the next video, we saw how to configure your IDE.

Important Links: 
https://sdkman.io/
https://www.oracle.com/java/technologies/java-se-support-roadmap.html
Modern javascript basics Part-I: Type Coercion:
Tags: javascript, todayilearned, webdev, cyruscodes
Published: 2021-02-16 05:12:03

This is the first post that forms the beginning of a number of related blog posts on the basics and syntax of the javascript language. These blog posts will dive into a number of small topics that are normally neglected by developers but are crucial to their careers.

**The first of these posts will dive into type coercion in javascript.**

Type coercion is where the javascript engine has to work with two different datatypes E.g string with a number and has to convert one data type to another ignorer to work with the two.

This conversion has a priority order that begins with stings, Number, and finally Boolean.
## 1. String coercion;
When presented with an operation with both strings and numbers,  javascript converts the number(s) into a string(s) in order to work with two district variables. Example;

```
// jshint esversion:6
let num1 = 20;
console.log(typeof(num1)); //number
let num2 = " Twenty one";
console.log(typeof(num2)); // string
let sum = num1 + num2;
console.log(sum); //20 Twenty one
console.log(typeof(sum)); // string
``` 


> From the example above, num1 is of type number while num2 is of type string which is confirmed by using the inbuilt function (typeof()).
When the two are added together, javascript gives priority to the string datatype by converting the first variable (num1) into a string and the result (sum) is a string.

 
## 2. Number coercion

The second priority is given to the number datatypes in javascript. This means that when presented with a number and a boolean datatype, javascript converts the boolean datatype into a number and evaluates the equation. Example;


```
// jshint esversion:6
let num1 = 20;
console.log(typeof(num1)); //number
let num2 = true;
console.log(typeof(num2)); // boolean
let sum = num1 + num2;
console.log(sum); //21
console.log(typeof(sum)); // number
``` 


> From the above example, the first variable was of type number while the second was boolean. Adding the two distinct variables forces javascript to give priority to the number datatype by converting the boolean into a number in this case true becomes 1 which when added to the first variable which was a number (20) results in a number datatype (21).

THANK YOU so much for taking your time to read this article. A lot more tips and posts related to javascript are on the way and to get notified when they do, follow me on  [Twitter](https://twitter.com/cyrusCodes)  and I'd really appreciate it.  If you are feeling more generous I'll not stop you from buying me a cup of coffee. 
 [![coffee_black.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613369170831/yDebKPrfC.png)](https://www.buymeacoffee.com/cyrusCodes)