teleren/devto huggingface dataset:
Let's disrupt the tech candidate hiring process 💣
Tags: career, productivity
Published: 2020-07-07 14:50:15

---
title: Let's disrupt the tech candidate hiring process 💣
published: true
description: 
tags: career, productivity
//cover_image: https://direct_url_to_image.jpg
---

There's something that has always annoyed me in the tech industry.

Most of the time, the first step for tech candidates is to fill a boring form. First name, last name, CV, Linkedin, Github profile, a few usual questions, etc. Then the classical : "We'll be in touch soon if your profile interest us" final sentence 😐.

It does not matter which software is used by the Human Resource team, it's most of the time the same kind of form and same questions for everyone.

Being an engineer, I don't remember how many job forms I've filled...

Recently I had to work as a CTO and decided to do things slightly differently. The Human Resource team did not want to change the job ads software, so I was kinda locked. But at the end I simply added to the workflow a small "secret" API that I developed.

This API would simply "pre-screen" the public accounts given by the candidates. By screening the profiles sent by the candidate, the API would detect things like : high activity on public Github repositories, answers on Stackoverflow, etc.

Then the system would send an email to the candidate thanking him or her for the contributions and engaging a small discussion about those.

Of course this kind of system works better for senior or experienced developers with public contributions. But at the end, it was mostly a success for both us and the candidates 👏🏼.

First, this system helped us filter the spam and the agencies. Secondly, most senior engineers were quite happy to discuss about their public contributions and we had more engagement. This lead us to more quality discussions with good and motivated candidates 🚀.

I've decided to release the API on [https://wisedev.io](https://wisedev.io). You can try it on your own profiles if you want to see what could be your scoring.

What's your opinion on this kind of technique? What are your biggest pains during the traditional tech hiring process? What would you disrupt?
Algebraic data types in SQL
Tags: help, sql
Published: 2020-07-07 14:45:56

I'm working on an application that has a survey-like structure. As such, the there are different types of questions that need to be stored in the database e.g. multiple-choice, true/false, essay etc.

For this reason, it's a bit difficult to structure the SQL for the questions and answers tables. This sort of structure is considerably easier in MongoDB, because of the existence of discriminator fields.

Has anyone implemented something similar in SQL before?
Getting the Grant for the Web Monetization
Tags: grantfortheweb, webmonetization, js13kgames, gamedev
Published: 2020-07-07 14:51:47

---
title: Getting the Grant for the Web Monetization
published: true
date: 2020-07-07 14:45:01 UTC
tags: grantfortheweb,webmonetization,js13kgames,gamedev
canonical_url: https://medium.com/js13kgames/getting-the-grant-for-the-web-monetization-431f7106adff
---

