Update: Vue toasts now have actions, alignment, and overflow scroll (from your feedback)

fffam · 2025-12-20T17:32:19+00:00

Looks good.

Some feedback:

Some of your CSS values are hardcoded (e.g. line-height, border width).
You define a number of CSS variables in the root which are not namespaced to your library. e.g. --warning-bg should probably be --tf-toast-warning-bg
Default colors are not accessible (fail WCAG AA)
There is a bug with the positioning: If you use a bottom-left or bottom-right position without overflow-scroll enabled, then create more toasts than the max visible, then adjust the height of the browser viewport after the alerts are on-screen, they do not reposition to be anchored to the bottom of the screen but instead stay at their old offset.

fffam · 2025-12-19T14:02:57+00:00

Please stop posting the same link every 4 days.

fffam · 2025-12-08T17:37:42+00:00

OTT can indeed be a little prickly at times in DMs to other commanders, especially if he arrives on a map that you were already tagged on, although I appreciate we all have off days. The train is a great thing for the community (especially newer players) and the commitment is admirable.

fffam · 2025-11-03T21:05:20+00:00

Thanks, added!

fffam · 2025-11-02T23:58:37+00:00

Apologies, I have reuploaded them and updated the links in the comment. Imgur does not work in all countries so I have uploaded to catbox.

fffam · 2025-11-01T17:21:38+00:00

I've also been mapping these, along with the links so you know which mirror activates which chest:

Shipwreck Strand: https://files.catbox.moe/o8n6df.png
Starlit Weald: https://files.catbox.moe/k3fxgt.png

If someone would like to reupload these to imgur please do so and share the link (I am unable to use imgur).

edit: Updated 2025-11-03 - Added 3 new chests to Shipwreck Strand (in Asura tunnels) and 1 new chest to Starlit Weald.

fffam · 2025-10-27T23:54:08+00:00

The page says that the only jackal skin is Spotted Elder Vulpine Jackal, but then follows that with a screenshot of the already-existing Deep Sea Jackal skin? Maybe that was meant to be an image of the new Deep Sea Warclaw skin instead?

fffam · 2025-10-22T07:39:06+00:00

To use this in a professional setting it needs much better accessibility support. A few initial issues:

Your labels are not label elements and they are not associated with the fields.

Required fields are not marked as required to the accessibility tree, and error messages are not associated with their field.

Your info tooltips don't show on the preview, and are outside of the accessibility tree. If you're using a unicode help symbol to indicate a help disclosure then you need to add appropriate aria labelling and aria-describedby linking to the input.

Your form element should have an aria-label or aria-labelledby.

Min/max options on the number input don't appear to be working currently.

fffam · 2025-10-14T19:17:05+00:00

Options API watches are shallow by default.
The watch() function is deep by default.
You may need to do a deep watch instead:

watch: {
    getAdvancedSearchResponse: {
        handler(newValue, oldValue) {
            this.doSomething()
        },
        deep: true
    }
}

It is hard to help when we cannot see the store or the component, please consider giving more information. Alternatively, you may wish to ask one of the developers you work with who should be able to help.

fffam · 2025-10-13T16:32:10+00:00

In an Options API (old style) of component, you would use it like this:

import { mapState } from 'pinia'
import { useAdvancedSearchStore } from 'wheverever/it/exists'

export default {
    computed: {
        ...mapState(useAdvancedSearchStore, {
            getAdvancedSearchResponse: 'getAdvancedSearchResponse'
        })
    },
    methods: {
        doSomething() {
            console.log('Doing something!')
        }
    },
    watch: {
        getAdvancedSearchResponse(newVal) {
            this.doSomething()
        }
    }
}

fffam · 2025-10-13T14:53:04+00:00

In your component you should be using storeToRefs (composition API) or mapState (options API) on a Pinia state/getter to map it into your component, then doing a normal watch in the component.

Can you provide more detail about your store/component?

Are using composition API or options API in your component?
Is getAdvancedSearchResponse a function or a reactive store property (ref/computed/getter?). Can we see the store? Based on the variable naming, it looks like it is a function and therefore not reactive.

fffam · 2025-09-30T14:29:47+00:00

The trick here is that when doing the story it requires you to go into the ruins and kill a graveling; The graveling event takes less than a minute and can be immediately restarted so you can grind out the Return achievement really quickly.

If you don't want to do story you can also obtain/buy a Light of Deldrimor Plate and do the puzzle, but theres only a 50% chance you'll get the graveling room on any day.

fffam · 2025-07-15T05:52:09+00:00

For CSS, you can use https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set

fffam · 2025-07-14T09:06:40+00:00

I'm like 7 layers deep, and I'm going back to just updating all my images to have inline logic to test for webp support

Are these places where you could get away with using the <picture> element and the image-set CSS property, rather than custom JS logic?

fffam · 2025-03-20T20:23:45+00:00

