JavaScript

A collection of 44 posts
TDX:運輸資料流通服務,以 JS 串接公車等待時間為例
程式JavaScriptAPI開放資料

TDX:運輸資料流通服務,以 JS 串接公車等待時間為例

TDX運輸資料流通服務平臺,是交通部為落實智慧運輸政策而制定的資料整合服務平臺。平臺上可以取得「公共運輸整合資訊」,包含公車、火車、自行車等等資訊,也可以取得「即時路況與停車資訊」,例如高速公路路況、高速公路看板上的資訊、各縣市停車場剩餘車位數等等。TDX 平臺也提供了路段編碼、圖資定位等服務,例如輸入經緯度得到這個地點的路名、輸入地址取得經緯度服務等等,基本上所有跟交通有關的 API 服務都整合起來了。
10 min read
怒挑幾篇(1):邊寫專案邊動架構,喝杯 JavaScript 咖啡
怒挑幾篇JavaScript開放資料

怒挑幾篇(1):邊寫專案邊動架構,喝杯 JavaScript 咖啡

一直想找個機會開始,整理一些不錯的文章起來,也逼迫自己看文章。擇日不如撞日,就今日吧。怒挑幾篇創刊啦!
2 min read
前端修練精神時光屋的動畫是怎麼做出來的?
程式JavaScript

前端修練精神時光屋的動畫是怎麼做出來的?

還記得之前的活動「The F2E - 前端修練精神時光屋」嗎?我們在活動中期製作了一個匯集每位 UI 設計師投稿的作品牆,而這些東西是怎麼做出來的呢?
3 min read
前後端渲染以外,前後端驗證有什麼不同?
鐵人賽JavaScript程式React

前後端渲染以外,前後端驗證有什麼不同?

昨天講了前後端渲染的差別,其實除了渲染以外,許多像是驗證的動作也是在前端、後端都可以做的。這篇來講講在前後端驗證有什麼不一樣。
4 min read
Client-side Render 和 SSR 的差別
鐵人賽網路httpGoogleReactJavaScript

Client-side Render 和 SSR 的差別

Client-side Render 和 Server-side Render 在實作起來究竟有什麼差別?Debug 時有什麼不一樣,對 SEO 又會有什麼影響呢?
4 min read
Ngrok:讓本機測試時也能有 HTTPS 憑證
鐵人賽程式JavaScript軟體

Ngrok:讓本機測試時也能有 HTTPS 憑證

前端在本機測試時,通常已經不至於直接點開 HTML 檔案,而會搭配 webpack-dev-server 等套件做測試;後端也可以使用 nodemon 等套件測試,但預設的網址通常都是 http://localhost:3000,要怎麼加上 HTTPS、甚至讓別人也能看到呢?
3 min read
API 實作(四):實際串上 MongoDB 資料庫
鐵人賽LinuxVPSDatabase程式JavaScript

API 實作(四):實際串上 MongoDB 資料庫

之前有提過,MongoDB 的 Schema-less 特性、加上 BSON 結構很適合拿來用 Node.js 寫個 Side-project,所以今天要拿之前的 API 範例,實際串上 MongoDB 資料庫。
3 min read
MongoDB:開源、好上手的 NoSQL 資料庫
鐵人賽VPSLinux程式JavaScriptDatabase

MongoDB:開源、好上手的 NoSQL 資料庫

MongoDB 是個開源的 NoSQL 資料庫,由於你不需要花很多時間先制定每張資料表要長怎樣、畫出 ER Model,因此不管是用來做 Side-project,還是用來塞大量資料都很適合。
4 min read
使用 pm2 管理 Node.js 服務
鐵人賽VPSJavaScript程式Linux

使用 pm2 管理 Node.js 服務

把服務部屬到主機後,如何讓服務保持執行,甚至在主機重開機後都會自動執行呢?通常我們會用 pm2 來管理 server 上的 Node.js 服務。
3 min read
API 實作(三):以 Postman 測試 API
鐵人賽程式JavaScriptAPIhttp網路

API 實作(三):以 Postman 測試 API

寫完 API 以後,要怎麼確定 API 是符合文件、符合預期的呢?除了用瀏覽器寫表單慢慢測、或是用 curl 工具測試以外,還有更直覺簡單的方法:Postman。
4 min read
API 實作(二):以 Koa 實作 RESTful API
鐵人賽程式JavaScripthttp網路API

API 實作(二):以 Koa 實作 RESTful API

透過 Koa 來寫 Web 框架,很輕鬆就可以寫出一個 RESTful API。這篇會示範如何以 koa-router,寫一個簡單具有 CRUD 功能的 RESTful API。
5 min read
Koa.js:簡單好用的 Web 框架
鐵人賽程式JavaScripthttp網路

