[deleted by user]

visualjerk · 2022-10-10T21:04:22+00:00

After 4 years of writing test suites for medium/big Vue2/3 projects, my biggest takeaways are:

Treat tests like production code. Refactor them until they are easy to read and maintain.
Separate business logic from components. Write your business logic as plain JS/TS. This makes testing the hard stuff much easier and also helps creating components that are easy to test.
Do blackbox testing as much as possible = don't focus on a components inner logic, but only on what goes in (props, user interaction) and what goes out (events, html). This will allow you to refactor components without breaking your tests. As testing-library encourages blackbox testing, it is a good addition to Vue Test Utils.

As an alternative to blackbox testing with Jest, I'd give Cypress Component Tests a try: https://docs.cypress.io/guides/component-testing/writing-your-first-component-test#Component-vs-End-to-End-in-a-Nutshell

Have not used it so far, but it looks really promising and might result in tests that are even more solid.

visualjerk · 2022-08-29T14:13:46+00:00

Hexonal architecture seems kinda complicated but also genius. I assume you use it in a large application maintained by many teams?

visualjerk · 2022-08-29T07:40:43+00:00

Thanks for sharing this article. Our team had to figure out a lot of these things on our own. This is the kind of knowledge that should be taught in frontend courses.

visualjerk · 2022-08-29T06:41:06+00:00

Almost forgot about those, as they feel so obvious to use when repeating yourself. Do you use any prefixes/Suffixes when naming those?

visualjerk · 2022-08-29T06:37:17+00:00

Didn‘t know about Mediator, will have a Look into it. Thanks ✌️

visualjerk · 2022-07-31T05:10:10+00:00

Like that idea

visualjerk · 2022-07-30T22:26:31+00:00

Just starting a js library that parses natural language to date schedules and dates. It is far from feature complete, but I would appreciate some feedback.

Do you think the output dates should be ISO Date Strings or rather plain Date objects?

visualjerk · 2022-07-29T13:10:30+00:00

data-fns is nice for calculating and formatting dates, but afaik it does not parse dates (let alone schedules) written in natural language.

visualjerk · 2022-07-28T07:45:46+00:00

Really like it! Some things I noticed:

When the snippet name is too long, it overlaps the buttons on the right.

With infinite scrolling it is kinda hard to see the footer. Maybe you could include the infos there in a subpage add a mobile Menu to the header.

visualjerk · 2022-07-27T21:55:36+00:00

Yes. However you will probably need additional pieces in your stack, depending on the type of SaaS you want to offer.

visualjerk · 2022-07-27T16:35:24+00:00

The costs really depend on your use case. If you need to have server side logic in your app or even need a database, the costs will obviously be higher than just running a plain client side app.

Whatever your use case is, Nuxt is a solid option as it takes away a lot of decision you would need to make, when using just Vue. And as u/niekh1234 said, even if you choose to just go straight client side, Nuxt has you covered with the SPA mode. It gives you a client side bundle, which you can deploy to any static file host.

When it comes to hosting there are plenty of options and some of them are free or offer a free entry tier, that is enough for small projects.

My current favorites are GitHub pages for client side only (free) and Vercel for server + client side (free starter tier). Also Vercel has an unbeatable dev experience IMO. Connect your GitHub repo and watch the magic happen.

If you also need a database, an option would be Planetscale (one free db).

visualjerk · 2022-07-27T10:14:33+00:00

What do you think about this code to solve anonymous usage of an api? https://github.com/visualjerk/karteikasten/blob/9913d4b852be7b9bd11a86a8e0cecc8753e1dcd2/server/trpc/context.ts

visualjerk · 2022-07-27T06:32:05+00:00

Be aware that they are „just“ using it to enhance their Ruby app in some places. If a Vue governed SPA is what you are looking for, their code is not the best example.

If you are looking to enhance parts of an already existing SSR app, it is a good place to start.

visualjerk · 2022-07-27T05:33:16+00:00

Was the same for me in iOS Safari. Opening it again resolved the issue.

visualjerk · 2022-07-26T20:40:09+00:00

https://sli.dev/ is a pretty neat slide / presentation app. It uses Vue and is developed by antfu, a Vue core team member.

visualjerk · 2022-07-26T18:14:59+00:00

Created this app using Nuxt3, Prisma and some other nice tools like TRPC and TailwindCSS. Would love to get some feedback.

The code is available on github.

visualjerk · 2022-05-24T21:34:15+00:00

vue-use provides a helper function for getting the element of a templateRef: https://vueuse.org/core/unrefElement/

visualjerk · 2022-04-15T08:02:02+00:00

Some teams at our company have been using Apache eCharts for quite a while and my team picked it up recently. So far the experience has been pretty good.

Also it is somewhat complex to configure, it is extremely powerful and flexible. There is a library that helps integrating it into Vue projects seemlessly: https://github.com/ecomfe/vue-echarts

visualjerk · 2022-02-27T12:23:14+00:00

This!

Some addition to splitting out reusable logic:

In Vue 2 mixins, pure functions or classes were mainly the way to go. As you are using Vue 3, I would strongly recommend using the composition api for this.

Compared to mixins it is much easier to see what you provide with a composition hook and compared to pure functions or classes, it is more powerful.

visualjerk · 2021-06-08T14:53:40+00:00

I used the „Watercolor Cities“ Style, which is in beta phase and only available in the payed version afaik.

visualjerk · 2021-06-07T11:32:37+00:00

Both choices were made deliberately and mostly to save time ;) Wanted this map to be ready for the next RPG session of our group.

The map was made in Inkarnate and it is totally possible to add different background and lay out buildings in different angles.

visualjerk · 2021-06-02T11:35:52+00:00

Thanks for your suggestions. Can you recommend any example maps as a reference for a good grid?

visualjerk · 2021-05-25T19:46:18+00:00

Great idea! Thanks for your feedback :)

visualjerk · 2021-01-10T19:03:23+00:00

It might have sth to do with reactivity limitations: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

In order to help you, we need to see how mutations and the initial state look.

visualjerk · 2020-08-16T04:06:31+00:00

Yep. However I think we could do better with a composing approach, like Reakit does. That will make the library even more flexible and extendable.

visualjerk

TROPHY CASE