-
How to test Vue JS teleport and portal component
We all had this teleport issue where vue js component just renders beyond the DOM in the shadow realm and we ned to look for it all around. May or may not have an id that is more or less random. Very problematic. This is a short pos on how to use the options to test vue js teleport and portal features. How test teleport in vue js ? Example code below to enable testing What stubbing of teleport does ? This works rather for integration test when we need to check components made from other components. Otherwise we can just run unit tests but we still need to check…
-
WebExtension Manifest.json permissions options list
WebExtension Manifest.json permissions options list is quite long. Let us see what we can access with our plugin for FF. This hsould inspire You to write Your own for quality of life and ease of doing things… or avoid them all together. For avoidance i would highly recommend to look into prper ad block filter and creating / adding your own. Rule : Do not scare users Remember when Your app requires and asks for access. You either explain to user in every detail what for and go with bare minimum. Just as a rule of thumb of not beeing accused of getting and selling info. It is always scary…
-
Typescript perfect sync – 3 tricks to keep it tight
Typescript perfect sync can be kept using couple of strategies. Most of us start with simple union types, like this: const ScenarioStatus = 'success' | 'fail' | 'error' | 'other'; So far so good. That works great… until you need to iterate over those values for rendering, validation, or other logic. And now You are stuck with two separate definitions: one array for logic, and one string union for the type. Sooner or later, they’ll fall out of sync and provide headaches to people. You could go for en enum…. Below behold the three TypeScript tricks to make your code tight, hard to break, cleaner, safer, DRYer and resistant to…
-
Lauers Law – why less code is better
Lauers Law – why less code is better as a very solid idea. Just remind Yourself about all those DTOs that could be a simpler one with a mapper or a dedicated if-else-tree somewhere around data transformation. It challenges developers to prioritize efficiency and elegance in their coding practices, ultimately leading to cleaner, easier to understand and more maintainable systems. The Essence of Lauer’s Law At its core, Lauer’s Law emphasizes that reducing the amount of code can lead to better outcomes. The principle suggests that if developers had twice as much time, they could create a system with half the code while maintaining or improving its quality. The idea…
-
GraphQL approach to APIs
GraphQL is a query language and runtime for APIs that has transformed the way developers approach data retrieval and manipulation. Developed by Facebook in 2012 and open-sourced in 2015, GraphQL offers a more efficient and flexible alternative to traditional REST APIs. Its core principle is to allow clients to request precisely the data they need, no more and no less, which significantly reduces over-fetching and under-fetching of information. GraphQL provides a single endpoint where clients can send complex queries to fetch data from multiple sources in a single API call. One of its key strengths lies in its use of a strongly-typed schema that defines the structure of available data,…
-
How to write code – part 1
How to write code ? Writing Code for Future Comprehension. How to write code In the “fast-paced” world of software development is a very tricky question… The ability to “write code so in one year you or anyone else will be able to easily understand what it is about” can be a crucial skill. This practice not only enhances the longevity of your projects but also significantly improves team collaboration and code maintenance. Gives a lot less headaches also. Let’s explore why this approach is essential and how you can implement it in your coding practices. As always.. take a grain of salt with a dose of common sense… The…
-
Computed vs ref properties in Vue
Computed vs ref properties in Vue are used to manage reactive data. There are very similar but they serve different purposes and have distinct characteristics. Here’s a detailed comparison of computed and ref. Ref To obtain a reference using Composition API, You need to provide a ref attribute with a name that matches the template ref attribute’s value: <template> <input ref=”input” /> </template>. You will be able to use the methods of the component directly in the script part of the code. Computed In-template expressions / references are very convenient, but they are meant for simple operations. Front should usually READ data, backend should do computing. Too much logic in…
-
Vitest not rendering vue component
Vitest not rendering vue component might be many, hugely depends on the config but what i discovered is that…. You have to UNMOUNT the component at the end of the test. Otherwise mounting it again in the next test will just not render it, like it uses some old obsolete version of the object. Best part is that the pinia store is changing as it should. The component is not rendering the html. Code example First test will always pass, second one will pass when running it alone, solo. When running both the second one will fail due to bad managment of components. I would imagine that mounting will always…
-
Typescript default parameters in constructor for GA
Typescript default parameters are the same as in scala. While working on multple google analytics projects it is good to now we can hardcode part of the object and then just use the simple, single object in a constructor, without having to pass the default values. However !! Typescript default parameters should be the last on the parameter list in constructor That said the not optional, required and demanded parameters need to be first. Otherwise intellij or what ever other ide You use might complain and will NOT TELL YOU THAT. I love that small little things You assume would be obvious but then You spend a lot of time…
-
Script setup Vue 3 – ❮Script lang=”ts” setup❯
Script setup <Script lang=”ts” setup> is something i really appreciate after migrating from vue 2. It is a part of the new Script Setup feature introduced in Vue 3. It replaces the traditional <script> block and provides a more concise and focused way to write components. The purpose of <script setup> is to simplify component code by removing unnecessary boilerplate and reducing redundancy. What Does It Do? The code inside <script setup> is compiled as the content of the component’s setup() function. You can remember it from vue 2 for both, composition and options api.Unlike the normal <script> block, which executed only once when the component is first imported, code…
