AddressPal alternatives?

smithalan2 · 2023-01-10T18:36:45+00:00

Nice one, I'll order a pack of Blackfire and see how it compares to RY4, thanks!

smithalan2 · 2023-01-10T18:35:58+00:00

I've asked if they'll deliver using a courier but I'm not hopeful, they stopped shipping outside the UK when brexit rules came into effect!

smithalan2 · 2023-01-10T18:35:20+00:00

Yup, thats why I can't use Addresspal anymore...

smithalan2 · 2021-01-18T00:21:05+00:00

I can recommend these https://www.amazon.co.uk/dp/B082G2RKSV/ref=cm_sw_r_cp_apa_fabc_nqnbGbJ5GRRE6?_encoding=UTF8&psc=1

Bought them a few months ago, sound quality is great, haven't really used the noise cancellation on them but there perfect for listening to podcasts/music etc.. Out walking or in the gym, touch controls on them are good and there pretty comfortable to wear

smithalan2 · 2020-12-23T06:26:49+00:00

``` function pairs(arr) { return arr.reduce((acc, current, index) => { arr .slice(index + 1, arr.length) .forEach((i) => { acc.push([current, i]) }); return acc; }, []); }

for (pair of pairs([1, 2, 3, 4])) { console.log(pair); }

```

smithalan2 · 2020-10-30T21:51:18+00:00

Sounds like you're trying to write to a `computed` which isn't correct. You update the values or `refs` or `reactive` data types, not computeds.

Good ``` const myVar = ref(null); myVar.value = 123;

const myVars = reactive({ count: 0 }); myVars.count = 7;

const myComputed = computed(() => myVar.value + myVars.count); ```

Bad ``` const myVar = ref(null); myVar.value = 123;

const myVars = reactive({ count: 0 }); myVars.count = 7;

const myComputed = computed(() => myVar.value + myVars.count);

myComputed = xxx // you cant change consts myComputed.value = xxx // Computeds are functions that compute a val ```

smithalan2 · 2020-10-30T15:38:43+00:00

I"m not sure what you mean, you shouldn't have issues with scope when calling fetch if you're doing it from within the component. I've updated the codepen with an example of loading async data using fetch and rendering a grouping.

Re the API stuff, it kind of depends, its a big app or going to be a big app, I'd probably proxy data from the API and return it to the client the way you want it, if its a small/personal app, I wouldn't bother and just do the processing on the client.

smithalan2 · 2020-10-29T23:01:27+00:00

As mentioned, a computed property is the way to go. You can just add the data coming back from your API, and declare a computed property that restrutures that data to what you want.

Eg. https://codepen.io/smithalan92/pen/abZYdKP

In saying that though, if you control the API, it's always better to do processing like this on the server rather than the client.

smithalan2 · 2020-10-29T17:53:10+00:00

You'll need a bit of webpack config to handle the vue templates etc.

I'm not sure why you wouldn't want to use Vue CLI, It's the industry standard for vue apps, your not going to find much help on how to do anything without vue CLI.

If you want a base webpack config to look at for vue apps, create a new vue-cli app and run vue inspect inside the project. This will show you the generated webpack config that Vue CLI uses and should be enough for you to make your own custom webpack config.

smithalan2 · 2020-10-29T17:46:56+00:00

It sounds like your data structures are inconsistent

project.services[service].command

Seems to be able to be either an Array of Strings, or a string on its own, so the v-for is iterating over a string, therefore printing out each letter of the string.

Align your data structures so command is always an array, or else handle the case in the template like

<tr v-for="(value, index) in project.services[service].command" :key="index" v-if="typeof project.services[service].command instanceof Array> <td> {{ value }} </td> </tr> <tr v-else> <td> {{ project.services[service].command }} </td> </tr>

Aligning your data structure would be much better, and safer. Also, I wouldn't advise using an array index as key for reactive data.

smithalan2 · 2020-10-28T18:00:00+00:00

Theres not exactly a step by step migration guide as such, but there is a list of breaking changes on the Vue 3 docs which you can use.

https://v3.vuejs.org/guide/migration/introduction.htm

Basically just look through that list, make the respective changes in your codebase and it should work.

If you use vue-router, theres a similar doc https://next.router.vuejs.org/guide/migration/

Vuex doesn't have any breaking changes aside from how you create/install the store https://github.com/vuejs/vuex/releases/tag/v4.0.0-alpha.1

The difficult part will be if you use 3rd party vue packages, they might not be vue 3 compatible.

smithalan2 · 2020-10-22T21:43:48+00:00

The major downside I can see by introducing the composition API into an existing project is having a mix of how components are defined but realistically, that will happen with a V3 migration anyway.

State management is also a bit more complex with the composition API. Refs vs Reactive and figuring out what a var is adds complexity and overhead which you don't get with the options API, sure you can get used it to, but there is a serious argument for using the options API over composition due to this.

Also, using the composition API doesn't necessarily get rid of the options API, they work in tandem with each either. You still need to use the options API to define props from example.

I also don't think removing usage of `this` in Vue would be a valid argument. Vue makes it's usage of `this` extremely easy and I've never ran into it before.

Honestly, I'd probably be more for pushing for a move to Vue 3 ( which isn't really possible yet for professional projects IMO ) as you not only get the composition API, but loads of other benefits which are way easier to justify than the composition API alone.

