teleren/devto huggingface dataset:
How to Add a Constant Contact Form to Squarespace
Tags: tutorial, webdev, constantcontact, squarespace
Published: 2021-01-08 02:28:19

While setting up my Squarespace site I found that I couldn’t find much information on how to get my Constant Contact sign up forms on my site. So I figured I wouldn’t write this up for anyone that needs it. First things first. If you want the forms to be embedded on your page and not make the users leave your site to sign up on a landing page you need at least the BASIC plan on Squarespace. If you don’t want to pay for that you can just create a landing page on Constant Contact instead of an inline form and link to that on your page. If you have basic here is the step by step walk through.

## Step 1
Go to Constant Contact, Sign in and click on “Sign-Up Forms”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tdwugppl0wg5bdx4bgli.PNG)
## Step 2
Click on the ellipses and then click “inline code” 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7g6koqmtwy014asm1hsx.PNG)
## Step 3
At the bottom on the popup window click “Universal Code” (the block that is blacked out will have code in it I blacked mine out for security reasons)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9pfa8brpu0duh6rh069v.PNG)
## Step 4
Copy the code that is in this box. Again I blacked mine out for security reasons but there will be code in that block to copy.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dzzoqdfxvkqpayfsjurz.PNG)
## Step 5
Go back to Squarespace, sign into your admin account, navigate to the site you want to add it to, and click “settings”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y3u5v9zerjscmivcmqws.PNG)
## Step 6
Click on Advanced

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iwnwgbjjz7zz2q57a3o9.PNG)
## Step 7
Click on “Code Injection”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ppqav303egwpbgdq9kug.PNG)
## Step 8
Paste your code that you copied into the “header” section

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i1qk0u57ojdiq0s7d47g.PNG)
## Step 9
Go back to Constant Contact, go to “Sign-Up Forms”, click on the ellipses of the form you want to embed, click on “inline code” (steps 1 and 2). This time instead of clicking on “Universal Code” copy the text in the main box. Again I blacked mine out for security reasons but there will be code in that block to copy.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/umv64anofs0f8eu8qc3k.PNG)
## Step 10
Go back to Squarespace, go to the page you want to add your form to, add a new section (like you would add an image or text) and select “Code”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5zu7lk03uqoqxfijmo1q.PNG)
## Step 11
Erase everything in the text box and paste the code you copied from Constant Contact and press “Apply”. It will not show up right away. You may have to save the page and then it will show up.
Digital Ocean Hackathon Submission - Part 1
Tags: dohackathon, angular, webdev, showdev
Published: 2021-01-08 02:15:14

#### Background:
One of the resolutions for 2021 I made is to write more and engage more with the community — what better way than to be part of a hackathon. I have been an avid Heroku user and have been using it for a while now. I loved the simplicity and ease with which you can deploy any application without many efforts.  So when I heard about the App platform from Digital Ocean, I was excited to try it out. I have been learning about it for a month now and like how easy it is to deploy static and dynamic websites with ease. I will share my journey and comparisons in future posts. 

#### What I am building:
I am building a game which I have named **Watch The Block**. It is a memory game focusing on remembering the old and new states. As a player, the game is straightforward; you must remember the most recent added Block to the game board. The more blocks you guess, the more points you score. It also has a ticking timer to keep players on their toes.

#### Category Submission: 
Random Roulette

#### How I built it
I have build it using Angular. Digital Ocean is being used to deploy the static site.  There is no backend as the only thing I am storing is user scores for which I am using firebase. 

#### Stay Tuned for more...


