teleren/devto huggingface dataset:
First week of 100 days of code
Tags: angular, highchart, azure, python
Published: 2019-06-23 23:08:26

Hello there, welcome to my first article!

I love running and coding and one way to map the two together was to participate in the 100 days of code playing around the Strava api : the most popular social platform for runners.

It's been a week that I joined the challenge and it's time to recap and share a feedback.

So far, I have:
- a static [API](https://stravaactivities.azurewebsites.net/api/ActivitiesSample) exposing a list of activities of an average runner 
- a website running on azure http://remstrava.azurewebsites.net with:
    - A single pie chart displaying the activities breakdown per week day
- a local environment setup with Visual Studio Code with the following extensions: 
    - Azure Account  
    - Azure App Service
    - Azure Functions
    - Bracker Pair Color

![image](https://user-images.githubusercontent.com/23420546/59983514-ab49b400-95ee-11e9-85f5-f3534aa1ea50.gif)


This is not much so far and here is my feedback:
- learning curve with azure cloud, angular + highchart, typescript
- back and forth between my personal desktop and laptop
- framework choice is questionable, I could have used power bi for this purpose
- deployment was taking > 30 minutes long before I realized I should just build the solution

The 2 challenges I faced so far were: 
1) the introduction of CORS in my API. Although I had activated Azure Function CORS from the portal, it did not take it into account after publication  
![image](https://user-images.githubusercontent.com/23420546/59983289-daaaf180-95eb-11e9-824f-5f57850be3ad.png) I had to manually add the headers in the response of my api like this:
```python
        headers  = {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "Get, Post, Options"
        }
        return func.HttpResponse(str, headers=headers)
```
This should show in the response headers
![image](https://user-images.githubusercontent.com/23420546/59983420-40e44400-95ed-11e9-9701-190dbd3638a0.png)

otherwise you would run into a Cross Origin Resource Sharing error..

**EDIT** 2020-05-04 : the CORS settings of the DotNet Function App level are sufficient.


2) Update the highchart after data retrieval from the API, the trick was to use Highcharts.charts and also make sure that the component was already available. 
```javascript
   //TODO should type the data
   updateData(data : any){  
      Highcharts.charts[0].series[0].setData(data);
   }

```

I am sharing my daily progress [here](https://github.com/remster85/strava-100days/wiki/100-days-challenge-log).

See you next week.
divWidget - animated badge | svg / html5
Tags: codepen
Published: 2019-06-23 22:22:13

<p>Responsive animated badge with a split text slideshow that has fit font sizing. (HTML and SVG blend)</p>

<p>Created using the divWidget visual design tool at  <a href="https://divwidget.com" target="_blank">https://divwidget.com</a></p>

{% codepen https://codepen.io/divwidget/pen/VJmqOq %}
How to Scrape a Static Website
Tags: webscraping, javascript, frontend, data
Published: 2019-06-26 17:38:46

---
title: How to Scrape a Static Website
published: true
tags: webscraping,javascript,frontend,data
canonical_url: https://medium.com/@robghchen/how-to-scrape-a-static-website-846bd9c6ed28
---
A really quick tutorial

[![](https://cdn-images-1.medium.com/max/920/1*-Znz9nj6-14ZG-9c0-u0og.png)](https://medium.com/@robghchen/how-to-scrape-a-static-website-846bd9c6ed28?source=rss-1a2b6738cba4------2)

Prerequisites: Knowledge of [React.js](http://reactjs.org/) will be required for this tutorial.

Let’s say you want to pull data from the frontend of a website because there’s no API available. You inspect the page and see that the data is available in the HTML, so how do you gather that information to be used in your app? It’s rather simple, we’re going to install two libraries and write less than 50 lines of code to demonstrate the scraping of a website. To keep this tutorial simple, we’ll use [https://pokedex.org/](https://pokedex.org/) as our example.

1) In terminal:

```
create-react-app scraping-demo
cd scraping-demo
npm i request-promise
npm i cheerio
```

2) We’re going to start by using request-promise to get the HTML from [https://pokedex.org/](https://pokedex.org/) into a console log.

In App.js:

{% gist https://gist.github.com/robghchen/a8673ff4f08ac11300822409189c091f %}


3) Sometimes you may come across a CORS error blocking you from fetching. For demonstration purposes, try fetching pokemon.com

```
rp("https://www.pokemon.com/us/pokedex/")
```

You should see an error like this in the console:

![error](https://cdn-images-1.medium.com/max/800/1*ct8FdJ0MQJyereWp-GgIVw.png)

4) You can get around CORS by using [https://cors-anywhere.herokuapp.com](https://cors-anywhere.herokuapp.com/). Simply add that URL before your desired fetch URL like so:

```
rp("https://cors-anywhere.herokuapp.com/https://www.pokemon.com/us/pokedex/")
```

Now you should be able to see the HTML from pokemon.com show in your console.

5) But we won’t have to use cors-anywhere for `rp("https://pokedex.org/")`, so let’s proceed

![console](https://cdn-images-1.medium.com/max/800/1*rT4pqlQgL1VXqH2CmWHhkw.png)

6) Now that we have the HTML, let’s use the cheerio library to help us grab the exact data that we want from desired element tags. In this example, we’ll grab all the names of the pokemon then display them in a list.

In App.js:

{% gist https://gist.github.com/robghchen/b13283f7ebdd62f0cbd4f57b92357aee %}

7) You should see a list of all the pokemon names display onto your screen:

![list](https://cdn-images-1.medium.com/max/800/1*f-rDVLjusI2zl-n1H0MkIg.png)

It’s that simple! You scraped those names from the HTML without having to directly access any backend. Now try scraping the examples on [http://toscrape.com/](http://toscrape.com/) for practice. Enjoy your new abilities!

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)
Use "async as" to cleanup Angular templates
Tags: angular, rxjs, typescript
Published: 2019-06-23 19:43:08

The result from an AsyncPipe can be stored in a local variable:
```html
<span *ngIf="person$ | async as person">
    Hello {{ person.name }}
</span>
```
The local variable can be used in the scope of the `ngIf`. This can reduce the need of additional AsyncPipes and `?` operators.

The important part is the `as` with which you can store the conditional result of the `ngIf` in a local variable (See: [Angular Docs](https://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable)).

I found out about this by reading: [Handling Observables with NgIf and the Async Pipe @ Ultimates Courses](https://ultimatecourses.com/blog/angular-ngif-async-pipe). I recommend reading it for more information.

> The [Angular Style Guide](https://angular.io/guide/styleguide) doesn't mention how to name your Observables. But in the documentation of the RxJS library they say: It can be convenient to name Observables with a trailing "$" ([Angular Docs](https://angular.io/guide/rx-library#naming-conventions-for-observables)).
That time I used a simple machine learning algorithm to classify deforested areas.
Tags: machinelearning, knn, imageprocessing
Published: 2019-06-23 18:43:17

---
title: That time I used a simple machine learning algorithm to classify deforested areas.
published: true
description: A machine learning exercise.
tags: machinelearning, knn, imageprocessing
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lfzqfsag0vq2wuwcv36c.png
canonical_url: https://github.com/victorqribeiro/deforestation
---

# Deforestation

That time I used [KNN](https://en.wikipedia.org/wiki/K-nearest_neighbors_algorithm) to classify deforested areas for my machine learning class.


This project was developed as an assignment for a machine learning class, where we were given a pictures from the Amazon forest and we should write a machine learning algorithm to identify possibles deforested areas, including farming areas. 

I then gather some training data, generated a histogram for every image and analysed the final image with a simple KNN (k=7) I wrote.

I was very happy with the results I got given the little code I wrote (this project is from 2017).

The code for the project is [here](https://github.com/victorqribeiro/deforestation)
"Perl Out Loud", or another way to handle RSI
Tags: rsi, voice, ergonomics, video
Published: 2019-06-23 18:05:13

---
title: "Perl Out Loud", or another way to handle RSI
published: true
description: Programming with Voice not Keyboard
tags: rsi, voice, ergonomics, video 
---

The Perl Conference was in Pittsburgh this year, and one of the talks, and by far a favorite, was given by [Emily Shae](https://twitter.com/yomilly), a software engineer at Fastly. 

She had been developing repetitive stress injury, which is "is what black lung is to miners", [as Neil Stephenson wrote](is what black lung is to miners), and nothing really worked, until ... 

I'll let her tell it.

{% youtube Mz3JeYfBTcY %}

(All you anti-Perl gripers, her workplace is Perl, the conference is Perl and the examples for the audience are Perl, but there is not much Perl _in_ the toolchain  and it can be easily be changed into your language of choice. That isn't the point. Troll better.)

I already use Google Assistant for many things, so I'm primed, but the [Dragon Dictation](https://shop.nuance.com/store/nuanceus/custom/pbpage.resp-dragon-home-bf-2013-digital) and [Talon Voice](https://talonvoice.com/) are right there on the machine (ATM Mac-only, but with Linux and Windows on the feature roadmap), there shouldn't be the lag that I get between "turn off the lights" and darkness.

The ergonomic benefits are cool, but for me, the idea that we might get further away from the Keyboard, Monitor, Mouse standard for developer workstations is exciting. Yeah, for open office plans, it'd start to get very bad, but open office plans are already bad.

So, if you are beginning to feel the pain, or simply want to try something new, give this a try.
Afterburn - SMIL that works in Edge
Tags: codepen
Published: 2019-06-23 17:56:55

Created in divWidget with point shifts and gradient animations added to a simple star shaped polygon.

This animation works in all modern browsers including Edge.

Open this template in the visual editor: [http://bit.ly/2FoJWTR](http://bit.ly/2FoJWTR)

{% codepen https://codepen.io/divwidget/pen/bPWpVy %}
I love writing scripts to solve small problems
Tags: python, scripting, bash
Published: 2019-06-23 17:55:58

---
title: I love writing scripts to solve small problems
published: true
description: Building software is nice but I'm a big fan of solving my small problems with quick Python scripts 
tags: python, scripting, bash
---

One of the reasons I like programming so much is that it allows me to automate small and annoying things that would otherwise require bunch of manual work.

Yesterday, I downloaded a set of files that came in a following directory structure inside a zip file:

```
- Main Folder
  - Theme A (1)
    - FileA.pdf
    - FileA.txt
    - FileA.jpg
  - Theme B (2)
    - FileB.pdf
    - FileB.txt
    - FileB.jpg
  - Theme C (3)
    ...
```

For my use case though, I was only interested in the pdf files and wanted to record the order of those files that was written in parentheses in the folder. I could have manually moved them all to a new folder in Finder but since there were a few dozen of them, I opened my editor and started writing Python.

```python
import os
import re
import shutil

NUMBER_PATTERN = re.compile(r'\((\d+)\)')

for directory, _, files in os.walk('.'):
    if directory == './Output':
        continue
    for filename in files:
        if not filename.endswith('.pdf'):
            continue

        episode_number = NUMBER_PATTERN.findall(directory)[0]
        path = os.path.join(directory, filename)

        new_filename = f'{episode_number:0>2} - {filename}'
        new_path = os.path.join('Output', new_filename)

        print(f'Copying {path} to {new_path}')
        shutil.copyfile(path, new_path)
```

It's a single-run script that relies on a very specific naming and file structure as well as the existence of Output folder. So if something's out of order, it just breaks.

That means it's not very maintainable and it probably isn't the best nor most pythonic code I could write. But since it's a script meant to run once in this very particular situation, I can recover from error situations manually.

And that's the beauty of it. It doesn't have to be good code, it just has to work once. It saves me lots of annoying manual copying and renaming files.

As opposed to the quest of writing good, maintainable and error-resistant code at work for production, these scripts allow me to get small wins by just scraping some code together.

**edit** I want to highlight this beautiful bash script that @teroyks created [in the comments](https://dev.to/teroyks/comment/c9im):

```bash
find . -iname "*.pdf" | while read F; do FILE=$(basename "$F"); NR=$(printf "%02d" "$(echo "$F" | sed "s/.*(\(.*\)).*/\1/")"); cp -v "$F" "./Output/$NR - $FILE"; done
```

**edit2** @teroyks also provided us an example in fish shell:

```bash
for f in (find . -iname "*.pdf")
    set file (basename $f)
    set number (string match -r "\((.*)\)" $f)[2]
    set number (printf "%02d" $number)
    cp -v $f "./Output/$number - $file"
end
```
Headless CMS - what are the cool kids using?
Tags: cms, headless, content
Published: 2019-06-23 17:50:58

I'm going to make use of my "time" on maternity and finally get a programming blog together, mainly as a way for me to keep up by writing articles on topics I want to brush up on. I've used Kentico cloud for large scale multisites and find it great but are there any others that might suit a personal blog better? I've been looking at Sanity which looks great and really easy to set up, anyone any experience with it?
Laptop Requirements for Coding
Tags: discuss, help, hardware
Published: 2019-06-23 17:47:13

Hello Friends!


I really love this community!  So many of you have replied to my requests for feedback and I very much appreciate that! I have another request, though....

I am getting to a point in my Development journey where I need to buy a laptop suitable for coding. In the past, I have had both Mac and Windows-based computers. To me, they both have their strengths. I have never worked with Linux, but am dying to try one of the simpler distro's. 

I would love to hear from you all regarding the spec's I should look for in whatever I buy. Are there brands you prefer? What operating systems are you most comfortable with when it comes to coding? How much storage will I need? Will processor speed be a factor? Finally, if you had to replace your laptop tomorrow, what would you buy? 

I should probably mention that, since I started my webdev classes, I have been using my Son's Asus ROG laptop, which has worked very well, but I can't afford $2600 for one of these. 

Y'all have not steered me wrong, so far...can't wait to see what you think!
What is an effective way to annotate/caption images of graphs for screen readers?
Tags: help, a11y
Published: 2019-06-23 17:33:18

Hello folks,

I've been refining some of my class notes into blog posts like the following:

{% link downey/finding-minimum-spanning-trees-with-kruskal-s-algorithm-4j21 %}

I rely heavily on images of graphs that I draw on an iPad and I try my best to provide decent [alt text descriptions](https://webaim.org/techniques/alttext/#basics), but I realize that there's no way I can actually describe exactly what's in the graph short of pasting in a full adjacency list. Take this one for example:

<div>
<img src="https://thepracticaldev.s3.amazonaws.com/i/077z5z1zi1jr09reot2z.png" alt="Two correct minimum spanning trees for a graph">
</div>

That image is truly worth a thousand words and I can't think of how I could annotate it better using the tools available. I could be very verbose in my description of the correct minimum spanning trees in the picture, but I feel like the understandability of the post as a whole would suffer. I could only see that working if it were in some type of "for assistive technology only" element, but I'm pretty sure an `alt` tag isn't it..

Does anyone have advice or tips for making this kind of content more accessible?

Thanks!
Restart My Career
Tags: html, css, php, mysql
Published: 2019-06-23 16:42:23

My sincere apologies if this post lands in the wrong spot; I had hoped that it would land under the "...for Hire" listings.

Seeking an earnest restart to my career, in and out of web development in (and maybe out of) Chicago. Willing to discuss entry-level and junior-level situations as well as career alternatives.

Priority is full-time/permanent; open to long-term contracting. Although I prefer to remain in Chicago, relocation is on the table for a secure, stable, guaranteed full-time/permanent opportunity.

My personal workshop/demo/portfolio site: http://jephmann.com/?utm_source=DevTo&utm_medium=ForHire&utm_campaign=DevToForHire

My GitHub: https://github.com/jephmann

My LinkedIn: https://www.linkedin.com/in/jeffreyhartmann/

Must be near public transportation.

Please contact me **privately** for details. Grateful for your time.
Refactoring Evan's viewInput function in elm-todomvc
Tags: elm, webdev
Published: 2019-06-23 13:39:24

---
title: Refactoring Evan's viewInput function in elm-todomvc
published: true
description: 
tags: elm, webdev
---

I don't like that we have to write our own [onEnter](https://github.com/evancz/elm-todomvc/blob/07e3d4e5259f337d5eba781319b3a916e28aca99/src/Main.elm#L248) function to make [viewInput](https://github.com/evancz/elm-todomvc/blob/07e3d4e5259f337d5eba781319b3a916e28aca99/src/Main.elm#L230) work.

By wrapping the input element in a form element we can achieve the same goal, write simpler code and keep the HTML semantic.

```elm
viewInput : String -> Html Msg
viewInput task =
  header
    [ class "header" ]
    [ h1 [] [ text "todos" ]
    , form
        [ onSubmit Add ]
        [ input
            [ class "new-todo"
            , placeholder "What needs to be done?"
            , autofocus True
            , value task
            , name "newTodo"
            , onInput UpdateField
            ]
            []
        ]
    ]
```

Now when you type a description and press `ENTER` a [submit](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event is fired on the form. The [onSubmit](https://package.elm-lang.org/packages/elm/html/latest/Html-Events#onSubmit) event handler detects the submit event with [preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) and propagates the `Add` message to the `update` function.

What do you think? Is this version any better?
My zsh setup
Tags: blog, zsh, zshrc
Published: 2019-06-24 10:13:18

---
title: My zsh setup
published: true
tags: Blog, zsh,.zshrc
canonical_url: https://www.eddinn.net/blog/my-zsh-setup
---

 ![](https://www.eddinn.net/images/1/b/f/a/9/1bfa9018e2e882683ea5ae08e0a4dcfbcf5d5aec-zsh.png)

I switched from using `bash` to `zsh` as my main shell environment and never looked back. You can find my `.zshrc` config file with [Oh-My-ZSH](https://github.com/robbyrussell/oh-my-zsh "This link will take you to an external web site. We are not responsible for their content.") enabled on [GitHub](https://github.com/eddinn/zsh/ "This link will take you to an external web site. We are not responsible for their content.")

#### Theme

```
ZSH_THEME="agnoster"
```

#### My .zshrc plugin list

```
plugins=(
  git
  dotenv
  rake
  ruby
  ansible
  autoenv
  autopep8
  docker
  docker-compose
  docker-machine
  django
  git-prompt
  gnu-utils
  man
  nmap
  npm
  pip
  pipenv
  pyenv
  pylint
  python
  rsync
  sudo
  systemd
  ubuntu
  virtualenv
  vscode
)
```
Fuck you, Internet Explorer 💖
Tags: javascript, html
Published: 2019-06-23 11:53:19

Fuck you Internet Explorer for not supporting new CSS Features

Fuck you Internet Explorer for not supporting new HTML Features

Fuck you Internet Explorer for not supporting new JS features

Fuck you Internet Explorer for not being an evergreen browser

Fuck you Internet Explorer for not working with modern frameworks

Fuck you Internet Explorer for stopping progress

Fuck you Internet Explorer for being a huge headfuck for every web developer around the world.

---

But finally, **Thankyou Internet Explorer** for being ahead of it's time, for being responsible for the internet, for being for our jobs, and allowing humanity to progress with technology, even if it made things really annoying sometimes.

**You are the reason this website exists, IE**

**but**, it's time to forgive and forget. 

I urge all web developers to follow suit and speak with their organisations, clients, and developers to tell them that IE is now a relic of the past

Despite the few business-benefits that may exist of supporting IE, it has come time for even big corporates to abandon IE, and move towards evergreen browsers such as **Chrome**, **Edge**, and **Firefox**

By every developer doing their part, we ensure **IE** does in fact become a relic of the past.

DEV.to developers reading this,

### This is how you can help

Urge Website Visitors that don't already, to use an Evergreen browser. 

[What is an evergreen browser?](https://www.techopedia.com/definition/31094/evergreen-browser)

~~If developers are interested, I can provide and develop some IE-friendly code for developers that will tell users it's deprecated and how to **easily** change browsers.~~

This has already been done by [browser-update.org](https://browser-update.org/)

---

**You** are responsible for the innovation of the internet, and reducing IE usage across the globe.

---

#### I classify web developers into:

A+: Doesn't even accept that IE exists, and codes to evergreen standards
A: Accepts that IE exists, and that it may cause risks to abandon it, but are willing to take it
A-: Willing to let their companies know that they're behind the curve by supporting IE
B: Letting clients know they're on an outdated browser
C: Trying to code for IE standards

https://promatia.com https://arkovia.com https://promatimes.com