teleren/devto huggingface dataset:
Vue的组件
Published: 2022-09-02 08:19:52

## 非单文件组件

#### 非单文件组件的使用

- 创建组件

  ```vue
  const school = Vue.extend({
  	//定义组件时不使用el,因为所有的组件都将使用vm管理
  	template:`
  		<div></div>
  	`,
  	data(){
  		return{
              schoolname:'atguigu',
              address:'beijing'
  		}
  	},
  	methods(){
  
  	}
  })
  ```

  - data写成函数 --- 避免组件复用时,数据存在引用关系

- 注册组件

  - 局部注册组件

    ```vue
    //创建vm
    new Vue({
    	//决定组件放在哪个容器下
    	el:'#root'
    	//注册组件
    	components:{
    		school
    	}
    })
    ```

  - 全局注册组件

    ```
    vue.component('school',school)
    ```

- 使用组件

  ```vue
  <school></school>
  ```

#### 注意点:

- 组件的命名

  - 一个单词的组件命名
    - **首字母大写:School**(推荐写法)
    - 全小写:school
  - 多个单词的组件命名
    - **首字母大写(kebab-case命名):MySchool**(推荐写法)
    - 两个单词之间使用 - 连接(Camelcase命名):my-school
  - 可以在定义组件时使用name配置项指定组件在开发者工具中呈现的名字

- 组件标签的写法

  - <school></school>

  - <school/>  --- 自闭合写法

    **不使用脚手架时,<school/>会导致后续组件无法渲染**

- 组件注册简写

  ```vue
  const school = Vue.extend({...})
  简写为:
  const school = {...}
  ```

#### 组件的嵌套

- vm中只管理app一个组件

  ```
  new vue({
  	el:'#root',
  	components:{
  		app
  	}
  })
  ```

- app内包含其他组件

  ```
  const app = Vue.extend({
  	components:{
  		school,
  		student
  	}
  
  })
  ```

#### VueComponent

- school组件的本质是VueComponent的构造函数,由Vue.extend生成

- 我们只需写组件标签<school></school>,Vue解析时会帮助创建school组件的实例对象,即Vue帮助执行:new VueComponent(options)

- 每次调用Vue.extend,返回的都是新的VueComponent

- this指向:

  - 组件配置中: data函数,methods中的函数,watch中的函数,computed中的函数,他们的this都是VueComponent的实例对象
  - new Vue(options)配置中: 
  - data函数,methods中的函数,watch中的函数,computed中的函数,他们的this都是Vue的实例对象

- VueComponent以后自己简称为vc

  Vue的实例对象以后简称为vm

#### 组件的内置关系

vm拥有vc没有的一些功能比如el挂载点



## 单文件组件

#### App.vue

App.vue为入口文件,通过App.vue来管理所有组件

需要在App.vue中,引入,注册,使用组件

```vue
<template>
	<div>
        <School></School>
        <Student></Student>
</template>
<script>
    //引入组件
    import School from "./School";
    impotr Student from "./Student";
	//控制组件的交互
    export default {
    	name:'App',
        //注册组件
        components: {
            School,
            Student
        }
    }
</script>
<style></style>
```

#### main.js

通过main.js管理App.vue

需要引入,注册,使用 App.vue ,使用el指定容器

```javascript
import App from "./App.vue"

new Vue({
    el: '#root',
})
```

#### index.html

在index.html 中创建容器

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>
```
Python Turtle
Tags: python, pythonturtlegraphics
Published: 2022-09-02 08:13:14

Hello friends...

If you are interested in Turtle drawings...

Then please visit my this rapository only on github....

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

https://github.com/Chiki1601/Python-turtle/

#pythonturtle
#python
#github
#chiki1601


My this repository contains all kind of drawings like creatures, animals, lords, nature, cartoons, Emojis and My Awesome Design collection....!
I hope you will like my this repository!
File Uploads Without Form Helpers
Tags: rails
Published: 2022-09-05 01:46:40

---
title: File Uploads Without Form Helpers
published: true
date: 2022-09-02 08:01:01 UTC
tags: rails
canonical_url: 
---

When uploading files without using the form helper `form.file_field`, you have to add the option `multipart: true` to the form tag.

Discovered in [API Docs](https://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-file_field_tag)

```
  < %= form_with(model: @company), multipart: true) do |form| %>

    -- When using: --
    <input type="file" name="company[logo]" />
    -- OR --
    < %= file_field_tag "company[logo]" %>

    < %= form.submit %>
  < % end %>

