teleren/devto huggingface dataset:
The Threat of Corporate LARPing: From General to C-Level Concerns
Published: 2023-10-10 23:43:57


## Understanding Corporate LARPing

Corporate LARPing, drawing inspiration from "Live Action Role-Playing", represents a phenomenon where individuals or groups within an organization adopt behaviors, roles, or personas that are not genuinely reflective of themselves or the company's culture. This inauthentic behavior can permeate all levels of a company, from junior staff to the highest leadership positions.

### Why is Corporate LARPing a Concern?

- **Erosion of Authentic Culture:** A genuine and authentic company culture is vital for maintaining employee trust and motivation. Corporate LARPing can erode this trust and create a facade that might be hard to sustain.
- **Misallocation of Resources:** Emulating or imitating other successful companies without understanding the underlying reasons for their practices can lead to misdirected resources.
- **Stifling Innovation:** Inauthentic practices can suppress genuine innovative ideas and encourage a "follow the trend" mentality.

## LARPing at the C-Level and VP Tiers

The detrimental effects of corporate LARPing become even more pronounced when they infiltrate the upper echelons of a company, specifically among the C-level executives and Vice Presidents (VPs).

### Why is LARPing at the Top Especially Concerning?

- **Setting the Tone:** These leaders are responsible for setting the cultural and operational tone. Inauthentic behavior at this level can misguide the entire organization.
- **Decision-Making Impact:** Their decisions have broader implications. LARPing can lead to decisions driven by optics rather than genuine business needs.
- **Resource Control:** With control over significant resources, any missteps due to inauthentic behavior can have large-scale consequences.

### Signs of LARPing in Senior Leadership

- **Frequent Pivot without Justification:** If there's often a change in direction without clear reasoning, it might indicate decisions based on external perceptions.
- **Overemphasis on Personal Branding:** If leaders focus more on their image than substantial contributions, it's a red flag.
- **Disconnection from Reality:** Leaders seeming out of touch with day-to-day operations or employee concerns might be more into their "role" than genuine leadership.

### Mitigating the Threat

- **Board Oversight:** The board should actively monitor and evaluate the alignment of senior leaders with genuine company values.
- **Feedback Mechanisms:** Regular reviews can offer insights into leadership behavior and pinpoint areas of concern.
- **Reinforce Organizational Values:** Consistently reverting to and reinforcing the company's core values ensures alignment and genuine behavior.

In conclusion, while corporate LARPing can manifest at all levels, its presence at the top tiers can be particularly detrimental. Companies must remain vigilant and proactive in fostering authenticity from the ground up.
ALL ABOUT ARRAYS
Tags: javascript, webdev, beginners, tutorial
Published: 2023-10-10 23:18:05

> Not Really All

#### What are arrays?

Arrays are iterables.

#### Ok, so what is an iterable?

Iterables are objects that have `Symbol.iterator` method.

#### Alright, so what can we do with that method?

Well, they allow us to use `for` and `for..of` loops on those iterables.

#### If arrays are iterables, that must mean that iterables are a broader term that include things other than arrays.

You are right, iterables include `array-like objects`.

#### What are array-like objects?

They are objects which have a length property and we can access items added to that object with indices. That means that values are saved in indexed property names 0,1,2 and so on as in picture below.


