teleren/devto huggingface dataset:
My first Chrome Extension
Tags: google, html, javascript, vanilla
Published: 2022-04-25 16:19:07

It was a hot summer weekend. I planned to do something creative, I decided to make a Chrome extension. Quickly googled down the documentation [here](https://developer.chrome.com/docs/extensions/mv3/getstarted/). Created a manifest JSON, and linked it with my browser. Wow that was it. It was simple. Just create an HTML file link it to the manifest and that will act like an extension!

Quickly created a TODO app in plain Javascript, and boom, it was working as expected.

To publish it, I followed the instruction, paid to Google Developer for the account, and published it. It took 2 days for review process, but now it was on the web store.

This was one of the successful mini project launched by me. 

Yeah, sometimes mini projects give you the kick you want to get inspired and stay motivated. Hope will continue to post updates. 

Have made it open source, here is the git repo[](https://github.com/yashdatir/Todo-Chrome-Extension)

Also do add the extension here[](https://chrome.google.com/webstore/detail/todotemp-storage/ojmfahnmghjdcoankedaepjpoedelgge), also support if you like the work, and to keep me motivated.
Coding journey Begins here
Tags: beginners, mentalhealth, career, portfolio
Published: 2022-04-25 16:15:36

It starts with just hello world!
Then you sit with your first code, and something doesn't work. You sit there for hours. If you are lucky, you can make it work in minutes, or debugging is your full-time job.
I wanted to be a developer. And I want to be in the top 1% of it. But I am  Gen Z,  born when insecurity and self-doubts were humping on their best day. Sorry, mom and dad. It's nothing about you! 
So I decide I want to be the best at coding. I want to give dedicated time to it daily. 2 hours maybe! I want to commit at least 10 requests on GitHub daily for the next 6 months. And the journey begins.
I did some online courses, But still, I am not good enough. As a developer, I am only good at copying and pasting code from one place to another, and nothing more than that; this was my self-talk.
But for the first time in my life, I was enjoying the process of debugging most of my stupid mistakes. I was enjoying it to my knuckles and bones.

Then came the perfectionist monster from my brain, pushing me into the valley of darkness. And to be honest, my brain loves living there in the perfect world. I wasn't finishing my portfolio project, a stepping stone if you want to apply for jobs. Not because I can't do it, but because it will be all real. And I am the imposter who's not good enough.
But I want to finish that portfolio. I want to make a list of projects that I can put on it, and I want to apply for zestful jobs that will give me the thrill of jumping through airplanes. 
I am giving myself a timeline here. In the next 2 days, I want to create the final version of the portfolio that I can put on my resume. And I will be documenting this with Dev Community here weekly.
The gist of a good programmer is to create enough distance between you and your brain. To make the best products. And I want to learn how to do that.
How to store coordinates in MySQL
Tags: database, mysql, webdev, programming
Published: 2022-04-25 16:05:00

Many times we [capture the geo-location](https://blog.bibekkakati.me/track-users-location-on-your-website) of users and store in the database for different use cases.
I have seen that most of the developers use multiple fields to store the latitude and longitude separately like
`Table_name(field1, field2, ..., latitude, longitude)`.

In this short article we will see an alternative way of storing coordinates in MySQL database using the spatial data types like `POINT`.

### Create a table

- Let us create a table named `locations`.
- Field `coordinates` of data type `POINT`.

```sql
CREATE TABLE locations (
      id INT(11) NOT NULL AUTO_INCREMENT,
      coordinates POINT,
      PRIMARY KEY (id)
);
``` 

### Insertion of coordinates
- To insert/update the field `coordinates`, we need to prepare a string like this
`'POINT(latitude longitude)'`.
- Then we will use the in-built function called `ST_GeomFromText` to create a geometry in given SRID from [WKT specification](https://dev.mysql.com/doc/refman/8.0/en/gis-wkt-functions.html).
- Pass the prepared string of points into `ST_GeomFromText` function.

```sql
INSERT INTO 
     locations (coordinates) 
VALUES 
     (ST_GeomFromText('POINT(21.67890 91.54789)');
```
Table will store and display the data in the following way

```
id        coordinates
1         POINT(21.67890 91.54789)
```
---

> Originally published on [blog.bibekkakati.me](https://blog.bibekkakati.me/how-to-store-coordinates-in-mysql)

---

Also, check [this](https://blog.bibekkakati.me/track-users-location-on-your-website) out to know how to capture user's geo-location in web browser.


Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

[Twitter](https://twitter.com/kakatibibek) | [Instagram](https://instagram.com/bibekkakati) | [LinkedIn](https://linkedin.com/in/bibekkakati)

---

If you like my work and want to support it, you can do it here. I will really appreciate it.

<a href="https://www.buymeacoffee.com/bibekkakati" target="_blank">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=bibekkakati&button_colour=FF5F5F&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00">
</a>
Cryptocurrency Exchange Website Development
Tags: blockchain, webdev, startup
Published: 2022-04-25 16:04:31

In this article, we'll tell you what Cryptocurrency Exchange Website Development is, and the features of it.

## How to Create Your Own Cryptocurrency Exchange?
Trading digital assets are becoming more and more popular every day. Nowadays, cryptocurrencies are no longer something exotic. Many companies freely accept them as a means of payment. In addition, investments in digital assets can bring significant returns. Trading on a cryptocurrency exchange can be much more profitable than on traditional financial platforms.
All this contributes to the rapid development of the business associated with the exchange of digital assets. Now is the best time to take advantage of the situation and open your own cryptocurrency exchange. 

### Step-By-Step Instructions for Creating a Crypto Exchange
To open a cryptocurrency exchange, you need to solve quite a few tasks. The most important of them are the following:
•	Obtaining a license and other legal aspects.
•	Search for investments for doing business.
•	Connecting to a liquidity provider.
•	Selection of payment processing.
•	Providing protection against hacker attacks.
•	Beta testing of the trading platform.


## What Is Cryptocurrency Exchange Website Development?
[Cryptocurrency Exchange Website Development](https://dev.to/tarateller1992/cryptocurrency-exchange-development-company-4737) to build your desired cryptocurrency exchange web. Share your dreamy crypto projects with cryptocurrency experts who start work on crypto exchange with the latest technology stack and result-driven business solutions. The robust cryptocurrency exchange script will provide an opportunity to make a business using blockchain technology. With a High-quality interface, high level of security, and great performance. Companies have ready-made solutions that will allow you to run your own exchange business in the shortest time. Their script has a professional design and a high level of security.


### Features of Crypto Exchange Website Development
•	Secure cryptocurrency transaction
•	Premium UI/UX
•	Robust admin and users’ dashboard
•	Reliable cryptocurrency Exchange on Blockchain
•	Record complete history of cryptocurrency transactions
•	Seamless communication between buyer and seller
•	Flawless trade of cryptocurrency
•	Two factor authentication
•	Advanced Smart contract
•	Payment gateway integration
•	Instant alert and notification
•	Easy to Use Platform

The companies help create your brand identity and make sure your visitors get the best user experience of the brand. Their experts collaborate throughout the development process to ensure whether you are receiving expected design and functionality from the process. The time you let their handle the entire technical part covering web and mobile app development, they ensure perfection on every step execute. The company offers bespoke website cloning services in order to let our customers experience the rapid growth of the online platforms.
Your First Topology detection
Tags: opensource, embedded, microservices, luos
Published: 2022-04-25 15:54:46

Since the beginning of this training, you discovered how to create services, deal with messages, or control them using Pyluos. But you never created embedded application service using other services yet.

⏩ https://docs.luos.io/tutorials/your-first-detection

It is time for you to go to the next stage and learn how to use your new superpowers!

Hardware used in this tutorial: Arduino and STMicroelectronics
Set up a home server and access it from everywhere
Tags: linux, ssh, tutorial, zerotier
Published: 2022-04-25 15:54:42



### OS used as a server: 

- Ubuntu 20.04

### Tools will be used:
- [Zerotier](https://www.zerotier.com/)
- openssh-server

## Getting Started
### Install Zerotier

Sign up an account on [zerotier](https://www.zerotier.com/) and create a network. It will provide us with a network ID. 

Then install the Zerotier on Linux:

```linux
curl -s https://install.zerotier.com | sudo bash
```
Output:

`......`

`*** Success! You are ZeroTier address [ eaXXXXXaXXe ].`


Start and enable the zerotier service:
```linux
sudo systemctl start zerotier-one.service
sudo systemctl enable zerotier-one.service
```
Join the network created previously using the network ID:
```linux
sudo zerotier-cli join YOUR_NETWORK_ID
```
Output:

`200 join OK`

Check if we have joined the network:

```linux
sudo zerotier-cli listnetworks
```
`200 listnetworks <nwid> <name> <mac> <status> <type> <dev> <ZT assigned ips>`

`200 listnetworks afXXXXXXXXXX88c ......`

Extra configuration for inbound and outbound rules, `sudo` might required:

```linux
iptables -I FORWARD -i ztc25p4azo -j ACCEPT
iptables -I FORWARD -o ztc25p4azo -j ACCEPT
iptables -t nat -I POSTROUTING -o ztc25p4azo -j MASQUERADE
```
### Install openssh-server:
Install ssh:
```linux
sudo apt install openssh-server
```

Check the installation process:
```linux
sudo apt list --installed | grep openssh-server
```
Output:

`WARNING: apt does not have a stable CLI interface. Use with caution in scripts.`

`openssh-server/focal-updates,now 1:8.2p1-4ubuntu0.4 amd64 [installed]`

Check ssh status:
```linux
sudo service ssh status
```
Output:

`● ssh.service - OpenBSD Secure Shell server`

`Loaded: loaded (/lib/systemd/system/ssh.service; enabled; vendor preset: e>`

`Active: active (running) since Fri 2022-04-15 17:57:43 CST; 43s ago`

`......`
     
### Connect to your Linux Server:

```linux
ssh username@YOUR.SERVER.IP.ADDRESS
```
> Replace your username and IP address.

### Enjoy!

References
https://www.accessdatabasecloud.com/use-microsoft-access-database-online
Unknown type in typescript
Tags: typescript, types, javascript
Published: 2022-04-25 15:49:24

---
title: Unknown type in typescript
published: true
description: 
tags: typescript,types,javascript
cover_image: https://blog.logrocket.com/wp-content/uploads/2022/02/extending-object-like-types-interfaces-typescript.png
---
The `unknown` type in typescript is a common type that you will likely to come across. It is a strict version of the 
 `any` type and interms of accepting  data, it accepts any data type which is similar to nature of `any` type. However 
there is a minor differences between them. Since an `unknown` type also can have multiple type, it forces to use type assertion before using the types function. To further clear , lets look an example

```js
 function readAny(val: any){
     return val.trim();
}
```
In the above example, we are using `any` type for the value. Since trim is a string function, this works well for string data. However on supplying numbers or booleans , we get a runtine error

The same example using `unknown`
```js
 function readAny(val: unknown){
     return val.trim(); // typescript error at this line
}
```
Typescript would throw a compile time error as we are using string function without type assertion. To fix it, the correct code would look like

```js
 function readAny(val: unknown){

    if( typeof val === 'string')
     return val.trim();
}
```
Slicing Pre-Trained models in Keras. Part (I)
Tags: machinelearning, deeplearning
Published: 2022-04-25 15:46:27

Today we will discuss how to slice the pre-trained models provided by the **Keras** framework for deep learning(DL) implementation.

**Prerequisites**

- Deep learning foundations
- Intermediate level regarding keras.

To try a new thing or to invent something, there should be a motive to do so. I was motivated during my MSc. study by the idea that we can split vision pre-trained models such as **DenseNet**, **Inception**, and **ResNet** models, to get a certain block inside the model and re-use it again. Furthermore, I searched a lot for such a thing at different reputable websites such as **Stackoverflow** and **Github** without getting an answer.

## Motivation

- What if we can remove a block from the pre-trained model such as **Residual block**, **Inception block**, etc, to use it in our own architecture?

- What if we are able to merge a lot of foundational blocks together to create a new model for our task?

- During the research for a better model, what if we need just a part of the architecture that offers good performance without high complexity?

- What if we need to add another component between two blocks in the pre-trained network such as the inception blocks to try new ideas?


This will be a series of two articles:

Article (I): we will discuss why do we need to do it?
Article (II): we will see an example by applying the idea to the **DenseNet** architecture.

Thank you!❤
Diferença entre dependencies, devDependencies e peerDependencies
Tags: javascript, frontend, webdev, programming
Published: 2022-04-25 15:29:08

Você já se questionou qual a diferença entre "dependencies", "devDependencies" ou "peerDependencies" que muitas vezes estão presentes em nosso Package.json?

Muitos programadores ainda não se questionaram sobre esta diferença, e por isso estou aqui para ajudar **você** a entender de uma vez por todas qual é ela :)


**dependencies**

dependencies são todas as bibliotecas necessárias para a aplicação poder trabalhar em produção. Caso se queira instalar somente as dependencias de produção pode usar-se npm install --production.

Para gravar uma dependencia como essencial:

`npm install pacote --save`


**devDependencies**

devDependencies como podemos adivinhar graças ao seu nome, as bibliotecas em devDependencies são aquelas que você precisa durante o desenvolvimento da aplicação. 

Então você encontrará aqui diferentes tipos de bibliotecas, como:
compressores de código

- bundlers: webpack, gulp, parceljs, ...
- testes unitários (ex: enzyme, jest)
- ferramentas de debug
- babel e todos os seus plugins
- bibliotecas de formatação (ex: eslint) 
- outras bibliotecas: storybook, react-styleguidist, husky, etc..

Estes não são necessários para a aplicação funcionar, mas sim para desenvolver e /ou testar.

Para gravar uma dependencia como "dev":

`npm install pacote --save-dev`


**peerDependencies**

peerDependencies: se você quiser criar e publicar sua própria biblioteca para que possa ser usada como uma dependência, você também pode precisar do peerDependencies. Nesta seção, você pode indicar quais versões de algumas de suas bibliotecas importantes são necessárias.

Aqui estão alguns exemplos de bibliotecas que geralmente colocamos em peerDependencies : react, react-dom, styled-components, etc.

[link de instalação do peer](https://www.npmjs.com/package/npm-install-peers)


RESUMÃO:
- dependencies: programas necessários para produção
- devDependencies: programas usados para desenvolvimento
- peerDependencies: são úteis apenas se você deseja criar e publicar sua própria biblioteca.
ngModel in Angular
Tags: angular
Published: 2022-04-25 15:21:31


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

In **app.component.html:**
```
<input [(ngModel)]="CopyText">
<strong>{{CopyText}}</strong>
<input type="text " value="{{CopyText}}">
```
The **ng-model** directive binds the value of HTML controls _**(input, select, textarea)**_ to application data. With the ng-model directive you can bind the value of an input field to a variable created in Angular. The binding goes both ways. If the user changes the value inside the input field, the Angular property will also change its value

**Reference:** [https://www.c-sharpcorner.com/article/ngmodel-in-angular-with-example/](https://www.c-sharpcorner.com/article/ngmodel-in-angular-with-example/)
How to Play Sound on Button Click in JavaScript
Tags: javascript, webdev, beginners, html
Published: 2022-04-25 14:59:34

If you want to create [JavaScript Play Sound On Click](https://www.foolishdeveloper.com/2022/04/javascript-play-sound-onclick.html) then this tutorial is for you. I have created a button here. When you click on that button, the sound will play. 

This type of play sound on click you can use it everywhere in the webpage or in a certain element. In most cases we hear a beep sound in the button. So Beep Sound has been used here too. But you can use any other sound if you want. [Watch its live demo](https://www.foolishdeveloper.com/2022/04/javascript-play-sound-onclick.html) to learn how it works.

✅ 100+ [Best JavaScript Projects](https://dev.to/shantanu_jana/100-javascript-projects-with-source-code-59lo)

Very little JavaScript has been used to create this **Play Sound Button**. If you know a little JavaScript you can easily create it.

**HTML Code:**
The button was created by the following html code. Here the button function of html is used.
```html
<button>Click me!</button>
```
**CSS Code:**
Buttons are designed with some simple css. First I designed the webpage with some code. Then I designed the button and added the hover effect.
```css
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
display: flex;
align-items: center;
justify-content: center;
background: #dff0f6;
}

button {
font-family: 'Open Sans', sans-serif;
font-size: 1.5rem;
color: #fff;
background: #034d85;
padding: 1.1rem 3.4rem;
border-radius: .2rem;
transition: opacity .2s;
}

button:hover {
cursor: pointer;
background: #053056;
}
```
**JavaScript Code:**
Now play sound on click html has been activated by JavaScript.

- First line I added audio using JavaScript. Here I have used beep sound. You can use any audio.
- Then a global constant of buttons is set.
- Then the sound in the `'audio'` is linked to the button by the onclick event. Then I have used the play () method here to play the audio. `play ()` method starts playing the current audio.

```javascript
const audio = new Audio("https://www.fesliyanstudios.com/play-mp3/387");
const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    audio.play();
  });
});
```
Hopefully using the tutorial above you will know how to create [Play Sound on Button Click](https://www.foolishdeveloper.com/2022/04/javascript-play-sound-onclick.html). 

I have previously created many JavaScript web elements for beginners. Please comment on how you like this **onclick play audio button**.
Vite build failed on project with aws-sdk
Published: 2022-04-25 14:51:21

Vite work greate on local development.

But I got this error when build.

```sh
'request' is not exported by __vite-browser-external, imported by node_modules/@aws-sdk/credential-provider-node/node_modules/@aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
```

The solution is put some script on `index.html`

```html
<script>
var global = global || window
var Buffer = Buffer || []
var process = process || { env: { DEBUG: undefined }, version: [] }
</script>
```

And that's it, all sorted! 😛

Thanks community.

- https://github.com/aws-amplify/amplify-js/issues/9639#issuecomment-1049158500 
- https://github.com/aws/aws-sdk-js/issues/3673#issuecomment-966113006
A project, to teach a computer to see
Tags: ai, programming
Published: 2022-04-25 14:40:12


Recently, I wrote an article about some of the current issues facing computer vision. 

That is, the ability of a computer to see and identify objects like how we humans do. 

We are going to work on a project in which a computer can see and identify objects like humans. 

In this computer vision and object recognition project, I am going to show you why there are issues with current computer vision algorithms and how to solve those issues. 

When the project is completed, the computer will be able to see and understand objects like us.

If you have ever played with artificial intelligence, you will notice that, you have to give a lot of pictures of a dog to a computer, before it can identify a new dog the next time.

During our project, we are going to solve this problem, so that you only need to give the computer a single picture of a dog to it, 

then the computer will still be able to always identify a new dog it has not seen before, without any additional training.

In the next post I will do, I will discuss about the first step of this project
Starting my journey into php
Tags: php, beginners
Published: 2022-04-25 14:39:18

I decided it was time to learn PHP after doing only frontend for a while.

My goal is to be able to rely on myself for my own projects.

- learn via w3school and php.net
- Create simple functions for myself

Right now I have achieved a simple todo page that adds data to my DB. (Only by reading docs, w3school and trying stuff out)

Now its time to create functions to edit/remove data.

I will post updates as I learn and manage to add functions to my projects.

You can view my git repo [https://github.com/penaxr/php-learning](https://github.com/penaxr/php-learning) Currently its not much but I can say I've managed to write some simple php.
How I got the LONGEST NAME on DEV.TO
Tags: trick, tutorial, cool, webdev
Published: 2022-04-25 14:32:38

Dev.to only allows users to have a maximum of 30 characters in the name.
So I wanted to trick that and get the looongest name...

I just went to the dev tools and go to the change profiles name entry. I set it's Max length to 100 instead of 30 and put in my name.

Now I have the longest name!