Javascript

nodejs Cannot find module xxx 解法

在使用 nodejs ,時常遇到版本無法支援的狀況,導致會出現找不到相關模組的情況

例如: Cannot find module ‘github-url-from-git’

處理的方式分別有以下幾種

Continue Reading

單頁應用程式的登入權限驗證 - 開源標準規範 JSON Web Tokens

在一頁式網頁架設登入系統通常是一件非常麻煩棘手的事情,

在一開始要思考的是該挑選哪個主流框架 Angular、React或Vue…

然後開始建立一個前後端分離的架構,只透過RESTful API來進行溝通,

在這樣的架構下,搭建CMS相當容易,前端通常只需要取得資料後,進行render出來即可,

##SESSION BASE 無用武之地 如果要建設會員或管理者權限功能,傳統 session-based 的權限登入方式相當簡單,

但是在透過 RESTful API 應用的框架中,session-based的方式則行不通,

此外,單純使用SESSION的情況,也必須解決資料跨 Server 的問題

Token

Token是一串加密字串,並儲存在前端, 當使用者再次操作時,就能在後端從資料庫中比對token, 檢查是否為有效的使用者, 但是這樣的查詢也會產生伺服器的負擔

Continue Reading

瀏覽器語言偵測

Language of the browser: zh-TW var x = "Language of the browser: " + navigator.language; var txt = ""; txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.

Continue Reading

基本型態 Typescript - Basic Types [中文]

安裝typescript

npm install -g typescript

接著測試看看是否能正常運作 先建立一個 helloworld.ts 內容寫入

let hi: string = "helloworld";

接著在下指令

tsc helloworld.ts

如果有產生一個對應的helloworld.js 那就代表能正常運作

var hi = "helloworld";

#Basic Types 紀錄一些Typescipt基本型態用法,主要參考自Typescript官網 Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html

##Boolean

let isDone: boolean = false;

##Number 在typescirpt中,所有numbers都是以符點數來表示,因此可以支援十六進位、十進位、八進位、二進位數值格式。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Continue Reading

Content Security Policy 內容安全策略

https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/ http://www.ruanyifeng.com/blog/2016/09/csp.html Content Security Policy - 簡稱 CSP,是一個瀏覽器安全保護使用者的策略。 主要用於降低 cross-site scripting (XSS) 的風險。 網站傳送Header時﹑夾帶 CSP header 告訴瀏覽器哪些是合法的內容,哪些是不合法的。 在基本的規則中,Header meta name 命名為 Content-Security-Policy 接下來就可以定義規則 定義的方式可以依照你使用的環境及語法而定 首先可以直接使用HTML meta的方式來定義 例如: <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.

Continue Reading

AMP 加速行動版網頁 Accelerated Mobile Page

AMP 簡介 根據Google統計報告指出,載入網頁時間如果大於三秒,流失用戶的可能性就會大增, 因此,在 Google 在 2016 年正式推出了"加速行動版網頁"(Accelerated Mobile Page, AMP),以下簡稱 AMP, AMP 能讓跨裝置的使用者都能更快速的載入網頁,讓網頁能有更好的體驗, 只要根據官方的HTML結構進行設定,調整 html、js、css 設定, 再將頁面提交給Google DNS,Google就會將AMP頁面進行快取緩存, 當使用者搜尋你的網頁時,Google會先將快取裡的資料顯示給使用者, 依據官方資料顯示,經過AMP優化的頁面可以提高四倍的載入速度! 接下來就開始來了解 AMP 的原理~ AMP 結構說明 AMP可以分成三個部分 AMP HTML - AMP HTML基本上是使用定制AMP屬性擴展的HTML AMP JS - AMP JS 庫,主要是處理AMP HTML頁面的快速渲染 AMP Cache - 用於提供緩存的AMP HTML頁面 SEO 目前官方說明僅透露 AMP 設定不會影響SEO,

Continue Reading

2015 值得關注的3個 Javascript 庫

作為一個工程師,我們了解這行業的步調演變得非常快,超快。事實上,我們未必能夠即時跟上這些新的程式庫、框架及目前所使用工具的最新版本。但是,仍然必須保持動力,確保能夠繼續的產出,以符合老闆及客戶的期望。 新的一年已經度過了兩個多月,一些新趨勢也已經開始形成初期的規模。在本文中,將介紹三個值得在2015年關注的程式庫即框架。 React.js [React.js](http://facebook.github.io/react/),也可簡稱為 React,主要用於開發使用者介面。由 Facebook 及 Instagram 聯手打造出來。目前,由這兩家公司進行維護,使用者群包含有 Yahoo, Airbnb, Sony, Facebook及Instagram。 React.js並不是一個完整的框架,因此會找不到一些存在 Ember或Angular JS的功能。他所倡導的精神主要在產生可以重複使用的UI元件,可以根據時間來調用數據。也因為這樣,很多人都習慣將它是為MVC中的V。並且和Angular JS最大的不同處在於: Angular JS是使用雙向數據綁定,而React是偏向於單向數據綁定模式。 最重要的是,這個專案是以類似DOM的概念。 你可以用來設定元素,控制數據,以及調整頁面中的DOM。 You can think of it as a set of elements that you can modify with your data and which, in the end, will modify the page’s real DOM.

Continue Reading

Enhanced Use Case for single-node Node.js to Cluster Module

Improving single-node performance in Node.js is a common challenge developers face, as Node.js’s single-threaded nature can limit its ability to handle high concurrency or heavy load in some applications. To enhance performance, you can consider a variety of solutions and techniques. Below are some common methods:

Using Multi-process or Multi-threading Techniques

(1) Node.js Cluster Module: The cluster module in Node.js allows for multi-process applications, enabling each CPU core to run a separate Node.js process. This can significantly improve the application’s concurrency performance.

(2) Worker Threads: The built-in Worker Threads in Node.js help you take advantage of multi-core CPUs for parallel computation. You can use Worker Threads to handle long-running computational tasks without blocking the main thread, thereby enhancing concurrency handling.

(3) PM2 for Monitoring and Multi-process Management: Using PM2 to configure multi-process mode for starting and managing Node.js processes can improve the application’s stability and resilience. PM2 automatically handles process restarts, load balancing, and other settings, making it easier to manage Node.js applications in production.

In this article, we will focus on introducing the Cluster module.

Continue Reading