teleren/devto huggingface dataset:
Manipulating / Accessing HTML element using JavaScript pt 1
Tags: javascript, programming, tutorial, webdev
Published: 2022-07-27 13:20:50

In plain English, DOM provides a way to manipulate or access HTML elements using JavaScript.

Say you want to get the value of an input field or a HTML element into your JavaScript function or code, DOM makes that possible.

> It's also possible to get the value of a HTML element and access it using CSS but this article doesn't cover that


## METHODS FOR GETTING HTML ELEMENT
So I'd list out the methods before explaining their syntax



1. getElementByTagName()
2. getElmentByClassName()
3. getElementById()
4. query selector()




> 
**getElementByTagName()**: Just as the name implies, this methods takes a HTML tag name and returns an _array_ of the HTML element with that tag.
> We can then loop through the array to get individual element like we'd loop through every other array.


_Basic syntax_

```
//returns an array of all HTML element with the p tag
const elements = document.getElementByTagName('p') 

// Looping through the array of elements 
for (let i=0; i<elements.length; i++){

    //Getting each html element in the array
    Console.log(elements[i])
}
```



> **getElementByClassName()**: This method takes a class name and returns an array of the HTML elements with that class.
We can loop through the array as we would an array.

_Basic syntax_

```
//returns an array of all HTML element with the title class
const elements = document.getElementByClassName('title') 

// Looping through the array of elements 
for (let i=0; i<elements.length; i++){

    //Getting each html element in the array
    Console.log(elements[i])
}
```



> **getElementById()**: This method takes an id name and returns a single HTML elements with that id.

_Basic syntax_

```

const elements = document.getElementById('demo') 
Console.log(elements)

```

> **querySelector()**: This method takes either an id name or class name or tag name and returns a single HTML elements with that id, class or tag.

_Basic syntax_

```

// select the first available h1 element
let firstTitle = document.querySelector('h1') 

// select id with first-title
let firstTitle = document.querySelector('#first-title') 

// select the first available element with class title
let firstTitle = document.querySelector('.title') 
```

Thanks for the read ❤️
Leadership Beliefs that Ignore Reality
Tags: management
Published: 2022-07-27 13:20:00

Leadership in a non-Agile organization try to optimize work by using experts in each area, creating detailed specs and estimates, and readily replacing individuals if needed.  The reality is that this only works well within 3 constraints:  
1. Scope is knowable in advance
2. Work is estimable with precision
3. People are fungible

Knowing exactly what product you are going to build and exactly how long it is going to take is often taken for granted in projects where this is hard to know.  In the end, departments and project managers end up scrambling to avoid loosing quality, missing a deadline, or going over budget.   For instance, they might replace a team member and have little consideration for the time it will take them to get up to speed on the project and develop a good working relationship with the rest of the team. 

Does your project meet these 3 constraints?  Are you sure about that? Consider how often estimates are not accurate, how often you deploy a feature that the customer never uses, how often the specs change…. The reality is that being able to respond quickly to changes in the market or customer needs is a competitive advantage.  Leaders need to shift their beliefs and accept the reality that holding onto these 3 constraints is limiting the capacity of your teams. 

 Greski and Bradley point out: “The goal isn’t Agile; the goal is an organization that responds at market speed. Agile is just one method to get there.”

They also encourage leaders to: “…maximize the amount of work not done to deliver value quickly, ensure stories align to strategic priorities and demonstrate progress frequently…”

