teleren/devto huggingface dataset:
Compiladores
Published: 2021-06-04 13:16:31

Sinceramente, podría decirte que llevando al menos cuatro años en el rubro, nunca me ha tocado estar desarrollando a tan bajo nivel, es más siempre trabajo con lenguajes más elaborados, de sintaxys un poco más entendible, probablemente voy a ser el comentario me gustaría haberlo aprendido a verlo en la universidad o it, pero no al parecer no lo encontraban importante. Pero hoy en día me ha dado la curiosidad, me encuentro leyendo las primeras paginas del conocido dragón rojo.

"Compilers: Principles, Techniques, and Tools" de 1986 Alfred Aho, Ravi Sethi, Jeffrey Ullman, Monica S. Lam

Espero poder contarles un poco más a lo largo que avance y si en algun momento me motivo finalmente de
Deploy a site with Vue-Tailwind in Netlify
Tags: vue, tailwindcss, netlify
Published: 2021-06-04 12:57:48

Here I will mention how easy it is to deploy a static site or a site done with Firebase to Netlify. 
**Create a Vue project with Tailwind**
`vue create vue-tailwind` if you want to know about how to create a Vue project from scratch with Vue [Click here](https://dev.to/tanzimibthesam/vue-js-for-beginners-part-4-intro-to-vue-cli-component-props-1dd1)
After installing Vue from cli cd to the project directory. In Cli type `vue add tailwind` its the easiest way to install Tailwind from Vue.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75fsrtkmkgx2ualcipkc.png)
 
So here it will ask whether you want none,full and minimal version of tailwind.config.js 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ekvncxx3gbvil8kmbx8.png)
Now you dont need any third party plugins for **JIT compiler**
 In Home.vue I have copied and pasted a component from [Tailblocks](https://tailblocks.cc/) in Home.vue
 **Build**

Then run `npm run build`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtxwpn77zhi9z0bdzejv.png)
Now you see there will be a dist folder on the left
**Drag dist folder to Netlify**
This is how your netlify dasboard will look like 
  ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voay5wmwf8us04nntlpd.png)
 **This is how you will drag and drop dist folder here**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4igvshp0fbj9rs4nk9cx.png)
**Your site afte deployment with URL**
This is how your netlify dashboard will look like after deployment 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drkkn2ebmj0fdj9ht4bt.png)
So now we see how url of our site if we click the url it will take us to our landing page.

This is how my landing page looks like
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkg0pe1dwbnxgv1temr6.png)
 I will write another blog on how to deploy it with Github so that if you change anything you dont need to reupload.
An AI who can talk like humans !!!
Tags: ai, machinelearning, tech, robot
Published: 2021-06-04 12:53:29

I created an ai bot who can talk like humans do .
He can understand what you mean.
He can learn from you.
He can do almost what humans can do in a conversation .
So heres my discord server where you can talk to him!!
https://discord.gg/Aj3aXyGkhc
Strengthening the team of a foodtech giant
Tags: ruby, webdev, programming, startup
Published: 2021-06-04 12:41:26

Sbermarket delivers groceries and household goods to your home, from supermarkets such as METRO, Auchan, and Vkusville. Customers can set up their orders through the website or mobile application, and then Sbermarket partners do the rest. The pickers go around the store with a list and select only the freshest products, then the couriers deliver the orders to the customers.

[Evrone has been helping Sbermarket](https://evrone.com/sbermarket) improve its digital service, and our developers continue to leverage their experience and expertise across multiple in-house teams.
Form events in React
Published: 2021-06-04 12:23:46

This article will combine the state to manipulate formularies.

---

# Intended result
This is what we will have by the end of the article.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nnuqq0rx7bmzdd18pjn.png) Figure 1: A quick and simple form made in React.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43zhgmw2sg9qi93w5hra.png) Figure 2: Hierarchy chart of the app. Note the boxes with dotted lines aren't components but tags inside the App.jsx

---

