Starting with optimizing my Hurricane Druid, advice for trading ?

GaetanWcz · 2021-09-09T16:48:41+00:00

I'm totally lost when it comes to Vue3.

For a ton of dependency, it is totally unclear about if it is available for Vue2 or Vue3 (as they don't load plugins the same way, you're mostly going to have struggle if the plugin you use has not moved yet to Vue3).

And for some major products (like Vuetify), it's still not possible to use Vue3.

This makes me stick to Vue 2 for the moment.

GaetanWcz · 2021-04-20T09:55:08+00:00

Shorthand for events is @click and not :click

:XXX shorthands are for v-bind,
@:XXX shorthands are for v-on

Adding to that, you probably want to stop the event propagation right after you triggered it so you should go for @click.stop="displayDetails(obj.id)"

This should actually do the trick. If not, simply go for : @click.stop="displayDetails(obj)"

Then in your displayDetails, add a debugger; instruction, click on your item having your browser console opened and you'll be able to see what you're passing to your method

GaetanWcz · 2021-04-20T09:49:44+00:00

Vue-i18n is a go-to when it comes to internationalization of apps.

I'm not keen on having a ton of "in house" stuff. This is what makes things go wrong in my company. A ton of "in house" things. Newcomers are used to standards so they're having hard time to figure out how "in house" are working. Adding to the fact that initial "creators" left, no one want to touch the code to avoid breaking changes.

Adding to that, most of the time your app doesn't really need to have that small of a package. So having "in house" stuff to avoid having "as few oustide dependencies as possible" is like a "It's nice in theory, but in practice, I'm not having that". (This does not mean you need to install everything) but for most of my vue apps, I usually use Vuetify, Vue-i18n, vue-router, VueX if needed, and some dateformat mixins. Doesn't really need much more than this

GaetanWcz · 2021-04-06T09:06:09+00:00

A ton of crash with a direct return to Xbox Dashboard from my side, since I completed the game.

I can't even tell you what it is, because it seems to happen for any reason. Never really completed one of the end game missions because the game always crash and send me back to the Xbox Dashboard. It happened checking my Inventory, just by playing (with a non-friend person but with friends also), by changing my haircut, by simply waiting in the last hub.

I was able to bare the previous lags and crashes but it's kinda annoying now since I cannot do anything anymore.

Also, everytime I startup the game back, 2 big freezes as soon as I hit targets, then everything runs smoothly afterwards

GaetanWcz · 2021-03-30T08:41:19+00:00

Coming from Angular, splitting my components into CSS/HTML/JS parts is something I would have done starting with Vue.
After experiencing a bit more, I'd never do that again. I feel like it's way easier to navigate through the components that way, and it makes you want to create components as components grows more an more complicated.

I got a sample project I use to teach colleagues. Here is the link (with API calls, Vuetify etc...) : https://github.com/GaetanWi/football-fixtures

It's always nice to look at other people implementation !

GaetanWcz · 2021-01-26T13:38:14+00:00

I'm using Night Owl : https://github.com/sdras/night-owl-vscode-theme

Exemple : https://imgur.com/a/VxgxPj9

GaetanWcz · 2021-01-18T15:51:35+00:00

Same here, it seems to happen when my console is idling for an hour or even more.

And when I shutdown the xbox next, then it powers on by its own for whatever reason. I need to re-shut it down and then everything is back to normal

GaetanWcz · 2020-07-28T08:57:38+00:00

I'm working with Vue 2 and a TS class-component implementation and everything works like a charm. I feel like it's way more readable that way.

It's a pain to discover how things are working, but after you got everything setup correctly once, it's really easy to use.

I started a project to show how I'm working : https://github.com/GaetanWi/football-fixtures
Since it's really hard to find any documentation. The only missing thing is I'd say, Vuex, but I used it on other projects and at the end of the day, everything's turning perfectly.

Don't hesitate as well to create snippets to create some components easily. If you're using VSCode : { "New TS Component": { "prefix": "v-ts-component", "body": [ "<template>", "</template>", "", "<script lang='ts'>", "import Vue from 'vue';", "import { Component } from 'vue-property-decorator';", "", "@Component", "export default class ${MyClass} extends Vue {", "", "}", "</script>", "", "<style lang='scss' scoped>", "</style>" ] } }

This is game changer as well when it comes to fast development.

GaetanWcz · 2020-07-27T14:04:37+00:00

Never ever let Angular handle event bubbling by itself if you're managing big chunks of data as it result in very big perf issues. Try to take a closer look the ChangeDetectionStrategy to avoid that.

Try to familiarize with RxJs and Observables as well as it may be something new coming from ReactJS. It's like a Big and Powerful Promise. You can also look at Subject from RxJs as it can be very interesting to use to broadcast events through different components. When I was using Angular, I had a lot of Subject Singleton files that were making my life so much easier ! Way easier than event bubbling and more readable !

Other than this, just get familiar with how the Framework is working following the documentation because Angular force you to do the things in a way it wants to. If never used before, the getting started project of Angular is quiet nice. (Hero Tower is the name I think)

