MongoDB – Natural sort

One of the most common problems with databases are sorting. Let’s see an simple example: we use MySQL/MariaDB and have table with some data. We want to sort this data. Everything is ok if we use only values in the same type in field, for example numeric (maybe some amount?), strings (titles), dates, keys etc. But what if field is custom, user-typed data and may contain many types? In that case, we have big problem, because standard sorting is not enought, it will not work. Example, value: “11”, “1”, “2”, “3”, “2a” will be sorted in order: 1, 11, 2, 2a, 3, not as we expected i.e. 1, 2, 2a, 3, 11. The solution is to use natural sorting.

Continue reading “MongoDB – Natural sort”

Vue – v-model with two-way data binding in custom component

Vue offers very nice binding and events system. We can create component, set some data using props, and also emit events from that component. If you read official Vue documentation, you can see examples for some standard form inputs. These examples using v-model and allows two-way binding without any additional code and without creating methods for events in parents – of course, we can still watch data from v-model. Can we use v-model way also in our custom components? Yes, it’s possible and very simple to do. See some examples.

Continue reading “Vue – v-model with two-way data binding in custom component”

SweetAlert2 – Do not prompt in the future

NPM repository is great too, where we can find a lot of very good tools. On of them is SweetAlert2. Library to qucikly implement dialogs with errors, success messages or question. This library also allows to implement simple forms, like question about youir name with input, selection field, radio, files upload or other, custom template. This small tutorial is how to add “do not prompt in the future” to SweetAlert2 dialog. It’s vary simple, but some dev can be confused, how to add this, because it’s in conflict with some build-in options.

Continue reading “SweetAlert2 – Do not prompt in the future”

Vue dynamic, async components (lazy load)

Vue is very nice framework that allows us to simply and quickly create apps. After many many hours and after hundreds of lines, our app can be big, really big. It’s bad for user experiences, because of long loading and delays. If we use a lot of components and many of them are rendering conditionally, we can load them asynchronously, as other chunks. How do this? It’s very simple, we must just import required files not always, but only on demand – something like lazy loading. Everything is build-in, so we only have to make only few small changes.

Continue reading “Vue dynamic, async components (lazy load)”

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”