teleren/devto huggingface dataset:
Tutorial: Create an accessible rating plugin
Tags: css, javascript, tutorial, webdev
Published: 2020-01-02 12:35:47

In this tutorial, we'll go through the different steps of creating a rating plugin in CSS and JavaScript, with a particular focus on:
- keyboard accessibility (use Tab key, Space bar and arrow keys to navigate and interact with the component);
- aria attributes and roles to improve Screen Reader accessibility;
- no JavaScript support.

Final result:
{% codepen https://codepen.io/codyhouse/pen/rNaGBJd %}

The Rating plugin is also available [as a component](https://codyhouse.co/ds/components/app/rating) in the CodyHouse UI Framework.

To follow along the tutorial, fork this pen on Codepen:
🕹 [codepen.io/codyhouse/pen/Wqvpmm](codepen.io/codyhouse/pen/Wqvpmm)

or download CodyFrame on Github:

- 📦 Framework [github.com/CodyHouse/codyhouse-framework](github.com/CodyHouse/codyhouse-framework)
- 🎨 A1 Theme [github.com/CodyHouse/a1-codyframe-theme](github.com/CodyHouse/a1-codyframe-theme)

Here's the video tutorial:
{% youtube uvAiYCm3t3U %}

Originally published on [CodySchool](https://codyhouse.co/tutorials)
Hoe Microsoft Office foutcode 30029-1007 te repareren?
Published: 2020-01-02 12:33:40

Dit is eigenlijk een Office-implementatietoolfout die optreedt in MS Office versie 2013. De fout treedt meestal op bij het downloaden van Office-software. Volg onderstaande stappen om het probleem op te lossen door alle hier geschreven instructies te volgen.

Stappen om Microsoft Office foutcode 30029-1007 te repareren

Stap 1: Ga voor schijfopruimmodus

Open het gedeelte Schijfopruiming door op de knop Startknop te klikken die zich in de Startknop bevindt.

Ga naar het zoekvak en typ het bericht "Schijfopruiming" om erop te klikken wanneer het verschijnt.

Ga naar de stationslijst en open de harde schijf die u wilt opschonen en tik op de knop "OK"
Krijg toegang tot het dialoogvenster "Schijfopruiming" op het tabblad Schijfopruiming om de selectievakjes voor verschillende bestanden in te schakelen

Tik op het pictogram "Bestanden verwijderen".

Stap 2: Systeembestandscontrole

Veeg vanaf de rechterkant van het scherm en klik vervolgens op het pictogram 'Zoeken'.

Het volgende is om de opdrachtprompt in te voeren in het zoekvak.

Veeg nu in de lijst met resultaten omlaag of klik met de rechtermuisknop op de opdrachtprompt. Tik of klik op de opdracht Uitvoeren

Kies in het gedeelte 'Beheerder' het opdrachtpromptvenster en typ de opdracht 'sfc / scannow'.

Probeer ten slotte de Office-software te installeren.

Lees hier voor meer instructies : https://www.klantenservicebelgies.com/contact-microsoft/
Importance of GitHub and Now GitHub Education
Tags: github
Published: 2020-01-02 12:23:41

Git is important whether you are a programmer or not. Even writers can get a lot from git as git is essentially content screenshot version manager. 
Git is merely just software on the computer and you can apply to any folder of the computer by running `git init`. Git then says the screenshot when you **commit** the folder. Then you can move forward or backward in folder state using those commits.

## GitHub:
GitHub is a company founded in 2008 by Tom Preston-Werner, Chris Wanstrath, Scott Chacon, P. J. Hyett. This company basic technology model was to save those screenshots (commits) online and can be accessed anywhere. It had two basic business models one was private account (paid one) where your folders (repos) could be accessed only by you or other authorised by you. The second model was public account (free) where you could save your repo free and can be accessed by anyone. This model gave a great boost to the OpenSource world.
GitHub is a subsidiary of Microsoft, which acquired the company in 2018 for $7.5 billion. As GitHub becoming the part of a large company (microsoft) now new large horizons are ahead. 
Now Microsoft started many initiatives in GitHub to revolutionise humans. First was to allow private repos to be free now also up to max 5 collaborators on the project. Second huge initiative is GitHub Education.

## GitHub Education:
GitHub has launched a new initiative called GitHub Education ([https://education.github.com](https://education.github.com)). 
GitHub Education helps students, teachers, and schools access the tools and events they need to shape the next generation of software development.
GitHub has partnered with various online learning and paid computer tools and softwares for free.

## Registration Procedure:
Any student can signup and have all the benefits for free. First, sign up on github at [https://www.github.com](https://www.github.com) and add your university email address in your profile and then apply on [https://education.github.com](#). They might need a photo of the university id card   as well.
GitHub normally takes 3-4 days to verify the account and email is sent after success and then you can have all these softwares for free for some period.

The list of tools and benefits can be found at [https://education.github.com/pack](https://education.github.com/pack).
> Note that these benefits are mostly related to software development based students and teachers.
So, you want to enable dark mode on your website?
Tags: coding, css, preferscolorscheme
Published: 2020-01-02 17:29:20

---
title: So, you want to enable dark mode on your website?
published: true
date: 2020-01-02 12:00:49 UTC
tags: Coding,CSS,prefers-color-scheme
canonical_url: https://blog.jws.app/2020/css-dark-mode/
---

Starting with [macOS Mojave,](https://support.apple.com/en-us/HT208976) [Windows 10 version 1903](https://www.techrepublic.com/article/windows-10-may-2019-update-how-to-enable-dark-mode-in-any-windows-app/), and [Android Pie](https://9to5google.com/2018/12/17/android-dark-mode-theme-pie/), users can set a system-wide preference for dark mode or light more within apps.  The idea is supposed to be that you set a preference once and every application on the device then respects that preference.  So, how do you get your website to respect those system preferences?

[![](https://i1.wp.com/blog.jws.app/wp-content/uploads/2019/09/Screen-Shot-2019-09-29-at-4.06.57-PM.png?resize=300%2C95)](https://i1.wp.com/blog.jws.app/wp-content/uploads/2019/09/Screen-Shot-2019-09-29-at-4.06.57-PM.png)

Well, starting in recent versions of (chromium versions of) Edge, Firefox, Chrome, and Safari, you can use the [prefers-color-scheme media query](https://caniuse.com/#feat=prefers-color-scheme).

Since it is a media query (and uses a binary setting), you can default it in one direction or the other.

{% codepen https://codepen.io/steinbring/pen/QWLRJEw %}

{% codepen https://codepen.io/steinbring/pen/jONoQPE %}

As you can see above, all you need to do is wrap a chunk of CSS in “@media screen and (prefers-color-scheme: light)” or “@media screen and (prefers-color-scheme: dark)”.

Have any questions?  Feel free to drop a comment, below or shoot me a tweet at [@steinbring](https://twitter.com/steinbring).
Getting Json array of articles 
Tags: api, rest, jason
Published: 2020-01-02 11:56:35

After writing my first article on Dev.to, I am unable to get the Json array containing the article I wrote to add this on my website. 

I am using the below link to view the Json array: 

https://dev.to/api/articles?username=jaynsenda

Is there any configuration I need to do in order to get this array? 
Can anyone please help me? 

Thanks
What are the most important features you look for in a logger?
Published: 2020-01-02 11:41:16

I'm interested in knowing **what are the most important features you look for in a logger?** Should it have colored output, should it allow multiple output channels... 

_PD: I know it depends on the task you are approaching, but let's generalize for a bit :P_

> _I currently maintain a Loggin' library for NodeJS and for the browser (partially), and wanted to gather some information on what features people want the most in a logger, as a way of improving the library._
Call Rails helper method from another helper method
Tags: ruby, rails, beginners
Published: 2020-01-02 11:36:39

Since 4 version of Rails, helpers are loaded in the view so it is possible to call one helper method from another one without including helpers:

```ruby
module ApplicationHelper
  def some_method_from_application_helper
    # do something
  end
end

module AnotherHelper
  def do_something
    some_method_from_application_helper # will work
  end
end
```

Thank you for reading! Follow me on [Twitter](https://twitter.com/pdabrowski6) to be up to date with the latest tips, articles, and videos about programming.
How to Route Nginx Through a Child Nginx Configuration - Jumpbox to Web Server Configuration
Published: 2020-11-16 12:46:51

---
title: How to Route Nginx Through a Child Nginx Configuration - Jumpbox to Web Server Configuration
published: true
date: 2020-01-02 11:34:00 UTC
tags: 
canonical_url: https://bowlerdesign.tech/posts/how-to-route-nginx-through-a-child-nginx-configuration-jumpbox-to-web-server-configuration/
---

I had a specific use case where I needed to run a docker instance, which had it's own configured nginx instance.

The issue was that I already use nginx on my JumpBox.

The fix was relatively self explanatory, but I wanted somewhere to write down the issues that I had to tackle.

## The Solution

So the solution is just to point nginx (JumpBox) to the other nginx instance (docker).

> Just to let you know, in my case, there are separate physical servers. The configuration will not differ, but you may need to internally expose ports between hosts if you have something like UFW installed. [I have a tutorial here on how to set up UFW.](https://blog.bowlerdesign.tech/2019/12/15/setting-up-ufw-on-ubuntu-server/)

So on my Host `B` I have a web instance running on port `8080`. This web instance is an nginx reverse proxy that is pointing to another docker instance within the same docker network on the machine.

Host `A` is my existing nginx reverse proxy.

The quick solution is to forward your call from Host `A` to Host `B`.

Like so

```
server {
  server_name blog.bowlerdesign.tech;

  location / {
    proxy_pass http://host_running_blog:8080;
  }

```

I ran into issues here, I couldn't get css loading properly when navigating to blog.bowlerdesign.tech.

I was missing headers in the request. Here's an ideal configuration for setting up a website.

```
server {
  server_name blog.bowlerdesign.tech;

  location / {
    proxy_pass http://host_running_blog:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto scheme;
    proxy_pass_header Content-Type;
  }

```

This will forward the necessary headers for your host.

<!--kg-card-end: markdown-->
I got a badge today! A Vue badge!
Tags: watercooler
Published: 2020-01-02 11:20:46

Hey there DEV.to community!

I just opened DEV.to and as always there was a notification! But this time it was very special! I got the Vue badge as I posted the most beloved Vue post from past seven days!

So actually I wasn't expecting this but sometimes achievements come without expectation!

Anyways, I just want to thank you all about this, anyone who viewed my post and liked it. Thanks every one!

BTW this is the post which got me the badge:

{% link https://dev.to/adnanbabakan/vue-cheat-sheet-2-5aj8 %}
Testing email protocols by typing out command over a network protocol
Tags: testing, devops, network, cmd
Published: 2020-01-02 11:11:22

<h2>Summary</h2>

* You can test email protocols by typing out the commands over a network connection. 
For example, for POP3 you can !!!!TELNET!!!! on port 110

* We cant test POP3S over telnet because you can't just type out the SSL handshake.
You can use openssl s_client to replace telnet when connecting to a POP3S server. s_client does the SSH handshake and allows you to type data over the encrypted connection like telnet allows over unencrypted.


<h2>Testing POP3 on port 110:</h2>

Type the following command on terminal: 

<pre>$ telnet [host] [port]</pre>

eg:  telnet 192.168.123.4 110

Then  after +OK The Microsoft Exchange POP3 service is ready.
Type USER followed by the username then hit enter
Then type PASS followed by the password

eg:
<pre>USER test@your-domain </pre>

Then enter:

<pre>PASS testing</pre>

Then a message will be displayed to specify whether the correct credentials were provided or not.

<h2>Testing POP3 on port 995:</h2>

Type the following command on terminal. 

<pre>$ openssl s_client -connect [host]:[port] -crlf</pre>

eg:  openssl s_client -connect 192.168.123.4:995 -crlf

Then  after +OK The Microsoft Exchange POP3 service is ready.
Type USER followed by the username then hit enter
Then type PASS followed by the password

eg:
<pre>USER test@your-domain </pre>

Then enter:

<pre>PASS testing</pre>

Then a message will be displayed to specify whether the correct credentials were provided or not.
Machine Learning Library For Perl (MLPERL) Released
Tags: perl, machinelearning, news, discuss
Published: 2020-01-02 10:51:05

Happy New Year!

Awaited Machine Learning Library for Perl (MLPERL) has been released in new year (2020) by William Braswell.

Name: MLPerl v0.1, 
Codename:  Gibbon
URL: https://metacpan.org/release/WBRASWELL/MLPerl-0.100000
Description: Initial Public Release, KNN 2D Brute Force
Tagline: FASTER THAN PYTHON!!!

Tutorials will be release soon. Stay Tuned.
Node Express REST API
Tags: node, showdev, api, example
Published: 2020-01-02 10:43:41

My semester end project for an Airline Reservation System.

Node Express REST API

## Features
* Triggers
* Functions
* Views
* Stored procedures
* Indexing 
* Using transactions where necessary in Database


* Node Express REST API
* Using promises
* Documentation with `Swagger`(Open API 2.0)
* Centralized error handling
* Passwords hashed using `bcrypt`
* Authentication with `jwt`
* User input validation using `hapi/joi`
* Uses `promise-mysql` and connection pooling
* Load balancing using `pm2` process management
* Using `Docker`
* MIT license
* `Grafana` for Realtime Report generation 


Source code: [https://github.com/rumeshmadhusanka/DB-API]
Getting Solargraph to work on linux
Tags: ruby, rails, vscode, tutorial
Published: 2020-01-02 10:28:12

This is a depart from my usual Java posts, but I ran across my notes from when I was trying to learn Ruby and thought it might be helpful. Works as of jan 2nd, 2020.

Solargraph adds intellisense features to Visual studio code (code completion, etc) for Ruby. I had a beast of a time getting it to work on Linux, mainly trying to figure out what to do with all the errors. These are the steps I used to get it working, hopefully they help someone.

1. Install Visual studio code
2. install the Ruby Solargraph extention in Visual studio Code.
3. Open the terminal, type: 
     ```sudo gem install Solargraph```
4. at this point it should install, but I usually get errors.
5. If there are any kind of errors, do:
     ```sudo apt-get install ruby-dev```
6. If that doesn't quite clear it up, do:
     ```sudo apt-get install make```
Make was already installed for me this last time, but the last distro I used it wasn't.
7. At one point I had to install a zlib because it was missing. so:
     ```sudo apt-get install zlib1g-dev```

after step 5 I would just do step 3 and see if that worked. I've had to do this several times because I changed Linux distros, and each distro had different bits already installed but not others. Hopefully If you've run into this issue these steps helped. 


Thanks for reading.
VS Code Git integration with ssh stops working
Tags: vscode, git, ssh, errors
Published: 2020-01-02 10:32:42

---
title: VS Code Git integration with ssh stops working
published: true
date: 2020-01-02 09:53:23 UTC
tags: vscode,git,ssh,error
canonical_url: 
---

## The Problem

I recently updated my _ssh_ keys for GitHub account on my Mac and after adding the public key in GitHub everything worked as expected _from the command line_. When I did a…

```
$ git pull
```

…I was asked for the passphrase of my private key and the pull was executed. Great.

```
$ git pull 
Enter passphrase for key '/Users/christiandennig/.ssh/id\_rsa': 
Already up to date.
```

But when I did the same from Visual Studio Code, I got the following error:

![](https://heartofcode.files.wordpress.com/2020/01/screenshot-2020-01-02-at-10.19.18.png?w=1024)

As you can see in the _git_ logs, it says “Permission denied (publickey)”. This is odd, because VS Code is using the same _git_ executable as the commandline (see the log output).

It seems that VS Code isn’t able to ask for the passphrase during the access to the git repo?!

## ssh-agent FTW

The solution is simple. Just use _ssh-agent_ on your machine to enter the passphrase for your _ssh_ private key once…all subsequent calls that need your _ssh_ key will use the saved passphrase.

Add your key to _ssh-agent_ (storing the passphrase in **MacOS Keychain**!)

```
$ ssh-add -K ~/.ssh/id\_rsa 
Enter passphrase for /Users/christiandennig/.ssh/id\_rsa: 
Identity added: /Users/christiandennig/.ssh/id\_rsa (XXXX@microsoft.com)
```

The result in Keychain will look like that:

![](https://heartofcode.files.wordpress.com/2020/01/screenshot-2020-01-02-at-10.34.28.png?w=1024)

When you now open Visual Studio Code and start to synchronize your git repository the calls to GitHub will use the credentials saved via _ssh-agent_ and all commands executed will be successful.

![](https://heartofcode.files.wordpress.com/2020/01/screenshot-2020-01-02-at-10.37.12.png?w=1024)

HTH.

(BTW: Happy New Year 🙂)
How to do web scrapping part-1 (professionally)
Tags: python, java, javascript
Published: 2020-01-02 09:42:47

Consider how can you get the data of all mobile phones which
are available on amazon and compare it to phones available on
snapdeal so that you can buy a best phone for you.

Well! here web scraping can help you a lot.

>>> Now we are going to cover all the topics related to web scraping.

Note- You can scrape a website in python either by beautiful
soup library or by scrapy framework In this article we
will learn to scrape websites using scrapy framework.
 
If you want to access this free course kindly give me your beautiful feedback thanks.
The Collab Lab Week 3 - Wednesday
Tags: collablab
Published: 2020-01-02 09:35:51

I spent some time pair programming with Amber today. I've now officially paired with every member of the team. 🙌🏾

I mentioned yesterday that we ran out of time with the user story from last week. This is the second week that I'm working with the same story. There have been a few secondary lessons I've learned from this story and the result of running out of time.

`1. Ask questions until you understand. If you don't understand anymore, ask more questions. 
`
There are built in assumptions in the stories and the acceptance criteria (AC). In week two, my partner and I put effort into a literal satisfaction of the AC rather than making sure we were fully addressing the story. 

The story is:

>As a user, I want to set up a new shopping list so I can track purchased items
>
>A shopping list consists of a set of items associated with a user’s token. Tokens can be shared with other users to allow them to co-manage a given list. Creating a new list consists of the following:
>
>⬜️ Generate a new unique token
>
>⬜️ Save the token to localStorage
>
>⬜️ Show the user the list view

We looked at the three tasks in the list and built a feature that didn't effectively create a new list. We generated a token, saved it, and then showed an empty list. There was nothing linking the token to the new list that needs to be created.

`2. The pull request can be a conversation and work in progress. We don't have to wait until we feel ready for final review to open one or ask for feedback. `

Amber and I opened a pull request as soon as the work from last week's feature branches were merged. I intentionally used the pull request to comment on specific lines of code, ask for feedback, and document the code as it was written.

### Today's takeaways: 
I spent a lot more time in the [pull request](https://github.com/the-collab-lab/tcl-3-smart-shopping-list/pull/49) than in [the wiki](https://github.com/the-collab-lab/tcl-3-smart-shopping-list/wiki/(Week-3)-Amber-&-Nikema-(As-a-user,-I-want-to-set-up-a-new-shopping-list)) this week. One thing I'm noticing is that the actual writing of code isn't the bulk of the activity that happens on a team project. A lot of effort goes into communicating clearly and often.

I guess I do still enjoy programming and the problem solving part of it. It's kind of fun to fill in the blanks and look for clues on how to solve a problem you haven't seen before. 

I got to draw on my experience. When I coded along to a tutorial and wrote the Social Ape app, we came across the issue of compound queries and needing to build an index in Firestore. 


{% github prophen/social-ape no-readme %}
{% github prophen/social-ape-client no-readme %}

I didn't remember until after googling and finding a solution on StackOverflow. But once I remembered, it was strangely comforting. It feels like reinforcing knowledge and getting closer to know-knowing this stuff.
MY 2019 YEAR REVIEW AND FIRST DEV.TO POST
Tags: personal
Published: 2020-01-02 09:28:22

---
title: MY 2019 YEAR REVIEW AND FIRST DEV.TO POST
published: true
description: 
tags: personal
---

This will be my first ever post in dev.to and last post in 2019. Happy new year's everyone.

#Career
My career started great in 2019 I moved to a higher paying job, better bosses and found a mentor. It gave me an opportunity to pick up a new skill in GraphQL(Which i really enjoyed learning) and also be able to share and collaborate with people who are experts in front end and backend development. I have learned a lot this year not only in development but also personally.

#Personal
This year my personal growth has been great. I created my own portfolio websites and other side projects. I am currently on a daily routine that increased my happiness. Travelled to new places which I rarely do.

#Freelancing
2019 is also the year that I have resumed my freelance work. I worked on a chat app for conventions. This project gave me a lot of new learnings about collaboration and entering an existing codebase that has no structure at all.

#Investments and Savings
This would be the proudest and happiest thing that happened to me. For 2 years of working I had no savings. i was excited to spend my salary on things that i have never gotten as a child. But this year not only i have savings. I also have emergency funds and investments.(woo hoo)

#Conclusion
2019 is the best year of my life and hoping in 2020 I continue this and go back here to post my 2020 review
MY 2020 GOALS
Tags: personal
Published: 2020-01-02 09:27:41

---
title: MY 2020 GOALS
published: true
description: 
tags: personal
---

#Goals

My goals for 2020 are:

###1. Learning Go
This is one of my main goals for 2020. Learning about GoLang, building projects and be able to add this skill in my tool belt.
###2. Finish my unfinished projects
I will now start to finish all of my unfinished projects in 2020 so I can showcase it on my portfolio website.
###3. Get my AWS developer certificate
Accomplishing this goal would be one of my happiest moments in 2020
###4. Continuously write something
I will make this my habit to write something everyday. From blogs, articles, letters and self reflection
###5. Contribute to open-source
I will make it a habit to contribute to open source