4 ms·

I have been building websites for most of my adult life. And I use Vue for some projects. But I have no clue what this is about. What is a 'b-field'?

jacurtis 8y ago
It's a vue component that is part of the framework. In this case it renders an input field that is customizable by passing props into the component.
garren 8y ago
In the original link, the Buefy project describes itself as "Lightweight UI components for Vue.js based on Bulma". It seems like b-field is an example of such a component [0]. Looking at the documentation, this seems to be the case. If you're familiar with components in Vuejs, this is just a component in Vuejs. [0] https://buefy.org/documentation/field https://buefy.org/documentation/field
stefan_ 8y ago
And why is it "is-danger" and has a message. Is this string based programming? What are we doing?
- judge2020 8y ago
  This could probably be a future improvement for buefy, but it's just implementing the conventions Bulma uses. is-danger is a color modifier https://bulma.io/documentation/modifiers/syntax/ https://bulma.io/documentation/modifiers/syntax/
- greenhatman 8y ago
  Seems very clear to me. What is the alternative?
  - jddj 8y ago
    That's the million dollar question. What's the alternative to declaring our UI using pseudo-html elements and string-matching on css class proxies from the currently-in-favour CSS framework which sits on top of the javascript framework of the moment which, after going through several transpilation steps to become plain old javascript, then sits on the client manipulating a shadow-DOM, to finally render plain old html? No idea. Hopefully some nice solutions will arise from other languages which compile to wasm - I would expect all the major players to be looking at coming up with something to that effect now that the world seems ready for Silverlight 2.0 and everyone loves writing frameworks.[1] Until then, any solution will unfortunately probably involve adding yet another level to the house of cards, maybe one which compiles down to buefy or the Vue bootstrap components.. [1] yeah, I see the irony in that it's just another stack which will probably be just as insane in many ways, but at least it will compile in less than 5mins.
- lbotos 8y ago
  This is what modern front-end UI programming looks like now. It's... weird.
  - deleted 8y ago
    [deleted]
- neovive 8y ago
  Buefy uses the class naming conventions established in Bulma. Since it's Vue, you can bind the values to data and change the classes dynamically to quickly toggle the error state and messages.
jhanschoo 8y ago
It is a component meant to represent a field. `b-` is just the namespace for Buefy components.
- dmix 8y ago
  If you've been using Vue for some time this should be obvious...
- TicklishTiger 8y ago
  What is a 'field'? I get the feeling that Buefy's approach is to use custom elements instead of native elements? So something like an <input> element becomes some <b-field> thing? I am sceptical if that is a good thing. I would not want to swap out all regular html for some fantasy elements of a library.
  - jhanschoo 8y ago
    A grouping of form controls and labels that together represent a piece of form data is a field. True, HTML doesn't have any exact `field` tag, but the notion of a field has always been there, see `<fieldset>`. Working with custom "fantasy" elements is quite typical of modern frontend development, and very productive to work in. Nevertheless, in the more restricted question of using custom elements to replace CSS classes, you may have a point; many libraries that try to do this typically end up with a far more restricted use case since a custom components library is less open to extension than CSS classes, and custom components authors often fail to anticipate ways in which CSS frameworks are used. (e.g. using a CSS class with a standard HTML tag, and then, using a CSS class with a custom component)
    - TicklishTiger 8y ago
      Working with custom "fantasy" elements is quite typical of modern frontend development And eating too much fat is quite typical of the modern diet. I prefer to eat healthy nontheless.
      - 8y ago

jacurtis 8y ago

It's a vue component that is part of the framework. In this case it renders an input field that is customizable by passing props into the component.

garren 8y ago

In the original link, the Buefy project describes itself as "Lightweight UI components for Vue.js based on Bulma". It seems like b-field is an example of such a component [0]. Looking at the documentation, this seems to be the case. If you're familiar with components in Vuejs, this is just a component in Vuejs. [0] https://buefy.org/documentation/field https://buefy.org/documentation/field

stefan_ 8y ago

And why is it "is-danger" and has a message. Is this string based programming? What are we doing?

judge2020 8y ago
This could probably be a future improvement for buefy, but it's just implementing the conventions Bulma uses. is-danger is a color modifier https://bulma.io/documentation/modifiers/syntax/ https://bulma.io/documentation/modifiers/syntax/
greenhatman 8y ago
Seems very clear to me. What is the alternative?
- jddj 8y ago
  That's the million dollar question. What's the alternative to declaring our UI using pseudo-html elements and string-matching on css class proxies from the currently-in-favour CSS framework which sits on top of the javascript framework of the moment which, after going through several transpilation steps to become plain old javascript, then sits on the client manipulating a shadow-DOM, to finally render plain old html? No idea. Hopefully some nice solutions will arise from other languages which compile to wasm - I would expect all the major players to be looking at coming up with something to that effect now that the world seems ready for Silverlight 2.0 and everyone loves writing frameworks.[1] Until then, any solution will unfortunately probably involve adding yet another level to the house of cards, maybe one which compiles down to buefy or the Vue bootstrap components.. [1] yeah, I see the irony in that it's just another stack which will probably be just as insane in many ways, but at least it will compile in less than 5mins.
lbotos 8y ago
This is what modern front-end UI programming looks like now. It's... weird.
- deleted 8y ago
  [deleted]
neovive 8y ago
Buefy uses the class naming conventions established in Bulma. Since it's Vue, you can bind the values to data and change the classes dynamically to quickly toggle the error state and messages.

jhanschoo 8y ago

It is a component meant to represent a field. `b-` is just the namespace for Buefy components.

dmix 8y ago
If you've been using Vue for some time this should be obvious...
TicklishTiger 8y ago
What is a 'field'? I get the feeling that Buefy's approach is to use custom elements instead of native elements? So something like an <input> element becomes some <b-field> thing? I am sceptical if that is a good thing. I would not want to swap out all regular html for some fantasy elements of a library.
- jhanschoo 8y ago
  A grouping of form controls and labels that together represent a piece of form data is a field. True, HTML doesn't have any exact `field` tag, but the notion of a field has always been there, see `<fieldset>`. Working with custom "fantasy" elements is quite typical of modern frontend development, and very productive to work in. Nevertheless, in the more restricted question of using custom elements to replace CSS classes, you may have a point; many libraries that try to do this typically end up with a far more restricted use case since a custom components library is less open to extension than CSS classes, and custom components authors often fail to anticipate ways in which CSS frameworks are used. (e.g. using a CSS class with a standard HTML tag, and then, using a CSS class with a custom component)
  - TicklishTiger 8y ago
    Working with custom "fantasy" elements is quite typical of modern frontend development And eating too much fat is quite typical of the modern diet. I prefer to eat healthy nontheless.
    - 8y ago