# Getting started
Our code examples are getting more complex, but we can still break this down by focusing only on new things:
1. [The form tag](#guide-form)
1. [The input tag](#guide-input)

```jsx
import { useState } from "react";

export default function App() {
  const [name, setName] = useState("");

  function onSuscribe(event) {
    event.preventDefault();
    alert(`Welcome on board ${name}`);
  }

  function onName(event) {
    setName(event.target.value);
  }

  return (
    <div className="App">
      <h1>Our new customer is {name}</h1>

      <form onSubmit={onSuscribe}>
        <input value={name} onChange={(event) => onName(event)} />
        <br />
        <button>Suscribe</button>
      </form>
    </div>
  );
}
```

<span id="guide-form">&nbsp;<span/>
### Form tag:
Note that the code to trigger the submission is attached to the form instead of the button.

1. `onSubmit` property in the form tag to run a function when the user press the form button.
1. `event.preventDefault()` on the `onSuscribe` function. This line is necessary to avoid the webpage to reload automatically after sending the form.

Reloading the page was the normal behavior when you needed server-sided languages to do basic form manipulation before JavaScript became a powerful language.

Because the form is not directly connected to a state that changes the event, you can omit the arrow function to pass the event like in the input field.

<span id="guide-input">&nbsp;<span/>
### Input tag:
1. The input has a property `value` that receives the state.
1. The input also has a property `onChange` that runs an arrow function each time the user types inside the field.
1. The arrow function has 2 `events`:
  1. The input event fired each time the user types.
  1. The same event passed as an argument to be used in a function.

---

# Conclusion
Now we are halfway done in React. The next day, we will start building large-scale applications by fetching data from a server and handling multiple pages inside our React project.

You can take a break before moving to the articles intended for the next day, or [click here](https://dev.to/softwaredevacademy/install-external-components-using-npm-3480) to continue your studies.

If you want to see the finished code, open this [link](https://github.com/softwaredevacademy/sda-react-articles) and open the branch forms.

---

# Credits:
Cover: Photo by <a href="https://unsplash.com/@kellysikkema?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kelly Sikkema</a> on <a href="/s/photos/forms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Day 16/30 : Neumorphism Animation using CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-04 12:15:52

Welcome to Day 16 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Neumorphism Animation using CSS](https://1.bp.blogspot.com/-VQ5TUbacFlI/YKixgBFjK5I/AAAAAAAAAFk/u19-r2KQUqgXWuKRqOocF8jVlPWFsT4BgCLcBGAsYHQ/s600/16.gif)

**➜ Video Tutorial :**

{% youtube RUsjvG3_rNA %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/neumorphism-animation-using-css.html


**➜ Instagram Post and Reel for Day 16 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
What is the difference between jdk and jre
Tags: jdk
Published: 2021-06-04 12:13:36

JRE stands for Java Runtime Environment. Java Runtime Environment , JRE is a package that contains everything that is needed to run a compiled Java program. This includes  the Java Virtual Machine (JVM),  the java command ,the Java Class Library,and other infrastructure. It should be noted that for Java Runtime Environment cannot be used to create a new java  programs.

 

The Java Development Kit or  JDK is the, the full-featured SDK for Java. That means  It has what the Java Runtime Environment  has including the compiler (javac) and tools (like javadoc and jdb).  It has the ability to  create  and compile java programs.

 

Java Runtime Environment is for people who  only care about running Java programs and note compiling them. If this is you , Java Runtime Environment is all you need. However,  if you to create and compile java programs , you need to install the JDK instead.

Even though some times you donot intend to  do any Java development on your computer, you will still require  the JDK installed. For instance, you may be in the process of deploying a web application with JSP. This means  you are essentially running the  Java programs inside the application server. This is the reason  you would need the JDK.  The reason being that  the application server will convert JSP into Java servlets and needs to use the JDK to compile the servlets. There are multiple examples of his . Feel free to do more research

[I also got that on another site](https://kodyoon.com/)
Daily Developer Jokes - Friday, Jun 4, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-04 12:00:26

---
title: "Daily Developer Jokes - Friday, Jun 4, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Jun%204%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b4d7b44.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why doesn't Hollywood make more Big Data movies?

___A:___ NoSQL.
 -->
Generating random numbers with Math.random() (JS)
Tags: javascript, beginners
Published: 2021-06-04 11:33:55


Lets begin by understanding what the Math.random() function
does. When called it returns a pseudo-random number in the range [0, 1[. This means that the possible values are between 0 and +- 0.9999, Never 1. 

There are some clever tricks we can use in order to change that range. For example if we want to generate numbers between 0 and n. 

We can call the Math.random() function and multiply the returned value by n. 

` Math.random() * n;`

note: The result will never be n. 

This works well but the result of this expression will be a floating point number. What if we want whole numbers instead ?

Thankfully the Math object has methods that allows to round up or down. For this example I will use the Math.floor() function but feel free to explore the Math object for alternatives. 

Our code will look like this: 

`Math.floor(Math.random() * n);`

This code snippet will produce random whole numbers that range from [0, n[.

Lets explore how to generate numbers between an interval such as [4, 10[. 

So far we have seen that if want to change the range of Math.random() all we have to is multiply its returned value by n. This time we have two values a max representing the upper bound of the interval and a min representing the lower bound of the interval.

```
let max = 10;
let min = 4;
```
What we want is to generate the following numbers:
* 4
* 5
* 6
* 7
* 8
* 9

By doing some simple math we know that there are 6 numbers between 4 and 10 (10 - 4). We could use this knowledge in our expression like so. 

`Math.floor(Math.random() * (max - min));`

We are not done yet because this expression will only
produce numbers between 0 and 6 not 4 and 10 (exclusive). 

The possible numbers so far are: 
* 0
* 1
* 2
* 3
* 4
* 5

Take a second here to try and figure out how to solve
this problem. 

It turns out that if we simply add min to the result
of this expression we can effectively change the range to be what we want:

* 0 + 4 = 4
* 1 + 4 = 5
* 2 + 4 = 6
* 3 + 4 = 7
* 4 + 4 = 8
* 5 + 4 = 9

As you can see here the resulted range is between [4,  10[ . 
So in code it will look like this:

`Math.floor(Math.random() * (max - min)) + min;`

Easy-peasy. 

One thing we did not address is what if we want the upper bound of our interval to be included. 

All we have to do is add 1 the result of the (max - min) expression. in my example I used 10 and 4.
subtracting them gives us 6 we add to that 1. The result will be 7. This increases the range by 1, allowing us to include our max value in our range.

The final code looks like this:
```
let max = 10;
let min = 4;

Math.floor(Math.random() * (max - min + 1)) + min;
```
About MTLS
Published: 2021-06-04 11:30:59

Em Tradução direta é só uma autenticação mútua, logo as duas partes se autenticam. Mas antes de entender o Mtls, você tem que entender o TLS, ele é a "segurança da camada de transporte", após isso fica mais fácil de entender o que é o MTLS.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p10g5p7hvo68b7fg6r1p.png)
O protocolo TLS compreende duas camadas: o registro TLS e os protocolos de handshake TLS.

O TLS é um padrão que segue o RFC 2246, na verdade com a mudança das versões ele mudou de RFC, mas a RFC 8446 é a mais recente. 

Uma observação, quem publica todos os RFCs, seja do jwt, jwe, TLS, e afins, é a IETF | Internet Engineering Task Force (https://www.ietf.org/). Mas voltando... 

O TLS, ele usa criptográfia simétrica, em palavras simplórias, a criptográfia simétrica, são ambos os lados compartilhando o mesmo segredo, e iso torna ela menos segura, se for compara a criptografia chave pública/privada. Porém, você ganha mais velocidade ao usar o modo simétrico, sabemos que existe esse grande impace VELOCIDADE x SEGURANÇA.

1.  Por que não se utiliza chave assimétrica durante toda a comunicação?

 Este tipo de criptografia é muito custoso em termos computacionais, devido à quantidade de operações que são realizadas.

Algoritmos mais famosos usados no TLS
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qpopm22ipwvwsf02yvf.png)

Benchmarks dos Algoritmos:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toctaxjtkelg6rb4tw51.jpeg)


E o intuito do TLS, é substituir o SSL, já que  ele se tornou mais eficaz no quesito proteção de acesso a sites.

Benchmarks com o TLS ativado e TLS desativado 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miqdyb20mdxdpsjxvekr.png)


O TLS possui três subprotocolos que permitem às partes chegarem a um acordo sobre os parâmetros de segurança que serão utilizados na camada de registro para autenticação, comunicação e para reportar condições de erro entre as partes.

O sistema é tão forte quanto mais forte for o mais fraco algoritmo de troca de chaves e autenticação suportado pelo TLS, e somente algoritmos de criptografia dignos de confiança dever ser usados. Chaves curtas só devem ser usadas se o valor do dado vale menos que o esforço necessário para decriptá-lo.
Ace JavaScript Interviews like a Pro
Tags: javascript, interview
Published: 2021-06-04 11:29:27

Stop saying I have failed in an interview ❌
Just say I got some interview experience ✔

Are you preparing for JavaScript Interviews?
Yes? 🤔

Then follow me along 👇

**Be confident and remove the fear of failing**

Believe in your preparation in case you fail you will be having an experience of the interview and the questions that you were not able to answer.

Work hard and clear the upcoming interview.

Always learn from mistakes 😀

**Don't just copy-paste the code but first try to understand the code.**

Reason 👇
If the recruiter asks you to explain the code, then you should be able to explain.

**Different Interview methods:**

a. Machine Coding Round
b. Technical Round
c. Project Discussion

**a.** Machine Coding Round

How to tackle a machine coding round?

If you have a week, then you have an ample amount of time.

But what if it is just 3 to 4 hours?
Always try to keep interview modules ready before.

Example 👇
Styling, Auth, etc

Don't waste time on basic things

**b.** Technical Round

Prepare well for basic concepts of JavaScript.

You may be thinking that many questions can be asked. So, what are some common questions?

Hold on 😁

Here is the **list of some common questions** 👇

* var vs let vs const
* Arrays
* Block Scope
* == and ===
* Some common Array method: a. map b. reduce c. filter d. find
* Hoisting
* this keyword
* call, bind and apply
* async and defer
* local and session storage
* Timers: setTimeout, setInterval, clearTimeout
* Closure
* Promises
* async/wait
* Polyfills: map, bind

**Good to know:**

* Debouncing
* Throttling
* Performance Optimization: 

  a. Caching
  b. Code Splitting 
  c. Bundling 
  d. Minification 
  e. Server-Side Rendering

**Speak while you write the code.**

Reason 👇
If you are writing the wrong code recruiter might help you.

**c.** Project Discussion Round

Understand the code and workflow.

Reason 👇
The recruiter might ask you to tweak some functionality in your project.

That's All 😀
I hope you liked it 😁

Keep Calm and Ace the Interview 😎

If you fail in an interview, remember one thing: "Failure is success in progress."

"Never give up. Today is hard, tomorrow will be worst, but the day after tomorrow will be sunshine."

Your thoughts?
[Question] Make a blog with nextjs should be use mdx or remark-html
Tags: nextjs
Published: 2021-06-04 11:27:59

I want build a blog by nextjs framework.But I confusing should be use lib to parser markdown content.
I see have two lib, this is remake-html and mdx.
##So
What is best choise.I want make a blog like **Dev.to**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef4x9nuf94jzhqite519.jpg)
Vue Js Firebase project deploy with Firebase hosting
Tags: vue, firebase
Published: 2021-06-04 11:19:56

Here I will discuss about how easily it is to deploy a Vue application to firebase hosting. 
 Suppose you have completed a Vue project and now you want to deploy 
1.**First Step**-In First stage go to directory of your project in CLI and write 
`firebase login`
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9wag0nr597q1bpaeom2.png)
You you are writing it for the first time you may see something like a pop up taking you to login page.
2.**Second Step**
Then type `Firebase init`
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45st57mvmql1zop1cvlg.png)
3.**Select from options**
![altetext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbocquc5c6339yopy5wm.png)
Here we need to select the options we want with **Spacebar** after selecting the options press **Enter**
4.**Connecting to existing or use in new project current project**
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxtf5erp66ffceji1niu.png)
5.**What project you want to select?**
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3a9klcgs9olmq53udnw.png)
Here below you will see the options and select a project which you want to deploy.

6.**Select directory for public hosting**
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kizcrqx1apvvwibdvdg.png)
Here we have to type dist 

7.**SPA selection**
![altetxt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhmski55o81cd74drgmh.png)
We will select yes 
8.**Overwriting html git deploy**
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pohxjwzihpvpmhwa080.png)
Here we dont want to deploy and autobuild with git
9.**Build** 
`npm run build`
10.**Deploy** 
`firebase deploy`
![alttext](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kgzomb5oeiljv3gt0ym.png)
From dashboard click hosting and in domain you will see your domain and if you click you will see your desired app
**What if I want to change anything after Deployment**
Simple just run `npm run build` again and then `firebase deploy`