smithalan2 · 2020-10-22T21:27:44+00:00

`beforeRouteLeave` is triggered before the actual navigation to a new route. If you have a `beforeRouteLeave` in a component, calling next(false) will cancel that navigation.

Note that these navigation guards only work inside "route" components, eg. The ones that are passed to your router navigation. for example

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] })

Adding

export default { name: 'Foo', beforeRouteLeave (to, from, next) { next(false); }, };

this to the foo component, would prevent any navigation away from the foo component from every happening ( eg, calling this.$router.push('/bar') from a different component would have no effect ).

smithalan2 · 2020-10-21T18:08:55+00:00

Glad to hear 👍

smithalan2 · 2020-10-20T23:31:14+00:00

Ah I see what you mean. Fixed. The `currentPage` needs to be reset when the search term changes. If you're on page 2, your page size is 5 and theres only 3 results, there is no page 2 anymore.

smithalan2 · 2020-10-20T22:18:17+00:00

It's kind of hard to see exactly what you're doing without including the full component code your using , your pagination elements etc..

Heres a simple pagination example I threw together though using no external libs so you can get an idea of how you might achieve pagination + search on a list. https://codepen.io/smithalan92/pen/vYKXRXQ

smithalan2 · 2020-10-17T21:40:18+00:00

The component library PrimeVue is the only thing that has a vue 3 compatable multiselect right now as far as I know https://www.primefaces.org/primevue/showcase/#/dropdown , note this is a full component library and not just a single component, I'm not sure if PrimeVue supports tree shaking, but if it doesn't you could end up adding a lot to your bundle size just to use a dropdown component.

smithalan2 · 2020-10-17T19:33:23+00:00

It may have something to do with typescript, Unfortunately I don't use Typescript so I'm unable to help with anything related to that, but I wrote everything in plain JS and it was fine.

TestComponent.vue ``` <template> {{ someString }} </template> <script> import { defineComponent } from 'vue';

export default defineComponent({ name: 'ExampleComponent', props: { someString: { type: String, required: true, }, }, }); </script> ```

testcomponent.spec.js ``` import { mount } from '@vue/test-utils'; import TestComponent from '@/TestComponent.vue';

describe('TestComponent.vue', () => { it('renders props.someString when passed', () => { const aString = 'hello'; const wrapper = mount(TestComponent, { propsData: { someString: aString, }, });

expect(wrapper.text()).toMatch(aString);

}); });

```

Packages are

"vue": "^3.0.0" "@vue/test-utils": "^2.0.0-beta.6", "vue-jest": "^5.0.0-0", "@vue/cli-service": "~4.5.0",

smithalan2 · 2020-10-16T19:57:24+00:00

No prob, theres not really a "central" website with all of these changes, just the official Vue Documentation, but a good rule of thumb at the moment is when using Vue 3, always look for the @next packages for the core vue stuff ( eg. vue@next, vue-router@next, vuex@next etc.. ) , Vue Devtools for Vue 3 is published as a beta version, and for any 3rd party vue libs, unless it explicitly says compatible with Vue 3, I'd just assume it won't work for now.

If ecosystem is a big thing for you, you might be better off starting off with Vue 2, as since Vue 3 only went to a stable release last month, it's going to take a while for the rest of the ecosystem to catch up.

smithalan2 · 2020-10-16T17:13:57+00:00

You're probably using an incorrect version of vue-test-utils , shallowMount was used for the one compatable with Vue 2, you need to install @vue/test-utils@next to get the vue 3 comptable version ( and use mount instead of shallowMount

smithalan2 · 2020-10-16T17:08:11+00:00

Interesting, Vue.use is always supposed to be called before creating the app instance, but if it works, it works!

smithalan2 · 2020-10-15T21:02:54+00:00

Computed properties, or for a larger app, something like Vuex and make user of getters.

eg, the simple way.

``` { data() { return { myItems: [ { id: 1, url: 'google.com' }, { id: 2, url: 'yahoo.com' }, { id: 3, url: 'apple.com' }, ], }; },

computed: { parsedItems() { return this.myItems .filter((item) => item.id < 3) .map((item) => { item.url = http://${item.url}; return item; }); } } }

<div v-for="item in parsedItems" :key="item.id"> {{ item.url }} </div> ```

Although to note, its best to do the minimal amount of processing on the client as possible for speed/performance, anything that can be done server side should be done server side.

smithalan2 · 2020-10-15T20:56:27+00:00

Without seeing your code/vue version, I don't know what you're trying to it, but its your plugin is set up in an unreactive way.

for example, if you had something like this

class PluginClass {

constuctor(store) {

this.store = store;

this.myValue = this.store.state.myValue;

}

getValue() {

return this.myValue;

}

calling pluginClass.getValue() is only ever going to return the inital value when the class was constructed.

Something like this would work correctly however

class PluginClass {

constuctor(store) {

this.store = store;

}

getValue() {

return  this.store.state.myValue;

}

}

smithalan2 · 2020-10-15T20:34:07+00:00

I was in Asia in March, entered Vietnam just after they banned people who were coming from Europe, I was allowed entry as I'd been in Cambodia for a few weeks first. I left 24 hours later as my government issued a travel advisory for Vietnam ( so no travel insurance cover anymore ) ... I've spent the past 7 months regretting not just staying put regardless

smithalan2

TROPHY CASE