teleren/devto huggingface dataset:
Using getElementsByName Method in Javascript
Tags: javascript, webdev, beginners, short
Published: 2022-02-22 10:14:50

> Image by <a href="https://unsplash.com/@baciutudor?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tudor Baciu</a> on <a href="https://unsplash.com/s/photos/javascript?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
#### HTML Name attribute

This is an attribute for a HTML element that is used to identify the element by assigning it a name.

One of the most common uses of the name attribute would be to use it to identify the form inputs submitted to the server ( this is opposed to using the Id attribute which would be the most common way to identify an element on the Clientside - which cannot be used because the Id attribute does not get passed to the server on form Submit ).

 

Example of name attribute :

 

```html

<input name="firstname" Placeholder="Enter Your First Name"/>

<input name="lastname" Placeholder="Enter Your Last Name"/>

```

 

#### Accessing via Javascript

 

To access a HTML element/s  by the name attribute we use `getElementsByName` which returns a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) of all elements that have the given name attribute

eg:

```javascript

getElementsByTagName('attributename')

```

 

The NodeList is an array like object - this means that it is missing some array features like `push` , `pop` etc .  

 

Example:

 

``` html

<div id="surveyitems">

 

  <button name="survey" >JS Rocks</button>

  <button name="survey" >JS Doesn't Rock</button>

  <button name="survey" >I don't know what JS is</button>

 

</div>

 

```

 

```javascript

let survey = document.getElementsByName('survey')

for (let item of survey) {

    console.log(item.innerText);

}

 

for (var i = 0; i < survey.length; i++) {

    console.log(list[i].innerText);

}

 

survey.forEach(element => {

    console.log(element.innerText)

});

```


Also remember that `getElementsByName` also returns a *Live* nodelist as opposed to a static one like one returned by `querySelectorAll` , so even valid elements created after the point that you assign it to a variable will appear in your list.

See the below example -

