teleren/devto huggingface dataset:
How to display Admin-only links with CSS
Tags: css
Published: 2022-02-21 22:39:58

It is very convenient for staff/admins to sprinkle "admin-only" links around the application. Since you're always a staff/admin user, how do you distinguish staff-only links from normal links? How do you make sure you're not exposing "dead" admin-only links to customers?

I like to annotate my admin-only links with a little SVG icon to indicate that this link is for staff/admin only:

![Annotated link with a tiny SVG icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo1dte0otkxndsusyzzo.png)

This is a normal `<a>` link with a class `admin-only`:

```html
<a href="/admin/deals/1234" class="admin-only">Internal docs</a>
```

This is implemented with a tiny piece of CSS to use the magic [::after](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) pseudo-element, and the `content` property.

```css
a.admin-only {
  position: relative;
}
a.admin-only::after {
  position: absolute;
  top: -2px;
  right: -14px;
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>');
  display: block;
  width: 12px;
  height: 12px;
  color: #444;
}
```

The `content` value could be plain text, such as ` (admin)`.

The `top`/`right` help to place the SVG icon to the right of the `<a>` text on the screen. Maybe you'll need different values for different sized icons or fonts.

I love that I can inject any SVG into the `content` property, and with the `::after` pseudo property I can place these SVG icons after any text. Seems a perfect use case to indicate which links are admin-only.
Day 4 of 100 Days of Code 
Tags: javascript, webdev, beginners, tutorial
Published: 2022-02-21 22:09:46

Today I learnt about calling a function within a function and arrays. An array is like a container that can hold more than one value at the same time. It could be an ordered list of items, composite data types or complex data types. This differentiates it from a variable that can just hold a value at a time. 

For example

```
let card = [“firstNumber” ,”secondNumber”]
console.log(card)
```
The output will be 
[“firstNumber”,”secondNumber”] 

To access an array, you do this
`card[0]`. 

Accessing an array starts at zero not one.
Arrays have their own built in methods. Methods can be described as functions on an object. The commonly known ones are;
    • Length
    • Concat
    • Push
    • Pop

**Length**
This is used to determine the number of elements in an array
`card.length` // This will return two as there are two elements in the card array.

**Concat** is used to combine two arrays and return a combined array.

```
cars =[‘ferrari’, ‘Lamboghini’]
card.concat(cars)
```
This will return [“firstNumber”, “secondNumber”,’ferrari’,’Lamboghini’]

**Push**
This is to add an element to the array

```
newCard =”ThirdNumber” 
card.push(newCard) 
```
This will add the new element “thirdNumber” into the array.

**Pop**
This is to remove an element from the array
`card.pop(newCard)` 
This removes the 'newCard' element from the array.
A Super Saiyan CSS Art!
Tags: showdev, css, html, webdev
Published: 2022-02-21 21:13:29

Yet, another CSS Art from the Dragon Ball world. I think this one doesn't need any introduction.