More great thoughts from Greski and Bradley in their article on the Leading Agile blog:  [Setting your Transformational Frames: The CEO’s Role in Identifying and Implementing Change for a New Future](https://www.leadingagile.com/2022/05/setting-your-transformational-frames-the-ceos-role-in-identifying-and-implementing-change-for-a-new-future/?internal=true)
CSS Feature Queries Tutorial
Tags: css, webdev, tutorial, writing
Published: 2022-07-27 13:10:00

Feature Queries are used in CSS for precise feature detection. And they’re now supported by all the modern browsers!

We use the `@supports` keyword. For example:
```css
@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}
```
Here we’re checking if the `vh` unit is supported. If so, the `height` value is set accordingly.

As you can see they’re structured much like a media query.

Let’s expand upon our example:
```css
.container {
  height: 100%;
}
@supports (height: 100vh) {
  .container {
    height: 100vh;
  }
}
```
Here, we’ve provided a fallback by default giving the container a `height` value of 100%. If the browser supports the `vh` value, 100vh will apply instead.

Older browsers will simply ignore the `@supports` block.

We can use `@supports` for any CSS property, to check any value.

We can also use the logical operators `and`, `or` and `not` to build more complex feature queries.

Let’s use `and` to check if the browser supports [CSS Grid](https://dev.to/rembertdesigns/the-css-grid-tutorial-458i) and [Flexbox](https://dev.to/rembertdesigns/the-css-flexbox-tutorial-216j):
```css
@supports (display: grid) and (display: flex) {
  /* ... */
}
```
Another example, asking if [CSS Grid](https://dev.to/rembertdesigns/the-css-grid-tutorial-458i) is supported:
```css
.element {
  float: left;
  ...
}
@supports (display: grid) {
  .element {
    float: none;
    display: grid;
    /* ... */
   }
}
```
Simple and effective!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)
Difference between pip and pip3?
Tags: python, programming, tutorial, webdev
Published: 2022-07-27 13:08:00

Python’s standard package manager is Pip. It enables us to install and manage extra Python packages not included in the standard library.

Pip is a utility for installing new packages that come with Python (after versions 3.4 and 2.7.9). These packages are download from PyPis’s repository and incorporated into your Python automatically.

## [PIP Vs PIP3](https://phperrorcode.com/difference-between-pip-and-pip3/) What’s the Difference?

A pip is used to make a connection with python 2 it can be created in Mac or Linux system, a pip is able to connect with Python 3 as well it downloads the packages in Windows Environment. But in the pip3 case it just only relates to Python 3.
Hashmap in Python?
Tags: python, django, algorithms, programming
Published: 2022-07-27 13:05:18

Guide to Hashmap in Python – Data must be stored and retrieved in a number of different ways. Hash Tables are one of the most essential implementations. These Hash tables are implemented in Python using the built-in data type dictionary. In this post, you’ll learn about Hash Tables and Hashmaps in Python, as well as how to use dictionaries to construct them.

## What is a Hash table or a [Hashmap in Python](https://phperrorcode.com/what-is-hashmap-in-python/)?

A Hash table, also known as a Hashmap, is a form of data structure in computer science that maps keys to value pairs (implement abstract array data types). It works by using a function to calculate an index value, which then retains the elements to be searched, inserted, removed, and so on. This makes data access simple and quick. Hash tables are used to hold key-value pairs, with the key being produced via a hash function.
How to Build an eCommerce Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-07-27 12:58:16

{% youtube BsmRYjW4csw %}

How to Build an eCommerce Website Using HTML CSS JavaScript

This video will show you how to build an ecommerce website using html css javascript

[Live Website](https://codewithsadee.github.io/footcap)
[Github Repo](https://github.com/codewithsadee/footcap)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Starter file for practicing](https://drive.google.com/file/d/1szcg9VTT7IVnpklI3npcM8x2uzhvtgj9/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:32 - File structure
5:02 - Project initial
10:15 - Header
26:48 - Hero section
33:12 - Collection section
37:44 - Products section
58:04 - CTA section
1:02:27 - Special products section
1:07:14 - Service section
1:12:07 - Instagram post section
1:15:52 - Footer
1:35:16 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
CSS Battle: #10 - Cloaked Spirits
Tags: css, webdev, beginners, tutorial
Published: 2022-07-27 12:58:11



In this article, I will solve a [Cloaked Spirits](https://cssbattle.dev/play/10) CSS Challenge on [CSS Battle](https://cssbattle.dev/). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Cloaked Spirits](https://cssbattle.dev/targets/10.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

{%youtube https://youtu.be/7PAU0GvxefQ %}
*Video's Code is a little bit different because in the following CSS code I've used `aspect-ratio` just to reduce character and to match the width and height which is not mentioned in the video. (Video code also works fine)*

### HTML


```html
<p b>
<p c>
```


### CSS

Now let's style the containers. 


```css
* {
  margin: 0;
  background: #62306d;
}
body {
  display: grid;
  place-items: center;
}
p {
  position: fixed;
  aspect-ratio: 1;
}
[b] {
  width: 100;
  background: #f7ec7d;
  box-shadow: -100px 100px #f7ec7d, 
              100px 100px #f7ec7d, 
              0 100px #f7ec7d;
}
[c] {
  width: 60;
  background: #aa445f;
  border-radius: 1in;
  bottom: 170;
  box-shadow: 0 0 0 20px #e38f66, 
              100px 100px #e38f66,
              100px 100px 0 20px #aa445f, 
              -100px 100px #e38f66,
              -100px 100px 0 20px #aa445f;
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*

**Minified Version:**
```
<p b><p c><style>*{margin:0;background:#62306D}body{display:grid;place-items:center}p{position:fixed}[b]{height:100;width:100;background:#F7EC7D;bottom:0;left:50;box-shadow:100px -100px #F7EC7D,100px 0 #F7EC7D,200px 0 #F7EC7D}[c]{width:60;height:60;background:#AA445F;border-radius:1in;bottom:170;box-shadow:0 0 0 20px #E38F66,100px 100px #E38F66,100px 100px 0 20px #AA445F,-100px 100px #E38F66,-100px 100px 0 20px #AA445F}
```

### Wrapping up
If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.
How to Generate Gradient text using CSS
Tags: css, webdev, frontend, beginners
Published: 2022-07-27 12:57:00

Recently, Gradient Text is being used more on popular sites and becoming a trend!

Both [Vuejs](https://vuejs.org/) and [Netlify](https://netlify.com/) are using gradient text on their hero scetion in the homepage!

Have you ever wondered how to achieve this style using CSS only?

In this article, I want to show you how a use an easy website to generate CSS gradient text, and how to implement it manually using CSS only. 

## how to Generate CSS Gradient Text using an online website: 

I've published a helpful website: CSS gradient text | free online gradient text generator.

🔗 Website URL: [cssgradienttext.com](https://www.cssgradienttext.com)

Using this tool, you customize gradient colors (add, remove, re-order them) and angle, then copy the generated code!

![cssgradienttext.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goss903bupqgkz98jzm0.png)

I'm looking forward to getting your feedback and suggestions in the comments below!. 

## how to Manually Implement Gradient Text using CSS only

The idea behind this is only to set three different CSS properties to the text we want to style:

```CSS
div {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: // your gradient here
}
```

### How does it work?

the first property is `-webkit-background-clip` which is responsible for only rendering the background where there's text.

Second property is `text-fill-color` which is set to `transparent`. because we want to hide the text to be able to show the gradient background behind it!.

Third property is simple which is: `background-image: linear-gradient(45deg, #f3ec78, #af4261);`. you can change the angle, and colors, and add multiple colors.

Check [Mozilla Docs for linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) to see all options. 

If you want to see more cool things You can hit the Follow Button! I'll regularly add more content related to CSS, Javascript, Vue, and Nuxt in the future!

Thank you for reading 🤓
Firebase: The following Swift pods cannot yet be integrated as static libraries
Published: 2022-07-27 12:52:00

Hola hola,

I ran into the following error after running `npx pod-install` while using React Native Firebase(v15.2.0) and React Native v0.69.3:

```
[!] The following Swift pods cannot yet be integrated as static libraries:

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.
```

After adding just `pod 'GoogleUtilities', :modular_headers => true` the above was solved. Then, I had many similar errors with other RNFirebase modules such as `FirebaseStorage`, `FirebaseFunctions`, etc. 

As many devs do, I added the first line into Google: `The following Swift pods cannot yet be integrated as static libraries:` and found answers for non RNFirebase libraries. 

I didn't see any react-native-firebase issues so I went to their repo and found [this](https://github.com/invertase/react-native-firebase/issues/6332#issuecomment-1182831998) message which leads to a [StackOverflow](https://stackoverflow.com/a/73092662/12055861) answer.

For me, the above error was solved by adding the following to my Podfile caused there to be no issues for any RNFirebase module:
```
  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true  
  pod 'FirebaseStorageInternal', :modular_headers => true
  pod 'FirebaseCoreExtension', :modular_headers => true
  pod 'FirebaseAppCheckInterop', :modular_headers => true
  pod 'FirebaseAuthInterop', :modular_headers => true
  pod 'FirebaseMessagingInterop', :modular_headers => true
  pod 'GTMSessionFetcher', :modular_headers => true
  pod 'FirebaseAppCheckInterop', :modular_headers => true
  pod 'FirebaseAuthInterop', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
```

Hopefully this increases visibility for others.

I've been working with React Native for the last 4 years and will continue documenting common React Native errors that we come across at [TroutHouseTech](trouthousetech.com).

-Matt
call(), bind() & apply() in javascript
Tags: javascript, beginners, programming, tutorial
Published: 2022-07-27 12:41:24

If asked about any one of these keywords in a js interview, one thing they all have in common is they are **function prototype related methods in javascript**.

Every function has it's own execution context, as discussed earlier. Every function also has it's own `this` keyword, as introduced in ES6. We will be working around with `this` keyword using the methods mentioned.

## call()

The `call` function let's us provide arguments to a function separately. Here, we are passing the value to `this` for the function.

I believe that it's always clearer with an example:

```javascript
function chime() {
  const notif = [this.name, 'has followed you!', this.id].join(' ');
  console.log(notif);
}

const obj = {
  name: 'Joe',
  id: '@Joeisheretocomment',
};

chime.call(obj);  
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oovabeuhp0fw8u1zqr2t.png)
*(one of those days where you do not have your pc and it becomes a default light mode day)*

This is one of the use cases of `call()`. We use call function for constructors and objects too (find references below).

## apply()

It's similar to call(), just the difference is that we pass the **arguments as an array** when using apply() method.

A very interesting use case of `apply()` that I found was while using inbuilt libraries. 

```javascript
array=[21,22,13,45,60,988]
console.log(Math.max(array))
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql08i6kyp36f0ta608wy.png)
Interestingly, we can use apply here to make the `Math.max` function take each element of the array be considered as single and separate argument.

```javascript
array=[21,22,13,45,60,988]
console.log(Math.max.apply(null,array))
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6jsqhiu3xbk7rv3ym0o.png)

The first parameter is **not used by Math.max** as it doesn't need any context.

## bind()

This prototyping method makes another copy of the function and is helpful to hold on to `this` reference. 

Example :
```javascript
let user = {
  follower: "JoeAgain"
};

function func() {
  alert(this.follower);
}

let funcUser = func.bind(user);
funcUser();
```

In this case, we are binding a function copy with specific `**this=user**`.

These can be used for *function currying, function binding and constructors*.

> Go through examples and use cases for each of them, they are so widely used, just don't get confused :D
🌟 [Call & apply method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
🌟[this keyword and function prototyping](https://medium.com/@omergoldberg/javascript-call-apply-and-bind-e5c27301f7bb)
How do I annotate with git blame in Visual Studio?
Tags: vscode, git, python, programming
Published: 2022-07-27 12:38:36

TFS (and so does VS) uses the Term "Annotate" instead of "Blame", just right click on the editor when you have a file open, then click Source Control, Annotate.

read also : **[vscode annotation](https://professional-writer0.blogspot.com/2022/07/vscode-annotation-autoclose-tool-to.html)**

I'm sure there are other ways to do it, either from the menu, toolbars, solution explorer, etc.
Code Annotation: a VSCode extension for adding notes on your code without commiting
Tags: vscode, programming, tutorial, git
Published: 2022-07-27 12:35:30

Code annotation is a Visual Studio Code extension that creates and tracks annotations from your source code without actually committing comments on your code.

You can download Code Annotation directly from the Marketplace.

## Problem Statement
When I’m investigating some bug, or just going through the code for some reason, it’s very common that I came to some realizations:

Oh oh, this code is too strange, this shouldn’t be like this, need to check it later
Damm, this is a horrible name for this method/variable
I need to come back to this function after when popping the calling stack I’m traversing
I need to fix the use of this API here, here, and here (in multiple files)
But because this happens while I’m working on something else, I don’t want to stop, take care of it, and get back. So, what I used to do was either to:

Open my to-do list app, insert an entry on it for the future, and possibly not adding enough context for the future making it a useless entry
Add a not-so-beautiful comment like // DO NOT COMMIT: Thamara check this, which usually lead to me forgetting and committing it anyway (and having to remove, rebase, merge, whatever)
Use of the adding breakpoints feature on VSCode, and frequently losing track of why I tagged something, as well as getting my actual breakpoints all mess up
Needless to say, I needed a better system.

To summarize the problem: I wanted to add some notes that would be tied to a code, but I could include a better description of why I was adding that note. I wanted to track what I added and I didn’t want to commit anything (read: didn’t want to rely on adding TODOs to the code).

I went over several extensions on the VSCode marketplace and could not find anything. So I did the very best thing I do when I have a problem: I solved it myself. If there was no available solution, I would build it.

**[read more | vscode annotation](https://professional-writer0.blogspot.com/2022/07/vscode-annotation-autoclose-tool-to.html)**