teleren/devto huggingface dataset:
Getting Started with 11ty
Published: 2022-03-01 03:29:55

Using the tutorial provided on https://www.11ty.dev setting up 11ty was a breeze. The steps included in this tutorial allowed me to get it up and running on my terminal with only a few commands.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sacwpzz405ed3kuk73wd.png)
With this set up, you can edit the file installed and have whatever is written in that appear on your webpage. This was very intuitive and simple to get working.


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

### 11ty Template
Using an 11ty template will allow you to make edits of the code using VSCode which will make changing the webpage more easily. Using the template provided I noticed the code uses post files to make the articles. These are all .md files which is the same as it is in the command line 11ty example. Provided is a screenshot of what it looks like in VSCode and when ran it will also provide a localhost page that will show the articles. This makes changing the content of the pages much simpler.

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

### Hax11ty
With all this said I was unable to get my hax11ty page working. I followed a template provided and linked below. Hax11ty is supposed to make working with 11ty easier and provide simpler static changes. This unfortunately did not work for me.

## Repos Used
11ty - https://github.com/Nick-Telles/11tyattempt/find/master
hax11ty - https://github.com/Nick-Telles/hax11tyattempt
Create a New Excel File
Published: 2022-03-01 03:21:31

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/create-excel-spreadsheet/
---

The IronXL library can be used to create Excel documents from in XLS and XLSX formats.

Using the IronXL API it is intuitive to populate your workbook and save it.

**C#:**
```
using IronXL;
 
//Create new Excel WorkBook document. 
//The default file format is XLSX, but we can override that for legacy support
WorkBook xlsWorkbook = WorkBook.Create(ExcelFileFormat.XLS);
xlsWorkbook.Metadata.Author = "IronXL";
 
//Add a blank WorkSheet
WorkSheet xlsSheet = xlsWorkbook.CreateWorkSheet("new_sheet");
 
//Add data and styles to the new worksheet
xlsSheet["A1"].Value = "Hello World";
xlsSheet["A2"].Style.BottomBorder.SetColor("#ff6600");
xlsSheet["A2"].Style.BottomBorder.Type = IronXL.Styles.BorderType.Double;
 
//Save the excel file
xlsWorkbook.SaveAs("NewExcelFile.xls");
```

**VB:**
```
Imports IronXL
 
'Create new Excel WorkBook document. 
'The default file format is XLSX, but we can override that for legacy support
Private xlsWorkbook As WorkBook = WorkBook.Create(ExcelFileFormat.XLS)
xlsWorkbook.Metadata.Author = "IronXL"
 
'Add a blank WorkSheet
Dim xlsSheet As WorkSheet = xlsWorkbook.CreateWorkSheet("new_sheet")
 
'Add data and styles to the new worksheet
xlsSheet("A1").Value = "Hello World"
xlsSheet("A2").Style.BottomBorder.SetColor("#ff6600")
xlsSheet("A2").Style.BottomBorder.Type = IronXL.Styles.BorderType.Double
 
'Save the excel file
xlsWorkbook.SaveAs("NewExcelFile.xls")
```
Docker Introduction
Tags: webdev, containers
Published: 2022-03-01 02:55:54

## Docker and Containers
Docker Engine is an extremely powerful tool that allows developers to containerize applications. Docker themselves call containers, 

> a standard unit of software that packages up code and all its dependencies so the application runs quickly and reliably from one computing environment to another.

Containers are able to run 

## Getting Started With Docker
To get into using docker I first went to [Play with Docker](https://labs.play-with-docker.com/#) and made an account. Once you're in, you can run a new instance and create your very own Docker server.


## Using Microservices and APIs in Docker
For this lab, I used Docker to create an application that displays articles from a news API. These are the steps I took:

- Create a new instance in Play with Docker

- Run `git clone https://github.com/heyMP/news-api-workshop && cd news-api-workshop` to clone the repo with the news API.

- Run `cp dot.env.example dot.env` to configure custom settings for the application.

- Login and get an API key from [](newsapi.org) that you will put into the `dot.env` file that was created in the last step.

- Open port 4000 and copy the link of the page that failed to load. Paste the link in the same `dot.env` file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9amriijpoi3zir1m6dv.png)
The file should look similar to this, except with your own API key

