關於網路那些事...

Marketing, SEO, Web trends, Programming tutorial, Web design, and Life event...

React refs 屬性

所謂 Refs 就是官方不建議使用,又非得談的東西

React 典型的數據流是透過 props 在父子 Component (元件) 之間傳遞,

透過更新 props,透過新的 props 來 re-render 子元件

Continue Reading

Javascript Event Loop 介紹

Event Loop 是 Javascript 主線程循環處理任務列隊(task queue)事件的運行機制 Web Event Loop 單線程設計 Javascript 主線程是以單線程的方式設計 在主線程中,包含許多要執行的任務,可以分成同步(synchronous)及非同步(asynchronous)任務,會按照順序處理這些任務 同步的任務比較單純,會遵照上方的規則,在主線程一個一個接續處理 在處理非同步任務時,不會等待非同步結果,就會接續處理後面的任務 例如,我們執行非同步任務,完成發出 ajax (不會等返回結果).., 就會接續處理後面的行程 任務列隊(task queue)與 Event Loop Javascript 會優先處理主線程的項目,接著才會處理任務列隊(task queue)的項目 並且,讀取任務列隊的行為會不斷的重複,及稱之為 Event Loop 當我們一開始執行非同步任務,或者在後續才觸發的任務,都會被排入任務列隊中

Continue Reading

session, cookie 差異說明

Session: 儲存於伺服器端,不用擔心用戶禁用session的問題,但計錄檔案的負荷由伺服器承擔。 Cookie: 儲存於用戶端,可能有用戶端禁用cookie,但伺服器不需承擔計錄檔案的負荷。 HTML5 Storage HTML5 Storage 分別有 localStorage, sessionStorage, Web SQL Database, IndexedDB localStorage 保存時間較久,要等到javascript被清空或清除快取時,才會消失 但是不適合比較複雜的資料(僅支援JavaScript 字符串值,無法處理布林、數字….及二進位制數據),速度較慢,有性能的疑慮 sessionStorage 關閉瀏覽器或分頁Tab時,就會消失 IndexedDB 可用來建立及管理使用者用戶端裝置上的資料庫物件, IndexedDB與WebSQL都支援異步操作,性能好且支持大數據集 但是使用上較為複雜,在各瀏覽器支援度仍待加強

Continue Reading

聊 Javascript Prototype 設計特性

在javascript建立的基礎底層,都會透過 prototype (原型鍊) 來設計出許多預設功能

Continue Reading

響應式開發 - 主流螢幕尺寸及解析度介紹

開發網站需要留意各種解析度尺寸 這裡就整理一些常見的螢幕尺寸,在開發響應式網站 RWD (responsive web design) 時,可以直接拿來參考 液晶螢幕尺寸(吋) 畫面比例 解析度 15 4:3 1024768 17 / 19 5:4 12801024 19 寬螢幕 16:10 1440900 20 4:3 16001200 20 寬螢幕 16:10 16801050 21 4:3 16001200 21 寬螢幕 16:10 16801050 22 寬螢幕 16:10 16801050 23 4:3 16001200 24 寬螢幕 16:10 19201280

Continue Reading

Preact 基本介紹

Preact 是一個輕量級的框架(又一個坑),大小僅3kb Preact 類似 React API 及模式,可使用 ES6 Class及Function Component

  • 透過 preact-compat 就能簡單的兼容 React
  • 包含React所需要的功能: JSX, VDOM, React DevTools, HMR, SSR..
  • 高度優化和服務器端渲染
  • 可以透過 preact-cli快速建立專案
  • 支援 IE9 以上的主流瀏覽器

上面提到,可以透過 preact-cli 來快速建立 Preact Progressive Web App 專案 下面會介紹其特點、安裝及基本使用方式

Continue Reading

漸進式靜態網站生成工具 - React-static

React Static 是一個漸進式靜態網站生成工具,也是一個在server端渲染React 應用架構的框架,輕量且強大的架構可以滿足 SEO,完善的網站效能及兼顧使用者/開發者的體驗。

Continue Reading

React 隨筆- 使用 react-helmet 設定Title, Meta,...方式

React 所產生的單頁式網站預設只有一個 title、meta..

可以透過 react-helmet 套件來動態產生 title、Meta…

Continue Reading

如何升級 XAMPP 到最新版本

目前主流的框架都會建議使用 PHP7 以上的環境

這時如果XAMPP的PHP版本過舊,就要考慮升級

可以參考下方的升級程序:

Continue Reading

! Facebook 將降低誘餌式(engagement bait)貼文的觸及率

原則上,Facebook 秉持的重點仍在於減少垃圾內容,並促進有意義且真實的內容傳播

在過去,常見各種欺騙點擊的貼文,藉由聳動的標題來誘導使用者進入他們的網站,以賺取流量, 近期,則是常見另一種行銷貼文,用獎勵來引誘你來幫他們增加曝光量

Continue Reading

[學習] React Native Swiper 滑動輪播圖套件

推薦一款由 leecade 所發布的 react native swiper 套件,目前版本可以同時支援 iOS 及 Android,並且可以自定義樣式

Continue Reading

[教學] 如何將電腦的網路分享給手機