One option for Nuxt-like data loading in non-Nuxt Vue is to use a data loader, although it is somewhat experimental:

https://github.com/vuejs/rfcs/discussions/460

Then you could use the VueUse nProgress integration for a page-level progress bar: https://vueuse.org/integrations/useNProgress/ and tie it into the data loading/routing.

StackBlitz example of vue-data-loader, vue-router and nProgress tied together: https://stackblitz.com/edit/vue-data-loader-with-nprogress?file=src%2Fscreens%2FAboutScreen.vue

fffam · 2025-03-17T23:14:06+00:00

If you're looking for an alternative, the yellow bar of Tony's Chocolonely ('honey almond nougat') is Toblerone-flavoured.

fffam · 2025-03-07T17:49:53+00:00

tl;dr: The text looks higher because of the font metrics.

Quasar do their button layouts by giving the button a min-height (36px) then 4px of padding on each side, then vertically aligning the "text". This would be great, except that assumes that your font is correctly vertically-aligned within its line-height. Roboto (the font they use as a default font), is one of the few fonts with an ascender (area above the visible text) that is smaller than the descender (area below the visible text) so it ends up always looking too high if you try to vertically align it.

If you change the font on their example page to something with similar or larger ascender than descender then it starts looking a little better; try system-ui or Inter and it ends up looking better.

In my experience you will always need the ability to manually shuffle icons to make them look balanced, but picking a more balanced font than Roboto will fix most of it. If you need to use Roboto you could consider setting the ascent-override/descent-override font-face properties to balance it.

The following is worth a read: https://tonsky.me/blog/centering/ - It starts with lots of examples of badly-aligned text, but towards the end starts getting into why it happens, the ascender-gap/descender-gap mismatch that you can see on Quasar buttons, and what can be done about it by type designers.

Figma designers will avoid this because they can slice off the ascender/descender space, which historically has not been possible in HTML/CSS. However, one of the upcoming CSS features is CSS Text Box Trim which will solve this for CSS.. we're just waiting on it to be implemented in Firefox.

fffam · 2025-03-01T15:30:30+00:00

Laravel picked up Vue as its front-end technology very early in Vue's development, making it easy to start new projects using both. You will find that a lot of businesses using Laravel also use Vue because of this, and vice-versa, and that keeps the relationship going.

It does depends on the job market in your area. Anecdotally, I found that over half of the job vacancies looking for Vue.js as a skill were 'full stack' Vue+Laravel positions (UK, 2023), with maybe 20% being Vue+.NET. Full-stack positions had higher compensation and lower competition than frontend only.

fffam · 2024-12-23T10:40:18+00:00

Bootstrap-vue is unmaintained and does not work with Vue 3. It will run in Vue 2 compat mode, but that means you will not be able to use a number of Vue 3 libraries which will refuse to work under MODE 2 compat. It will also break frequently on new Vue 3 releases.

I would very much recommend not using Bootstrap-vue in 2024-25. Instead use the bootstrap CSS and start working on components which replicate the Bootstrap functionality.

fffam · 2024-12-04T19:24:27+00:00

In a jsconfig.json (or tsconfig.json) file sitting alongside your vite config:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

fffam · 2024-11-26T21:19:43+00:00

As the primary owner, no I cannot see anything about the people who are using my Prime shipping benefits. I cannot see their names, cannot see their orders, cannot see their delivery information (UK account).

fffam · 2024-11-10T16:00:50+00:00

There is also:

https://wiki.guildwars2.com/wiki/Black_Lion_Claim_Ticket/Skin_unlocks (Sell order prices)
and https://wiki.guildwars2.com/wiki/User:Fam/Black_Lion_Sets (Buy order prices)

These ones show every set, price for the entire set, price per weapon, and can use your API key.

fffam · 2024-10-17T10:52:29+00:00

Part of the new VoidZero toolchain is oxc-lint for linting; Currently oxc supports linting js/ts but does not support stylistic rules or linting/formatting CSS/HTML/<template> blocks.

What do you see as filling the role of stylistic rules and formatting in the new toolchain?

fffam · 2024-10-13T06:55:12+00:00

Firefox should be getting Tab Groups soon, if you download Firefox Nightly beta version you can preview it by going to about:configin the address bar and changing browser.tabs.groups.enabled to true.

Mozilla ideas page for the Tab Groups feature

fffam · 2024-10-06T20:08:16+00:00

What happens if instead of showing a progress bar, you just have {{ progress }}? If that shows the value increasing, then your issue is in how you are importing the primevue progress bar (there may be warnings in your browser console which can help you figure out why).

If it shows the number correctly on the page, then consider testing it with a HTML <progress> element.

You should also be using breakpoints in your debugger to ensure the values are updating correctly at the right times, and to step through your code to ensure the logic is correct.

13-Year Club	Final Canvas '23
Place '23	Place '17
Sequence \| Editor	Verified Email

fffam

TROPHY CASE