teleren/devto huggingface dataset:
Day 306 : Straighten It Out
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-10 23:02:19

_liner notes_:
- Professional : Got up early to get ready to practice my upcoming presentation with some team members. It worked for the most part. Had some small glitches, but I was able to straighten it out. Going to refine some slides and keep practicing so I get smoother. Had a couple of meetings. Then worked on some other tickets.

- Personal : Last night, I worked on my slides to get ready for my practice run. Pretty sure I went through some tracks, don't really remember though. haha It was a long day. Don't think I watched "The Watch".

![Looking up at a stripped mountain at sunset in Old Paria, UT, USA](https://dev-to-uploads.s3.amazonaws.com/i/wpnz18nypqpae04urlak.jpg)

Went to Publix after work for $5 sushi! I was in and out pretty quickly. Going to go through tracks, work on a side project and watch "The Watch".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube xhDb8LoScpI %}
Install classic Jupyter Notebook on Ubuntu 20.04
Tags: python, jupyter, ubuntu, linux
Published: 2021-02-10 22:26:23

*Original tutorial appeared on [https://sittingdev.com/blog/classic-jupyter-notebook-ubuntu/](https://sittingdev.com/blog/classic-jupyter-notebook-ubuntu/)*

In this simple tutorial, you are going to learn how to install the classic version of Jupyter Notebook on Ubuntu 20.04.

For this tutorial, you will need to make sure that you have Python 3 installed.

*Note: This tutorial should also work if you are using Ubuntu 18.04 if you have Python 3 installed.*

You can check this by opening up a terminal and typing `python --version`.

If you are using Python 3 then you should already have pip installed.

`pip --version`

**You can update pip by running this command:**

`python -m pip install -U pip`

Now we are ready to install the classic version of jupyter notebook.

**In your terminal enter the following pip command:**

`pip3 install notebook`

Before you run the server you might want to create a new directory to hold the files you will be using inside of jupyter.

**Go back to the command line in your terminal.**

```mkdir jupyter-folder
cd jupyter-folder```

**You might want to create a readme file as well.**

`touch README.md`

**Now launch the jupyter notebook server in your terminal.**

`jupyter notebook`

You can close the server by hitting `ctrl + c` and then confirming `y` you want to quit in the terminal.

## Creating a virtual environment for your jupyter notebook folder:

**Run the following command:**

```sudo python3 apt install python3-venv
python3 -m venv virtual```

**Now run the command:**

`source virtual/bin/activate`

You can exit the virtual environment by entering the `deactivate` command.

## Creating a jupyter notebook kernel linked to your virtual environment.

```pip3 install ipykernel
python3 -m ipykernel install --user --name=virtual```

**Now run jupyter notebook again.**

`jupyter notebook`

That's it!
Tricks Chrome
Tags: chrome, shorcut, productivity
Published: 2021-02-10 21:51:20

---
title: Tricks Chrome
published: true
description: This is a simple shorcut to move your tabs with a keyboard.
tags: chrome, shorcut, productivity
//cover_image: https://direct_url_to_image.jpg
---

In chrome you can move the current tab to the right with the key combination:

<kbd>Ctrl</kbd> + <kbd>shift</kbd> + <kbd>Page Down</kbd>

And to move to the left you can use:

<kbd>Ctrl</kbd> + <kbd>shift</kbd> + <kbd>Page Up</kbd>

This can improve your productivity by having the tabs you use organized.

## Edit web page like a word

Put in developers tools:

```
document.designMode = 'on'
```
for off this 
```
document.designMode = 'off'
```

## Shorcuts for Extensions

You can customize the shorcuts to make faster use of the extensions you have installed in your browser. Just go to:

[chrome://extensions/shortcuts](chrome://extensions/shortcuts)



## Devtools Avanzado 

Puede usar la paleta de comandos de las DevTools para acceder mas rapido a las herramientas, primero abra las Devtools y luego presione la combinacion:

<kbd>Ctrl</kbd> + <kbd>shift</kbd> + <kbd>P</kbd>
Angular Event Binding Deep Dive
Tags: angular, webdev, javascript
Published: 2021-02-10 21:51:03

Joe Eames | ng-conf | Joe Eames

One of the fist things we learn in angular is how to handle events. But many of us just learn how to do the basics, and never give it another thought. But understanding what’s really going on can come in handy in certain situations.

So let’s take a look under the hood of event bindings in Angular and see how that knowledge can help us out.

The basic syntax of event binding is pretty familiar to just about all Angular developers:

```
<button (click)="onClick()">Click Me</button>
```

This syntax listens to the click event on the button.

As you learned Angular you may have learned that the name of the events we listen to are the names of the underlying DOM events. So if we want to listen to the click event, then we bind to `(click)` and if we want to listen to mouseenter then we bind to `(mouseenter)`.

But what not everyone may realize is that Angular is just doing an event listener basically the same way you would if you were using vanilla JavaScript.

```
element.addEventListener('click', () => { console.log('clicked') });
```

This isn’t just a mechanism where Angular has a list of events — click, mouseenter, etc — and if you type in one of those names then it’ll listen to the same event. Instead, you are giving Angular the name of an event you’d like to listen to.

Now not many people know that in the DOM, you can raise custom events on an element. So for example, you could have a `config` event on an element, and if you wanted to listen to that you could like so:

```
<element (config)="onConfig()" />
```

In this case, Angular will listen to that config event.

Now you may wonder why this matters.

Well, it can come into play if you are using some kind of 3rd party library, widget, or control that doesn’t natively support Angular, but does work by raising events on an element. So if you found the perfect date picker control, but it happens to be built in jQuery, no worries. You can listen to any events it raises through the above syntax.

```
<calender (dateselected)="onDateSelected()"></calendar>
```

It’s this level of understanding of how Angular works that can let us diagnose bugs, interop with other products, and do all kinds of useful things.

Happy Coding.

## **ng-conf: The Musical is coming**
ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at [ng-conf.org](https://www.2021.ng-conf.org/)
New season! Mid Meet Py - Ep.1 - Interview with Laura Funderburk
Tags: python, podcast, midmeetpy, talkshow
Published: 2021-02-10 21:47:52

And we are back!
We missed you all very much and decided this was enough time away. Did you enjoy 2020? It was dreadful for us too, but we are glad to be back!

## PyHall of Fame
To celebrate our return we had the wonderful [Laura Gutierrez Funderburk](https://twitter.com/LGFunderburk), Data Scientist for @Calisto_Canada, Developer for @irepector_plus and organiser of @PyLadies Vancouver.

She and [Cheuk](https://dev.to/cheukting_ho) had a chat about community, [Pyjamas](https://pyjamas.live/), Laura's programming experience and her tips for those who are starting on this career path.

## PyChat
The episode also announced:
* the host's participation on the Python DevRoom at [FOSDEM 21](https://fosdem.org/2021/schedule/track/python/)
* the call for proposals for PyConUS (ending on Feb 12th)
* a new Irish Machine Learning group on Slack called [ML Éire](https://www.linkedin.com/posts/andrewm4894_machinelearning-ireland-activity-6760214838850461697-Ct49/)

## PyCommendations
Finally, as part of the episode's recommendation is the [Flask Mega Tutorial](https://www.notion.so/Streaming-Jan-29th-epi-I-7cd79f7eef784ca485b61ad3263bef5b#ee5a490de2ce43ca91cfcc5493f1d7e3) by [Miguel Grimberg](https://twitter.com/miguelgrinberg).

---

**Watch full episode [here](https://dev.to/midmeetpy/mid-meet-py-2021-ep-01-we-are-back-and-chat-with-laura-gutierrez-funderburk-ef4)**

The next episode will be streamed live on [Twitch](https://www.twitch.tv/cheukting_ho) on Feb 26th at 6pm UTC.

Come join us at this month's [MidMeetPy](https://twitter.com/midmeetpy)!
How to get started with implementing Vue.js to existing work
Tags: vue, codepen
Published: 2021-02-10 21:25:45

Hey Y'all, Tech With Joe here!

Today I just wanted to explain a little bit of how I implemented Vue.js to a project that I actually completed last week. However, it would be more then ideal to explain what Vue.js is first! Vue.js is a component of Javascript that allows for faster and easier implementation of building user interfaces and single page applications. Vue.js does a great job of being able to reuse code. 

When implementing Vue.js to existing work, it is actually easy to do so. Using this website, https://overclocked.medium.com/adding-vue-js-to-an-existing-project-ed2d040f870bhttps://overclocked.medium.com/adding-vue-js-to-an-existing-project-ed2d040f870b (Credit to author Blunt Jackson), it is very easy to follow the steps to implement Vue.js to your existing code. 

Personally, I used Vue.js to implement an easier way of defining texts. Instead of normally writing out each section of my resume, I created labels and used those components to easier format my Resume, as well as be able to use repeated strings without typing these strings out. I also used the looping to post my picture at the bottom of my resume, without having to type out the entire picture URL again. 

My use of Vue.js is very basic, but learning Vue.js is a great way to take HTML websites to the next level. 


I explained a little bit else in my video as well: 
https://www.youtube.com/watch?v=oOWWx4J9cu8

My work using Vue.js: https://codepen.io/techwithjoe/pen/NWbPYMY
Running complex matrix builds using variable substitution in GitHub Actions
Tags: githubactions, github, devops
Published: 2021-02-10 21:10:44

Matrix workflows in GitHub Actions handle the variable substitution for you. You define a set of variables in the matrix keyword, and GitHub Actions takes over the expansion expansions of those variables for you.

In the open source Node world, maintainers need to keep their CI up to date with tests for multiple versions of Node.js. Matrix builds in GitHub Actions become powerful very quickly.

In the examples below, I want to test with four different node versions and three versions of Mongo, and two versions of Redis. To test these different combinations, that's 24 different configurations.

Instead of defining sixteen different jobs, or worse, having to set up 24 different machines on your kitchen table(s), I can just specify a matrix with three variables. If I specify a matrix in a job, I'll actually get sixteen jobs running with the different permutations:

```
name: Run test matrix

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x, 14.x]
        mongodb-version: [4.0, 4.2, 4.4]
        redis-version: [4, 5]

    steps:
    - name: Git checkout
      uses: actions/checkout@v2

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Start MongoDB v${{ matrix.mongodb-version }}
      uses: supercharge/mongodb-github-action@1.3.0
      with:
        mongodb-version: ${{ matrix.mongodb-version }}

    - name: Start Redis v${{ matrix.redis-version }}
      uses: supercharge/redis-github-action@1.1.0
      with:
        redis-version: ${{ matrix.redis-version }}

    - run: echo "done"
```
_Each node eversion is running the latest minor version, i.e. 14.x will run 14.15.4_

![Screen Shot 2021-02-10 at 4.08.38 PM](https://dev-to-uploads.s3.amazonaws.com/i/ykld1zf7m7svpymp68pv.png) 

When you run this workflow, you can see quickly how it expands to 16 different jobs. On the left of the workflow run, you can see each of them. So that simple workflow expanded out very quickly.

When you open up the steps on one of the runs, you can see that indeed we were able to install our dependencies. If I open up the build I'm in fact running an environment with Node, MongoDB, and Redis.

![Screen Shot 2021-02-10 at 4.09.00 PM](https://dev-to-uploads.s3.amazonaws.com/i/mlkykrgrc17efly316zy.png)
 

To learn more about MongoDB replica sets checkout the [supercharge/mongodb-github-action](https://github.com/supercharge/mongodb-github-action) README.

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/skip-pull-request-and-push-github-action-workflows-with-skip-ci-3bl3 %}
Kicking Off...
Tags: javascript, beginners, launchschool
Published: 2021-02-10 21:01:22

I quit my job as an engineer in order to focus on learning web development (full-time).
And I'm starting this blog!

For now, the blog will catalog select topics learned or relay tips/tricks picked-up throughout my journey.

There are a variety of reasons why I chose web dev and left my day job, but I'll spare you the details. 
I have degrees in electrical engineering and embedded systems. It does seem like I'm, yet again, wasting my time with more 'technical education'.

I'm not going this thing alone. In early November, I enrolled in the JavaScript track at [Launch School](https://launchschool.com/) and haven't looked back. I'm very much looking forward to progressing in the LS program.
Some posts will be specific to Launch School's assessments. I'd like to do my part and contribute to the Launch School community.

Looking forward to lots of markdown ;)
📱Android - How does your team 👉 DEV -> QA -> Release ❓
Tags: android, qa, mobile, productivity
Published: 2021-02-10 20:56:10

> This post will outline our current process for mobile development on an Android app. Hopefully it will instigate discussion and responses on how other teams have implemented this software development lifecycle.

## How our team ships Android apps (software development lifecycle):

1. Developer checks out a feature branch to do work
2. Developer pushes branch up, jenkins builds an apk with the feature branch name in the filename `[feature branch name].apk`
3. QA team downloads and sideloads this feature branch apk to run on their Android device
4. If QA passes, the developer merges the feature branch into `master` branch
5. To make an app store release, the developer checks out a release branch from `master`, bumps the `versionCode` and `versionName` values, builds an apk and uploads for a Play Store release

This process requires a lot of manual installing/uninstalling of Android `.apk`'s but it is reliable for separating builds and features for testing.

Does your team have a different way for Android software development lifecycle?
I built a React Native App to Manage Netlify Hosted Sites
Tags: reactnative, netlify
Published: 2021-02-10 20:33:43

---
title: I built a React Native App to Manage Netlify Hosted Sites
published: true
description: Scratching my own itch
tags: ReactNative, Netlify
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/22phbvrt42182qfbc507.png
---

Today I'm announcing [Netli.fyi](https://netli.fyi?source=dev.to) a small app that helps you to manage your Netlify sites on the go. It's built with React Native and uses the Netlify API to show you your Netlify sites, builds logs, deployments, and form submissions. 

Despite being mostly a mobile developer, I built quite a lot of websites and web apps with Gatsby, Publish, and NextJS during the last two years. The majority of these are hosted by Netlify, because I love the ease of use it provides: deploy previews, form submissions and functions work exactly like I would want them to. The Netlify site is pretty good for managing stuff with a desktop browser. However I needed something to make it faster to do while on the go, so I ended up building Netli.fyi

{% tweet 1359597977980047363 %}

The app is built with React Native and makes use of the following packages
- react-navigation
- react-native-svg
- react-native-vector-icons
- react-native-app-auth

When it comes to future features, I'm currently working on making it possible to redeploy sites from the app, see Netlify functions related information. In addition to I think some kind of iOS home screen widget would be a pretty nice addition, and after thinning the app a little I think I could a subset of features into an Apple AppClip as well which would make it easier to try the app.

The app is available for both iOS and Android for the price of a cup of tea, but you can also enroll in the open beta programs for either platform to give the app a try. I would love you to try the app and give feedback on what features you would like to see 🙂
Welcome Thread - v111
Tags: welcome
Published: 2021-02-10 20:09:42

---
title: Welcome Thread - v111
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Tracee Ellis Ross waving hi](https://media.giphy.com/media/3o72F2fmqq8uYg6VdC/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Why companies will be built around VSCode extensions.
Tags: vscode
Published: 2021-02-10 20:06:21

I believe that in the near future, certain companies will not be looking to build a iPhone app, or an android app, not a website or an e-commerce shop.

They will focus on building and deploying a VSCode extension as the core of their business. Here's why.

# Where are all the developers at?

VSCode! The all encompassing behemoth owned by Github / Microsoft / NPM. It's at the center of their enterprise, integral to their mission. It's microsoft's google chrome. 

A couple of months back youtuber Ben Awad recreated [Instagram Stories](https://www.youtube.com/watch?v=ApR-kNXxLUs) and [Tinder in VSCode](https://www.youtube.com/watch?v=bfd8RyAJh6c), why? Who knows! Obviously it's tongue-and-cheek, a gag, a silly experiment. But is there something really here?

Companies spend millions of dollars for software to manage their software companies splunk, new relic, pager duty, github, aws. I think that a VSCode plugin could be a viable interface to utilize these services.

# Dual platform

With Github Codespaces anyone can use VSCode and VSCode extensions on the web. Which basically means if you build a VSCode extension it's accessible as a "native app", as well as on the web. 

# Conclusion

I think over the next couple of years we will see companies continuing the trend to inhabit the space where you write your code. To have their service running along side it, integrated to it, and I think it's pretty exciting.
ReactJS Real Time Crypto Dashboard Tutorial
Tags: react, webdev, tutorial, javascript
Published: 2021-02-10 19:37:49

**Want a quick foundation to build a cool custom portfolio project?**

In this video I quickly go over how to use the Coinbase API to grab historical data for cryptocurrencies and also use their real-time websocket API to get data. I'll then show how to format that data so it can be displayed with a ChartJS component and update a price tracker in real-time.

{% youtube 5alEc5KuyKg %}

[ReactJS Crypto Api project github repo](https://github.com/renaissancetroll/reactjs-crypto-api-dashboard)

Once you've got the basic project built I show you some examples of how you can extend the project so you have something unique

* Create a card style layout and add routing for each currency
* Add multiple time segments for users to look at price history
* Add authentication with a Coinbase account to place orders
* Add pagination support so users can get more historical data
* Customize the ChartJS styling
* Make Chart real-time by updating latest data point with current price data
React vs. LitElement, Which is Better?
Published: 2021-02-10 19:30:29

## What is React and LitElement?
First before we look into which is better we have to define both of these, first up is React. React is a JavaScript framework that is used for building UIs. It uses a wide range of components that allow for very complex interfaces to be made with relative ease. These components can be customized and reshaped to fit your needs through the use of properties. This gets you some pretty good customization. 

LitElement is a library that allows for the user to import from an already established library. The customization with LitElements is a bit not as wide as React's but it is just as useful. As a library the user has access to many already great objects that they can use for their components. This means that if you have a specifi task that you have in mind, then LItElements will most likely have a component for it.

## What is the Difference? How are they Similar?
React and LitElement are different but have some similarities. The biggest difference is that React is a framework, and LitElement is a library. Essentially it boils down to the flow of the application. With a library, the user is in control of the flow of the application, but with a framework, the framework is in control over the flow. This picture should help visualize this  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xmz5na9wye9apyog0c5.png)

When using React the user will have to extend a component to make use of it, such as a with the Tic Tac Toe example that can be found at, https://reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial. This is a great place to get started with React as well. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2j6afet8d9hbhcjqx5hu.JPG)
The React component gets extended and is subsequently used by the shopping list class. The same goes for LitElements. They both extend for their components to be used.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/irsla7kv61uj7ujhturh.JPG)
This example can be found at, https://lit-element.polymer-project.org/try. This is a good starting point to learn the basics of LitElement. 

## Which one is better?
I personally believe that neither is better than the other. They are both good at their respective roles, and it all depends on what the user thinks is a better fit for their project. They both can do generally the same thing, but they go about doing so differently. If you are interested in either of these please go check the out. I hope this has been helpful. 

Also check out my video on this subject
 https://youtu.be/Lq8tq1ynSE8