如何將電腦的網路分享給手機

目前手機普遍是透過電信公司提供的4G/3G行動網路服務來上網, 有些情況下,例如流量限制或收訊不良的情況下,還可以使用當時場所的wifi來使用網路, 但是,如果剛好在沒有行動網路或wifi的情況下,又需要使用手機上網時, 其實也可以直接透過電腦分享網路的方式,讓手機能連上網路

讓手機使用電腦網路

如何讓手機使用電腦網路,這裡以HTC手機來說明 由於各家廠牌可能設定方式會有差異,因此不保證可以設定成功

首先

Continue Reading

React Native Vector Icons 簡介

通常我們需要使用到 Icons 時,都會前往常用的一些 Icon 網站取得相關工具包檔案

現在,在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 類型,容易使用及修改

可以讓我們更簡單就能使用,真的非常方便

Continue Reading

在 Windows 架設 nginx + php

安裝 nginx

前往 nginx 官網,下載nginx/windows 的檔案

這裡下載的版本是 Stable version - nginx/Windows-1.12.2

在 C 槽新增一個 nginx_php/ 資料夾

將下載的nginx 壓縮檔解壓縮後放入

Continue Reading

[教學] Google AdSense 取款 - 西聯代理銀行機構取款

(更新日期: 2018/5/13)

當我們Google Adsense 達到100美金門檻之後,系統就會在指定時間自動付款,

在台灣,選擇西聯付款有相當多的優點,其中包括以下幾點:

  • 交易安全安心
  • 不須辦理銀行帳戶
  • 收款人不須手續費
  • 取款程序簡單快速,幾分鐘內即可收到款項
  • 多元通路可辦理

可以在西聯官網查詢到,台灣地區支援付款的銀行機構及位置

根據最新資料顯示,目前台灣地區提供西聯服務的銀行主要有以下兩(三)幾家:

Continue Reading

SQL Joins

A LEFT JOIN B: 左外聯結,取得兩個資料表中,與A有關的資料。 A RIGHT JOIN B: 右外聯結,取得兩個表單中,與B有關的資料。 A INNER JOIN B: 將兩者匹配的資料取出來,即取得AB交集。 A OUTER JOIN B: 將兩者匹配及沒匹配的資料都取出來,即取得AB聯集。

Continue Reading

MySQL - Text 和 Blob 特性探討

簡介 MySQL 儲存格式中,常用TEXT或BLOB來儲存長字串 兩者之間的差異主要為: TEXT 只能儲存字元資料,BLOB 可以保存二進位資料(圖片..) 通常,根據內文預期的長度來挑選適當的類型 Type | Bytes | English words | Multi-byte words ———–+—————+—————+—————– TINYTEXT or TINYBLOB | 255 | ±44 | ±23 TEXT or BLOB | 65,535 | ±11,000 | ±5,900 MEDIUMTEXT or MEDIUMBLOB | 16,777,215 | ±2,800,000 | ±1,500,000 LONGTEXT or LONGBLOB | 4,294,967,295 | ±740,000,000 | ±380,000,000

Continue Reading

CSS3 Flexbox 介紹

Flexbox 彈性盒子,讓CSS區塊布局能更容易更具有彈性, 目前主流瀏覽器都已經有良好的支援,雖然許多功能仍在草案階段,但該項目已受到廣泛支持,在未來勢必成為主流標準之一。 Flex 排版能更優雅的處理不同螢幕尺寸及設備布局,接下來將直接進入他的功能介紹,逐步來了解這裏面的特性及用法 flex 階層關係 在討論功能之前,先要了解 flex主要框架設計理念, 通常,會在最外圍設定一個主要的 flex,在他內部可以包含0到多個區塊。 在外層的這個主要的 flex,就可以用一些參數來控制內部的區塊排版,包括排列方向、總體尺寸等等… 設定 flexbox 因此,先將要設定的主要區塊調設定為 flexbox 例如,這裡用display:flex 來設定一個 div 為 flexbox div{ /* flexbox setup */ display: flex; } flex flex 可以用來設定同一個主元素底下,內部元素的長度分配。

Continue Reading

Laravel 測試 .env.testing 設置檔

Laravel 測試 .env.testing 設置檔 在 Laravel 執行測試,主要會以 phpunit.xml 設定檔案來定義環境變數。 預設的內容為 <php> <server name="APP_ENV" value="testing"/> <server name="BCRYPT_ROUNDS" value="4"/> <server name="CACHE_DRIVER" value="array"/> <server name="MAIL_DRIVER" value="array"/> <server name="QUEUE_CONNECTION" value="sync"/> <server name="SESSION_DRIVER" value="array"/> </php> 預設的 session 及 cache 都是以 Array driver 方式處理,表示在測試過程不會真的產生 session 或 cache 資料。

Continue Reading

閒聊~隱藏 console 輸出行數

一般網頁設計中,我們會使用到 console.log 在 Chrome Developer Tools輸出一些字串, 並且可以在右邊看到這個console.log的位置

如果想隱藏 log 的來源行數 讓其他用戶在 Chrome Developer Tools 無法得知程式的位置,該怎麼做呢?

Continue Reading