teleren/devto huggingface dataset:
Implementation of Vote feature in ionic 4.
Tags: ionic, beginners, angular, typescript
Published: 2021-08-14 12:23:56




I'm publishing the first part where I used this feature that was in a chatroom.
Should I explain the code?

_Read it on your own risk_

>Using Firebase so here, I have used the array chatRef from ts and then we will check if the uid(user id is my user id ) is yes ill 
ill type my message and in the next line if the chat message is a poll ill see the poll.
and we have two buttons we have only kept two vote options.
Next is the same if i'm not the user that is the user is another stranger from chatroom, the code is for them.

We will store our user id data at a different place and stranger\s at a collective place. We will see that next time.




```
  <ion-content padding>
    <div class="chat" *ngFor= "let chat of chatRef | async">
        <div class="me" *ngIf = "uid==chat.UserID">
          {{chat.Message}}
        <div  class="me" *ngIf = "chat.Message =='POLL' "  >
          <h1>{{chat.poll}}</h1>
          <div> 
            <ion-button  (click)="opinionClick('yes',chat.id)" >{{chat.option1}}:{{chat.countoption1}}</ion-button>
           <ion-button  (click)="opinionClick('no',chat.id)" >{{chat.option2}} :  {{chat.countoption2}}  </ion-button> 
         </div>
        </div>
        </div>
        <div class="you" *ngIf = "uid!=chat.UserID">
          <span class="name">{{chat.Name}}</span>
         <br> {{chat.Message}}
        <div class="name" *ngIf = "chat.Message =='POLL'" >
          <h1>{{chat.poll}}</h1>
            <div  > 
             <ion-button  (click)="opinionClick('yes',chat.id)" >{{chat.option1}}: {{chat.countoption1}}</ion-button>
            <ion-button  (click)="opinionClick('no',chat.id)" >{{chat.option2}}:  {{chat.countoption2}} </ion-button> 
          </div>
        </div>
      </div>
    </div>
  </ion-content>

```


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


I know I'm bad at selecting the palette.

**Aniyooo** 💕
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2021-08-14 12:00:21

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593d119ae.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:
There are 10 types of people in this world, those who understand binary and those who don't.
 -->
Switch Gear Panel Course in hyderabad
Tags: jobs, electrical, engineering
Published: 2021-08-14 11:42:18

https://www.hiee.in/
Since a decade, we've been assisting companies in finding talent.
In addition, our students will receive a thorough and realistic training in order to fully comprehend their work.
A minute of discussion with the HR department is all it takes to understand a company's requirements
Rather than spending time and money on job portals and reference checks, we now schedule interviews in less than 24 hours.
Spaceship, Ternary and Null Coalescing operators in PHP: Quick examples
Tags: php, comparison, operator, tutorial
Published: 2021-08-14 10:59:34

---
title: Spaceship, Ternary and Null Coalescing operators in PHP: Quick examples
published: true
description: Ho to compare two values in PHP guided by quick examples of Spaceship, Ternary and Null Coalescing operators
tags: php, comparison, operator, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i42mswwbyyx938uhj4e.jpg
---
These are so simple concepts, but sometimes forgotten by PHP developers. In order to quick introduce and explain how to use there three types of comparison operators in PHP, I've decided to share the simple codes bellow.

If you need further information, please check the [official Comparison Operators documentation page](https://www.php.net/manual/en/language.operators.comparison.php).

## Spaceship Operator
This:
```php
$result = ($expr1) <=> ($expr2);
```
Is the same of:
```php
if ($expr1 < $expr2) {
    $result = -1;
} else if ($expr1 == $expr2) {
    $result = 0;
} else if ($expr1 > $expr2) {
    $result = 1;
}
```
## Ternary Operator 
This:
```php
$result = ($expr1) ? ($expr2) : ($expr3); 
```
Is the same of:
```php
if (true == $expr1) {
  $result = $expr2;
} else {
  $result = $expr3;
}
```
And this:
```php
$result = ($expr1) ?: ($expr3);
```
Is the same of:
```php
if (true == $expr1) {
  $result = $expr1;
} else {
  $result = $expr3;
}
```
## Null Coalescing Operator
This:
```php
$result = ($expr1) ?? ($expr3);
```
Is the same of:
```php
if (null !== $expr1) {
  $result = $expr1;
} else {
  $result = $expr3;
}
```
You can play with here: https://3v4l.org/SWfOt
Open VSCODE in browser from github cool trick
Tags: webdev
Published: 2021-08-14 10:58:25

There is a very cool trick to open vscode on browser with a simple shortcut key 

Step 01: Go to your github repository

Step 02: Press "windows icon" + "." key on your keyboard

Boom! You are done vs code is launching

if you found this post useful subscribe to my channel for more videos and coding tutorials

https://youtube.com/c/codingfire?sub_confirmation=1

Thankyou! Stay safe. Stay Happy :)
JavaScript Variables and more 
Tags: javascript
Published: 2021-08-14 10:51:27

