teleren/devto huggingface dataset:
Vue Prop | 禁用Attribute繼承
Tags: vue
Published: 2022-09-28 09:07:15

## 前言

一般來說，當在父組件傳遞attribute給子組件時，

```jsx
// parent
<basic-input disabled>

// child
<input>
```

經渲染後會變成

```jsx
<input disabled>
```

但是我們的子組件結構有時不會只有一個節點，通常因為css需要，外層會再包一個標籤，例如:

```jsx
<div class="container">
	<input>
</div>
```

經渲染後會變成

```jsx
<div class="container" disabled>
	<input>
</div>
```

`disabled`屬性會直接繼承在子物件的根結點上。

這時如果不希望组件的根元素繼承 attribute，那該怎麼辦呢?

## 禁用Attribute繼承

這種情況就需要到組件的option中設置`inheritAttrs: false`，禁用attribute繼承。

```jsx
Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})
```

如果子組件是單一檔案的話，在子組件內設置:

```jsx
export default {
  name: 'my-component',
  inheritAttrs: false,
  props: {
    disabled: Boolean
  }
}
```

設置完後，這時你就可以手動決定哪些attribute賦予哪個元素，把子物件改為:

```jsx
<div class="container">
	<input disabled>
</div>
```

這樣disabled屬性就不會跑到根結點上

`inheritAttrs: false`在寫基礎組件的時候很常用到，例如`input`、`select`之類的功能型標籤，

有關他們屬性`type`、`disabled`、`placehodler`等都希望綁在子物件的特定標籤上。

也可以看看官方文件的範例:

```jsx
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

// parent component 使用 <base-input>
<base-input
  label="Username:"
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>
```