Koa.js:簡單好用的 Web 框架

這幾年 JavaScript 已經不只可以寫前端,也可以寫後端程式。如果說要用 JS 來寫後端程式,第一個我會推薦 Koa.js。
3 min read
nvm:快速安裝、切換不同版本的 Node.js
鐵人賽JavaScript程式Linux

nvm:快速安裝、切換不同版本的 Node.js

nvm 可以用來安裝 Node.js,如果有需求測試不同版本的話,也可以安裝多種版本、隨時切換不同版本的 Node.js。
2 min read
Now:在雲端部屬你的網站、後端功能
ServerlessVPS網路ReactJavaScript

Now:在雲端部屬你的網站、後端功能

透過 Now,你可以在任何時候把你的網站部屬到雲端主機服務,你不需要管理複雜的主機設定,全部都在 serverless 的服務上做到好,更重要的是它有免費方案!
4 min read
用 create-react-app 快速打造 Progressive Web App
JavaScriptReactPWA精神時光屋程式

用 create-react-app 快速打造 Progressive Web App

PWA 很棒,但 PWA 好像不好做?這篇帶你用很夯的前端框架 React 打造 Progressive Web App!
5 min read
Chart.xkcd:畫出手寫漫畫風的圖表
JavaScript程式視覺化網路

Chart.xkcd:畫出手寫漫畫風的圖表

平常要畫圖表的時候,應該會使用開源的 Chart.js 來畫互動式圖表。但是在跟大家長的一樣的圖表、或是自己加 CSS 之間做取捨,或許可以考慮用 Chart.xkcd 來畫出卡通樣式、手寫風的圖表。
2 min read
任何能被 JavaScript 改寫的軟體,都終將被 JavaScript 改寫
JavaScript程式

任何能被 JavaScript 改寫的軟體,都終將被 JavaScript 改寫

Atwoods Law: "Any application that can be written in JavaScript will eventually be written in JavaScript. 任何能被 JavaScript 改寫的軟體,都終將被 JavaScript 改寫。
2 min read
前端時光屋(一):用 Google Home 打造聲控番茄鐘
JavaScriptGoogle程式精神時光屋

前端時光屋(一):用 Google Home 打造聲控番茄鐘

番茄鐘,是個不想工作或趕死線是很好用的工作方法:強迫自己工作二十五分鐘、休息五分鐘,提升專注力,降低自己亂逛社群網站看影片的可能性。但是通常找好的番茄鐘軟體就花了不少時間,再花點時間研究一下介面,不知不覺時間就過去了,不如弄個聲控的番茄鐘吧?
6 min read
Node.js 遇到效能瓶頸?試試 C++ Addons
JavaScriptC 語言

Node.js 遇到效能瓶頸?試試 C++ Addons

覺得撰寫 Node.js 時有什麼效能瓶頸嗎?如果想讓它更快,可以試試看使用 C++ Addons 來撰寫模組。這種模組是用 C/C++ 來撰寫,最後可以當成一般的 npm 模組,在 JavaScript 中直接 require 使用。
8 min read
我要學會 JS(三):callback、Promise 和 async/await 那些事兒
JavaScript程式

我要學會 JS(三):callback、Promise 和 async/await 那些事兒

年前有個朋友面試,遇到了同步和非同步的問題。這幾年 JavaScript 也從 callback,慢慢演進到許多非同步的解法。
5 min read
JavaScript 陣列中兩個冷門的方法:Every、Some
JavaScript程式

JavaScript 陣列中兩個冷門的方法:Every、Some

JavaScript 的陣列中,除了常用的 sort、map 以外,其實還有 every、some。這兩個方法好像比較不常用到,寫篇文來講講怎麼使用,跟什麼時候可以使用。
2 min read
解決 AJAX 沒辦法取得 CORS(跨網域存取)資料的問題
JavaScriptJS 地下城

解決 AJAX 沒辦法取得 CORS(跨網域存取)資料的問題

取得像是開放資料這類別人的資料時,常常會遇到 CORS 問題,因此無法取得資料。這種問題除了去請原資料提供者開放 CORS 以外,還有什麼解決方法呢?
4 min read
利用原生 JavaScript 計算各時區時間
JavaScriptHTML5JS 地下城

利用原生 JavaScript 計算各時區時間

之前有介紹過 Moment.js,透過它的 moment-timezone 套件,就可以很輕易地用來計算各個時區的時間。不過今天要透過原生的 JavaScript(Vanilla JS)來試著解決這個問題。
4 min read