Yesterday’s [announcement](https://grantfortheweb.org/post/enclave-games) of [Enclave Games getting the grant from the Grant for the Web program](https://enclavegames.com/blog/awarded-grant-for-the-web) means the [Web Monetization category](https://js13kgames.com/webmonetization) in [js13kGames](https://js13kgames.com/) 2020 competition was officially confirmed!

![](https://cdn-images-1.medium.com/max/1024/1*9Q0Q0ew4frirIGyUo3d7_Q.png)

Last year we’ve partnered with [Coil](https://coil.com/) to create a [brand new Web Monetization category](https://medium.com/js13kgames/web-monetization-new-category-this-year-e87bb1c998cd), while this time the support will come from the [Grant for the Web](https://grantfortheweb.org/) program. As part of the grant, we will also work on creating new HTML5 games and writing documentation about the whole process, create and send [Gamedev.js](https://gamedevjs.com/) Survey (and then present the results), and I will write and publish an ebook about building games with Phaser.

I’m [really happy](https://dev.to/end3r/going-for-the-grant-876-temp-slug-1359676) about the fact that the competition is being recognized and supported by such companies and initiatives. This also means you will again be able to not only participate and win [cool prizes](https://js13kgames.com/#prizes), but also earn some money!

* * *
TV LG ghid util
Tags: tv, lg, televizoare
Published: 2020-07-03 16:19:59

Un TV LG inteligent îți poate deschide calea către o lume cu noi opțiuni de divertisment, de la streaming video la controlul unei case întregi pline de gadgeturi.

##Aplicațiile fac totul

Tehnologia a oferit publicului puterea de a deține controlul. Nicăieri acest lucru nu este mai evident decât în cazul LG Content Store. 

##Jocuri pe marele ecran

Jocurile vor fi o experiență cu totul nouă cu un TV LG inteligent, permițându-ți să conectezi computerul la ecranul televizorului pentru experiența supremă de joc. Astfel, un TV LG Smart [iti va permite](https://www.emag.ro/televizoare/brand/lg/c) acum să joci jocuri de streaming direct prin televizor.

##Lumea la îndemână

Au dispărut zilele în care tot ce putea face o telecomandă TV era pornirea dispozitivului sau schimbarea canalului. Cu LG Magic Remote, ești complet în control. Poți să faci cu mâna pentru a parcurge canalele, să utilizezi LG Voice Mate pentru a găsi programul preferat sau să apeși butonul New Movies pentru a te conecta rapid la video. Aceasta este o telecomandă pe care nu vei dori să o pierzi.

##Conectează televizorul la casă 

Vrei să găsești rapid filmul tău preferat, să reglezi volumul pe televizorul tău sau chiar să verifici cel mai recent raport meteo doar folosind vocea? Toate acestea pot fi obținute prin conectarea unui TV LG Smart la Google Assistant sau Amazon Alexa.

Vei putea, de asemenea, să folosești comenzi vocale pentru a controla dispozitivele inteligente conectate din casă, întunecând luminile în seara filmelor și ridicând temperatura pentru o seară confortabilă.

##Bingeing cu cele mai bune emisiuni TV și filme


În loc să vizionezi episod cu episod, probabil vei vrea să faci o vizionare blitz a unui sezon întreg într-o singură seară. Cu un TV LG Smart poți face acest lucru descărcând aplicații precum Netflix, Amazon Prime sau HBO Go!
Keyboard control of your web app (beyond tabindex)
Tags: webdev, javascript, showdev, vue
Published: 2020-07-07 14:42:55

In vanilla JS, of course, but also compatible with SPA.

The trick is to attach to `window`'s onkeydown / onkeypress / onkeyup, and remove the handler when needed. (Using addEventListener / removeEventListener is OK too, but harder to prevent from attaching multiple times.)

```ts
  async startQuiz() {
    window.onkeypress = this.onQuizKeypress.bind(this)
    this.isQuizModal = true
  }

  endQuiz() {
    window.onkeypress = null
    this.isQuizModal = false
  }

  beforeDestroy() {
    window.onkeypress = null
  }
```

If you use `class`, `function keyword`  or `this keyword`, you would also need to `.bind(this)`.

About the real event, you might need several escaping mechanisms, before the real thing.

```ts
  onQuizKeypress(evt: KeyboardEvent) {
    if (!this.isQuizModal) {
      return
    }

    if (
      evt.target instanceof HTMLTextAreaElement ||
      evt.target instanceof HTMLInputElement
    ) {
      return
    }

    ...
  }
```

Add several utility functions,

```ts
    const click = async (el: any) => {
      if (!el) return

      if (el.classList?.add) {
        el.classList.add('active')
      }

      if (el.click) {
        const r = el.click()
        if (r instanceof Promise) {
          await r
          if (el.classList?.remove) {
            el.classList.remove('active')
          }
        }
        // else {
        //   await new Promise((resolve) => setTimeout(resolve, 500))
        //   if (el.classList?.remove) {
        //     el.classList.remove('active')
        //   }
        // }
      }
    }

    const mapKey = (map: Record<string, (() => any) | string>) => {
      let action = map[evt.key]
      while (typeof action === 'string') {
        action = map[action]
      }
      if (typeof action === 'function') action()
    }
```

Now, for the real key mapping,

```ts
  onQuizKeypress(evt: KeyboardEvent) {
    ... // Escape several things

    mapKey({
      '1': () => click(this.$refs.btnMarkRight),
      '2': () => click(this.$refs.btnMarkWrong),
      '3': () => click(this.$refs.btnMarkRepeat),
      q: () => click(this.$refs.btnHideAnswer),
      ' ': 'q',
      e: () => click(this.$refs.btnEditModal),
    })
  }
```

And now, for the styling. I just make it simple, yet clear.

```css
button:focus, button:active, button.active {
  filter: grayscale(50%) saturate(75%);
}
```

If you are curious, I use this a real project -- [patarapolw/zhquiz -- packages/nuxt/pages/quiz.vue](https://github.com/patarapolw/zhquiz/blob/master/packages/nuxt/pages/quiz.vue#L1074). Visit [my web app](https://www.zhquiz.cc).
Review: Kotlin Bootcamp for programmers by Google [2020] Udacity
Tags: kotlin, tutorial, review, udacity
Published: 2020-07-07 14:39:20

Today I'm reviewing the course: "Kotlin Bootcamp for programmers by Google" published on [Udacity](https://classroom.udacity.com), it's free and you can find it also on YouTube.

- Check the course [here](https://classroom.udacity.com/courses/ud9011) and watch my full review on the video.

- Or check this [PLAYLIST](https://www.youtube.com/playlist?list=PLxktx98zP3aAylA3it3TYyF7x6lDhc0qi) with REVIEWS of tech courses. 


************************************

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!

**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elefintech)
Merging with branches...the circle of life 
Tags: github
Published: 2020-07-07 14:29:34

Because I will likely forget all of the nuances of merging with branches to the main branch...

1) Merge remote main to local:
```git checkout main```
```git pull origin main```

2) Merge main to feature branch:
```git checkout feature branch```
```git merge main```

3) Merge feature branch to main:
open pull request and merge there
Nice article to contribute to open source
Tags: opensource, github
Published: 2020-07-07 14:13:29

Just while browsing I found a very good article saying how to find the first issue where you can contribute to.
Here is the article
https://kentcdodds.com/blog/what-open-source-project-should-i-contribute-to

Apart from that I know even Mozilla, Linux, and some more open-source groups have a lot of issues that can be taken by newbies. They can be documentation, translation, tests, etc. But I don't have many references for it.
Angular Horizontal Tabs
Tags: javascript, css, html, webdev
Published: 2020-07-07 14:03:29

As previously we made Angular Vertical Tabs using the same CLI but now here we made Horizontal tabs using HTML and CSS with the help of angular CLI. In these tabs, we used simple scss features and basic HTML tags.

Here we also used HTML list tag and CSS flex-box properties to make this list in the same line. we used the angular OnInit lifecycle method to set a tabs value on clicks it will change. Here we used one active class with simple CSS like color and the same font which looks simple and attractive. 

Make it yours now by using it, downloading it, and please share it.

[Get Source Code](https://w3hubs.com/angular-horizontal-tabs/)
Laravel Timestamp Tricks
Tags: laravel, webdev, php
Published: 2020-07-07 13:49:39

There are various interesting things that a user can do with laravel timestamp. Some of which are:

Change Timestamp Column Name

If the user has non-laravel database as well as differently named timestamp column then there is no need to panic.

Lets say user has created_time and updated_time in timestamp column. User can specify it in model:

```php
class Role extends Model
{
    const CREATED_AT = 'created_time';
    const UPDATED_AT = 'updated_time';
```

Disable Timestamps

If user doesn’t have time column but tries something like Model::create($arrayOfValues). As a result, he/she will get a SQL error.

For solving this problem, user can disable automatic timestamp by adding one property.

```php
class Role extends Model
{
    public $timestamps = FALSE;
}
```

Before Laravel7, the datetime would be in format of 2019-12-02 20:01:00. However now in laravel7, date time is in format of 2019-12-02T20:01:00.283041Z. 

So, if you need to customize timestamp format, set the $dateFormat property on your model which determines how attributes are stored in database.

```php
class Flight extends Model
{
    /**
     * The storage format of the model's date columns.
     *
     * @var string
     */
    protected $dateFormat = 'U';
}
```

Order Timestamp latest and oldest

User can order data by timestamp using two shortcut methods which are:

```php
User::latest()->get();
```

The above code is for getting latest time. As for getting oldest timestamp, the code is;

```php
User::oldest()->get();
```

*If you are interested, there are a lot more of these in https://laravelproject.com/laravel-timestamp-tricks/*
Introducing my new personal site, a static SPA built without a framework 🚀
Tags: showdev, webdev, javascript, spa
Published: 2020-07-07 13:48:15

---
title: Introducing my new personal site, a static SPA built without a framework 🚀
published: true
description: Aka building my own static site generator from scratch (don't try this at home)
tags: showdev, webdev, javascript, SPA
series: Building my personal site without a framework
canonical_url: https://bholmes.dev/blog/introducing-my-new-personal-site-a-static-spa-built-without-a-framework/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/w8j7q13iopg6cf0qie63.png
---

[**Visit the site to boost my SEO ✨**](https://bholmes.dev)

[**Check out the repo to see how I tackled this challenge 👨‍💻**](https://github.com/Holben888/bholmesdev)

After months of over-engineering and nitpicky designing, I'm excited (and relieved) to show off this baby to the world 😁

This was a much more difficult undertaking than it may seem, or even needed to be. Rather than using a sexy static site generator like [Hugo](https://gohugo.io) or [Gatsby](https://www.gatsbyjs.org), I challenged myself to pull off...

✅ **Static page generation** for quick page loads

✅ **Client-side routing** for that single page app (SPA) feel

✅ **Progressive enhancement** so the entire site still works without JS enabled

✅ **Page transitions** for added spice

... all without frameworks or component libraries.

I still leaned on a couple libraries like [SCSS](https://sass-lang.com) and [Pug templating](https://pugjs.org/api/getting-started.html) to make my life a little easier. But in the end, it's just a bunch of vanilla JS, a build script, and some *probably* bad practices keeping this thing together.

## So why did you kill yourself reinventing the wheel?

Well, to be honest, I was tired of sitting on the shoulders of giants to build feature-rich, hyper-optimized websites. It's so easy to get lost in the docs of your favorite framework that you forget all the fundamentals actually tying everything together. Plus, it was nice to tackle all of these problems on my own, since now I don't have to check back on someone else's framework in a year to see what breaking changes I need to fix!

I also had that naive thought of **"how hard can it be?"** that I just couldn't shake. Answer: extremely hard. Please don't try this at home unless you have some time and a healthy dose of insanity on your hands 😬

Needless to say, this was an absolutely incredible learning experience on how all of these concepts _actually_ work under the hood. And now, I'm ready to share all my learnings with you. I just posted my first major takeaway from this experiment which you can find below. More entries soon to come!
A credit card component built with React Native
Tags: reactnative, react, ios, android
Published: 2020-07-07 13:40:45

---
title: A credit card component built with React Native
published: true
description: credit card using react-native styles only
tags: reactnative, react, iOS, Android
cover_image: https://raw.githubusercontent.com/haikyuu/rn-credit-card/master/screenshot.jpg
---

Here is a little experiment that turned out cool ✨.
You can grab the [code from here](https://github.com/haikyuu/rn-credit-card/) and play with the [sandbox in the browser here](https://codesandbox.io/s/github/haikyuu/rn-credit-card)
SVG Text Editor
Tags: codepen
Published: 2020-07-07 13:27:46

This is a small project I'm working on {% codepen https://codepen.io/amahallawy/pen/qBbpbgj %}

This pen has been featured in [codepen](https://codepen.io) yesterday and I thought of sharing it with Dev Community here too.

For cover image I used resources from [freepik](https://www.freepik.com): 
[Business vector created by studiogstock](https://www.freepik.com/free-photos-vectors/business) 
[Background vector created by starline](https://www.freepik.com/free-photos-vectors/background)
How #100DaysOfCode Changed My Coding Life 🙌
Tags: 100daysofcode, beginners
Published: 2020-07-07 13:26:30

> " We are what we repeatedly do. Excellence, then, is not an act, but a habit " - Aristotle 

Hello Everyone 👋👋👋

Today I'm going to share my experience of my first round of #100DaysOfCode and how it completely changed my coding life.

I remember a few months back how I was struggling to start my web development journey and I used to start a course and then leave it after a few days. Sometimes when the course started to seem difficult or due to the pressure of my academics or even sometimes simply if used to get bored. And my coding journey was just somehow going.

Then in the month of March, I started using Twitter and there I found #100DaysOfCode. I saw journeys of many people and got inspired and thought of giving it a try.

It's basically that you have to do some coding every day according to your convenience and then you have to tweet about your day learning for 100 days.

So I started fresh. Picked up a course and sticked to it. After that, I started tweeting daily about my journey. And in the process, I met some wonderful people of the #100DaysOfCode community. They are totally awesome. 

People started to appreciate my works ( I can't forget to mention bots 😉). People also started to follow me too. And that was a kind of appreciation too that people are liking my works that I'm putting out there. 

These practices opened new dimensions for me, I started writing blogs, articles, poems. I also started to include these in my daily progress ( and also pics of foods I cooked 😅 ). And people appreciated those too. But I felt happier when people started to ask questions and for guidance sometimes and I was excited to help them. It is an awesome feeling to give something back to the community. 

Also, you'll get to know some awesome devs there who are always tweeting about recent developments, tips, resources, experiences, and stuffs related to tech, which may help you a lot. They may also help you with your questions and problems. There are also some cool people out there who have the same interests as yours with whom you can pair up and continue your journey. And pair programming is proved to be more efficient.

But there were also some days when it was impossible for me to code and I took a break sometimes. And I think it's okay to take a break sometimes if you don't feel like coding until you don't quit. Most important is that you don't quit and continue with your journey. 

Here's a list of some achievements of mine in the first round of #100DaysOfCode :

![Achievements in #100DaysOfCode](https://dev-to-uploads.s3.amazonaws.com/i/4brz7f4ectnln1xq420u.jpg)

Apart from these, I made many good friends ( also 250+ connections 🙂 ).

I will definitely recommend this to any new beginner for starting their journey. Also, it is a good practice for all the devs. And I'm also too much excited to start my second round of #100DaysOfCode. 

---

Thanks for reading 🙏

Say [HI 👋👋👋](https://twitter.com/thecoollearner)

Happy Coding 💻
Daily Challenge #265 - Equal Sides
Tags: challenge
Published: 2020-07-07 13:15:38

---
title: Daily Challenge #265 - Equal Sides
published: true
series: Daily Challenge
description: Take an array and find the index where both sides equal each other. 
tags: challenge
//cover_image: https://direct_url_to_image.jpg
---
You are going to be given an array of integers. Your job is to take that array and find an index `N` where the sum of the integers to the left of `N` is equal to the sum of the integers to the right of `N`. If there is no index that would make this happen, return `-1`.

For example:

Let's say you are given the array `{1,2,3,4,3,2,1}`: Your function will return the index `3`, because at the 3rd position of the array, the sum of left side of the index `({1,2,3})` and the sum of the right side of the index `({3,2,1})` both equal 6.

Let's look at another one.
You are given the array `{1,100,50,-51,1,1}`: Your function will return the index 1, because at the 1st position of the array, the sum of left side of the index `({1})` and the sum of the right side of the index `({50,-51,1,1})` both equal 1.

Input:
An integer array of length 0 < arr < 1000. The numbers in the array can be any integer positive or negative.

Output:
The lowest index N where the side to the left of N is equal to the side to the right of N. If you do not find an index that fits these rules, then you will return `-1`.

Note:
If you are given an array with multiple answers, return the lowest correct index.

###Tests
{1,2,3,4,3,2,1}
{1,100,50,-51,1,1}
{20,10,30,10,10,15,35}
{-8505, -5130, 1926, -9026}

Good luck!

***
_This [challenge](https://www.codewars.com/kata/541c8630095125aba6000c00) comes from Shivo on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Drawing crash box for PAPER TANKS
Tags: indiedev, unity3d, 2d, game
Published: 2020-07-07 13:08:13

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

In this video I draw animation and box sprites and crash box.
https://youtu.be/yG9zUDkVL_g

Follow dev:
https://store.steampowered.com/app/1213020/PAPER_TANKS/
https://twitter.com/PAPERTANKS2
JS Titbits | Sync vs Async
Published: 2020-07-07 13:02:24

In Javascript, all **synchronous** code in a given script is executed before any **asynchronous** code.

For example, take a look at the code below

```javascript
setTimeout(() => {
  console.log("async");
}, 0);

for (let i = 0; i < 5; i++) {
  console.log("sync...", i);
}
```

The result of running the above block of code is

```cmd
sync... 0
sync... 1
sync... 2
sync... 3
sync... 4
async
```

The delay on the `setTimeout` function is set to `0`, but the handler function is executed last after all synchronous code has been executed.