teleren/devto huggingface dataset:
¿Cómo podemos auditar las Core Web Vitals?
Tags: spanish, performance, lighthouse, webvitals
Published: 2021-10-16 20:50:24

Hace ya más de un año, allá por mayo de 2020 que Google nos anunció la incorporación de 3 nuevas métricas, "Core Web Vitals" poniendo la experiencia del  usuario en el centro.


El **Chrome User Experience Report** o CrUX, es un dataset que puedes encontrar en BigQuery se actualizada cada mes con datos de campo de usuarios de Google Chrome.

Seguro que estas siglas os suenan, y además son las métricas más importantes:
- Largest Contentful Paint — LCP
LCP mide el rendimiento de carga. ¿Cuánto tarda el contenido en pintarse en la página?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chqre4gpf17sbwyylkmd.png)

- First Input Delay — FID
FID es la capacidad de respuesta de la interfaz. ¿Con qué rapidez responde la página a las acciones del usuario?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br9rs137jh11om4utbff.png)

- Cumulative Layout Shift — CLS
CLS mide la estabilidad visual. ¿El contenido se mueve de forma inesperada en la página?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2aa3qpoeme5bmg8v7dzw.png)


- ¿Cómo podemos tener controladas estas métricas tan importantes y evaluarlas de la manera más efectiva?

- ¿Qué herramientas tenemos a nuestra disposición?
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrzmif597gvqav7udppq.png)

¡Gracias por leer!
Guide on Event Hubs with Azure Function
Published: 2021-10-16 20:07:48

<sub>Photo by <a href="https://unsplash.com/@jussararomao">Jussara Romão</a> on <a href="https://unsplash.com/s/photos/ray">Unsplash</a></sub>

[Great guide](https://docs.microsoft.com/en-us/azure/architecture/serverless/event-hubs-functions/event-hubs-functions) created by Microsoft on:
- Concepts on Event Hubs
 - Events
 - Partitions
 - Consumer
 - Azure Function Scaling 
- Performance and scaling 
  - Hosting
  - Trigger
- How to make your system resilient
  - Streaming
  - Idempotency
  - Deduplication
  - Error Handling
  - Failures & Corrupt Data
- How to secure your Azure function
  - Authentication / Identity
  - Network
- Some words about metrics / logs and how to exploit them to understand what happens (with Application Insights)


Hope this helps !
Intro to Core Web Vitals
Tags: webperf, webvitals, webdev
Published: 2021-10-16 20:01:19

The heart of the **Google Core Web Vitals** update are the new performance metrics which aim to get the user experience. It's not about technical performance, is about feeling fast...

### Core Web Vitals metrics

1. **Largest Contentful Paint** — LCP loading metric
LCP measures loading performance. How quickly is content drawn to the page?
![Large Contentful Paint logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvp5shia6z8b8pk6ez6w.png)

2. **First Input Delay** — FID interactivity metric
FID interface responsiveness. How quickly does the page respond to user actions?
![First Input Delay logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka013tyd1rv0q7hnoulq.png)

3. **Cumulative Layout Shift** — CLS visual stability metric
CLS measures visual stability. Does content move unexpectedly on the page?
![Cumulative Layout Shift logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0yqzi6y03xq6ur7cpq5.png)


### How can I calculate scores on my local device?
With these Core Web Vitals tools:

* The [Chrome Web Vitals extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma/related)
* [Google Pagespeed insights](https://developers.google.com/speed/pagespeed/insights)
* [Lighthouse](https://developers.google.com/web/tools/lighthouse)


### Conclusion
The user experience is very important because it aims to provide positive experiences that keep a user loyal to the product or brand.

I hope this article helps you get up and running with it. Thanks for reading!
Refactoring Code
Published: 2021-10-16 19:09:52

This week, I was working on refactoring my project - [Shinny-SSG](https://github.com/hphan9/shinny-ssg) and experimenting Git Rebase command. 
## Refactoring code
There were several duplicate logics when processing input in my project. For example, in both Program.cs and SubFolder.cs , I did check the File exist, File extension and calling the FileText method CreateFile and SaveFile. 
```CSharp
#Duplicate code
if (File.Exists(inputname) && (inputname.EndsWith(".txt") || inputname.EndsWith(".md")))
 {
  FileText temp = new FileText();
  if (temp.CreateFile(inputname, destination))
  {
   if (temp.SaveFile())
    Console.WriteLine($"File {inputname} is converted sucessfull in {destination} folder");
  }
 }
```
My solution for this is creating a [Generator](https://github.com/hphan9/shinny-ssg/blob/main/Generator.cs) class. This class is designed to mainly focus on generate File and Subfolder. It has 2 methods are GenerateFile and GenerateFolder. I also deleted the Subfolder class and put all the logic of CreateFolder function to GenerateFolder funtion. 
I also fixed [issue#10](https://github.com/hphan9/shinny-ssg/issues/10) to using Path class to work with File/Folder paths instead of using string. 
Another development I made for my project is [removing the Global variables](https://github.com/hphan9/shinny-ssg/commit/6d193b49ae0251412ddbf88740ce1272a285084d) and [rename variables](https://github.com/hphan9/shinny-ssg/commit/c25f781614d3e4693473d68a519b36fec9120bdb). 
However , I am still not satisfied with the code design. I still feel it needs more improvement to be cleaner. I will continue to work on it soon.
Java Script Array Methods
Tags: javascript, beginners, tutorial
Published: 2021-10-16 17:51:21

Array is data structure in which we store different collection of data. Now we are going to  see array methods.

1) **ForEach**- For looping over array we use ForEach method,
it will access every element individually and it takes callback function.

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

2) **Map** - It will create new array without changing original array. Suppose we want multiply each number by two  from given array and push it in new array , we can do it easily with help of map.

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

3) **Filter** - with help of filter method we easily filter some elements from array . suppose we want to take numbers only smaller than 2.

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

4) **Reduce** - Suppose we have array which contains number  and we want sum of those numbers. Here we can use reduce method which takes call back function and accumulator. We add accumulator and current number and at end of loop it takes accumulators value

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

5) **Push** - It will add element at end of array.

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

6) **Pop** - It will remove last element of array.

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

7) **Indexof** - It simply gives index of given element
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkmcn2cftjk68ue7oaxc.png)

