如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

搜索框有一些提示信息比如“關(guān)鍵字”之類，不寫吧用戶可能不知道這個(gè)搜索框是用來做什么的，寫了吧點(diǎn)擊搜索之后默認(rèn)就把這些提示信息提交給數(shù)據(jù)處理頁面處理去了，有點(diǎn)麻煩，而且也沒有必要再去數(shù)據(jù)庫(kù)查一次這個(gè)提示信息。

  可以用jquery 的插件 placeholder來解決這個(gè)問題，這個(gè)插件使用也很簡(jiǎn)單，在頁面引入這個(gè)插件，    <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>（本人用的是miniui做的，所以引入的是jquery.placeholder.min.js）。

 在html中的輸入框中如此設(shè)置

<div class="inputs">
         <input id="u_id" name="u_id" type="text" placeholder="請(qǐng)輸入帳號(hào)"/>
 </div>
<div class="inputs">
     <input id="u_pass" name="u_pass" type="password" placeholder="請(qǐng)輸入密碼"/>
</div>

 js代碼：

$(function(){
    $("input").placeholder();
    
    $("input").keydown(function(event) {  
        //alert(event.keyCode);
        if(event.keyCode==13){  
            login();  //轉(zhuǎn)到登錄的js方法
        }
    });
});

 但是問題來了，firefox，IE下都能實(shí)這個(gè)效果，chrome和safari點(diǎn)擊后不會(huì)消失，得輸入東西之后才會(huì)消失。本人在CSS方面菜鳥一只，后來讓公司一位前段的同事去調(diào)試這個(gè)，最后在CSS里面加了一段：

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;} 

藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在過去的幾年當(dāng)中，網(wǎng)絡(luò)上所流傳的各種設(shè)計(jì)和開發(fā)資源，在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計(jì)師和開發(fā)者必備的工具，但是其中絕大多數(shù)由于其應(yīng)用范疇的局限，或者傳播不夠廣，導(dǎo)致它們大多并廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標(biāo)用戶能夠明白，需要這些工具的時(shí)候，上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全，仔細(xì)看看，總能找到幾款你所需要的。

MuzzleApp

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在過去的幾年當(dāng)中，網(wǎng)絡(luò)上所流傳的各種設(shè)計(jì)和開發(fā)資源，在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計(jì)師和開發(fā)者必備的工具，但是其中絕大多數(shù)由于其應(yīng)用范疇的局限，或者傳播不夠廣，導(dǎo)致它們大多并廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標(biāo)用戶能夠明白，需要這些工具的時(shí)候，上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全，仔細(xì)看看，總能找到幾款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的開發(fā)者的新產(chǎn)品，是一款應(yīng)用在macOS 平臺(tái)的應(yīng)用，當(dāng)你和別人共享屏幕的時(shí)候，它可以幫你關(guān)閉通知和其他的私密信息，避免尷尬。無論你共享屏幕時(shí)候的平臺(tái)是Skype、Google Hangouts 還是 Slack，它都能讓macOS 進(jìn)入“免打擾”模式。

Fractures

Fractures 是一個(gè)CSS類 合集，可以幫你快速創(chuàng)建網(wǎng)頁原型。Fractures 是基于原子設(shè)計(jì)模式來構(gòu)建的，樣式表被分割為小段。

CSS DB

CSS DB 能為你列舉出還在不斷開發(fā)中的CSS特性列表以及目前的狀態(tài)，讓你可以更好地使用CSS選擇器。

Preact

Apache 最近宣布禁止將 BSD+專利許可證分發(fā)給 ReactJS 和類似的項(xiàng)目，如果你的產(chǎn)品受到類似的專利許可證的影響，可以考慮 Preact 這樣的 ReactJS替代品。

Pell

Pell 是一款用來構(gòu)建所見即所得編輯器的JavaScript 庫(kù)，默認(rèn)情況下，它會(huì)帶有常見的富文本編輯器的按鈕。Pell 是使用ES6來構(gòu)建，它不會(huì)像jQuery 那樣需要大量的依賴庫(kù)，體積小巧，可維護(hù)性強(qiáng)，還兼容 IE9。

Markvis

Markdown 在語法和功能上是有限制的，而Markvis 在它的基礎(chǔ)上增加了圖表的功能。

Moment PHP

Moment 是一款 PHP 庫(kù)，用來處理日期和時(shí)間，類似于 Moment.js 之于 JavaScript。這個(gè)庫(kù)的使用也很簡(jiǎn)單，可以快速設(shè)置時(shí)區(qū)、時(shí)間和顯示方式。

Tonik

