teleren/devto huggingface dataset:
Watch how Adrian Twarog codes Tabnine AI code completion for VS Code
Tags: javascript, vscode, css, php
Published: 2020-11-24 15:13:18

״I write a lot of HTML, CSS and JS. As a web developer, I need to be able to write fast websites, and autocomplete are something I rely on to work. I learn about tabnine a while ago, and got the chance to really test them out recently, and enjoyed. As a website developer, I really thing it's worth checking them out, I enjoyed the smarts between machine learning and ai that did do a good job and delivering good suggestions.״

{% youtube mqz9_foZFWQ %}
Git garbage: what if your local have a lot of old branches?
Tags: git, bash
Published: 2020-11-24 15:12:22

In the last few days I've seen that my local git repository had a lot of old branches that are no more on remote. So I asked Google this question:
> git how to remove branch locally and not remotely

And then I come out with a solution by reading some stackoverflow stuff.

First of all: you check the branches in your local repository to discover if they are **gone** on the remote; you can use the following command:
```bash
git branch -vv
```
This will give you a list of all branches on your local repository, the current commit of the branch and the corresponding remote branch if there is one and the indication *gone* that indicates that the branch was deleted on remote.

Now you may want to delete all the branches that are on your local but are no longer present on remote, but if there are to many of them you will need an automated procedure. I've find that one usefull:
```bash
git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d
```

After that my local repository was finally cleared of all the dead branches.
And you? Have you ever faced this problem? How did you faced it?
Leave a comment if you have!
How to rapidly prototype Typescript & Javascript in VS Code
Tags: vscode, javascript, typescript, webdev
Published: 2020-11-24 15:10:06

Visual Studio Code is one of the most popular code editors for writing Typescript and Javascript. I use VS Code for all my Typescript and Javascript projects.

{% youtube BnTy4IIa2hE %}

If you are like me, using VS Code for writing Typescript / Javascript, you know that sometimes quick prototyping or testing is needed. For this kind of situations I use this extension called Quokka.js.

