teleren/devto huggingface dataset:
This post has 8 reactions! - Using the dev.to API to update the post title with the reactions count!
Tags: webdev, showdev, javascript, node
Published: 2020-10-10 10:38:27

This is just a silly experiment inspired by this video from Ben Awad where he reverse-engineered the TikTok API to update his profile with live stats of one of his TikTok videos.

{% youtube RxkLFAGetVQ %}

I wanted to try this out too and thought it might work on the dev.to platform too. I looked up the API documentation and found the endpoints that I need to use to make this work!

I don't have any bad intentions and don't want to hit the API too often. Some of the API endpoints have rate limits too, therefore I am making sure that I only make requests when it is necessary and every 30 seconds. 

Here is the code that I used to make this work:

{% github phiilu/dev.to-reactions-in-article-title no-readme %}

```javascript
import axios from 'axios';
import dotenv from 'dotenv';

dotenv.config();

const POST_ID = process.env.POST_ID;
const BASE_URL = `https://dev.to/api`;
const client = axios.create({
    baseURL: BASE_URL, headers: {
        'api-key': process.env.API_KEY
    }
})
let currentReactionsCount = 0;

const API = {
    article(id = POST_ID) {
        return client.get(`/articles/${id}`);
    },
    updateArticle(id = POST_ID, body) {
        return client.put(`/articles/${id}`, body);
    }
};

const sleep = async (amount = 30000) => new Promise(resolve => setTimeout(resolve, amount))

while (true) {
    try {
        const { data } = await API.article();
        const { public_reactions_count } = data;
        const newTitle = `This post has ${public_reactions_count} reactions! - Using the dev.to API to update the post title with the reactions count!`

        if (currentReactionsCount !== public_reactions_count) {
            await API.updateArticle(POST_ID, { title: newTitle });
            currentReactionsCount = public_reactions_count;
            console.log(`Article updated - Reactions: ${currentReactionsCount}`)
        } else {
            console.log(`Reaction count was the same`)
        }
    } catch (error) {
        console.log(error.message)
    } finally {
        await sleep();
    }
}
```

You can create a new API key inside your account settings and the API documentation can be found [here](https://docs.forem.com/api/). 

![dev.to account settings](https://dev-to-uploads.s3.amazonaws.com/i/bqwzy5arzunzhnhd0sb5.png)

---

Now if this is working this post should get updated every 30 seconds with the current reaction count! 

---

Edit:

I noticed that the API might not return up-to-date data and therefore takes maybe longer than 30 seconds.
Powertoys - common macOS keys mapping for Keyboard Manager
Tags: vscode, windows, macos, keyboardmapping
Published: 2020-10-10 10:29:45

## Part 1

I use VScode every day for my coding stuffs. My work machine is a mac book, of course it runs macOS, in another hand, I love Windows so much, as much as years (>15) I had used it and still using it on my PC and another Windows laptop.

Just found a way to re-mapping Windows keyboard layout to make it like a Mac, then I don't "need" to be confuse by switching computers day by day.

The original idea just came from this blog https://zellwk.com/blog/mac-and-windows-vscode-keybindings/

Too long, didn't read? 

OK, so I will leave the image which captured on the above article without explaining also.

![The mapping is quite easy, the idea is not](https://dev-to-uploads.s3.amazonaws.com/i/loai2fg73j7covdmah6g.png)

The PowerToys - an additional tools set on Windows, you should know it before read this 😎, otherwise pls just click and read at here https://github.com/microsoft/PowerToys 😁. has Keyboard Manager tool, so you just need to follow the below image to make it works.

![PowerToys is very powerful, Keyboard Manager is so simple](https://dev-to-uploads.s3.amazonaws.com/i/nw6e9a1yr0ddyqnnc0qr.png)

## An explanation
- At the beginning of writing this one, I have tried many way to avoid ctrl+space changing along to swapping ctrl+alt. It just made a conflict and I've never done to re-map my keyboard on Windows like what I using on Mac. Just because I ignored the Win key swapping together. After read the blog of zelllwk, I just see the image about that idea (aka the very good explanation about what I missed before). 😁
- This tutorial is quite simple, I just work very well on my VSCode but I still think how to change the labels of those 3 physical buttons to make it to be more perfect and reducing accident if my eyes just took a look and transfer the wrong information to my brain. 😂
- Nothings changed on keyboard binding of VScode

## Part 2

More keys, more fun
https://gist.github.com/vuon9/c282c605b35d6d4554a53cfc4afda8ab

Take a look!

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quybydmyblnxpenghtks.png)
 

Good luck if you have followed this tips. Don't forget to share your exp, pls!
Simple Drag and Drop File Upload using Dropzone JS - Laravel 8 
Tags: laravel, codepen
Published: 2020-10-10 10:27:53

how to drag and drop upload multiple files in laravel 8 using dropzone js. Drag and drop file upload using dropzone js in your project. In this tutorial, you will learn, dropzone multiple files uploading using dropzone Js in laravel project. This post uploads multiple images in the drop zone plugin, without a refresh or reloads web page using dropzone js in laravel 8.

The drop zone is a jquery plugin, dropzone.js through you can select one by one image and also with preview. After choosing the image from browse, you can see a preview of the image. Drop zone also provides filters like validation for max upload, a specific image or file extension, etc.

we will create two routes, one of display dropzone image upload form view and another for the store images. Then, We create two methods on DropzoneController. We learn drag and drop image upload jquery.

**[Simple Drag and Drop File Upload using Dropzone JS - Laravel 8 ](https://www.phpcodingstuff.com/blog/simple-drag-and-drop-file-upload-using-dropzone-js.html)**

```
<script type="text/javascript">
        Dropzone.options.imageUpload = {
            maxFilesize         :       1,
            acceptedFiles: ".jpeg,.jpg,.png,.gif"
        };
