teleren/devto huggingface dataset:
Why I let strangers control my lights and why you should too
Tags: javascript, webdev, python, programming
Published: 2021-01-07 15:04:38

The title photo features the website I built to let strangers annoy me. The website includes text to speech, YouTube audio playing, and even control of my lights. But why did I make it?

## Why did I make it?
Well like many projects, this one was started over pure boredom from being on a break from school.

I’d had the idea for a while to try and replicate the tts setup twitch streamers use sometimes, but I wanted something unique, so I also added light controls.

## Ok, that’s great and all, but how does it work?

The project actually has two parts, the tts part and the light control part.

### first, how do the lights work?

The light controls are incredibly simple, I use LIFX http api to toggle the lights. 

Below is a simple fetch api request to toggle some lights using default parameters, just replace YOUR-APP-TOKEN with the token lifx gives you.
{% gist https://gist.github.com/nobody5050/f13cb013e36eef058ef7d11a6ef8ad6e %}

### So how does the text to speech work?

This is where the project gets considerably more complex. Fist up, discord webhooks.

When I was building the project I needed a way to store messages in a log, so I could read them if I’d been away from my loudspeaker or if it had turned off for some reason. The best one I can come up with is a discord webhook, it’s great because it acts as an intermediary between the site and my servers, as well as being completely free.

So how do you connect with it?

Below is the actual code I use for handling discord messages, including my webhook url

{% gist https://gist.github.com/nobody5050/59b6ddee5f586a0bd5defb9fdd06d645 %}

I opted to use xmlhttprequest here, since I’m more familiar with it, but you could use fetch as well.

The basic concept is this, it takes in text from a textbox element when the function sendMessage is called, then it sends that test as a request to whatever webhook url you specify. 

### Next up on the train, discord bots!

For handling the text to speech I use a python discord bot and the [pyttsx3 library](https://pypi.org/project/pyttsx3/)

I won’t show the code for this since it’s ugly and I don’t want people replicating it, but basically it watches for new messages in a discord channel, and then plays their contents through the pyttsx3 library using default parameters. I also run all requests through the [googletrans python library](https://pypi.org/project/googletrans/) to ensure that I hear all messages in my native tongue. 

## So why should you make it yourself?

Well I’ve been asked a fair bit by the people on my subreddit [r/theannoyingmachine](https://reddit.com/r/theannoyingmachine) why I would build this, all I can say is that it’s more fun than it seems like! 

If you’re interest in learning about api’s, webdevelopment, and python all in one project, you should do this one!

Thanks for reading my post!

The website featured in the post is https://nobody5050.GitHub.io/annoy
🛡Auth0 Marketplace: Add Identity Proofing to Your Applications
Tags: security, identity, auth0
Published: 2021-01-07 15:03:44

🖥 How to leverage Identity Proofing to increase trust in your applications.
[Read more...](https://auth0.com/blog/auth0-marketplace-identity-proofing/?utm_source=content_synd&utm_medium=sc&utm_campaign=identity_proofing)
Cartoonate: Part 3 (Creating UI)
Tags: dohackathon, ai, flutter, webdev
Published: 2021-01-07 14:48:05

I decided to start by creating the UI and populating it with placeholder items to see how it looks before moving on to other things. I created # screens, a home screen, social media screen and and about page.

Home Screen:This is the page that asks users to input the image they want to convert to cartoon and video

Social Media: The page that shows what others have been able to create with the app.

about/profile: This page would give details about the app or show the user profile. I haven't decided what to do with this page for now.

a logout button was also added although it isn't functional yet.

The most difficult aspect for getting the bottom navigation animation to behave the way I wanted it to behave, thankfully, i found a [package](https://pub.dev/packages/persistent_bottom_nav_bar) that does that, so i played with the code in the package a bit until i got the behaviour i wanted.

Here is the dart code that handles the animation and bottom navigation bar:

![Screenshot 2021-01-07 at 15.44.09](https://dev-to-uploads.s3.amazonaws.com/i/auxarua13uflttd0jon8.png)

During testing, I made use of google Chrome as the test environment, final behaviour:

![ezgif.com-gif-maker](https://dev-to-uploads.s3.amazonaws.com/i/404ea9mvlwcrevi3wime.gif)
Ansible Yönetim Eklentisi
Tags: linux, ansible, limanmys, github
Published: 2021-01-07 14:44:21


Eklenti Liman MYS üzerinden ansible platformunu yönetmenizi sağlamaktadır. 

### **Kurulum**

Kurulum için Liman MYS üzerinden sunucunuza eklentiyi ekleyip "Paketleri depodan kur." butonunu kullanmanız yeterlidir.

![Paket İndirme Ekranı](https://dev-to-uploads.s3.amazonaws.com/i/ynhoqk41wi20n8vf2xwr.png)
**Resim 1 :** Paket İndirme Ekranı

Kurulacak olan paketler ;

- ansible
- sshpass
- unzip

### **Açılış Ekranı**

Eklentinin açılış ekranın da ansible hakkında genel bilgiler verilmektedir.

![Anasayfa](https://dev-to-uploads.s3.amazonaws.com/i/ww8wdhujga3h2ujm9xn4.png)
**Resim 2 :** Anasayfa

### **Host Ekranı**
Bu kısımda grup ekleme işlemini yapabilmektesiniz. 

![Grup Ekleme](https://dev-to-uploads.s3.amazonaws.com/i/pqnat52ymbh56nyabsxa.png)
**Resim 3 :** Grup Ekleme

Grup içerisine client ekleyebilmektesiniz. Client eklerken ssh password veya ssh key ile ekleme yapabilmektesiniz. Client silme ve grup silme işlemleri de mevcuttur.

![Client Ekleme](https://dev-to-uploads.s3.amazonaws.com/i/9rcn0mgpfl52q3oifpw8.png)
**Resim 4 :** Client Ekleme

![Ssh Key Ekleme](https://dev-to-uploads.s3.amazonaws.com/i/m44s4b7f6g724vl0h2xw.png)
**Resim 5 :** Ssh Key Ekleme

### **Dosyalar**

Bu kısım dosya arşivi görevi görmektedir. Zip, tar veya tar.gz formatında dosyalarınızı yükleyebilmektesiniz.

![Dosya Yükleme](https://dev-to-uploads.s3.amazonaws.com/i/778yqr7472fbuueumkiz.png)
**Resim 6 :** Dosya Yükleme

Dosyalarınız tree formatında gözükmektedir. İstediğiniz zaman görüntüleyip düzenleyebilmektesiniz. 

![Dosya Görünümü](https://dev-to-uploads.s3.amazonaws.com/i/jgdihzvxoz1xq0jpyhe4.png)
**Resim 7 :** Dosya Görünümü

### **Playbook**

Playbook dosyası oluşturup çalıştırma işlemini bu kısımda yapmaktasınız. Dosya oluştur butonu ile dosya adını ve içeriğini girip playbook oluşturabilmektesiniz. Dosyanızı görüntüleyip güncelleyebilirsiniz.

![Playbook Oluştur](https://dev-to-uploads.s3.amazonaws.com/i/hi6n8fojenarbxh77l6s.png)
**Resim 8 :** Playbook Oluştur

Oluşturduğunuz playbook'a sağ tık ile çalıştır diyerek grup seçmektesiniz. Ardından playbook client makinelerde çalışmaya başlamaktadır. Playbook çıktısını log olarak isteğe bağlı şekilde kaydedebilirsiniz.

![Grup Seçimi](https://dev-to-uploads.s3.amazonaws.com/i/hyifxe1egjnwviwzukcv.png)
**Resim 9 :** Grup Seçimi

![Playbook Çıktısı](https://dev-to-uploads.s3.amazonaws.com/i/oosxffcnj5dlc87an70i.png)
**Resim 10 :** Playbook Çıktısı

![Log Kaydetme](https://dev-to-uploads.s3.amazonaws.com/i/26dzszbhp0attg5fkeri.png)
**Resim 11 :** Log Kaydetme

### **Loglar**

Kaydedilen loglar bu kısımda listelenmektedir. Log'a sağ tık yaparak görüntüleme işlemi gerçekleştirilmektedir.

![Log Görüntüleme](https://dev-to-uploads.s3.amazonaws.com/i/ad7n6852og6xjbgzajei.png)
**Resim 12 :** Log Görüntüleme

Eklenti 6 Ocak 2021 tarihinde açık kaynak olarak sunulmuştur. Aşağıdaki linkten kaynak kodlarına erişebilirsiniz.

https://github.com/limanmys/liman-ansible
Download Instagram Mockup 2021
Tags: ios, android, mobile
Published: 2021-01-07 14:42:21

Instagram’s making major design changes to its home screen for the first time in years and we are prepared instagram mockup for this changes. Today, the company announced that it’s adding Reels and Shop tabs to its home screen, a communication of the company’s priorities. The Reels tab will, of course, lead users to Reels, shortform videos similar to TikTok. The Shop tab will surface personalized recommendations, editors’ picks curated by the shop channel, shoppable videos, and new product collections. Both tabs make it easier for people to find what they want on the platform and go there immediately. Instagram mockup 2021 is a biggest mockup of instagram ever made. We tried to make all the screens necessary for the designer.

[Download Instagram Mockup 2021](https://code.market/product/instagram-mockup-2021-download/)

##Instagram Brand Profile Mockup##
![Instagram Brand Profile Mockup](https://dev-to-uploads.s3.amazonaws.com/i/99sv3divdjcl7a6yx138.png)

##Instagram IGTV Mockup##
![Instagram IGTV Mockup](https://dev-to-uploads.s3.amazonaws.com/i/w515c8v1w1rv9cs797d6.png)

##Instagram Post Feed Mockup##
![Instagram Post Feed Mockup](https://dev-to-uploads.s3.amazonaws.com/i/wtgk6wwnbj62m25ck3lm.png)

##Instagram Reels Mockup##
![Instagram Reels Mockup](https://dev-to-uploads.s3.amazonaws.com/i/topzzwo1y9mmogg2l8wm.png)

##Instagram Other Screens Mockup##
![Instagram Other Screens Mockup](https://dev-to-uploads.s3.amazonaws.com/i/xjmcjkydep0kocw8zkf5.png)

##Instagram Shop Mockup##
![Instagram Shop Mockup](https://dev-to-uploads.s3.amazonaws.com/i/e9prekcc1jupbp5uot7m.png)

##Instagram Stories Mockup##
![Instagram Stories Mockup](https://dev-to-uploads.s3.amazonaws.com/i/k01hv6pq0td7m8im6ym8.png)

##Instagram User Profile Mockup##
![Instagram User Profile Mockup](https://dev-to-uploads.s3.amazonaws.com/i/f4tdlo0w75nuq8t549sf.png)


##What contains in the files?##
* Instagram Feed Screens;
* Instagram Shop Screens;
* Instagram Reels Screens;
* Instagram IGTV Screens;
* Instagram Gallery Page;
* Show gallery screen;
* Instagram post mockup;
* Feed Screen with Shop UI;
* Instagram profile template Screen;
* Simple Stories Screen;
* Instagram Storie’s template;
* Instagram ad mockup with Advertising fill button;
* Instagram ad mockup with Advertising underline button;
* Feed with photo gallery;

##What’s inside Instagram Mockup package?##
* PSD package: 33 PSD files – resolution 1126px – 2562px;
* Sketch package: 1 sketch file;
* Figma package: 1 Figma file;
* The Bundle: 33psd files + 1 sketch file + 1 Figma file.

##License##
* Fonts not included in the package
* SF Pro Display – download here
* Instagram Logo not included in the package
* Re-distribute only via the backlink link.
Using JS source-maps in production
Tags: javascript, webpack
Published: 2021-01-07 14:38:46

Production code before ships goes through a bunch of preparation steps. Code becomes nonhuman friendly. Read and debug transpired, minified and uglified JS code is very hard and sometimes impossible.  
	
To keep code readable build tools adds source-maps files. Devtools lookup for the 
```
//# sourceMappingURL=bundle.js.map
```
in the end of each bundle and uses it to set traces between minified code and sources.  

Leaving source-maps files reference and files itself in prod env is dangerous. Your source code could be stolen and this doesn’t lead to any props. 

Build tools like [webpack](https://webpack.js.org/) support options to handle this issue. You could use one of the options `hidden-source-map` or `nosources-source-map`. 
	
`hidden-source-map` option generates regular source maps but doesn’t include reference in the JS file to it. Please avoid publishing these map files. 
	
`nosources-source-map` generates maps without sourceContent but exposes filenames and structure. These sources could be deployed to the webserver.
	
### Working with production source maps
#### Using chrome dev tools to add source maps to the prod code. 

To see sources for the code in prod env you code add source maps manually.
 1. Checkout to the actual prod state commit. And run prod build with source-maps flag on.
 2. Go to the sources tab in the dev tools.
 3. Select bundle file. And set the related source map file in the context menu by “Add source map…”.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mpum5vrroj5kreqzmmks.png)

This solution is very helpful if you are looking for a quick way to see original sources of the code without any build pipeline changes.

#### Upload source-maps to the server available only via VPN connection.

Storing source-maps for the build on the server available only via VPN connection will not expose your code to the world and will let you debug it properly. Another positive thing here is that source-maps files fetches by browser only when devtools opened for the page, this means there has no performance impact in that case. 

### Debug/report tools that support hidden source maps.
	
Some tools analytic and error catching tools like [sentry](https://sentry.io/) and [datadog](https://www.datadoghq.com/) has their own CI solutions for hidden source-maps upload that could be integrated with your pipeline.

### Conclusion
Hidden source maps is a great thing that unveils a treasure of the safe debug in the production environment. If you didn't use it before try it. Possibly it could save a lot of time while you figuring out the reason for the production issue.
Day 14 of 100DaysofCode: Finding Numerical Data And Summing Them
Tags: 100daysofcode, codenewbie, beginners, python
Published: 2021-01-07 14:28:34

Today is my 14th day of #100DayaofCode. Today I worked in some assignment on python to access web data in [coursera.](https://www.coursera.org/learn/python-network-data/gradedLti/mEdBo/extracting-data-with-regular-expressions)
 
Also I learned more properties of CSS including introduction to the applied accessibility challenges, add a text alternative to images for visually impaired accessibility, use heading to show hierarchical relationships of content, jump straight to the content using the main element etc form [Freecodecamp.](https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/add-an-accessible-date-picker) 

# Finding Numerical Data From File And Summing Them
At first we start with importing regular expression as re, operator and reduce. 
```python
import re
import operator
from functools import reduce
```
I opened the file and read through each lines. I make a list whose name is total. Then I star looping and remove whitespace with `rstrip()`. In words I applied re.findall method which include any digit in the line. If line does not contain numbers then it skip that line and continue and my program is given below. num includes all the numbers from words. I kept in total's list.
```python
fh=open('file2.txt').readlines()
total=[]
#print(fh)
for line in fh:
    line=line.rstrip()
    words=re.findall('[0-9]+',line)
    #print(words)
    if len(words) == 0: continue
    num= [int(i) for i in words]
    total.extend(num)

print(total)
summ= lambda total: reduce(operator.add, total)
print(summ(total))

```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 14 of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* More Properties of CSS including introduction to the applied accessibility challenges<br>* Python to access web data from coursera<br>* Finding numerical data and summing them <a href="https://t.co/d5wnTEt6XL">pic.twitter.com/d5wnTEt6XL</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1347181476190826497?ref_src=twsrc%5Etfw">January 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Lighthouse and Integrating with Netlify
Tags: netlify, pipelines, devops, webdev
Published: 2021-01-07 14:27:48

Lighthouse is an open-source auditing tool created by Google that allows you to determine the quality of webpages for performance, accessibility, PWAs and SEO.

Did you know that you can run a Lighthouse audit straight from the Chrome Dev Tools? Go to any webpage, open the Dev Tools, click on the Lighthouse tab and run an audit. 

As web developers, knowing the quality of webpages allows us to determine areas of improvement, especially in areas such as accessibility and performance. 

Running manual audits should not be something we get in the habit of doing. As developers, we should automate this task. And, instead of setting up a pipeline (if you don't have one already) for this task specifically, we can utilize Netlify's Lighthouse plugin to get the results with each triggered build.

Let me show you how!


> NOTE: Lighthouse would be best used in a preexisting pipeline (GitHub Actions makes this easy), but this tutorial will primarily focus on installing Lighthouse in applications deployed with Netlify.


### Setting up Lighthouse with Netlify

First, head to https://app.netlify.com/ and click on your site. 
Once on your site dashboard, click on the 'Plugins' option in the top navbar. 

![Screen Shot 2020-12-27 at 10.09.47 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609128622356/C2Fy_uocp.png)

If you don't already have plugins installed, you'll see an empty list. Click on the green 'Go to plugins directory' button and search for the 'Lighthouse' plugin. Install the plugin and head to the 'Deploys' page. Trigger a manual deploy and watch the logs. 

![Screen Shot 2020-12-27 at 10.12.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609128789421/LxSF_26oX.png)

After the site is built, near the end of the logs, the results of the audit will be posted in the following format:

![Screen Shot 2020-12-27 at 10.15.59 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609129039333/OnM-uIJm0.png)

### Conclusion

There we go! With just a few clicks, we integrated Lighthouse in our Netlify-powered site. Great job! 

If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/) , subscribe to my newsletter and make sure to follow me on  [Twitter](https://twitter.com/BraydonCoyer)!
What are the Future Technologies counting On Python?
Tags: python, programming, devops, startup
Published: 2021-01-07 14:20:35

Nowadays, the most learning language is Python programming language and most demanding. The developers have craze now to learn Python worldwide, and businesses and startups are [hire python developer](https://www.bacancytechnology.com/hire-python-developer) more and more. For game development, application development, web development, system administration, Python is widely adopted. 

Many people always asked,

**What are the future technologies?**
**Why Python is the most demanding language?**
**Why do developers love to learn Python?**

The core answer to all the questions is Python. Yes, all the future technologies rely on Python; that's why developers love to learn Python; it becomes the most trending programming language because it is the core language. 

Let's look at the technologies that use Python for research as a core element and next developments.

#Artificial Intelligence (AI)

There are plenty of python frameworks, tools, and libraries developed, especially for different development goals to decrease human efforts with boosted efficiency and accuracy to direct Artificial Intelligence.

Under several Artificial Intelligence branches, exceptional of the python tools and libraries we have given here,

**General AI**- SimpleAI, EasyAI, pyDatalog, AIMA, etc.

**Machine Learning** - PyML, MDP Toolkit, scikit-learn, MIPy, GraphLab, PyBrain etc. 

**Neural Languages and Text Processing** - NLTK, Quepy, gensim

**Neural Networks** - pyrenn, ffnet, PyAnn, neurolab etc. 

#Big Data:

Python supported big data technology raise so that the Python programming language's future can be predicted by it. Through its high-performance toolkits and libraries in analyzing many data, sets Python has successfully contributed across computers and handled other big data issues. 

For data analysis and other big data handling issues, let's have a quick overview of the python toolkits and libraries used,

Scikit-Learn
Pandas
SciPy
IPython
GraphLab Create
NumPy
Bokeh
Agate
Dask
PySpark

#Networking

In the future, another field is Networking in that Python has a brighter scope. In a secure manner and cost-effective, Python programming language is used to write, read, and configure switches and routers and perform other automation tasks in networking.

For network automation by network engineers, let have a look at  listed some python tools and libraries primarily used,

Junos PyEZ
Netmiko
PySNMP
Ansible
Pyeapi
Paramiko SSH
Network Automation and Programmability Abstraction Layer with Multivendor Support (NAPALM)
if on the command line
Tags: linux, shell, bash
Published: 2021-01-07 14:10:48

Hello guys, today I will leave a quick tip on how to make comparisons on the Linux command line using Shell Script.

Examples:

```bash
[ 1 == 1 ] && echo 1 || echo 0
```

Result is 1

```bash
[ 1 == 3 ] && echo 1 || echo 0
```

Result is 0
Top 7 React-Native Packages To Look Up In 2021
Tags: reactnative, javascript, programming, react
Published: 2021-01-07 13:38:29

__1. react-native-qrcode-scanner__

All modern and quality mobile apps prefer the feature of QR code scanning in their mobile apps, you can use this feature in your React-Native easily using this package to add the functionality of scanning QR code.

To Install:

npm i react-native-qrcode-scanner

__2. react-native-immediate-phone-call__

This package is quite handy if you want to add a feature of initiating an immediate phone call feature without any further steps in your apps.

To Install:

npm i react-native-immediate-phone-call

__3. react-native-colour-matrix-image-filters__

You do basic image greyscaling using this package in your apps. Each filter supports all the view props and if you need to combine several filters it is more performant than the corresponding stack of filter components.

To install:

npm i react-native-color-matrix-image-filters

__4. react-native-customized-image-picker__

A pretty good package for adding the picker feature in your apps comes with various other different features like cropping the image while selecting it. Supports camera, video compression & multiple images.

To install:

npm i react-native-customized-image-picker

__5. react-native-websocket__

A WebSocket API wrapped as a component for React Native, the component simply wraps the native WebSocket API, also if you are using this package in production it is recommended to implement your own exponential backoff.

To install:

npm i react-native-websocket

__6. expo-document-picker__

Provides access to the system UI for selecting documents from the available provides on the user's device.
To install:

npm i expo-document-pickernpm i expo-document-picker

__7. react-native-fingerprint-scanner__

Working with cross-platform device comes with many challenges and the right packages can help you a lot, this package can be handy for adding fingerprint feature in you React-Native app and work on both (Android & iOS) pretty well.

To install:

npm i expo-document-picker