teleren/devto huggingface dataset:
Google Nexus 5 reload image
Tags: android
Published: 2021-02-11 04:33:26

# Why I did upgrade?
My 2 years old daughter was around me and was looking for some nice toy, she does not want to play with any existing toys now. Ok, I gave her my very old Google Nexus 5, she liked it and she used it to pretend to make phone calls and taking pictures. The world is calm and I can back to write some code now. 

After supper, I checked that Nexus 5, need more power charge and maybe the system is too old, as a programmer who sometimes considers too much about security, the first step is upgrading it, so I did the upgrade. 

It is 2021 now, and the phone quickly taught your lesson you should not do the upgrade instead you should just throw it away since it is too old! But my little girl still want to play it and now I just made it totally un-function. 

# How about reset 
Reset back to factory image is the first step I tried, follow some link like [Factory Data Reset](https://www.verizon.com/support/knowledge-base-208003/). Still failed since the factory image was corrupted, now I am in real trouble. 

# Solution
Some old Android programming knowledge told me that I should just take a look maybe I can get some help from Android website, so yes, I found the Factory Image from Android [webpage](https://developers.google.com/android/images). I quickly downloaded the Android Studio to start re-program the phone, and failed again with ADB Fastboot error.

Thanks to Stackoverflow found the solution that I need older version of Android platform-tools. After installed the older version of platform tool, Finally, I got the factory image loaded back to phone and it is working again. 

# References for StackOverflow
- https://stackoverflow.com/questions/60443933/adb-fastboot-error-when-flasing-rom-failed-remote-unknown-command
- https://stackoverflow.com/questions/53453640/is-there-a-way-to-install-an-older-version-of-android-platform-tools
What the heckers is VueJS????
Published: 2021-02-11 04:29:27

Full disclosure.

This was no easy task for me. The last time I did Java was in the 9th grade, and NO I am not an IST major or CS Major. Luckily, with the help of my classmates and the Vue website, I was able to figure it out.

Vue is a Java Script framework that is easily implemented with UI and other frameworks. It is an exceptionally easy tool to use if you don't have coding background (like me), and would like a thorough tutorial. Another cool thing, and way that I used it, is that it can integrate seamlessly into your existing code. Last week I created a resume using HTML and CSS, and this week wanted to incorporate this Vue tool into it.

In the video below I will essentially walk you through how to use Vue, the uses of it, and how I used it. The VueJS helped me simplify my cluttered code, just with one simple download! Enjoy!




https://youtu.be/G4_K_RPvPwg
Introduction to Regular Expressions
Tags: regex, codenewbie, webdev, javascript
Published: 2021-02-11 04:24:01

# **Terminology**

---

**Regular expression**: Also known as a **regex**, a regular expression is a set of characters we can use to find patterns in a string. The set of characters is enclosed in `/ /` and may include flags after the second slash.

### **Methods That Use Regular Expressions**

- **`String.prototype.replace()`**: Takes two arguments - the first is a regular expression, the second is what the pattern should be replaced by.
- **`String.prototype.match()`**: Takes a regular expression as an argument and then returns an array with all matches.
- **`RegExp.prototype.test()`**: Takes a string as an argument - the regular expression is the receiver - and returns a boolean if the string contains the pattern.

### **Regex Characters**

- `\d`: Numbers
- `\D`: Not numbers
- `\w`: Matches any alphanumeric character (including underscores) - so numbers and letters
- `\W`: Matches any character that's not a number, letter or underscore
- `\s`: Matches a whitespace character
- `\S`: Matches any non-whitespace character
- `.`: Any single character (wildcard)
- `^`: *Not* this pattern

### **Regex Flags**

Regex flags come after the second slash in a regular expression. For instance: `/cat/gi`.

- `g` is the global flag. Without this flag, regular expressions usually just find the first matching pattern in the string. With this flag, the regex will find *all* matching patterns in the string.
- `i` is the case insensitivity flag. When it's added, the regular expression will ignore case sensitivity.

### **Regex Groups and Ranges**

- `[ ]` denotes that all characters inside the brackets should be considered a matching pattern. For instance, the pattern `/[aieou]/` will match any vowels in a string.
- `` denotes a range of characters. For instance, the pattern `/[0-9]/` denotes all numerical digits. `[A-Z]` and `[a-z]` are other common ranges.

### **Regex Quantifiers**

- `+`: Match the preceding character one or more times
- ``: Match the preceding character zero or more times
- `?`: Match the preceding character zero or one times
- `{x}`: Match the pattern `x` number of times
- `{x,}`: Match the pattern at least `x` times
- `{x,y}`: Match the pattern at least `x` but no more than `y` times

### **Other Helpful Regex Symbols**

- `|`: Represents or. For example, `/cat|dog/` states match either `"cat"` *or* `"dog"`
- `\b`: Denotes a pattern boundary. Can be used at beginning or end of a pattern. For example, `/\bcat\b/` represents an *exact* match with "cat" - and doesn't match with "cathedral".

Check out Mozilla's [Regular expression syntax cheatsheet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet) for more.
React Vs. LitElement: Framework Vs. Library
Published: 2021-02-11 04:23:44

## React
React is a type of JavaScript library that is more flexible and efficient for creating interfaces.  It is composed of small sections of code called **Components**. These components are used to create complicated user interfaces with less work than normal. The component then takes in parameters known as **Props** which is short for properties. React then functions by letting the user pass data through components to give them values. It is also worth noting that React can be used on their interactive website or downloaded and used locally on a personal computer. Below is a screenshot displaying an example of using React.Component and then **render** to display the properties.

![image](https://dev-to-uploads.s3.amazonaws.com/i/89zscd2qx7acu6e3yok2.png)

## LitElement
LitElement is a base class that is used for creating web components that will work with any framework and with and webpage. The description on their website describes it best - "LitElement uses lit-html to render into shadow DOM, and adds API to manage properties and attributes. Properties are observed by default, and elements update asynchronously when their properties change." Similar to React, LitElement uses classes and gives components a property to initialize and use its value. It is viewed more as a tool for Web components with fewer dependencies.

## Framework Vs. Library
So what is the difference between React's Framework and LitElement's Library? Both use similar functions since they are both used with Javascript and have similar properties in that sense. However, the main difference to be noted is that React uses a type of virtual DOM and LitElement uses a virtual library on top of regular Web Components. This is why LitElement's library can be compared to jQuery in a form of an analogy. Below are some of the key points of a Framework and Library for differentiation.

#### Framework
* An application
* Contains code and a library
* Can be filled in
* Has dependencies

#### Libraries
* Uses preexisting code
* Is called by your code
* Has stylistic impacts
* Is not standalone


Frameworks are a more robust tool that includes code and can contain libraries, where libraries (in this case LitElement's library) are more for designing and making code and components "prettier". The difference is notable because a user will have different uses for each tool. Both are useful for different reasons. Sometimes a user doesn't need an entire framework and can get everything from a library, or sometimes the library may not have everything that is desired.

Here is a YouTube video outlining some of the basic information about React and LitElement. It also covers some of the tutorials that are provided by both sites and a walkthrough of their methodologies.

[Video Link](https://youtu.be/jdli30NH-HE)
What is VueJS
Tags: javascript, vue
Published: 2021-02-11 04:00:09

#JavaScript:
To explain what VueJS is we need to first define what JavaScript is. JavaScript is used with HTML and CSS to create webpages, but unlike HTML which is used to display the information and CSS which controls the page layout, JavaScript is used to control the webpage's overall behavior. JavaScript is a way to make the webpage more interactive for the users. With JavaScript you can also change the contents of HTML and CSS. 
#VueJS:
VueJS is a progressive JavaScript framework. It is known as progressive because it is highly adoptable and can easily work with pre-existing applications. VueJS can split a webpage into different reusable elements. One of the major qualities of VueJS is that it is reactive. Reactive means that when data is changed or altered VueJS will automatically update the webpage to match the altered data.
#My VueJS Component: 
In Codepen I made a very simple resume using HTML, CSS, and VueJS. Using VueJS I created expressions to store the information and then had the expressions placed in the HTML code to have them displayed to the resume page. 
Here is a picture showing VueJS expressions underlined in blue
![image](https://dev-to-uploads.s3.amazonaws.com/i/z0uo6u1yhjn1i8p6w63j.png)

In the photo below it shows the expressions being defined in VueJS
![image](https://dev-to-uploads.s3.amazonaws.com/i/9ok9uy32uii7137ple3j.png)

In the skills/interests section the expression used represents a list so I needed to use a for loop to have all the elements in the list to be displayed.
Codepen: 
https://codepen.io/cleverinsect/pen/zYoBZye 
YouTube:
https://youtu.be/DzpgAzONCo0 
Helpful Sources of Information:
https://vuejs.org/v2/guide/index.html#What-is-Vue-js 
https://www.w3schools.com/js/default.asp
Leaflet onClick event
Tags: leaflet, gpx, python, javascript
Published: 2021-02-11 03:58:58

In the previous post we added distance markers to our GPS track to see where on the route we passed the distances.
But what if we want to know exactly how far along the route a given point is? 
We want to be able to click on the track and calculate how long the distance was from the starting point to the point we clicked on in the map. That is what I will show how to implement based on the code from the previous posts and it turns out that Leaflet let us do this fairly easily.

The on-click event on the polyline we use to draw the track on the map, returns the latitude and the longitude of the point you clicked. We use these coordinates to find the the index of point on our track closest to these coordinates. This index we use to sum the length of each section of the track polyline until we get to that index.
Finally we add a marker to the map with the distance in meters from start until the clicked point on the track.

So all the code for this feature is implemented in JavaScript so no changes to the Python script this time. You can see the new code below.

```javascript
const polyline = L.polyline(track, {color: 'blue'}).addTo(myMap);
var highlightMarker = undefined;
polyline.on('click', function(e) {
  const closestIdx = findPointIdxOnPolyline(track, e.latlng);
  const trackLength = lengthOfTrack(track, closestIdx);
  if(highlightMarker != undefined) {
	myMap.removeLayer(highlightMarker);
  }
  highlightMarker = L.marker(track[closestIdx], {icon: L.divIcon({ html: '<span style="font-size: 20px; font-weight: bold">' + Math.round(trackLength) + 'm</span>' })}).addTo(myMap);
});

function findPointIdxOnPolyline(track, latlng) {
  let prevDiffLat = prevDiffLng = 99999;
  let closestIdx = 0;
  for(var i = 0; i < track.length; i++) {
	var diffLat =  Math.abs(track[i][0] - latlng.lat);
	var diffLng = Math.abs(track[i][1] - latlng.lng);
	if(diffLat + diffLng < prevDiffLat + prevDiffLng) {
	  prevDiffLat = diffLat;
	  prevDiffLng = diffLng;
	  closestIdx = i;
	}
  }
  return closestIdx;
}
function lengthOfTrack(track, idx) {
  var length = 0;
  for(var i = 1; i < track.length && i < idx; i++) {
	let from = L.latLng(track[i-1]);
	let to = L.latLng(track[i]);
	length += from.distanceTo(to);
  }
  return length;
}
```

I hope you found this useful or that it might inspire you to experiment with Leaflet yourself. If so, leave a like and consider having a look at the previous posts in this series.

For the entire code, check out the previous article and clone the repository with the code from the [GitHub repository gpx-to-leaflet](https://github.com/CoderAllan/gpx-to-leaflet).

![Leaflet click event](https://dev-to-uploads.s3.amazonaws.com/i/s8xrthpgz04xa0lszx09.gif)
Macam macam besaran pokok dan besaran turunan rumus penjelasan lengkap
Tags: fisika, besaran
Published: 2021-02-11 03:55:09

Besaran
 Besaran adalah segala sesuatu yang dapat diukur dan dinyatakan dengan angka. Ada 2 jenis satuan :

1.Besaran pokok
   Besaran pokok adalah besaran yang satuannya telah di tetapkan terlebih dahulu dan tidak diturunkan dari besaran 

2.Besaran Turunan
   Besaran turunan adalah besaran yang diturunkan dari satu atau beberapa besaran pokok. 

Contoh besaran turunan sebagai berikut :

a. Luas (A) = panjang × lebar
   (Panjang dan lebar merupakan besaran pokok. Jadi luas merupakan turunan dari besaran pokok)

b. Volume (V) = panjang × lebar × tinggi

c. Massa Jenis (ρ) = Massa / Volume


Source : https://lampuilmu.site
Configure user name & email for Git profile using terminal
Tags: git, terminal, command
Published: 2021-02-11 03:46:46

Git allows you to configure a global and per-project Git profile consisting of name and email address.

Git commands come handy when you want to set or change your git identity. **`Changes only affect future commits`**.

### Set or update user name for local Git profile using terminal

The first thing you should do when you install Git is to set your name and email address.

This is important because every Git commit uses this information. By default this information will be used if none other specified.

And it's immutably baked into the commits you create.

---

#### Commands to configure Git user profile

- `git config --global user.name "your-name"`
- `git config --global user.email "your-email"`

The `--global` option will set your global commit name & email address.

Once done, verify that the information is configured by executing below command in terminal:

```Bash
git config --list
```

---

##### Example

```bash
git config --global user.name "Jane Doe"
```

```bash
git config --global user.email "jane.doe@example.com"
```

---

Read others post on our site [MeshWorld](https://meshworld.in/)

Happy 😄 coding

With ❤️ from 🇮🇳
First Project: Wine List Parser
Tags: python, scripts, programming, docx
Published: 2021-02-11 03:36:58

Hi all, 

I have completed my first 'real' python project. A script that reads in a folder of Wine Menu word documents, and outputs a consolidated list of all the wines on the menus and their tasting notes. I did this for a Wine Bar that I work at. 

https://github.com/jakeparker0/Wine_List_Parser

Any feedback or comments would be great. 

Cheers
Notes About Prisma and Apollo Server Heroku Deployments
Tags: node, heroku, prisma, postgres
Published: 2021-02-11 03:13:57

Deploying an Apollo server to Heroku is really tempting. The free tier is pretty good and if you're just deploying a small hobby project it works great. That's what I thought until I ran into problem after problem with my deployment. It took a few days of digging into Stack Overflow threads to really figure it out. The Problem is the deployment [docs](https://www.apollographql.com/docs/apollo-server/deployment/heroku/) aren't all that complete. It's either that or I set my project up in such a way it wasn't working for me. Today I'm going to walk through the problems I had while deploying and what I did to fix them. Hopefully this helps someone else out down the line.

### H10 - App Crash Error
This was one I kept running into when I first started deployment. The fix to this was actually really simple and it should have been obvious. Make sure that you have the start script set to 'node index.js' the problem was I had mine set to use nodemon which is a dev dependency that doesn't work in production.

### Prisma Client Issues
Now I'm not sure what exactly was happening and why the generated client wasn't deploying but this was a problem I had to work through. After digging around a handful of forum posts and reading some docs I came up with this solution. You need to setup a post deploy hook in the scripts under package.json
```
"heroku-postbuild": "npx prisma generate"
```
This will generate the Prisma client after everything finishes building. This should solve the fact that the server can't make Prisma calls.

Now this isn't the most "here's how to build a thing" kind of post. That's not the intention. The idea is if someone else out there runs into the same problems hopefully this post will help in some kind of way. If it doesn't and you're still running into issues feel free to DM me on twitter and I'll do my best to give you a hand.
Getting schmancy
Published: 2021-02-11 03:12:44

My dev game is on a new level lately (not, like, rockstar level, or even busker level, but perhaps a bit higher than I-know-a-couple-chords level):

- My Habit Tracker app is done for the time being, with all the functionality that I want. My first try at packaging it with PyInstaller flopped, but I think I might know why, and will attack that problem soon.

- I've moved on to web development with what seems like pretty powerful tools like Flask and Jinja. I'm just in the starting phases now, but I'll be building a blog project for eventual launch. And then, on to Data Science (in a few weeks)!

- I'm about to move into an introduction into serverless cloud architecture on AWS. I have briefly played around with things like Lambda before, but I'm excited to dive deeper...
Vue Basics
Published: 2021-02-11 01:55:27

JavaScript is hard and makes me sad. Unfortunately, it is one of those languages that takes an incredibly long time to master, and time is something I barely have as a 20-something college student. BUT, I did manage to scrape by with the most basic understanding of how to create a Vue component that could interact with HTML and CSS.

Vue is a JavaScript library, and is described on their website, is a “progressive framework for building user interfaces”. It assists with front end development in web-based user applications. It is flexible because it can interface with many other JavaScript frameworks or libraries, which allows users to write powerful and diverse web applications. Vue interfaces with by using Vue field variables between curly braces `{{variable}}` and replacing those variables with the corresponding data from the Vue component.

For this project, I updated my resume to include a Vue component that would display the top bar of information. My goal was for the Vue component to provide all the dynamic data such as my name, picture, and links to my Codepen and YouTube channel. By creating a Vue component, the HTML can be modified without regard to the data, meaning it is easily adaptable. My thinking was, if someone wanted to design my heading differently, as long as they used the same variables that are in my Vue component they could make it their own. An example would be if you are getting the data from a database, the Vue component could gather all of the data and feed it to the HTML and CSS to display.

If you want to check out the page I made, [Click Here!](https://codepen.io/caitlinnorse/pen/jOVMmEY)
If you want to check out the YouTube video I made on Vue, [Click Here!](https://www.youtube.com/watch?v=z91KsZA1eK8)
How to place Grid in center in React 
Tags: css, react
Published: 2021-02-11 01:45:15

I was trying to center <Grid> element to center but 
```
margin: 0 auto
display: block
```
nor 
```
margin: 10px auto;
```
worked. 
I researched and those solutions don't work for <Grid> because it a block-level element by default, and which therefore occupies 100% width as you can see from the picture. 
![Screen Shot 2021-02-11 at 10.39.43](https://dev-to-uploads.s3.amazonaws.com/i/tkf7xbcxpu6uewkyxy4c.png)

Here is the code I was trying to apply. 
 
```
    return (
        <React.Fragment>
            <Header/>
            <Box
                className={classes.box}
                style={{
                    color: "#white"
                }}>
                <h2 className={classes.font}>Your customized stress release plan.</h2>
                <p className={classes.font}>20% complete</p>
                <h1 className={classes.font} >How did your stress change over the month?</h1>
                <h3 className={classes.font}>Select all that apply(required)</h3>
                    <Grid container className={classes.grid} >
                        <Grid item xs={6} sm={2} >
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                    </Grid>
                    <Grid container >
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                        <Grid item xs={6} sm={2}>
                            <Paper className={classes.paper}>xs=6 sm=3</Paper>
                        </Grid>
                    </Grid>
                <Button variant="contained" color="primary" disableElevation className={classes.button}>
                    <Link to="/question2">⇨　Go to questions</Link>
                </Button>
            </Box>
            <Footer/>
        </React.Fragment>
    );
```
You could use 
```
    margin: '0 auto',
    width: '50%',
```
but in my case, it already specifies the width so applying this makes the grid smaller. 

So I used this. 
```
    grid:{
        justifyContent: 'center',
        alignContent:  'center',
    },
```
I hope this helps those who are trying to center Grid element.