- Run the `docker-compose up` command to run the application

- Open port 80 and your application should come up and look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxyti2i07sy4soxuo4u0.png)
All you need to master javascript
Tags: programming, webdev, javascript, beginners
Published: 2022-03-01 02:48:09

# [MasterJS](https://masterjs.vercel.app/) website will show your learning path

- adding a star to the repository is really help me.

hello everyone this is my new project to help peopole learning javascript
#### what is [masterJS](https://masterjs.vercel.app/)

All-In-One, free resources and collections related to javascript. we provide useful links to help you learn JavaScript, web development and other related stuff along with some of the best resources available online.

link to github: [devSupporters/masterJS](https://github.com/devSupporters/masterJS)
GitHub Backup Action Utilities
Published: 2022-03-01 02:41:13

Hi, good morning everyone.

I want to introduce a tool based on GitHub Action to backup GitHub data to DropBox.

As an engineer, GitHub is the software we use frequently, and the information stored on GitHub is an important asset for us as engineers. To back up this data, I developed this tool.

The address of the tool is: https://github.com/chyroc/github2dropbox.

This tool can back up a variety of GitHub data, including:

- Star
- Follower
- Following
- Repo
- Issue
- Issue Comment
- Gist
- .git

Very simple to use:

add file: `.github/workflows/github-backup.yml` to your project

```yaml
name: github-backup

on:
  push:
    branches: [ master ] # trigger on pushes to master
  pull_request: # trigger on pull requests

jobs:

  run:
    runs-on: ubuntu-latest
    timeout-minutes: 60 # timeout after 60 minutes
    steps:
      - name: Backup
        uses: chyroc/github2dropbox@v0.2.0
        with:
          DROPBOX_TOKEN: ${{ secrets.DROPBOX_TOKEN }} # dropbox token
          GITHUB_TOKEN: ${{ secrets.G_TOKEN }} # github token
          ENABLE_REPO: true # enable repo backup
          ENABLE_STAR: true # enable star backup
          ENABLE_FOLLOWER: true # enable follower backup
          ENABLE_FOLLOWING: true # enable following backup
          ENABLE_GIST: true # enable gist backup
          ENABLE_ISSUE: true # enable issue backup(need ENABLE_REPO=true)
          ENABLE_ISSUE_COMMENT: true # enable issue comment backup(need ENABLE_REPO=true)
          ENABLE_REPO_GIT: true # enable repo .git folder backup(need ENABLE_REPO=true)
```

When GitHub Action runs, the tool will use the GitHub Access Token you configured to access the GitHub API, store it as a zip, json, etc. file, and upload it to DropBox.
React-select's formatOptionLabel
Published: 2022-03-01 02:37:56

Today is officially 90 days that I’ve been a junior software engineer and I thought I would clarify or further explain a feature that I learned about today React-selects prop: formatOptionLabel.

Let me start from the top, React-select is a select control for React that you can import within any app like so:
`import Select from ‘react-select’;`

After you import the select component from react-select then you’re good to use it, like for example if you wanted just a select drop down you could do this:
```
import Select from "react-select";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select />
    </div>
  );
}
```
Code sandbox example below:
[https://codesandbox.io/s/compassionate-montalcini-0hfzz0?file=/src/App.js:23-195](https://codesandbox.io/s/compassionate-montalcini-0hfzz0?file=/src/App.js:23-195 )

formatOptionLabel is a prop that you pass to the select component to format the option labels in the menu as well as format the value that displays. The parameters that you will pass in to formatOptionLabel will be the option and context. Context can either be menu which means the drop down options or it can be value which is that value displayed in the select field.

```
import React from "react";
import Select from "react-select";

const myOptions = [
  { value: "1", label: "One", emotion: ":D" },
  { value: "2", label: "Two", emotion: "D:" },
  { value: "3", label: "Three", emotion: ":)" }
];

export default function App() {
  return (
    <div>
      <h1>Let's do this</h1>
      <Select
        options={myOptions}
        formatOptionLabel={(option, { context }) => {
          return context === "menu" ? option.label : option.value;
        }}
      />
    </div>
  );
}
```

Here’s a Code sandbox example below:
[https://codesandbox.io/s/magical-euler-ezwwwn?file=/src/App.js](https://codesandbox.io/s/magical-euler-ezwwwn?file=/src/App.js )

Based on the context we can make it so that the dropdown values and what is displayed is different! I was having trouble finding different examples of formatOptionLabel so I hope this helps someone!
Why is Docker powerful?
Published: 2022-03-01 02:03:08

Docker as tool is very powerful due to it's open source nature and how it can help application development. From the use for this lab I found it to be similar to a virtual machine. It runs on its own and allows you to code and run programs seperate from the machine you are using. Docker runs using containers to house your projects. 

###### Play with Docker
The play with docker tutorials provide an excellent start point for learning how to use this technology. It gives a good rundown on using a news api key to pull articles and information from the source of the api key and pulling that information up on your local machine using ports 80 and 4000. This information is changed in the dot env file contained within our docker container. This can be leveraged with other sources such as our Nasa news example we worked on earlier.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wobn81sj2zqbkz79vlmi.png)

###### NASA News
After attempting to leverage our nasa news onto the container I was able to use a link to our GitHub repo and have it pull the data from there. this was done by making small changes to the existing news api tutorial that was followed earlier. The data pulled from our repo appeared under port 4000 similarly to how it worked in the tutorial.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzr3s9dcmsbwsgc8ly23.png)
Tipado estático en python
Published: 2022-03-01 02:02:37

La forma en que se cambiar de tipado dinámico a estático en Python es:

**Declaración de variables**

```python
a: int = 5
b: str = 'Hola'
c: bool = True
```

**Parámetros y retorno en funciones**

```python
def suma(a: int, b: int) -> int:
    return a+b
```

**Para estructuras de datos a partir de Python 3.9**

```python
Vector = list[float]
ConnectionOptions = dict[str, str]
Address = tuple[str, int]
Server = tuple[address, ConnectionOptions]

def broadcast_message(
        message: str,
        servers: tuple[tuple[str, int], dict[str, str]]) -> None:
```
Getting Started with 11ty
Tags: html, webdev
Published: 2022-03-01 01:44:34

This is my first time using 11ty, so I had some trouble creating a blog at first, so I followed this [LINK](https://w3collective.com/create-static-website-eleventy/) to start.

**Besides step 1 using VSC, I created all these files and folders within the project through Notepad**
## Step 1

- 
You start of by creating a directory in the terminal

```
mkdir myblog
cd myblog
```
 (myblog is what I called my project).

## Step 2

- 
Next is creating a `package.json` file

```
npm init -y
```
Then you install it

```
npm install --save-dev @11ty/eleventy
```

## Step 3

- 
Creating a folder called `_includes` and a file within called `layout.njk`. 


## First Blog

- 
Now you have to create a folder where all your `.md` files will be held. I created a folder called `blog` and the first markdown file `firstblog.md`

- 
Now you can compile the project with

```
npx @11ty/eleventy --serve
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e80luxmyv1v0z880v95v.png)
- 
Your terminal should have compiled an `index.html` into a `_site` folder.

## Final Project

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

## Plug-in

- The plug-in is used to make the date more presentable and easier to read. 

- To do this, create a file `.eleventy.js`. Then you put `npm install --save-dev eleventy-plugin-date` and do `npx @11ty/eleventy --serve`.

- You'll see a http link containing `localhost`. Do `ctrl + click` to open your page!

[Here](https://github.com/NikitaL2022/mybog) is a link to my Github repo and [Here](https://github.com/elmsln/edtechjoker/tree/master/sp-22/week-6-7) for the 11ty lab.
Getting Started in Web 3.0
Tags: web3, blockchain, nft, writing
Published: 2022-03-01 00:01:51

As you already know, the web is an emerging system that keeps improving and always gets better because of emerging technologies. 

I decided to write a free ebook on "Getting Started In Web 3". It's a short and concise book on the basics of web 3, what you need to know to get started. 

Basic explanations of NFTs, DAOs, Blockchain games, DeFi are in this book.

You can get the free ebook with this link! 

[https://bit.ly/web3Intro](https://bit.ly/web3Intro)

![Getting started in web 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh473op74rxru3yvumqv.jpg)

Note that, everything you can do in Web 2, you can also do in web 3. Get my free ebook to get more insight on web 3.

You can share this with whoever you think might need it.
Day 539 : Wait
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-28 23:58:46

_liner notes_:
- Saturday : So we did the radio show from the station this week since my co-host is back in town. Actually found a parking spot and had some time to work on my side project. We did the radio show and had a good time. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a hand holding a needle fish with the words Feb 26th 2022 New Mask, Who Dis?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wgfp9osxao6ebxmoi88.jpg)

- Sunday : Got up early so I could drive back to the spot and do https://untilit.works . I was pretty tired, but did manage to stuff done. Some of which is creating a CFP (Call For Papers) and submitted it to some conferences. Now we wait. haha Also did some planning for my trip to Europe.

- Professional : Woke up to some messages from some folks I reached out to from overseas. Really trying to get this European trip filled out. I still have to purchase tickets. I'll do that tomorrow. Reached out to more folks. Had some meetings. Worked on a demo application. .

- Personal : I still need to style some stuff for my side project and then add the same components to the admin dashboard. Then I need to add a request feature. Still have some work to do.

![View from a field of purple flowers and green grass on top of a mountain looking at other mountains as the sun sets in Mont Coin, France](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8znqi1n5sy4teneskic.jpg)

Going to work on my side project some more. There's a new episode of Demon Slayer and it looks like it's a movie because it's 2 hours long. Going to try and get some features features completed and watch the movie.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube l7fc05t0q4k %}
Combination of hobby and career changing.
Published: 2022-02-28 21:37:13

I have only recently started coding and I have been looking into just how to practice more when I get the chance. With this in mind, I decided to just write out a simple bit of code that produces a life total message whenever you fall below or at a certain percentage in this game I play called Magic The Gathering. To do this, I decided to incorporate a few of the things I learned in my first phase of the program I'm working with: if...else statements, and just a basic function. I added in the built-in method of .random() just to help see if additional messages would come up.

I wanted to keep it relatively simple given that there are thousands of cards and so many different creatures. So I started by having these variables assigned from the start.

`const damage = (Math.random() * 10) + 10;

const startingLifeTotal = 40

const postCombatLifeTotal = startingLifeTotal - damage`

This way we know how starting total is 40 and our life total after damage, postCombatLifeTotal, is equal to the starting minus the damage.

The next part is where I wanted to get some practice with functions and if...else if statements.

`function lifeMessage(cLife) {let message
    if (cLife === 0) {message = 'You have died'}
    else if(cLife < startingLifeTotal * .2) {message = 'Engaging Emergency Protocols'}
    else if (cLife <= startingLifeTotal * .5) {message = `${cLife} is pretty bad, but you can come back from it!... Maybe?`}
    else if (cLife <= startingLifeTotal * .75) {message = 'Tis just a flesh wound!'}
return message}`

I ran a couple of tests and it works, but the issue here is given that the damage only falls into a specific range, it ends up that postCombatLifeTotal never ends up going below 50%. This is the one issue I have run into. I am  of course going to work on this and fix this as time goes on. I could use a fetch() to get the power of a specific creature card or have the number be a user input instead. I will of course keep everyone posted when I do that. Until later everyone! Happy coding!
Monitoreo y Observabilidad
Tags: devops
Published: 2022-02-28 22:48:58

En ocasiones se habla indistintamente de monitoreo y observabilidad. Cómo es que esos conceptos se diferencian? Son opuestos? Uno contiene al otro?

Lo mejor es ir a la definición y propósito de ambos conceptos (desde mi perspectiva).

## ¿Qué es monitoreo?

Es el proceso de captura y despliegue de información de un sistema, por ejemplo, generar un mecanismo para obtener los logs de un sistema para poder visualizarlos en un panel.

## ¿Qué es la observabilidad?

La observabilidad tiene más relación con cómo interpretar los datos o lograr accionables asociados a objetivos (generalmente de negocios). Es la habilidad para entender el estado interno de un sistema mediante el análisis de la información que genera. 

En torno a la observabilidad hay tres tipos de información:

- Logs: los registros generados por las aplicaciones
- Métricas: los indicadores de salud de un sistema, son números que permiten cuantificar el rendimiento de un sistema
- Trazabilidad: la identificación de una transacción y todo su paso por un sistema

Se podría decir que las prácticas de monitoreo son un subconjunto de todo lo que significa la observabilidad. **El monitoreo nos dice cuándo algo esta mal y la observabilidad nos permite entender por qué está mal**

Se puede decir mucho más al respecto, para más información están estos artículos (la mayoría en inglés):

- https://cloud.google.com/architecture/devops/devops-measurement-monitoring-and-observability
- https://www.dynatrace.com/news/blog/observability-vs-monitoring/
- https://devops.com/observability-vs-monitoring-whats-the-difference/


:)
Ng-News: Issue 22/08
Tags: angular, javascript, programming, webdev
Published: 2022-02-28 22:28:55

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

{% youtube Y6BenM9Ic3A %}

## Round Table about State of JavaScript

We had a round table discussion about the results of the State of JavaScript's results. Key take-aways were that one should always be aware that trendy frameworks or libraries always rank higher in terms of interest or satisfaction. Still, one should also take into consideration the usage percentage, where Angular is number 2.

{% youtube KgLMU6yBW1g %}

## Angular Performance

Minko Gechev, a member of the Angular core team, posted a list of resources that he created throughout the years on performance. And that is quite a lot.

{% embed https://twitter.com/mgechev/status/1496192751926493193 %}

## Web Components

Netanel Basal published a video on how to use web components in various frameworks. In short, a Web Component pack's a component into a standard format that a browser can use natively. For the creating web components, he used Lit, which is like Stencil a framework specifically created for web components.

https://netbasal.com/using-web-components-in-angular-react-preact-vue-and-svelte-3c640a8ba46

## History of Asynchronity

uidotdev released an interesting video about the evolution of asynchronous JavaScript. Starting with the classic callback function and ending with async/await. Very informative.

Despite the circumstances, have a good a week and see you next Monday.

{% youtube rivBfgaEyWQ %}
Var vs Let vs Const
Tags: javascript, beginners, programming, webdev
Published: 2022-02-28 22:26:03

**J**avascript has 3 keywords to declare a variable, let, const and var. In this article we are going to talk about the similarities and the differences between these keywords.

##Var 
A variable declared with var it can be accessed everywhere except when it is declared inside a function.
```javascript
if(true){
  var a = "global variable";
}
console.log(a) // global variable

function foo(){
  var b = "function scoped";
}
console.log(b) // ReferenceError: b is not defined
```
a variable declared with var is moved to the top of the scope before code execution “hoisting”.
```javascript
console.log(a) // undefined
var a = "hoisting"

// behind the scenes 
var a;
console.log(a) // undefined
a = "hoisting"  
```
var variables can be re-declared within the same scope without getting an error.
```javascript
var a = 1;
var a = 2 
console.log(a) // 2
```
var variables can be updated.
```javascript
var a = "hello";
a = "hello world";
console.log(a) // hello world
``` 

##Let
let keyword is one of the features for declaring variables that came with Es6 in addition to const, let has some differences and similarities with var.
let is block scoped, in javascript anything within curly braces is a block, so a variable declared with let inside a block cannot be accessible outside of it.
```javascript
if(true){
let a = "hello world";
}
console.log(a) // ReferenceError: a is not defined
```
let variables cannot be re-declared like var.
```javascript
let a = "hello world";
let a = "hello javascript";
console.log(a) // SyntaxError: Identifier 'a' has already been declared
```
like var, let can be updated.
```javascript
let a = "hello world";
a = "hello javascript";
console.log(a) // hello javascript
```
##Const 
const behaves like let but it cannot be updated.
```javscript
 const a = "hello world";
a = "hello javascript";
console.log(a) // TypeError: Assignment to constant variable.
```

##Conclusion

In case you have missed, here are the differences:
- let and const are block scoped.
- var declarations are globally and function scoped.
- var and let can be updated but const cannot. 
- var can be re-declared but const and let cannot.