這是一款使用現(xiàn)代PHP來構(gòu)建的Wordpress 新手主題，它充分利用了命名空間，自定義模板，自動(dòng)加載器，WebPack 以及一大堆現(xiàn)代Web開發(fā)的優(yōu)點(diǎn)。

Awesome Guidelines

這是一個(gè)包含了許多編程語言標(biāo)準(zhǔn)的列表，其中包含了C語言，JS，PHP，Ruby，甚至包括Visual Basic。這些標(biāo)準(zhǔn)能夠幫你的代碼保持簡(jiǎn)潔、干凈。

BotUI

聊天機(jī)器人已經(jīng)逐漸成為主流。這款 JS 庫(kù)能夠幫你構(gòu)建對(duì)話式UI，這個(gè)庫(kù)比起傳統(tǒng)的“表單”體驗(yàn)更加優(yōu)秀。

Reaction Commerce

開源的內(nèi)容管理系統(tǒng)這些年變化并不大，其中絕大多數(shù)都是基于PHP來構(gòu)建的。

TinyReset

這是一款非常小巧的 CSS resetter，它可以作為 Eric Meyer 所創(chuàng)建的reset.css的替代品。

Martinet

Martinet 是一款用來構(gòu)建靜態(tài)網(wǎng)站的命令行工具，其中包含了諸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 這樣的現(xiàn)代工具。它的存在讓設(shè)計(jì)者不用擔(dān)心網(wǎng)站配置，只需要正常使用 Martinet 就能對(duì)網(wǎng)站進(jìn)行調(diào)整。

Billboard

BillboardJS 是一款基于 D3.js 來構(gòu)建的交互式數(shù)據(jù)可視化數(shù)據(jù)庫(kù)工具，它可以用來創(chuàng)建可視化的柱狀圖，餅圖，折線圖等。

SVGI

SVGI 是一款用來查找SVG元素和文件的命令行工具，安裝它之后，你可以采用svgi 命令來檢索 SVG 文檔的大小、元素、層次結(jié)構(gòu)和節(jié)點(diǎn)列表。

TimeStrap

TimeStrap 是另外一個(gè)非常實(shí)用的開源平臺(tái)，它可以像 WordPress 一樣可以在任何地方運(yùn)行和訪問的發(fā)票系統(tǒng)。對(duì)于喜歡自己控制而不希望使用外部服務(wù)來管理發(fā)票的用戶而言，這是一個(gè)很好的選擇。

Slate

Slate 是一款為API 文檔創(chuàng)建靜態(tài)網(wǎng)頁的工具，諸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了這一工具。

FontJoy

FontJoy 是一款能夠生成大量有效字體組合的工具，點(diǎn)擊“Generate”按鈕就能生成許多新的字體組合。有趣的地方在于，這款工具還有具備深度學(xué)習(xí)的功能。

CoolHue

毫無疑問漸變色再一次回歸主流，而CoolHue 是另外一款非常優(yōu)秀的漸變色生成工具。

FrontPress

FrontPress 是一款前端框架，可用來控制 WP-API 和 AngularJS。如果你想創(chuàng)建一款用于 WordPress 的內(nèi)容管理系統(tǒng)，可以從 FrontPress 著手。

藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

CSS Variable 即CSS變量，聊CSS變量之前，我想先來說說Sass和Less,還有Stylus，它們都是目前使用較為普遍的三款CSS預(yù)處理框架，我們?yōu)槭裁匆褂盟鼈兡兀驗(yàn)樗鼈兌伎梢宰屇阍贑SS中方便的使用變量、簡(jiǎn)單的程序邏輯、函數(shù)等在編程時(shí)使用的一些基本技巧，這些框架對(duì)于這種CSS預(yù)處理的技術(shù)已經(jīng)非常成熟，可以讓你的CSS代碼變的更加簡(jiǎn)潔、便于維護(hù)、在編寫的時(shí)候也無需考慮代碼的兼容性。

Janilychen：以往做一些H5的運(yùn)營(yíng)項(xiàng)目，都是動(dòng)畫設(shè)計(jì)師使用Animate cc（原來的Flash）先設(shè)計(jì)好動(dòng)畫原型，然后交給我們UI開發(fā)來實(shí)現(xiàn)。做過動(dòng)畫開發(fā)的童鞋都知道動(dòng)畫開發(fā)都是比較耗費(fèi)時(shí)間精力的，而且還要高質(zhì)量的還原動(dòng)畫設(shè)計(jì)師設(shè)計(jì)好的動(dòng)畫，來回溝通成本也非常高。