8) **Reverse** - It will reverse array.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jigd6fyreyu2rmkpezbt.png)

9) **Includes** - If value is present in array it will give us true else false.

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

10) **Join** - It will join array and convert it into string
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgt79euzw3xlngfjsi4b.png)
Generators in Python
Tags: python
Published: 2021-10-16 18:18:18

Hi guys, i'm back! So today we will discuss about generators, which are functions that __*yield*__ values. The __*yield*__ keyword is like __*return*__, but it doesn't end the function. Here's an example: ```python
def <function_name>(<args>):
    # ...
    yield <something>
```

replacing the placeholders: ```python
def sq(x):
    for i in range(1, x+1):
        yield i ** 2
```

To call the iterator methods, do this: ```python
for <something> in <method_name>(<args>):
    <code>
```

And here is a full example: ```python
def sq(x):
    for i in range(1, x+1):
        yield i ** 2

for i in sq(10):
    print(i)

"""
1
4
9
16
25
36
49
64
81
100
"""
```

With that, Goodbye guys! Have a nice day!
SQL Conceptual Basics
Published: 2021-10-16 17:56:19

Today I will discuss the basics of SQL or Structured Query Language and why it might be important to learn if you are working to be a developer. SQL "databases" are tables. These tables can either be looked at as a bunch of rows on top of one another, or several columns smashed together. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbe1rq4do1tk9v8r9a63.JPG)
As a developer, we are interested in accessing and using the data stored within our SQL tables. This is when our first keyword comes into play, Select. A good analogy for Select is that it takes an item (column) from our shopping cart (table) and puts it into our basket.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yiupgy70d5ogfy88vji.JPG)
The next keyword that is important is From. From specifies the specific table we want to Select our columns from. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rchw5ghjjru3x4snjwkj.JPG)
As you can see we have eliminated our yellow column from our table and condensed our data. This is the first step in having usable information.

The next keyword to utilize for even MORE usable data is the Where keyword. The Where keyword allows us to filter out specific rows that might contain information we do not want. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/optj31vpf15xq0p2h9es.JPG)
In this instance the Where keyword is being used to select the blue columns. We are then filtering out all red elements with <> which translates to "Does Not Equal". 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nyy1j5557cebxf79viw.JPG
)
This is extremely useful to collect good or bad data and then store it for use at another time!

The final keyword we will discuss today is the Join keyword. The Join keyword allows for two tables to be selected and then joined together. It is important that when you are joining tables, the data types for columns being join match one another.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pu1uo7ro5jr2imbdxpyi.JPG)
Then the final outcome of the joined tables would look like:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3j4tgwwrqxxw8z5cxnu.JPG)
This was my intro into SQL basics! Thanks for the read.
Sources: https://www.w3schools.com/sql/sql_intro.asp
Sources: https://www.c-sharpcorner.com/article/introduction-to-sql-and-sql-commands/
Sources: https://www.sqlshack.com/introduction-to-sql/
Sources: https://www.youtube.com/watch?v=bEtnYWuo2Bw
How to Encrypt and Decrypt in Node JS using Crypto
Tags: node, javascript, crypto, security
Published: 2021-10-16 17:41:49

In this article, you’ll learn how to use the Node.js crypto module to perform cryptographic operations on data. I'll show you how to encrypt data with a secret key and then decrypt it using the same secret key when required.
You can also check video on YouTube. 
https://www.youtube.com/watch?v=9PL7EK4jXLM

Create a new project

Create a new directory in your local file system and switch to it by typing the following

```
mkdir encr_decr && cd encr_decr
npm init -y
```

Now install the crypto module

```
npm install crypto --save
```

Now make app.js.

Add following code to app.js

```
var Crypto = require('crypto');
var secret_key = 'fd85b494-aaaa';
var secret_iv = 'smslt';
var encryptionMethod = 'AES-256-CBC';
var key = Crypto.createHash('sha512').update(secret_key, 'utf-8').digest('hex').substr(0, 32);
var iv = Crypto.createHash('sha512').update(secret_iv, 'utf-8').digest('hex').substr(0, 16);
var encryptedMessage = encrypt_string("hello", encryptionMethod, key, iv);
console.log(encryptedMessage); 
// output : L2dOZjlDVmxoSDNWdmpVMkNGd0JEdz09
var decrptMessage = decrypt_string(encryptedMessage, encryptionMethod, key , iv);
console.log(decrptMessage);  
//output : hello

