teleren/devto huggingface dataset:
peviitor.ro - arhitectura
Tags: searchengine, peviitor, job, locuridemunca
Published: 2021-12-29 17:18:50

Arhitectura motorului de cautare `peviitor.ro` este simpla.

![arhitectura aplicatiei](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvgo1f424jah15opgml7.png)
 

#### Website-ul companiei
`Sursa de date` este sectiunea cariere a website-ului companiei. De aici ne aducem locurile de munca disponibile.


#### Scraper
`Fiecare website va avea un scraper`. Rolul scraperului este de a prelua informatia de pe website-ul companiei si de a prelucra informatia astfel incat sa respecte standardul acceptat de API. Tot scraperul se ocupa de a trimite datele spre indexul motorului de cautare.


#### UI
UI se refera la interfata utilizator. In fiecare versiune incercam sa aducem functionalitati noi. Incercam sa facem aceasta interfata `cat mai simpla` nu doar din perspectiva "Usability" ci si din perspectiva scrierii codului.


#### API
`Interfata aplicatiei programabila` este expusa pentru ca partea de interfata utilizator sa extraga datele si a le prezenta spre utilizator.
Totodata API-ul este responsabil si de acceptarea sau nu a informatiilor furnizate de catre scraper.
Cu fiecare versiune incercam sa aducem imbunatatiri pe partea de securitate de aceea, API-ul va fi organizat pe versiuni.


#### Index
Am spus de la inceput index si nu baza de date pentru ca informatiile sunt foarte volatile. Sursa de date este practic website-ul companiei si nu ne propunem sa duplicam datele insa e necesar sa aducem anumite informatii in index pentru ca `pe index cautarea se face impecabil de repede`.


Cam atat am dorit sa dezvaluim despre arhitectura acestui motor de cautare. Ramane sa detaliem fiecare sectiune odata cu promovarea fiecarei versiuni. Tehnologiile implicate pe fiecare sectiune vor fi explicate in articolele despre `versiuni`.
How I host my Next.js side projects for free
Tags: nextjs, webdev, react, javascript
Published: 2021-12-29 16:54:51

Hosting side projects can be expensive but why pay all that money if you don't have to.

## Hosting
(Vercel)[https://vercel.com] offers a lot of benefits like:

- Free tier 
- Easy and continuous deployments
- Automatic Scaling
- Super easy integration

## Database
Most projects need a database and they can get very expensive. 

I host my postgresql databases on [heroku](https://www.heroku.com/) using their hobby tier.

There are a few downsides though like:

- Maximum of 20 connections allowed
- Maximum of 10,000 rows

For tiny projects it works well where I don't have a lot of users.

I hope this article was helpful thanks for reading.
What is Nodejs? Difference between Nodejs and JS.
Published: 2021-12-29 16:54:08

Nodejs is an open-source, server-side JavaScript runtime. It is also used in cross-platform and backend environments. Nodejs runs in the google chrome V8 engine and executes code outside of the web browser.
**Difference between Nodejs and JavaScript**
i) Nodejs is a JavaScript runtime but JavaScript is a scripting programming language.
ii) Nodejs basically used on the server-side but JavaScript is used on the client-side.
iii) Nodejs run JavaScript code outside the browser but JavaScript runs only the client-side or browser.
iv) Nodejs is used for server-side development but JavaScript is used for client-side development.
v) Nodejs is written in C++ but JavaScript follows the java programming language standard and it is the updated version of the ECMA script.
How to deploy a solidity contract with etherjs
Tags: solidity, deploy, ethers, web3
Published: 2021-12-29 16:40:05

Assuming you have installed metamask, and know the seed phrase, here are steps to deploy contract using 'ethers' and 'fs':

