teleren/devto huggingface dataset:
typing-test: monkeytype clone in ReactJS
Tags: react, javascript, typescript, showdev
Published: 2021-08-05 19:08:44

Hello all,

I wanted to make a typing test website with ReactJS and JavaScript. So I looked around for good typing test website and one website came to mind monkeytype. it's quite popular for the minimal look. So I thought why not make clone of it.

After adding features and polishing the logic I thought about switching to TypeScript for experiment. 

First I kept tsconfig.json settings to very loose and then tried tightening them step by step.

It was smooth three phase process (suggested by Mike North in Frontend Masters) for converting existing JavaScript codebase to TypeScript.

After 2 weeks of writing and refactoring, typing-test is ready to use for everyone.

If anyone wants to add new theme to typing-test [take a look at this](https://github.com/salmannotkhan/typing-test#got-new-theme-ideas).
All contributions are welcomed :)

## Features:
* Colorful multiple themes support
 * default
 * mkbhd
 * coral
 * ocean
 * azure
 * forest
* 4 time limits (15s, 30s, 45s, 60s)
* Smooth cursor
* Instant Tab restart
* Previous word correction

## Screenshot:
![typing-test(test)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv44pfwm7qsud43xheei.png)

![typing-test(result)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb1wqlarzfbjl5i0oa1j.png)

