Tagged

JavaScript

A collection of 44 posts

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

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

TDX運輸資料流通服務平臺,是交通部為落實智慧運輸政策而制定的資料整合服務平臺。平臺上可以取得「公共運輸整合資訊」,包含公車、火車、自行車等等資訊,也可以取得「即時路況與停車資訊」,例如高速公路路況、高速公路看板上的資訊、各縣市停車場剩餘車位數等等。TDX 平臺也提供了路段編碼、圖資定位等服務,例如輸入經緯度得到這個地點的路名、輸入地址取得經緯度服務等等,基本上所有跟交通有關的 API 服務都整合起來了。

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

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

一直想找個機會開始,整理一些不錯的文章起來,也逼迫自己看文章。擇日不如撞日,就今日吧。怒挑幾篇創刊啦!

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

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

還記得之前的活動「The F2E - 前端修練精神時光屋」嗎?我們在活動中期製作了一個匯集每位 UI 設計師投稿的作品牆,而這些東西是怎麼做出來的呢?

前後端渲染以外,前後端驗證有什麼不同?
鐵人賽JavaScript程式React

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

昨天講了前後端渲染的差別,其實除了渲染以外,許多像是驗證的動作也是在前端、後端都可以做的。這篇來講講在前後端驗證有什麼不一樣。

Client-side Render 和 SSR 的差別
鐵人賽網路httpGoogleReactJavaScript

Client-side Render 和 SSR 的差別

Client-side Render 和 Server-side Render 在實作起來究竟有什麼差別?Debug 時有什麼不一樣,對 SEO 又會有什麼影響呢?

Ngrok:讓本機測試時也能有 HTTPS 憑證
鐵人賽程式JavaScript軟體

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

前端在本機測試時,通常已經不至於直接點開 HTML 檔案,而會搭配 webpack-dev-server 等套件做測試;後端也可以使用 nodemon 等套件測試,但預設的網址通常都是 http://localhost:3000,要怎麼加上 HTTPS、甚至讓別人也能看到呢?

API 實作(四):實際串上 MongoDB 資料庫
鐵人賽LinuxVPSDatabase程式JavaScript

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

之前有提過,MongoDB 的 Schema-less 特性、加上 BSON 結構很適合拿來用 Node.js 寫個 Side-project,所以今天要拿之前的 API 範例,實際串上 MongoDB 資料庫。

MongoDB:開源、好上手的 NoSQL 資料庫
鐵人賽VPSLinux程式JavaScriptDatabase

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

MongoDB 是個開源的 NoSQL 資料庫,由於你不需要花很多時間先制定每張資料表要長怎樣、畫出 ER Model,因此不管是用來做 Side-project,還是用來塞大量資料都很適合。

使用 pm2 管理 Node.js 服務
鐵人賽VPSJavaScript程式Linux

使用 pm2 管理 Node.js 服務

把服務部屬到主機後,如何讓服務保持執行,甚至在主機重開機後都會自動執行呢?通常我們會用 pm2 來管理 server 上的 Node.js 服務。

API 實作(三):以 Postman 測試 API
鐵人賽程式JavaScriptAPIhttp網路

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

寫完 API 以後,要怎麼確定 API 是符合文件、符合預期的呢?除了用瀏覽器寫表單慢慢測、或是用 curl 工具測試以外,還有更直覺簡單的方法:Postman。

API 實作(二):以 Koa 實作 RESTful API
鐵人賽程式JavaScripthttp網路API

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

透過 Koa 來寫 Web 框架,很輕鬆就可以寫出一個 RESTful API。這篇會示範如何以 koa-router,寫一個簡單具有 CRUD 功能的 RESTful API。

Koa.js:簡單好用的 Web 框架
鐵人賽程式JavaScripthttp網路

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

這幾年 JavaScript 已經不只可以寫前端,也可以寫後端程式。如果說要用 JS 來寫後端程式,第一個我會推薦 Koa.js。

nvm:快速安裝、切換不同版本的 Node.js
鐵人賽JavaScript程式Linux

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

nvm 可以用來安裝 Node.js,如果有需求測試不同版本的話,也可以安裝多種版本、隨時切換不同版本的 Node.js。

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

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

透過 Now,你可以在任何時候把你的網站部屬到雲端主機服務,你不需要管理複雜的主機設定,全部都在 serverless 的服務上做到好,更重要的是它有免費方案!

用 create-react-app 快速打造 Progressive Web App
JavaScriptReactPWA精神時光屋程式

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

PWA 很棒,但 PWA 好像不好做?這篇帶你用很夯的前端框架 React 打造 Progressive Web App!

Chart.xkcd:畫出手寫漫畫風的圖表
JavaScript程式視覺化網路

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

平常要畫圖表的時候,應該會使用開源的 Chart.js 來畫互動式圖表。但是在跟大家長的一樣的圖表、或是自己加 CSS 之間做取捨,或許可以考慮用 Chart.xkcd 來畫出卡通樣式、手寫風的圖表。

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

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

Atwoods Law: "Any application that can be written in JavaScript will eventually be written in JavaScript. 任何能被 JavaScript 改寫的軟體,都終將被 JavaScript 改寫。

前端時光屋(一):用 Google Home 打造聲控番茄鐘
JavaScriptGoogle程式精神時光屋

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

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

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

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

覺得撰寫 Node.js 時有什麼效能瓶頸嗎?如果想讓它更快,可以試試看使用 C++ Addons 來撰寫模組。這種模組是用 C/C++ 來撰寫,最後可以當成一般的 npm 模組,在 JavaScript 中直接 require 使用。

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

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

年前有個朋友面試,遇到了同步和非同步的問題。這幾年 JavaScript 也從 callback,慢慢演進到許多非同步的解法。

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

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

JavaScript 的陣列中,除了常用的 sort、map 以外,其實還有 every、some。這兩個方法好像比較不常用到,寫篇文來講講怎麼使用,跟什麼時候可以使用。

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

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

取得像是開放資料這類別人的資料時,常常會遇到 CORS 問題,因此無法取得資料。這種問題除了去請原資料提供者開放 CORS 以外,還有什麼解決方法呢?

利用原生 JavaScript 計算各時區時間
JavaScriptHTML5JS 地下城

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

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