teleren/devto huggingface dataset:
Update: Best new way to learn music theory
Tags: showdev, ionic, react, javascript
Published: 2020-02-17 20:29:07

---
title: Update: Best new way to learn music theory
published: true
description: 
tags: #showdev #ionic #react #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uxpswrubgtk2yfa5qhof.jpeg
---
Hi everybody Shayan here!

About 2 months ago I made [this post](https://dev.to/shayanjavadi/best-new-way-to-learn-music-theory-2o3h) about my React/Ionic React music theory app [Solfej](https://www.solfej.io/). I received tons of feedbacks and requests, and I'm back again with an update :)

I've fixed and addressed all the issues, and have added tons of new features:

* **The android version of the app is available now!**
* The app now has 75+ lessons (30 of them being brand new)
* I've added rhythm exercises (Transcribe the played rhythm)
* I've added music theory exercises (e.g. "What note is a minor 3rd above C", "Are notes X and Y enharmonic?")
* I've added personalized daily lessons
* I've added a streak functionality to keep track of your progress
* Squashed a TON of bugs

If you're looking to learn music theory, ear training, and rhythm check out the app and let me know what you think!

https://www.solfej.io/

Email me at shayanjavadi1375@gmail.com if you have any questions!
Use token for Github Actions with private repositories 🔐
Tags: github, webdev, productivity
Published: 2020-02-17 20:28:47

## Introduction

In this tutorial I will show how to use the api that github offers us through its token, to apply an action for the continuous deployment of private repositories.

## Create token

- Open settings of our account.

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


- Click on the ```Developer settings``` option.

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

- Click on the ```Personal access tokens option```.

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

- Click on ```generate new token``` and copy and save it to use it.

## Create secret keys needed to use them in the actions

- Open the settings of our project and click on the Secrets section.Open the settings of our project and click on the Secrets section. In my case I have the following secret keys:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1oh0bj3jrtoo0of8z70m.png)

## Repository url via API

To download the latest changes from the private repository we will use the github api together with our previously generated and configured token, so that it is as follows:

- git pull ```https://${{ secrets.GIT_TOKEN }}:x-oauth-basic@github.com/susomejias/portfolio.git``` master

## Example for a deployment of a private repository in a VPS

- Within our project we will create a folder called ``.github`` and in another one called ``workflows`` the latter will contain the files for our actions.

- In this example we will create a file called ``ci.yml`` which will contain the functionality of the action.

- In my case I have used the example of the action that I use for the deployment of my portfolio:


```
name: CI

on: [push]

jobs:
  deploy:
    if: github.ref == 'refs/heads/master'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Push to server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.SERVER_PASSWORD }}
          script: cd ${{ secrets.PROJECT_PATH }} && git pull https://${{ secrets.GIT_TOKEN }}:x-oauth-basic@github.com/susomejias/portfolio.git master && npm install && ng build --prod && cp htaccess dist/portfolio/
```

## Perform a upload to test the new action

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/97arb01t2p52rz3917op.png)


Thanks for reading me. 😊
Como criar um web curriculum no Github Pages com reactjs
Published: 2020-02-17 20:12:47

<p>
Após enfrentar muitas dificuldades com o sistema do Github Pages, infelizmente não encontrei uma solução fácil para resolver um dos maiores problemas que tive. As restrições do Github Pages são as seguintes:
</p>
<ul>
  <li>O repositório do seu currículo deve seguir o formato {username}.github.io</li>
  <li>O site deve estar na branch master</li>
</ul>
<p>
Embora essas restrições não pareçam difíceis de lidar, são. Com exceção da página do currículo do usuário, o Github lida com sites para repositórios usando branchs secundárias. Por isso, as ferramentas e módulos disponibilizados pela comunidade na internet se concentram em fazer o push da build em uma branch secundária chamada 'gh-pages'.
</p>
<p>
Infelizmente, a má notícia é que o modo mais simples de hospedar seu currículo em ReactJS no Github Pages é fazer um push da pasta build após executar o comando 'npm run build' (para Windows), criar outra branch e fazer um push do seu código original do site.
</p>
Ara issue of the week
Tags: contributorswanted, opensource, showdev
Published: 2020-02-17 19:52:35

