teleren/devto huggingface dataset:
Translate and read out loud the selection on your page
Published: 2022-05-04 11:31:54

**Update: at the bottom you'll find the Chrome extension**

In two previous posts I discovered two very accessible api's that you can use nowadays: 
1. a free translate google endpoint [here](https://dev.to/wimdenherder/free-translate-api-4256)
2. the speech api available in the browser [here](https://dev.to/wimdenherder/make-your-browser-talk-2f9l)

Let's combine these and create a script that reads out your selection in another language. Great for language learning!

Open up the developer console and copy paste the two functions from the previous posts:
```
function speak(text, language) {
  const synth = window.speechSynthesis;
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = synth
    .getVoices()
    .find(
      (voice) =>
        voice.lang.split("-")[0].toLowerCase() ===
        language.split("-")[0].toLowerCase()
    );
  synth.speak(utterance);
}

async function translate(text, source, target) {
  const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&hl=en-US&dt=qca&dt=t&dt=bd&dj=1&source=icon&sl=${source}&tl=${target}&q=${text}`);
  const json = await response.json();
  return json.sentences.map(x => x.trans).join(" ");
}
```

Now we should obtain the selected text on the page. I copied the next from [this stackoverflow post](https://stackoverflow.com/questions/5379120/get-the-highlighted-selected-text)

```
function getSelectionText() {
  var text = "";
  var activeEl = document.activeElement;
  var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
  if (
    activeElTagName == "textarea" ||
    (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
      typeof activeEl.selectionStart == "number")
  ) {
    text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
  } else if (window.getSelection) {
    text = window.getSelection().toString();
  }
  return text;
}
```

Now we can combine it into this function. We want to trigger the function everytime you select text on the page. We use the mouseup event and check if there is a selection. Change the targetLanguage below as you wish (See [list](http://www.lingoes.net/en/translator/langcode.htm) of codes here)

```
config = {
  targetLanguage: "es",
};

async function translateAndReadSelection(language) {
  const text = getSelectionText().replace(/\n+/g, " ");
  if (!text) return;
  const translated = await translate(text, "auto", language);
  console.log("reading the page contents in language " + language, translated);
  speak(translated, language);
}

document.onmouseup = () =>
translateAndReadSelection(config.targetLanguage);
```

Enjoy!

You can find the Chrome Extension and try it out here:
[Chrome Extension: Flippify](https://github.com/wimdenherder/Flippify-Translate-Chrome-Extension)
I've created a Gradle plugin that encrypts your source code and decrypts it in runtime
Tags: java, kotlin, gradle, showdev
Published: 2022-05-04 11:23:35

A Gradle plugin that allows you to encrypt your source code with AES PBE and decrypt it at runtime. Plugin supports resource encryption only.  
[Source code at github](https://github.com/raccoon1515/Source-crypt-gradle-plugin)
Save DynamoDB space by use lzutf8
Tags: dynamodb, aws, node
Published: 2022-05-04 11:03:00

Poor man guide for DynamoDB.

Since DynamoDB has some limitation on space and I want to use a basic data structure and keeps everything in a single document. I'm just a lazy guy, that's it.

So, the best option for me is compress by use [lzutf8](https://github.com/rotemdan/lzutf8.js) on some data that I don't use for search.

compress 

```js
compressedByteArray = lzutf8.compress(JSON.stringify(data), {
  outputEncoding: 'ByteArray',
}).toString()
```

decompress

```js
compressedByteArray = new Uint8Array(
  compressedStringFromDB.split(',').map(i => parseInt(i)), 
  {
    inputEncoding: 'ByteArray',
    outputEncoding: 'String',
  })