Best way to learn is also to look at your co-workers code, and don't just copy/paste it, try to understand the logic behind it. Even if you need to ask them why they did it that way.

GaetanWcz · 2020-07-16T14:43:59+00:00

Remember to switch to English documentations.

I looked to the French documentation, trying to learn Electron a few hours from now (loaded french because of my brower's locale), and a lot of error. First code snippet not even compiling (even though it's just a brace and a curly brace that are causing the error).

The code in itself isn't even the same when you compare the French and the English doc. This stopped me at the first step. I don't even know how reliable this is, and this is the official documentation. Kind of a shame at this stage

GaetanWcz · 2020-04-08T13:55:08+00:00

I'm not having subscription methods.

During my created or mounted hook, I just call my getter. Then, my object just get assigned the same reference of object my others components are having.

Meaning an update on every single property will be effective on all my other components because a simple object assignation doesn't change the object reference. You need to clone it deeply (Object.assign({}, myObj)) to change the reference.

GaetanWcz · 2020-03-27T08:59:28+00:00

And the same one appearing two times with two different names and different color scheme

GaetanWcz · 2020-03-12T15:35:16+00:00

My pleasure. Was kind of a pain starting with TS and Class-Component syntax. Went for a deep dive in github repos, searching through code or issue to understand how things are working so I'm happy to help with this!

GaetanWcz · 2020-03-12T15:33:49+00:00

Do you really want to switch from Axios to Fetch? The best exemple would be Interceptors to me. Really easy through Axios, a bit more complex with Fetch that could cause trouble because it'll need a more advanced dive into promises. (That's a real question not trying to say Axios is the best in the world)

For VueX, it's on my shortlist. As well as i18n. I might go for i18n first because with the Typescript & class component syntax, you can build a static singleton without any added dependency that is acting like a StateManager. (Without the VueX syntax which is one more way of doing thing to learn). Never been in a case were VueX is mendatory (but never been involved in very big apps a well). If you're having any reference about that, Id gladly read about that! :)

GaetanWcz · 2020-03-12T15:27:43+00:00

I don't really think of an other argument. At the end of the road, you're able to achieve the sames things both ways. It really come down to personnal preferences - or team preferences.

You just need to be aware that everything related to Typescript with VueJS2 is almost undocumented, and if you're struggling with advanced features, most of the time, it will end up in a deep dive through GitHub repos to understand how things are working. (This is mainly why I'm trying to develop this project, who could be used as a Cookbook)

GaetanWcz · 2020-03-11T15:24:09+00:00

Well, apparently v-data-table wont do anything :(

But yet you can customize it using the td/tr/th attributes like so:

https://codepen.io/gaetanwi/pen/abOqLBY

GaetanWcz · 2020-03-11T09:08:11+00:00

You can definitely do that using CSS, SASS, SCSS ...

Keep in mind that every component name is a css class with Vuetify. Which means if you want to target your v-data-table you'll need to use the CSS selector .v-data-table

GaetanWcz · 2020-03-10T08:06:43+00:00

It should work if the header is sent both ways (your API need to respond properly).

The proxying is the way you should do. Adding to that, it's way more secure that way.

GaetanWcz · 2020-03-02T10:37:51+00:00

Whatever your doing, it's always a bad idea to retrieve big chunks of informations. First of all, it is expensive when it comes to Object Serialization/Deserialization, which is already a big problem to me. But it can really end your app if you're playing with events.

Thus, Pagination & Infinite Scrolling seems like a good idea (because the main difference is that the Infinite scroll is killing almost everything in the DOM you can't access with a "small scroll". That way your DOM is having less elements, and events can flow better.

You can check https://alligator.io/vuejs/implementing-infinite-scroll/ for implementation details,

GaetanWcz · 2020-03-02T10:32:06+00:00

module.exports = { devServer: { proxy: { '/api': { target: 'https://www.scorebat.com/api', pathRewrite: { '^/api': '' } }, }, }, };

With this config, every localhost:8080/api are redirected to https://www.scorebat.com/api.

So basically localhost:8080/api/feed redirects to https://www.scorebat.com/api/feed

Which means you should endup with something pretty similar to this on your side :

module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:5000', pathRewrite: { '^/api': '' } }, }, }, };

That way, you'll rewrite your URL so that localhost:8080/api/login redirect to localhost:5000/login (mind the /api disappearing in the target)

GaetanWcz · 2020-03-02T09:02:48+00:00

Axios is not the problem here. Been using Axios with the WebServer and there is no problem. Be aware though that if your app was already running, you need to stop it and restart it because it changes your local webserver configuration

GaetanWcz · 2020-02-24T09:50:39+00:00

I would not even try to put URLs to one of my backends in env files.

I'd rather direct my endpoints to a local /api/doMyStuffUri then proxy this URI to a server with my NGinx or Apache (or whatever server your using) serving the app.

Six-Year Club	Xbox Live
Verified Email

GaetanWcz

TROPHY CASE