Refactor Frontend #140

New Issue

2024-02-17T22:26:51+08:00

MarcelCoding commented

2024-02-17 22:26:51 +08:00

(Migrated from github.com)

Hi, I would be interested into refactoring the frontend. Would you accept pull request for the following things?

Things I would start with:

migrate to vite (modern and fast toolchain, generating of modern javascript)
add dark mode

EDIT:
Here are my first changes,
so far I migrated to vite.
https://github.com/MarcelCoding/alice-lg/commits/vite/
I'll try to split it into many commits to make the review simple.

Hi, I would be interested into refactoring the frontend. Would you accept pull request for the following things? Things I would start with: - migrate to vite (modern and fast toolchain, generating of modern javascript) - add dark mode EDIT: Here are my first changes, so far I migrated to vite. https://github.com/MarcelCoding/alice-lg/commits/vite/ I'll try to split it into many commits to make the review simple.

MarcelCoding commented

2024-02-18 06:34:03 +08:00

(Migrated from github.com)

Considering the usage in sorting of IpToNumeric the implementation for shortened ipv6 addresses is wrong?
c384a5316e (diff-8ad2792e3f790bed6cc49931033f81d29351fe17ce612b93b2b7410298e530cfR6-R8)

Considering the usage in sorting of `IpToNumeric` the implementation for shortened ipv6 addresses is wrong? https://github.com/MarcelCoding/alice-lg/commit/c384a5316ecf5804be83f5bd786a3257453189a4#diff-8ad2792e3f790bed6cc49931033f81d29351fe17ce612b93b2b7410298e530cfR6-R8

annikahannig commented

2024-03-05 22:54:44 +08:00

(Migrated from github.com)

Hej!

Sorry for the late reply. I just saw the issue.
In general I'm open to changes, however I'm a bit reluctant to add dependencies.

I just tried your vite branch:

I like the removal of sass as a dependency
I like the config being code. Being potentially able to easily set the proxy target in dev via ENV is very intriguing. (I tried this a couple of times with the webpack server and it was always a pain.)
The produced code size does not really make a difference:
- css: 132k (vite) 124k (current pipeline)
- js: 408k (vite) 412k (current)
Quite a lot of stuff seems to be removed as the build output in total is way smaller which is nice.
Build is faster: 3 seconds instead of 8 on my machine.

However, it's still another dependency to keep track of.
About typescript: So far I'm not especially fond of it, but willing to give it a try. (I do not like the aesthetics.)

But these are now two additional dependencies. :)

The last 10 years of JS have shown, that like a month IRL is like ages in JS, where a project is replaced by another project, which is already deprecated by another new project. This leads to projects just breaking for apparently no reason because some dependency broke or whatever.

This is why I try to keep dependencies to a minimum.

Long story short: I'm willing to try this. :)

Hej! Sorry for the late reply. I just saw the issue. In general I'm open to changes, however I'm a bit reluctant to add dependencies. I just tried your `vite` branch: - I like the removal of sass as a dependency - I like the config being code. Being potentially able to easily set the proxy target in dev via ENV is very intriguing. (I tried this a couple of times with the webpack server and it was always a pain.) - The produced code size does not really make a difference: - css: 132k (vite) 124k (current pipeline) - js: 408k (vite) 412k (current) Quite a lot of stuff seems to be removed as the build output in total is way smaller which is nice. - Build is faster: 3 seconds instead of 8 on my machine. However, it's still another dependency to keep track of. About typescript: So far I'm not especially fond of it, but willing to give it a try. (I do not like the aesthetics.) But these are now two additional dependencies. :) The last 10 years of JS have shown, that like a month IRL is like ages in JS, where a project is replaced by another project, which is already deprecated by another new project. This leads to projects just breaking for apparently no reason because some dependency broke or whatever. This is why I try to keep dependencies to a minimum. Long story short: I'm willing to try this. :)

annikahannig commented

2024-03-05 22:57:06 +08:00

(Migrated from github.com)

About dark mode: would be awesome!

MarcelCoding commented

2024-03-14 03:59:40 +08:00

(Migrated from github.com)

Ok, sound reasonable. I'll continue looking into dark mode. About this https://github.com/alice-lg/alice-lg/issues/140#issuecomment-1950461822 is it "real"?

annikahannig commented

2024-03-18 17:30:41 +08:00

(Migrated from github.com)

I just had a look at the ipv6 parsing function. looks wrong.

annikahannig commented

2024-03-18 18:46:53 +08:00

(Migrated from github.com)

I guess it should be something along the lines of:

function expandIpV6(ip) {
  const parts = ip.split(':');                                       
  const bin = [];                                                    
  const zero = '0000000000000000';                                    
  for (let i = 0; i < parts.length; i++) {                           
    if (parts[i] === '') {                                           
      let expand = 8 - bin.length - 1;                               
      for (let n = 0; n < expand; n++) {                             
        bin.push(zero);                                              
      }                                                              
    } else {                                                         
      bin.push(parseInt(parts[i], 16).toString(2).padStart(16, '0'));
    }                                                                
  }                                                                  
  return bigInt(bin.join(''), 2);                                             
}

(untested)

I guess it should be something along the lines of: ``` function expandIpV6(ip) { const parts = ip.split(':'); const bin = []; const zero = '0000000000000000'; for (let i = 0; i < parts.length; i++) { if (parts[i] === '') { let expand = 8 - bin.length - 1; for (let n = 0; n < expand; n++) { bin.push(zero); } } else { bin.push(parseInt(parts[i], 16).toString(2).padStart(16, '0')); } } return bigInt(bin.join(''), 2); } ``` (untested)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: malhuda/alice-lg#140