</script>

```
How this WFH culture going to change an individual's lifestyle?
Tags: discuss, productivity, mentalhealth, management
Published: 2020-10-10 10:24:56

With every organization adapting to WFH or remote trend, its curious how will this change us as human beings. Ever wondered what its ripple effects will be?
Well it certainly did force everyone to shift to internet (if some were not before). 

I would like to think how is it going to affect us as individuals(mentally or physically) or the organization we work for, team we work with?

- Will we get more "ME" time or get burned out?
- Will our family time be more productive or affected?
- Will we be able to learn this great time management technique we sought or will this stress us out?

All comments are welcome. :)
Enhance UI - Design for Developers
Tags: webdev, design, tutorial, beginners
Published: 2020-10-10 09:54:02

Developers looking to **enhance the design websites** and applications sometimes leave it until last. Functionality comes first, and by the time we come to design, we have no energy or time left.

I've decided to put together Enhance UI, which will be a series of videos I plan to do weekly, as well as a book (coming soon) that will teach the fundamentals of design to us developers.

This like design theory, picking good colors, spacing, ui, ux and lots more. Here is the first episode which is a submission by SilvenLEAF. 

{% youtube PcpfJISYWmY %}
<center>[How to Redesign a Website](https://youtu.be/PcpfJISYWmY)</center>

If you want a sneak peek to the full enhancement, here is the fore and after shots.

Before:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2u2ulzp8s99frgaiahan.jpg)

After:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ai55bq08fxh1hl94c1r.jpg)

**Things that stood out in this design included:**
- Too much use of the color red as the primary color
- Sizing of tabs, buttons and text
- Incorrect usage of images or content positioning
- Focus on primary actions of the website

If you want to see the full process, check out my video, and if you want to learn more about the book itself, you can visit the website at:
https://www.enhanceui.com/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/intent/follow?screen_name=adrian_twarog)
I quit my lawyer job to become a Software Engineer
Tags: career
Published: 2020-10-10 09:42:43

Hello! I wanted to introduce myself. :) Im Anja, a lawyer, Software Engineering student and Linux lover🐧. A few years ago I decided to ditch my law job because it didnt make me happy and now I can safely say that I found the career that matches my skills and interests perfectly.

Without exaggeration, it feels like a new life. After many years of not knowing where I wanted to go with my life and feeling very lost I finally found something that excites me and that I dont get bored of (and I tend to get bored easily ;)). The possibilities of coding are endless and not only is it fun, but also you can help or entertain other people with it.

Its a wonderful union of creativity and logic. And I cant emphasize enough how many great minds I already met along the way. Im so grateful to get to know and/or work with so many awesome people. Its amazing. :) I would love to read a little introduction about you in the comments! Have a nice weekend. :)
Have you ever invested in tech stocks?
Tags: career, discuss, motivation
Published: 2020-10-10 09:37:46

---
title: Have you ever invested in tech stocks?
published: true
description: 
tags: career, discuss, motivation
cover_image: https://www.quoteinspector.com/media/investing/buy-sell-stocks-sm.jpg
---
During our busy routines as developers, investing in stocks might be a clever passive strategy to let your money grow while you are working on other projects, so you can double your rewards later.

Have you ever invested in tech stocks and what's your experience/lessons learned from it?
Do you still use Lodash and Underscore in 2020?
Tags: webdev, discuss, npm, utilities
Published: 2020-10-10 09:14:49

---
title: Do you still use Lodash and Underscore in 2020?
published: true
description: 
tags: webdev, discuss, npm, utilities 
cover_image: https://i.ytimg.com/vi/UhxT58iOdl8/maxresdefault.jpg
---
Since 2015, ES6 and the above versions have implemented many of the features of the utility libraries like [Lodash](https://lodash.com/) and [Underscore](https://underscorejs.org/), questioning the need to use them as 3rd-party packages.

This brings up the discussion, do you still use them today and could you name some specific use case if you find them useful?
Typing Speed Test
Tags: typescript, php
Published: 2020-10-10 08:53:36

Take our online [Typing Speed Test](https://onlinetypingtests.com/typing-speed-test) for free! We offer a one minute typing test, three minute typing test, six minute typing test, and nine minute typing test, that you can take as many times as you like, and see your typing speed improve over time!

##Why are there no difficult words in this test?
The words are selected from a list of commonly used words. Some typing speed tests use words with difficult spellings, but I think that's unfair. I want to measure typing speed, not reading skill! The lack of difficult words in this test also enables this site to be used as a typing game for kids.

##Why do I need a typing speed test?
Simply put: Our typing test helps you to better assess your current abilities and gives you the opportunity to compare your typing speed at different times. This is the basic prerequisite to to tap your full potential and see how much time you should invest in your daily typing practice. For example, it is recommended to test your typing speed before you switch to the 10 finger typing technique and begin practicing. This allows you to do more typing tests with all 10 fingers later and compare your progress in the 10 finger system to your old typing technique. If you are already happy with your typing skills and did not practice for a long time, you can also use the typing test to check your typing speed regularly and see how you have evolved through daily usage.

##What are CPM and WPM?
They're short for Characters Per Minute, and Words Per Minute. The "raw CPM" is the actual number of characters you type per minute, including all the mistakes. "Corrected" scores count only correctly typed words. "WPM" is just the corrected CPM divided by 5. That's a de facto international standard.

##What can I do to improve my score?
They say that practice makes perfect. Apart from practicing, you can do a few things to get better at typing. Learn to touch type (force yourself to look at the screen, not the keys), get a better keyboard, improve your ergonomics by changing your display and furniture.


**https://onlinetypingtests.com/typing-speed-test**
STUMGE, a mix of engine and virtual console for game development on the web with an old school flavor. 
Tags: programming, gamedev, engine, framework
Published: 2020-10-10 09:08:08

---
title: STUMGE, a mix of engine and virtual console for game development on the web with an old school flavor. 
published: true
description: 
tags: programming, gamedev, engine, framework
//cover_image: https://direct_url_to_image.jpg
---

I have been working on and off on this for a while, and I think that now it is starting to be the time to present it to the world. My goal was to bring some sort of old school game development experience to the web, in an accessible way.

It works on the canvas, with steady 60FPS, and borrows the aesthetics from the Nintendo Gameboy. There are couple examples on the repository and a complete game that you can see on http://games.studiosi.es/efs/ built on the engine (please do not look at the source code, it is very bad). The engine is under MIT license.

I am currently finishing a video tutorial that will be up on Youtube. I will appreciate comments and participation! I am also open to host your games on my server if you don't have the means to do so, just contact me!

The code: https://github.com/studiosi/stumge
Reservas quantas horas por dia para programar?
Published: 2020-10-10 09:06:20

Eu em particular ainda não tenho uma linguagem em que sou especializado, talvez seja esse o motivo pelo qual não tenho programado todos os dias.. mas agora estou a ver java, sql e Python... gostaria muito de saber a vossa rotina com a programação. 
Agradeceria bastante se comentarem
7 To Dos after Manjaro installation
Tags: linux
Published: 2020-10-10 09:02:02

Hi! I now have a dual boot with Manjaro and Arch and I wanted to share some recommended To dos for after you installed Manjaro:

1. Enable the firewall
2. Choose your country in the mirror list of pamac
3. Configure your update policy in pamac
4. Enable AUR in pamac if you need packages from there
5. For backups you can install and configure Deja dup
6. Configue timeshift, so if you messed up you have system snapshots to go back to
7. Optional: make your system beautiful with themes and icon sets from xfce-look.org if you chose XFCE

Which Linux distro do you use and why?
How to create a Chatbot with Python
Tags: python
Published: 2020-10-10 08:56:51

Hey! Lets have a look at how you can create a simple chatbot with Pythons NLTK module. The module is made for natural language processing. First you need to install and run Jupyter Notebook, to do that you need to run these commands in your terminal:

    pip install notebook
    jupyter notebook 

Click on ‘new’ and then on ‘Python 3’ and open that file. To install NLTK, write pip install nltk inside one cell, run the cell and restart the Kernel (check the tabs ‘cell’ and ‘kernel’ of the website for the commands).

Write the code snippet :

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

and run the cell, then type “My name is yourName” and press Enter to see the chatbots answer. In the list with the pairs you can add more pairs for answers of the chatbot. Which are your favorite Python modules? Have a nice day. :-)
Gentle Introduction to Open Service Broker
Tags: opensource, servicebroker, openservicebroker, computerscience
Published: 2020-10-10 07:12:37

## Scenario(Hypothetical)
Suppose a person has a laying server with lots of space in it, and he wants to earn some money from it, and he has an idea in his mind. That is to provide a database(relational database) as a service, which means a person can come to him and ask him to give a chunk of storage to store his website's data.
Sure he can manually create customer's account in DBMS(say MySql). But it will be a tedious task for him to create an account for every person that is asking for database service. On top of that, he would have to manage all his customers' data. ie, how many are using his service, what plan are they using, their payment, and cater to customers' database delete requests.
For a person to handle all those requests is not humanly possible. 

So what's the solution?
(_spoiler alert_) **create a service broker**

## Let's define some terms related to Service Brokers in the context of above example.
**Service**: Datebase is the service.
**Catalog**: List of all types of services that you provide. Here, catalog will contain the database, as it's your service that you are providing.
**Provision**: Create an instance of your service that you provide. Here, create an account of requesting users in the database and allocate the required resources.
**Binding**: Provide instance information to the user and it can be anything credential, instance information, routing. Here, it will give you credentials to connect to your database.
**Unbinding**: does the reverse of binding, and only valid for bindable service.
**Deprovision**: Delete the instance and associated resources. Here, the user account and associated resources will be deleted.

## What is a service broker?
Think of it as a middle man between your customer and the service that you provide. It will automatically handle provisioning, de-provisioning, binding and unbinding, and status of all the services instances provisioned.

**Formal definition**
> Service brokers manage the lifecycle of services, and platforms interact with service brokers to provision, get access to and manage the services they offer.

The most famous service broker that you have seen, is what driving the AWS website.

## What is open service broker?
It's the open-sourced version of service broker. 

## How to get started
* read open service broker specification on [github](https://github.com/openservicebrokerapi/servicebroker/blob/master/spec.md) 
(note: it's a must-do read to get started)
* get started with python package [openservicebrokerapi](https://pypi.org/project/openbrokerapi/)
(note: use python package to help get started, as it generated all the boilerplate code. It was a lifesaver for my project)

## My Project 
{% github Irondev25/openServiceBroker no-readme %}

> Note: any help to make this post better, suggestions welcome.
Browser automation with Selenium
Tags: webdev, python
Published: 2020-10-10 08:48:55

Hey! Do you want to automate your browser for testing or repetitive tasks? Then Selenium might be a tool you want to have a look at. Selenium can be combined with a lot of different programming languages. In my example code Im using Python. You can install Selenium with pip install selenium.

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

Also you need to install the webdriver of the browser that you want to use, which was in my case Geckodriver for Firefox. This is whats happening in my code: We create a driver and open wikipedia.org. Then we click on the element that we fetched with its id. Next we click on the search bar, enter the word into it and press enter. Have a nice day!
How to send E-Mails with Python
Tags: python
Published: 2020-10-10 08:46:44

Hey everyone! Today we have a look at another automation possibility with Python, this time we are using the smtplib module. SMTP stands for Simple Mail Transfer Protocol and is the protocol for sending emails. It determines how emails should be encrypted, formatted and relayed between mail servers.

In my code we only do a few simple steps to get started. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l9fc36d5ovgfi87dbg15.png)

First we create a SMTP object for connecting to GMail. Next we use the method smtpObj.ehlo() to establish a connection to the server. We then set up TLS Encryption by calling smtpObj.starttls(). This is very important because otherwise anyone could fetch your password.

After this we login with the password, send an Email and at the end, disconnect from the server. For using googlemail, you need an extra step which is getting an app password. Read here how you can do this:

https://support.google.com/accounts/answer/185833

You will then get an extra password for your Python app which you use to login with SMTP instead of your normal password. Have a nice day!
Automating my zoom stand-up meeting
Tags: productivity, showdev, cron
Published: 2020-10-10 08:32:19

WFH has become the new normal for all of us and so are the daily stand-up meetings. 

As standups happen at the same time on all working days, the need to find the zoom link every day and open it became a boring task for me. More than that, I also had to keep an eye on the clock so that I don't make my team wait.

Being a lazy guy, it didn't like doing this daily. I just wanted it to be automated once for all. 🤷🏻‍♂️

#Cron Jobs 😎

Cron jobs are specifically designed to run a job at a particular time. For example, you can configure a job to run every hour or every 10th minute or every Tuesday and more.

Now that you know what cron jobs are, there's a software utility `crontab` available in Unix operating systems. It is the daemon that monitors the list of scheduled jobs and runs it at the specified time. Jobs can be configured by firing,

```
crontab -e 
```

The config is a one-liner with two values, 
1. The time to run
2. An executable script that has to be run at that time.

Each line in this file represents a job and there can be `n` number of jobs.


The job that I had to do was straightforward. A simple script that can open the zoom app and join my standup meeting.
Here's the code for doing that.

```
#file_name: join_zoom_standup.sh
open 'zoommtg://us04web.zoom.us/join?action=join&confno=<conf_id>&pwd=<pwd>'
```

Make sure the script is executable.
```
chmod +x join_zoom_standup.sh
```

The only thing left is to configure the cron job to run from Monday to Friday at 10.30 am. (If you're not comfortable with cron expressions, head over [here](https://crontab.guru), a neat editor that helps you generate the expressions.)


Finally, this is the configuration for the same.

```
30 10 * * 1-5 ./custom_jobs/join_zoom_standup.sh
```

All set.

From now, you can just do your work and all of a sudden, the zoom app pops up, you hear people talking and realise it's time for the standup call.😉
This is worth spending 5 minutes. Isn't it!

You can view the list of scheduled jobs using `crontab -l`

Apart from this, there are a lot of tasks that you can force yourself to do just by automating it. I have done a few of them.
```
30 22 * * Wed ./custom_jobs/reading_list.sh
15 15 * * * ./custom_jobs/open_duo.sh
30 15 * * * ./custom_jobs/da_chore.sh
45 10 * * Fri ./custom_jobs/jira_board.sh
35 10 * * Mon ./custom_jobs/dev_scripts.sh
```
Quick info on what these are,
* Open my reading list from multiple places. Eg: twitter bookmarks page, [onetab](https://www.one-tab.com) page, dev.to reading list page and more.
* Making sure that I have updated my JIRA board every Friday.
* Booting all applications that I work with, running all the dev scripts on Monday mornings. Eg: Starting dev servers, Starting Docker containers and more.

Being developers, we should always try automating the tasks that can be automated and focus on tasks that demand our focus.💪 


** _Happy Automating!_ **