Vue-fragment – many components inside template

Vue is very nice JS framework with – in my opinion – very clean and simple structure. It’s separate HTML, CSS and JavaScript, in effect it’s much cleaner than React. But Vue is not ideal, and sometimes its limitations can be strange and annoying. Good example is that we must use only one child elements on every component. It doesn’t matter in many cases, but try to render table with some child components and conditions – I promise you, it will be real nightmare.

Continue reading “Vue-fragment – many components inside template”

Vue.js – global event bus

Vue is very nice JavaScript framework – fast to use and with clean code. Most of rules are logical and easy to understand, but some limitations may be strange and problematic. One of them is one-way data flow. We can pass data from parents to child elements automatically, but in reverse, use only events data. Sometimes it may be an issue, because we have nested components structure and would like to send event to top level parent.

Continue reading “Vue.js – global event bus”

Fabric.js – change uploaded image color

Painting

Fabric.js is amazing library – I know, that we have a lot of drawing possibilities using canvas element, but “vanilla version” is not very readable and difficult to use. With fabric.js, everyting is much simpler and cleaner, we can also use a lot of build-in tools. One of them is image filters. We can modify images in many ways, apply for example sepia filter, but also make other changes. Last time I must just change image color. Yep, user can upload image (or I load image using static url), and I want to force using color, not original. Diffucult? Not with fabric.js.

Continue reading “Fabric.js – change uploaded image color”

Traverse – very useful npm package

NPM has a lot, a lot of useful packages… and a lot of useless packages of course. Sometimes we can find something very nice. Last time I must modified nested object in JavaScript. I can write my own function to do this, use recursion for example, but I simply… didn’t have enough time to do this. I must find solution quickly, good solution. I and found – it’s traverse package. Yes, its name is very meaningful.

Continue reading “Traverse – very useful npm package”

Arrow functions in JavaScript

One of very, very nice ES6 capabilities are arrow functions. Using them, we can creae shorter, cleaner code, and also avoid important issues with this keyword – I wrote about this keyword in one of some ealier posts. This time I would like to write few sentences about arrow functions. If you do not know them yet, you should get to know them as soon as possible.

Continue reading “Arrow functions in JavaScript”