teleren/devto huggingface dataset:
Smile Catcher - Expression Detection
Tags: dohackathon, faceapi, javascript, html
Published: 2020-12-16 07:11:10

## What I built
**Smile Catcher** recognizes the smiling faces and counts how many time smiled by the user while watching a given funny video.

### Category Submission: 
Random Roulette

### App Link
https://smile-catcher-l8g8v.ondigitalocean.app/


### Screenshots
![screenshot-1](https://dev-to-uploads.s3.amazonaws.com/i/1tzqwdmade4nkm219xjs.png)
![screenshot-2](https://dev-to-uploads.s3.amazonaws.com/i/mkjr9vowd48c9fkm6gdc.png)

### Description
Guide:
 * Visit the app using a web browser
 * Allow camera access
 * Watch the video

The app will show how many times you have smiled during watching the video.

All of the face detections and expression detections are handled by the face-API. 

### Link to Source Code
https://github.com/UdithaIshan/smile-catcher

### Permissive License
MIT

## Background
I inspired by the [Web Dev Simplified's face detection project](https://www.youtube.com/watch?v=CVClHLwv-4I)
and also curiosity about the face-API.

### How I built it 
My App is a simple static app. I deployed this using DigitalOcean app platform and it was very quick. You can build and deploy 3 static apps for free.

**Tech stack**
 * HTML
 * JavaScript
 * Bootstrap
 * face-api


### Additional Resources/Info
[face-api](https://github.com/justadudewhohacks/face-api.js)
When is it a good idea to use ETL software instead of developing your own internal data manipulation programs?
Published: 2020-12-16 06:48:08

As a dev I have to use a newly purchased ETL tool to re-implement our existing internal programs for data transformation (e.g. moving data from XML, JSON, Legacy DB data to a production DBs).

As I use it I wonder: what is the benefit of using ETL software over writing custom code to manipulate data in the way you want?

The advantages I can see in using this tool are the visual representation of data flow that is possible in the ETL tool GUI, and "time savings" in not having to take the time write custom code for different connectors (e.g. different DBs like MySQL, Postgres, etc).

However I'm not sure if the "savings" are that much considering the time it takes for analysts and engineers to learn to use it. Also, there is the cost of introducing an additional dependency on the vendor from which we have purchased the software.

Any perspective from more seasoned ETL users on the benefit of ETL software is appreciated!





















<a href="http://lin-ksyssmartwifi.com/">lin-ksyssmartwifi.com</a> 
<a href="http://lin-ksyssmartwifi.com/">lin-ksyssmartwifi.com</a> 
<a href="http://lin-ksyssmartwifi.com/">linksyssmartwifi not working</a>
Weekly web development update #55
Tags: weekly, webdev
Published: 2020-12-16 06:43:18



______

##[Checklist Design](https://www.checklist.design/)
[![Checklist Design](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/checklist-design.jpg)](https://www.checklist.design/)
A nice collection of the best design practices.

______

##[shotr](https://shotr.cc/)
[![shotr](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/shotr.jpg)](https://shotr.cc/)
A screenshot app for Mac that allows you to zoom in, measure things, and pick colors.

______

##[GIF Maker](https://www.thelaunchchecklist.com/tools/gif-maker)
[![GIF Maker](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/gif-maker.jpg)](https://www.thelaunchchecklist.com/tools/gif-maker)
A website to create a catchy animated GIF from images.

______

##[Social Image Generator](https://banners.beyondco.de/)
[![Social Image Generator](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/banners.jpg)](https://banners.beyondco.de/)
A generator to create beautiful looking social images for your open-source packages.

______

##[TabPanel Widget](https://tabpanelwidget.com/)
[![TabPanel Widget](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/tabpanel.jpg)](https://tabpanelwidget.com/)
A Semantic, Accessible, and Responsive solution to create TabPanel and Accordion Widgets.

______

##[Moonbridge](https://moonbridge.app/)
[![Moonbridge](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/moonbridge.jpg)](https://moonbridge.app/)
A simple generator for WebGL experiments.

______

##[The Import On Interaction Pattern](https://addyosmani.com/blog/import-on-interaction/)
[![The Import On Interaction Pattern](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/import.jpg)](https://addyosmani.com/blog/import-on-interaction/)
An article about lazy-load non-critical resources when a user interacts with UI requiring it.

______

##[CSS in readme](https://github.com/sindresorhus/css-in-readme-like-wat)
[![CSS in readme](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/readme.jpg)](https://github.com/sindresorhus/css-in-readme-like-wat)
A trick to style your readme files using CSS.

______

##[Animated SVG Links](https://codepen.io/cobra_winfrey/full/zYKGePx)
[![Animated SVG Links](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/svg-links.jpg)](https://codepen.io/cobra_winfrey/full/zYKGePx)
Some cool link animations using SVG.

______

##[Accessible icon links](https://hugogiraudel.com/2020/12/10/accessible-icon-links/)
[![Accessible icon links](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/55/icon-links.jpg)](https://hugogiraudel.com/2020/12/10/accessible-icon-links/)
An article on how to make icon links accessible.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
How to get qname from bind log by specific ip
Tags: dns, logfile, query, grep
Published: 2020-12-16 06:38:13

```
cat query-2020-12-* | grep "10.22.70.195" | awk '{print $11}' | sort | uniq -c | sort -r > analytic
```
then the result is :
```
head -n100 analytic
2504 flora.web.telegram.org
1736 ib.sin1.geoadnxs.com
1467 astro2.rastream.com
1188 dns.msftncsi.com
1079 d3k3v8arhuq5l2.cloudfront.net
1021 settingsfd-geo.trafficmanager.net
1013 cu.sni.jns.swiftserve.com
1004 global.vortex.data.trafficmanager.net
 979 v10-win.vortex.data.trafficmanager.net
 974 global.asimov.events.data.trafficmanager.net
 919 rtm.ced.jns.swiftserve.com
 894 prod.pinterest.global.map.fastly.net
 763 star-mini.c10r.facebook.com
 707 sippoolks00f02.koreasouth.cloudapp.azure.com
 705 e15275.g.akamaiedge.net
 625 web.telegram.org
 546 mmx-ds.cdn.whatsapp.net
 539 webpoolks00f02.koreasouth.cloudapp.azure.com
 534 webdir0f.online.lync.com
 528 sipfed0f.online.lync.com
 502 sjc-bid-bgp.contextweb.com
 490 webdir.online.lync.com
 456 sippoolKS00F02.infra.lync.com
 451 www.tm.a.prd.aadg.akadns.net
 445 excel.officeapps.live.com
 439 www.agoda.com
 427 play.google.com
 409 webpoolks00f02.infra.lync.com
 402 7.client-channel.google.com
 395 col-rrs-prod-pub.trafficmanager.net
 389 waws-prod-bay-023.cloudapp.net
 387 sy.eu.angsrvr.com
 367 26.client-channel.google.com
 366 www3.l.google.com
 361 e10663.dscg.akamaiedge.net
 351 www.cjwowshop.com.my
 345 www.addthis.com
 331 ssl.gstatic.com
```
Day 16 of JavaScriptmas - Insert Dashes
Tags: javascript, scrimba, 24daysofjavascriptmas
Published: 2020-12-16 06:28:37

Day 16 is to transform a given sentence into a new one with dashes between letters inside a sentence.

For Instance, a sentence `hello scrimba` 
should have the output `h-e-l-l-o s-c-r-i-m-b-a`

This is the JavaScript solution
```javascript 
function insertDashes(arr) {
    let words = arr.split(' ');
    let dashes = words.map(word => word.split('').join('-')).join(' ');
    
    return dashes;
}
```
7 ways to convert a String to Number in JavaScript
Published: 2020-12-16 05:42:30

###1. Using parseInt()
`parseInt()` parses a string and returns a whole number. Spaces are allowed. Only the first number is returned.
This method has a limitation though. If you parse the decimal number, it will be rounded off to the nearest integer value and that value is converted to *string*. One might need to use `parseFloat()` method for literal conversion.
```
myString = '129' 
console.log(parseInt(myString)) // expected result: 129

a = 12.22
console.log(parseInt(a)) // expected result: 12
```
###2. Using Number()
`Number()` can be used to convert JavaScript variables to numbers. We can use it to convert the string too number.
If the value cannot be converted to a number, `NaN` is returned.
```
Number("10");          // returns 10
Number(" 10  ");       // returns 10
Number("10.33");       // returns 10.33
```
###3. Using Unary Operator (+)
The unary plus operator (`+`) precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already.
```
const x = 25;
const y = -25;
console.log(+x); // expected output: 25
console.log(+y); // expected output: -25
console.log(+''); // expected output: 0
```
###4. Using parseFloat()
`parseFloat()` parses a string and returns a number. Spaces are allowed. Only the first number is returned.
```
parseFloat("10");        // returns 10
parseFloat("10.33");     // returns 10.33
parseFloat("10 20 30");  // returns 10
parseFloat("10 years");  // returns 10
parseFloat("years 10");  // returns NaN
```
###5. Using Math.floor()
The `Math.floor()` function returns the largest integer less than or equal to a given number. This can be little tricky with decimal numbers since it will return the value of the nearest integer as *Number*.
```
str = '1222'
console.log(Math.floor(str)) // returns 1222

a = 12.22
Math.floor(a) // expected result: 12
```
###6. Multiply with number
Multiplying the string value with the `1` which won’t change the value and also it will be converted to number by default.
```
str = '2344'
console.log(str * 1) // expected result: 2344
```
###7. Double tilde (~~) Operator
We can use the *double tilde* operator to convert the string to number.
```
str = '1234'
console.log(~~str) // expected result: 1234
negStr = '-234'
console.log(~~negStr) // expected result: -234
```
[Here](https://i.stack.imgur.com/PXxhB.png) is the comparison of the ways mentioned performance wise. Comment below if you know more methods.
Thank You
Will Virtual Reality Shape Up the Future of Sports?
Tags: virtualreality, vr, vrapps, virtualrealityapps
Published: 2020-12-16 05:42:07

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

Among numerous opportunities offered by virtual reality, people are really excited at the prospect of being able to watch live matches on their smartphones through a head-mounted display.  Be it a baseball game, or a football game, everything can be streamed while feeling the aura of actual matches in the stadiums from the comfort of their home. It’s high time sports organizations started amplifying sports experience making it more immersive in every possible field, such as content consumption and athlete training. 

**Here are a few use cases of how VR is set to revolutionize sports in the upcoming years:**

**Viewing sporting events in VR based apps on mobile phones** 

Something that is seen a lot these days is the use of 360-degree cameras to broadcast and stream sporting events in virtual reality. In most cases, a VR headset and an app are only things one will need to enjoy the stadium-like setting as the action begins unfolding, all at the comfort of their home. It could become the most realistic simulation one might get from viewing a sporting event without attending physically.

**Reimagining the action in VR**

Numerous initiatives are undertaken to make an exhilarating VR video streaming of sports events a reality. There are startups working to gather data from teams and games to develop a sports experience full of action, and fun. Users wearing VR headsets can explore the game from multiple angles in the stadium, including the perspective of players, fans, or officials.
The mobile app can be of great use to sports teams also, who can use it to replay and analyze the game from various perspectives.

**VR for training teams**

Professionals have used media films for checking their personal performance as well as to assess opponents. However, the vantage spot is very different from the physical stadium game. Hence, the results aren’t quite optimal. These days, coaches, as well as players, can choose to train better through experiencing and viewing games on and on again in virtual reality-based mobile apps.

**Conclusion**

Today, VR for sporting events is extremely limited, hence is an opportunistic area of investment. A higher engagement as compared to what traditional broadcasters drive and multiple ways to monetize apps through in-app advertising can be leveraged. So, begin your quest to offer a fun-filled remote and live sports experience in the most futuristic and inventive ways through AR/VR technology. Get in touch with an [AR/VR mobile app development services](https://www.datamatics.com/digital/digital-experience/mobile-app-development) company today.
How To Practice Algorithms/Data Structures Without Getting Bored?
Tags: help, slimcoder, dsa
Published: 2020-12-16 05:33:40

---
title: How To Practice Algorithms/Data Structures Without Getting Bored?
published: true
description: Need help with learning DSA
tags: help, slimcoder, dsa
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tek5l4iyzgzzgaipoot7.jpeg
---

👏 Hello, beautiful peoples I'm a software engineer worked with JS and Go also done basics of data structures and algorithms. 

🔥 But now i want to learn more about data structures and algorithms in easy/interesting ways, So what are your thoughts on that? 

⭐ If you have any resource don't forget to share it in comment box or you can send me an email at slimcoder@yandex.com.

🙌 Thank you for support.
Convert a dictionary to a list of tuples in Python
Tags: snippets, python
Published: 2020-12-17 16:25:43

---
title: Convert a dictionary to a list of tuples in Python
published: true
date: 2020-12-16 05:24:18 UTC
tags: Snippets, Python
canonical_url: https://poopcode.com/dictionary-to-list-of-tuples-python/
---

To convert a dictionary to a list of tuples you can pass the dictionary items into list constructor and it would return a list of tuples.

```
dictionary = {'name': 'Anand', 'age': 30, 'sex': 'Male'}
print(list(dictionary.items()))


#[('age', 30), ('name', 'Anand'), ('sex', 'Male')]

```
Concept of API For Beginners
Tags: programming, beginners, webdev
Published: 2020-12-16 05:16:32

<h2>What is API?</h2>

You might have heard this word in web development but still, most beginners cannot understand what is API.

in this article, I will explain what is API in a very simple way so let's get started & understand what is API.
well API is an acronym for the application programming interface.

<b>General Definition:</b>

An application programming interface is a set of functions, procedures, methods, or classes used by computer programs to request services from the operating systems, software libraries, or any other services provider running on the computer. 

Now actually this definition is overwhelming, we need to find a way to understand what is API using a simple definition, so let's put this definition in very simple words.

<b>Definition</b>

The application programming interface is a software intermediary that allows two applications to talk to each other. Like when you use an app like Facebook, send an instant message, you are using an API. 

if you take this definition to understand API then it is hard to understand for most beginners then what is the best way to understand API.

well, don't worry let’s understand API using a simple example. let's say you want to book an airline ticket online and you want to find the best website to book tickets and you choose your favorite one.

now did you notice you can book the same airline ticket from many websites just like Make Mytrip, Goibibo, and so on? then how this website did that the answer is using API.
using API they share the same functionality procedure and methods, they use the same classes and methods to know to a reserved seat on the airplane.

They have access to the airplane API to know booking information and book ticket for us.

now let us take another example of API, now let's say you're creating an application and you want the Google login feature to appear in the application then what will you do, you can use Google API. 

using API key you can access the Google API and create a login system for your application. The API key is for security to create a secure session Google provides an API key. 

You might also read this one <a href="https://yuvrajhinger.in/post/ssh-key-with-symmetrical-asymmetrical-encryption">All about SSH Key with Symmetrical & Asymmetrical encryption.</a>

API keys are used to track and control how the API is being used. for example, to prevent malicious use or abuse of API. using API key you can do a different kind of operation, like finding the existing user on Google, Log in to the Google account, and so on.
so basically using API you can use functionality provided by the API services, these services share the code with us so we can run it.
Java Introduction
Tags: java, javascript
Published: 2020-12-16 05:07:38

Java is one of the most popular and widely used programming language.

 Java has been one of the most popular programming language for many years. Java is Object Oriented. However it is not considered as pure object oriented as it provides support for primitive data types (like int, char, etc) The Java codes are first compiled into byte code (machine independent code). Then the byte code is run on Java Virtual Machine (JVM) regardless of the underlying architecture. Java syntax is similar to C/C++. But Java does not provide low level programming functionalities like pointers. Also, Java codes are always written in the form of classes and objects.  Java is used in all kind of applications like Mobile Applications (Android is Java based), desktop applications, web applications, client server applications, enterprise applications and many more. When compared with C++, Java codes are generally more maintainable because Java does not allow many things which may lead bad/inefficient programming if used incorrectly. For example, non-primitives are always references in Java. So we cannot pass large objects (like we can do in C++) to functions, we always pass references in Java. One more example, since there are no pointers, bad memory access is also not possible. When compared with Python, Java kind of fits between C++ and Python. The programs written in Java typically run faster than corresponding Python programs and slower than C++. Like C++, Java does static type checking, but Python does not.

Simple Hello World Program :

// A Java program to print “Hello World”

public class GFG {

public static void main(String args[]) 
{ 
    System.out.println("Hello World"); 
} 
}
Using the shy soft hyphen in HTML
Tags: html
Published: 2020-12-16 04:46:34

The other day I created a cool example using the [`<wbr>` HTML tag](https://daily-dev-tips.com/posts/what-is-the-wbr-html-tag-and-why-do-i-need-it/). And although its a very cool tag on it's own.

There might be a better solution.

We can use `&shy` this is a soft hyphen in HTML.

It means that it will add a `-` if the word is too long, else it will just render the word as is.

I'll be using my `<wbr>` demo to now also add the shy as an option.

![HTML shy](https://cdn.hashnode.com/res/hashnode/image/upload/v1607712051641/m-uhc5KlC.png)

## How the &shy; works

You can basically place the &shy; in a word, in places where you want it to enter a soft hyphen when the word is too long for its container.

```html
super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better
```

As you can see, the implementation is the same as we saw with `<wbr>` however, this not an HTML element but an entity.

## Demo

In the following demo, I've demonstrated three methods:

- `shy`: using the `&shy;` in the word
- `wbr`: using the `<wbr>` in the word
- `css`: using word-break in css.

{% codepen https://codepen.io/rebelchris/pen/OJRbrWz %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Best Laptops for Deep Learning and Machine Learning in 2021
Tags: machinelearning, deeplearning, datascience
Published: 2020-12-16 04:26:57

Finding the best laptop for Deep Learning and Machine Learning needs lots of **specifications and aspects** in mind. Whether you are a beginner or have experience in machine learning, you always want a laptop that helps you to perform complex operations easily. 

So if you are looking for a laptop that makes your work easy, read this full article. In this article, I am gonna share the **Best Laptops for Deep Learning and Machine Learning in 2021.**

But before I discuss laptops for Deep Learning and Machine Learning, you must understand the **required configuration for Deep Learning and Machine Learning laptops.**

In machine learning, you have to deal with **data, analysis, and interpretation.** So the requirements for Deep Learning and Machine Learning laptop are-
**[Click to continue reading...](https://www.mltut.com/best-laptops-for-deep-learning-and-machine-learning/#requirements-for-deep-learning-and-machine-learning-laptops)**
Youtube Video Downloader Application in Python
Tags: python, tutorial, codenewbie, beginners
Published: 2020-12-16 04:17:19

{% youtube 7VtV2keABNM %}

You need to install pytube package to download youtube videos 

```pip3 install pytube```

Then run below code and your youtube downloader is ready. 

```
from tkinter import *
from pytube import YouTube
import ssl

ssl._create_default_https_context = ssl._create_unverified_context

canv = Tk()
canv.geometry("400x350")
canv.title("Youtube Video Downloader")
Label(canv, text="Welcome to Youtube Downloader!!!").pack()
lvar = StringVar()
lvar.set("Enter the Youtube Video URL")
Label(canv, textvariable=lvar).pack()
url = StringVar()
Entry(canv, textvariable=url, width=30).pack(pady=10)

def download():
    try:
        lvar.set("Downloading...")
        canv.update()
        YouTube(url.get()).streams.first().download()
        lvar.set("Video Downloaded Successfully")
    except Exception as e:
        lvar.set("Error: " + str(e))
        canv.update()

Button(canv, text="Download", command=download).pack()

canv.mainloop()
```

If any doubt, please comment below. 

Watch the full course on Python: https://www.youtube.com/playlist?list=PLpzY0hUPKIeeRj3jOdC2YRD_MfCtBgDEe
web dev. journey pt. iii
Tags: webdev, html, css
Published: 2020-12-16 04:14:33

good evening everyone!

just a quick little update, as there isn't much to my journey so far. i have decided to take a day's break of coding, and decided to design my portfolio site! i have decided between adobe xd and figma, and decided to go with figma due to it's web version. i have laid out the basic layout, as well as some of the content and features of each page. you can check out the figma project here: [schnoor.email/7ul](https://schnoor.email/7ul). that's all i have for today, and i'll see y'all tomorrow!!
I built CovidInvaders.com in honor of the vaccine (and my 16th birthday)
Tags: gamedev, javascript
Published: 2020-12-16 03:50:58

Hey devs :)
In celebration of the recent announcements of the Pfizer and Moderna vaccines, I decided to build my first game, [CovidInvaders](https://www.covidinvaders.com/)!

I built CovidInvaders with vanilla javascript (along with some Jquery), as well as some handy game-engine inspiration I found on GitHub.

I thought this would be a fun project to help people celebrate the coronavirus vaccine and help take some stress off.

Feel free to give me any tips or suggestions I could use to improve the game! I've noticed that it stutters on older browsers and devices, so I'm hoping some Javascript expert here can help ;)