[Visit Site](https://salmannotkhan.github.io/typing-test)

[Source Code](https://www.github.com/salmannotkhan/typing-test)
[React Native] Learn how to setup Wireless debugging in Physical device (Easy Way)
Tags: reactnative, debugging, devtools, codenewbie
Published: 2021-08-05 18:47:41

First you need to install the app in the Physical app using the command

```
npx react-native run-android
```

After the app gets install, remove the wire from your device and then shake your device to show to debugging menu

After that press on the `Settings`.

![React Native WireLess Debugging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyrdon0wdkgff4kt7eji.png)

After that click on `Debug server host & port for device`

![React Native WireLess Debugging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxs4nvwr4wzti5s01cjj.png)

After that add your IP in this format `IP:8081`. For Example:- 192.158.1.38:8081

![React Native WireLess Debugging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8px8a2emm5j0hz5muq7i.png)

Press `OK`

Press Back.

Again shake your device and then click `Reload`. 

![React Native WireLess Debugging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6xjbghzq3uj3u905u3y.png)

If you had provided correct IP and your metro server is running then it will work fine.
I made a script in Rust that will change your mac app's icon from a png
Tags: rust, apple, macos, showdev
Published: 2021-08-05 17:43:37

Thumbnail credit: [Eric Hoffman](https://dribbble.com/shots/13810933-Big-Sur-Mac-Icons)

Cool, how do I use it?

Install the tool using brew

If you don't have brew, you can install it [here](https://docs.brew.sh/Installation)

Now in you terminal, run:
```
brew tap kb24x7/redock && brew install redock
```

It should be properly installed and ready to use.

Run the tool by using:
```
redock
```

It'll prompt you to drag your PNG file. (The file should have a large resolution and should be square.)

![Screen Shot 2021-08-06 at 11.26.24 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ksosnzu06xzca4wvmze.png) 
 
After adding the PNG file, it'll prompt you to drag the application you want to replace the icon of.

![Screen Shot 2021-08-06 at 11.27.09 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqwf03sexthe8mnww8mf.png) 

After you do that, you can sit back and relax while the script does its thing.

(This is the first time I've ever coded in Rust, so you might see some ugly scripting if you want to check the [source](https://github.com/kb24x7/redock))
 
If you liked this content, hit this post a like and follow me on [Twitter](https://twitter.com/kb24x7)

Will see you the next time I create something :)
Hooks in React: What if I told you...
Tags: react, hooks
Published: 2021-08-05 17:30:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkgmmy5hdrwjpi82gzw7.jpg)

Hooks do not update their value after 'set value' call until a component is rerendered. Supercharged useState by Hookstate (hookstate.js.org) library gives you immediate value update and whole lot more features.

My reaction:

![alt text](https://64.media.tumblr.com/777dc0d7ce1a91400ca009a8ba9f235c/tumblr_otz8fjogWa1qfcx4to1_1280.gif "Ready to get hurt again")
How to get user's current location details from IP Address
Tags: beginners, laravel, codenewbie, vue
Published: 2021-08-05 17:19:14

In this blog post we will see how to get user current location details like (Country, Latitude and Longitude, City, Region, Postal Code) from user's IP Address.

We are going to use `stevebauman/location` package.
This package is very useful to get the information about the users' location with the help of IP address.

Steps to follow:
1. Install Package
2. Register in Service Provider
3. Usage

Step 1 - First install `stevebauman/location` using composer
```
composer require stevebauman/location
```

Step 2 - Register the package in service provider which is in config/app.php

```
'providers' => [
    ....
    Stevebauman\Location\LocationServiceProvider::class,
],
'aliases' => [
    ....
    'Location' => 'Stevebauman\Location\Facades\Location',
]
```
After registration run below command to publish the configuration file it will create `location.php` file in config

```
php artisan vendor:publish --provider="Stevebauman\Location\LocationServiceProvider"
```

Step 3 - Now we will see how to use it in our project and get the information about users' location

```
use Stevebauman\Location\Facades\Location;

$location = Location::get() // it will retrieve default user location  
if ($location) {
    echo $location->countryName;
} 

or we can retrieve users' location from specific IP Address
$location = Location::get('192.168.90.98');
```
Now with the help of below code we can retrieve users' location in laravel's blade file

```
$location->countryName
$location->countryCode
$location->regionName
$location->longitude
```
In this way you can have information about user's current location (also you can use - regionCode, cityName, zipCode, latitude).

:heart_eyes: :heart_eyes: Happy Reading :heart_eyes: :heart_eyes:

For more information about the package you can checkout it's Git Repo - `https://github.com/stevebauman/location`

Note: If you are going to use this kind of packages in your project make sure you have rights to access user's information and let user know that you want to track their information and let them choose to allow or deny it. :slightly_smiling_face: :slightly_smiling_face:
My Git Notebook!
Tags: github, devops
Published: 2021-08-05 17:13:17

`This is Just another post on Git. Nothing new, everything is available in web! I have just collected few important concepts for day to day work.`

## Git Remote Server
Remote repositories are versions of your project that are hosted on the Internet or network somewhere.
```
# origin - default name for remote server
git remote add origin <remote url>
# list remote urls
git remote -v
```
To track any remote branch
```
git checkout --track origin/feature
```
receive changes from remote repo -
`git fetch` - download changes and then you can evaluate 
`git pull` - combination of fetch and merge

## Use diff
diff command is pretty useful while working with git.
```
# what changed since last commit
git diff HEAD
# diff between branches
git diff feature master
```

## Branching is helpful !
Think of a situation you have checked out on a `master` branch and found a code bug. You start making changes to fix that and in the meantime you realised that you are directly making changes in master!
You thought to press `ctrl+Z` but you don't want to loose the potential solution. In this situation branching can help. Checkout your solution with new branch and keep it in new branch until you are ok with the solution. This is  simple scenario but there can be number of others. Branching is beautiful just you need to know, how to handle it!

```
# Checkout a branch
git checkout <existing branch>

# Checkout and create a new branch
git checkout -b <new branch name>
```

## Picking specific changes(folder/file) from another branch
Consider you have few changes on branch `features/myFix` and you want to merge it in `features/BugRel` . All changes are in a folder. 

```
# checkout your features/BugRel branch
git checkout features/BugRel

# pick changes from folder
git checkout features/myFix -- MyFixChanges/
```
That's all you have to do. Now that folder is in your branch, commit it.

## Rename/Delete Branch

```
git branch -m <oldname> <newname>
git branch -d <branchname>
# force delete
git branch -D <branchname>
```

## Merge and Compare Branches
`Fast-forward` - Because there was no conflicting activity in the target branch when we are merging changes from source, commits happen in sequence

```
git checkout <target branch>
git merge <source branch>
```
Use diff always before merging
```
git diff <target branch> <source branch>
```
Before starting merge always update from remote.

Aborting a merge 
```
git merge --abort
```

## Rebase
An advance feature, Clean-up your local history(Squashing multiple commit into one) or pull changes from a branch into your branch without performing a merge. Use it only `your` working branch not on public branch. 
```
git log --oneline
git rebase -i <sha>
# to visit what happened after rebase
git reflog
```

## Cherry Pick
Cherry picking is the act of picking a commit from a branch and applying it to another.
```
# find the commit details
git log <branch name> --oneline
# checkout the branch where you want to put the commit
git checkout <b-name>
# perform the cherry pick commit to HEAD
git cherry-pick <commit>
```

That's All for this post. Thanks
Set up NodeJs in global path in Ubuntu with simple steps
Tags: ubuntu, linux, node, npm
Published: 2021-08-05 17:11:54

#Step 1 :
>Note : NodeJS v14 stable
```
sudo snap install node --classic
```
#Step 2 :
####Configure npm to use the `~/.npm-global` directory for global module:
```
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.profile
source ~/.profile
```
#Step 3 :
####Update npm :
```
sudo npm install npm --global
```
GitHub CoPilot, Security Concerns About QR Codes, Why Covid-19 AI Predictive Models Fell Short & more on DevNews!
Tags: news, podcast
Published: 2021-08-05 17:10:16

---
title: GitHub CoPilot, Security Concerns About QR Codes, Why Covid-19 AI Predictive Models Fell Short & more on DevNews!
published: true
description: Listen to S5E3 of the DevNews pod!
tags: news, podcast
series: DevNews Season 5
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Listen to S5E3 of the DevNews podcast today!

{% podcast https://dev.to/devnews/s5-e3-github-copilot-oculus-passthrough-api-security-concerns-about-qr-codes-and-why-covid-19-ai-predictive-models-fell-short %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guests:** 
- [Andres Guadamuz](https://twitter.com/technollama), Senior Lecturer in Intellectual Property Law at the University of Sussex and the Editor in Chief of the Journal of World Intellectual Property. 
- [Laure Wynants](https://twitter.com/laure_wynants): Assistant Professor at Maastricht University Department of Epidemiology.


---

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ _— or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx)._ 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s5-e3-github-copilot-oculus-passthrough-api-security/id1525581923?i=1000531066439)
- [Spotify](https://open.spotify.com/episode/2FuOLeFEtbAIQWleQJJSQp)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzM1?sa=X&ved=0CAQQkfYCahcKEwjQ88atr5ryAhUAAAAAHQAAAAAQCA)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s5-e3-github-copilot-oculus-passthrough-api-security-concerns-about-qr-codes-and-why-covid-19-ai-predictive-models-fell-short-85904168)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s5e3-github-copilot-oculus-vPe2F-G8RYN/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=164926485)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.herokuapp.com/podcasts/devnews/episodes/176)

#### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season five sponsor, [Scout APM](https://scoutapm.com/devnews) ❤️ 


We hope you enjoy this episode of DevNews!
Amazing Front-End Mentor Landing Page - Made with HTML, CSS, and JavaScript
Tags: webdev, html, css, javascript
Published: 2021-08-05 17:04:33

Hey Everyone, I recreated this amazing Manage Landing Page challenge by Front-End Mentor.

![Screenshot of Desktop version of Manage Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1flq5kk9i7xzcpcyyifb.png) _Desktop-Version_

Watch it Live - [HERE](https://manage-landing-page-eosin.vercel.app/)
Check the code - [HERE](https://github.com/ashutosh-mishra4/manage-landing-page)

Share your thoughts and suggestions in the comment below!
Happy Coding :)
HTML5 Canvas Game - BlockBlaster
Tags: codepen
Published: 2021-08-05 16:35:29

<p>This is a quick game I made using vanilla javascript &amp; the canvas element</p>

<p>Check it out on the <a href="https://chrome.google.com/webstore/detail/blockblaster/oefkkpljpfmafoljnknldnihghpmncpn?authuser=1">Chrome Web Store!</a></p>

{% codepen https://codepen.io/Deftwun/pen/YXMGbN %}
🎯 🔫   Shoot the target!! HTML/CSS only game - Codepen Meetup 2017 - Alicante Frontend
Tags: codepen
Published: 2021-08-05 16:30:18

<p>Shoot as many bullseyes as you can.</p>

<p>Some links to dive deep into CSS counters:</p>

<p><a href="https://una.im/css-games/#💁" target="_blank">https://una.im/css-games/#💁</a></p>

<p><a href="https://youtu.be/WmVH85G59Lk" target="_blank">https://youtu.be/WmVH85G59Lk</a></p>

<p><a href="http://codersblock.com/blog/fun-times-with-css-counters/" target="_blank">http://codersblock.com/blog/fun-times-with-css-counters/</a></p>

{% codepen https://codepen.io/aarongarciah/pen/ypBoVm %}
Creating and managing pages in WordPress
Tags: wordpress, chat
Published: 2021-08-05 16:30:18



WordPress gives us the ability to manage pages. Let's try to manage them. What does it mean to manage? This means being able to create, delete and modify. We go to the "Admin", click "Control" and click on "Pages". Before us in all its glory is the page management window.

![WordPress admin page](https://imbachat.com/storage/app/media/pages.png)

As you can see, we can view, modify, delete and create. Let's try to create a new page. Using the link of the same name, go to the creation window.

We write the title. We format the content in the visual editor. On the left, we set the parameters. You can enable or disable discussion, determine the status of the page, set a password, determine the author and the ordinal number of the page. After everyone is finished, you can temporarily save, save as a draft, or publish the page.

![Add new page on WordPress](https://imbachat.com/storage/app/media/add%20new%20page.png)

Let's publish right away.
As you can see, we have achieved our goal: a link to a new page appeared in the sidebar, and the page itself appeared in the main part. Thus, we can create as many pages as we like. Did you know that it is possible to create a [chat room for WordPress](https://imbachat.com/en/wordpress-chat)?

Its functions include private chat between users, group chat, and online support chat.
Installation instructions:
1. Install the plugin in the admin panel of your WordPress site and activate it.
2. If you don't have a widget, click “Create a widget” in ImbaChat settings. Your site's connection to ImbaChat will be configured automatically.
3. If you already have a widget, write your widget ID in ImbaChat settings and click “Connect the widget”.
4. Also, if you have BuddyPress, WCFM Marketplace, or SweetDate themes, ImbaChat integration will be configured automatically. More on how to make a chat in WordPress
Laravel multiple tables relationship not working
Tags: laravel, php, database
Published: 2021-08-05 16:26:41

I have 3 tables named `books, chapters & hadiths (blogs)`. I am getting hadiths but i want the hadiths data with chapter and book. `bookSlug` is the column name which connected the 3 tables, and `chapterId` is the column which connected the hadith and chapter.
`belongsTo, hasOneThrough` or any other relation is not working for me. So, i created a custom relationship in `Hadith` model like this:
`public function chapter($chapterNumber, $bookSlug)
    {
        return Chapters::where([
            ['chapterNumber', $chapterNumber],
            ['bookSlug', $bookSlug]
        ])->first();
    }`

But i can't use this relation in `Hadith` query with function `with()`, because my custom relationship has function parameters.
Maybe I am missing something, but is there any way i can achive it using laravel built-in relations?

My tables structure:
books:
   id,
   bookName
   bookSlug

chapters:
   id,
   chapterNumber,
   chapterName,
   bookSlug

hadiths:
   id,
   hadithEnglish,
   chapterId,
   bookSlug

I just want to do in `Hadith model` like this that:
`Get a hadith where in the chapter table the chapterNumber column is equals to the column chapterId of hadith table, and then where in the hadith table the bookSlug column is equals to the column bookSlug of chapter table.`
Is this possible? I am stuck
96% of Employers don’t require SOLID software skills!
Tags: solid, software, skills
Published: 2021-08-05 15:59:01

![SOLID skills](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7d3uw73fxq8flvsqk7oo.png)

Read the full article at *[gitconnected](https://levelup.gitconnected.com/96-of-employers-dont-require-solid-software-skills-7ca782375908)*
Mastering Flutter: Publish your package to pub.dev
Tags: dart, flutter, beginners, tutorial
Published: 2021-08-05 15:17:07

You've written a beautiful dart package or plugin and you want to share it to the world? You're in the right place, in this tutorial we will run through the steps that you need to make to publish your app on pub.dev.

Check out the full article [here](Check out the full article here!!!)!!!
Are you using Lazy for your UIView Components ?
Tags: swift, uikit, ios, mobile
Published: 2021-08-05 15:12:54

Hey folks, 

> First time I wrote on Dev! 

I have a simple question for you my Swifters and iOS developers. 

**Do you use `Lazy` implementation on your conception?**

```swift
// Without Lazy
var imageView: UIImageView = {
     let imageView = UIImageView(forAutoLayout: ())
     imageView.image = Asset.mapIconBold.image
     imageView.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
     
     return imageView
}()

// With Lazy
lazy var reloadNavBarButton: BaseButton = {
    let button = BaseButton(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
    button.configureForAutoLayout()
    button.setImage(Asset.reload.image, for: .normal)
    button.imageView?.setImageColor(color: .white)
    button.addTarget(self, action: #selector(reloadApplication), for: .touchUpInside)
    button.isHidden = true
    button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 20, bottom: 15, right: 10)

    return button
}()

```

See you !
Should we be using estimated reading times?
Tags: discuss, a11y, webdev, writing
Published: 2021-08-05 15:10:50

I'm working on a new website. We're trying to be thoughtful about every feature we add. Asking ourselves do we really need this?

**We're currently having a discussion about estimated reading times on articles, and would be interested to hear what everyone has to say?**

Some points we're thinking about:

- Where does the estimated reading time come from? 

- If it takes 20 minutes for someone to read an article that we've labelled `5 minute read` how does that make that person feel?

- Does it put off fast readers?

- Should we consider alternatives like: "short read", "long read", "article", "essay", "a couple of paragraphs".

- Do interactive elements, infographics, embedded videos or audio make the whole thing redundant?

- Is there any evidence to support estimated reading times?

What are your thoughts?
Hızlı ve Güvenli Domain Satın Al
Published: 2021-08-05 15:08:34

Projelendirmek amacı ile süper bir domain mi arıyorsunuz? En iyi domain hizmetleri ile öne çıkan alanadisepeti.com ile sizleri tanıştırmak istiyoruz. Hızlı ve güvenli domain satın al hizmeti gerçek domain değeri çerçevesinde sizlere iletilmektedir.

## Domain Hizmetleri

alanadisepeti.com olarak domain satmak isteyenler ile domain arıyorum en iyi domaini nereden bulurum sorusuna yanıt arayanları bir araya getirmektedir. Satışta olan tüm [jenerik domainler](https://alanadisepeti.com/domainler/kategori/jenerik-domainler), Niş domainler ya da yakından düşecek olan domainler için kısa sürede domain satın al işlemi gerçekleştirebilirsiniz.
Projenize en uygun domain seçenekleri sunan [alanadisepeti.com](https://alanadisepeti.com/) ile ücretsiz domain transferi yapabilirsiniz. Peki, domain ne demek ya da Türkçe karşılığı ile alan adı ne demek?

## Domain Ne Demek

Hayalinizde büyük projeleriniz var ise ve bir web sitesi yapmak istiyorsanız öncelikli olarak domain almanız gerekmektedir. Türkçe karşılığı alan adı olan domain sizin web de adresiniz olacaktır. Bu adres ile ziyaretçilerin size ulaşması mümkün olurken akılda kalıcı, marka değeri bulunan jenerik domain seçmek ise en iyi alternatiflerden biridir.

##Düşen Domainler Satın Alınır mı?

Bugün düşecek domainler ya da daha önde düşen domainler satın alınırken birkaç hususta dikkatli olmanız gerekmektedir. Düşen domain Google ban sorgulaması dışında web.archive.org üzerinden de domainin hangi amaçlar ile kullanıldığına dikkat edilmesi önemlidir.
Düşen domain satın al işlemi öncesi tüm kontrolleri yapmanız ve ondan sonra karar vermeniz faydanıza olacaktır. alanadisepeti.com olarak domain değeri belirleme, satılık jenerik domain bulma ve niş domain talepleriniz titiz bir çalışma sonrasında neticelendirilmektedir.

##Domain Değeri Belirlemesi

Domain değeri belirlemesinde pek çok kriter öne çıkmaktadır. Domainin marka değeri dışında moz değeri, yaşı ve alexa sıralaması öncü kriterler arasında yer almaktadır. Ancak tüm bu kriterlerden öte bir domain değeri belirlemesinde satıcının ya da alıcının o domain için biçmiş olduğu değerde öne çıkmaktadır.
Domain değeri açısından alanadisepeti.com gerçek değerinde domain satın al işlemleri gerçekleştirmektedir. Üstelik tüm süreç hızlı domain transferi ve güvenli ödeme imkanları çerçevesinde tamamlanır.

## Neden alanadisepeti.com

Alan adı sepeti bu sektörde elde ettiği deneyimi müşterileri ile buluşturmak ve domain sektörünün ihtiyaç duyduğu nefes olma amacı ile hizmet vermektedir. Güvenilir domain satın al, ücretsiz domain transferi yap ve domain değeri belirleme gibi işlemlerin yapılacağı alternatif kanallar maalesef ki çok fazla bulunmuyor.
Sizde değerinde domain satın almak istiyorsanız hızlı ve kolay bir şekilde teklif sunabilir, yüzlerce domain arasında seçim yapabilirsiniz. Domain fiyat teklifinizin kabul edilmesinin ardından havale ya da kredi kartı ile ödemesini yapabilirsiniz.