網站開發隨手記

[jaceju]

精心整理了各式各樣的設計資源，有各種靈感、資源、工具，設計師的你別錯過了！

[jaceju]

优秀网页设计联盟(SDC)，是有着良好职业交流氛围的网页设计行业联盟。与优设哥、獠麝鸡、你丫才美工一起听讲座，聊设计。联盟始终坚持开放、分享、成长的宗旨，为会员提供交流互动平台和网页设计讲座。

[jaceju]

Blackfire Profiler: Fire up your PHP Apps Performance

在 Homestead 看到這個可以用來對 PHP 網站做 profiling 的服務，很像是把 Xdebug + KCacheGrind 整合起來，只不過它是網站服務。大概玩法如下：

先在網站申請帳號 (可用 GitHub 連結)

在網站所在的 Ubuntu  Server 安裝 blackfire-agent 和 blackfire-php (probe)

執行 `sudo blackfire-agent -register` 註冊， server id 和 server token 可以在帳號頁取得

在 Chrome 瀏覽器安裝 Blackfire Companion 的 extension

瀏覽要 profiling 的網站，然後按下 Blackfire Companion 按鈕，會開始分析

profiling 的結果會上傳到帳號的 Profile Slots 上 (有 20 個可用)

View Profile 就會看到結果

[jaceju]

先前作者用了 CSS 3 製作出圓形導覽選單，這次改用 SVG 來製作。

[jaceju]

PHP 7 Feature Freeze

PHP 7 新特色的投票結果出來了，其他還未有結果的就要等到 7.1 了。

[jaceju]

Stylify Me

這個服務可以把網站的 color / typography / image size 整理出來變成 style guide 。

[jaceju]

console.log('%cHello!', 'font-size:36px;color:red');

原來 Chrome 和 Firebug 的 console.log 還有這招。

console.log('%cHello!', 'font-size:36px;color:red');

Firebug: https://getfirebug.com/wiki/index.php/Console.log Chrome: https://developer.chrome.com/devtools/docs/console-api

[jaceju]

Another 20 Docs and Guides for Front-End Developers

本文收集了多個關於前端開發的參考文件與指引，非常值得一一研究！

[jaceju]

Perf Tooling Today lists a lot of tools, articles, videos and slides to make the web faster. We cover resources to automize and monitore your workflow.

這個網站收集了許多有關網站效能的工具、文章、影片及簡報，網站開發者一定要收藏！

[jaceju]

Design patterns. Design patterns source code examples. Design patterns tutorials and guides.

[jaceju]

介紹 Mobile 前端測試技術。

[jaceju]

Chrome 擁抱 HTTP/2 ，告別 SPDY 。因為 HTTP/2 已經包含了 SPDY 的優點，所以該是向標準靠攏的時候了。

[jaceju]

有時不需要複雜的圖表來表示數據。

[jaceju]

7 tips for designing awesome animated GIFs

Here at InVision, GIFs aren’t just for goofing around—they play a powerful part in our marketing and education. Eventually, people started asking, “How do you make those GIFs?” So we figured it was...

與其用文字來描述 UI 的動態效果，不如給對方一張動態圖片來得清楚易懂。本文介紹如何用連續播放單步動作並錄製影片，最後再轉成 GIF 動畫。值得 UI 設計師參考看看。

錄影軟體可用： ScreenFlow / After Effects / Keynote 等。

[jaceju]

Anti-hero - a central character in a story, movie, or drama who lacks conventional heroic…

[jaceju]

介紹了 HTML5 中 datalist  這個標籤的用法，但因為支援度不足，所以還不普遍。

[jaceju]

10 Simple & Smart CSS Snippets

CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you ... Continue reading »