Web dev 討論區 [1]

想請教下大家樣嘢

如果我想整個Web App，會用到一啲AI之類收費嘅API。我將API key直接放喺client side 黎call，同時用Cloudflare zero trust 限制要特定用戶經過電郵一次性驗證先會入到個網，而我假設特定用戶係完全可靠，咁我想知個API key有冇洩漏風險？

short answer:有

你deploy係邊先，deploy嘅platform 係咪完全可靠？

都係deploy喺cloudflare pages嘅一個spa，api key放喺env variable

我係覺得cloudflare zero trust既然喺網絡層面已經截住unauthorized request，咁應該都算安全？廢事又整個backend或者Cloud Functions之類嘅嘢無端增加cost

點解唔正正經經起一個 backend call 你個收費 api…，你放喺 frontend 個 api 任 call 好易俾人玩你，最好做做 rate limiting。

如果唔想自己起 backend，authentication 可以用 firebase， api call 用 lambda function

只要你key擺client 估計只要個user入到個網就有辦法拎到key

佢拎咗你個api key直接call收費api咪搞掂，你放cloudflare都無意思

咁佢已經假設用戶係完全可靠

google api key都係咁做, 放條key喺client side, set好邊個domain call到但前提係你個ai provider要支持呢種做法先得

但如果個user喺佢個網度開個devtool console，然後喺console call條api，request origin應該都會係佢個網的domain?

所以大型api嘅key會有permission scope同rate limit

想問新學react係咪直接用typescript學好D？定其實出面普遍都仲用緊javascript

出面應該普遍都ts ，就算唔用ts 都用jsdoc ，或者一齊用都有

係
react 用到嘅typescript 90%都係component props type
唔需要特別識好多syntax, 因為大部份時候都可以infer 到type
記住如果開新proj唔開strict mode不如唔好用ts
去到2024仲用pure js嘅公司=垃圾

frontend底 少迷茫想學上去
最近返工不斷接觸到db同aws
但每次都係掂好淺層嘅野
想自己加強backend到infra個底
應該點入手
係咪試下寫service先

另外用嚟自學嘅細side project應該點setup db最好？
nestjs+mysql+docker係咪最方便
aws又難自學

backend（照你nestjs+mysql+docker所講）其實分開幾個大類
1. application logic
2. DB (schema design + optimization)
3. Deployment

第一part就係你隨便用一個framework都好，你都可以寫API
efficient定唔efficient係一回事，你嘅usage會唔會去到efficiency影響到你嘅app logic又係令一回事。正常嚟講，如果你想學嘢，你可以如果nodejs寫完再用golang練習一次。咁第時要你用其他lang到可以應用到d transferrable skills

第二part，DB，我個人認為SQL界就postrgres，NoSql就Mongo係最多人用嘅production grade DB，唔會有死。99%嘅人都唔會係因為DB差而query慢，只會係ORM (講緊你啊Prisma)或者skill issue而有效能樽頸位，所以揀Postgres/Mongo都一定無問題。近年mongo已經support好多relation相關嘅功能（留比熟mongo嘅師兄補充下），你用得盡個DB再投訴都未遲

第三係devop。如果你係細project，自己push完自己去個ec2 pull+build+pm2 deploy並無不可，但當你開始考慮到zero downtime就需要用AWS ECS / k8s / digitalocean
其實個人認為k8s真係言過其實(雖然你無問，但backend+infra好多都想學k8s)，普通ecs/digital app platform已經可以做到無縫update，我d freelance都係開心使用中

利申返工用左兩年k8s，已考cka(78/100) (公司無資助)+ clad(90/100) (公司無資助)，希望大家唔好入k8s坑

結語
Start with anything (literally really anything) until you reach the limit (which is very unlikely). Congratulations if you really reach the limits.

hi樓主仲記唔記得我
近依半年跌跌撞撞咁自學
嘗試整左幾個web

最近用react起左個cart
希望咁多位比下意見小弟改進

https://fastidious-stardust-8a8a22.netlify.app/

無code評論唔到d咩
UI/UX上黎講，有以下幾點我留意到嘅野
1. multi column嘅野用fix width會好怪，我見到你用flex-wrap去做
個人經驗而言，flex wrap係比d比較細嘅component，唔同width嘅情況下可以wrap落下一行顯示，例如係multiple select嘅tags咁

主要嘅layout會比較多用grid-column-templates去responsive地控制幾多column。而家細width太多gap，大width唔夠gap就好怪

如果用以下css會靚仔d


2. Games下面個menu有個小gap，cursur郁得唔夠快就會閂左個menu，調教下margin或者用 https://floating-ui.com/ 可以解決到


你唔介意嘅話比個github repo我整個PR，大家一齊研究下　

其實唔係好多機會用em做size單位，因為em會根據最近上層嘅font size做基準，個意思亦唔明顯

除非你想個element係scale by current font size，否則用rem就可以

原來係咁，係自己部機睇唔到個gap。應該係自己直接用左top： px咁set


github here:

https://github.com/leowsy/gamecity

反而我呢邊幾多用rem, 你嗰度唔用rem會用咩

em 喎

整左個小pr

得少量版數同埋full client side SPA唔洗next js
普通vite template都足夠
routing 可以揀react router, 或者想future proof 可以用remix SPA mode
想新潮d 可以試tanstack start

orm 黎講prisma都可以，但2024開始多人推drizzle orm
睇你自己喜好