JavaScript (JS) is a lightweight, interpreted compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages. In this blog I will discuss the variables used in JavaScript Language.

Firstly to discuss what actually are variable ? Variables are used to store data values. They are used to contain values which can be used later in the program for different operations and algorithms. A variable can only contain one value at a time, which can be of any data type. Meaning either a string, number, boolean, array, object, function or null or undefined.

Now, In JavaScript we have 3 keywords for variables, Const, var & let. 
While var was the OG variable declaration in JS, const and let were introduced with ES6.

Var : Scope of var can be global or local depending on where is it declared. It means if any variable with var is declared outside function , it can be used throughout the program , while if it is declared inside the function it can only be used inside the function. 

Hoisting of Var : Basic meaning of hoist is to pull something up or lift , hoisting is basically a mechanism where declarations of Variables and functions move to top of the scope wherever they are declared before code execution starts.
When var variables are hoisted to top they are initialized with value of "undefined".

Const : Const variable keyword was introduced with ES6 in 2015.
As the name of the keyword suggests const is used to define variables that are constant, it sounds a little bit oxymoronic but in other words we can say Const variables cannot be reassigned, if we declare a const array we can make changes in it but cannot reassign it. It also cannot be re-declared. Since const cannot be redeclared it has to initialized at the time of declaration .Const has a block scope which I will explain with use of a example.

```javascript
const hello="murtaza";
{
const hello="how";
console.log(hello);
// returns "how"
}
console.log(hello);
//returns "murtaza"
```

Let : Just like const let is also a block scoped variable keyword. Let can be updated but it cannot be re-declared. Just like var and const , let declaration is hoisted to top , while var is initialized with "undefined" , const and let are not initialized,
so if we try a to use a variable with let keyword without initializing it , it will give "Reference Error".
 
```javascript
greeting = 4;
console.log(greeting);
let greeting;
// it returns "error: Uncaught ReferenceError: Cannot access 'g' before initialization"
```
What is the Lambda Execution context and why use it?
Tags: aws, serverless, cloudskills, lambda
Published: 2021-08-14 10:22:30

## What is the AWS Lambda Execution Context?
When your Lambda function gets called, Lambda will then invoke your function in an execution environment, which is an isolated runtime environment. The execution context is a temporary runtime environment that initializes any external dependencies of your lambda code. As your lambda function can be invoke numerous times and scale the execution context is maintained for some time in anticipation of another Lambda function invocation. When that happens it can "reuse" the context to execution time which will save time on your function. The execution context includes a **/tmp** directory, that provides **512mb** of temporary storage for your functions.
## What can it be used for?
There are a number of things the execution context can be used for but some great use cases for example is database connection, HTTP clients, SDK clients, etc...
Best practice to not put any connections for example inside your handler, because that will mean that every time your function gets invoked, it will create a new database connection, which will cause problems in the future. You want to be able to create that database connection outside of your handler and then just use that connection within the handler of your Lambda function.

