teleren/devto huggingface dataset:
A plugin for Insomnia to retrieve secrets from Azure Key Vault
Tags: webdev, rest, programming, tooling
Published: 2022-12-11 21:22:22

In this blog post I want to mention a good plugin for Insomnia to use the Azure Key Vault to store the secrets for your applications and environments.

![Azure Key Vault](https://camo.githubusercontent.com/a77c4612bc53a7fbccbbe83e02229fe4623a15ff24a836227736ee7ffed5da66/68747470733a2f2f756e706b672e636f6d2f696e736f6d6e69612d706c7567696e2d617a7572652d6b65797661756c742d736563726574732f706c7567696e2d6261636b67726f756e642e706e67)

### Overview
If you work with Rest API during your daily activities I am quite sure that you know Insomnia as one of the best tool to develop and test Rest endpoints.

![](https://images.prismic.io/cms-react-testing/3a63253f-b28d-4bcf-964d-2cca86b6676c_open-source-api-client.png?auto=compress,format)

One of the key features of Insomnia is the vastity of the plugins that you can install in your client from the [plugin hub](https://insomnia.rest/plugins).

This week I discovered one of the trending plugin is the Azure Key Vault Secrets.

![Trending](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulrj3aq6kisni89hdbdf.png)

### How to use it
- Install the plugin from the [Insomnia plugin Hub](https://insomnia.rest/plugins/insomnia-plugin-azure-keyvault-secrets).
- Add an environment variable with the name `AZURE_KEYVAULT`, only the name will do, the plugin will create the full url. For example if the full key vault url is `https://my-key-vault-name.vault.azure.net`, the variable will be `"AZURE_KEYVAULT": "my-key-vault-name"`.

![image](https://user-images.githubusercontent.com/13535297/205342705-b6b1a760-d6be-41c4-8477-9a0450faf65b.png)

- Hit `Ctrl + Space` in any place where an environment variable is available and pick `Azure Key Vault Secret`

![image](https://user-images.githubusercontent.com/13535297/205342824-e0227fcb-d0a4-4ecc-991e-9a8e2de4a1b2.png)

- The template tag will become red indicating an error, in fact it requires a secret name, click on it

![image](https://user-images.githubusercontent.com/13535297/205342990-200ad999-288e-40a2-94eb-7155a24ca633.png)

- Set the secret name

![image](https://user-images.githubusercontent.com/13535297/205344816-5ed8e14e-b740-4b45-b67d-2d522d58b68a.png)

The live preview will show the value. Click Done.

- The template tag shows now the secret name

![image](https://user-images.githubusercontent.com/13535297/205344947-a68de70e-d9fc-417d-814a-80e4b0e3766f.png)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}
Polymorphic Associations in Ruby on Rails
Tags: polymorphic, rails, associations, beginners
Published: 2022-12-11 21:17:06

In Ruby on Rails, a polymorphic association is a type of association that allows a model to belong to more than one other model on a single association. This is useful when you have a model that can be associated with multiple other models in a single association.

Here is an example of using a polymorphic association to define a relationship between a `Comment` model and both a `Post` and a `Video` model:


```
class Comment < ApplicationRecord
  belongs_to :commentable, polymorphic: true
end

class Post < ApplicationRecord
  has_many :comments, as: :commentable
end

class Video < ApplicationRecord
  has_many :comments, as: :commentable
end
```


In this example, the `Comment` model `belongs_to` a `commentable` model using a polymorphic association. This means that a `Comment` can belong to either a `Post` or a `Video` model, depending on the value of the `commentable_type` attribute. The `Post` and `Video` models both `has_many` `Comment` objects, specifying that they are the `commentable` type for those `Comment` objects.

Once the associations are defined, you can use them to access the associated objects in your code. For example, you can use the `post.comments` method to access the `Comment` objects associated with a `Post` object:


```
post = Post.find(1)
post.comments    # => Returns an array of `Comment` objects associated with the `Post`
```

You can also use the `video.comments` method to access the `Comment` objects associated with a `Video` object:

```
video = Video.find(1)
video.comments    # => Returns an array of `Comment` objects associated with the `Video`

```

Overall, polymorphic associations are a useful way to define relationships between models in Ruby on Rails when a model can belong to multiple other models on a single association. By using polymorphic associations, you can easily access and manipulate the associated objects in your code.
Best of 2022 - Recap of my blog posts
Tags: webdev, writing, motivation
Published: 2022-12-11 21:08:30

The year 2022 is almost over. I wrote a lot of articles and wanted to take a look back at my best articles this year that I'm proud of, that helped others, and that I was surprised were so well received.

## Some statistics

I wrote my **first article in 2021**, **9 in total** that year. I think I had about **700 followers** at that time. (I'm just trying to get all the information from dev.to analytics).

In 2022, I 
- wrote **63 articles** (6 more to come)
- have now **3789 followers**
- won the **Hashnode Writeathon** (4 articles in 4 weeks)
- now have **860 followers** on Hashnode
- received **[all community and writing badges](https://dev.to/badges)** on dev.to

## Best articles of 2022

### No1: How I Got My First Job As A Developer
My best article of 2022 is [How I Got My First Job As A Developer](https://yuridevat.hashnode.dev/how-i-got-my-first-job-as-a-developer), originally written for the [Hashnode Writeathon](https://townhall.hashnode.com/4articles4weeks-writeathon-the-winners).

{% embed https://dev.to/yuridevat/how-i-got-my-first-job-as-a-developer-by-making-simple-projects-seem-big-48oi %}

It got almost **10k views** on Hashnode and over **6k views** on dev.to, and got **featured on Hashnode and dailydev**, which led to a big win at the Hackathon I am proud of. 

I enjoyed writing it and that it helped many aspiring junior developers, as they commented on the article.

### No2: How To Create A Timer With React

My second best article is **How To Create A Timer With React**, which got over **30k views** on dev.to.

{% embed https://dev.to/yuridevat/how-to-create-a-timer-with-react-7b9 %}

It was the first tutorial I have ever written. It was hard but with the amazing support of the community, I could create a nice React article. **Thank you** again to everyone who has commented and made improvement suggestions.

### No3: Tools I Am Using On A Daily Basis

Another very well received article was about **Tools I Am Using On A Daily Basis**. 

{% embed https://dev.to/yuridevat/tools-i-am-using-on-a-daily-basis-4kb7 %}

It got over **13k views** and was one of the [The 7 Most Popular DEV Posts from the Past Week](https://dev.to/devteam/the-7-most-popular-dev-posts-from-the-past-week-59ba) Mid-November.

## Best articles of all time

Best article is still **How To Create A Stunning GitHub Profile** from 2021, with **40k views** on dev.to.

{% embed https://dev.to/yuridevat/how-to-create-a-stunning-github-profile-2mh5 %}

Best article on Hashnode is **How to write a promising CV**, with over **20k** views. 

{% embed https://yuridevat.hashnode.dev/how-to-write-a-promising-cv %}

I couldn't have done it with all your support. Thank you so much to each of you, my dear readers, for sticking around in 2022.

---
![Thank you](https://docs.google.com/uc?export=download&id=166Ecq6uBl61U14OUlkHOHIBv2ArKoumJ)

_Thanks for your reading and time. I really appreciate it!_
Javascript Data Types in Depth(2)
Tags: webdev, javascript, beginners, tutorial
Published: 2022-12-11 19:49:22

In JavaScript, there are only two main non-primitive data types: objects and arrays. These data types are considered non-primitive because they are complex data structures that can be used to store and organize many different types of data.

**1.Arrays**
**2.objects**

**Lets Learn prerequisites first**

**Heap** 

In computer science, the heap is a region of memory that is used to store objects and other complex data structures. It is a dynamic data structure, which means that it can grow and shrink in size as needed to accommodate the data being stored in it.

**Stack**
In computer science, the stack is a region of memory that is used to store primitive data types and the memory addresses of data structures on the heap. It is a Last In First Out (LIFO) data structure, which means that the last item added to the stack is the first item that can be removed.

**So How Non Primitive(reference) Data Type Work**

When you create a new object or array in JavaScript, the data structure is stored on the heap and a reference to it is stored on the stack. This means that when you access the object or array, you are actually accessing the reference on the stack, which points to the data on the heap.

 

`let arr =[1,2,3,4,5]



// The "arr" array  is stored on the heap
  // A reference to the "arr" array  is stored on the stack
  

let person = {
    name: "John Doe",
    age: 35
  };
  
  // The "person" object is stored on the heap
  // A reference to the "person" object is stored on the stack
  `


**But What Happen When We Mutate Array or Object**

When you mutate an array or object in JavaScript, the data on the heap is updated to reflect the changes, but the reference on the stack remains the same. This means that when you access the array or object after mutating it, you are still using the same reference on the stack to find the updated data on the heap.
`
// Create a new array
let numbers = [1, 2, 3];

// The "numbers" array is stored on the heap
// A reference to the "numbers" array is stored on the stack

// Mutate the array
numbers.push(4);

// The data on the heap is updated to [1, 2, 3, 4]
// The reference on the stack remains the same

// Access the array
let lastNumber = numbers[3];

// The reference on the stack is used to find the updated data on the heap`

codepen link 
"https://codepen.io/waqas-on-github/pen/vYrwNaz?editors=0012"
CSS Box Model
Tags: webdev, beginners, tutorial, programming
Published: 2022-12-11 19:36:20

A box in CSS consists of a content area, which is where any text, images, or other HTML elements are displayed. This is optionally surrounded by padding, a border, and a margin, on one or more sides. The box model describes how these elements work together to create a box as displayed by CSS.
Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ri2mjmdr24tzlscfsmw5.png)

## Content area
The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

If the `box-sizing` property is set to `content-box` (default) and if the element is a block element, the content area's size can be explicitly defined with the `width`, `min-width`, `max-width`, `height`, `min-height`, and `max-height` properties.

## Padding area
The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the `padding-box width` and the `padding-box height`.

The thickness of the padding is determined by the `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, and `shorthand padding` properties.

## Border area
The border area, bounded by the border edge, extends the `padding area` to include the element's borders. Its dimensions are the `border-box width` and the `border-box height`.

The thickness of the borders is determined by the `border-width` and `shorthand border` properties. If the `box-sizing` property is set to `border-box`, the border area's size can be explicitly defined with the `width`, `min-width`,` max-width`, `height`, `min-height`, and `max-height` properties. When there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the background-clip CSS property.

## Margin area
The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the `margin-box` `width` and the `margin-box` `height`.

The size of the margin area is determined by the `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, and `shorthand margin` properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

Finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the `line-height` property, even though the borders and padding are still displayed around the content.
Useful psql Commands
Tags: postgres, psql, database, devops
Published: 2022-12-11 19:34:37

**\?**  Command-line reference for psql.
**\h**  SQL Reference: list of available commands or the exact command syntax.
**\x**  Toggles between the regular table display (rows and columns) and an extended display (with each column printed on a separate line). This is useful for viewing several "wide" rows.
**\l**  List of databases.
**\du** List of users.
**\dv** List of views.
**\df** List of functions.
**\dn** List of schemas.
**\dx** List of installed extensions.
**\dp** List of privileges.
**\d name** Detailed information about the specified object.
**\d+ name** Extended detailed information about the specified object.
**\timing on** Displays operator execution time.
How to use CURL
Published: 2022-12-11 19:30:45

CURL is a command line tool that allows you to transfer data to or from any URL.  It is commonly used for testing APIs and making HTTP requests.

## Installation

 Before using CURL you need to make sure it is installed on your machine.  On Linux, you can verify that cURL is installed by running the `curl --version` command in the terminal.  If URL is installed, you will see its version.  If not, you can install it using your operating system's package manager.  For example, on Ubuntu, you can use the `sudo apt-get install curl` command to install cURL.

## Basic usage

 cURL is used in the terminal or command prompt to make HTTP requests.  Below are some basic examples of how to use cURL:

### Make a GET request

 To make a GET request using cURL, simply use the `curl` command followed by the URL of the request.  For example, to make a GET request for the URL https://www.example.com, you could use the following command:

 curl https://www.example.com


 This will send a GET request to the specified URL and display the contents of the response in the terminal output.

### Make a POST request

 To make a POST request using cURL, simply add the `-X POST` option to the `curl` command.  Also, you can pass the data you want to send in the request using the `-d` option.  For example, to send the data `name=John&age=30` in a POST request to the URL https://www.example.com, you could use the following command:

 curl -X POST -d 'name=John&age=30' https://www.example.com



### Make a request with custom headers

 You can also add custom headers to your requests using cURL.  To do so, simply use the `-H` option followed by the desired header and value.  For example, to add the header `Authorization: Bearer <TOKEN>` to your request

```curl
curl --color https://www.example.com
```
If the request is successful (i.e. the response status code is in the 2xx range), the output will be colored green. If the request is unsuccessful (i.e. the response status code is in the 4xx or 5xx range), the output will be colored red.

You can also customize the colors used by cURL by using the --style option followed by the desired style. For example, to use the solarized color style, you can use the following command:

```
curl --color --style solarized https://www.example.com
```

This will use the colors specified by the solarized style for the output.

I hope this helps! Let me know if you have any other

<br />

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png))](https://www.linkedin.com/in/israel-lopes-419a32189)
Solving day 11 of Advent of Code 2022 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2022-12-11 19:19:41

---
title: Solving day 11 of Advent of Code 2022 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2022 (day 11)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2022 in Javascript
---

{% youtube PDU0qt_Bh4Y %}
useImperativeHandle React Hook
Tags: react, javascript, beginners
Published: 2022-12-11 19:12:48

`useImperativeHandle` is a React hook that allows a child component to expose an imperative API to a parent component. "Imperative" here refers to a direct order or command.

To use imperative handle, the child component must call `useImperativeHandle` in its render method and pass in a reference to the parent component. The child can then define the imperative API by returning an object from the `useImperativeHandle` call. The parent can access this API by using the ref prop on the child component.

Here is an example of how to use `useImperativeHandle`:
```
// Child component
const Modal = ({forwardedRef}) => {
  const [isOpen, setIsOpen] = useState(false)
  useImperativeHandle(forwardedRef, () => ({
    open: () => {
      setIsOpen(true);
    },
    close: () => {
      setIsOpen(false);
    }
  }))

  return (
     <div>
      <button onClick={() => setIsOpen(false)}>Close</button>
      <p>Modal content</p>
    </div>
   )
}
export default forwardRef(Modal)

// Parent component
const App = () =>{
  const modalRef = useRef(null);

  const handleOpen = () => {
    modalRef.current.open();
  }

  return (
    <div>
      <p>Parent</p>
      <Modal forwardedRef={modalRef}/>
      <button onClick={handleOpen}>Open</button>
    </div>
  );
}
```

In this example, the `Modal` component uses `useImperativeHandle` to define an imperative API for the parent `App` component to use. The `App` component can now use the ref prop to open the `Modal` component. This allows the `App` component to control the state of the `Modal` component without re-rendering the whole parent component.

One example of where this might be useful is when you have a custom input component that needs to be controlled by a parent form. The input component might have internal state for managing focus, selection, and other aspects of user interaction. The parent form can use imperative handle to access this state and update the input as necessary, and not worry about every other child component in the parent component re-rendering with the form changes.

Another example is when you have a complex animation or transition that is implemented in a child component. The parent can use imperative handle to trigger the animation or transition and control its behavior. This allows the parent to have full control over the animation without having to know the details of how it is implemented in the child.

`useImperativeHandle` is a useful tool for creating reusable components that can be easily integrated into a parent component. It allows the child to expose a specific API to the parent, while keeping its internal implementation hidden. This helps to maintain the separation of concerns between the child and parent.
Javascript Data Types in Depth(1)
Published: 2022-12-11 18:53:57

**what are  data types** 
in computer programming, a data type is a classification of types of data that determines the possible values and operations that can be performed on that data. Data types are an essential concept in any programming language, as they provide a way for programmers to represent and manipulate data in a structured and organized manner.

**Data types in JavaScript **
**Primitive and reference (non primitive)**


**1. Numbers**
`let num =100;`

 **2.strings**
let str=`hello world`

**3. boolean**
`let present =True`

**4.Undefined**
`let myundefined = undefined `

**5.Null**
`let mynull=Null`


When a variable with a primitive data type is created, the value of that data type is directly stored in the memory allocated for the variable.
 For example, if you have a string variable called 'myString' with the value "Hello", the string value "Hello" is directly stored in the memory allocated for the 'myString' variable. This means that the amount of memory required to store a primitive value is equal to the size of the value itself.

However, this does not mean that you can change the value of the string directly. As I mentioned earlier, primitive data types in JavaScript are immutable, which means they cannot be changed once they have been created. This means that if you want to change the value of a string, you have to create a new string with the new value, and then assign that new string to the same variable.

`var myString = "Hello"; // Create a string variable with the value "Hello"
myString = "Goodbye";   // Create a new string with the value "Goodbye" and assign it to the same variable
`


So, to summarize, it is possible to update the value of a variable with a primitive data type in JavaScript. However, this does not change the value of the primitive data type itself, which remains immutable. It is only reference data types that are mutable and can be directly modified.
Supercharge Your CSS with These 3 Tools
Published: 2022-12-11 19:06:06

**CSS Preprocessors**

CSS preprocessors allow you to create stylesheets using a language-neutral format instead of writing CSS in plain text. This means that you can share your stylesheets and use them across projects without having to worry about how they were written or if they are valid CSS.

**SASS & LESS**

Sass and LESS are two popular CSS preprocessors, but there are many others out there. SASS is a superset of CSS3, with additional features like variables, mixins and functions built into the language itself. It's also more powerful than LESS when it comes to creating custom functions like map() or reduce().

**Stylus**

Stylus adds syntax highlighting to your editor so that you can easily see what's going on inside your code. It also provides a number of useful functions such as find() and replace().