Forem: Winner Crespo

Learning the position CSS property for good

Winner Crespo — Wed, 27 Jun 2018 00:00:00 +0000

When I create a layout from scratch, I find myself adding different values to the position CSS property and to the DPP (direction position properties, I just made that acronym up) top, right, bottom and left properties, hoping that magically they will look as I expect. Maybe you do too.

It would probably be better to learn what they do for good, so we know how to use them.

First of all, a positioned element is one that has a different value than position: static, which is the default. In other words, an element that has position set as relative, absolute, fixed or sticky.

Having that said, we can state that position defines how an element is positioned on the page. On the other hand, the DPP add an offset on the direction they specify.

Let’s see how each one works.

`static`

This is the default value and means that the element will be placed according to the page flow. Because of that, the DPP don’t affect it.

`relative`

The element will also be placed according to the page flow but now you can use the DPP to add an offset relative to itself. As we can see in the animation below, the space this element is supposed to use is reserved and other elements are not affected even after adding an offset.

`absolute`

You can use this value to place an element exactly where you want it, also, the element is removed from the page flow. This position will be relative to the next parent element with relative or absolute positioning. If there is no such parent, it will be placed relative to the page itself as the next example.

`fixed`

The element is positioned relative to the viewport since the viewport doesn’t change when scrolling, the element will be fixed exactly where you placed it. Also, just like absolute, the element is removed from the page flow and it will be relative to the next parent element with relative or absolute positioning.

`sticky`

It behaves like the fixed value but relative to itself since the element is placed according to the page flow. In the example, we can notice that once we are able to see the element and we keep scrolling it will be fixed.

I hope that now you are able to use those properties knowing exactly what they do.

Happy coding.

Things that won’t work using Vue

Winner Crespo — Sun, 17 Jun 2018 00:00:00 +0000

After using Vue for a while, I have found some issues that later I learned are actually things they warned us in the documentation.

I made a list of these issues so you can know them as well. Let’s describe each and see the options we have to solve them.

Array Changes

Let’s say we have this:

const vm = new Vue({
  data: {
    titles: ['Ready Player One', 'The Power of Less', 'The 10x rule']
  }
})

We can get two different issues while trying to do changes to titles:

Setting an item using the index: vm.titles[index] = newTitle
Modifying the length: vm.titles.length = length

Instead of setting an item using the index directly you can use Vue.set:

Vue.set(vm.titles, index, newTitle)

Another alternative is using splice:

vm.titles.splice(index, 1, newTitle)

On the other hand, to modify the length you can use splice as well:

vm.titles.splice(length)

Adding properties to an object

Having the following object:

const vm = new Vue({
  data: {
    top: {
      bestMovie: 'Avengers: Infinity War'
    }
  }
})

We could be tempted to add a new property doing the next:

vm.top.bestShow = 'Breaking Bad'

but then bestShow won’t be reactive because Vue adds the reactive functionality at the moment of the initialization. Which means that the property must be in the data object in order to be reactive.

We can use Vue.set again to accomplish this:

Vue.set(vm.top, 'bestShow', 'Breaking Bad')

Although, if you need to add several properties, maybe would be better to create a fresh object combining them:

vm.top = Object.assign({}, vm.top, { bestShow: 'Breaking Bad', bestBook: 'Ready Player One' })

Using `$refs` before the component is mounted

Let’s say we want to focus an input on our component. We could use the ref attribute for that:

<input ref="input" />

and then:

methods: {
  focusInput: function () {
    this.$refs.input.focus()
  }
}

What if we want to focus it as soon as the component is created? You would say that we could use the created hook:

created() {
  this.$refs.input.focus()
}

but actually, this produces an error because $refs is populated after the component has been mounted. So, we should use the mounted hook instead since it will be already populated:

mounted() {
  this.$refs.input.focus()
}

Toggling similar elements

Vue sometimes will reuse elements that have the same tag name when using v-if on them. As you can see in the next example, the input element is reused when the toggle button is pressed.

To notice this you can write something in the input and then press the button (the value won’t change) or you can use the dev tools and see that the element is not replaced:

To solve this we just need to add a key to each of them so Vue knows they are distinct elements:

Now we can see that the element is replaced every time we click the button.

Have you noticed other things that won’t work on Vue? Please share in the comments.

Why does the data property on a Vue component must be a function?

Winner Crespo — Wed, 13 Jun 2018 00:00:00 +0000

If you don’t get familiar with the basic rules of a framework (programming language, tool, etc) when starting to use it, things won’t work as expected, since it wasn’t conceived that way.

While using Vue for the first time, I made this by mistake:

data: {
  message: 'Some Message'
}

then, I got the following warning message:

[Vue warn]: The “data” option should be a function that returns a per-instance value in component definitions.

What you should do instead is:

data: function() {
  return {
    message: 'Some Message'
  };
}

So, the reason why Vue forces the data property to be a function is that each instance of a component should have its own data object. If we don’t do that, all instances will be sharing the same object and every time we change something, it will be reflected in all instances.

Check out what the Vue’s documentation says about it and a quick live example.

I hope this helps.

Forem: Winner Crespo

Learning the position CSS property for good

static

relative

absolute

fixed

sticky