1. compile the contract to .bin and .abi files
2. load 'ethers' and 'fs'
3. create a 'signer' object using 'provider', 'Wallet', and 'connect' methods from 'ethers'
4. create a contract instance from 'ContractFactory' method
5. use deploy method as promise
6. Here I have used 'getblock' as web3 provider for example (see https://getblock.io/docs/get-started/auth-with-api-key/). Other alternatives are 'quicknode', 'alchemy' and 'infura'.

We will deploy the code to the BSC testnet, but same procedure will apply for other Ethereum Virtual Machine(EVM) compatible chains, such as : Avalanche Contract Chain (C-Chain), Binance Smart Chain (BSC) mainnet, Fantom Opera and Polygon etc.

nodejs script for contract deployment goes here:

```
//load 'ethers' and 'fs'

ethers = require('ethers');
fs = require('fs');

//Read bin and abi file to object; names of the solcjs-generated files renamed
bytecode = fs.readFileSync('storage.bin').toString();
abi = JSON.parse(fs.readFileSync('storage.abi').toString());

//to create 'signer' object;here 'account'
const mnemonic = "<see-phrase>" // seed phrase for your Metamask account
const provider = new ethers.providers.WebSocketProvider("wss://bsc.getblock.io/testnet/?api_key=<your-api-key>");
const wallet = ethers.Wallet.fromMnemonic(mnemonic);
const account = wallet.connect(provider);

const myContract = new ethers.ContractFactory(abi, bytecode, account);

//Using 'deploy method 'in 'async-await' 
async function main() {
// If your contract requires constructor args, you can specify them here
const contract = await myContract.deploy();

console.log(contract.address);
console.log(contract.deployTransaction);
}

main();
```
In the above code, 'account' is the 'signer' of the ethers docs [
https://docs.ethers.io/v5/api/contract/contract-factory/#ContractFactory--creating
](url)

 

```
ethers.ContractFactory( interface , bytecode [ , signer ] )
```
Do not hesitate to ask in discussion if you face any problem in deploying your contract.
floating elements 
Published: 2021-12-29 16:32:42

## float
{% codepen https://codepen.io/moonlxght10/pen/WNZMpjp %}

{% codepen https://codepen.io/moonlxght10/pen/XWeZMRY %}

## clear 
use clear for left and right of box (clear both)
{% codepen https://codepen.io/moonlxght10/pen/YzreZEK %}

`⛔️ problem`

{% codepen https://codepen.io/moonlxght10/pen/QWqQpQM %}

`✅ fix`
```css
.tweet{
    border: 3px solid lightgrey;
    /* ⚜️ */
    overflow: hidden;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy770rufjaufqbb371kb.png)
MongossJs, JWT
Tags: node, mongodb
Published: 2021-12-29 16:26:31

## MongooseJs :

> Basically Mongoose is a package.It is a mediator between the MongoDB server and NodeJS application. It is an Object Document Mapper(ODM) that allows us to define objects with strongly-typed-schema. These objects are mapped to a MongoDB document. Mongoose also supports all the CRUD operations – Creating, Retrieving, Updating, and Deleting.

## JWT :

> JWTs are commonly used as OAuth bearer tokens. In this way, an authorization server creates a JSON Web Token (JWT) at the request of a client for security parpas. The client will then send this JWT with its request to a REST API. The REST API will verify that the JWT’s signature matches its payload and header to verify this JWT token. When the REST API has verified the JWT, the client's request is accepted.
> In short, To authenticate users and share information JWTs are used as a secure way.
node.js curd operation
Published: 2021-12-29 16:19:44


**How to get any data from mongodb with node.js**
         
  Use a database collection by 
     	const productcollection = database.collection('product');
Then, use app.get() function by below system
app.get('/product', async (req, res) => {
            const getdata = productcollection.find({});
            const showdata = await getdata.toArray();
            res.send(showdata);
        })

**How to get any single data from mongodb with node.js**
        
  Use a database collection by 
     	const productcollection = database.collection('product');
Then, use app.get() function by below system,
app.get('/product/:id', async (req, res) => {
            const id = req.params.id;
            const getId = { _id: ObjectId(id) };
            const showId = await productcollection.findOne(getId);
            res.json(showId);
        })





**How to Post any data to mongodb with node.js**

  Use a database collection by 
     	const productcollection = database.collection('product');
Then, use app.post() function by below system    
    app.post('/product', async (req, res) => {
            const add = req.body;
            const result = await productcollection.insertOne(add);
            console.log(result);
            res.json(result);
        }) 

**How to delete any data from mongodb with node.js**

  Use a database collection by 
     	const productcollection = database.collection('product');
Then, use app.delete() function by below system        
app.delete('/product/:id', async(req, res)=>{
            const id = req.params.id;
            const getId = {_id: ObjectId(id)};
            const deleteId = await productcollection.deleteOne(getId);
            res.json(deleteId);
        })
Polyfills can make developer life easier
Tags: javascript, polyfill, webdev
Published: 2021-12-29 16:12:09

---
title: Polyfills can make developer life easier
published: true
description: a polyfill is code that implements a feature on web browsers that do not support the feature.
tags: javascript,polyfill,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ajn1w8holb8jtmxx1r4.png
---


There are many different Javascript environments. And even though Javascript is standardized, the different environments still have very different features. 

Even if you limit yourself to the browser, you have to keep an eye on the different versions.

20 years ago this was much more complex, but even now you have to deal with it as a developer. 

![deal with it](https://media.giphy.com/media/d5M6x0vK7Kmnm/giphy.gif)

One bad way to deal with these differences has long been to use `navigator.userAgent` to determine the browser and then use a browser switch.

```javascript

let browser='unknown';

if (navigator.userAgent.indexOf("Firefox") > -1) {
  browser = "Mozilla Firefox";
} else if (navigator.userAgent.indexOf("Opera") > -1 || navigator.userAgent.indexOf("OPR") > -1) {
  browser = "Opera";
} else if (navigator.userAgent.indexOf("Trident") > -1) {
  browser = "Microsoft Internet Explorer";
} else {
  sBrowser = "unknown";
}

alert("your browser: " + browser);
```

But this approach has always had **many disadvantages**. It is more effective to check for a specific feature.

```javascript
if ("geolocation" in navigator) {
  // Use geolocation
} else {
  // Give the user a choice of static maps instead perhaps
}

```

Doing this in your own codebase not only bloats the code, but it also makes testing the codebase more costly.

A more effective way is to avoid polyfills in your own codebase and to add missing functions via external polyfills.

So that one does not have to search for and integrate each polyfill oneself, one can use services such as polyfill.io. 

These can inject the missing functions and objects for each browser.

The URL builder from polyfill can be used to compile the desired polyfills.

You can also automate the creation of the URL. For this you can install the tool `create-polyfill-service-url`.

```bash
npm i create-polyfill-service-url
```

With the following call the tool analyzes your script and throws out the desired URL.


```bash
npx create-polyfill-service-url analyse --file bundle.js
```

bundle.js is here the file that contains your code.

The result is a URL that you can easily 
paste into your HTML web page.

When using external services like polyfill.io, you should remember that an additional HTTP request is necessary.

polyfill.io can also be self-hosted. On github you can find the repos for the service.


_hope you enjoy it!_



## References



- [polyfill-service](https://github.com/Financial-Times/polyfill-service)
- [URL builder](https://polyfill.io/v3/url-builder/)
- [Browser compatibility Crypto](https://developer.mozilla.org/en-US/docs/Web/API/Crypto#browser_compatibility)
𝑮𝒐𝒐𝒈𝒍𝒆 𝒍𝒐𝒈4𝒋𝒔𝒄𝒂𝒏𝒏𝒆𝒓 𝒕𝒐 𝒔𝒄𝒂𝒏 𝒂𝒏𝒅 𝒓𝒆𝒎𝒐𝒗𝒆 𝑱𝒏𝒅𝒊𝑳𝒐𝒐𝒌𝒖𝒑 !
Tags: java, security, log4j, devops
Published: 2021-12-29 16:03:02

New OSS tool to scan and remove the vulnerable class from detected JARs in-place easily. Read more: https://github.com/google/log4jscanner


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctpc1e9etki5b3aw5pq8.png)
LaTeX: Where else can I find or use LaTeX?
Tags: codenewbie, latex
Published: 2021-12-29 15:59:01

Hello, how are you? :) 

In this post I tell you 
- Where else you can find or use `LaTeX`
- How to use `LaTeX` in another platforms

## Notion 

> This supports basic math environments, it is, you can not declare macros (yet) or do advanced stuff, but you can mix math with some environments that they already have

> You need to write the entire command in the appropriate way, otherwise, it will appear an error 

Here you can use inline equations and displayed equations
- **Inline Equations** you need to use double `$$` instead of one to start and end an equation 
- **Displayed Equations** you need to put `/blockequation` and then write the desired equations

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

## SymPy 

You can get the `LaTeX` code of an equation with a simple instruction, just follow the next steps

1. Import `sympy`
2. Use the command `sp.latex(myExpression)`

It will give you the `LaTeX` code of the equation

```Python
import sympy as sp

sp.latex(myExpression)
```

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

If instead of getting the `LaTeX` code you want a visualization of the expression, you need to write these lines in your Jupyter Notebook 

```Python 
from sympy.interactive import printing
printing.init_printing(use_latex=True)
```

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

Here you can draw, yes, draw the symbol that you are searching, and this page returns the `LaTeX` command

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

## Mathpix

Here you can take pics of your written equations, and returns the `LaTeX` code

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

## Overleaf Templates

You can find lots of templates for your work like books, cv, theses, etc. You can check that page [here](https://www.overleaf.com/latex/templates)

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

## TUG (Tex User Group)

You can find many resources here, like documentation, help, community, you need to explore it by yourself [here](https://tug.org/)

## Visual Studio Code LaTeX Extension

It's an extension for VSCode to edit LaTeX documents, you can mix its functionality with many more extensions for VSCode, you can check it [here](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)

These are my favorite resources (also the only ones which I know) if you want to share your favorite resources you can leave them in the comments section 

That is all for today, thanks

Do not forget to follow me on Twitter `@latexteada 

Greetings :)
10 terminal commands every developer should know
Tags: programming, bash, webdev, linux
Published: 2021-12-29 15:53:01

As a developer command line is a crucial skill to have. So, in this article, I’ll share the top 10 command line command every developer should know. 

Let’s get started.

**If you prefer video then check it out: **

{% youtube FoS8q3ZvY04 %}

### #1. mkdir

Make directory. With this command, you can create a folder easily 

```
mkdir folder-name
```

### #2. cd

After creating a directory/folder we need to go to that directory. We can do so with cd

```
cd folder-name
```

### #3. cd ../

The next one is cd ../ this command used to go one step back. For example, if you are inside “folderA” and it’s on the desktop. You can use this command to go back to desktop. 

```
cd ../
```

### #4. rmdir

So, you created a directory/folder now you want to delete it. You can do so with this command 

```
rmdir folder-name
```

### #5. touch

We need to create files a lot. we can do that easily with this command. 

this command will create a .html file. when creating a file don’t forget to add the extension. 

```
touch index.html 
```

### #6. ls

If you want to see how many folders and files a directory have. You can use this command to see. All you need to do is go to that directory and run this:

 

```
ls
```

### #7. mv

With this command, you can move a file to another directory. You need to provide the file name and the directory you want to move the file. like this: 

```
mv file.txt moveTo
```

### #8. rm

With is the command you can delete a file and a folder. When you want to delete a folder with this command just add an -r flag at the end. 

like this:

```
// remove file
rm file.text

//remove directory
rm folder-name -r
```

### #9. date

This command is a fun one. It just prints out today's date, just for fun. 

```
date
```

### #10. pwd

This command print out the current directory you are in. 

 

```
pwd
```

## Conclusion

Working with the command line makes a programmer's life a lot easier. If you don’t use the command line, I highly recommend starting using it. 

If you enjoyed reading this article, I think you’ll also enjoy my newsletter where I share my articles and videos, and resources I found online.

### [Subscribe Now!](https://www.getrevue.co/profile/coderamrin)

 

connect with me on Twitter at [coderamrin](https://twitter.com/CoderAmrin)
break continue 
Published: 2021-12-29 15:47:01

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

if use `break `
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0wi8w98wd2a25pf9fl2.png)

`continue `
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1826b308p9mjzcxlccfw.png)
Some react note
Tags: react
Published: 2021-12-29 15:41:25



What is JSX, babel transpiler?
JSX is Javascript XML. JSX converts it into JavaScript using Babel, and finally, React converts that to pure HTML for rendering in Browser.
Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript. we will view babel as an intermediate step between your code and "executable" code. React also uses ES6, which is not supported by most of the browsers. Babel converts the ES6 code to a code which is compatible with the browsers.

useState Hook
useState() - Takes a parameter which is the default state and returns it first (we get it as getter), and 2nd one is setter (a function that can be used to change the default state and update the getter value). i.e const [steps, setSteps] = useState(0); // Here ‘0’ is the default value (state) of steps. If we change the value (state) using setSteps (one kind of function), it will update the latest value (state) to steps. useState works asynchronously and renders the UI after every call. The getter and setter is not the formal name.

useEffect Hook
useEffect() -> Takes two-parameter. The first one is an anonymous function and the second one is generally an empty array. If we don’t pass the empty array, useEffect call after every change of state. But if we pass the empty array, useEffect calls only one time while loading

Difference between state and props -Main difference is: props are Read-only, but the state can be changed.
Create and Load Fake data
We can create fake data using various free online JSON Generators or JavaScript to JSON converters and use them in our project. To use fake data in React, we have to keep the JSON file in the public/data.json folder. We can get it from anywhere using fetch(‘/data.json’), like getting data from an API.

Reduce is an array method that can be used to determines summation of a numbers array, i.e., -> const numbers = [33, 22, 99 33]; const sum = numbers.reduce( (previous, current) => previous + current, 0); // Sum of the numbers will hold in the sum variable. The 2nd parameter in reduce is the initial value. In this case, it was zero (0).
Introduction to Amazon Lex
Tags: aws, datascience, cloud, programming
Published: 2021-12-29 15:30:48

Amazon Lex is a wonderful addition by Amazon, which helps developers to build high standard conversational interfaces which can be integrated into either a new or existing application in a seamless manner.

With the Amazon Lex, your customers would interact seamlessly with your applications by either using voice or text commands, for example, Chatbot for interacting with your customers in an easy fashion.

Amazon Lex utilizes the same deep learning integration that Amazon Alexa, it utilizes the automatic speech recognition and natural language understanding functionality for the chatbot.

Before going further into what the AMazon Lex is, I would like to briefly explain what a ChatBot application is. A ChatBot application is a program that simulates conversation like a human. 

Why utilize Amazon Lex and not a self-trained natural language algorithm? 
1) They are simple to be integrated into either new or existing applications
2)The cost to effort ratio is quite reasonable as it is a pay-as-you-go model.
3) They process both text and speech seamlessly
4) They are easy to deploy to your applications and utilize.
5) They have high scalability
6) You can easily integrate it with other services on the AWS platform.

