JavaScript Introduction
http://www.tutorialspoint.com/javascript/javascript_overview.htm 1930 年代 Alonzo Church 發明 lambda Calculus 時,對高階函式做了研究,John McCarthy 在 Lisp 實作高階函式與 First Class Function。函式性程式設計是宣告式設計的一部份,對應的命令式設計,則是描述如何達成結果。
https://medium.com/codex/7-javascript-libraries-to-increase-your-productivity-2bab032133f3 https://medium.com/@bajcmartinez/an-intro-to-javascript-modules-36c07c5d4c9c https://pjchender.blogspot.com/2016/05/javascriptiifesimmediately-invoked.html https://medium.com/@mahdhirezvi/10-super-useful-tricks-for-javascript-developers-f1b76691199b https://medium.com/@1sherlynn/how-to-handle-errors-in-asynchronous-javascript-code-when-working-with-callbacks-dcd32bca4b6b
var Citizen = function(name, country){ this.name = name; this.country = country; }; Citizen.prototype = { printDetails: function(){ console.log('Citizen ' + this.name + ' from ' + this.country); } };
JavaScript 沒有類別,物件實體從函式或物件建構而來。
http://pyright.blogspot.com/2010/10/javascript-attempt-zen-of-python.html
前端操作介面測試範例 執行順序 listener
js-essentials-the-javascript-engine
meta http-equiv="Pragma" content="no-cache" / meta http-equiv="Cache-Control" content="no-cache" / meta http-equiv="Expires" content="0" /
https://medium.com/@thonly/algorithms-in-javascript-b0bed68f4038 write-better-code-with-the-ternary-operator navigating-equality-comparitors-and-sameness-checks-in-javascript awesome-javascript-destructuring-assignment https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77 Learn Front-End Web Development Course JavaScript Naming Conventions Dos Don'ts understanding-prototypes-in-javascript polyfilling-a-web-app-the-right-way how-to-sort-lists-on-your-website-using-helpful-stats lets-clear-up-the-confusion-around-the-slice-splice-split-methods-in-javascript “Callbacks: The Definitive Guide” by Kevin Ghadyani
Crossfilter, the JavaScript MapReduce library JavaScript isn’t the greatest language for data crunching. But that didn’t stop people, like the folks at Square, from developing MapReduce libraries for it. If you’re dealing with data, every bit of speed gain helps. You don’t want to send enormous loads of data over the internet or even your internal network though, for these reasons: * Sending a bulk of data will tax the network to the point where it will bother other users. * The browser is on the receiving end, and while loading in the data it will temporarily freeze. For small amounts of data this is unnoticeable, but when you start looking at 100,000 lines, it can become a visible lag.
removing javascripts this keyword makes-it-a-better-language here's why ES5 to ESnext heres-every-feature-added-to-javascript-since 設計缺陷 CRUD JavaScript is single threaded 這問題正由 Promises 試圖處理 Fundamental Info Practical JavaScript: Build a Strong Foundation for Web Development
如何看待 JavaScript 和其他語言的發展情況 ES5 (2009) 有大改版,ES6 則全面改版,例如 var 和 function 都被淘汰,exponentiation operator 也逐漸被替換掉。
tips: use "var"; use "==="; 想要維護 Browser 的 AJAX 相容性,最簡化方式是使用 try ... catch 程式碼來判斷例外和處理方式。
Map Reduce Filter 練習 Console 環境。全域變數通常不是好主意,試著建立物件及屬性。Generate Checkbox from Layers Array
function generate_checkbox(id_checkbox, lable_name, html_element) { var checkbox = document.createElement('input'); checkbox.type = "checkbox"; checkbox.id = id_checkbox; var label = document.createElement('label'); label.htmlFor = id_checkbox; label.appendChild(document.createTextNode(label_name)); html_element.appendChild(checkbox); html_element.appendChild(label); }
JavaScript Scope
Variable Scope JavaScript Closures: Resolution of Property Names on Objects, Identifier Resolution, Execution Contexts and Scope Chains
通常 this 代表 Identity Fucntion,依照 Neighborhood 的進入方式,有四種解讀情境。Basic Project Tutorial
Private Members are made by the Constructor. Ordinary vars and parameters of the constructor becomes the private members.
推薦讀物 HTML5 之前與之後的不同作法: URL Hash 與 History API
Isomorphic JavaScript: The Future of Web Apps
Backbone Intro Full Stack Web Development with Backbone.js
Parallax Scrolling: Themeforest Example 20 Best Sites of 2013 Django + React.js Django + Vis.js 良葛格介紹 VanillaJS knockout: MVVM pattern
JXA: JavaScript for Automation Chrome Case
Bresenham's Algorithm in JavaScript: Draw a Line
Build Desktop App with HTML CSS JavaScript
Security
Sensitive Information: GTM is a handy way for people you've never met to inject JavaScript into your site without the hindrance of a code review.
https://medium.com/@codingsam/awesome-javascript-destructuring-assignment-55fd2e9d3dc4
console.log(NaN || 1-"1" || 1+"1" || 1*"1")
|| 並不是 bit operation,它是個 logic or 的概念。NaN 是被當成是 null or undefined 一樣當成是 false。而 || 運算可以想成是從左到右,執行每一個運算式,直到有一個是 true 為止。
所以 1*"1" 就不會被執行了 1+"1" 的結果 "11" 就被傳回
要注意的是 JS 的 + 和 - 是完全不同的東西。+是可以 overload 的 operation,它對於數字,字串,物件會做不同的事。而 - 就是一個數字運算。所以 1+"1" = "11" 但 1-"1" = 0
Plone Cases
Approve Use of React.JS in Core, Deprecate Backbone.JS
Most developers would use an add-on and return the AJAX response. Or, you can do it TTW with page template just fine.
jQuery
D3.js
https://mermaidjs.github.io/ gannt 入門範例 quick course Create Bar Chart
FireBase, AngularJS, Plone: part 1, part 2 code by Balazs Ree: FireBase provides your front-end with persistent and shared real-time data out of the box, letting you focus on your application. Both external agents and custom authentication are supported. The Firebase traffice does not enter your application server, that means it's working with any Python based Web server.
intro firestore example setup python-firebase
Simple Real-time Presence Portlet
Full-Stack JavaScript CommonJS vs AMD vs RequireJS Manually Disable AMD Loading: collective.js.datatables
Module Loader
RequireJS CommonJS 與 Asynchronous Module Definition (AMD) 關係
Modular 是 Frontend JavaScript 設計模式,技術規範有 AMD 和 CommonJS 兩種,可以用 RequireJS 或 Browserify 程式庫來實作。
Node.js
Grunt 透過 npm 安裝,有個 grunt-cli 模組提供命令列程式,執行時,會利用 require() 來搜尋 Grunt 安裝資訊,找到後會載入 Gruntfile 的設定內容。
Web Application Framework: Express
Building RESTful API Using Node and Express 4
A progressive Web application with Vue JS, Webpack & Material Design #1 #2 #3
前端框架的歷史 view = f(state) https://levelup.gitconnected.com/learn-web-development-in-2019-aecb6dfb3e51 Frameworks Performance Comparison
Angular.js
What's Wrong: 使用 HTML 來描述程式邏輯與結構,對初學者具吸引力,但開發者被迫與 HTML parser 一起除錯,Dirty Checking 和 HTML Parsing 目前效能不佳。
Migrating an Angular 1.x App to Vue 2.x
React.js
簡介 入門教學 核心概念 圖表分析: Re-render everything on every change, Virtual DOM, Synthetic Events o3 blog 自製 medium.com
函式思惟: f(state, props) = UI Fragment
React and Flux: Building Applications with a Unidirectional Data Flow: Code Sample Building UIs with ReactJS RealTime Voting
Flux 是 Application Architecture,Facebook 用來建置客戶端應用程式,比較像是 Pattern 而不是正式的 Framework,分成 Dispatcher、Store、View 三部份,細部地看 Action 可被視為更新流程的第四部份,Flux 導入 Unidirectional Data Flow 來避免 MVC 架構。
Material UI: A CSS Framework and a Set of React Components that Implement Google's Material Design
Redux 是 JavaScript App 的 State Container
CommonJS 是 NodeJS 的 Module System,
AngularJS vs Ember.js vs React.js React.js vs Vue.js
Plone Integration Idea UI Toolbar
Chatroom create-react-app Definite Guide to Handling Errors Gracefully
Scaffolding Tools
Exploiting Developer Infrastructure
JavaScript-compatible Language: Imba
Callbacks
Regular functions sometimes lack return values, but with async callbacks, if you return a value, that value usually goes nowhere. It’s actually possible to grab a hold of these return values, but only when your callbacks are synchronous. You’ll see this kind of synchronous callback behavior all over the place in promises, observables, and even Array.prototype functions like map, filter, and reduce.
Dialogflow 基本上就是 text parser + intent matching + parameter extraction,後端邏輯他有整合,直接靠 Cloud Function, 應可以整合 firebase