{% jsfiddle https://jsfiddle.net/6wc8yh0L/ %}


Notice how the count incremented yet we never updated the surveylist variable ? This is because the NodeList is *Live* , so make sure you don't get caught out by this !


#### Slán go fóill
 
Feel free to ask questions, comment or contribute below!

And if you're feeling generous you can buy me a coffee with the link below ( and yes its all for coffee,  I drink a copious amount of it while writing ☕ )  


[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/SUKaQp9)
Magento2 Redis TLS
Tags: magento2, redis, tls, php
Published: 2022-02-22 10:06:22

After spending days searching on internet and trying on my local environment, I found no reference on how to setup Magento2 with Redis TLS. 

So I decided to added a simple example of my env.php, so I hope I can help anyone with this setup.

```php
    'cache' => [
        'frontend' => [
            'default' => [
                'backend' => 'Cm_Cache_Backend_Redis',
                'backend_options' => [
                    'server' => 'tls://master.customer-store-production.msd21s.use1.cache.amazonaws.com',
                    'password' => 'password',
                    'database' => '2',
                    'port' => '6379',
                    ...
                ]
            ],
            'page_cache' => [
                'backend' => 'Cm_Cache_Backend_Redis',
                'backend_options' => [
                    'server' => 'tls://master.customer-store-production.msd21s.use1.cache.amazonaws.com',
                    'password' => 'password',
                    'port' => '6379',
                    'database' => '2',
                    ...
                ]
            ]
        ]
    ],
    'session' => [
        'save' => 'redis',
        'redis' => [
            'host' => 'tls://master.customer-store-production.msd21s.use1.cache.amazonaws.com',
            'port' => '6379',
            'password' => 'password',
            'database' => '3',
            ...
        ]
    ],
```
In Go nil is not equal to nil, sometimes
Tags: go, todayilearned, codenewbie
Published: 2022-02-22 10:01:00

In some cases, Go returns false when comparing nil variable and nil. This might be confusing for beginners. But this leads to some benefits too.

---

> 🇨🇿 V češtině si lze článek přečíst na [kutac.cz](https://www.kutac.cz/pocitace-a-internety/v-go-se-nil-nerovna-nil-nekdy) 

The following code is a nice example when variable `val` is `nil` but the comparison in the function returns false. A similar situation is with `readFile` function, which returns `error`. You can run code in [Go Playground](https://go.dev/play/p/X73qPwOQ50J) to prove to yourself it is true.

```go
func nilPrint(val interface{}) string {
	if val == nil {
		return "I got nil"
	}
	return fmt.Sprintf("I got %T type with value '%v'", val, val)
}

func readFile() error {
	var err *fs.PathError
	fmt.Println(err == nil)
	return err
}

func main() {
	// Prints: I got string type with value 'Some value'
	fmt.Println(nilPrint("Some value"))
	// Prints: I got nil
	fmt.Println(nilPrint(nil))
	// Prints: true
	// but then: I got *string type with value '<nil>'
	var val *string
	fmt.Println(val == nil) // Prints true
	fmt.Println(nilPrint(val))

	fmt.Println("\nWith error interface")
	// Prints: true (inside readFile)
	// but then: false (in main method)
	err := readFile()
	fmt.Println(err == nil)
}
```

## The reason of this is interface

This behavior is caused by using `interface{}` as an input type. Which is something like **Any**. The second function returns `error`, which is also interface. The 
comparison then returns `false`, because the value is null, but it has also data type. That is the reason why it is not equal to "raw" `nil`. If you are comparing variable with a known type, you are not affected by this behavior.

### Solution with reflection

The way to fix the function which is returning `error` is simple. Do not set concrete error type, but stay with `error` type. So changing first line to this `var err error`. That is also best practise.

In the second case it might be little bit trickier. Changing data type is not so easy, because we want to accept anything. So the reflection package must be used here.

```go
if val == nil || (reflect.ValueOf(val).Kind() == reflect.Ptr && reflect.ValueOf(val).IsNil()) {
	return "I got nil"
}
```

## Calling methods on nil object

> I'm not sure this is related to behavior described above. But in my eyes it is similar.

Go doesn't have methods like other OOP languages. In Go, we call it **receivers**, which acts similarly. But there is a main difference. If the variable of type is nil, you can still call its receivers, or methods if you want. The code below does not panic but works correctly. Check it on [Go Playground](https://go.dev/play/p/bHKhx8Q_z-_5).

```go
type JSONParser struct {
	raw string
}

func (p *JSONParser) Length() int {
	if p == nil {
		return 0
	}
	return len(p.raw)
}

func main() {
	var parser *JSONParser
	fmt.Println(parser.Length()) // Prints: 0

	parser = &JSONParser{raw: `{"just": "show", "some_result": 255}`}
	fmt.Println(parser.Length()) // Prints: 36
}
```
It's impossible to get a voice in here
Tags: meta
Published: 2022-02-22 09:53:07

---
title: It's impossible to get a voice in here
published: true
tags: meta
---

Twice now, I've spent considerable time carefully writing an article, just to watch it get 20-30 hits in the first hour, and then disappear into oblivion - never to be seen by anyone again.

If my content was bad, I could understand it - but I've been told (by Dev staff and other developers) that it's really helpful. I don't like to be the judge of my own work, but I don't think my content is bad.

It's great to see the site become a success - but the sheer volume of traffic in here apparently makes it impossible to get a voice.

Putting work into an article feels like a complete waste of time.

I'm not famous or well known (and don't wish to be) so I don't have a million Twitter followers or some other way to get people to notice my content.

I'm guessing that's the only way your content gets noticed here?

It's on the front page for an hour, tops, and then it's gone.

It looks like a quick paragraph or 5-10 words like "do you like X?" or "how do you feel about Y?" gets the same amount of air time on Dev as anything else - and maybe the site equally weighs discussions and actual content?

Mixing discussions and articles into a single stream might not be working well?

I don't know how to fix this, but I've brought it up with the Dev staff before, and they seemed to agree, this is not really working well.

This makes me wonder as well, how much good content from other contributors am I missing? How much actual content gets drowned out by quick prompts and baits?

Honestly, I probably won't bother writing anything else here again until or unless you manage to do something smart about this.

There has got to be some way you can give air time to actual content?

Very frustrating.

I feel like Dev has far more potential than what it's delivering right now.

`</rant>`
What satisfy you when you finish your day as a developer
Tags: devlife
Published: 2022-02-22 09:37:34

---
title: What satisfy you when you finish your day as a developer
published: true
description: This is a document to ask developer what satisfy them when they finish their journey.
tags: devlife
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62aiwrke75gegbs5dusn.jpg
 
---

One day I fall on a quote from Steve Jobs: 
>"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderfull... that's what matters to me". 

This makes me questioning about myself, So as a developer what satisfy me when I go back home after work?

I work as a software developer. I generally write Python code for back-end, but there is also time that I switch to front-end.
For me, there is nothing more satisfying than going home after solving a problem at work. This makes me feel that I am not too bad :-). It also gives me the desire to go back to work tomorrow.

There are many answers to this question, as everyone has his proper priority in Life. Somme can say:
* It's seeing their child
* it's the feeling to be back home
* It's the fact that they can take rest 

So what is yours ?
Use Caps Lock to trigger iTerm2 terminal
Tags: tools, iterm2, terminal
Published: 2022-02-22 09:33:50

---
title: "Use Caps Lock to trigger iTerm2 terminal"
published: true
description: A guide to remap Caps Lock to open the iTerm2 Mac terminal from anywhere in the system.
tags:
  - tools
  - iterm2
  - terminal
cover_image: https://strdr4605.com/use-caps-lock-to-trigger-iterm2-terminal.jpg
canonical_url: https://strdr4605.com/use-caps-lock-to-trigger-iterm2-terminal
---

A long time ago someone showed me that it's possible to add a hotkey to iTerm2 to open the terminal window from anywhere in the system. Till these days I was using `` ` `` key as a hotkey. But when having to input `` ` `` in markdown or JS I had to use ``Option + ` `` which has specific behavior.

I decided to try Caps Lock for a while (as Caps Lock is one of the useless keys on the keyboard).

The issue is that iTerm2 does not recognize the Caps Lock press. So I have to remap in MacOS Caps Lock to Control key.

Go to **System Preferences > Keyboard**:

1. Select Modifier Keys:

![macos keyboard mod keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qd6db80pqn0zwmz8dqa.png)

2. Set Caps Lock as Control key: 

![macos caps lock ctrl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlhyph4j66j4mrgeg169.png)

3. Go to iTerm, **System Preferences > Profiles > Select profile > Keys > Configure Hotkey Window**:
![iterm add hotkey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwcf1gqy1r4pvjm2o43b.png)

4. Set Double-tap key as Control

![iterm ctrl hotkey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5oi1njvscj14zbyfmsy.png)

Now when you double press Caps Lock (or Ctrl) the iTerm window will popup.
How To make a Text Editor in Python?
Tags: python, beginners, programming, tutorial
Published: 2022-02-22 09:23:06

```Python
#Kaveh Sabouri
from tkinter import *
import time
window = Tk()
window.geometry("572x600")
window.config(bg="lavender")
window.title("Text-Editor")
frame1 = Frame(window,)
txt1= Text(window,font=("",10))
txt1.place(x=2,y=280)
labl1= Label(text="Click on the white field to write. ",font=("Lalezar",20),bg="lavender",fg="green")
labl1.place(x=140,y=239)
la1=Label(window,text="Background color:",font=("Lalezar",25),bg="lavender")
la1.place(x=355,y=2)
def red():
    txt1.config(bg="red")

#first
btn1=Button(window,text="Red",font=("",20),fg="red",command=red)
btn1.place(x=420,y=50)
def blue1():
    txt1.config(bg="Blue")
btn2=Button(window,text="Blue",font=("",20),fg="blue",command=blue1)
btn2.place(x=420,y=100)
def yellow1():
    txt1.config(bg="#ffe02e")
btn3=Button(window,text="Yellow",font=("",20),fg="#ffe02e",command=yellow1)
btn3.place(x=410,y=150)
def green1():
    txt1.config(bg="green")
btn4=Button(window,text="Green",font=("",20),fg="green",command=green1)
btn4.place(x=412,y=200)






#second
lala1=Label(window,text="Colored text:",font=("Lalezar",25),bg="lavender",fg="black")
lala1.place(x=190,y=2)
def fred():
    txt1.config(fg="red")
bbtnred=Button(window,text="Red",font=("",20),fg="red",command=fred)
bbtnred.place(x=230,y=50)
def blue2():
    txt1.config(fg="blue")
btn2=Button(window,text="Blue",font=("",20),fg="blue",command=blue2)
btn2.place(x=230,y=100)
def reset():
    txt1.config(fg="black")
    txt1.config(bg="white")
    txt1.config(font=("Arial"))
    window.geometry("572x600")
    
    
btnbargaedandan=Button(window,text="Reset",font=("",20),fg="red",command=reset)
btnbargaedandan.place(x=2,y=239)
def yxyx():
    txt1.config(fg="yellow")

btn8=Button(window,text="Yellow",font=("",20),fg="#ffe02e",command=yxyx)
btn8.place(x=223,y=150)
def green2():
    txt1.config(fg="green")
btn4=Button(window,text="Green",font=("",20),fg="green",command=green2)
btn4.place(x=225,y=200)


fontlable=Label(window,text="Sizes:",font=("Lalezar",25),bg="lavender",fg="black")
fontlable.place(x=50,y=2)
def size1():
    txt1.config(font=("",10))
bbtttnnn=Button(window,text="10",font=("",20),bg="lavender",fg="black",command=size1)
bbtttnnn.place(x=50,y=50)

def size2():
    txt1.config(font=("",20))
btn2=Button(window,text="20",font=("",20),command=size2)
btn2.place(x=50,y=100)
def size3():
    txt1.config(font=("",30))
btn3=Button(window,text="30",font=("",20),command=size3)
btn3.place(x=50,y=150)
window.mainloop()
```
How to implement a tracking log output location plugin?
Tags: javascript, beginners, webdev, webpack
Published: 2022-02-22 09:07:06

## Summary content

- Environment construction
- Implementation steps
- Summarize

## Achieve the effect
Often we console.log to print the log. If the editor does not support it well, then the print log does not know which file and which line is printed, so we need to know which file and which line the log is printed in, and finally achieve the effect As shown below

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

## Environment setup
- Initialize project
`npm init -y`
- Install dependencies
` npm install @babel/core @babel/preset-env @babel/types babel-loader webpack webpack-cli -D `
- Create directories and pack files

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

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

- configure webpack.config.js

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

## Analyze the AST of the code
Look at console.log(“sum: sdf”); what it looks like when converted to AST. In order to see more clearly, we check all the buttons above to make AST look simpler and clearer

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

## Console output log format
- Case 1: console.log(“sum: sdf”);

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82cfl56zh4e47r15px7p.png)
- Case 2: console.log(“sum: sdf”,”123");

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuob2w5fn1qnlo2ii8ho.png)
- Case 3: console.log(“123”,”sum: sdf” + “sdf”);

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