> _Read also: [How to write Javascript and React with VS Code FASTER!](https://tuomokankaanpaa.com/blog/how-to-write-javascript-and-react-with-vs-code-faster/)_

After installing the extension you can launch a new Typescript / Javascript file with live code execution and results, value explorer, live code coverage and much more. Or if you want to check your existing code, you can also start the extension for an existing file.

I made a [video](https://www.youtube.com/watch?v=BnTy4IIa2hE) introducing the extension more throughly so go watch that if you want to learn more! Or if you just want to give it a try, you can install the extension from here: [https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode).

What do you think about the extension? Let me know in the comments!
Get 40% off a premium plan at Vue School
Tags: vue, javascript, webdev
Published: 2020-11-24 15:02:44

Vue School is offering an amazing Black Friday discount this year. Get 40% off a premium plan!

At Vue School, you’ll learn Vue.js and modern, cutting-edge front-end technologies from core-team members and industry experts with premium tutorials and video courses.

The Black Friday offer is now live - get 40% off. 👇
https://vueschool.io/sales/blackfriday
What the dill with pecl: Is pear still around for PHP 8?
Tags: php, docker, help
Published: 2020-11-24 14:57:26

It's a bit confusing determining whether pear/pecl are still around in PHP 8.0. There's been talk of removing it entirely from PHP for years (just do some searching and you'll see the various RFCs).

There’s a lot of confusing stuff out there. The official PHP Docker images currently do not have it installed for their 8.0-RC images, [citing that pear has been removed in PHP 8.0](https://github.com/docker-library/php/blob/3dc9a6988d478fae0f0b8b871d10e611b50e3d0c/7.4/buster/apache/Dockerfile#L225-L227). However PHP's documentation on [Migrating from PHP 7.4.x to PHP 8.0.x](https://www.php.net/manual/en/migration80.php) doesn’t mention removal of it. In fact, it even [mentions](https://www.php.net/manual/en/migration80.incompatible.php#migration80.incompatible.xmlrpc) that the XML-RPC extension "has been moved to PECL." 

So what gives?

It appears that the `--with-pear` option is still around for configuring PHP builds from source. When you use it, the build states:

```
configure: WARNING: The --with-pear option is deprecated
```

This is the same warning you'll see if you build PHP 7.4.

As far as I can tell, Pear and Pecl are here to stay in PHP 8.0. As such, I created [a Pull Request on the official PHP Docker images](https://github.com/docker-library/php/pull/1088) to add the `--with-pear` option to the 8.0-RC builds.

**⁉️ Those in the know: can you weigh in on this? Are pear and pecl still going to be the official way to install Pecl extensions in PHP 8.0.x?** Or should we start transitioning to [pickle](https://github.com/FriendsOfPHP/pickle)?
How To Get Address From Latitude And Longitude Google Map Api 
Published: 2020-11-24 14:47:28

In this tutorial, you learn how to get address from latitude and longitude google map API in Codeigniter.

For many projects, we need to get latitude and longitude from addresses in PHP Codeigniter. Google has provided an API name google maps geocoding API. In this tutorial, we will use this API and get google maps geocoder get latitude and longitude. 

**[How To Get Address From Latitude And Longitude Google Map Api ](https://www.phpcodingstuff.com/blog/how-to-get-address-from-latitude-and-longitude-google-map-api.html)**

```
public function getlocation()
{
    $address = "United States of America";
    $array  = $this->get_longitude_latitude_from_adress($address);
    $latitude  = round($array['lat'], 6);
    $longitude = round($array['long'], 6);           
}
 
function get_longitude_latitude_from_adress($address){
  
$lat =  0;
$long = 0;
 
 $address = str_replace(',,', ',', $address);
 $address = str_replace(', ,', ',', $address);
 
 $address = str_replace(" ", "+", $address);
  try {
 $json = file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$address.'&amp;key=your_api_key');
 $json1 = json_decode($json);
 
 if($json1->{'status'} == 'ZERO_RESULTS') {
 return [
     'lat' => 0,
     'lng' => 0
    ];
 }
 
 if(isset($json1->results)){
    
    $lat = ($json1->{'results'}[0]->{'geometry'}->{'location'}->{'lat'});
    $long = ($json1->{'results'}[0]->{'geometry'}->{'location'}->{'lng'});
  }
  } catch(exception $e) { }
 return [
 'lat' => $lat,
 'lng' => $long
 ];
}
```

Read More: [https://www.phpcodingstuff.com/blog/how-to-get-address-from-latitude-and-longitude-google-map-api.html](https://www.phpcodingstuff.com/blog/how-to-get-address-from-latitude-and-longitude-google-map-api.html "https://www.phpcodingstuff.com/blog/how-to-get-address-from-latitude-and-longitude-google-map-api.html")
Why there seem to be less opportunities in Rust (right now) ?
Tags: rust, go, discuss, healthydebate
Published: 2020-11-24 13:36:28

*Disclaimer : When I say 'I searched' or 'I found' or anything like that, I accept that I might not be looking wide enough. Please correct me in comments if I'm wrong* :sweat_smile:

I was looking for internships recently on a certain site, and I knew that most of the web related internships there are of either Python-Django, node-express or PHP related, along with a handfull for Java and other languages.

During the search, though, I came across an unexpected Golang internship. Curious, I searched and found out that there are a couple of other Golang related internships as well (some of them outside web development). Now as I have learnt Rust, and not Go, I searched if there are any Rust related (web or other) internship on that website, and there weren't.

That made me question,in general, Even though Rust seem (to me) just as capable as Go, are there less opportunities (right now) compared to Go?

I understand that Rust has quite steep learning curve compared to other languages like JS,Python,C (Can't speak about Go, as I haven't learnt it yet :sweat_smile:). It was definitely one of most feature-rich and complicated language that I have learnt, but it seems to be worth the guarantees it provides. 

As far as I have explored (It may not be much), Rust seems to be just as capable as other languages, and even though it was initially aimed as System Programming Language (One of the reason I chose it over Go to learn :smile:), it has quite wide spread applications, from web-servers and WASM to game engines. Then, Why does it seem have less wide spread actual use?

What do you think?

Am I looking at the wrong place, and there are , in fact, decent amount of opportunities in Rust?

Might it be because people think it is a C-like language which should be only used for low-level programming?

Is it because of its steep initial learning curve, people might not be interested in learning and adopting it?

Let me know in comment your thoughts, and please correct me if you think something I wrote is incorrect, or is a wrong perspective to have.

Thank you!
Webinar: continuous localization means no more content copy-pasting for devs
Tags: git, github, localization, webinar
Published: 2020-11-24 14:42:25

Join Crowdin this Thursday at 11 AM EST / 5 PM CET for a live webinar on continuous localization. 

**This free webinar is for you, if:**
- Your product is already multilingual, but it takes too long to copy-paste sources and translations
- You keep translations in a spreadsheet
- It's hard to keep up with content updates, so sometimes you end up with untranslated strings in your app
- Your task is to add multilingual support to your product
- Release is often delayed due to localization
- You team first creates a new feature and only after sends new texts to translators
- You like webinars for developers :)


Save your spot to learn how to release localized versions faster, translate several branches simultaneously, automate content updates, both for sources and translations, and more.

**Register now:** https://bit.ly/35YZuvf


Get 1 hour of expert training and get answers to your questions on localization. Submit your questions via the registration form or ask them during the webinar on November 26.

**Can’t make the webinar?** No worries. Register now for a link to the recording: https://bit.ly/35YZuvf

**About Crowdin:**
Crowdin is a cloud-based localization management software. With 1.7M registered users and 100K+ localization projects from all over the world. Crowdin helps companies streamline their growth by reaching people who speak different languages. 

Trusted by GitHub, Avast, GitLab, Buffer, Calendly, and Wrike, and other companies creating multilingual products.

Crowdin integrates with GitHub, GitLab, Bitbucket, Azure Repos, and 40+tools. You can use our API, CLI, webhooks, apps to customize your experience to your needs.
A Vue JSON Linter
Tags: vue, javascript, json, lint
Published: 2020-11-24 14:39:00

---
title: A Vue JSON Linter
published: true
description: Building a simple JSON linter & validator with Vue.js
tags: vue, javascript, json, lint
cover_image: https://i.imgur.com/SEBAnFi.gif
---

As a developer, one of my favorite go-to tools is jsonlint.com. I like it so much that I decided to make my own JSON Linter using Vue 2.

The Vue App
==

This turned out KISS. Just 2 vars for the JSON as a string, and displaying errors. I used a computed `prettyFormat` method that handle the validation logic.

The `prettyFormat` method attempts to parse the JSON string, and on error displays the line &amp; position of the problem. To highlight the error position within the JSON, I grab a ref to textarea element, and find the position, and finally use `setSelectionRange` to highlight the problem text...

```
const app = new Vue ({
  el: '#app',
  data: {
    jsonstr: "",
    jsonerror: ""
  },
  computed: {
    prettyFormat: function() {
        // reset error
        this.jsonerror = "";
        let jsonValue = "";
        try {
            // try to parse
            jsonValue = JSON.parse(this.jsonstr);
        }
        catch(e) {
            this.jsonerror = JSON.stringify(e.message)
            var textarea = document.getElementById("jsonText");
            if (this.jsonerror.indexOf('position')>-1) {
                // highlight error position
                var positionStr = this.jsonerror.lastIndexOf('position') + 8;
                var posi = parseInt(this.jsonerror.substr(positionStr,this.jsonerror.lastIndexOf('"')))
                if (posi >= 0) {
                    textarea.setSelectionRange(posi,posi+1);
                }
            }
            return "";
        }
        return JSON.stringify(jsonValue, null, 2);
    }
  }
})
```

The HTML / Vue Markup
===

The markup is very simple and I used Bootstrap 4 for the styling. As you'll see here there are 2 mutually exclusive divs. The first to show errors, and the 2nd to confirm that the JSON is valid.

The JSON itself is contained in a textarea that's bound to the `jsonstr` v-model. Finally the `<pre>` tag displays the formatted JSON...

```
<div id="vueapp">
   <div class="text-danger" v-if="jsonstr && jsonerror">{{ jsonerror }}</div>
   <div class="text-success" v-if="!jsonerror">Valid JSON ✔</div>
   <textarea v-model="jsonstr" rows="10" class="form-control" id="jsonText" placeholder="paste or type JSON here..."></textarea>
   <pre>{{ prettyFormat }}</pre>
</div>
```

Grab the [code here](https://codeply.com/go/932bxkCVow), and share your comments!😊
Asynchronous communication doesn't always work 📲‍
Tags: watercooler, discuss, remote, productivity
Published: 2020-11-24 14:28:26

Asynchronous  communication is key to remote work. You can't expect  your teammates from across the world to be available  exactly when you  are free or respond to your messages immediately.  Instead, the focus  should be on working independently & responding  thoughtfully through long-form messages when you get time.

However, a new [HBR article](https://hbr.org/2020/10/successful-remote-teams-communicate-in-bursts) suggests that asynchronous communication may not be the most effective way of remote collaboration and the focus should be on communicating  synchronously in bursts and doing deep work at other times.

##Communicating in bursts

A mixup between periods of high activity and those of little or no activity comes naturally to humans.

How to use this at work:
- Align on common times when the team is available. ([Dropbox's new virtual-first model](https://remoteclan.com/s/unxocp/dropbox_is_giving_up_on_its_offices) also talks of implementing this.)
- Block other times for deep work.

Do not view emails &  messages as forms of asynchronous communication where you send something  whenever you like & the other person responds whenever they are  free.

###Focus on audio & text, not video

The article claims that video communication isn't very great as people tend to focus more on visual cues & less on  participation. 

###Focus on short, crisp messages & calls

You want to make sure there's a healthy, rapid exchange of  messages during the bursty period rather than long moments of silence to think and respond.

##What is bursty communication trying to solve?

- Solves problems with loss of creativity & brainstorming caused by remote work.
- Areas such as engineering need synchronous communication for problem solving.

##Major challenges of bursty communication as compared to asynchronous communication

- Finding common times daily is tough due to different locations and schedules.
- Rapid exchange of short messages may result in superficial conversations.

Do you see any loopholes in this model or you think this will be a game changer? Let me know your thoughts on this!

**I write regularly about remote work, tech & startups on [Twitter](https://twitter.com/hrishiptweets). You can [follow my updates there](https://twitter.com/intent/user?screen_name=hrishiptweets).**
JavaScript #shorts - Filtering Arrays
Tags: javascript, node, tutorial, todayilearned
Published: 2020-11-24 14:28:00

Hey There Folks! 🙌🏾

I'm back with a new series. It's called JavaScript **#shorts**. Sticking with the *less than a minute* video format on YouTube that is nowadays becoming popular, I will be producing tiny, byte-sized videos around simple topics that can be consumed and absorbed into a short amount of time. 

Hope that it will help you become a better JavaScript developer somewhere down the line.

Here is the first video in the series where we look into Array filtering:
#### Filtering on JavaScript arrays
{% youtube XoGZw7HYBZ8 %}

Hope you like that ❤️
Cheers!
Custom Animated CSS Switch
Tags: css, html, switch, animated
Published: 2020-11-24 14:15:22

Please check out my [YouTube Channel](https://www.youtube.com/channel/UC5fLpNYfnyHYX7rvm1LYEyQ)

Today we are going to learn how to make a custom **switch/checkbox** made by using HTML and CSS only.

---

# **CodePen**

{% codepen https://codepen.io/arc-coder/pen/dypbyWb %}

---

# **HTML Code**

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="index.css" />
        <title>Custom Animated CSS Switch</title>
    </head>
    <body>
        <div class="center">
            <input type="checkbox" name="" id="" />
        </div>
    </body>
</html>
```

---

# **CSS Code**

```
body {
    margin: 0;
    padding: 0;
    background: #f3f3f3;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type="checkbox"] {
    position: relative;
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    background: #c6c6c6;
    outline: none;
    cursor: pointer;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 300ms linear;
}

input:checked[type="checkbox"] {
    background: #03a9f4;
}

input[type="checkbox"]::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: left 300ms linear;
}

input:checked[type="checkbox"]::before {
    left: 40px;
}
```
Book review "XML and Perl" 
Tags: perl, books, xml
Published: 2020-11-24 14:15:21

![XML and Perl](https://dev-to-uploads.s3.amazonaws.com/i/7w4jhbv1eidyi217eqk9.jpg)

I continue my reviews with another antic Perl book :smile:

## Disclaimer
A lot of weaknesses of this book are due to the age but I won't refrain to report them with honesty :)

I'm very grateful to the person that took time to write this book : **Mark Riehl** and **Ilya Sterin** !

## The bad
It is outdated, definitely, like a bit frozen in 2003.

I wrote another book review about [Perl and LWP](https://dev.to/thibaultduponchelle/book-review-perl-and-lwp-emd) which was outdated also but not suffering as much as this book.

Clearly, this book was written during the "XML boom" in 2003 and keeps scars from this period :
* The coding style is not modern 
* When you want to make people able to be quickly efficient with Perl and XML (probably the idea of the authors), you give a lot of "ready to use" code snippets (and it ages bad)

![Outdated](https://dev-to-uploads.s3.amazonaws.com/i/46y6wo9j31kxk6rlc6k7.jpg)

When I looked for some technologies in Google, I was suprised (but interested) to see they were just dead :grin: :
* Axkit 
* XQL

There is only one edition of this book therefore it explains why it is so outdated.

## The good 
I liked the way it goes deep in the XML things like `xslt`, `XML schema`, `xlink` and `xpointer`.

I really appreciated to explanations about `Web Services` (very clear, **best explanation I read about this topic so far !**) `SOAP` and `XML-RPC`.

In the same topic, the comparison `SOAP` vs `CORBA` vs `RMI` vs ... is very nicely detailed.

In the part about XML in general, I found some very interesting parts :
* Listing and details about elements
* When to use attributes or elements (this endless question has a simple answer...)
* `DTD` vs `XML Schema`

And finally the paragraphs about **tying XML to RDBMS** are very interesting.

What is `Schematron` and `WML` ? :grin:

## Conclusion 
To really enjoy this book, you need to know Perl but you should not know too much XML (which was not my case, I already studied the XML spec in the past to write an [XML minifier](https://metacpan.org/pod/XML::Minifier))

There are **TOO MUCH** code samples, each time the XML sample + the DTD + Perl code to process it = TOO MUCH :smiley:

![Too much](https://dev-to-uploads.s3.amazonaws.com/i/pisxf7au1yqugwo2w448.jpg)

No human can read so much code samples without falling asleep :sleeping:

But overall there's still a lot of history bits and various notions around XML and the book really deserves to be skimmed.
Bash scripting fundamentals: shell file walkthrough
Tags: linux, bash, beginners, tutorial
Published: 2020-11-24 14:06:26

Previously, we talked about [8 basic bash commands](https://dev.to/medsaad/8-bash-commands-with-options-for-beginner-developers-3g7i) and then saw [how to use them in a more complex ways](https://dev.to/medsaad/writing-complex-bash-commands-using-redirecting-chaining-nesting-51l). Today, we will learn how to execute bulk of these commands by adding them inside a shell file.

Shell scripting is not just good for multiple commands grouping, it also can help you control the flow based on some input from user. You can pretty much build a program with it.

We will discuss how to create a file, the structure of a shell file and create a file duplicator program, then finally learn how to execute it like any other Linux command.

{% youtube H_bU7u2dvT8 %}

What's next?
Learn about [bash command arguments and user input](https://youtu.be/4bcUii6HDYo)
15 Tech skills companies are looking for in freelance software developers
Published: 2020-11-24 14:00:12

IT companies around the world are hiring contract and freelance tech professionals to fill immediate demand. There is a huge demand for software developers and engineers that can work in a freelance capacity. The freelancer listing and aggregator platform, Upwork has recently published a list of most in-demand tech skills for freelancers. The platform has also published a survey citing the skills that IT managers look for in freelancers.

Here are the most in-demand tech skills for freelancers:

JavaScript CSS HTML Website Development PHP API Development WordPress HTML5 Web Design Python Web Application API Integration jQuery MySQL React
It is no surprise that the most in-demand programming languages among freelancers are also the most popular languages for full-time positions. A survey report by Burning Glass has also listed the same tech skills as the highest in-demand skills for full-time tech positions.

Popular programming language skills for freelancers:

SQL Java Python JavaScript Microsoft C# C++ Ruby
The employers are looking for full-stack programmers that are capable of working in multiple technologies. The freelance developers that have the demand in today's market are expected to have extensive knowledge of HTML, CSS, JavaScript, WordPress and more.

For smaller companies, it makes sense to hire resources having multiple skillsets. Amid the Covid-19 pandemic, many businesses rushed to take their businesses online with the help of e-commerce platforms, which has raised the demand and popularity for developers with web and e-commerce skills. Burning Glass report predicts that the need for web developers will grow by 14.9% over the next ten years.