{% codepen https://codepen.io/t_afif/pen/VwrXNJp %}

No, the above is not an image but a lot of CSS!

I also released a website dedicated to some of my best CSS-only Art. 👇


[![CSS Art by Temani Afif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/340fgvpm1cbygp9edi39.png)](https://css-only.art/)



----

I shared this one on Twitter so don't hesitate to give some likes and retweets. If you are not following me yet, it's time to do it otherwise you will miss a lot of great content. 

{% twitter 1495716241453035521 %}

---

Stay tuned for crazier CSS Arts!

![Stay Tuned](https://media.giphy.com/media/3XmYIITQxzMtqcnaa7/giphy.gif)

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

<center>**OR**</center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)
Liderança técnica: acompanhamento X autonomia
Tags: liderança, leadership
Published: 2022-02-21 21:00:50

---
title: Liderança técnica: acompanhamento X autonomia
published: true
description: 
tags: liderança, leadership
//cover_image: https://direct_url_to_image.jpg
---
Ao olhar para minha carreira eu posso dizer que tenho mais experiência e bagagem teórica em assuntos relacionados a tecnologia, em especial na área de desenvolvimento de software. Isso devido a ter feito uma graduação e pós-graduação em Ciência da Computação, bem como ter lido uma boa quantidade de livros e muitos posts, além de ter colocado um grande número de produtos em produção. Digo isso pois, apesar de vir liderando times técnicos a pouco mais de uma década e lido bons livros e posts, eu me sinto mais seguro em escrever sobre tecnologia do que sobre liderança. Então, leve isso em consideração ao ler este post :)

O que eu gostaria de compartilhar neste post é um pequeno "framework" que venho usando regularmente nas minhas reuniões de 1-1 com as pessoas dos meus times. Eu tento descrever para eles dois aspectos da liderança, que demonstrei nesta imagem:

[![acompanhamento_autonomia](https://eltonminetto.dev/images/posts/acompanhamento_autonomia.png)](https://eltonminetto.dev/images/posts/acompanhamento_autonomia.png)

De um lado temos o acompanhamento que uma liderança deve fazer em relação ao trabalho e carreira das pessoas. E do outro temos a autonomia que as pessoas precisam para realizar seu trabalho. Nos dois extremos do espectro estão duas características que eu acho muito nocivas em uma liderança: o microgerenciamento e a ausência. O que eu pergunto regularmente para as pessoas que eu lidero é se eu não estou me aproximando demais de algum dos extremos. Meu objetivo é sempre ter um equilíbrio entre acompanhamento e autonomia, mas esse pêndulo pode pender um pouco para um dos lados, dependendo de coisas como a maturidade do time, do negócio, etc. Mas em nenhum cenário eu vejo motivo para uma liderança chegar a um dos extremos desenhados acima.

Como comentei no começo do post, eu cheguei a essa conclusão de maneira empírica. Se você conhecer alguma teoria, livro ou post que confirma essa minha noção, ou a refuta, por favor compartilhe nos comentários.

Originalmente publicado em [https://eltonminetto.dev](https://eltonminetto.dev/post/2022-02-21-acompanhamentoxautonomia/) em 21 de Fevereiro, 2022.
JavaScript Data Structures and Algorithm.
Tags: javascript, algorithms
Published: 2022-02-21 20:55:35

High-level data structures are methods of storing and organizing data so that it can be easily modified, navigated, and accessed. Data structures define how data is collected, the functions we can use to access it, and relationships between data.

Data structures are used in almost every area of ​​computer science and programming, from operating systems to simple vanilla code to artificial intelligence.

Data structures enable us to:
    • Manage and utilize large datasets
    • Search for particular data from a database
    • Design algorithms that are tailored towards particular programs
    • Handle multiple requests from users at once
    • Simplify and speed up data processing

Data structures are essential for efficient problem solving in the real world. Finally, how we organize data has a huge impact on performance and usability. In fact, most top companies require a strong understanding of data structures.

JavaScript has primitive and non-primitive data structures. Primitive data structures and data types are native to programming languages. These include Boolean values, nulls, numbers, strings, and more. Non-primitive data structures are defined by the programmer, not the programming language. These include linear and static data structures, as well as dynamic data structures such as queues and linked lists.

1. Array
The most basic array of all data structures stores data in memory for later use. Each array has a fixed number of cells that are determined at creation time, and each cell has a corresponding numeric index used to select the data. Whenever you use an array, you only need the index you want, and you can access any data in it.

2. Queues
Queues are conceptually similar to stacks; both are sequential structures, but queues process items in the order they were entered, not the order they were last entered.
Therefore, queues can be configured as a FIFO (First In, First Out) are viewed from stacks. These are useful as buffers for requests, storing each request in the order it was received until it can be processed.

3. Linked List
Linked lists are a data structure that, unlike the previous three, does not use physical placement of data in memory. This means that linked lists use a referencing system instead of indices or positions: elements are stored in nodes containing a pointer to the next node, which is repeated until all nodes are linked.

This system enables items to be loaded and unloaded efficiently without reorganization.
Hi, I'm Daniel
Published: 2022-02-21 20:51:03

I am a new programmer who recently joined a coding bootcamp, and man being introduced to the world of coding through this lens reminds me a lot of "Scott Pilgrim V.S. The World". Programing being this new alluring concept with tons of potential for creative expression A.k.a Ramona flowers, and every necessary programing language or concept required to build your ideas like the several(7) evil exes that stand between you and your idea. Most of the languages and their concepts feel like the obstacle that want to beat you down, but as you start to overcome the barrier of the learning curve they start to give a lot of perspective on the programing processes as a whole.
JavaScript: Number conversions using parseInt() and toString()
Tags: javascript, beginners, programming
Published: 2022-02-21 20:33:16

Anyone who codes in JavaScript regularly has made use of `parseInt()` to convert an integer that's expressed as a string into an actual number type that one can use in calculations.

The MDN defines the use of `parseInt()` as follows:

```javascript
parseInt(string)
parseInt(string, radix)
```
`string` is the value to parse.  In the case that it's not a `string` type, it is internally converted to a `string` before the parsing occurs.

`radix` is a value between 2 and 36 which is the base of the `string` parameter value.  It does NOT default to base 10 if this parameter is omitted.  For example, a string with the prefix "0x" will default to base 16, hexadecimal. To learn in greater detail how various inputs are treated, please refer to the [MDN article on parseInt()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt#description) for more details.

## parseInt()

`parseInt()` can be used to convert numbers to and from various bases if one understands how the radix parameter functions.

For example:

```javascript
parseInt("23", 4)
parseInt("0x23")
parseInt("23", 2)
```
will output:

```
11
35
NaN
```
In each case we are answering the question: "What is the base 10 value of 23 in base 4?  in base 16? in base 2?"

1. "23" in base 4 is `2 * 4 + 3`, or `11` in base 10.
2. "0x23" implies base 16.  `2 * 16 + 3`, or `35` in base 10
3. "23" in base 2 is `NaN`, since base 2 digits can only include `0` and `1`. 

Imagine how useful this could be if someone needs you to quickly interpret binary "1110010"!  

```javascript
parseInt("1110010", 2)
```
will give us the correct base 10 number:

```
114
```


##toString(radix)

Using `toString(radix)` with a number object overrides the the Object object method `toString()`.  When used with number objects, `toString(radix)` returns a string representation of the number object in the specified base.

`toString(radix)` answers the question: "How do I write the value 23 in base 4? in base 16? in base 2?"

```javascript
let num = 23

num.toString(4)
num.toString(16)
num.toString(2)
```
And the output:
```
113
17
10111
```
In effect, `parseInt()` and `toString()` act as inverses of each other:

```javascript
let num = 23

parseInt(num.toString(4), 4)
parseInt(num.toString(16), 16)
parseInt(num.toString(2), 2)
```
And the result:
```
23
23
23
```

`toString(2)` is particularly useful if you need to generate the binary representation of a number for any reason. Or how about converting a hexadecimal number (base 16) into its binary equivalent?

```javascript
parseInt("1F4", 16).toString(2)
```
```
"111110100"

(in case you were wondering, this is 500 in base 10!)
```


I hope this brief exploration of these two related methods leaves you with a greater understanding of how they go beyond converting integers to strings and vice versa. They can be used to translate numbers to and from other bases, as well!

Happy Coding!
Python:Introduction To Data Structure and Algorithm 
Published: 2022-02-21 20:19:10

Key to learning and mastering any programming language is knowing its data structure and how to write algorithm using that specific language. Python being one of the most popular language in programming arena, mastering its data structure is very important.

Data structures are containers used for organization of data for storage and easy retrieval.
In this article we will discuss some of the most popular and used data structures in python.

1. **List**: A list is used to store multiple data items in a single variable.

```
fruits = ['Apple','Orange','Guava']
```
Lists are ordered. This means you can retrieve a list item via an index.

```
result = fruits[1] #Orange
```
It is worth to note that lists are zero base indexed. This means that the first item in the list is having index zero.

```
result = fruits[0] #Apple
```
The last item in the list can be retrieved as follows:
`result = fruits[-1]`
Just like string, lists can be sliced.

```
result = fruit[1:2]
```
Lists are mutable. Meaning you can add and remove items as you desire.
2. **Tuples**:
Unlike lists, Tuples are immutable.This is to say that once a tuple is defined, it cannot be changed.
Items in the tuple can be modified but you cannot add or remove an item from the tuple. A tuple is defined as follows:

```
Dimension = (20,30,40)
```
3. **Sets**:
Sets unlike tuples can not contain duplicates. They are suitable for storing data that should not contain duplicates ie IDs.
We define sets as follows:

```
professionals = {'Doctor','Teacher','Engineer'}
```
Sets are immutable and unordered.
You can get the length of a set using the method `len()`
For example:

```
professionals = {'Doctor','Teacher','Engineer'}
len(professionals ) #3
```
4. **Dictionaries**:
They store data in key-value pairs. They are ordered(As per version 3.7 and above), changeable and do not allow duplicates.

```
car= {
  "brand": "Ford",
  "model": "Mustang",
  "year": 1964
}
print(car)
```
5.**Stack**:
 stack is a linear data structure that stores items in a Last-In/First-Out (LIFO) or First-In/Last-Out (FILO) manner.
Stack in Python can be implemented using the following ways: 

list
Collections.deque
queue.LifoQueue
6. **Queue**:
Like stack, queue is a linear data structure that stores items in First In First Out (FIFO) manner. With a queue the least recently added item is removed first. A good example of queue is any queue of consumers for a resource where the consumer that came first is served first.
Operations associated with queue are: 
 

Enqueue: Adds an item to the queue. If the queue is full, then it is said to be an Overflow condition – Time Complexity : O(1)
Dequeue: Removes an item from the queue. The items are popped in the same order in which they are pushed. If the queue is empty, then it is said to be an Underflow condition – Time Complexity : O(1)
Front: Get the front item from queue – Time Complexity : O(1)
Rear: Get the last item from queue – Time Complexity : O(1)
Data Structures and Algorithms using Python
Tags: python, dsa, 100daysofcode
Published: 2022-02-21 20:13:22

As the name suggests, data structures allow us to organize, store, and manage data for efficient access and modification.

##1. Lists
A list is defined using square brackets and holds data that is separated by commas. The list is mutable and ordered. It can contain a mix of different data types.

![Lists](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1io8oq6f85xa43fd92q.jpg)

##2. Tuples
A tuple is another container. It is a data type for immutable ordered sequences of elements. Immutable because you can’t add and remove elements from tuples, or sort them in place.

![Tuples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xkcx22rby2t7y7pikpn.jpg)

##3. Sets
Set is a mutable and unordered collection of unique elements. It can permit us to remove duplicate quickly from a list.

![Sets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag4ach683veqi64s70xj.jpg)

##4. Dictionaries
Dictionary is a mutable and unordered data structure. It permits storing a pair of items (i.e. keys and values). As the example below shows, in the dictionary, it is possible to include containers into other containers to create compound data structures.

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

##5. Stack
Stack is a linear data structure where elements are arranged sequentially. It follows the mechanism L.I.F.O which means last in first out. Stack has the following operations:
>
- Push → inserting an element into the stack
- Pop → deleting an element from the stack

##6. Queue
Queue is a linear data structure where elements are in a sequential manner. It follows the F.I.F.O mechanism that means first in first out. Queue has the following operations:
>
- Enqueue → inserting an element into the queue. It will be done at the rear.
- Dequeue → deleting an element from the queue. It will be done at the front.

##7. Tree
Trees are used to define hierarchy. It starts with the root node and goes further down, the last nodes are called child nodes.

##Algorithms
Algorithms are instructions that are formulated in a finite and sequential order to solve problems. When we write an algorithm, we have to know what is the exact problem, determine where we need to start and stop and formulate the intermediate steps. There are three main approaches to solve algorithms:

- **Divide and Conquer** → it divides the problem into sub-parts and solves each one separately
- **Dynamic programming** → it divides the problem into sub-parts remembers the results of the sub-parts and applies it to similar ones
- **Greedy algorithms** → involve taking the easiest step while solving a problem without worrying about the complexity of the future steps
Top 3 New UI Kits For Your Next React Project
Tags: javascript, react, html, css
Published: 2022-02-21 19:48:28

User interface is the most important thing when we talk about the beautiful part on front-end, and choose the right package for your project is very important too, and according to the project that currently you are working is important to set a list of features you need, could be features like dark mode, components to handle calendar dates, the freedom to customizing it or simply cause the library likes you and that's it
  
## Next UI
![Next UI Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kk6bujlvc8bq33gc1k1.png)

## Mantine
![Mantine Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74mmqydqtit7gkym2xor.png)

## Radix UI
![Radix UI Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw0ie12s8q29al30hse6.png)
 
All of them have pro features like: 

* Dark mode
* fully customizable
* Open source
Ng-News: Issue 22/07
Tags: angular, webdev, javascript, programming
Published: 2022-02-21 19:43:22

This is a weekly posting, covering the latest updates from the Angular community.

{% youtube j0z8cCm2rlk %}

## State of JavaScript 2021

State of JavaScript presented their results for 2021 which led to some emotional discussions, tweets, etc. State of JavaScript is a yearly survey that also asks developers about their usage of frameworks and how satisfied they are with them.

Angular grabbed second place in terms of usage, with React being unsurprisingly the unchallenged number one. In terms of satisfaction and interest, Angular finished last but one.

Even before the survey ended, some quite influential people raised their concerns about the representation of the survey sampling. For example that the proportion of React developers might be much higher than we find in the real world.

Either way, State of JavaScript is definitely worth a look. Even if it is to get a good overview about tools, libraries, techniques.

## How to contribute to Angular Material

Winning developers for Angular is something that all of us can do. Especially, if we improve the framework itself by contributing code. Dmytro Mezhenskyi published a video where he shows the whole process that is required to find an issue on GitHub, fix it, make a PR and get it merged. 

{% youtube h1sNrTgKdtY %}

## Be proactive when you join an Angular project

Tim Deschryver wrote good article about tools and techniques that you should use to improve the quality of your codebase.

You can also see it is a reference configuration for every Angular application.

https://dev.to/this-is-angular/be-proactive-when-you-join-an-angular-project-5469

## Minor Updates

Cypress 9.5: https://github.com/cypress-io/cypress/releases/tag/v9.5.0

PrimeNg 13.2: https://github.com/primefaces/primeng/releases/tag/13.2.0
Rails 7 + Devise + Log out
Tags: rails, tutorial, devise, programming
Published: 2022-02-21 19:41:47

A Quick and Dirty way to get the redirection working on Logout when using Devise in a Rails 7 app.

You probably have noticed that most of the redirects in Devise a somehow broken. This is due to the way Turbo interfere with them as it catches the 200 status code.

There are already a lot of posts explaining how to patch this while waiting for an official release. But, if your main issue is about the "redirect on log out" not working, then you can easily fix this.

Instead of calling `destroy_user_session_path` in a `link_to`, call it inside of a `button_to`

Here is the full code:
```
<%= button_to(
        "Log Out",
        destroy_user_session_path,
        method: :delete
      ) %>
```

And Voilà! This simple hack enables your users to be redirected to the root_path of your app in seconds.
Simplified: Implementing fontawesome (free version) into a React Project
Tags: javascript, tutorial, react, productivity
Published: 2022-02-21 19:40:33



1. Copy and paste the code in your IDE teminal to run and install the necessary dependencies:
`npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons`

2. Create a _fontawesome.js_ file in the React project src folder

3. Add the following line of code to  _fontawesome.js_ file to  import the whole fontwawesome brand library to project:
`import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);`

4. Import  _fontawesome.js_ file into _index.js_ in the parect directory of the React project.

5. Go to file component where fontawesome icon is to be used, and  add this line of code among the top level:
`import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';`

6. Use Fontwasome icon in the project.
`<FontAwesomeIcon icon={['fab', 'facebook']} />`

Do drop your thoughts and feedback for more collaborative updates on this and many more. ✌