Try them out and you will be surprised Welcome to the 2nd part of JavaScript Tips and Tricks. Let’s check some new JS tricks out :) Get mouse position The user’s mouse position is stored in the clientX and clientY properties on the built-in MouseEvent object. First, we can listen to the mousemove…

Try them out and you will be surprised You are using the most popular programming language every day, but you might not know these tricks below that are simple yet useful. Style console.log() with CSS Maybe you are bored with the always-the-same output of console.log(), but you can add CSS styling to it:

Event Handling Vue.js is implemented with a powerful yet easy-to-use event system that covers most of our daily development needs when it comes to user interaction. In this series, we will go through all parts of the event system in Vue that you could possibly use in your projects. Let’s…

Customize and enhance Vuetify components Vue.js is a simple yet powerful front-end JavaScript framework that is designed exquisitely. In my opinion, Vue.js is the first choice for the UI of middle to large-sized projects. Over the years, there are a wide range of UI component libraries for Vue.js, and the…

Event bus pattern The event bus pattern is used to create global event listeners that can be used across the whole application. To be more specific, it allows cross-branch components communication, and a roughly similar concept is the “service” in Angular. Similar to the Upward-broadcast and Downward-broadcast patterns introduced in…

Context API pattern So far the patterns introduced in the previous series are about “passing data” between components in a multi-level hierarchy. Could a parent component directly “provide” data and any descendant component just “consume” it? React.js has the context API to achieve it, what about Vue.js? The answer…

$listeners pattern In Part 4, we introduced the powerful $attrs pattern. This time let’s explore another related pattern. We will start from the final example in Part 4, where there are four nested components with the relationship: App --> Parent --> ChildA --> GrandchildA and App now is able to…

$attrs pattern In Part 3, we implemented the broadcast mechanism to make communication between components in a deep-level hierarchy more easily. In this part and the next, let’s look at another set of super-powerful patterns. $attrs pattern Similar to the previous examples, we have four nested components forming a tree:

Upward-broadcast and Downward-broadcast patterns In Part 2 of this series, we used the “$parent” and the “$children” patterns to enable components to communicate in a three-level hierarchy. Towards the end, we had a question in mind for an even more complex hierarchy of components, e.g. what if there are ten…