## Adjust the AST syntax tree
According to the AST structure of various output console formats, compare and see how to adjust the AST

According to the above AST analysis, we have the idea of ​​​​implementing, which is not to find the log method in the console, and then add a parameter at the end of the argument to spell the log output source code file and output function.

## Implement the plugin



## Summarize
- Check the AST structure first, and then compare the AST structure to get AST adjustment ideas
- Combining debugging + official documentation to achieve functional details
Source code portal: [04-traceLogPos](https://github.com/yxw007/H5-Learn/tree/master/webpack/04-traceLogPos)

## References
- [astexplorer.net](https://astexplorer.net/)
- [835447-babel-javascript-source-file-line-number-macro](https://stackify.dev/835447-babel-javascript-source-file-line-number-macro)
- [babel-types#stringliteral](https://babeljs.io/docs/en/babel-types#stringliteral)

Above: If you find any problems, please leave a message and point it out, and I will correct it in time

**Thanks for reading, welcome to follow me for more technical articles**
TypeScript vs vanilla JavaScript for your next project
Tags: javascript, typescript, programming, tooling
Published: 2022-02-22 08:45:36

While choosing between TypeScript and vanilla JavaScript for a web application it is important to understand that all web applications work with **data**.

In case when your the data structure of your application is not fixed, then TypeScript would be an overkill for such application.

But most of web applications work with data that has a **strictly defined structure** (of course the structure evolves during the app lifetime, but this still doesn't change the game rules).

In such case applying TypeScript to you app will significantly **improve the quality of your code**. And that comes with almost no additional maintenance cost, since most of modern development tools offer great integration with TypeScript.

What is your opinion about this? If you agree with me, leave your reaction to this post! If not, comment your objections down below!

And remember: don't stop coding, don't stop growing!
Update for week 6
Published: 2022-02-22 08:42:20

#Overview
The release 2.7 landed successfully this week and I am happy to be one of the contributors. Next week we will work on the plan for 2.8 and I picked 2 issues to work on. 

# [React Native Home Page](https://github.com/Seneca-CDOT/telescope/issues/2858)
As I mentioned in my last blog post, I finished mostly the issues and just need some styling to make the page looks like its original version.
However, it is not easy at that. I had a hard time with styling. I had to re-order some <code>View</code>, <code>Text</code> and other elements to give them appropriate styling. Styling in React Native is not nearly the same as CSS styling.
```
container: {
   flex: 1,
   justifyContent: 'center',
}
```
This means the container will spread out the whole screen if it is the only parent element. And all the child elements will be centered horizontally. 
In CSS, I normally use <code>em</code> or <code>rem</code> when applying padding or margin. However React Native does not understand that. We have to use specific number like <code>marginTop: 25</code>
On top of that, it is sometimes annoying that React Native StyleSheet,which a lot of people and I are using, does not have some styling properties like CSS. For example, <code>letterSpacing</code>. To deal with this issue, I have to research a lot and basically you have to style inside the tag.  So your code will have separate parts of styling:
```
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  studentQuote: {
    zIndex: 1000,
  },
  studentQuoteText: {
    color: 'white',
    fontSize: 21,
    textAlign: 'center',
    marginTop: 25,
  },
});
```
```
<View style={styles.container}>
      <Text
        style={{
          zIndex: 1000,
          letterSpacing: 13,
          fontSize: 45,
          fontWeight: '600',
          color: '#A0D1FB',
        }}
      >
        Telescope
      </Text>
      <Pressable style={styles.studentQuote} onPress={() => Linking.openURL(studentQuote.url)}>
        <Text style={styles.studentQuoteText}>"{studentQuote.quote}"</Text>
        <Text style={styles.studentQuoteText}> {studentQuote.author}</Text>
      </Pressable>
    </View>
```
#[Dashboard issue](https://github.com/Seneca-CDOT/telescope/issues/2961)
Big challenge for me is that the dashboard has changed a lot since the last time I worked on an issue about it. It is now using Handlebars. In terms of the issue, the contribution cards will not sometimes show the avatar of contributors if there are more than 1 authors. This problem is related to how we render the view of Handlebars. My guess is that we have to make a loop into the numbers of authors to render out all of their name and avatars.
Webmethods.io B2B - Document exchange using SFTP
Tags: webmethods, b2bintegration
Published: 2022-02-22 12:57:07

---
title: Webmethods.io B2B - Document exchange using SFTP
published: true
date: 2022-02-22 08:36:05 UTC
tags: webmethods, b2bintegration
canonical_url: https://tech.forums.softwareag.com/t/webmethods-io-b2b-document-exchange-using-sftp/255413
---

# [webMethods.io](http://webMethods.io) B2B Channels Introduction

Channels enable document exchange between trading partners in [webMethods.io](http://webMethods.io) B2B. There are two types of channels - Inbound (used to receive the documents) and Outbound (used to transfer documents). The channels can be created during design-time and can be used during runtime to exchange the documents.

[webMethods.io](http://webMethods.io) B2B supports multiple protocols over which these channels (Inbound and Outbound) can be created and used to exchange the business documents.  
The Protocols supported in [webMethods.io](http://webMethods.io) B2B till date are:

- HTTP
- AS2
- RNIF
- SFTP

**Visit the [original article](https://tech.forums.softwareag.com/t/webmethods-io-b2b-document-exchange-using-sftp/255413) in the Software AG Tech Community to learn all about the SFTP protocol!**
How I stay focused while coding
Tags: codenewbie, programming, productivity
Published: 2022-02-22 08:06:27

Staying focused while coding is very important and especially while debugging ifykyk 

# Here's what I do to stay focused 👇:

##Stay hydrated 💧
Staying hydrated is very important it helps my brain think better and reduces stress, so I keep my water bottle close to me and refill it constantly.

##No social media 🙅‍♂️
Social media notifications are the most distracting thing in this world to me, so I keep them off everytime and only open social media when I'm done with my work 💻

##Calm environment 😌
Calm and relaxing environment is the key to think better, I personally cannot think in a chaotic environment, I plugin my earphones and use relaxfrens.com to make my environment calm using relaxing sounds 🌊🌳, it's free to use.

##Organising tasks as per priority 📈
Often times when there are lots of tasks on my plate I lose focus and jump around the tasks without completing any, so I prioritise each and every task and only touch them when it's their turn.

###What do you do to stay focused while coding?
Drop yours below 👇

Thanks for reading! 🤗