Well I am back again with more opportunity's for contribution
{% github https://github.com/FultonBrowne/Ara-Server/issues/87 %}

if like my work and want to see ara grow please give ara a star, give me a follow, or [buy me a coffee](https://www.buymeacoffee.com/28EcqNL)

I also have some computers for sale to support my project

https://www.ebay.com/itm/153834406902

https://www.ebay.com/itm/153834910618
An almost 200 pages website I created (design and development) for a small company
Tags: html, css, sass, prepros
Published: 2020-02-17 18:53:26

---
title: An almost 200 pages website I created (design and development) for a small company
published: true
description: An almost 200 pages website I created for a small company, intensivejournal.org
tags: HTML, CSS, SASS, PrePros
---

www.intensivejournal.org

Please take a look at the website I created for a small company in Beachwood, Ohio.

The project took me about 5 months, working part-time while finishing up my CS degree.

For those who are curious, these are the technologies and tools I used:

HTML
CSS
Kit language for HTML Includes
SASS
Vanilla JavaScript (Barely used...about 10 lines of code)

CodeKit (Mac) and PrePros (Windows) for pre-processing the .kit files and .scss files

Other services:
Getforms for forms
Pexels for pictures
IonIcons for icons

I would appreciate your comments about what I did better and what I need to improve.

Here is the website again, www.intensivejournal.org

You can reach me at mnandi19@jcu.edu
Twitter: https://twitter.com/amiamigo97
Instagram: https://instagram.com/amiamigo97
One language?
Tags: discuss
Published: 2020-02-17 18:33:23

---
title: One language?
published: true
tags: discuss
cover_image: https://images.unsplash.com/photo-1555424681-b0ecf4fe19a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80
---

**Do you spend all/most of your time with one language/tech stack?**

In my day job, I work in data analysis, programming in VBA and R. For my side-hustle, I manage a site with a MEEN tech stack. In my free time, I create apps in Swift, manage websites with jekyll and MERN, and try to learn and adapt.

However, I see some folks who have deep knowledge in one code base and don't seem to switch constantly. I'm curious, what portion of folks work exclusively or almost exclusively in one language/tech stack.

photo credit: Nick Fewings on Unsplash
MINING GITHUB with GraphQL, Python, and Redis (Tutorial/Tech Talk)
Tags: tutorial, techtalks, graphql, python
Published: 2020-02-17 18:11:07

> This video is a talk from *Byteconf GraphQL 2020*, a free, live-streamed GraphQL conference that aired on January 31st, 2020. [Visit our website](https://www.bytesized.xyz/graphql-2020) to sign up for the Byteconf GraphQL "swag bag", a free downloadable resource with everything you need to get started with GraphQL, as well as info about future Byteconf events!

With GitHub's new GraphQL API, one of the most interesting datasets available for developers online is now easy to query, explore, and mine for exploration – in this tutorial from Banjo Obayomi, we'll explore how to mine data from GitHub using GraphQL, and automate it using Redis and Python.

Thanks to [Banjo Obayomi](https://twitter.com/banjtheman) who presented this talk at [Byteconf GraphQL 2020](https://www.bytesized.xyz/graphql-2020)!

{% youtube QrOGky8MPiE %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
Software developer tasks
Tags: productivity, discuss
Published: 2020-02-17 18:08:07



Based on past experiences I redacted this github-gist with the tasks that I consider valuable in the software dev process related to devs. I would like to read your opinions, if there are some steps that you consider a waste of time or less valuable or if otherwise, I omitted something important. Any suggestion is welcome.

{% gist https://gist.github.com/racar/dcd4f78e5f39d70c3907cab286b9ea4e %}
Guide to compress GoLang binaries
Tags: go, compression, upx, discuss
Published: 2020-02-17 18:04:26

---
title: Guide to compress GoLang binaries
published: true
description: This guide provides the use of go command and upx to compress go binaries.
tags: #go #compression #upx #discuss
---

## Why we need compression

- The size of binary may not be the issue in today's use cases but, we may need this in cases like running your app on raspberry pi.

- By default, go includes some information in binaries that can be omitted.

- Ultimately, a Go binary can be compressed to 1/4th of its actual size.

To know, how this works, you can read an excellent article [here](https://blog.filippo.io/shrink-your-go-binaries-with-this-one-weird-trick/)

The following table summarizes the compression with different combinations of go commands and [UPX](https://upx.github.io/) on a 64bit Windows machine. **However the compression increases startup time for your app**

| Command                                         | Size                       | Compression ratio |
| ----------------------------------------------- | -------------------------- | ----------------- |
| go build                                        | 14.2 MB (14,905,856 bytes) | 100.00            |
| go build -ldflags="-w"                          | 11.3 MB (11,938,304 bytes) | 79.57             |
| go build -ldflags="-s"                          | 10.5 MB (11,089,408 bytes) | 73.94             |
| go build -ldflags="-s -w"                       | 10.5 MB (11,089,408 bytes) | 73.94             |
| go build / upx -1 -k fileName.exe               | 8.23 MB (8,631,808 bytes)  | 57.95             |
| go build / upx -9 -k fileName.exe               | 6.67 MB (7,000,064 bytes)  | 46.97             |
| go build -ldflags="-s" / upx -1 -k fileName.exe | 4.87 MB (5,116,416 bytes)  | 34.29             |
| go build -ldflags="-s" / upx -9 -k fileName.exe | 3.42 MB (3,591,680 bytes)  | 24.08             |

You can refer to the following link for source code

https://github.com/akshaybharambe14/golang-examples/tree/master/binaryCompression
React.js CSV Importing Made Easy With PapaParse
Tags: react, csv, library
Published: 2020-02-17 17:59:23


A coding coach that I had at Flatiron school once recommended I develop a habit for posting content on dev.to as a way to continue to stay connected with the greater programming community. Well, its been about a month since my last post largely because I was dedicated to producing a few technical projects. What better way to get back into the habit than to show a simple and useful library for react that allows users to import data in a user-friendly medium: CSV parsing!

The set-up is fairly simple. Start by bringing the package into your react app:

npm install --save react-papaparse

Then you import the library into the component you want to use the library for:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/69i87izy0jjt0v0jsers.png)

Then, we create an element with a couple key events and functions that are necessary in the react element:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/21b6szsd08dlchzk30qj.png)

Let me explain: we need call the inputRef function to tell the PapaParse library that we would like to input a file. This will automatically open up a file browser to select a local CSV file from your machine. Once the file is selected in will automatically convert the delimited data into JSON. Please note that the data will be streamed exactly based on the index in the CSV and will disregard anything resembling column headers. If headers are required for your app there is a way to do so passing the following in the elements JSX:

'configOptions= header: true '


The next important piece is the onLoaded event, which we can use to pass the data to a function and actually use the data for whatever we would like. For my purposed I take that data and use it to post to my backend to create products for display. Like so:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qmiw468wu2qvlfyd11e.png)

As I hope is clear from the above, as long as the data is structured, it is relatively simple to send the data exactly where you want it. Easy!
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-02-17 17:55:49

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Fade Away

Your problems, that is. Adam shows us how to easily setup a reverse proxy with automagical SSL certificate generation, verification, and deployment. 

{% link https://dev.to/adamkdean/automatic-ssl-with-let-s-encrypt-nginx-4nfk %}

#2. Story Time

The journey of a discontented CSS developer (Samantha) who "finally stopped being so angry"...by way of CSS variables.

{% link https://dev.to/samanthaming/css-variables-8di %}

#3. Glorifying Workaholic-ism

Nadya shares a recap of twitter hot takes on work expectations in tech. 

{% link https://dev.to/nprimak/work-culture-toxicity-in-tech-2jn2 %}

#4. Lil' Exercise

Need to practice your CSS skills? Try creating the Ubuntu terminal in CSS.

{% link https://dev.to/codypearce/ubuntu-terminal-in-css-1aeo %}

#5. Bleeding-Edge Syntax

Laurie shares an overview of how the ECMAScript Standard is adopted and supported. In this post, you'll learn about Babel, JavaScript Engines, compatibility, and more.

{% link https://dev.to/laurieontech/the-ecmascript-ecosystem-2e13 %}

#6. Mature Ecosystem

Danijel helps us understand the client-server communication and key differences between GraphQL and the REST API architectural style.

{% link https://dev.to/davinc/graphql-for-beginners-3f1a %}


#7. It's All Relative

Stephanie breaks down CSS units so we understand when and how to use the right measurement. 

{% link https://dev.to/5t3ph/guide-to-css-units-for-relational-spacing-1mj5 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
TRACING YOUR GRAPHQL API (How GitHub Does It)
Tags: graphql, techtalks, webdev
Published: 2020-02-17 17:42:36

> This video is a talk from *Byteconf GraphQL 2020*, a free, live-streamed GraphQL conference that aired on January 31st, 2020. [Visit our website](https://www.bytesized.xyz/graphql-2020) to sign up for the Byteconf GraphQL "swag bag", a free downloadable resource with everything you need to get started with GraphQL, as well as info about future Byteconf events!

There are several tracing tools available publicly and privately for looking into execution time of GraphQL queries. These are super useful and key for integrators writing queries. But as API owners we also need to know how our API is being used. This is important for making deprecations, for choosing where we might want to optimise, understanding general usage patterns and even answering support queries. It's also key to not slow down execution gathering that data. To that end GitHub has several tools and relies heavily on data pipelines. We track parse and execution errors, which objects API queries touch, and more. All of this is beneficial when ensuring the smooth running of the API. This talk will focus on our experiences doing this, what data we've found useful, and how you might want to approach this in your APIs.

Thanks to [Claire Knight](https://twitter.com/krider2010) who presented this talk at [Byteconf GraphQL 2020](https://www.bytesized.xyz/graphql-2020)!

{% youtube j7wE90s6bV4 %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
Why do you learn? 
Published: 2020-02-17 17:20:20

*"you have to saddle your dreams if you want to ride them"-Eric Douglas*
Our parents sending us to school have a reason for doing so. Our parents providing for all our needs know why they're doing that, it's not because they just feel like it, but because it is their responsibility, it is their goal. You don't take math if you don't want to learn basic calculations and computations, you don't learn mandarin if you don't wish to live in China. There is always a reason for which we learn, there is always the driving force behind us furthering our studies. **learning is not complete if there is no cause for it**. You need to ask yourself why you are learning that JavaScript course, you need to ask yourself why are you attending that Data Science Bootcamp, because if you don't know yet, then you're still wasting your time. Ask yourself that burning question and search deep for the right answer, and when you do, trust me, you will see learning in a different light. **"if you must learn, learn not for the sake of learning, but for the sake of understanding"**
FizzBuzz using streams in Python
Tags: python, fizzbuzz, functional
Published: 2020-02-13 21:41:47

---
title: FizzBuzz using streams in Python
published: true
description: Using streams to print out fizzbuzz
tags: python, fizzbuzz, functional-programming
---

So this evening I was fooling around with the concept of using monoids to play around with streams. The idea here is to break a relatively abstract concept into something that a noOb can follow along, and it hit me; why not demo all this stuff using the classic Fizz-buzz algorithm.

Generally, for a fizz-buzz problem, you print out "Fizz" if a number is divisible by 3; and alternatively, you print "Buzz" if it's divisible by 5. Needless to say, you print "FizzBuzz" if it's divisible by both 3 and 5. Now a simple implementation in python would be something like:

```
def fizz_buzz(n):
    for i in range(1, n+1):
        if (i % 3 == 0 and i % 5 == 0):
            print("{}: FizzBuzz".format(i))
            continue
        if (i % 3 == 0):
            print("{}: Fizz".format(i))
            continue
        if (i % 5 == 0):
            print("{}: Buzz".format(i))


fizz_buzz(100)        
```
  
Well for one, I don't like that the above function has side-effects. How can we refactor this to use streams? First of all, let's clear up what a stream is. A stream is a sequence of objects which can be accessed in sequential order. Where do monoids come in? Well a monoid allows us to combine things. A monoid has a single associative "structure"(in our case this is the "append" operation that zip provides). In this case, when we have a stream, we can combine several monoids from a stream using zip. Let's look at it in Python:

```
from itertools import cycle


def fizz_buzz(n):
    """Return an iter list with fizz-buzz"""
    fizz_buzz = zip(cycle(['', '', '', '', 'Fizz']),
                    cycle(['', '', 'Buzz']),
                    [i for i in range(1, n+1)])
    return filter(lambda x: (x[0] != '' or x[1] != ''),
                  fizz_buzz)

for i in fizz_buzz(100):
    print("{}: {}{}".format(i[2], i[0], i[1]))
```


From the above snippet, we first generate a stream of "Fizzes" and "Buzzes", then we combine them with `zip` after which we filter any element from the stream that has no "Fizz" or "Buzz". Python's loose typing makes it easy for us to combine and morph things. Notice that the `fizz_buzz` function returns a generator which has it's own merits.

If you want to functional programming tips, I post interesting reads on a google groups I started a while back here https://groups.google.com/forum/#!forum/nairobi-functional-programming-community
Sponsoring You Got This 2020  
Tags: events, inclusion, career
Published: 2020-02-17 16:44:42

Last month we sponsored [You Got This 2020](https://2020.yougotthis.io), which was held in Birmingham, UK.  You Got This is a conference that is a bit different from the usual technology focused forays, as the content is centred on the non-technical skills needed for a happy, healthy work life. 

![A view of the You Got This stage from the back of the audience](https://dev-to-uploads.s3.amazonaws.com/i/oug6tvqrarpdq5ez2inb.jpg)

**But what exactly does that include?**

Taking a look at this years talk titles might give you a better idea 👇

|**Speaker Name**|**Talk Title**|
|----------------|--------------|
|Keziyah Lewis|It's not your job to love your job|
|Matthew Gilliard|Learning to invest in your future|
|Amina Adewusi|How to find your perfect mentor|
|Gargi Sharma|So good they can't ignore you!|
|Melinda Seckington|Level Up: Developing Developers|
|Nathaniel Okenwa|0 to 100 Real Quick: making your first days count|
|Ruth Lee|Company Culture, Performance Reviews & You|
|Dan Parkes|Unions Got This: organising the tech trade|
|Amy Dickens|Real talk about when to walk away|

The event covered many of the woes that technology professionals (at all levels) face at some point in their career. From how to find the ways in which they learn best, to making tough choices on whether a job role or company culture is the right fit for them. 

These topics can be very sensitive for most, and not to mention really hard to talk about. Having an event like You Got This which provides an open forum and honest talks about these topics is extremely important. 

![Five people talking in a group and smiling during one of the networking breaks](https://dev-to-uploads.s3.amazonaws.com/i/s4n32k0blbq211ascduj.jpg)

Not only was the content on point, the You Got This team also pride themselves in making the event an inclusive space. They made a conscious effort to provide an accessible venue, closed captioning, gender neutral toilets, pronouns on name badges, and ticket, travel and childcare scholarships.

![Four people talking in a group during one of the networking breaks](https://dev-to-uploads.s3.amazonaws.com/i/id7dd7q5ev6gvharu2nt.jpg)

The team make sure to re-iterate the importance of these features at the beginning of the event and link to their [Code of Conduct for the conference](https://2020.yougotthis.io/conduct). We were truly impressed with the You Got This team’s dedication to inclusion and cannot wait to see what they will bring to the event in 2021.

But don’t worry if you are feeling like you missed out on You Got This 2020 - as this year's video sponsor, we've got you covered! [**You can now watch videos of all the talks from You Got This on our Pusher sessions YouTube channel.**](https://www.youtube.com/watch?v=t_cAW0Ubnyg&list=PL8xuokhAnn4pNzY8moGY8V5IuFIGA3af2)

Want to know more about what we do at Pusher? Check out [pusher.com](https://pusher.com?utm_source=dev-to&utm_medium=organic&utm_campaign=you-got-this&utm_content=sponsorship).