teleren/devto huggingface dataset:
Kelebihan dan Manfaat Menggunakan Undagan Digital Untuk Pernikahan
Published: 2022-08-08 23:17:00

Walaupun sebagian besar mengetahui tujuan undangan, undangan digital telah berkembang pesat dalam beberapa tahun terakhir. Di mana Google Kalender atau undangan Outlook adalah satu-satunya pilihan Anda.

Namun, saat ini banyak situs web menawarkan undangan digital dengan semakin banyak opsi penyesuaian dan fitur lain seperti di [WUndangan.com](https://wundangan.com/) yang dapat sangat membantu perencana acara.

Tapi tahukah Anda kelebihan undangan pernikahan digital dibandingkan undangan pernikahan cetak? Simak ulasannya di bawah ini.

**1. Ramah Lingkungan**

Tahukah Anda bahwa dibutuhkan 1 pohon pinus berumur 5 tahun untuk membuat 1 rim kertas? Dan jika kita menggunakan undangan pernikahan cetak, kemana perginya undangan setelah Anda selesai dengan pernikahan Anda?

Semoga tidak terbakar, karena pembakaran sampah menghasilkan CO2 dan zat lain yang merusak lapisan ozon kita! Nah, dengan undangan pernikahan online ini diharapkan penggunaan kertas bisa diminimalisir.

**2. Tampilan Unik, Elegan dan Tetap Mewah**

Biasanya undangan online memiliki layout yang menarik dan interaktif. Selain desain tematik yang dapat disesuaikan dengan konsep pernikahan, animasi, slide, video, buku tamu, peta situs, reservasi, dll juga dapat disisipkan.

**3. Tidak ada batasan ruang atau waktu**

Undangan pernikahan online tidak dibatasi ruang dan waktu. Dan dapat dikirim ke mana saja, kapan saja, kepada siapa saja.
**
4. Lebih Cepat Terkirim**

Untuk mengirim undangan pernikahan secara online kita hanya membutuhkan koneksi internet dan kita hanya perlu mengirimkan link ke orang yang ingin kita undang, cepat, mudah dan sederhana.

**5. Lebih mudah untuk mengedit**

Jika ada tanggal yang salah, ubah lagi kapan pun kita punya waktu. dan Anda tidak perlu memikirkan biaya desain ulang undangan, sangat aman dan hemat biaya.

6. Lebih hemat biaya, waktu dan tenaga

Keuntungan lain dari undangan pernikahan online adalah kita tidak perlu khawatir bolak-balik dengan printer yang mungkin jauh. Kami hanya perlu membayar sekali tanpa khawatir jumlah kartu undangan hilang.

Tidak perlu lagi mencetak label nama atau membuang waktu dan uang untuk mengirimkan undangan pernikahan. Semuanya terasa lebih cepat, mudah, dan efisien untuk anggaran pernikahan Anda.
Learn web development using .NET and Visual Studio
Published: 2022-08-08 21:56:26

Have you ever wanted to try out web development with .NET, but are not sure where to get started? 

The .NET team at Microsoft is excited to announce our new Web Learning series! Let us take you through the basics of web development with .NET by building some awesome projects with C#, Razor Pages, Blazor, and more! In this free, 6-part series, we will teach you something new every week and get you up to speed with the wonderful world of web development with .NET. 
{% embed https://youtu.be/joKb1gvzP9U %}

## Sign up
Sign up for the series [here](https://aka.ms/WebLearningSeries/signup)!
 
## What to expect
In this series of emails, we’ll go over the following topics: 

- Week 1 – This welcome email!  
- Week 2 – C# for web development crash course
- Week 3 – We'll build our first pizza website with Razor Pages 🍕 
- Week 4 – Upgrade our pizza website with a backend using Minimal APIs 
- Week 5 – Create a Connect 4 Interactive Web Applications with Blazor 
- Week 6 – Connect to the cloud by publishing with Azure 

## Sneak Peak
You can also get a sneak peak at the content by checking out our [GitHub Repository](https://aka.ms/WebLearningSeries/github). 

## Looking for more?

- [.NET Learning Resources](https://aka.ms/WebLearningSeries-email-learnMore)
- [.NET Self-guided Learning Paths](https://docs.microsoft.com/learn/dotnet/)
Cómo centrar un div horizontalmente
Tags: css, html, align, center
Published: 2022-08-09 00:48:00

Cansado de sentir verguenza al googlear _cómo centrar un div_? Cansado de que tires ese centro y que te salga para cualquier lado?, tranquilo, hoy te enseñaré a **centrar un div horizontalmente** de distintas maneras sin morir en el intento.

**ALTERNATIVA 1: Text align**
Úsalo cuando tengas elementos de tipo `inline`, `inline-block`, `inline-flex` o `inline-table`. ¿Pero qué rayos es un **elemento inline**? Es un elemento que empieza cuando termina el anterior, sin saltar a otra línea y ocupando el máximo de su propio tamaño. Si se acaba el espacio, saltará a una nueva línea.

```
<div classname="parent">
  <span>Centrado</span>
</div>

<style>
.parent {
  text-align: center;
}
</style>
```

**ALTERNATIVA 2: Márgen automático**
Úsalo para centrar un elemento de bloque el cuál tenga un ancho determinado. ¿Pero que carajos es un **elemento de bloque**? Los elementos de bloque son elementos que forman un bloque separado, es decir, romperan la línea para aparecer en una nueva. Por ejemplo los `<div>`.

```
<div classname="parent">
  <div classname="child">Yo mido 150 pixeles</div>
</div>

<style>
.parent {
  margin: 0 auto;
}

.child {
  width: 150px;
}
</style>
```

**ALTERNATIVA 3: Flexbox**
Úsalo para centrar **varios elementos de bloque**. Las propiedades que usaremos serán `display: flex;` y `justify-content: center;`. No es necesario que los bloques hijos tengan un ancho específico, a Flexbox no le interesa mucho.

```
<div classname="parent">
  <div>Hijo 1</div>
  <div>Hijo 2</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
}
</style>
```

**ALTERNATIVA 4: Transformar elementos block a inline block**
Úsalo también para centrar varios elementos de bloque, los cuales con css transformaremos a inline. Es como la alternativa 1, alinearemos con `text-align: center;`, pero a cada hijo lo transformaremos de `block` a `inline-block` usando `display: inline-block;`.

```
<div classname="parent">
  <div classname="child">Hijo 1</div>
  <div classname="child">Hijo 2</div>
</div>

<style>
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
</style>
```

Espero te sea de ayuda este granito de arena.
En el siguiente te muestro cómo centrar verticalmente, vertical y horizontalmente. Saludos.
(:
What is SQL JOINS..!
Tags: beginners, sql, tutorial
Published: 2022-08-09 00:09:08

**JOINS TYPE ON SQL**

- LEFT JOIN 
- RIGHT JOIN 
- OUTER JOIN 
- INNER JOIN

![SQL JOINS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vavcctemsvws0kygnbzf.png)
Fixing When SWA Pull Request Builds Can't Add Comments
Tags: azure, javascript, devops, staticwebapps
Published: 2022-08-16 05:29:13

---
title: Fixing When SWA Pull Request Builds Can't Add Comments
published: true
date: 2022-08-09 00:08:41 UTC
tags: azure,javascript,devops,staticwebapps
canonical_url: https://www.aaron-powell.com/posts/2022-08-09-fixing-when-swa-prs-cant-add-comments/
---

I did a recent post about [deploying SWA with Bicep](https://dev.to/azure/deploy-azure-static-web-apps-with-bicep-pfd) and another on [advanced GitHub Actions workflows for SWA](https://dev.to/azure/taking-a-swa-devops-pipeline-to-the-next-level-5co3) but I noticed when doing it that when using PR’s on the repo I was no longer getting the comment added to the PR for where the staging site lives. When it’s working correctly you’ll get a comment like this:

![Example PR comment](https://www.aaron-powell.com/images/2022-08-09-fixing-when-swa-prs-cant-add-comments/01.png)

Instead, I’d get an error message in my logs:

> Unexectedly failed to add GitHub comment.

This doesn’t give you a lot to go with and find the problem, so I reached out to the SWA engineering team to do some debugging and see if we could get to the bottom of it.

## Permissions, permissions, permissions

As I mentioned in the deploying with Bicep post, you’ll need to authenticate against Azure, and I prefer the [OIDC Connect](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/configuring-openid-connect-in-azure?WT.mc_id=javascript-73327-aapowell) approach, and in doing so, you need to configure the [permissions of the `GITHUB_TOKEN`](https://docs.github.com/en/actions/security-guides/automatic-token-authentication?WT.mc_id=javascript-73327-aapowell#permissions-for-the-github_token) to enable `id-token` write.

And here’s where the GitHub SWA integration broke.

What I missed in the docs is that these are _replacement_ permissions, not _additive_ permissions, meaning if you set the token permissions in the workflow you _only_ have those permissions.

Don’t worry though, it’s an easy fix, you need to add `pull-requests: write` permissions to the token and then you’ll be good to go.

Check out [this commit](https://github.com/aaronpowell/aaronpowell.github.io/commit/d46ab4ef271f8a60d7751dee8aef34f35786d640) in my blog repo to see the changed permissions (I also moved the permissions to be set _per job_ rather than _per workflow_).

## Summary

It’s a good idea to know what permissions are needed in the workflows and at what point they are needed, so you can maintain a policy of minimum trust in your deployments.

For SWA, you need to ensure you have `pull-requests: write` set on your `GITHUB_TOKEN` permissions if you’re modifying the permissions and still want the Active to do comments on PRs.
Terminal Battleship Game
Tags: python, terminal, beginners
Published: 2022-08-08 23:43:00

# First Project!
First post on DEV and first real mini project on my own! 
Heres a [Battleship](https://github.com/sohsht/terminal_battleship_game) game you can play in your terminal that uses python. Theres a couple things in here that I liked and didn't like. 

### Likes:
* You can autogenerate a board with the ships randomly placed in valid areas! 
* Fairly intuitive and visually alright considering it is only used in terminal.
* Was able to learn a little more about error handling and user experience.

### Needs Improvement:
* Some inputs are not checked if they are completely valid or not. i.e. somethings are only checked to see if input was an int and not necessarily a valid number to be used. 
* Wish there was an easier way to make both the board showing your ships and your guesses in the same area so they are not stacked. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abutlg0txb69fl42ucqi.png)
Terraform Write SSH to to Azure Key Vault for an Azure VM
Published: 2022-08-08 23:12:53

Shows Terraform code which will write an auto-generated SSH key to Azure Key Vault so that you can programmatically get the key later on. 

Normally, when Terraform creates a key, it will just save it on the local disk. But this means the key won't be available unless you have access to your private disk.

When doing a deployment in Gitlab CI/CD, for example, you will lose the key when the pipeline ends.

This code assumes that you have previously made an Azure Key Vault (https://azure.microsoft.com/en-us/services/key-vault/), and you have given your service principle for the current Terraform code to the Azure Key Vault (https://docs.microsoft.com/en-us/azure/key-vault/general/rbac-guide?tabs=azure-cli).

1st make an SSH key pair in Terraform:

```
resource "tls_private_key" "this" {
  algorithm = "RSA"
  rsa_bits  = 4096
}
```

Next upload to Azure Key Vault. 

```
data "azurerm_client_config" "current" {}
data "azurerm_key_vault" "kv1" {
  name                        = var.kv_name
  resource_group_name         = var.resource_group_name
  depends_on = [local_file.key_pem]
}

resource "azurerm_key_vault_secret" "privatekey" {
  name         = "private-key"
  value        = tls_private_key.this.private_key_pem
  key_vault_id = data.azurerm_key_vault.kv1.id
}
```

In this example, we need a few variables to be set:

1. kv_name = Azure Key Vault Name

2. resource_group_name = The Azure Resource Group the Azure Key Vault belongs to.

When you are done, you will find your private SSH key in the  key vault. Adding the public key is an exercise to the reader.
Day 609 : Searchin
Tags: hiphop, code, coding, lifelongdev
Published: 2022-08-08 22:43:47

_liner notes_:
- Saturday : Pretty productive day! Got some pictures taken for my visa. Figured out why the Helium miner I set up at my friend's place wasn't working. Went to the post office to pick up some envelopes to use when sending my Visa application. Even got to do a little bit of coding while waiting to start the radio show. Then I went to do the radio show. Had a great time as usual. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a photo of Dupre "Doitall" Kelly wearing a tie and vest with an peach colored shirt smiling after winning the New Jersey City Council Seat with the words Aug 6th 2022 Waitlist Deity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzx52c2whjvt5w8bc0of.jpg)

- Sunday : Did my https://untilit.works cyphers and worked out an issue that I was running into my side project: https://doingstuff.in .

- Professional : Had a couple of meetings and worked on my Japanese visa. I was trying to find some contact info for some spots. Got it done and did some coding. Not a bad way to start the week.

- Personal : This weekend, I wasn't able to get any Japanese studying done. I was so tired after the radio show and the Sunday show. I did get a bunch of working on https://doingstuff.in . I think I'll be able to finish the feature if not tonight, then probably tomorrow.

![View from the shore of a lake in Waterfowl Lakes, AB, Canada looking at a pine forest with a snow covered mountain range in the distance with it's reflection in the lake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c45ysc32k13pc63hbr0.jpg)

Going to finish up some booking stuff for my upcoming work trips, then work on the feature I mentioned earlier. I got the data from the front end saved to a database, show that data in the admin dashboard where I can publish the submission, so that it can then show up on the front end. Now I just need it to show up in a list and on a map. I also just thought of creating a page where people can see a list of the maps they can suggest places on. That way, I can just have one link to post to social media. I need to figure that out. We'll see. Time to get searchin'!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube IsK_9EAz8X0 %}
Blackjack text-based game
Tags: python, github
Published: 2022-08-08 22:06:00

This little code has been made as a part of my learning portfolio. Due to the simplicity of the project, creativity has not been the main focus, so we went with the proposed idea by Codecademy of doing a Blackjack game.

This has been the chosen idea, as a personal preference for games and random events.


![Example of 1 match](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shes4wgfp2jj53wpx3ng.JPG)

When running the code, the instructions are displayed with the option to select 1 or 2 players.
After choosing the number of players, the console asks for the name/s of the player/s. In the current version, the game is only build for 1 player.
Then the game begins and the cards are drawn to the player, with the score being calculated and showing the dealer hard. The player has the options to Hit or Stand, and the code does the rest until a conclusion is reached (Win, Tie or Loss).

A link to the code on Github:
[Repository](https://github.com/Albron-droid/Blackjack)

Refactoring:
Some functions can be added:

- The functionality for 2 players.
- Apply classes to create the Deck, each Player and a Bank.
- A bet system could be implemented with the use of Classes.
- Some functions could be simplier and the logics behind the rules of the game need to be revisited. (For example, if there was an Ace in the first draw and a card is later picked with a Hit, the Ace needs to count as 1 to avoid an exceed. This is currently not implemented).

Conclusion:
The program fulfills all the objectives that were asked: Building a terminal program with Python, using the input function and using Git and the command line.
For the sake of moving forward the code is published in this state, being functional for 1 player. Anyone is free to enjoy the game or amplify it.
Type Checking Styled Components
Tags: styledcomponents, react, javascript, webdev
Published: 2022-08-08 22:02:35


 
 ---
title: Type Checking Styled Components
published: true
description: 
tags: styledcomponents,react,javascript,webdev
cover_image: https://unsplash.com/photos/THmxQP-QgC8/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8NHx8dHlwZXN8ZW58MHx8fHwxNjU5OTcxOTU0&force=true&w=1920

---

I've just started using [styled components](https://styled-components.com/) and it took **way** too long to figure out how to get type checking for styled components with props:
  
![styled component with error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrmlejcqucq0xq5gmcf5.png) 
 

If you're using typescript, your editor will give you this warning:

![the error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ro6lsy7zzc722diobex.png)
 
Luckily, styled components can have generics types, so we just need to create a type for the its props and pass it as a generic:

![styled component without error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ogbepw99w8uk5w465mr.png)

No more type errors! :)
Mirror is a representation of the substructure and display style of an instance of any type.
Tags: swift, ios, programming, mobile
Published: 2022-08-08 22:00:37


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg8r2zsmh4889o1ccbp3.png)
Here is an example of reflection with a class. 
Learn more at https://developer.apple.com/documentation/swift/mirror.
Testing my "socialise" GitHub action
Tags: showdev, webdev, devjournal
Published: 2022-08-08 21:54:00

_Originally published [on my blog](https://robinwinslow.uk/testing-my-github-action)._

I've spent the last week or so writing [a bunch of scripts](https://github.com/nottrobin/social-poster) to automatically post my new articles to Twitter, Hacker News and a Mailchimp mailing list. I've been testing them manually with some of my existing articles (with [surprising](https://news.ycombinator.com/item?id=31653748) [success](https://news.ycombinator.com/item?id=31646936) on Hacker News).

I've now written [a GitHub workflow](https://github.com/nottrobin/robinwinslow.uk/blob/main/.github/workflows/publish.yaml) to run these scripts automatically when I publish a new article.

So here's my article that I'm going to test it with. When this is published, it should automatically update the frontmatter with the Hacker News link, and the Tweet link, and send an email.

The links to Hacker News and Twitter should appear at the bottom of this post. All being well.

Let's give it a go!
Hate paywalls? 12ft.io is the answer
Tags: devjournal
Published: 2022-08-08 21:44:00

_Originally published [on my blog](https://robinwinslow.uk/hate-paywalls-12ft.io-is-the-answer)._

Paywalls offend me. The Internet exists to share knowledge with everyone across the world. You shouldn't need a subscription, all you should need is an internet connection to access the world's knowledge.

*[Tl;dr](https://en.wiktionary.org/wiki/tl;dr): Simply prepend "12ft.io" to the start of the URL for any article you want to read. Et voila!*

## They're everywhere

And yet an increasing number of news sites are including a "paywall" of some type. At this point it's pretty rare to find a professional news site without gatekeeping of some kind - even those bankrolled by billionaires (washingtonpost.com, theintercept.com). 

## They're laughable

Some of them just pretent to block content, simply forcing you to click "not now" or similar to access the content (theguardian.com, independent.co.uk), some force you to subscribe (theintercept.com), some appear to block content altogether (ft.com). However, they are all trivial to bypass. This is basically because at the end of the day they all want Google to be able to index their content.

### Types of paywalls

Most sites block content with a simple JavaScript-generated facade, and bypassing them is as simple as disabling JavaScript. The [Firefox Reader View](https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages) is fantastic for bypassing paywalls of this type.

Others only let you view a certain number of articles (economist.com, medium.com) before blocking you. Bypassing these is as simple as deleting cookies, or viewing the article in a private browsing window.

The FT is the most interesing one. Many of their articles are blocked right away. But the trick here is to copy the title of the article, paste it into google.com, click on the link from Google and presto - the article is visible.

## 12ft.io is the silver bullet

I used to go through all these tricks manually to read the content I wanted. It wasn't that hard, and there's a certain satisfaction in outsmarting the paywall. But now I've found a much easier way.

[12ft.io](https://12ft.io/) is beautiful. All you have to do is add "12ft.io/" to the beginning of the URL for any article you want to read. E.g., if I want to read this article:

[https://www.ft.com/content/c7480de9-323a-410b-889b-dd24bbee593d](https://www.ft.com/content/c7480de9-323a-410b-889b-dd24bbee593d)

All I have to do is enter this in my browser:

[12ft.io/https://www.ft.com/content/c7480de9-323a-410b-889b-dd24bbee593d](https://12ft.io/https://www.ft.com/content/c7480de9-323a-410b-889b-dd24bbee593d)

And boom! The article is open to me.

It's so well designed, to have such a short easy to remember domain that's trivial to add to the beginning. I love it.