It is worthwhile to note that all network connections with Amazon Lex are done with only HTTPS,  which is to ensure secured conversation which means your conversations are encrypted by Amazon Lex.

I have mentioned above that the Amazon Lex is affordable in terms of the cost, but let's see the pricing model of the amazon Lex below:

-- Per Voice request costs $0.004: so if your ChatBot processes about 5000 voice requests per month, you should expect to pay 5000 * 0.004 = $20 monthly
-- Per Text request costs $0.00075: so if your chatbot processes about 5000 text requests per month, you should expect to pay 5000 * 0.00075 = $3.75 monthly

With Amazon Lex, your cost and the monthly bill are calculated from the total processed requests by your application on a monthly basis.

There is also a free Amazon Lex option that provides you to process free 10,000 texts and 5,000 voice requests monthly for the first year, this allows you to test its functionality within your application.
for of 
Published: 2021-12-29 15:30:42

```js
for (variable of iterable) {
  statement
}
```

## Comparison

```js
const colors = ['red', 'green', 'blue'];
// for in loop 
for (let x in colors) { //x or color or index or anything else!
    console.log(x);
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyutq20j2eavw4uow2l4.png)

```js
const colors = ['red', 'green', 'blue'];
// for of loop
for (let x of colors){ 
    console.log(x);
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bzzs9x55no2jkkvz2jb.png)

## so we use `for in` in the object 

## use `for of` in the array

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