![](https://upload.wikimedia.org/wikipedia/commons/f/fc/Array-like_object_has_a_symbol.iterator_method.png)

#### So what is the difference between arrays and array-like objects?

Well, lets list the similarities. Since both are iterables, this means both have `Symbol.iterator` method so both can be iterated upon using for..of and for loop.

But arrays, have many other methods which are not available on array-like objects like `filter`, `sort`, `map` and `forEach`.


![](https://upload.wikimedia.org/wikipedia/commons/4/45/Iterables.png)

#### If I want to use those array methods on array-like objects, I know they are not available on them but is there any way around that?

Fortunately, there is. You can convert array-like objects to arrays and then use those methods as you like.

```
const createdArrayFromArrayLike = Array.from('hi')
```

`Array` is an built-in object in js and we can use `from` method to create an array from such array-like object

#### How to create arrays

```
const array = [1,2]
const array2 = new Array(1,2)
```

#### I tried to create an array with one item using `new Array(5)` but got what appears to be an empty array ??!!

![](https://upload.wikimedia.org/wikipedia/commons/8/86/Empty_array.png)

Yes, because when you pass one item to it, it interprets it as the length of the array, so you will have an array with 5 empty indices and if you tried to console.log(array2[0]) or any index you will get `undefined`

> `const array = [1,2]` this is the best syntax to create array for simplicity and performance

#### How to deal with arrays, how to add items to an existing array, how to remove, tell me more about the methods I could use to manipulate arrays.

Certainly, lets first begin with adding items to an array.

`push`

```
const array = [1,2];
array.push(3)
console.log(array) // output: [1,2,3]
```

`unshift`

```
const array = [1,2];
array.unshift(3)
console.log(array) // output: [3,1,2]
```

let learn how to remove items

`pop`

```
const array = [1,2];
array.pop()
console.log(array) // output: [1]
```

Also if we want to save the `popped` or removed item pop method actually does that it returns the popped item, so

```
const array = [1,2];
const popped = array.pop()
console.log(array) // output: [1]
console.log(popped) // output: 2
```

`shift`

```
const array = [1,2];
array.shift()
console.log(array) // output: [2]
```
Useful VSCODE Extensions for Frontend Beginners
Tags: webdev, beginners, javascript, html
Published: 2023-10-10 23:10:57

### image preview

views images in an html document on vscode's gutter.

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


### color highlight

highlights css color in vscode

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


### live server

are you tired of reloading your html document in the browser every time you do any changes? install live server. It initiates a local server which will host your document to the browser and it will auto refresh the page with any changes occuring to your project folder (folder in which your html file exists).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8hfzb0paogszkl8whxv.png)
> At the right lower corner of your vscode window, click go live to open the auto-updating html file in the browser.



### auto rename tag

if you made a `<div></div>` element in your html and then you later want to change it to a `section` element, just change the opening tag `<div>` to `<section>` and the closing tag `</div>` will change automatically to correspond to the new tag thanks to this extension.

### prettier 

it automates the indentation of your code and that includes html, css, js and even markdown.


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

> Prettier formatter in action
Entendiendo el Principio de Responsabilidad Única en C#
Tags: solidprinciples, csharp
Published: 2023-10-10 23:08:26

El Principio de Responsabilidad Única (SRP) es uno de los cinco principios SOLID de la programación orientada a objetos. Se enfoca en la cohesión de las clases y establece que una clase debe tener una única razón para cambiar. En otras palabras, cada clase debe desempeñar un solo rol o responsabilidad en nuestro sistema.

Vamos a explorar este principio mediante un ejemplo en C#.

**Ejemplo sin la implementación del SRP**

Supongamos que estamos construyendo un sistema de gestión de empleados, y tenemos una clase Employee que representa a un empleado. En esta clase, hemos incluido lógica para calcular el salario y enviar correos electrónicos a los empleados con sus recibos de pago:

```c#
public class Employee
{
    public string Name { get; set; }
    public decimal Salary { get; set; }

    public decimal CalculateSalary()
    {
        // Lógica de cálculo de salario
        // ...
    }

    public void SendSalaryEmail()
    {
        // Lógica para enviar el correo electrónico con el recibo de pago
        // ...
    }
}
```
En este caso, la clase **`Employee`** tiene más de una razón para cambiar. Si alguna de las lógicas de cálculo de salario o envío de correo electrónico cambia, la clase Employee debe ser modificada. Esto viola el SRP, ya que debería tener una única responsabilidad.

**Ejemplo implementando el SRP**
Para seguir el SRP, podemos dividir las responsabilidades en clases separadas. Aquí, creamos una clase **`SalaryCalculator`** para el cálculo de salario y una clase **`EmailSender`** para enviar correos electrónicos:
```c#
public class Employee
{
    public string Name { get; set; }
    public decimal Salary { get; set; }
}

public class SalaryCalculator
{
    public decimal CalculateSalary(Employee employee)
    {
        // Lógica de cálculo de salario
        // ...
    }
}

public class EmailSender
{
    public void SendSalaryEmail(Employee employee)
    {
        // Lógica para enviar el correo electrónico con el recibo de pago
        // ...
    }
}
```
Ahora, cada clase tiene una sola razón para cambiar. Si cambia la lógica de cálculo de salario, solo modificamos la **`SalaryCalculator`**. Si cambia la lógica de envío de correo electrónico, solo ajustamos la **`EmailSender`**.

Al seguir el SRP, nuestro código se vuelve más mantenible y flexible, y cada clase tiene un propósito claro. Esto facilita la extensión y modificación del sistema sin afectar otras partes del código.

Recuerda que el SRP es solo uno de los principios SOLID que promueve un diseño de código más limpio y eficiente. Integrar estos principios en tu desarrollo te ayudará a crear aplicaciones más sólidas y mantenibles. ¡Feliz codificación! 😊

Espero que esta publicación te ayude a comprender mejor el Principio de Responsabilidad Única en C# y cómo aplicarlo en tus proyectos. Si tienes alguna pregunta o comentario, no dudes en compartirlo. ¡Gracias por leer!
Guia de Uso da Extensão "Speak Subtitles for YouTube"
Tags: ia, programming, beginners, productivity
Published: 2023-10-10 22:59:09

Olá, comunidade de desenvolvedores! Hoje, vou apresentar uma extensão incrível para navegadores chamada "Speak Subtitles for YouTube". Esta extensão permite que você ouça as legendas dos vídeos do YouTube. Vamos ver como usá-la:

**O que é a "Speak Subtitles for YouTube"?**

A "Speak Subtitles for YouTube" é uma extensão para navegadores que transforma as legendas de vídeos do YouTube em fala. Essa funcionalidade é particularmente útil para pessoas com deficiência auditiva ou visual, além de ser uma ótima maneira de acompanhar o conteúdo enquanto realiza outras tarefas.

**Passo 1: Instalando a Extensão**

1. Abra o seu navegador (recomendamos o Google Chrome) e vá até a Chrome Web Store.
2. Na barra de pesquisa, digite "Speak Subtitles for YouTube".
3. Encontre a extensão na lista de resultados e clique em "Adicionar ao Chrome".
4. Uma janela de confirmação será exibida. Clique em "Adicionar extensão" para instalá-la.

**Passo 2: Usando a Extensão**

Agora que você instalou a extensão, é hora de começar a usá-la:

1. Vá até o YouTube e escolha um vídeo que tenha legendas disponíveis. É importante observar que a extensão funciona apenas com vídeos que possuam legendas.
2. Inicie a reprodução do vídeo.
3. Na parte inferior direita do player de vídeo, você verá um ícone de alto-falante. Clique nele para ativar a extensão.

**Passo 3: Aproveitando as Legendas Faladas**

Agora, enquanto o vídeo é reproduzido, as legendas serão transformadas em fala e você poderá ouvi-las. Isso é útil se você estiver ocupado com outra tarefa e desejar acompanhar o conteúdo do vídeo.

**Lembre-se:** A qualidade da fala dependerá da precisão das legendas originais do vídeo. Portanto, é possível que alguns vídeos tenham uma transcrição de áudio mais clara do que outros.

**Resolução de Problemas:**

1. Certifique-se de que o vídeo que você está assistindo possui legendas.
2. Verifique se a extensão está ativada (ícone do alto-falante no player do YouTube).
3. Se você não estiver ouvindo as legendas, atualize a página ou reinicie o navegador.

A "Speak Subtitles for YouTube" é uma ferramenta útil que torna o conteúdo de vídeo mais acessível. Lembre-se de que sua funcionalidade depende da qualidade das legendas do vídeo, portanto, alguns resultados podem variar.

Experimente esta extensão e torne sua experiência de assistir a vídeos no YouTube mais acessível e conveniente. Se tiver alguma dúvida ou enfrentar problemas, não hesite em pedir ajuda na nossa comunidade de desenvolvedores. Divirta-se usando a extensão "Speak Subtitles for YouTube"!
Function episode 2 The Function strikes back
Published: 2023-10-10 22:59:07

Flatiron SE Day 1 pt 2

Time to break into the second lab function lab. I have my extra large coffee so lets get into it!

This lab is all about hoisting, anonymous functions, scope, closure, and immediately-invoked function expressions.

Here is how I solved it:


/*this sets an activity for Saturday as the default if no other argument is passed in */

function saturdayFun(activity = "roller-skate"){
    return `This Saturday, I want to ${activity}!`
}

/*function expression for Monday with a Default that can be overridden */
let mondayWork = function(activity="go to the office"){
    return `This Monday, I will ${activity}.`
}

/* create a function expression wrapAdjective
 when initialized with '*' creates a function that, when called, wraps an adjective in a highlight
  when initialized with '||' creates a function that, when called, wraps an adjective in a highlight:
  */
 let wrapAdjective = function(style = "*"){
    return function(adjective="neat") {
        return `You are ${style}${adjective}${style}!`
    }
 }


I'm going to need to spend more time studying this one. The Wrap adjective function took lots of google searches and I still do not feel confident in being able to replicate this in any real world setting.
How do you define the main sections of a web page using HTML?
Tags: webdev, javascript, beginners, programming
Published: 2023-10-10 22:24:02

# Understanding the Main Sections of a Web Page with HTML

In modern web development, structuring your web page correctly is crucial. Not only does it impact SEO, but it also ensures that your site is accessible. In this article, we'll delve into the main sections of a web page and how to define them using HTML5.

## Header

The header typically sits at the top of your web page. It contains branding, navigation, and other vital information.

```html
<header>
  <h1>Website Title</h1>
  <nav>
    <!-- Navigation links go here -->
  </nav>
</header>
```

## Navigation

This section is integral for site navigation. It can be a part of the header or stand alone.

```html
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <!-- Other links -->
</nav>
```

## Main Content

This is where you put the primary content of your web page.

```html
<main>
  <article>
    <!-- Article content -->
  </article>
  <aside>
    <!-- Sidebar or related information -->
  </aside>
</main>
```

## Articles

Use the article element to mark individual content pieces as stand-alone articles.

```html
<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>
```

## Sidebar

A section that often contains related info or links.

```html
<aside>
  <h3>Related Links</h3>
  <!-- Links or other content -->
</aside>
```

## Footer

Located at the bottom, this section can contain copyright notices, links to privacy policies, or contact info.

```html
<footer>
  <p>Copyright &copy; 2023. All rights reserved.</p>
</footer>
```

Addition according to user diomed's comment follows the missing tag <section>

## Section
The <section> element represents a standalone section of content that can be thematically grouped together. It's useful for breaking up different parts of a web page that can be logically separated but don't fit into the other specific semantic elements like <article>, <nav>, or <aside>. Each <section> should be identified, typically with a heading.

For instance, if your web page has different topics or chapters, you can use the <section> element to wrap each topic.

```
<section>
  <h2>Topic 1</h2>
  <p>Content for topic 1...</p>
</section>

<section>
  <h2>Topic 2</h2>
  <p>Content for topic 2...</p>
</section>
```

In the context of the main sections of a web page, you can use the <section> element within the <main> element to group related content. For example, if you have multiple topics or chapters in the main content of your web page, each can be wrapped in a <section>.

To conclude, the <section> element is essential in creating a structured layout for your web page. It allows you to divide your content into meaningful parts, enhancing the user experience and aiding search engines in understanding the structure and importance of your content.

## Conclusion

By using these semantic elements, you can create a structured and meaningful layout for your web page. This practice not only enhances the user experience but also aids search engines in understanding your page structure.

Happy coding!
Day 829 : Famous Last Words
Tags: hiphop, code, coding, lifelongdev
Published: 2023-10-10 22:18:08

_liner notes_:
- Professional : Pretty productive. Had like 3 meetings, but since I set up some things at the end of the day yesterday, I was able to jump right in and knock them out. Got some clarification on some things and just had a few more things that need some ironing out. Fingers crossed I'll finally be able to knock these projects out this week. The sooner, the better because I've got some talks and workshops to prep for in a couple of weeks.

- Personal : Last night, I went through tracks for the radio show. Did some research on my side project. I'm working on the front end layout, but my mind keeps going to figuring out what could be a pretty challenging feature.

![In Oahu, Hawaii, looking up at a mountain with some trees at the base](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zxaprfwf95mtzdkng2q.jpg)

So, found out that 2 of my side projects have APIs that have changed... so I'll be working on that after dinner. I've got a plan, so hopefully it'll be a quick fix. Famous last words. haha. If there's time, go through tracks and maybe watch some anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube YGPU4op0NH0 %}
How to use Jekyll's link tag with data values
Tags: jekyll, ruby, liquid
Published: 2023-10-10 22:17:36

---
title: How to use Jekyll's link tag with data values
published: true
description: An overview of how to use the link tag with data-driven values from data files or front matter
tags: jekyll, ruby, liquid
# published_at: 2023-10-10 22:12 +0000
---

Jekyll's [link tag](https://jekyllrb.com/docs/liquid/tags/#link) is one of the gems of Jekyll for me. It makes it almost impossible to create broken links. However until recently I was not sure how to combine it with data values either from data files or from front matter. It wasn't clear to me how identities were resolved. The good news is that for the most part these work exactly as you might hope and you should always be to pass a reference to a data value to the tag and have it resolve during the build as you would expect.

My first case was a data-file driven navigation bar where depending on the categories a post has I want to select a navigation root item. The relevant categories are simply keys in a data file with the path to the navigation root and the display name for the link being the value. The code is below and the only thing worth commenting on is that the `assign` makes the data lookup clean and gives a simple name to reference the fields in the structure that has been found.

```liquid
    {% for category in page.categories %}
    {% if site.data.navigation contains category %}
    {% assign navigation = site.data.navigation[category] %}
    <p><a href="{% link {{navigation.path}} %}">{{navigation.name}}</a></p>
    {% endif %}
    {% endfor %}
```

My other use case is similar, where I want pages to link back to a root or core page I want to be able to describe the name and path of the page in my front matter. The link is then part of an include that has a conditional check on the top-level front matter key existing.

```liquid
{% if page.hub_page %}
<p> Part of <a href="{% link {{page.hub_page.path}} %}">{{page.hub_page.name}}</a></p>
{% endif %}
```

This is much simpler than the previous example and better illustrates how tags and variable substitution can be combined.
I'll see you after the Function.
Tags: javascript, beginners
Published: 2023-10-10 22:09:53

Day 1 Part 2
Took a lovely lunch break after the first quiz in the Flatiron SE program and now it's time to dive into Functions! 

After a great lecture on some of the basics on functions and hoisting it is time for the first lab. The run down was to build 4 function to help small shipping company calculate distances from HQ and the destination based on city blocks. HQ was Positioned on 42 steet and each block was set at 264 feet. I guess this city on has one road running north to south. Here is Below you can see how I solved this

```const hq = 42;

function distanceFromHqInBlocks(street){
    return Math.abs(hq - street);
}

function distanceFromHqInFeet(street){
    return Math.abs(hq - street) * 264;
}

function distanceTravelledInFeet(start, destination){
    return Math.abs(start - destination) * 264;
}

function calculatesFarePrice(start, destination){
    const distance = distanceTravelledInFeet(start, destination);
    if (distance < 400){
        return 0
    }else if (distance>= 400 && distance< 2000 ){
        return .02 * (distance - 400);
    }else if (distance >= 2000 && distance < 2500){
        return 25
    }else{
        return `cannot travel that far`;
    }
}

```
Obviously there are a few different ways to solve this but using Math.abs really helps minimize the lines of code needed for each function.

Reading this in Blog form has made me realize that I need to be better about commenting in my code so it is easier to understand. 

Thanks for joining me! See you next time!