關於網路那些事...

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

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

Set 獨立介紹篇

Set 是一個ES6新的資料結構 像是陣列一樣,可以用來存取值 Set會自動處理掉重複值,並且Set沒有Key,輸出時只會有value (key value都會相同) 帶入方式 只要用 new Set() 將陣列帶入,就可以進行 set 來格式化。 取出方式 可以透過定義一個陣列,及搭配Spread Operator 來取得Set 結構值 […MySet] 好用的方法 Set 有一些方法可以使用 添加值、刪除值、清空值、判斷值是否存在、回傳內容長度 實際應用 - 集合用法 我們可以用 Set 來對多筆資料(array)來進行集合 集合包括 聯集 new Set([…mySet, …mySet2]) 取得整體數據

Continue Reading

展開運算符 Spread Operator 其餘運算符 Rest Operator 獨立介紹

Spread Operator(展開運算符) 與 Rest Operator (其餘運算符) 這兩種特性原則上及寫法都一樣, 但特徵不同,所以使用情境不同 Spread Operator 把一個陣列展開(expand)成個別值 (這裡陣列也可以用其他iterable的物件,包括: String、Array、Map、Set..等) Rest Operator 收集其餘的值,轉變成一個陣列 定義函式時,在傳入參數欄位使用一個 Rest Operator, 就能一次取得多個 a,b,c,d,e 傳入值,並轉為陣列格式來使用

Continue Reading

Promise 獨立介紹篇

Promise 已經被ES6及新的瀏覽器支援,是一個強大的異步執行流程語法結構 Promise 可以讓我們確保某件事情做完之後,才進行後續動作 本質上都是使用callback(回呼函式),並且都是async(異步執行) 當我們實際執行一個 promise,他會先將狀態切換為 pending(等待中),並且依照 resolve 或reject 來返回結果 then..catch 連鎖處理 我們可以透過 Promise 來進行 then..catch 連續的連鎖流程處理 Promise.all 方法 promise.all 可以用陣列的方式一次帶入多個promise, 執行到最後會再回傳一個 Promise 物件 有幾點特色: 一項被reject或發生錯誤,就會返回 reject 全部執行都完成 resolve ,才會返回成功resolve 返回的resolve promise順序會跟傳入陣列中的順序一致 promise.

Continue Reading

Arrows Function 獨立介紹篇

ES6 Arrows Function 和 Normal Function 差別 Arrow Function 主要有以下優勢: 語法簡單。少打很多字元。 可以讓程式碼的可閱讀性提高。 會參照當時環境中的 this ( bind(this) ) 好處 在使用內部函式時,內部函式有自己的this,通常會指向最外部 windows 物件, 因此,通常要先用變數指定this,傳到內部函式使用, 而 Arrow function 則不必再透過變數就能直接使用外部函式的this作為自己的this 注意情況 在物件裡的屬性,必須使用function,而不能使用 Arrows function

Continue Reading

Javascript Closure 獨立介紹篇

當我們宣告且呼叫一個函式時,函式本身會形成一個 scope,scope 裡面會包含 Closure

特性

Closure 原則就是,是一個可以用 by Reference 的方式紀錄函式建立時的環境,包括了:

Closure 內部所建立的變數,限定於內部使用,

在Closure 裡也可以存取到 Scope chain 中的所有變數,

Continue Reading