Why do we need content preview? To reduce clinet anxiety. To show page style change in time. 截圖 2024-11-06 中午12.37.45 Methods 1. Copy page style and implement content preview directly in content editor export default function ContentEditor () { const [color, setColor] = useState('#FFFFFF')

CSR only Start from generating random hex string. function generateRandomHexString (numberOfBytes) { const radix = 16 const start = -2 return [...crypto.getRandomValues(new Uint8Array(numberOfBytes))] .map((m) => ('0' + m.toString(radix)).slice(start)) .join('') }

 Reason If your co-worker or client encounters weird behavior on production website in chrome that is misidentified as a bug, do NOT try to fix it but to ask more detail for his/her chrome settings first to recognize whether it's a user problem or not. Steps Reproduce the issue by steps on chrome with normal mode. Reproduce the issue by steps on different browsers by reproducing steps. 截圖 2024-07-31 中午12.59.04 Reproduce the issue on chrome with incognito mode.

Here is a memo for deployment. It skips lots of detail and only focus on nuxt3 project setup. I. Web App Project Settings First, get started with web project settings to understand how to start a server in dockerfile. Package.json There are there scripts required in deployment. build: Build nitro server in production. If there is variable that is not runtime env, pass it as env arg. start: Start nitro server in production. If there is variable that is runtime env, pass it as env arg.

 To start a new application, in order NOT to encounter CORS issue in dev mode, it's always crucial to handle api proxy setup if you need another third party backend service as source. Here is a quick guideline for beginners to setup. Flow There are two possible flows. I. Nuxt page

Just a memo for work. Package management Download brew. Terminal Download iTerm2 through website. Download oh-my-zsh through command. Download iTerm2 color scheme and apply on iTerm2. Download powerlevel10k and its recommendated font.

 1. What is it? TensorFlow.js is a library for machine learning in JavaScript Develop ML models in JavaScript, and use ML directly in the browser or in Node.js. 2. How it works? Run existing models Use off-the-shelf JavaScript models or convert Python TensorFlow models to run in the browser or under Node.js.

Since github doesn't support serving multiple github pages in a repo, we have to host static website outside of our project in some cases (e.g. multiple storybooks inside monorepo). How? Thanks for actions-gh-pages, it's easy to create a job to fulfill it. Remember to add a secret action deploy key which can be used to commit change in external repo. # ./github/workflows/pipeline.yaml name: One Pipeline on: push:

Command Check your terminal have bash or not bash version Show file content cat <file> Show file content reversely tac <file>

What is it? Excerpt from Cambridge Dictionary, a scratch card is as defined below.  a small card that you can buy to try to win a prize, with a thin layer that you rub off in order to see if you have winning numbers on it. Feature A scratch card which has 3 * 3 reward image list, the final reward for user will appears 3 times, as for other reward, they will appears 2 times or below.

Add a Google Analytics 4 property Search your UA ID in search bar and navigate to the UA dashboard.add ga4 property - step1 Click Admin at the bottom left corner of menu.add ga4 property - step2 Click GA4 Setup Asistant.add ga4 property - step3 Click Get Startedadd ga4 property - step4 Click Create and Continue.add ga4 property - step5 Select Install a Google tag and click Next.add ga4 property - step6 Select Install manually tab and click Done.add ga4 property - step7 Click Go to your GA4 property.add ga4 property - step8 Awesome! Now you have a new GA4 dashboard.add ga4 property - step9

What is Graphviz? Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. What is DOT? Abstract grammar for defining Graphviz nodes, edges, graphs, subgraphs, and clusters. Get Started with JavaScript Install dependency below.

As sprints go on, our CMS project becomes a huge project. But this application responses very slow due to very large app chunk and vendor chunk, and it might irritate clients because of the long time waiting for static bundle responding. There are two problems in our CMS: Too many unused pages are included in app chunk - In fact, there are only few of them might be invited for the first time. Lazy route can split page routes into multiple async chunks to minimize app chunk, only when user actually needs the page, web server serve the page js bundle for him. Too many unused third party dependencies included in vendor chunk - Not all the dependencies are important. For example: vue-code-diff is a large and rarely used dependency only for event change history page, then it's a worst strategy to add it in vendor chunk, since only user who invites this page requires this package. There are few strategies to resolve the struggle below. 1. Dynamic import page component

After sharing Reduce Initial Bundle Size for CMS with my teammates, my team lead finds out the way to add compress response middleware for gzip content encoding. In this method, we don't need to add CompressionWrbpackPlugin to generate .gz file or add compression module in our express server. Just add a configuration for Traefik middleware. Here are simple steps below. 1. Add Middleware apiVersion: traefik.containo.us/v1alpha1 kind: Middleware metadata: name: compress-response spec: compress: {}

Since JSTF (our frontend policy team) adds SonarQube for all FE projects recently. We have to get started with unit test for better code coverage in all projects. Any PR doesn't reach a goal of 60% coverage can't be merged. To reduce the pain and writing unit test in an efficient way, here are some common cases for jest and vue-test-util。 Jest Q: How to mock window? A: // TODO

Reason to use If you're developing web component ui library with Lit framework and some widgets have static string which requires localization in your project, it's recommend to apply official library @lit/localize which is minified and nested dom structure supported for developer. But for me, @lit/localize isn't matched my requirement. There are some reasons: The translation file is javascript or typescript generated from XLIFF file. If translation is executed by someone who is not a developer, It's hard for the user to edit XLIFF and build static locale translation files, and he might even have no permission for PR. XLIFF file isn't supported for our CMS which supports translators to create auto tranlation PR. We can only use specific file format such as JSON. Finally, I found a third party library called lit-translate and solve my problem on my work.

 Reasons to fix ESLint is a linter for javascript used for ensuring better smell of code, if we develop our application instead of fixing errors and warings already existed, bad practices will pass on, and one day we find there is an extreme error in our porject but it's already too late to fix. SOP Collect all the rules which are not passed. Keep a note when running the application to check what types of error occur.

InAppWebView 的功用好比 HTML 的 iframe， 提供黑科技讓我們內嵌網頁以解決某些特別棘手的問題。 來討論一下它的用途和如何使用。 先來個在杰難逃鎮樓。  為何使用 簡述一下使用場景：

 最近公司要打一個為期不短的黑客松， 因為同事跟我都是懶人，喜歡用全面又設計好的 UI-Kit 和一魚三吃 ( Android、 IOS、 Web App )，所以全公司的前端都要開始學 Flutter 了。  怕我之後要用會忘記，也順便幫一下還沒入門就放棄的新手，簡短紀錄哪些東西會用到。 安裝 Flutter SDK

提出幾個用 Riverpod 開發需要留意的常見問題， 歡迎大家提出更多坑讓我增加篇幅。 命名 Provider 變數加上 Provider 的後綴 (ex: XXXProvider) Notifier 變數加上 Notifier 的後綴 (ex: XXXNotifier) 理由是統一且你在組件 build 裡 ref.watch 時不會詞窮，統一命名其他人也比較好追蹤問題。 ref.read 和 ref.watch 的使用時機 ref.read：