```

How many space I saved? You can try it on your own [here](https://rotemdan.github.io/lzutf8/demo/).

See ya.
HoverAssist v0.3
Published: 2022-05-04 11:02:31

# HoverAssist #
[{ Github Repo Url }](https://github.com/SaiSaaketh/HoverAssist)
## About Hover ##
The Github Link Below 👇
[{ Github Repo Url }](https://github.com/SaiSaaketh/HoverAssist)
HoverAssist Is a voice Assistant 👨‍🏭 Which help to to do tasks and Many things Easily Just With Your Voice
HoverAssist is Here To manage Your Tasks, Play Music 🎼 , Shutdown your System 💻,take screnshot 💻, Switch Windows, Searh Stuff on the Internet 🕸, Keep Your Device secure using secure cam while you are AFK 🔐 ,Automate Your Desktop 💻 As you like Just with your voice 🎙
Join Now Discord Hover Community:-https://discord.gg/G4g7CA8Es8
## Features ##
1. Hover Can Search The Web 🕸
2. Take ScreenShots 
3. Shutdown Your PC
4. Play Youtube Videos
5. Take Notes 📝📒
6. Switch Windows 💻
7. Keep Your Device Secure Usinng Secure Cam 
8. Open Youtube 🎞
9. Wikipedia 📔
10. Open Youtube
11. Open Stack Overflow
12. Open Camera 📷
## Features Going To be Added ##
- [ ] Open Any App Installed On your pc
- [ ] Open Any Websites 
- [ ] WikiHow searches 
- [ ] Google webscraping search results
- [ ] Android and IOS Support
# License And Copyrights #
*© HoverAssist is Licensed to SaiSaaketh Under MIT License*
[{ Github Repo Url }](https://github.com/SaiSaaketh/HoverAssist)
SETUP INTERCOM HELP OVER HTTPS WITH A CUSTOM DOMAIN
Published: 2022-05-04 10:50:31

A  year ago we setup a help center on hubspot which worked well but for some reason team decided to switch it over to Intercom. Everything was setup and we were only left with pointing subdomain to Intercom, I feel setting custom domain is very simple and explained clearly here (https://developers.intercom.com/installing-intercom/docs/set-up-your-custom-domain).

Pointing the custom domain to your intercom help page is pretty easy using a CNAME in your DNS record. The only thing which i found bit tricky is that by default it won’t work on https (that's not good).but this post will help you to get SSL with the help of AWS cloudFont.

Let's start
1. Login to your AWS account here( https://console.aws.amazon.com), you have to create in case you don't have.
2. Go to Cloudfront console (https://console.aws.amazon.com/cloudfront)
3. Click Create Distribution
4. Click **Get Started under Web**
5. Under Origin Settings > Origin Domain Name, enter Intercom host domain i.e. *custom.intercom.help*
6. Under Default Cache Behavior Settings > Viewer Protocol Policy , select **Redirect HTTP to HTTPS**
    Change **Cache and origin request settings** from
    *Use a cache policy and origin request policy*
     to
    *Use legacy cache settings*

    Change Cache Based on Select Headers to All

    Change Query String Forwarding and Caching to *Forward all, cache based on all* (to help with search)

7. It's time set up a certificate now. Click on **Request or Import a Certificate with ACM button** which will open a new tab to setup ACM.

8. Enter the domain name you’d like to use under add domain names. As we were using a subdomian, so we used help.dev.to, (You should have access to the DNS of this domain as you need to make some changes - like adding CNAME) If you have DNS access then you can do DNS validation, if not then email validation.


9. Click on Confirm and request
   After this, you will be able to see a record which you need to add as CNAME DNS records to your DNS system. Once dome click on verify and AWS will validate that.Once validated status will change to *In progress* to *Issued*

10. Coming back to Cloudfront console and select the **Custom SSL Certificate** which will show you custom SSL certificate that you just set up.select it.

11.Add your domain under Distribution Settings > Alternate Domain Names

12.Click on Create Distribution and wait for 10–15 minutes, On successfully creation, you will see statue as **Enabled** with a cloudfont url like **dxxxxxxxxxx.cloudfront.net**.copy this url as we need to setup this as CNAME

13.I am using DNSimple but adding cname is similar for all.


I am assuming that you have setup the custom domain before starting this but if not don't worry, it's much easier than setting up cloudfont.
Go to your Intercom Admin > Help Center and Settings. In the Custom help center domain enter the domain you choose i.e. help.dev.to
That's it. Now your domain (or subdomain) will be served over https
How to Upload Files Asynchronously in Blazor File Upload Component
Tags: blazor, webdev, dotnet, csharp
Published: 2022-05-04 10:57:24

Learn how easily you can upload files asynchronously in the [Blazor file upload component](https://www.syncfusion.com/blazor-components/blazor-file-upload) of Syncfusion. I will also show you how to enable chunk upload to split large files into small chunks and transfer them to the server using Ajax. Check how to upload all the files in the folder by enabling directory uploading and dropping files in the custom drop area to upload them. 

**Product Overview**: https://www.syncfusion.com/blazor-components/blazor-file-upload

**Refer to the following documentation to learn about Asynchronous Upload in Blazor File Upload component**: https://blazor.syncfusion.com/documentation/file-upload/async

**Refer to the following documentation to learn about Chunk Upload in Blazor File Upload component**: https://blazor.syncfusion.com/documentation/file-upload/chunk-upload

**Check out this online example of the Blazor File Upload component**:
https://blazor.syncfusion.com/demos/file-upload/chunk-upload

{% youtube nWgSc0QEIcc %}
Build Custom Validators with Laravel 5.5
Tags: laravel, laraveldevelopment, customervalidationrules, laravel5
Published: 2022-05-04 10:43:21

Laravel is one of the most prominent backend development framework offering rich features and functionalities that helps developers to build and develop projects with great ease and pace. Laravel possess some key features that makes it stand out in the web development market. Besides rich development assistance, Laravel is highly preferred for its security features as it offers various validation rules and security support. Laravel has truly emerged as one of the promising framework providing quality as well as secure solutions which are compatible to the current trends and changing customer needs.  

Laravel 5.5 possess rich set of validation rules as well as methods that helps in passing validators with ease in order to validate the user request and according return back the error or success message. Laravel has made its mark as one of the most secure solution developing framework and with the custom validation rules, it makes the developer's task much more easier as well as helps in developing assured high quality solutions. Laravel provides a easy way to set the validation rules and accordingly hook the rules in the custom class. With security and key development support, Laravel is highly preferred for the level of customization options it provides in the development process.

Development process of web or app solution involves the implementation of all the specified requirements as well as following the security measures in order to have secure and effective end results. In this type of development process, Laravel plays a vital role where Understanding the project requirements and simultaneously considering Security concerns becomes mandatory. So here is an article which would provide you with brief idea on the various custom validation rule while working with Laravel 5.5. This article will help you clear all your validation queries as well as will provide you with potential custom validators to use in your projects. Discover the full article : https://www.esparkinfo.com/blog/laravel-custom-validation-rules.html
11 easy steps to make your startup success
Tags: startup, success, steps, programming
Published: 2022-05-04 10:29:40


Most of the Startups/Products fail because they fail to make PROGRESS.

Here are **11 steps** that I have learned from the amazing book Rework by David Heinemeier(DHH) and Jason Fried.

1. Less is good
2. Build half a product, not half assed product
3. Start
4. Ignore the details early on
5. Decisions are progress
6. Be a curator
7. Throw less at the problem
8. Focus on constant.
9. Tone is in your fingers
10. You can’t make just one thing
11. Get it out there

You can read full article [on canopas blog](https://blog.canopas.com/11-easy-steps-to-make-your-startup-success-7fbba152108e).
How to: User post into feed
Tags: reactnative, firebase
Published: 2022-05-04 10:20:40

Hello guys,
I'm looking for better solution for my app.
For now it's working like that :
User can post everything from create post screen, when user press submit post button, the app send post details to firebase firestore to 2 collections:
1. Collection Users => Doc UserID => Collection Posts.
2. Collection feed => Doc Post ID with object that contain post details and user details to identify who the author.

In my opinion this is not a good solution but I can't user another data base.
Some one have another solution ? maybe some firebase cloud functions ( I'm really bad at claud functions ) ?
Q&A with Ex - FB Engineer offering free programming interview advice
Tags: programming, beginners
Published: 2022-05-04 10:04:21

Programming Interview Prep Q&A with an Ex-FB engineer (Me). I'm a self-taught engineer that frequently conducted interviews during my 4 years at Meta, from E3->E7 !

I'll be taking questions about interview prep from the audience.

From advice on how to best leverage leetcode, to handling recruiters, anything interview prep related is fair game.

(This will be recorded)

[Link to join is here!](https://discord.gg/c53cU8VH?event=968035137944178748)
Whatsapp Clone for Android & IOS using Flutter & Python - Part 2 (Complete Tutorial)
Tags: flutter, python, firebase, programming
Published: 2022-05-04 09:44:31


Hey fellas I am Yash Makan back with another article. Today we are going to continue our journey where you and I are going to create a complete whatsapp applicaion from scratch. Yup, from very start till the end. This is the part 2 of the series so If you have missed the part 1 then I will highly suggest you to check the [playlist](https://www.youtube.com/playlist?list=PLm8trMDxkTIlIJJqIHK12PiT36C8RpQCs) to understand better. If you don’t know about whatsapp application then basically it’s a social media messaging application where user can send messages to their friends & family. It also has features like video calling, status sharing and much more. And if you are thinking, are we going to develop all these features?? then the answer is yes my friend... Also If you are tired of reading and want me to get out of your mind then I’ve got a video covering all this just watch the youtube video below.

{% youtube v9f3w6Qf5O4 %}


## Source code

Source Code is Available in the description box below in the video. So do check it out...

## Subscribe For More

[![YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvjpg9zn6xfcdkfxhl0x.png)](https://www.youtube.com/channel/UCLO_mjF4nvD4wYnTYRlYXsA?sub_confirmation=1)

## Contact Me

Website: [yashmakan.co.in](http://yashmakan.co.in)

Twitter: [@Yash_Makan](https://twitter.com/Yash_Makan)

## Contribute

buymeacoffee: [@Here](https://www.buymeacoffee.com/yashmakan) 

## Other Interesting Articles

- [21 must-read books for kids, beginner, advanced & interview with PDF 🐍](https://dev.to/yash_makan/21-must-read-books-for-kids-begineer-advanced-interview-with-pdf-56c7)
- [Improve your workflow using Automation in Python](https://dev.to/yash_makan/everything-about-automation-in-python-pc-mobile-web-raspberry-pi-4cgh)
- [4 ways to create modern GUI in python in the easiest way possible](https://dev.to/yash_makan/4-ways-to-create-modern-gui-in-python-in-easiest-way-possible-5e0e)
- [4 Free hosting platforms for python web app with step-by-step process](https://dev.to/yash_makan/4-best-python-web-app-hosting-services-for-freewith-complete-process-57nb)
- [18 Python one-liners that will speed up your coding process.](https://dev.to/yash_makan/18-python-one-liners-that-will-speed-up-your-coding-process-21md)
- [AI bot that could answer your questions](https://dev.to/yash_makan/ai-bot-that-could-answer-any-questions-asked-gmn)
- [Generate your own favourite TV episode using python](https://dev.to/yash_makan/generate-your-own-favourite-tv-episode-using-python-1pb3)
Wednesday Links - Edition 2022-05-04
Tags: java, jvm, gradle, spring
Published: 2022-05-04 09:43:57

2022 State of the Java Ecosystem Report (5 min)📄
https://newrelic.com/resources/report/2022-state-of-java-ecosystem

The Importance of Validating the Gradle Wrapper (13 min)✅
https://jdvp.me/articles/Gradle-Wrapper-Validation

Splitting up your fast and slow tests in Gradle to receive faster feedback (4 min)⏩
https://jvwilge.github.io/en/2022/04/21/gradle-split-tests.html

Fine-tune Kafka performance with the Kafka optimization theorem (9 min)🔩
https://developers.redhat.com/articles/2022/05/03/fine-tune-kafka-performance-kafka-optimization-theorem

Custom JDK Flight Recorder Events (3 min)🛫
https://inside.java/2022/04/25/sip48/

Handling Manager Failures In Spring Batch (5 min)💥
https://arnoldgalovics.com/spring-batch-manager-failure/

On how Loom and Reactive coexist (1 min)🤝
https://twitter.com/nebhale/status/1518706290041655299

Ever wanted to rewrite a query in Spring Data JPA? (2 min)🖊️
https://spring.io/blog/2022/05/02/ever-wanted-to-rewrite-a-query-in-spring-data-jpa

Dockershim: The Historical Context (3 min)📜
https://kubernetes.io/blog/2022/05/03/dockershim-historical-context/
Canopas Podcast 5— Imperative vs Declarative Programming paradigms
Tags: programming, podcast, imperative, declarative
Published: 2022-05-04 09:40:04


This article is on our 5th episode of [Canopas](https://canopas.com/) Podcast — Imperative vs Declarative [Programming](https://blog.canopas.com/android-reactive-programming-with-coroutines-and-mvvm-74cd4117df3a).

**Keylines of the podcast**

1. What is Imperative programming?
2. What is Declarative programming?
3. Why does choice matter?
4. Examples of imperative and declarative programming.
5. Conclusion.

Often we come around the word “Programming paradigm”. What exactly is, the method you use for implementation. i.e. You’re directly using what is built already or you’re implementing something by yourself.

The below podcast will guide you on what is the difference between [imperative and declarative programming](https://blog.canopas.com/canopas-podcast-5-imperative-vs-declarative-programming-paradigms-61e59afa8895) and with which you should go.

The podcast episode is also available on [Spotify](https://open.spotify.com/episode/14T0dHVrzWx05jPxA6eVRy?si=d6a824ab50c04ae6&nd=1), [Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5odWJob3BwZXIuY29tLzFiNWM2ZWE1MjNlZmZlYjlkZjAyNjRkMmE3OTIxOGExLnJzcw/episode/aHR0cHM6Ly9odWJob3BwZXIuY29tL2VwaXNvZGUvNS1pbXBlcmF0aXZlLXByb2dyYW1taW5nLXZzLWRlY2xhcmF0aXZlLXByb2dyYW1taW5nLTE2NTE0OTk2MDY?sa=X&ved=0CAUQkfYCahcKEwjAyfmarcP3AhUAAAAAHQAAAAAQAQ), and [Amazon Music](https://music.amazon.com/podcasts/62405458-cf1a-4d67-956c-a765e5277602/episodes/9e41e6eb-a32e-4874-9b86-3bbf926f7f19/canopas-podcast-5---imperative-programming-vs-declarative-programming).
How to make Custom Observable, methods to use and operators in rxjs?
Tags: javascript, angular, webdev, beginners
Published: 2022-05-04 09:34:06

**To make custom observable ,you have to follow these steps:**

_Import observable from rxjs_
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8z61wjg863nba73z6xmd.png)
 
_
In your ts file declare const customObservable("you can use any other name")_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5vg7c5w9c8ny2v2i9m6.png)
 

You assign Observable.create in your variable, and as the name suggests it will create the observable.

**Observable.create method have observer as argument by default ,provided by angular**.And we use this observer to further call methods like next,error or complete.

**You must we wondering what does these methods do?**

Well there are three methods and these are their operation

- **next()**  - This method is used to emit new value.
- **error()** - This method handles your error 
                notification,if it's http request you get 
                this automatically .
- **complete()**-Your this method will run when your observable 
             will complete.

You can write any logic inside 'Observable.create' according to your requirement.

In the above, basically we have made a custom observable which have setInterval method ,It is doing nothing much but printing your values after incrementing it.

**Remember after making Observable you definitely will subscribe it that's how it works.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89fmjn0y3mbw7jco9717.png)

This is how i have subscribed my customObservable,you may notice I have used pipe and map why????


_So suppose you have a requirement where you have to transform your data before subscribing it how will you do that?_

**That pipe right there is the method we use for doing these operations and the map out there itself is a operator.**

## **What is Operator??**

**Operator are the constructs , which is used for transforming data of observables.**

Operators we are using here belongs to 'rxjs',You might want to search Rxjs Operators for complete understanding .

Every observable has pipe method ,with the help of which we perform operations as i mentioned earlier.

Now as you can see:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzhhar1qjlweucvu1y2p.png)

_Here it will first map every data and transform it to 'Round' :data instead of just data._

Simply that's how it works.

**Thankyou for reading ,Please like share **
I have finally installed NodeBB in docker.
Tags: docker, node, ruby, forum
Published: 2022-05-04 09:29:01

Hey everyone.
I have recently been looking for a good forum platform and came up with three options.

**NodeBB**
NodeJS and sockets based.
**Discourse**
Ruby and JS based.
**Forem**

Actually I'm checking on how to run the third, because I like it the most, but for now I've run NodeBB and it's been a pain.

Even in docker, because I had to map the linking to the database running in a parallel container manually.

Being familiar with Node JS still it wasn't easy)
Text Clustering using Deep Learning language models
Tags: deeplearning, machinelearning, clustering, nlp
Published: 2022-05-04 09:15:26

I had a ton of fun working on this small project, involving nlp, the most classic clustering algorithm of all (k-means), and a touch of deep learning.

It all started with the thought: what if... we could do X? How would we do it? What it would take to do it? "Doing it" involved a lot of research and learning on my part, on NLP but also on how to ship such big models to production and make them work reasonably fast.

Some of that experience I have [already written about](https://dev.to/cosimo/deploying-large-deep-learning-models-in-production-goe), but this new article just published today explains the more high-level view of what was done and how.

[https://kahoot.com/tech-blog/text-clustering-using-deep-learning-language-models/](https://kahoot.com/tech-blog/text-clustering-using-deep-learning-language-models/)