> Photo by [Christopher Gower](https://unsplash.com/@cgower)
Improve workflow efficiency by using your keyboard smarter (Linux)
Tags: linux, vim, webdev, productivity
Published: 2021-01-08 02:06:41

---
title: Improve workflow efficiency by using your keyboard smarter (Linux)
published: true
description: Premapped keys are a thing of the past. Remapped keys are the future.
tags: #linux #vim #webdev #productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/x6g21kphgz0makzjiiq7.png
---

**64 > 104**
I love my keyboard. Although it only has 64 keys, I don't use all of them. So I remapped those keys (and some other as well) to improve my workflow.

Take _caps-lock_ for instance. For me, it is a completely useless key taking up a great spot on the keyboard. Since I'm an avid vim user, I often use _escape_. So I remapped _left-shift_ + _right-shift_ to _caps-lock_, and _caps-lock_ to _escape_.

I use _menu_ to switch between my two most commonly used workspaces, and _space-2_ (That is my right space bar) is remapped to _λ_. Why _λ_? Well, one keypress is better than two, so instead of having to press _ctrl-b_ when using tmux, I just set my prefix key to λ. Efficiency doubled!

**How to remap keys in X**
In order to remap keys, we first need to find their values. The easiest way is to run _xev_. In order to simplify this process, you could pipe it to _awk_ like this:
```
xev | awk -F'[ )]+' '/^KeyPress/ { a[NR+2] } NR in a { printf "%-3s %s\n", $5, $8 }'
```

The next step is to actually remap the keys. I recommend making a configuration file and then starting it with X. This small sample configuration file changes _right-space_ to _λ_, and _;_ to _;_(no modkey), _+_ (with Shift), _ö_ (with AltGr), Ö (Shift + AltGr).
```
!keybindings.conf
keycode 171 = Greek_LAMDA
keycode  47 = semicolon plus odiaeresis Odiaeresis
```

Then load the configuration file with ```xmodmap keybindings.conf```
Some yippie moments in scientists life
Tags: writing, productivity
Published: 2021-01-08 01:33:56

#365writings #365figures

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/40lohsivkcwdf23l5il0.jpeg)

Kalau Anda seorang ilmuwan pasti akan mengalami beberapa momen “yippie” seperti berikut ini:

1. Saat makalah diterima dan terbit di jurnal top. 
2. Saat makalah yang pertama disitasi pertama kali.
3. Saat beberapa makalah mulai disitasi. Indeks H mulai merangkak naik.

Setelah komen yoppie yang ketiga, bisa jadi Anda sudah bukan saintis yang sama saat Anda memulai karir dulu.
Diario de bordo - #1
Published: 2021-01-08 01:25:45

Resolvi criar esta série para tentar documentar diariamente o que eu for aprendendo ou entendendo, podendo ou não virar um
Post mais elaborado, mas certamente uma ótima forma de eu compartilhar conhecimento e documentar meu crescimento profissional, como se trata de um diário de bordo certamente eu posso me equivocar em algo que eu aprendi ou não entender o real potencial de algo, sendo assim caso você ler e saber mais do que eu neste ponto por favor compartilhe seu conhecimento e enriqueça este processo.