```
HTML Audio Explained!
Tags: html, webdev, programming, beginners
Published: 2022-08-15 12:58:19

# Usage of Audio Tag:
The audio tag is used to play sounds, like songs, podcasts or any other type of audio streams. With HTML audio Tag you can embed audio file on your website.
## Real Example:
The following image show us some collection of audio files.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uuvvaxgccrrx2h2no3n.png)
<br>
Let learn its essentials elements to start using it in our HTML.

# Basic syntax:
```
<audio controls autoplay loop muted>
    <source src="Aarzu.mp3" type="audio/mpeg">
    <source src="Safna.mp3" type="audio/ogg">
    Your browser does not support Audio
</audio>
```
You don't have to worry I will explain everything one by one. <br>
Still after reading the whole blog everything looks confuse. Just follow the basic syntax and you are good to go.

# Tags:
Basic tags used are:

- Audio Tag: `<audio blah blah blah ></audio>` 

The audio tags tell compiler that its an audio file.
Audio tags has both open and closing tags.

- Source Tag: `<source blah blah>`

It defines one file at a time with file source and its types (explained below). We can define as many files as we want just like I have defined two in this case.


## Audio Tag Attributes:
Following attributes are used inside HTML audio Tag.

- #### Control Attribute: `<audio controls ></audio>` 

    It specifies that this audio should have audio controlling options like pause and play icon/speaker icon etc.

- #### Automatic Play Attribute: `<audio controls autoplay ></audio>` 

    This specify that the audio start playing as the page loads. Autoplay mean automatic play.

- #### Repeated Play Attribute: `<audio controls autoplay loop></audio>`

    The audios will play again and again when it ends.

- #### Silent Mode Attribute: `<audio controls autoplay loop muted></audio>` 

    With this attribute the audio will be muted when the page loads and you have to manually unmute it.

- #### Preload Attribute: ` <audio preload="auto/metadata/none" ></audio>`

    Preload attribute give us an option how did we want to **LOAD** the audio.

    * `preload="auto"`   => Load entire file when page load.
    * `preload="metadata"` =>Load only metadata when page loads
    * `preload="none"` => load nothing.

**Important Note: ** The preload attribute is ignored if autoplay is present.

Wrong: `<audio controls autoplay preload="auto" loop muted></audio>`<br>
Correct: `<audio controls preload="auto" loop muted></audio>`
### Source Tag Attributes:


`src="file location"` <br>SRC mean source of the file, like where is this file located. It can be a link or a directory path. <br>
`type=mpeg/wav/ogg` There are three supported audio formats for HTML audio Tag that have different MIME type values. <br>

- Mp3 -> audio/mpeg<br>
- Wav -> audio/wav<br>
- OGG -> audio/ogg<br>

Don't worry about MIME now. Just know that it has 3 types.


### What About the Text Inside Audio Tag?

Well the text will not display until the browser does not support audio.


Thanks for reading. Give it a Like, Comment and Share it.
**Learn Little but Better**
How the web works
Published: 2022-09-02 07:23:03

Helpful resources

**Who Invented the Internet? And Why? (Kurzgesagt)**  

{% embed https://youtu.be/21eFwbb48sE %}

**What is Cloud Computing? (Amazon)**

{% embed https://youtu.be/mxT233EdY5c %}

**What is a Web Server? (NGINX)**

https://www.nginx.com/resources/glossary/web-server/

**What is a Web Browser? (Mozilla)**

https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/

**Browser Engines (Wikipedia)**

https://en.wikipedia.org/wiki/Browser_engine
Simple loader — A step-by-step guide
Tags: css, html, tutorial, webdev
Published: 2022-09-02 06:36:22

## **<u>HTML</u>**
For HTML we’ll have only one div element with “loader” class.

```html
<div class="loader"></div>
```

## **<u>CSS</u>**
We’ll just set width and height as desired, with 50% border radius.Then add solid border of 10px.With border-color property, we’ll set the top and bottom color to #000 (black), and left and right to transparent.

```css
.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent;
}
```
Now we’ll create an animation named “rotation”.We’ll simply set the transform property to rotate 0 deg on 0% and 360 deg on 100%.

```css
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
```
And now simply add the animation property on loader element.We’ll set the duration of 1 second, infinite and linear.

```css
.loader {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 10px solid #000;
    border-color: #000 transparent #000 transparent;
    animation: rotation 1s linear infinite; <!--  Animation  -->
}
```

## **<u>Video tutorial</u>**
You can find the whole code with video tutorial [here](https://designyff.com/code/simple_loader).

**Thank you for reading this article. ❤️**
Internet Protocols
Published: 2022-09-02 06:35:59

### TCP (Transmission Control Protocol) vs UDP (User Datagram Protocol)

---

**TCP**: is a layer 4 protocol which provides acknowledgement of the received packets and is also reliable as it resends the lost packets. It is better than UDP but due to these features it has an additional overhead. It is used by application protocols like HTTP and FTP. 

**UDP**: is also a layer 4 protocol but unlike TCP it doesn’t provide acknowledgement of the sent packets. Therefore, it isn’t reliable and depends on the higher layer protocols for the same. But on the other hand it is simple, scalable and comes with lesser overhead as compared to TCP. It is used in video and voice streaming.

**Differences between TCP and UDP**: https://www.geeksforgeeks.org/differences-between-tcp-and-udp/

---

![Protocol suite](https://cdn.kastatic.org/ka-perseus-images/6a0cd3a5b7e709c2f637c959ba98705ad21e4e3c.svg)


![TCP vs UDP](https://microchipdeveloper.com/local--files/tcpip:tcp-vs-udp/TCP_vs_UDP.JPG)


![TCP vs UDP meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2gofgym16d5y15ensty.png)

---

Source: [GeeksforGeeks](https://www.geeksforgeeks.org/tcp-and-udp-in-transport-layer/)
250+ Spring Framework Practice Questions
Tags: java, spring, springboot, interview
Published: 2022-09-02 06:29:35

If you are preparing for Spring Professional certification, a Java interview with Spring Boot skills, or just want to test your Spring Framework skills, then these Practice questions are perfect for you. There are 250+ Questions on different spring topics, which will test your knowledge in depth. [Get it here](https://gumroad.com/a/1036063859/sygyq)
Leadership lessons I learnt, leading a small technical product team
Tags: scrum, product, leadership, webdev
Published: 2022-09-02 06:24:10

---
title: Leadership lessons I learnt, leading a small technical product team 
published: true
description: https://medium.com/@harsha7616/7-leadership-lessons-i-learnt-first-time-leading-a-product-team-879c6843453e
tags: #scrum #product #leadership #webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
https://medium.com/@harsha7616/7-leadership-lessons-i-learnt-first-time-leading-a-product-team-879c6843453e
Hi there! 🙂
Published: 2022-09-02 06:03:54

Hi! My name is Ady. I'm a Software Engineer from Mexico City, and this is my first post in dev.to. 👩‍💻

I created my account on this platform because I needed a space to write my notes on the web while learning a new whole stack. 🤓 Also, to share my self-learning journey with this amazing community, document it, and see my progress over time. 

#### **A little about me**

I've been working as a Backend Developer with Java and Microservices for 2 years, but I realized I prefer to work on the colorful side of things. 🎨 
For this reason, I'll be working to become a Frontend Developer and create stuff all the world can see. 🖼⭐


![Frontend vs Backend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf51i975ljjbpm740dus.png)

I have basic knowledge of HTML, CSS, JS, etc. However, I want to reinforce that, so I'll start from scratch and have fun. 👩‍🎨 I think the most important thing is to be constant and never give up! ✨🚀

P.S. I love connecting with people, so feel free to say hi. 😊/ 
Thanks for reading!
Pardus 21 Sunucu üzerinde Grafana 9 Kurulumu
Tags: pardus, grafana, linux, beginners
Published: 2022-09-02 06:02:13

 Bu yazıda Pardus 21 sunucu üzerinde **Grafana 9** kurulumu gerçekleştireceğiz. 
 
Kurulumu, önceki yazılarımda **VirtualBox 6** 'da oluşturduğumuz sanal makine üzerindeki **Pardus 21** sunucusundan gerçekleştireceğiz.

##1 - Ortamların Hazırlanması
 VirtualBox kurulumuna [buradan](https://dev.to/aciklab/pardus-21-sunucu-kurulumu-part-1-sanal-makine-olusturma-ve-makine-ayarlari-1c2e) ulaşabilirsiniz.
 Pardus 21 kurulumuna [buradan](https://dev.to/aciklab/pardus-21-sunucu-kurulumu-part-2-45e4) ulaşabilirsiniz.

##2 - Grafana 9 Kurulumu

Ortamlarımızı hazırladıktan sonra, aşağıdaki komutları sırasıyla çalıştırarak Grafana 9.1.2 sürümünü Pardus 21 sunucumuzda kurabiliriz.

```bash
sudo apt-get install -y adduser libfontconfig1
wget https://dl.grafana.com/enterprise/release/grafana-enterprise_9.1.2_amd64.deb
sudo dpkg -i grafana-enterprise_9.1.2_amd64.deb
```

##3 - Grafana Servisini Çalıştırma

 Yukarıdaki komutları çalıştırdığımızda Grafana kurulumunu tamamlamış olduk ancak Grafana servisi genellikle kapalı olarak ve sistem başladığında çalışmayacak şekilde gelmektedir.

 Grafana servisini başlangıçta çalışacak şekilde ayarlamak için aşağıdaki komutu çalıştırıyoruz.

```bash
systemctl enable grafana-server
```

Grafana servisini başlatmak için aşağıdaki komutu çalıştırıyoruz.

```bash
systemctl start grafana-server
```

Grafana servsisinin durumunu sorgulamak için,

```bash
systemctl status grafana-server
``` 
komutunu çalıştırabilirsiniz. 

 Eğer active ise servis başarılı bir şekilde çalışıyordur.

##4 - Grafana Arayüzüne Giriş

 Bu aşamaya kadar geldiyseniz artık Grafana arayüzüne 3000 portu üzerinden ulaşabilirsiniz.

Sunucunuzda aynı ağ üzerinde bulunan bir bilgisayar tarayıcınızdan 

http://x.x.x.x:3000

şeklinde x.x.x.x yazan alana sunucununuz ip adresini yazarak ulaşabilirsiniz.

_Not: Sunucunuzun ip adresini terminal üzerinde `ip a` komutunu çalıştırarak ulaşabilirsiniz._


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

 Başarılı bir Grafana 9 kurulumunun ardından tarayıcıdan yukarıdaki gibi ulaşabiliyoruz.
637. Leetcode Solution in CPP
Tags: cpp
Published: 2022-09-02 05:41:13

```
/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     TreeNode *left;
 *     TreeNode *right;
 *     TreeNode() : val(0), left(nullptr), right(nullptr) {}
 *     TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}
 *     TreeNode(int x, TreeNode *left, TreeNode *right) : val(x), left(left), right(right) {}
 * };
 */