## Do not initialize your Database connections like this:
![Bad initializing lambda function handler](https://i.imgur.com/q7oeguW.png)
This will cause a new connection to your DB every time your function gets invoked.
## Rather create your function as follows:
![Best practice database connection in your function](https://i.imgur.com/202KUo2.png)
This is best practice and your Lambda function can now reuse the database connection in your handler, without the need to recreating the database connection if your function gets invoked multiple times in a short period.

## /tmp space:
When you need to work with a big file inside of your Lambda function, you can use the /tmp space **to temporarily save** the file to use, if it's not bigger than 512MB. When the execution context is frozen, the directory content remains, which is helpful for multiple invocations. If you need more permanent objects that will not temporarily be used, then rather use something like AWS S3 for persistence of the object.
How to build desktop apps with Tauri and Mint
Tags: node, tutorial, programming, mint
Published: 2021-08-14 09:41:49

I've recently launched [DevBox](https://www.dev-box.app/) ([Launch Post](https://dev.to/gdotdesign/devutils-everyday-utilities-for-the-everyday-developer-4m)), a desktop application full of developer utilities. I am building it with [Tauri](https://tauri.studio/en/) and [Mint](https://www.mint-lang.com/) 🚀 and in this post, I'll show you how!

## Installing Prerequisites

You will need to install both Tauri and Mint.

For Mint, I use [asdf]():

```bash
asdf plugin add mint
asdf install mint latest
```

For Tauri, it's a little more complicated, but their [Getting Started Guide](https://tauri.studio/en/docs/getting-started/intro/) contains the installation instructions.

## Scaffolding the project

First, you need to create a directory and install the `@tauri-apps/cli` and `@tauri-apps/api` packages of Tauri:

```
mkdir mint-tauri && cd mint-tauri
yarn add -D @tauri-apps/cli @tauri-apps/api
```

- `@tauri-apps/cli` is the command line interface
- `@tauri-apps/api` is the bridge between Rust process and the webview (we will use this later).

Next, we initialize the Tauri side of the project:

```
yarn tauri init
```

This will ask some questions about your setup and scaffold the application into `src-tauri`. The name and title should be different for your project, but the development server and dist directory should be the same:

```
What is your app name?: mint-tauri-test
What should the window title be?: Mint Tauri Test
Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri" folder that will be created?: ../app/dist
What is the url of your dev server?: http://localhost:3000
```

And finally, we initialize the Mint side of the project:

```
mint init app
```

## Running the development server

There is one thing to do before running the server is to change:

```
"beforeDevCommand": "",
```

to: 

```
"beforeDevCommand": "cd app && mint start",
```

in the `src-tauri/tauri.conf.json` file. This will make it so that the Mint developer server is started before the Tauri development server.

To start the development server, just run:

```
yarn tauri dev
```

(at first, this will take a while because it compiles a bunch of Rust crates, but subsequent invocations will take less time)

At this point, you should see the default Mint application in a window.

![Mint Tauri Window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njvs82w95sq9u5brgng0.png)

------------------

That's it for this post! Let me know what you think in the comments below!

In the next post, I'll show how to integrate with the Tauri APIs to show notifications and read some files!
Things that I've learned when opening a pull request
Published: 2021-08-14 09:20:10

If you don't know what a **pull request** is, it's simply a method that allows software engineers to contribute to a code base. Whenever a new feature is created, a software engineer writes the code and then transfers the piece of code to a software development project. Once your pull request is open and passes all the required tests for code coverage, someone from the team reviews the pull request. I wrote an article about the [traits of a good code review] (https://dev.to/maddy/the-traits-of-a-good-code-review-229j) some days ago. But this time I wanted to write something about the "opposite" side, the side of the person who opens the pull request and receives the feedback.

Some things that I've learned when opening a pull request are:

✅ The title of the pull request should convey a clear and concise message. It should answer the question: "What is this pull request about?".

✅ If you receive some comments, acknowledge and reply to all of them. Plus, if a change is suggested and you think it would be better to implement a modification, go for it. Otherwise, explain why you prefer to leave the code unmodified.

✅ Doing a thorough check before opening a pull request is also great practice: you might want to look for unnecessary imports and missing tests. In addition, ensure that commit messages are explanatory.

Overall the process of opening a pull request and performing a good review is an engaging process that opens opportunities for conversation and improvements.

Do you have any other tips to share?
DEV Protip: automatically format with keyboard shortcuts!
Tags: dev, meta
Published: 2021-08-14 09:18:49

I just realized that you can add some basic formatting using keyboard shortcuts in comments:

![cft](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3wwwbqqkfkol85ku079.gif)
<figcaption>Sorry for the random popup in the middle, just my computer reminding me to take a break</figcaption> 

I only found <kbd>⌥</kbd><kbd>⌘</kbd><kbd>i</kbd> for italic, <kbd>⌥</kbd><kbd>⌘</kbd><kbd>b</kbd> for bold, and <kbd>⌥</kbd><kbd>⌘</kbd><kbd>k</kbd> for links. And they only seem to work on comments. Maybe the DEV team might know more?
AI snake game with a* algorithm 🐍
Tags: ai, javascript, astar
Published: 2021-08-14 09:18:40

Hallo!

In this post, i want to share my old project (again) haha. It's about implementing a* (a star) algorithm on simple snake game web based using JS.

For you guys who don't know about what exactly a* algorithm used for, so here it is.

A Star is shortest route finder algorithm. Yup and of course, used for finding path from one point to other point.

> 🙍‍♂️: **"Hey, we already have a masterpice pytaghoras to deal with that, isn't it?"**

Ha, here's the thing. A* is more complex than that. It will gives you the shortest and the fast way considering all blocker and obstacle.

We can see a* is used by maps app to find route from your current place to your destination. We have the road as rule. We don't wanna break through the road, or climb neighbor house, or just walk straight no matter what. That's what we called obstacle.

Let's take a look on this video. This is how a* works.
{% youtube _shqwpySsx4 %}

In snake game that i made, the obstacle will be the edge area, and snake body itself. And the destination is, FOOD 🍎.

I wanna know, how accurate a* is. So i made comparison of me fight with my bot, playing snake. You know the result, i never can beat it 😣. Damn you my creation.

{% youtube G1ypERdE27U %}

#### Source Code 🎉
{% github mtegarsantosa/snake-astar no-readme %}
[Face Mask Detection - with Opencv, Keras, Python and Tensorflow

Published: 2021-08-14 08:45:00

Built it using Caffe based face detector model along with MobileNetV2 for fine tuning using transfer learning. The dataset was made custom using Bing search API, RMFD and Kaggle datasets of real "with_mask" images. Used Python script with Keras, and TensorFlow as the backend.

This idea came in my mind mainly due to the current situation of Covid-19. Will be presenting this idea for my final presentation of my college semester in mid-June.
😇 Motivation
In the present scenario due to Covid-19, there is no efficient face mask detection applications which are now in high demand for transportation means, densely populated areas, residential districts, large-scale manufacturers and other enterprises to ensure safety. Also, the absence of large datasets of ‘with_mask’ images has made this task more cumbersome and challenging.

If interested 📧 musasizifrancis@gmail.com




⚠️ TechStacks/framework used
OpenCV
Caffe-based face detector
Keras
TensorFlow
MobileNetV2
⭐ Features
Our face mask detector didn't use any morphed masked images dataset. The model is accurate, and since we used the MobileNetV2 architecture, it’s also computationally efficient and thus making it easier to deploy the model to embedded systems (Raspberry Pi, Google Coral, etc.).

This system can therefore be used in real-time applications which require face-mask detection for safety purposes due to the outbreak of Covid-19. This project can be integrated with embedded systems for application in airports, railway stations, offices, schools, and public places to ensure that public safety guidelines are followed.

📁 Dataset
The dataset used can be downloaded here - Click to Download

This dataset consists of 4095 images belonging to two classes:

with_mask: 2165 images
without_mask: 1930 images
The images used were real images of faces wearing masks. The images were collected from the following sources:

Bing Search API (See Python script)
Kaggle datasets
RMFD dataset (See here)
🔑 Prerequisites
All the dependencies and required libraries are included in the file requirements.txt See here

🚀  Installation
Clone the repo
$ git clone https://github.com/musasizifrancis/FaceMaskDetection-with-opencv.git
Change your directory to the cloned repo
$ cd Face-Mask-Detection
Create a Python virtual environment named 'test' and activate it
$ virtualenv test
$ source test/bin/activate
Now, run the following command in your Terminal/Command Prompt to install the libraries required
$ pip3 install -r requirements.txt
💡 Working
Open terminal. Go into the cloned project directory and type the following command:
$ python3 train_mask_detector.py --dataset dataset
To detect face masks in an image type the following command:
$ python3 detect_mask_image.py --image images/pic1.jpeg
To detect face masks in real-time video streams type the following command:
$ python3 detect_mask_video.py
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 19
Tags: php, javascript, webdev, tutorial
Published: 2021-08-14 08:43:54

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will create the login functionalities

{% youtube paMCmGfEJe4 %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Understand JSON Wire Protocol and W3C Standard Protocol in Selenium WebDriver
Tags: testing, testautomation, selenium, seleniumwebdriver
Published: 2021-08-14 08:39:15

**In short, [JSON Wire Protocol(JWP)](https://github.com/SeleniumHQ/selenium/wiki/JsonWireProtocol) is the old legacy protocol, and [W3C Standard Protocol](https://www.w3.org/TR/webdriver/) is the new one.**

That two protocols are used by [Selenium WebDriver](https://www.selenium.dev/documentation/webdriver/) to interact with browser drivers as below:

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

##What is happening

As browser vendors update to support W3C WebDriver protocol and shift away from JSON Wire Protocol (JWP), this can bring increased stability in your Selenium tests across different browsers.

Some browsers has stopped to support JWP in latest version, like Safari. And others may will do so in the future.

##What we should do

That means, we need to migrate our WebDriver tests to use w3c standards ASAP.

For BrowserStacks Selenium users, have a look this guide: https://www.browserstack.com/automate/selenium-4

For SourceLabs Selenium users, read this: https://docs.saucelabs.com/dev/w3c-webdriver-capabilities/index.html
React hooks: useState
Tags: react, hooks, tutorial
Published: 2021-08-14 08:35:52

## 1. Hook definition

A Hook is a special function that lets you “hook into” React features. 

## 2. useState hook

useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.

Hooks don’t work inside classes. But you can use them instead of writing classes.

## 3. Declaring state

For declaring the state we would call **useState** function which accepts initialState.

```jsx
import { useState } from "react"

function Counter() {
  // count -> state which initialized by "0"
  // setCount -> function that we can call if we want to change the state
  const [count, setCount] = useState(0);

	// inside of paranthesesis we can show the state
	return <div>{count}</div>
}
```

## 4. Updating state

For changing the value of the state, we can call setCount.

```jsx
import { useState } from "react"

function Counter() {
  // count -> state which initialized by "0"
  // setCount -> function that we can call if we want to change the state
  const [count, setCount] = useState(0);

	// inside of paranthesesis we can show the state
	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => { setCount(count + 1) }}>Increment Counter</button>
		</div>
	)
}
```