function encrypt_string(plain_text, encryptionMethod, secret, iv) {
  var encryptor = Crypto.createCipheriv(encryptionMethod, secret, iv);
  var aes_encrypted = encryptor.update(plain_text, 'utf8', 'base64') + encryptor.final('base64');
  return Buffer.from(aes_encrypted).toString('base64');
};

function decrypt_string(encryptedMessage, encryptionMethod, secret, iv) {
  const buff = Buffer.from(encryptedMessage, 'base64');
  encryptedMessage = buff.toString('utf-8');
  var decryptor = Crypto.createDecipheriv(encryptionMethod, secret, iv);
  return decryptor.update(encryptedMessage, 'base64', 'utf8') + decryptor.final('utf8');
};
```

Conclusion

In this article, we looked at how to perform cryptographic operations on a text by using Node.js built-in crypto module.
THINGS PYTHON CAN DO IN DEVOPS
Tags: python
Published: 2021-10-16 17:13:02

Reasons For Using Python For DevOps
Python serves as the remedy to any problem in the IT industry. When it comes to DevOps, the main focus or the ultimate goal is to reduce the time taken in the DevOps life cycle to improve efficiency. Python offers a structural solution in terms of automating the tasks in each of the stages in the DevOps life cycle.  Considering the out-of-the-box features python comes with, let us take a look at how Python is one of the best suitable options to work with DevOps.

Python is one of the best scripting languages. The vast variety of python libraries allows us to write scripts for the improved development life cycle.

python features - 

Python provides structure to write structured and readable automation scripts
The accessibility and flexibility give python an adaptive feature that results in exploring new tools and technologies without any effort
When it comes to orchestration and infrastructure automation python is quite useful, even tools like Ansible and SaltStack are written in pure python.
Due to ease of learning python saves time in building utilities.
time saving.

Even though all the tasks that we do with python can be achieved with Ruby, but people still prefer python because of the easy syntax and readability.
Which Sorting Algorithm is of Divide and Conquer Type
Tags: sorting, divideandconquer, algorithms, sort
Published: 2021-10-16 16:49:31

In a Divide and Conquer Paradigm we divide the bigger problem into smaller sub problems and call the function recursively to solve the sub problems. Divide and Conquer method is more appropriate for those problems that have polynomial time solutions. Some of the Divide and Conquer Algorithms are Insertion sort, bubble sort, etc. Read this to know more about this algorithms HERE

Divide and Conquer Paradigm. 3 — Steps

Divide. Divide the bigger Problem into smaller sub problems.
Conquer. Solve the sub problems recursively, if the sub problem is very small then solve it in straight-forward manner.
Combine. combine all the solutions into the solutions of original problem.

Merge Sort
Problem: Given an array of size n, sort them in ascending order.

Visit to read more https://hecodesit.com/which-sorting-algorithm-is-of-divide-and-conquer-type/
19ths Time the Charm
Tags: javascript, webdev
Published: 2021-10-16 16:47:46

### Hi, I'm Cole

I've been programming since around '06/'07. 
Programming well for about a year and a half.

The journey has been very start and stop. 
For instance, back in sophomore year of HS i was downloading python on the family computer. 
The installation finished, I stared at the syntax and immediately became discouraged.

>What the hell was a variable?
>Why is there x and y everywhere?
I deemed programming as : lame (read:difficult), yet interesting.

Senior year. New school, new classes.
I took an introduction to programming class and learned VB.Net.
It was way easier to work with. 
Combolists, Inputboxes. I could see exactly what I was working with. 
*(Thinking back on it now, I am most likely a visual learner, but besides the point).* 

The final project was a Santa Claus kid list. It showed the kid, their alignment, and what they wanted. 

Fast-forward to around 4 years ago. My new job deals with ALOT of Excel. Realizing everything was super slowI discover macros and userforms, and from there it was like riding a bike. 

From writing macros, I started to learn C-sharp in the hopes of working my way into the company's Software Development department.

C-sharp has a way steeper learning curve and I'm still learning the ins and outs through projects, but I wanted to pivot to web development.

I've found that Web development innovates a lot faster and it isn't a field that I can ignore professionally. So as it is with most things, I threw myself headfirst into only web development topics. 

I'm currently using the MERN (Mongodb,Express,React,Nodejs) stack, without R. 
For front-end, I have been writing everything by hand, and just recently learned how to write/use Pug.

As for me personally, I am a huge introvert, so forcing myself to write out my processes and make posts is both terrifying and cathartic. 

I look forward to posting my journey. You can also follow me on my [Github](https://www.github.com/CharleeBrown).
Array.prototype.map()
Tags: javascript, beginners, programming, html
Published: 2021-10-16 16:42:12

####**This post will explain about method map():

The `map()` method performs a function on each of the items in an array and as a return it creates a new array but does not change the original array.
 
This method calls the function once for each position(index) of the array.
 
 Does not execute the function for empty elements
 
#####**Syntax:**
```
array.map(function(currentValue, index, arr), thisValue)
```
 
**Argument :** 
currentValue – The value of element
**`index`** – Array position
**`arr`** – The array object the current element belongs to
   
    **`index`** and **`arr`** ( is optional, it is not necessary to have these statements for this                                                                                  method.) If this parameter is empty, the value "undefined" will be passed as its "this" value.
 
 
``` 
const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction);
 
 
function myFunction(num) {
  return num * 10;
}
 
