teleren/devto huggingface dataset:
Call Multiple Functions onclick - [SOLVED]
Tags: javascript
Published: 2021-09-12 18:08:53

## TL;DR Summary

Calling multiple functions with ***onclick*** event is very simple (and actually obvious once you hear it).

So the key is to call one function but inside you can call as many other functions you want. Something like this:

```js
function aggregateFunc() {
  first();
  second();
}
```
And that's it.

## More Details

If you want the full code for calling multiple functions on ***onclick*** event then you can copy the code below:

```html
<style>
  body { 
    background-color: bisque; 
    padding: 300px;
    text-align: center;
  }
  button {
    font-size: 30px;
    border: 3px solid orangered;
    border-radius: 10px;
    background-color: orange;
  }
</style>

<button onclick="aggregateFunc()">
  Call Multiple Functions
</button>

<script>
  function first() { console.log('first'); }
  function second() { console.log('second'); }

  function aggregateFunc() {
    first();
    second();
  }
</script>
```
And this is all there is to calling multiple functions with ***onclick*** event.

Until next time,
Will
*[Building an Algo-Trading Hedge Fund From Scratch](https://programmermoney.com/)*
Terraform: Good to know features - Post 1
Tags: terraform, devops
Published: 2021-09-12 18:00:18

## Terraform Validation
Starting Terraform 0.13, Hashicorp has released Custom Variable Validation in HCL. Each variable block can have zero or more validation blocks and an error message. It's quite useful feature which gives you an edge to control the values. 

```
variable "cloudenv" {
  type        = string
  description = "Cloud Environment"

  validation {
    condition = anytrue([
      var.cloudenv == "prd",
      var.cloudenv == "qa",
      var.cloudenv == "uat",
      var.cloudenv == "dev"
    ])
    error_message = "Must be a valid Cloud Env, values can be prd, qa, uat, or dev."
  }
}

```

## Terraform Suppressing Values
There are certain cases in which you want terraform not to print the information when you run `plan` or `apply`. Good part is terraform has a way for you. Setting a variable as sensitive prevents Terraform from showing its value in the plan or apply output.

```
variable "user_information" {
  type = object({
    name    = string
    address = string
  })
  sensitive = true
}
```

## Debug terraform
You can set TF_LOG to one of the log levels TRACE, DEBUG, INFO, WARN or ERROR to change the verbosity of the logs and push it to one of the files on disk for analysis. 

```
mkdir logs
export TF_LOG_PATH="./logs/terraform.log"
export TF_LOG="INFO" 
```
Others ways to contribute to open source
Published: 2021-09-12 18:00:04


So many developers want to leave a contribution to projects they always use and know a lot, however, we always feel too inexperienced and intimidated to add any code to these projects. That's why I came up with alternative ways to contribute and start to be closer to the open-source community and your favorite projects.
## Translation
This is the easiest and more accessible in my opinion. No new content to be created by you, just the effort to bring help to developers that are not fully fluent in English. There are MANY things to translate: the app itself, documentation, tutorials...
## Content
There is too much content these days for some things and too little for others, especially more advanced and niche examples, and it's a great way to show as a portfolio, not only content about how to use a tool but how a tool work. Remember that content is not only tutorials, in text or video, but also documentation, guides, books, and compilations of other articles/videos
## Discussions and Forums
If something looks wrong, comment about it on forums, on GitHub issues, at least will make the developers more aware of a common mistake, or a bug, or an issue with a specific environment
## Donations
Of course, all these projects need funds to hire people full-time and accelerate project development, if you can it will be really appreciated.
## Non-code accessibility support
This is part of the content section however I'll make this another section just to remember this neglected segment
## Usability tests
Testing to make sure that user experience in several devices, for several segments of users is crucial to growth if it's destinated to non-tech consumers
When and where I use px, rem, vw and vh
Tags: webdev, beginners, css, frontend
Published: 2021-09-12 17:59:05

Hi everyone.

I have decided to create a post to share my point of view about units of measure in CSS.

All that I am going to put next are things that I have learned in open source and personal projects, that is, by practicing a lot.

I'm just going to talk about the units of measurement that I usually use. And it should be noted that the use cases that I am going to present are to make a responsive design

px (pixel) :  px I only use it in very isolated and small cases, for example. When I want to give a fixed font size or even for fixed margins and paddings.

![px-example-html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guhthdm1g4mnvbattybj.png)

![px-example-css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38lauutxxm4lhwc1ng12.png)

rem (root em) :  I use rem for the same elements in px, but with the difference that it is something variable or responsive, for example text fonts and responsive spacing.

![rem-example-html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq7um0co602qaf1zo76f.png)

![rem-example-css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4b17y1qrqiutpzdlzde.png)

vh (view height) - vw (view width): These two measurements, being a reference to the size of the screen, are used to measure the layouts.

![vh-vw-example-html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2pw41cyc5zkirhg52tw.png)

![vh-vw-example-css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foubayrcn4obx6gyd820.png)


Thanks so much for reading.
If you have any suggestion, let me know it in the comments.
How to change the background login image on Manjaro
Tags: linux, manjaro
Published: 2021-09-12 17:56:28

## Introduction 
Recently, I wanted to change my **background login image** on Manjaro, but no parameters like changing the desktop background.

It's already been several times that I reinstall a Manjaro instance, and each time I forget how to do it. So here is a post of how I did it. You'll see it's very, very easy.

## Let's get starting !

### Copy your image

Open your terminal and get SUDO perms, you can copy your beautiful photo to another folder like `Images/` or `Documents/` with the command `cp`. 
*[Help ? How to use cp command](https://www.computerhope.com/unix/ucp.htm#desc)*


### Edit configurations

With the terminal, 
```bash
sudo nano /etc/lightdm/lightdm-gtk-greeter.conf
```

You have something that looks like this : 

```bash                                                                          
[greeter]
background = /usr/share/backgrounds/illyria-default-lockscreen.jpg
user-background = false
font-name = Cantarell Bold 12
xft-antialias = true
icon-theme-name = Adapta-Papirus-Maia
screensaver-timeout = 60
theme-name = Matcha-sea
cursor-theme-name = xcursor-breeze
show-clock = false
default-user-image = #manjaro
xft-hintstyle = hintfull
position = 50%,center 57%,center
clock-format =
panel-position = bottom
indicators = ~host;~spacer;~clock;~spacer;~language;~session;~a11y;~power
hide-user-image = true
```
Edit the *background* line with your file, and it's done ! 

___
Photo by <a href="https://unsplash.com/@jordansteranka?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jordan Steranka</a> on <a href="https://unsplash.com/t/wallpapers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

|☕|Check my [Twitter account](https://twitter.com/thomasbnt_). You can see many projects and updates. You can also [support me on Buy Me a Coffee, Stripe or GitHub Sponsors](https://thomasbnt.dev/donate). Thanks for read my post ! 🤩|
|---|---|
Checkbox Size CSS - [SOLVED]
Tags: css
Published: 2021-09-12 17:28:33

## TL;DR Summary

When changing the checkbox size in CSS there are two things you need to do:

1) setting ***width*** and ***height*** on the ***input*** element

But when you change the checkbox size then you have a problem because it looks out of place.

2) The way to fix it is with ***top*** property along with ***position: relative;***. This is the key to positioning it properly.

```css
#big-input {
  width: 20px;
  height: 20px;
  top: 4px;
  position: relative;
}
```
And that's it.

## More details

If you want the full code for the screenshot example on the top, here is the code that was used:

```html
<style>
  body { 
    background-color: aquamarine; 
    padding: 300px;
    text-align: center;
  }
  #big-input {
    width: 20px;
    height: 20px;
    top: 4px;
    position: relative;
  }
  #small-input {
    width: 8px;
    height: 8px;
    top: -2px;
    position: relative;
  }
</style>

<input type="checkbox" id="big-input" />
  <label>Big checkbox........</label>
  <br /><br />
<input type="checkbox" id="normal" />
  <label>Normal checkbox</label>
  <br /><br />
<input type="checkbox" id="small-input" />
  <label>Small checkbox..</label>
  <br /><br />
```
And that's all there is to setting checkbox size with CSS.

Until next time,
*Will*
*[Building an Algo-Trading Hedge Fund From Scratch](https://programmermoney.com/)*
How to Manage Multiple SSH Keys for GitHub, GitLab, etc.
Tags: ssh, github, gitlab
Published: 2021-09-12 17:15:56

> Short tutorial on how to structure projects and setup multi-user Git SSH workflow.

When using a single machine with multiple git accounts, you might encounter some obstacles with SSH setup. The easiest way to achieve a multi-user setup is to structure git repositories by respective directories, e.g.:
```
projects
├── work
│   ├── enterprise-fiz-buz
│   └── ...
└── personal
    ├── karolis.sh
    └── ...
```
This short tutorial will help you set up SHH for such workflow.

## Generating a new SSH key

To generate a new SSH key, use the provided template script (or check the [docs](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh)):

```sh
export EMAIL=karolis.sarapnickis@work.com
export SSH_FILE=$HOME/.ssh/id_rsa_work
ssh-keygen -t rsa -b 4096 -C $EMAIL -f $SSH_FILE
ssh-add -K $SSH_FILE
echo "🔽 PUBLIC KEY BELOW 🔽" && cat $SSH_FILE.pub
pbcopy < $SSH_FILE.pub
```

What's left is to add the SSH key to your [GitHub](https://github.com/settings/keys)/[GitLab](https://gitlab.com/-/profile/keys)/etc. account.

## Multi-user Git SSH setup

The general idea is that you use specific [ssh command](https://git-scm.com/docs/git-config.html#Documentation/git-config.txt-coresshCommand) based on your working directory with the help of [git includes](https://git-scm.com/docs/git-config.html#_includes).

Update the `~/.gitconfig` file:

```yaml
[user]
  name = Karolis Šarapnickis
  email = pastas.k@gmail.com
[core]
  sshCommand = ssh -i ~/.ssh/id_rsa
[push]
  default = current
[includeIf "gitdir:~/projects/work/"]
  path = ~/.gitconfig.work
```

And the `~/.gitconfig.work` file:

```yaml
[user]
  email = karolis.sarapnickis@work.com
[core]
  sshCommand = ssh -i ~/.ssh/id_rsa_work
```

And that's it! Appropriate SSH setup will be used based on directory location, no extra actions are needed.
TypeError: string indices must be integers
Tags: python, programming, codenewbie, tutorial
Published: 2021-09-13 05:52:53

---
title: TypeError: string indices must be integers
published: true
date: 2021-09-12 17:08:08 UTC
tags: #python #programming #codenewbie #tutorial
canonical_url: https://itsmycode.com/typeerror-string-indices-must-be-integers/
---

ItsMyCode |

In Python, the iterable objects are indexed using numbers. If you try to access the iterable objects using string, you will get typeerror: string indices must be integers.

## Python TypeError: string indices must be integers

All the iterable objects such as lists, dictionaries, strings are indexed using the number, and the index starts from 0. Let’s look at the following example of a list and access the element using the number index.

```python 
mylist=["Joe","Rachel","Chandler","Monica"]
print("The second element in the list is ", mylist[1])
```

**Output**

```python 
The second element in the list is Rachel
```

**Example 1**

```python 
series ={
    "name":"Friends",
    "seasons":10,
    "releasedate": 2000
}

for i in series:
    print("Name of series ", i["name"])
    print("total no of seasons in series ", i["seasons"])
    print("Release date is ", i["releasedate"])
```

**Example 2**

```python 
text= "Hello World"
print(text['hello'])
```

**Output**

```
Traceback (most recent call last):
  File "c:\Projects\Tryouts\Python Tutorial.py", line 8, in <module>
    print("Name of series ", i["name"])
TypeError: string indices must be integers
```

If you look at the above examples, we have declared a dictionary object in the first one. We are iterating the series object using for loop and trying to print the value of the dictionary using the indices instead of an integer.

In another example, we have a string, and accessing the character of a string needs to be done using an integer, but instead, we use a string here, which again will lead to typeerror: string indices must be integers.

## **Solution – ** string indices must be integers

The major problem in our code was iterating the dictionary keys and indexing using string. We cannot use the index of key to access the values. Instead, we can print the keys as shown below.

```python 
series ={
    "name":"Friends",
    "seasons":10,
    "releasedate": 2000
}

for i in series:
    print(i)
```

Output

```python 
name
seasons
releasedate
```

If you want to print the values in the dictionary, do not use any loop or iterate using the loop. Instead, access the dictionary using the key to print its value, as shown below.

```python 
series ={
    "name":"Friends",
    "seasons":10,
    "releasedate": 2000
}
print("Name of series ", series["name"])
print("total no of seasons in series ", series["seasons"])
print("Release date is ", series["releasedate"])

Name of series Friends
total no of seasons in series 10
Release date is 2000
```

The post [TypeError: string indices must be integers](https://itsmycode.com/typeerror-string-indices-must-be-integers/) appeared first on [ItsMyCode](https://itsmycode.com).
Neovim with Lua configs
Tags: vim, linux
Published: 2021-09-12 17:06:12

## This is a small attempt to improve NeoVim experience.

**Plugins attached** : 
- Telescope
- Nvim Tree
- Native LSP
- Indent Blankline
- Gruvbox Colorscheme
- Treesitter
- Rainbow Brackets ( Not configure properly )
- AutoPairs 
- Kommentry
- GitSigns
- Dashboard ( some bugs with Indentline )
- Vim Snippets
- Vim Sneak
- Nvim AutoTag
- Diff View ( Git Diff view changes )
- Nvim Colorizer ( shows colors )

It has general configuration for React and Web Development.

GitHub : https://github.com/psycoder01/Neovim-Config
If you like it, Do give it a STAR .
Load Unity webgl at React.js
Tags: github, programming, unity3d, react
Published: 2021-09-12 16:59:32

Hi everyone, I'm just passing here to share with everyone a video that I've recorded about how to properly load and setup  the npm package **react-unity-webgl** at React.js. I think that a lot of people are having this problem. After figuring out, I decided to share it with you guys :) . feel free to contact me if you need.
 
{% youtube aCNY7RHUa64 %}
Query through Elasticsearch Indices with Laravel
Tags: laravel, elasticsearch
Published: 2021-09-12 16:52:11

Just come across a use case during my daily works, to query through Elasticearch indices, in Laravel.

I'm assuming you have installed Elasticsearch, have indices, index pattern defined and of course, data populated in the index documents.

Then, create a Laravel project and install this [Laravel Elasticsearch](https://github.com/cviebrock/laravel-elasticsearch) package.

Then, let's create a file in your laravel project - I've create a directory called `tinker/` and created `tinker/es.php` in it.

Then paste the following codes in the file.

```php
<?php 

$stat = Elasticsearch::indices()->stats(['index'=>'your-index-*']);
$indices = $stat['indices'];
$field = 'username.keyword';
$keyword = 'xyz';
$list = [];
foreach ($indices as $key => $value) {
	echo $key . PHP_EOL;

	$data = [
		'index' => $key,
	    'body'  => [
	        'query' => [
	            'match' => [
	                $field => $keyword,
	            ]
	        ]
	    ]
	];
	$list[] = Elasticsearch::search($data);
}
dd($list);
```

Run the above command: 

```bash
php artisan tinker tinker/es.php
```

The above code should return something like:

```
your-index-2021.09.12
array:1 [
  0 => array:4 [
    "took" => 5
    "timed_out" => false
    "_shards" => array:4 [
      "total" => 1
      "successful" => 1
      "skipped" => 0
      "failed" => 0
    ]
    "hits" => array:3 [
      "total" => array:2 [
        "value" => 1
        "relation" => "eq"
      ]
      "max_score" => 0.2876821
      "hits" => array:1 [
        0 => array:5 [
          "_index" => "your-index-2021.09.12"
          "_type" => "_doc"
          "_id" => "xH652nsBOpLioOpWB7gH"
          "_score" => 0.2876821
          "_source" => array:7 [
            "password" => "xyz"
            "username" => "xyz"
            "@timestamp" => "2021-09-12T15:56:03.935Z"
            "port" => 50784
            "tags" => array:1 [
              0 => "your-index"
            ]
            "@version" => "1"
            "host" => "localhost"
          ]
        ]
      ]
    ]
  ]
]
```

<hr>

*The cover image is an incoming event for JomLaunch 2021. You can buy tickets from https://launch.jomweb.my/. Every year, the JOMWEB Facebook Group community (facebook.com/groups/jomweb) which consists of programmers, developers, UI/UX designers, security experts, and other ICT activists in the country gather to highlight their projects. This is all to celebrate the country's ICT talents and expertise, and take the opportunity to get to know and learn from each other. This year 2021, JOMLAUNCH continues again, digitally.*
Animated Sky Using CSS Keyframes, Gradients and Transform
Tags: css, webdev, codepen, animation
Published: 2021-09-12 16:45:19

## Animated Sky Using CSS Keyframes, Gradients and Transform
This was a fun weekly Codepen challenge. Animation is one area of CSS that I don't really get to use at work so this was my opportunity to work more with keyframes and transforms.

{% codepen https://codepen.io/pursuitofleisure/pen/MWobpzd %}

### How to Animate the Sun on a Curve
I immediately had flashbacks to Flash and tweening and wondered how it was possible to do this only using CSS. Then I found this [Stack Overflow post](https://stackoverflow.com/questions/46949940/css-animate-object-in-curved-path) which just uses CSS transform: rotate and puts the sun on a corner of the div. Simple and effective. (Don't look for astronomical accuracy with how the moon and sun orbit though!)

### How to Animate Gradients with CSS
Spoiler alert: [you can't](https://keithjgrant.com/posts/2017/07/transitioning-gradients/). You can only use opacity, which is what I used in combination with keyframes. This was the most time-consuming part because I wanted the sky's colors to reflect the real day, which meant not making every single gradient each take up the same percentage, so this was a lot of trial and error with changing the opacity percentages.

### Add some JavaScript
I wanted to keep as much of the code in CSS as possible, so the gradients and sun/moon transitions are all done using CSS. I could have built the stars in the night sky manually via HTML and CSS, but decided that randomly generating them and being able to update the total number was more efficient. Plus I need some vanilla JavaScript practice.

Since the animation loops infinitely, I figured I'd add a pause/play button for people who want to check out the code without being distracted.
H3 Font Size
Published: 2021-09-12 16:37:27

## TL;DR Summary

Checking the ***h3*** font size in the browser's inspect code we get that default size is ***1.17em***.

![h3 font size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1z4pbo04ktvr92wgve7.png)

But how much is that in pixels? According one of many tools you can find online we get the number ***18.72px***

![em to pixels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxb6pbmw190pi0ygaajt.png)

Of course if you wanted to change the default ***h3*** font size you can do it easily in CSS:

```css
h3 {
  font-size: 30px;
}
```
And that's it.

Until next time,
*Will*
*[Building an Algo-Trading Hedge Fund From Scratch](https://programmermoney.com/)*
What are loops in JavaScript and why use them?
Tags: javascript, loop
Published: 2021-09-12 16:29:32

Loops in JavaScript are a very important topic and it is very important for you to learn what are loops and why to use them.

Suppose, we have a single line of code or a block of code and we want to print it up to n-times(n = 1,2,3,4,5,6,... or 100) as shown in e.g # 1

## Example # 1:
### Source code:
    console.log("Hello world! ");
    console.log("Hello world! ");
    console.log("Hello world! ");
    console.log("Hello world! ");

### Output :
     Hello world! Hello world! Hello world! Hello world!

In the above example we have a single line of code that we want to print four times so we wrote 'console.log("Hello world! ");' for four times.

In the above example, we just wanted to write the one line of code only four times so but what if we want to write the same line of code up to 20-times or 30-times, then it would never be a good strategy to write the one line of code up to 20 or 30-times.

So, here comes the concept of the loop in JavaScript. JavaScript loop provides us the facility and makes our code much shorter.

We have multiple loops in JavaScript.
#### i.e
1 for loop
2 while loop
3 do while loop
4 for each loop

Below is an example that demonstrates the concept, using for loop

## Example # 2 :
### Source code:
for(var i = 0; i < 4; i++){
console.log("Hello world! ");
}

### Output:
Hello world! Hello world! Hello world! Hello world!

Example 1 VS Example 2 :
In example one we wrote one line of code four times and at the same time, we wrote the same line of code for one time which will be executed four times.
So, that was the practical demonstration of the loop.

## Conclusion:
JavaScript loops allow us to execute the same code a number of times (as you can see in Example # 2) instead of writing the same code individually (as you can see in Example # 1). That is why loops are very useful in JavaScript