# [JQ(JSON Query)](https://stedolan.github.io/jq/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8ox1mg0kpu5lozhndylk.png)
Hoje eu conheci esta ferramenta que, consegue processar saídas json no terminal, extremamente maneiro de se utilizar e acredito que vai ser muito útil pra mim, pois muitas vezes durantes encontro saídas de json bem complicadas no terminal e a visualização fica muito ruim, dá uma olhada [exemplo](https://asciinema.org/a/91627)
- lembrando que não fui eu que gravei isso

# [Min.io](https://min.io/product/overview)
![overview_main](https://dev-to-uploads.s3.amazonaws.com/i/onrix9h7x2uaoe4ozqjp.png)
 
Pelo o que eu entendi o Min.io é um sistema distribuido de armazenamento que é Open Source e é compatível com o [protocolo S3](https://aws.amazon.com/s3/), eu entendi que a forma que ele é construido é tipo como o [Gluster](https://www.gluster.org) funciona porém o real funcionamento preciso entender como todos esses caras funcionam realmente, mas só de ouvir como funciona as etapas já dá pra entender que isso é muito daora dado que backups podem ser feitos apenas utilizando o min.io e ter uma tranquilidade pela escalabilidade do armazenamento. Porém tudo tem um trade-off e eu não conheço qual é a perda esperada para esse tipo de solução *Sinta-se livre para explicar nos comentários*.

# [Gitlab Backup](https://docs.gitlab.com/ee/raketasks/backup_restore.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2umewoerpqrlfv4i7lu6.png)
Hoje também fui apresentado a forma que o gitlab efetua backup, e pela forma que ele utiliza no kubernetes foi bem simples dado que ele possui uma abstração que agiliza isso pra gente:
```bash
kubectl exec -it <gitlab task-runner pod> backup-utility
```

Mais uma vez repito que são apenas anotações de coisas que vi durante meu dia e achei interessante, caso eu tenha algo a acrescentar irei colocar nos comentários, sinta-se a vontade para sugerir coisas novas ou para me explicar assuntos que achou que estou garotiando, se leu até aqui obrigado pela sua atenção.
![Alt](https://res.cloudinary.com/practicaldev/image/fetch/s--uLCaazgs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/5991methcmv4ojwolws2.gif)
Next step as developer
Tags: career, changes, advice, developer
Published: 2021-01-08 01:24:19

I´m a software developer, I have worked with different technologies, frameworks, languages etc. and I like a lot being a developer but in these days I have been wondering if I have to evolve or change the role in the tech world, but what is the next step? become a master in certain Framework or language, leave the development and try to lead projects or lea another thing  which is not necessary development and is growing like AI or Blockchains (and it's better paid), I tried to find answers in google haha but I think my question is so specific so I decided to post this to know the opinion of another people.
Step by step guide on how to add authentication to Asp.Net core mvc and how to customise it
Tags: dotnet, beginners
Published: 2021-01-08 01:11:50

Hello,   i have uploaded a youtube video on How to add auhtentication to Asp.net  core  MVC application and how to customise it. This is a brand new Youtube channel dedicated  for   dotnet development. Please subscribe and watch and comment on any   topics  that you want to see. Thank you

https://youtu.be/9nPS_d8scs0

Ps: all of the code is available in Github

https://github.com/mohamadlawand087/v3-AspNetCoreAuthentication
Straitjacket, throne and crown
Tags: writing, productivity, indonesia
Published: 2021-01-08 01:04:20

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7vg11tyb8t5gpheq3ln5.jpeg)

Satu hari satu gambar (#365figures) tentang "straitjacket, throne, and crown"
Baca cuitan di sebelah kiri dan lihat gambarnya di sebelah kanan. 
Yang sedang dibicarakan dan yang ada dalam gambar itu adalah kita. Saya, Anda, mereka. Bukan orang lain.
Versi terpindai yang bebas dipakai ulang ada di sini https://commons.wikimedia.org/wiki/File:The_straitjacket,_throne_and_crown_(scanned_ver).jpg.
text-align:center doesn't work for button
Tags: react, css
Published: 2021-01-08 00:54:11

I was trying to place a button in the center and I could not apply text-align:center or margin: 0 auto and I found out that 

```
button:{
  textAlign: 'center',
},

 <div className={classes.button}>
     <Button variant="contained" color="primary"　　　
　　　　disableElevation　className={classes.button}>
       Confirm
     </Button>
 </div>

```
You can enclose Button tag with div and apply text-align:center to div element! 

Hope this helps!
For...of & For...in - How to Remember the Difference with ammo. 

Tags: javascript, beginners
Published: 2021-01-08 00:52:19



Ah, syntax. Your logic might be sound but miss those commas, brackets, or a typo turns `>` into '<', and bam! broken code. But, hopefully, your JSlinter catches and corrects those some of those errors.

While your [linter will catch incorrect use of for...in](https://eslint.org/docs/rules/guard-for-in), how does one remember the use case for `for...of` or `for...in`? Which is for iterating over `objects` or through `arrays/strings`? 

### Remember the difference of `for...in` & `for...of`.

1. If you get shot and the bullet stays in your body, the doctor looks for the `foreign object`. 

2. If a {bullet: "Full Metal Jacket"} is in a javascript ammo{} object, a developer looks `for...in` object. The pun/trick is pronouncing `for...in` as “foreign.”  

Do brush up on `for..in` usage as it doesn’t loop in an ordered fashion. This [Bits of Code article](https://bitsofco.de/for-in-vs-for-of/) explains well when to use `for...in`. 


### Other Memory Devices?
What tricks or methods do you use to remember syntax or bits of code?  


##References
[ESLint Documentation on For..of](https://eslint.org/docs/rules/guard-for-in)
[Bits of Code - for..in versus for..of Loops] (https://bitsofco.de/for-in-vs-for-of/)
text-align: center does not work... 
Tags: css, react
Published: 2021-01-08 00:45:31

I wanted those two boxes to be in the center but I couldn't apply 'text-align:center'. 

I was doing some search and I found out for block elements such as 

```<p> <div> <h1>〜<h6>``` the default is 'display:block' so you can't place the element itself in the center (text and image in the element will be centered). 

So here is what you wanna do. 

```
margin: 10px auto;

```
This means margin-right equals margin-left so it can place the element in the center! 

CSS can be tricky and I sometimes spend a lot of time trying to figure it out but I hope I will get used to more rules.

Hope this can be helpful for you!
How To Use Vim and Termux?
Tags: angular, react, vue, node
Published: 2021-01-08 00:33:51

1. Install termux from Play Store. If you already installed it skip this step.

2. Open termux and type: apt update and press enter after the command run type apt upgrade and press enter

3. Type pkg install vim after the installation type vim to lunch the tools.


For More Tips And Tricks On Termux And Vim Follow Me!
How to clone a repository including the submodules or sub repositories in Git?
Tags: git
Published: 2021-01-08 00:00:00

---
  title: How to clone a repository including the submodules or sub repositories in Git?
  published: true
  tags: Git
  date: Fri Jan 08 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/clone-repository-including-submodules-git
  cover_image: https://melvingeorge.me/_next/static/images/main-6b6fb0608fd92bd91721b93b43808492.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/clone-repository-including-submodules-git)
  
Sometimes we may want to clone a repository which in turn contains sub repositories or sub-modules. We can clone these sub-modules by passing `--recurse-submodules` flag to the `git clone` command.

It can be done like this,

```bash
git clone --recurse-submodules <GIT_REPO_URL>
```

This will fetch all the submodules included in the main repository. 🌟

### Feel free to share if you found this useful 😃.

---
Book Review: Prometheus up and running
Tags: bookreview, monitoring, devops, prometheus
Published: 2021-01-08 20:23:03

---
title: Book Review: Prometheus up and running
published: true
date: 2021-01-08 00:00:00 UTC
tags: BookReview,Monitoring,DevOps,Prometheus
canonical_url: https://hceris.com/book-review-prometheus-up-and-running/
---

[![Prometheus up and running](https://hceris.com/static/ee722eca2516bc39c2cd0f475c9fc8bc/e07e9/cover.jpg "Prometheus up and running")](/static/ee722eca2516bc39c2cd0f475c9fc8bc/e07e9/cover.jpg)

[Prometheus](https://prometheus.io/) is a complex beast. I’ve been using it at work for the past year, and I always felt that I could barely understand what was going on. Picking up this book is a great way to start filling those gaps. Roughly, there are the following sections:

- Application Monitoring
- Infrastructure Monitoring
- PromQL
- Alerting
- Deployment

Whether you are monitoring applications or infrastructure, the core components are the same. Instrumenting the code or using exporters, and then publishing metrics that Prometheus will scrape, with a few labels to sprinkle on top.

There are plenty of components that need to be deployed to have a more complete setup. The [node-exporter](https://github.com/prometheus/node_exporter), the [blackbox-exporter](https://github.com/prometheus/blackbox_exporter), and others make an appearance. This is more relevant as an operator, however.

I set up a simple installation of Prometheus to try things more practically. It’s in [this repository](https://github.com/sirech/example-prometheus-setup) and can be run with Docker.

## PromQL

The toughest part of the book is the comprehensive overview of _PromQL_, Prometheus’s query language. If you want to write queries that make any sense, this section is a must-read. Otherwise, you’ll find yourself trying different combinations of `sum`, `rate`, and whatnot until your queries somehow work.

## Alerting

Alerting is especially relevant if you handle on-call for a system. From experience, a misconfigured alerting setup can cause a lot of friction and pain, so it’s good to invest in understanding which kind of alerts you can get, and when.

## Dashboarding

Visualizing your metrics is a big part of monitoring, which in this ecosystem is handled by [grafana](https://grafana.com/). Grafana is another complex beast. You’ll find about twenty pages on the topic, which is not nearly enough to get a deep understanding of how to build all those fancy dashboards that you see out there. But it’s an interesting appetizer to get started.

## Verdict

[Prometheus](https://www.thoughtworks.com/de/radar/tools/prometheus) has been around for a while, all in all. It seems to be the standard monitoring collecting tool these days. Knowing about it is a good investment of your time, and I think this book strikes a reasonable balance of being practical and giving you deeper insights, thus getting ⭐⭐⭐⭐ stars.
Introducing LibertyPie’s Wallet Provider
Published: 2021-01-07 23:58:17

![LibertyPie WalletProvider Image](https://dev-to-uploads.s3.amazonaws.com/i/rvhixu82hskx1uqpuywd.png)

As the team builds the protocol’s user interface, it is very important to research deeply into which external libraries to include. The user interface must have a rich user experience & also very light weighted.

Every DApp must find a way to connect to users’ wallet without compromising privacy and security. Fortunately, we found many matured and well-developed libraries such as web3modal (previously web3connect), web3-wallets-kit (by Akropolis), bnc-onboard (by BlockNative) & many more.

After a careful analysis of these existing solutions, we found reasons which discouraged us from using them. A major reason was the bloat in library size, other reasons included an incomplete library or having to pay for usage in the case of BloackNative bnc-onboard.

![WalletProvider Image 2](https://dev-to-uploads.s3.amazonaws.com/i/98fkuqhj29hg3iccwjl8.jpeg)

Our final resort was to build a library exactly how we wanted it, thankfully, the initial version of LibertyPie Wallet Provider is successfully published on npm (https://www.npmjs.com/package/@libertypie/wallet-provider).
LibertyPie Wallet Provider was built to provide extra advantages over other libraries, a detailed comparison has been given below.

####Size (according to Bundlephobia.com)
LibertyPie Wallet Provider — 6.9kb minified +gzipped
Web3Modal — 195kb minified + gzipped
bnc-onboard — 65.1kb minified + gzipped
web3-wallets-kit — 784.4kb minified + gzipped

*Best*: LibertyPie Wallet Provider
*Worst*: web3-wallets-kit

####Runtime Dependencies
LibertyPie Wallet Provider— 0
Web3Modal — 6
bnc-onboard — 20
web3-wallets-kit — 9

*Best:* LibertyPie Wallet Provider
*Worst:* bnc-onboard

####Supported Wallets Providers
LibertyPie Wallet Provider — 9
Web3Modal — 11
bnc-onboard — 6
web3-wallets-kit — N/A


As seen from the data above, LibertyPie Wallet Provider has many merits compared to the other libraries.
NPM: [https://www.npmjs.com/package/@libertypie/wallet-provider](https://www.npmjs.com/package/@libertypie/wallet-provider)
Github Repo: https://github.com/LibertyPie/Wallet-Provider
Building a User Login System with ASP .NET Core Identity
Tags: csharp
Published: 2021-01-07 23:57:27

The result of bootstraping an ASP .NET Core app with user login is somewhat deceptive: it just works out of the box. In practice, however, ASP .NET Core Identity - the default user login solution for ASP .NET Core is quite complex/difficult to setup for production use cases, as I've found out recently. 

You don't have to do this - Auth0 and others make solutions that cut out much of the work, but if you need or want to, this high level overview of the process with handy links may be useful to you. I'm going to assume that you have a bootstraped ASP .NET Core app with user authentication (individual user accounts stored in app).

# User Storage
ASP .NET Core Identity allows user storage providers to be swapped out, so that you can store your users anywhere. The bootstraped app is setup to use a local database on disk. It's fairly easy to swap over to a proper MS SQL server using Entity Framework by changing the connection string in the configuration file, however for anything else, you'll need to fall back on community maintained user stores or write your own. Microsoft does have a <a href="https://github.com/dotnet/AspNetCore/tree/master/src/Identity">handy list of these storage providers</a> though and a couple of decent pieces of documentation.

# OAuth Providers
It's fairly simple to add an OAuth provider if you need to. Microsoft provides support out of the box for four (Microsoft, Google, Twitter, Facebook), and provide <a href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/social/?view=aspnetcore-5.0&tabs=visual-studio">a nice guide</a>. Aside from this, you can implement your own integration or use a prebuilt integration <a href="https://github.com/aspnet-contrib/AspNet.Security.OAuth.Providers">this repo has a really nice selection.</a> The buttons to authenticate with the provider(s) will appear on the login page automatically.

# UI
The UI Microsoft provides works, but it's not pretty. Luckily, it's fairly easy to customize, as it's provided as a Razor Pages library. You can access the code by scaffolding it into your project (<a href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/scaffold-identity?view=aspnetcore-5.0&tabs=visual-studio">see this Microsoft doc</a>). You'll probably want to customize the 2fa section of the app to display a QR code for users to scan (<a href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-enable-qrcodes?view=aspnetcore-5.0">see this MS doc</a>)

# Email
You will need to add a real email sender to your app to send confirmation emails (assuming you want to use them). Microsoft provides <a href="https://docs.microsoft.com/en-us/aspnet/core/security/authentication/accconfirm?view=aspnetcore-5.0&tabs=visual-studio">a tutorial for using SendGrid with this</a> and I wrote <a href="https://dev.to/ara225/how-to-use-aws-ses-as-a-custom-email-sender-in-asp-net-core-identity-40a3">one for AWS SES.</a> No matter which provider you're using, it's a fairly simple process.