那有沒有一種的方法來改善這種流程，提高開發(fā)效率的同時(shí)還能完成高品質(zhì)的動(dòng)畫呢？

經(jīng)過一段時(shí)間的摸索，發(fā)現(xiàn)AnimateCC（就是原來的Flash）可以導(dǎo)出canvas動(dòng)畫，而且是基于createjs這個(gè)開發(fā)輕量級(jí)游戲的js庫(kù)的，非常適合用來做移動(dòng)端的一些h5動(dòng)畫。不僅縮短制作動(dòng)畫所需要的時(shí)間。同時(shí)它也是一個(gè)可視化的IDE，不需要編寫代碼就可以完成高品質(zhì)的動(dòng)畫效果；還可以通過Javascript，為動(dòng)畫效果添加交互性。

用戶真的有通過電臺(tái)App來跑步的需求嗎？

這是我們?cè)谝?guī)劃這個(gè)產(chǎn)品功能時(shí)的第一個(gè)問題。即使在音樂類軟件都已經(jīng)上線了跑步相關(guān)功能的當(dāng)下，我們依然發(fā)問——真的有人，通過電臺(tái)App來跑步嗎？

如果僅僅是針對(duì)現(xiàn)在電臺(tái)類App，那需求一定是微乎其微，不同于音樂統(tǒng)一的內(nèi)容屬性，電臺(tái)類內(nèi)容屬性太豐富——音樂時(shí)間短，小說時(shí)間長(zhǎng)；相聲很搞笑，新聞很嚴(yán)肅······這些內(nèi)容決定了他們天然就不能像音樂一樣隨機(jī)重組。

有時(shí)候我們需要退一步來思考需求。

2016年末，各路APP也紛紛展開一輪輪的數(shù)據(jù)廝殺，從不同的視角闡述過去一年的精彩故事。而坐擁龐大用戶數(shù)據(jù)的QQ空間，在這個(gè)既難忘又不舍的2016年，用戶的故事將會(huì)被如何演繹，在寒冬帶給用戶怎樣的溫暖回憶呢？

幾個(gè)星期前，CSS Variables ——CSS 變量草案發(fā)布在了W3C官方 ,更準(zhǔn)確的應(yīng)該叫CSS 自定義屬性，目前在Chrome Canary 版里面已經(jīng)支持，開啟該功能見附[1]

當(dāng)Chrome瀏覽器工程師Addy Osmani第一時(shí)間把這消息發(fā)布在twitter后，遭到了數(shù)萬人的否定、敵視和懷疑。于我而言，更多的感到是一個(gè)驚喜，因?yàn)檫@個(gè)功能實(shí)在讓人太興奮了。

快速的掃了一遍之后，發(fā)現(xiàn)99%人抱怨的無外乎這兩點(diǎn)：

• 語法太丑和不夠簡(jiǎn)潔
• Sass 、Less早就有這些玩意了，不太care

雖然我承認(rèn)我也對(duì)這語法很反感，更重要的是理解語法不只是反復(fù)無常的在選擇。CSS工作組討論很久語法的長(zhǎng)度，他們提取了一些點(diǎn)，考慮到CSS的語法兼容不會(huì)與未來增加的其他語言沖突。

下劃線 一般在文檔中常被用作增強(qiáng)注意，在過去打字機(jī)時(shí)代，下劃線成為了唯一的一種文字強(qiáng)調(diào)方式，具體的操作方法是在已經(jīng)打出來的文字上面退格，再在同樣的地方打出下劃線。

而在網(wǎng)頁中，可以鏈接的文字（超鏈接）下面一般都有下劃線。在制作頁面的時(shí)候，當(dāng)鏈接需要下劃線的時(shí)候，UI開發(fā)很自然的會(huì)想到使用text-decoration屬性來顯示，例如這樣：

以上顯示的是設(shè)計(jì)稿和瀏覽器渲染的實(shí)際效果，我們會(huì)發(fā)現(xiàn)瀏覽器渲染的效果和設(shè)計(jì)稿有出入，主要表現(xiàn)在下劃線的位置，這時(shí)候細(xì)心的設(shè)計(jì)師會(huì)要求你想辦法實(shí)現(xiàn)他們本來想要實(shí)現(xiàn)的效果?？上У氖?，在這幾年的網(wǎng)頁排版技術(shù)發(fā)展中，并沒有更好的css屬性出現(xiàn)來支持下劃線的個(gè)性化設(shè)置，所以這個(gè)問題常常會(huì)被忽略。

這個(gè)一般在UI開發(fā)看來，可能覺得并沒有什么問題，難道說不應(yīng)該使用text-decoration這個(gè)屬性嗎？