關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Node sass 入門 [筆記]

在過去 sass/scss 興起的時期,最常搭配 compass 以及相關的 mixins 來進行開發


如果你喜歡我們的文章內容,請在這裡按個讚



CSS3 動畫 Transition, Animation, Transform 基礎 [筆記]

CSS3 建構過程,時常會需要用到動畫設計,所以就將相關的參數及使用記錄下來,方便之後查詢及使用~

瀏覽器前綴

在使用任何CSS3高級屬性時,建議都要搭配瀏覽器前綴,讓屬性效果可以在各瀏覽器有更好的支援

-moz-{屬性}Firefox 瀏覽器。
-webkit-{屬性}Safari, Chrome, Opera 等瀏覽器。
-o-{屬性} Opera 瀏覽器。
-ms-{屬性} IE 瀏覽器。

Transition

Transition 可以用來設定基礎的動畫效果,直接指定要產生變化的css屬性


如果你喜歡我們的文章內容,請在這裡按個讚



Google Rendertron - 解決 Client side rendering 的SEO問題


如果你喜歡我們的文章內容,請在這裡按個讚



React 元件生命週期 [筆記]

React 為 component (元件)提供了許多生命週期相關的方法

讓我們可以在 component 輸出前,輸出後,或者被消滅等狀態時,可以藉由這些方法來設計一些行為


如果你喜歡我們的文章內容,請在這裡按個讚



React refs 屬性

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

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

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


如果你喜歡我們的文章內容,請在這裡按個讚



聊 Javascript Prototype 設計特性

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


如果你喜歡我們的文章內容,請在這裡按個讚



[Solved] fontFamily 'Arial' is not a system font and has not been loaded ...

In the development of RN process, using react-native-swiper expansion,
When ios preview normal display, but Android has made an error: fontFamily 'Arial' is not a system font and has not been loaded through Expo.Font.loadAsync...

I am using create-react-native-app and Expo
Obviously, the reason for the error is less Arial font


如果你喜歡我們的文章內容,請在這裡按個讚



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 專案
下面會介紹其特點、安裝及基本使用方式


如果你喜歡我們的文章內容,請在這裡按個讚



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

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


如果你喜歡我們的文章內容,請在這裡按個讚



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

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

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


如果你喜歡我們的文章內容,請在這裡按個讚