如果對於官方範例子物件`v-bind:value`、`v-on:input`有疑問
[https://yubo0826.github.io/vue-blog/#/posts/6](https://yubo0826.github.io/vue-blog/#/posts/6)

對`$attrs`有疑惑的

[https://v2.cn.vuejs.org/v2/api/#vm-attrs](https://v2.cn.vuejs.org/v2/api/#vm-attrs)

## 總結

1. 當設置`inheritAttrs: true`(預設)，子組件根節點會渲染出父節點傳遞過來的attrribute
2. 當設置`inheritAttrs: false`，子組件根節點不會渲染出父節點傳遞過來的attrribute

## 參考

1. 官方文件(Vue2、Vue3關於禁用屬性繼承基本一樣)
[https://v2.cn.vuejs.org/v2/guide/components-props.html](https://v2.cn.vuejs.org/v2/guide/components-props.html)
2. [https://blog.csdn.net/weixin_41977619/article/details/116597022](https://blog.csdn.net/weixin_41977619/article/details/116597022)
Why Software Testing Is Necessary?
Tags: showdev, webdev, programming, tutorial
Published: 2022-09-28 09:00:47




***Test your mobile website or mobile app for free and get started right away. You can use on-cloud based Android [emulator online](https://www.lambdatest.com/mobile-emulator-online?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) to see how your website/app will appear on a real, emulated device. All you need is a browser; no software install or signup required!***

Software Testing has been the buzzword in the software industry for a long time. Even after years, its charm still remains the same. So what’s the main reason behind it? Why is it necessary? Let’s explore this in this Infographic.

***Test your web and mobile apps on [Android Emulators](https://www.lambdatest.com/android-emulator-online?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) online to ensure that they are compatible with latest and legacy Android operating systems, devices, and browsers.***

![](https://cdn-images-1.medium.com/max/2000/1*LNUFTfcdKCfKjsOtmADdFg.jpeg)

***If you want to know about [regression test](https://www.lambdatest.com/blog/what-is-codeless-automation-testing-and-why-it-is-the-future/?utm_source=devto&utm_medium=organic&utm_campaign=sep28_kj&utm_term=kj&utm_content=blog), check this out: what is Regression testing, its importance and types, and how to perform it.***
Introducing Budibase 2.0 🍱
Tags: opensource, beginners, javascript
Published: 2022-09-28 09:00:10

---
title: Introducing Budibase 2.0 🍱
published: true
description: Today we’re launching Budibase 2.0 - and yes, you can build your own custom components! Budibase 2.0 brings it all together: extensibility, scalability, education, and community. We think you’ll love it!
tags: opensource, beginners, javascript
cover_image: https://res.cloudinary.com/daog6scxm/image/upload/v1663675553/cms/budibase-2_xtfmcp.gif
canonical_url: https://budibase.com/blog/updates/introducing-budibase-2.0/
---

Today we’re launching Budibase 2.0 - and yes, you can build your own custom components! Budibase is a no-code/low-code platform for building internal tools, and 2.0 brings it all together: extensibility, scalability, education, and community. We think you’ll love it!

## Features & Improvements

**🎨 Custom plugins (components and datasources)**
By far our most requested feature - users can now add custom datasources and components, aka plugins, to Budibase. Plugins are stored at the global level allowing you to use them across your different apps.

[Visit the docs](https://docs.budibase.com/docs/custom-plugin)

![Budibase and stripe integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j023eccs5vneuvfltv9f.png)

🔌 Plugins repository
We’ve created a plugin repository to store plugins created by the community. We plan to put time and effort into growing this plugin ecosystem over the next few months - including our first hackathon.

[Visit the plugin repository](https://github.com/Budibase/plugins)

🧑‍🤝‍🧑 User groups
User groups are critical when you want to scale your Budibase deployment. User groups are a collection of users who perform a similar task. For example, a group of marketing representatives might be put in a Marketing user group. When you add a user to a group, they are assigned the default permissions of that group.

🖇️ Binding groups
We’ve revamped the bindings drawer and nested all the user bindings under sections. This makes it much easier to navigate and find the values you are looking for.

🎓 Budibase university
A curriculum of video tutorials to help you get started with Budibase.


👾 Discord channel
Interact with other community members in the Budibase Discord.


🧮 Pricing
The new pricing allows users to upgrade from free and open-source plans to new paid plans that come with additional features, functionality, and limits.


🐞 Bug Fixes
- Formula from a relation causes API error when a relation is removed

And so many more; where do we start…. 🙈

---

Check it out the launch, new features and try Budibase 2.0:
[Budibase website](https://budibase.com)
Your Guide for Testing ReactJS Apps - Part 1
Tags: react, testing, javascript, webdev
Published: 2022-09-28 08:56:37


## What is Testing

Testing is crucial for the engineers and every engineering team. Testing helps in gaining the confidence on the features devs are developing, and shipping. Gone are the days where we used to relay only on the testers for the testing and bugs.

Now, engineers are encouraged to write test-cases to avoid bugs and errors. This will increase the confidence of the developers in the product and shipping the code with quality.

## Type of testing (React) & complexity 

1. Unit testing: Easy 

2. Snapshot : Easy and for UI

3. Integration Testing: Medium
 
4. End to end testing: Complex

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

## Type of testing:

1. TDD: Test driven development

2. BDD: Behaviour driven development

## Why testing

1. Avoid bugs

2. Gain confidence

3. Proof of documentation

4. Quality code

## Library for test cases

There are 2 testing way: Assertion & test runner

1. Jest

2. Chai

3. Mocha

4. React Testing Library

5. Puppeteer

6. Playwright

7. Airbnb

## Autonomy of test case

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

## Details

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

In next, blog we will get into the code. We will write our first test-case.

_If you like this blog do follow me at [Twitter](https://twitter.com/hellonehha)_
PostgreSQL Primary Key: CREATE and ALTER TABLE Statements
Tags: postgres, database, dbforge
Published: 2022-09-28 08:54:51

---
title: PostgreSQL Primary Key: CREATE and ALTER TABLE Statements
published: true
description: Ways to use PostgreSQL Primary Keys
tags: #postgresql #databases #dbforge
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
In this article, we will look at ways to use PostgreSQL Primary Keys when creating a new table or editing an existing one. We will also study instructions with code examples and screenshots based on dbForge Studio for PostgreSQL - https://blog.devart.com/postgresql-primary-key.html
Python Call:
Published: 2022-09-28 08:31:39

 The reality is this Python programming if used wisely brings sort of super power. Are you a Banker? Trader? Doctor? Student? Or just be what ever you can be this is a very good encouragement for you to give python a try.

Sure It’s a programming language and the easiest I know. You can learn to write your first program in barely 2mins.. Just give it a try!

Are you a gamer? Guess what! Programmers enjoy playing video games better than all the gamers who don’t code. Why?

 Programming is build by concepts and in playing games we’re learning new concepts per each play. Python will shape the way you think and view real-life problems with step by step know how stages that’ll lead to the possible solution 

Python is a wonderful revenue for the abstract minds. 

This is a Python call.

Give it a try...
Responsive asynchronous request status
Tags: webdev, javascript, html, programming
Published: 2022-09-28 08:02:10

#### Can anyone tell me did I did it right?

1. pages/products.vue
```html
<template>
        <div v-if="fetchDataState.isFetching" py-4 w-full flex justify-center>
            <spinner />
        </div>
        <div v-else-if="fetchDataState.isFailed" text-center py-4>
            Load failed
        </div>
        <product-list v-else :products="products" />
</template>

<script setup lang="ts">
    const { products, fetchDataState } = useProductsByCatalog();
</script>
```

2. composables/useProductsByCatalog.ts
```ts
    export function useProductsByCatalog(catalogId: string) {
    const { products, setProducts } = useProducts();
    const { fetchDataState } = useFetchDataState();

    onMounted(() => {
        fetchDataState.isFetching = true;
        setTimeout(() => {
            fetchDataState.isSuccess = true;
            setProducts(xxx)
            }, 1000);
    });
    
    return {
        products,
        fetchDataState,
    };
    };
```

3. composables/useFetchDataState.ts
```ts
enum AsyncReqState {
    beforeReq,
    waitRes,
    success,
    failed,
}

class FetchDataState {
    reqState: AsyncReqState;
    constructor() {
        this.reqState = AsyncReqState.beforeReq;
        this.isFetching = false;
    }

    set isBeforeReq(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.beforeReq;
        }
    }

    get isBeforeReq() {
        return this.reqState === AsyncReqState.beforeReq;
    }

    set isFetching(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.waitRes;
        }
    }

    get isFetching() {
       return this.reqState === AsyncReqState.waitRes;
    }


    set isSuccess(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.success;
        }
    }

    get isSuccess() {
        return this.reqState === AsyncReqState.success;
    }


    set isFailed(newVal: boolean) {
        if (newVal) {
           this.reqState = AsyncReqState.failed;
        }
    }

    get isFailed() {
        return this.reqState === AsyncReqState.failed;
    }
}

export function useFetchDataState() {
    const fetchDataState = reactive<FetchDataState>(new FetchDataState());

    return {
        fetchDataState,
    };
}
```
Browser Statistics To Decide On Your Cross Browser Testing Needs
Tags: showdev, webdev, testing, beginners
Published: 2022-09-28 08:00:40



The question that has been revolving around people’s minds is ‘*How to formulate a Cross Browser Testing Strategy*’? The answer usually revolves around what are the most popular browsers of your target audience. You start by covering the most popular browsers in your test coverage followed by the least used. This infographic on browser statistics is going to help you decide which browsers to target first for your [cross platform test](https://www.lambdatest.com/?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) coverage.

***LambdaTest is an online test execution cloud that allows you to execute your Selenium, Cypress, Appium, and JavaScript [test automations](https://www.lambdatest.com/automation-testing?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) builds online . You can run your scripts, in parallel, across 3000+ different browsers and devices. All real machines, running real OS and real browsers. Therefore with LambdaTest, you not only cut down your test execution times by running tests in parallel, you also increase your browser coverage, and thus ensure your users get best experience no matter what device they use.***

***Check this out- [Automation Testing](https://www.lambdatest.com/automation-testing?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) Platform: Accelerate your release velocity with blazing fast test automation on cloud***

![](https://cdn-images-1.medium.com/max/2000/1*XduvPc668t4VkqaCkYeAxA.jpeg)

***Check this out- Online [ Automated testing](https://www.lambdatest.com/automation-testing?utm_source=devto&utm_medium=organic&utm_campaign=sep28_sd&utm_term=sd&utm_content=webpage) Platform***
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2022-09-28 08:00:04

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125894734cf.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What diet did the ghost developer go on?

___A:___ Boolean
 -->
Wednesday Links - Edition 2022-09-28
Tags: java, jvm, springboot, docker
Published: 2022-09-28 07:56:21

The Case of Ljdk.vm.internal.FillerArray (4 min)🗄️
https://tschatzl.github.io/2022/09/26/jdk-vm-internal-fillerarray.html

Report card: Java 19 and the end of Kotlin (3 min)🔚
https://jakewharton.com/report-card-java-19-and-the-end-of-kotlin/

Native Support in Spring Boot 3.0.0-M5 (4 min)🦙
https://spring.io/blog/2022/09/26/native-support-in-spring-boot-3-0-0-m5

Handling Timezones in a Spring Boot Application (15 min)⏱️
https://reflectoring.io/spring-timezones/

How to setup remote docker host (3 min)🚢
https://blog.pchudzik.com/202209/remote-docker/

The evolution of the developers' approach to testing their code(30 sec)📈
https://twitter.com/mikemybytes/status/1574685570655453185
Mobile Game Development: A Trend that Isn’t Slowing Down
Tags: mobile, gamedev, mobilegam
Published: 2022-09-28 07:28:22

So, you’ve decided to develop a mobile game.

Do you have a fantastic idea that you want to see come to fruition? Are you diversifying your company portfolio and want to support your team with experienced specialists?

Or, maybe you’ve done your research and know that mobile game consumer spending is set to reach $138 billion by 2025? (SensorTower)

If you’re looking to escalate your mobile game production or you simply have questions about hiring a mobile game developer, you’ve come to the right place.

Read more: [https://www.innovecsgames.com/blog/mobile-game-development-a-trend-that-isnt-slowing-down/](https://www.innovecsgames.com/blog/mobile-game-development-a-trend-that-isnt-slowing-down/)
CSS: visibility:hidden vs display:none
Tags: css, webdev, beginners, programming
Published: 2022-09-28 07:22:11

Frequently asked interview question.

`display:none` - Won't allocate space on the page.
`visibility:hidden` - allocates space on the page.

-> Both aren't visible on the page
-> Both are visible and trackable via DOM.

See below images for more clarification:

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

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

Thanks.

Please add your any further thoughts via comments.

Follow: https://twitter.com/urstrulyvishwak
Unique Ways to Experience
Published: 2022-09-28 07:18:48

Manchester is a football crazy city with two major teams calling it home. It is also home to the world's biggest football stadium. Whenever there is a game the city is awash with fans and alive with competitive fun excitement. It is also one of the top concert and party venues Manchester has. It is particularly a favourite for international concerts and festivals and [businesses ](https://en.wikipedia.org/wiki/Business)like Venuefinder often recommend those kinds of spaces to contain the number of people who troop in their thousands.
Why I use MVU ?
Tags: mvu
Published: 2022-09-28 07:14:03

Again, MVU is a lighter version of [DML](https://github.com/efpage/DML) with some addons.

I like using MVU because of all the niceties I can write.

Suppose you want a function which allows to insert variable lines break in your  component.

Here is how to accomplish this with MVU (Javascript :-))

```js
const {dom, udom, m, render } = MVU;

let div  = m("div")
let br = m("br")
let hr = m("hr")
let nbr = (n = 1) => [...Array(n)].map(br)

function MyComponent () {
  let view = dom() // we wrap our component in a div
    div("I am followed by one line break")
    nbr()
    hr()
    div("I am followed by 5 lines break")
    nbr(5)
    hr()
  udom() // enf of wrapping
  return view
}

render(app, MyComponent())
```
You can test it here : [NBR](https://flems.io/#0=N4IgzgxgTg9gNnEAuA2gBgDQDY0F0MgBmAlnAKZjIqgB2AhgLZnIgB0AFgC4OIEQw1OZQSwA8kKMQAOnAARgoEALwAdEF05SwSAPQ6IAExqsAVmANk4xAG5RWNMpx0BzdjrpROATwvWdDawBXAAEAJlY0HQNiMCcAwNZAhgNTMDUAPlEdCWlOdJUaAtFo61liAyUAcjopKUr8mllZIqibdJACMEsyCE5iAUokEABmJFCQAF8MWkZmIdSOkH5BYU4WZdjZYAMYBgxZQJ292WOoYQsoWQnZJVkAWQA1AFUAbgKC8jkSptuGAAo1CU1ABKD6OWQAI0uvwBIChILBcnY0JOsORCJon1kNChN1kf0atwAjMCbulZChWFSAIJQKB0LwE4G4VgMGp-KGgwo0QiBGi9fqNO5eADCuykAlW+NJwAKTSx1mIZAA7nijn8uU0SrCAJKyRiyQjwOAwZVkAyQryySWyKwOSFnOgAazSIE1TWxUI1co9yO9jQ92rUeoNRoQpvNltkAFZbcR7VCyM7Xe6mjioH9o6nZH73Yddv6mmdOIEoI1FSqChN3jQzjQLn8alJ9sKxQwJQ5BBrgYsuuQBQMWESAJxjLAAWjQSDQk2mIHoTBYrAgYEofAEQhEQ0m+HnsxY6cmQA)
Hide or Reveal a Sticky Header on Scroll
Tags: javascript, html, css, webdev
Published: 2022-09-28 07:08:52

Sticky header menus or navigation bars are also called fixed headers, which cause the header of a website to remain at the top of the page as a user scrolls up and down. One of the easiest ways to make a sticky header is to use the CSS position: sticky. But We have used some custom js code to make the sticky header hide on scroll down and reveal on scroll up. [DOWNLOAD CODE](https://www.divinectorweb.com/2022/09/hide-or-reveal-sticky-header-on-scroll.html)
Tailwind CSS Free Digital Agency Landing Page
Tags: tailwindcss, css, webdev, showdev
Published: 2022-09-28 07:06:31

Digital Agency template is the new Tailwind CSS 3.x template with under-the-hood capabilities to make your performance better.It is minimal and very fast load. tailwind digital Agency landing page offering you the responsive  navbar, Features section, blogs  section, Contact US section.

### FEATURES & Tools Use:
Tailwind CSS 3.x

Alpinejs 3.x

Heroicons Icon 2.x

Undraw.co (Image, SVG)

Scroll Behavior Smooth

Responsive Navbar with Hamburger Menu

Hero Header

Reservation Form UI

Contact US

**[Download](https://larainfo.com/blogs/tailwind-css-free-digital-agency-landing-page)**


### Tailwind CSS Free Digital Agency Landing Page - Screenshot
Header Section
![tailwind css digital agency header section](https://demo.larainfo.com/screenshot/template/tailwind-css-digital-agency-header.png)

Features Section
![tailwind css digital agency features template section](https://demo.larainfo.com/screenshot/template/tailwind-css-digital-agency-features.png)

Our Blogs
![tailwind css digital agency blogs section](https://demo.larainfo.com/screenshot/template/tailwind-css-digital-agency-blogs.png)

Contact US Form
![tailwind css digital agency contact us form](https://demo.larainfo.com/screenshot/template/tailwind-css-digital-agency-contact-us-form.png)
Creates an array with all falsy values removed. The values false, null, 0, "", undefined, and NaN are falsy.
Published: 2022-09-28 06:57:41



OR

Q: Implement lodash compact function

INPUT:
const array=[1, null , 0 , 2 , 3 , 4 , 5 ," " , undefined , NaN];

OUTPUT : [1, 2, 3, 4, 5]

======================================

```
function compact(ar){
let newArr=[];
for(let i=0;i< ar.length;i++){
if(!(ar[i] === false || ar[i] === null || ar[i] === 0 || ar[i] === "" || ar[i] === undefined || (typeof ar[i] == 'number' && !ar[i]) ))
{
newArr.push(ar[i])
}
}
return newArr
}
```

====================================

The best and easy approach in the comment
When Johnny bhaiya start taking frontend interviews
Tags: css, interview, frontend, webdev
Published: 2022-09-28 06:56:26



Which position are you comfortable? and how do they differ?
.
.
.
.
.
.
Question: How absolute, relative, fixed and static position differ?

Answer:

🔥absolute : it place an element exactly where you want to place it. absolute position is actually set relative to the element's parent. if no parent available then relatively place to the page itself.

🔥relative, is position an element relative to itself (from where the element would be placed, if u don't apply relative positioning). for example, if u set position relative to an element and set top: 10px, it will move 10px down from where it would be normally.

🔥fixed, element is positioned relative to viewport or the browser window itself. viewport doesn't changed if u scroll and hence fixed element will stay right in the same position.

🔥static, element will be positioned based on the normal flow of the document. usually, u will use position static to remove other position might be applied to an element

Z index only works on positioned elements (absolute, relative, or fixed)
"Bootstrap reactify" chrome extension
Tags: webdev, javascript, chrome, extension
Published: 2022-09-28 06:54:04

One day i got irritating of copy pasting bootstrap code to to some website that converts it to jsx


So two years ago I developed a chrome extension called "Bootstrap reactify"

That will convert bootstrap snippet to jsx code as you visit the Bootstrap website.


Code available on GitHub .

Have you guys faced the same problem ?
should I publish it in the Chrome store ?

Here is link

https://github.com/shadab97/Bootstrap-reactify