Console.log(myFunction)
```
 
 
X-RAY EXAMPLE:
 
In this example we have a constant declared “numbers” and its values (65,44,12,4). 
 
Below we declare a new array as newArray and we have the method map + the function that will be executed on each of the items (index).
 
We have a function declared “myFunction” that will multiply each of the items(index) by 10, and this will return a new array, but also keeping the original array.
 
 After this execution we will have a new array with the result of the function. 
 
We have another path to the same method.

``` 
const array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => x * 10);
 
console.log(map1);
// expected output: Array [10, 40, 90, 160]
```


`illustration: `

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6icwp09lzukb5z63l9z1.png)
Help with jQuery lightbox
Tags: javascript, modal, lightbox, help
Published: 2021-10-16 16:19:55

Hello Everyone,
I was wondering if someone might be able to help with getting a lightbox to center on a page?
Here is a link to my Codepen: https://codepen.io/kurt-reynolds/pen/MWvKKMZ

When clicking on an image, it will bring up a lightbox/modal window of the image. However, the lightbox is showing up at the bottom of the page rather than the center of the page as it should.

Thank you in advance for any suggestions
Directed Acyclic Graphs Examples
Tags: algorithms, directedgraphs, graphs, acyclicgraphs
Published: 2021-10-16 15:38:00

In this post we are going to talk about Directed Acyclic Graphs Examples and Topological order in a graph.
Directed Acyclic Graphs?

Def. A Directed Acyclic Graph is is a directed Graph which contain no directed cycles

Lemma. If a graph is Directed Acyclic then G has a node with no entering edges.

Topological Order Def. A topological order of a directed graph is G = (V,E) is an ordering of its nodes as V1 to Vn so that for every edge (Vi, Vj) we have i < j.

Lemma. If a graph G is Directed Acyclic then it has Topological Ordering.

Read full post on https://hecodesit.com/directed-acyclic-graphs-examples/
Knowledge Graphs: Ontology in plain English
Tags: ontology, knowledgegraph, intelligence, artificialintelligen
Published: 2022-08-17 09:11:05

---
title: Knowledge Graphs: Ontology in plain English
published: true
date: 2021-10-16 15:30:24 UTC
tags: ontology,knowledgegraph,intelligence,artificialintelligen
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*PC-VXOLN_F3-IzmP)
_Photo by Nejc Soklič on Unsplash_

Knowledge Graphs: Ontology in plain English (translation from Russian Telegram [post](https://t.me/ontologics/472) by Prapion Medvedeva)

When building complex information systems or walking through life in general, we constantly assign types to everything we or others talk about.

A high-level ontology defines the types of entities.

Suppose we assign an entity to the wrong type. In that case, we are constantly trying to do the wrong kind of activity or operations with this entity and feel the entity doesn’t fit into the action — “square peg in a round hole”.

Look at the “problems” or “challenges”:

1. I have a problem or challenge
2. I create a strategy for the solution
3. I shape requirements for the solution
4. I build a specific plan for the solution
5. Execute the plan for the solution

Each of the actions is a different **entity type.**

If you mix those (the thing you are thinking about is of the wrong type) in improving your life, you will have a mismatch of goals or actions or feelings of not optimal activities.

When they often meet a feeling of discomfort — for example, no joy at work, they say: the problem is “I need to change the job”. That’s mismatch “I need to change work” is a type of “solution strategy”, when the problem is “I don’t enjoy my work”.

But because human decided that “the problem” is to change employment, they only look for solutions within the framework of changing employment.

It may be better or more optimal not to change the work, but have a break, take a holiday, and improve communication with colleagues or watch “[Jedi Techniques for Problem solving](https://www.youtube.com/watch?v=-MeETN1vjmk)”. Because we never analysed the real problem, we selected the wrong type for our actions.

Do you want to try?

Select the latest ten inconveniences, write them down and assign types from the list above.
Array Sum Golfed
Tags: javascript, codegolf
Published: 2021-10-16 15:25:20

```js
a = [1, 2, 3, 6, 9];
sum = eval(a.join`+`);
console.log(sum);
// outputs 21
```

Lately doing stuff with eval has been pretty fun. This does:

```js
eval('1+2+3+6+9');
```

I used a more dynamic version of this recently:

```js
const f = (o, ...a) => eval(a.join(o));
```

I had an idea for parsing Polish notation `(+ 10 10)` by just transforming s-expressions like that into function calls: `f('+', 10, 10)`... I've always liked Polish notation... 

Here is the little Polish notation thing _(warning extremely hacky)_

```js
const f = (o, ...a) => eval(a.join(o));
 
const polish = eq => eval(
    eq.replace(/\s+/g, ' ')
      .replace(/(\))\s([0-9])/g, '$1,$2')
      .replace(/([0-9]+)[^\)]/g, '$1,')
      .replace(/\(\s?([\+\-\*\\/])/g, 'f(`$1`,')
  );
 
console.log(polish('(* 2 2)'));
console.log(polish('(* 2 2 (+ 3 2 1))'));
console.log(polish('(- 10 3)'));
console.log(polish('(/ (+ 10 10 (* 2 2)) 3)'));
```


_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_