teleren/devto huggingface dataset:
Type | Treat 2021 - Day 1
Tags: typescript, challenge
Published: 2021-10-26 07:09:21

---
title: Type | Treat 2021 - Day 1
published: true
description: The TypeScript Team challenges
series: type | treat 2021
tags: typescript,challenge
cover_image: https://devblogs.microsoft.com/typescript/wp-content/uploads/sites/11/2021/10/type-or-treat-2021.png
---
## Type or Treat Challenges

Today we're starting up our second year of `Type | Treat` (or "Type or Treat".) We will be presenting some "spooky" code challenges that will allow you to dig deeper into the TypeScript language in a fun way.

Starting right now, a new code challenge will be posted every weekday, along with its solution the day after. The last solution will be posted on the weekend.

## How To Participate

In order to participate you only need to be able to access the [TypeScript website](https://www.typescriptlang.org/). Though ideally, you share with us your answers via our [dev.to blog post mirrors](https://dev.to/typescript), here, or via Twitter to [@TypeScript](https://twitter.com/typescript).

You will want to start here on the blog to find the details on the code challenges for the day. Each post contains 2 links to different challenges which run in the TypeScript playground. Via the playground, you can work on the challenge in your browser and you will be able to test your code live to see if it properly passes the challenge.

### How To Share Your Solution

Once you feel you have completed the challenge, you will need to select the **Share** button in the playground. This will automatically copy a playground URL to your clipboard.

Then either:

 - Go to Twitter, and create a tweet about the challenge, add the link to your code and mention the [@TypeScript](twitter.com/typescript) Twitter account with the hashtag [#TypeOrTreat](https://twitter.com/search?q=%23TypeOrTreat).

 - Leave us a comment with your feedback on the [dev.to](https://dev.to/typescript) post, or in this post.

### Best Resources for Additional Help

If you need additional help you can utilize the following:

- [The New TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
- The [TypeScript Community Discord](https://discord.com/invite/typescript)
- The comments on each [Dev.to](https://dev.to/typescript) post!
- Our previous [`Type | Treat` 2020 challenges](https://www.typescriptlang.org/play/#gist/303ebff59a6fc37f88c86e86dbdeb0e8-0)

### Day 1 Challenges

#### Beginner/Learner Challenge

Using the new music streaming service from the TypeScript team, Typify, set up and share your halloween playlist with your friends.

Head to [this link](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-1) and help us figure out the best type to use in one of our function parameters!

#### Intermediate/Advanced Challenge

You've figured out your costume, but making it is a bit of a process. Can you figure out how to make all of the parts come together in a type-safe way?

Head over [to start sorting](https://www.typescriptlang.org/play?#gist/927ccc66ae3022dc64c4f650109b937a-2).
How to use Custom events in Vue 3
Tags: compositionapi, vue, webdev
Published: 2021-10-26 07:08:39

As someone who has been using Vue 2 for a while now, switching over to Vue 3 with its new composition API and other cool features is exciting but comes with its little hiccups.

One of the hiccups or issues I faced while writing Vue 3 applications was using **custom events** in the new Composition API instead of the good Ol' Options API.

I tried checking out the [Vue docs](https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events), but I wasn't getting exactly what I wanted. Then I set out on a googling spree, desperate to find a way to use custom events with the [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api) in my project. 

And I finally found the way(s) 😋. 

So here, I'll discuss how to emit custom events from our components using the Composition API.

## Define Custom events inline

Before I dive right into how to use Custom events with the Composition API in Vue 3, here's how we normally use custom events inline. To emit custom events inline, maybe in an input field or button, we can define events using the `v-on` or `@` directive:

```html
<button @click="$emit('btn-click')">Click me</button>
```

Then, in our parent component, we can listen for the event like so:

```html
<child @btn-click="doSomething()" />
```

## Custom events using the Options API

With the Options API to emit custom events  we also use the `$emit` method. We can access this method within our `<script>` with `this`. We'll set up the event emit from the `doSomething` method of the component.

```html
<script>
export default {
	// define your emits via the emits option
	emits: ['btn-click'],
	...
	methods: {
        doSomething(){
          this.$emit('btn-click')  
        },
	}

};
</script>
```

We still listen to this event from the parent component the same way we did when the emit was defined inline previously.

## Custom events using Composition API

Unlike the Options API, the [`setup` Component option](https://v3.vuejs.org/guide/composition-api-introduction.html#setup-component-option) is executed **before** the component is created, so we basically do not have to `this`.

The `setup` function accepts two arguments: `props` and `context`. We can access the component `emit ` method from `context`. 

We can create a function where we call the `emit` method and run the function when the button is clicked. 

```html
<script>
export default {
	// define your emits via the emits option
	emits: ['btn-click'],
    
	...
    setup(props, context){
		const doSomething = () => {
			context.emit('btn-click')
		}
	},
};
</script>
```

OR, using destructuring,

```javascript
...

// here we're getting the emit method by destructuring the context argument
setup(props, { emit }){
    const doSomething = () => {
    	emit('btn-click')
	}
}

...
```

And there you have it! That's how we can use custom events in the Composition API. 

Thanks for reading 💖.  Let me know if you have any questions or suggestions ✨
What is the best way to analyze huge chunks of data in Oracle DB
Published: 2021-10-26 06:57:42

---
title: What is the best way to analyze huge chunks of data in Oracle DB
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

We have a scenario where we need to analyze 2 lakh rows per day and based on that perform insert and update into other tables respectively. Problem is that Oracle Jobs with Parallel switched on(completely optimized) is not able to process at a faster pace and was thinking if Windows service would do that job. Wanted to know what is the right architecture for processing data from a flat table in the fastest way possible.
Auto Clover Việt Nam
Published: 2021-10-26 06:52:43

Là đơn vị tiên phong với gần 20 năm kinh nghiệm trong ngành hàng phụ tùng – phụ kiện ô tô, Hệ thống phụ tùng ô tô chính hãng MAST là đơn vị nhập khẩu và phân phối các sản phẩm phụ tùng thương hiệu KIA, HYUNDAI, MOBIS, GM, SSANGYONG, SAMSUNG, MANDO, CTR, HANON, DOWOON, SECO… dành cho xe du lịch; các sản phẩm phụ kiện thương hiệu AUTO CLOVER, 365 AUTO, HIPAS, KORIS, COIDO, VOLCANO, CARORI … dành cho xe du lịch, xe tải và xe khách.

Hệ thống phụ tùng ô tô chính hãng MAST sở hữu kho phụ tùng – phụ kiện ô tô lớn nhất toàn quốc (1.800 m2 x 3 tầng), kho hàng của chúng tôi luôn sẵn sàng với trên 40.000 mặt hàng phụ tùng dành cho các model xe du lịch thông dụng của các hãng Kia, Hyundai, Chevrolet, Ssangyong, Samsung…; trên 4.000 mặt hàng phụ kiện thông dụng dành cho các loại xe du lịch, xe tải, xe khách Hàn Quốc, Nhật Bản, Mỹ…

Chúng tôi tự hào là đơn vị đứng tốp đầu thị trường Việt Nam với hơn 1.000 đại lý chính thức, hơn 10.000 Khách hàng trải khắp 64 tỉnh thành trên cả nước. Chúng tôi cam kết luôn cung cấp những sản phẩm và dịch vụ tốt nhất, đúng như Sứ mệnh và Giá trị cốt lõi mà chúng tôi đã đề ra.

Từ năm 2018, Hệ thống phụ tùng ô tô chính hãng MAST chính thức trở thành nhà phân phối độc quyền sản phẩm AUTO CLOVER tại trị trường Việt Nam.

AUTO CLOVER là công ty đầu tiên tại Hàn Quốc nói riêng và Châu Á nói chung sản xuất các phụ kiện dành cho xe hơi. Bộ sưu tập AUTO CLOVER luôn luôn làm hài lòng khách hàng với những sản phẩm vô cùng chất lượng; sở hữu thiết kế đa dạng và bắt mắt.

AUTO CLOVER tự hào là thương hiệu cung cấp các phụ kiện cho xe rất được ưa chuộng. Đặc biệt là các phụ kiện dành cho các hãng xe nổi tiếng như: Kia, Toyota, Honda, Hyundai, …

Liên hệ với chúng tôi:
Website: https://phukienautoclover.com
Problem in sending id of an element as a key using POST request
Tags: javascript, webdev, programming, html
Published: 2021-10-26 06:30:55

I've been trying to send the id of an element(button) as a key alone using XMLHttpRequest. I've used application/x-www-form-urlencoded. Since for application/x-www-form-urlencoded, the body of the HTTP message sent to the server is essentially one giant query string -- key/value pairs are separated by the ampersand (&), and keys are separated from values by the equals symbol (=). An example of this would be: KeyOne=ValueOne&KeyTwo=ValueTwo but I want to send the id as a key alone, not as a value. How can I send id as a key, not as a value?
LGMVIP- Internship Experience
Tags: javascript, beginners, programming, css
Published: 2021-10-26 06:26:24

Hello Everyone,

I am Amogh Gupta and in this post I will be sharing my experience as a Web Developer Intern at Let's Grow More(LGM) through their Virtual Internship Program that I had joined for Oct 2021.

It was a well-structured internship and as a Web Developer Intern I was expected to complete at least 2 out of the 3 listed tasks using relevant technologies. The tasks were as follows :-
Beginner Level Task :- Create a Single Page Website using HTML, CSS and JavaScript. The website had to follow a predefined design pattern along with a few creative changes.
Intermediate Level Task :- Create a Web Application using ReactJs. The application had to feature an API call to display user data. It also featured a loader to be displayed while the data was still being fetched.
Advanced Level Task :- Student Result Management System using HTML, CSS, JavaScript, PHP and MySQL.

I have successfully completed the first two tasks and had learned a lot in this process.
Beginner Level: I always use bootstrap 5.0 as my go-to library when designing single page applications. It provides you with flexibility and creativity for your website while still maintaining responsiveness throughout your website. It was a good experience to design the webpage according to a predefined design and add extra bits into it to get an immersive experience.

Intermediate Level: I was exploring the wonderous capabilities that ReactJs had and I had already made a few projects using ReactJs earlier: Notes App and MoLog Marketing But I had never used external data from firebase or any API etc into my sites. Thus, this task gave me an insight into using API’s in react and it was the perfect time for me to understand more about React through this task. I used react-bootstrap to set up a clean UI to display the data. I also added a “Load More” functionality into my page to fetch and display more data onto my app.
Amogh Gupta's Web App

Features:

Fetch and Display API Data
Responsive Design
Load More button to get more data
All the source code is present on my Github: here

Thus, It was a wonderful experience and an opportunity to explore more. Check out the official LetsGrowMore site to be a part of their Virtual Internship Program LGM-VIP and all the best for your journey.
HTML tags | base
Tags: html, tags, base
Published: 2021-10-26 06:05:47

It is used to **specify the base URL used in all relative URLs of a document and/or the default target attribute**. It must therefore have at least one `href` or `target` attribute defined, being able to have both.

**There can only be one** `<base>` **element per document** and it has to be inside the `<head>`. If there is more than one, only the first `href` and `target` will be taken into account, the rest will be ignored.

If either of these two attributes is defined, the `<base>` element must appear before other elements with attribute values ​​that contain URLs, such as a `<link href = "">`.

It has two attributes:
* `href`: the base URL that will be used throughout the entire document in relative URLs. It can take the value of an absolute or relative URL.
* `target`: a keyword that defines the navigation context in which to display the navigation results of `<a>`, `<area>` and `<form>` elements that do not have a `target` attribute explicitly defined. It can have the following values:
  * `_self`: shows the result in the same navigation context. It is the default value.
  * `_blank`: displays the result in a new, unnamed navigation context.
  * `_parent`: shows the result in the navigation context of the parent of the current one if the current page is within a frame. If there is no parent, it acts the same as `_self`.
  * `_top`: shows the resource in the highest navigation context that is an ancestor of the current one. If there is no parent, it acts the same as `_self`.

Internal links to a document fragment, for example `<a href="#id-example">` are resolved using `<base>`, triggering an HTTP request to the base URL with the fragment appended. For instance:
1. Given `<base href = "https://example.com">`
2. ...and this link: `<a href="#anchor">Anchor</a>`
3. ...the link points to `https://example.com/#anchor`

[Open Graph](https://ogp.me/) tags don't recognize the `<base>` element, so they should always have absolute URLs. For instance:
`<meta property="og:image" content="https://example.com/thumbnail.jpg">`

- Type: *-*
- Self-closing: *Yes*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) | [Support](https://caniuse.com/mdn-html_elements_base)
Slots in Custom Web Components
Tags: ist402, slots
Published: 2021-10-26 05:43:28

During development of any custom web component, slots can be extremely useful. Slots allow for use to pass in HTML into different parts of our card. 

Below we see the cards we are trying to replicate. 
![Card Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lenytwyckhgj7ewmobg0.png)


Slots are ultimately useful in structuring a custom element. While our group is still trying to fully utilize slots in our component, we see the benefits of the structure they provide. We are on our way to properly using slots to their fullest. 

```js
render() {
    return html`

    <div class="cardWhole">
      <div class="cardHeader">
        <slot name="top-header"></slot>
        <slot name="bottom-header></slot>
      </div>
      <div class="cardBody">
        <p> content body </p>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
    `;
  }
```

[Our Github Repo](https://github.com/IST402-Group-F/Project-2-Card)
Javascript Tutorial Series
Tags: javascript, beginners, tutorial, programming
Published: 2021-10-26 05:38:47

**Hello Devs and Learners,**

I am going to start a tutorial series on many JavaScript topics

This will just be the release post
You, the reader can request for any Javascript Tutorial you want to


------------------------------------------------------------------

#**Don't forget to follow me :smile:**
If you want any tutorial, just ask me in the comments

**Bye Bye!**
**Happy Coding!**
Perform Selection in Blazor Gantt Chart
Tags: blazor, webdev, dotnet, csharp
Published: 2021-10-26 04:26:17

Learn how to perform selection operations in the Syncfusion [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component. 

This video explains how to enable or disable selection, its modes, types, selection at initial rendering. It also explains how to perform a selection programmatically on cells and rows. Finally, it explains how to disable selection on a particular record and clear all the selection at runtime in the Gantt Chart.

[Syncfusion Blazor Gantt Chart - Intuitive & Easy-to-Use Component](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)

A complete project management tool to schedule and plan projects.
You can manage and monitor specific tasks and resources in a project.
Intuitive user interface to manage complex projects on the go.

Example project: https://bit.ly/3vw9F5Z 

Explore tutorial videos: https://bit.ly/3aWxuKI

{% youtube 3DRbWtyDd1U %}
Pardus 19 VirtualBox Kurulumu
Published: 2021-10-26 04:25:43

Pardus 19 işletim sisteminde Virtualbox Pardus'un kendi deposundan aşağıdaki komut ile yüklenebilir.

```
sudo apt install virtualbox-6.1
```

Kurulumdan sonra sanal makineler başlatılırken aşağıdaki gibi hata alınıyorsa çekirdek modüllerini de yüklemek gerekmektedir.

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

Bunun için ilk olarak işletim sistenin güncel olduğundan emin olmak gerek.

```
sudo apt update
sudo apt upgrade
sudo reboot
```

Daha sonra aşağıdaki paketlerin yüklenmesi gerekmektedir.
```
apt install linux-headers-`uname -r` build-essential dkms
apt install --reinstall virtualbox-6.1
```

Makine yeniden başlatıldıktan sonra sanal makineler kullanılabilir.
3 Portfolio Website using HTML, React and Flask.
Tags: react, flask, html, bootstrap
Published: 2021-10-26 04:17:27

I have built three portfolio, The first one is built with HTML, Bootstrap, and CSS, The second one is built with React JS, Bootstrap, and Undraw. The third one is built with Flask, Undraw, and Bootstrap. I did this, because.

If I'm getting an offer for HTML developer, I can show my HTMl Portfolio, this will increase 20% chances to get hired.
And the same with React and Flask. The link of these 3 websites, is here.

https://mrbluebird2.github.io - HTML Website
https://bvmt-react-portfolio.pages.dev - React Website
https://bvmt-flask-portfolio.pages.dev - Flask Website
Hacktoberfest - Working with React
Tags: opensource, hacktoberfest
Published: 2021-10-26 03:28:39

# Project Introduction
👉During the Hacktoberfest month, I worked a project using React Framework. It has been a long time since I coded React framework, because my concentration is not on web development too much. It is interesting to recall the knowledge from Web class in college.

👉The project is a website about React component library based on styled components. You can take a look at its [GitHub Repo](https://github.com/jpalacio0612/react-neon-ui-demo) or my [Folked Repo](https://github.com/kiennguyenchi/react-neon-ui-demo).

# Project Issue
❓I took an issue on this project: which is I need to create a new component named TextArea with new web page, take the component information and put it on the website.

👉It has been a while since I worked with React App so it took me a bit time of reading at first to remind me of how React components work. Also, the project has a very clear structure. I read the other components and it was very straight forward to make me understand how should I implement my component.

🔗This is my filing [Issue](https://github.com/jpalacio0612/react-neon-ui-demo/issues/18) on GitHub.

# Project Process
This is the website before adding my component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw64t32vwtlckej4jjuc.JPG)

For starting, I work with basic thing from React App by adding Route to app.js.
```
import { TextAreaDemo } from './components/TextAreaDemo'
//code
<Route exact path='/textarea' component={TextAreaDemo} />
```
Next, I added my component to the navigation bar by adding my component to routes array.
```
const routes = [
//some routes
  { url: '/textarea', name: 'TextArea' }
]
```
Next, I created file for my React component with this format.
```
// import necessary packages
import { TextArea } from 'react-neon-ui'

export const TextAreaDemo = () => {
// include some constant databases
  return (
// HTML with React component
  )
}
```
Here is the final result after implementing the website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpxu5agb1ebl2j853h6m.JPG)

🔗This is my [Pull Request](https://github.com/jpalacio0612/react-neon-ui-demo/pull/20) on GitHub.

👉The owner of this repo is nice. He corrects me right away when I had problem with updating packages. He showed me steps by steps how to fix my issues. I'm really thankful.

✔️Overall, it is great to work on React that I have not usually used for a long time during Hacktoberfest. Recalling knowledge from WEB422 in Seneca College, I think that React is a really powerful and pretty framework that web has and I'm looking forward to use it frequently in the future.
5 Best Javascript Projects Ideas
Published: 2021-10-26 03:27:11

## 1. Create A Markdown Editor

- A Markdown editor is an intuitive and lightweight text-to-HTML conversion tool for web content writers. You can use it to format lists, headers, and for emphasis, as well as to incorporate links and images. The idea is to produce web content that is as easy to read as plain text.

It is very easy to create you can you use library if you want to.. 👍

## 2. Build A Code Editor

- A Code Editor is a special text editor program designed to write and edit source code and computer programs. It helps programmers write and edit source code and programs easily by differentiating elements and in-built routines

if you have doubt that how you can create i will give you a hint. you can use a library called "Ace.js" to create it 

Ace.js CDN Link 🔗 - https://cdnjs.com/libraries/ace

Video Tutorial On How to create A Code Editor - [Click Here](https://www.youtube.com/watch?v=pCaj3kUI-dg&t=651s)

## 3. Build A Screen Recorder

- Building a screen recorder is a very good project to build and you can easily build it using html css and javascript without using any backend ( if you think it uses ). i also recently made on and thought to post it to my youtube channel that how we can create it

Video Link - [Part 01](https://www.youtube.com/watch?v=ByzyUer1a5A&t=5s)
Video Link - [Part 02](https://www.youtube.com/watch?v=ByzyUer1a5A&t=5s)
Video Link - Part 03 will be out soon

## 4. Build A Notes App

- Building a notes app, is very useful and a great project you can save your notes in this web app and you can also use localstorage to save notes in the website, add a dark mode / light mode button and more to make this project greater 

Addition Features you can add are :-
-  Use firebase to store / save notes and users in the website ( using firebase database or any other thing )

- Mark a note as Important

- Deploy The Website

## 5. Build A Website Using Html, CSS & JS ( College website with firebase login / logout system )

- Now this is a big project to make and it can take a lot of time ( not a lot kinda maybe 3 days maximum [depends on you btw] ). you can add login system in this website and registration and connect it to a database to store user and its data. you can add study materials, quiz in this website & many thing etc..


So i hope you liked these projects. and also Don't forget to subscribe 😀

[Subscribe - i post coding tutorials](https://youtube.com/c/codingfire?sub_confirmation=1)