class Solution {
 public:
  vector<double> averageOfLevels(TreeNode* root) {
    vector<double> ans;
    queue<TreeNode*> q{{root}};

    while (!q.empty()) {
      long sum = 0;
      const int size = q.size();
      for (int i = 0; i < size; ++i) {
        TreeNode* node = q.front();
        q.pop();
        sum += node->val;
        if (node->left)
          q.push(node->left);
        if (node->right)
          q.push(node->right);
      }
      ans.push_back(sum / (double)size);
    }

    return ans;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/average-of-levels-in-binary-tree/submissions/
Best Colorful VSCode Extensions
Tags: beginners, tutorial, vscode, productivity
Published: 2022-09-02 05:38:40

I find that personalizing my IDE helps me enjoy the time I spend using it more. I want to share that same spark of joy with you all, and have been searching for and testing out the best extensions to download. And many of these will help you be more productive.

**Indent Rainbow**
Indent Rainbow is a great tool to add color and productivity to your setup. It can also help serve as an alignment check for your indentation. Each indentation is given an alternating rainbow color.

**Bracket Pair Colorizer**
This will add rainbow colors to brackets, and matching brackets will have the same color. This extension has saved me a number of times when looking for a missing or extra bracket.

**Colorize**
Colorize visualizes color variables by highlighting them with their color value. This is a handy timesaver for translating hex codes and variable names.

**Peacock**
Peacock provides optional window colors. It is great for managing multiple workspaces. It can be easy to forget which workspace you are in when jumping between similar windows, but not with the bright colors provided by Peacock. You can even customize workspace colors.

**VSCode Icons**
Adding icons can help when navigating through your folders. VSCode Icons has an extensive library of icons matching a variety of file types.

For example, you can easily see if you are selecting a TypeScript file or a JavaScript file based on the icon. It also adds an extra touch of color and detail to folder structures.

**TODO Highlight**
TODO Highlight will customize your list of TODO comments and make them pop with color. It can be easy to overlook commented out code, but not with this extension, as it is difficult to overlook text that is bright orange.

TODO and FIXME are built in keywords. You'll have the option to customize the color of these and add additional keywords.

## Here is a condensed list of the extensions mentioned in this article.

- [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Bracket-pair-colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
- [Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)
- [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)
- [TODO-highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
Electrical Engineering Projects for Final Year
Tags: javascript, webdev, beginners, programming
Published: 2022-09-02 05:34:32

Engineering student projects for B.Tech and M.Tech final year students. Takeoff Edu Group offers a wide range of projects for [Electrical Engineering Projects for Final Year](https://takeoffprojects.com/Electrical-Engineering-Projects-for-Final-Year) at low cost. 
 
We have successfully delivered Electrical Engineering Projects for Final Year to many engineering students. Our projects are designed by experts for best results of Electrical Engineering Projects for Final Year.
 
Takeoff Edu Group provides the most creative conceptions and ideas that can make very effective final year projects for Students, Ph.D. Scholars, experimenters and engineers. So browse through our list of [Electrical Engineering Projects for Final Year](http://youtube.com/watch?v=0ZR2weaL6Ro) and choose the innovative final year projects for your requirements.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c21pt734v8xavfeq4h1.png)
 
List of Electrical Engineering Projects for Final Year:

1. [Multi Functional PV Inverter with Low Voltage Ride Through and Constant   Power Output](https://takeoffprojects.com/project-details/multi-functional-pv-inverter-with-low-voltage-ride-through-and-constant-power-output--14943)
2. [Flexible Ac Transmitter System Using TSR](https://takeoffprojects.com/project-details/flexible-ac-transmitter-system-using-tsr--12557)
3. [Microcontroller less Four Quadrant DC Motor Control](https://takeoffprojects.com/project-details/microcontroller-less-four-quadrant-dc-motor-control--12556)
4. [Device Load Monitor With Programmable Meter For Energy Audit](https://takeoffprojects.com/project-details/device-load-monitor-with-programmable-meter-for-energy-audit--12555)
5. [Load Shedding Time Management With Programmable Interface](https://takeoffprojects.com/project-details/load-shedding-time-management-with-programmable-interface--12554)
6. [Design And Implementation Of Real Time Transformer Health Monitoring System Using IoT](https://takeoffprojects.com/project-details/design-and-implementation-of-real-time-transformer-health-monitoring-system-using-iot--12553)
7. [Testing Life Cycle Of Electrical Loads Using Down Counter](https://takeoffprojects.com/project-details/testing-life-cycle-of-electrical-loads-using-down-counter--12552)
8. [ACPWM Control System for Induction Motor using Microcontroller](https://takeoffprojects.com/project-details/acpwm-control-system-for-induction-motor-using-microcontroller--12551)
9. [AC Power Controller With Programmable Interface](https://takeoffprojects.com/project-details/ac-power-controller-with-programmable-interface--12550)
10. [Rpm Display For Bldc Motor With Speed Controller](https://takeoffprojects.com/project-details/rpm-display-for-bldc-motor-with-speed-controller--12549)
How to give responsive CSS for Ipad Pro series ? - Media Query
Tags: css, ipadpro, mediaquery, mobile
Published: 2022-09-02 05:33:25

Hi Everyone,

How to give CSS for the responsive ipad series - Ipad Pro 

When I give @media and only screen (min-width: 1024px) and (max-width: 1366px) its not reflecting in my project.

How do I write this code better so it does'nt effect any other.
Which language/skills/frameworks are worth investing your time and energy right now?
Tags: webdev, javascript, programming, react
Published: 2022-09-02 04:58:39

The investment you make in your skills also follows a similar pattern to financial investments, i.e. high risk equals high reward.

In 1995, if you had told me to invest my skills in this little known language called *Java* by a small company called Sun Microsystems, I'd have rebutted you saying you've probably had a few drinks too many! Who would have thought Java will be used to write just about anything (including mobile apps) some day?

On the other hand, had the "risk taker" in me had jumped on the Blackberry development in 2010 or Windows Phone development in 2015, his career would have failed quite miserably!

Similarly, had the "risk averse" buddy chosen something like COBOL or C in 1995, he'd probably still have a low paying job to stick with for several years to come.

From that perspective, what do you make of the current technologies like Java and Python and PHP? And what about all the JavaScript frameworks (React, Vue, etc.) and the Node/NPM ecosystem? Where do you see all of this going?