前端必備
前端工具
自動化: Gulp 、 Grunt 、百度Fis 、Ant、Yeoman、Codekit、Koala、Webpack
預編譯: Slim、Haml、Coffeescript、Sass、BabelJs、Jade、Less、Stylus、Pleeease、PostCSS、
查詢工具:CssTriggers、screensiz.es、友盟指數、javascripting、builtwith、thetoolbox、stylesheets
版本控制:Github、GitCafe、GitLab、Bitbucket、Sourcetree、Cornerstone、版本控制之道、ProGit
編輯器:Sublime Text、Atom、HBuilder、WebStorm、MacDown、UltraEdit、ace、Brackets、LightTable、Visual Studio Code
線上編輯:Jsfiddle、Codepen、Jsbin、Runjs、sassmeister
除錯/測試:Firebug、YSlow、IEDeveloperToolbar、Fiddler、ChromeDevTools、JSLint、JSHint、CSSLint、HTML Validators、UnitJS、Jasmine、BrowserStack、Testem
部署流程:YUI Compressor、UglifyJs、CleanCss、JSDoc
其它:CodeIf、H5Viewer、anvil、cssmixins、JSON Server、ngrok、Glyphter、CSSStats、spritegen、placehold.it、MWeb、browsersync.io、kjson.com、strut.io、Reveal.js、iconverticons.com、智圖、longshadows、cubic-bezier、browserhacks
部落格/社群/資訊
國內綜合:w3ctech、w3cplus、w3cfuns、前端亂燉、前端觀察、segmentfault、html5tricks、騰訊ISUX、百度EFE、奇舞團、淘寶UED、前端裡、div.io、慕課網、Codecademy、極客標籤、InfoQ中國、WEB前端開發、前端開發部落格、愛奇舞——H5.vc、看雲、匯智網、伯樂線上
國外綜合:tutsplus、CSSAnimation、TeamTreehouse、SmashingMagazine、CodyHouse、Echojs、Codeschool、codewars、Html5Rocks、SpeakerDeck、Alistapart、Lynda、DigitalTutors、Ponyfoo.com、tutorialzine
前端資訊:CSS-Tricks、WebDesignerNews、FrontEndFont、Sidebar.io、DesignerNews
前端大牛:Hugo Giraudel、Philip Walton、David Walsh、Sara Soueidan、Paul Irish、玉伯、廖雪峰、阮一峰、勾三股四、張鑫旭、餘果、Sofish、糖餅、Evan You、Darren_聶微東、司徒正美、CSS魔法
各類外掛
滑動/視差:fullPage、swiper、Slick、sliderjs、hammer.js、unslider、Superscrollorama、ScrollMagic、WOW、skrollr、stellar.js、multiscroll.js、iscroll、dragula、waypoints
動畫/效果:popmotion、velocity、GreenSock-JS、Snapsvg、sketch.js、impress、blast.js、sticky、Colorify.js、nprogress、Mojs、skrollr、typed.js、Effeckt.css、Hover.css、Animatable、Animate.css、CSS3 Animation Cheat Sheet、pagePiling.js、headroom.js、hint.css、SpinKit、CircularProgressButton、css-loaders、pace、two.js、Sequence、ElasticProgress、CSSgram
相容:Modernizr、bowser、retinajs、picturefill、Normalize.css、Respond、html5shiv、box-sizing-polyfill、elementQuery、css-element-queries
Chrome:clear-cache、EditThisCookie、Full Page Screen Capture、HTML5 Outliner、JSONView、Postman、User-Agent Switcher for Chrome、Window Resizer、頁面自動重新整理、Chrome Sniffer Plus
模板工具:Handlebars、Mustache、artTemplate、nunjucks、transparency、doT
其他:zxcvbn、Validation、moment、primer、Please.js、qrcode、dynamics.js、smartcrop.js、lazyload、imagesloaded、unveil、fastclick、jQuery Form Plugin、jQuery-File-Upload、sweetalert、toolbar、tooltipster、video.js、Font-Awesome、minigrid、bricks.js
主流框架
綜合:React、Bootstrap、Foundation、SemanticUI、Purecss、UIKit、妹子 UI、Alice、materialize、material-design-lite、Html5Boilerplate、Material design、Lightning Design System、Vux
MVVM:AngularJS、Vue.js、Backbone、Avalon、knockout
JavaScript:JQuery、Zepto、prototypejs、emberjs、MooTools、Dojo、meteor、Domcom
Hybrid:React-Native、Nativescript、Phonegap、Ionic、Crosswalk、Meteor、Electron
遊戲:Construct 2、ImpactJS、CreateJS、Three.js、PlayCanvas、Pixi、Hilo
手冊/書籍
書籍:《JavaScript高階程式設計(第3版)》、《單頁Web應用:JavaScript從前端到後端》、《JavaScript語言精粹》、《JavaScript DOM程式設計藝術 (第2版)》、《編寫可維護的JavaScript》、《Web全棧工程師的自我修養》、《深入淺出Node.js》、《響應式Web設計》、《精通CSS》、《高效能JavaScript》、《You-Dont-Know-JS》
快速入門:學習CSS佈局、Learn to Code HTML & CSS、Learn to Code AdvancedHTML & CSS、前端技能樹
精選文章:如何跟上前端開發的最新前沿、移動H5前端效能優化指南、那些過目不忘的H5頁面、玩轉HTML5移動頁面、MobileWeb 適配總結、搞定這些疑難雜症,向css3動畫說yes
手冊/規範:前端開發者手冊、前端開發筆記本、Material Design 中文版、CSS規範、JavaScript Style Guide、Sass規範、ECMAScript3/5、ECMAScript6、W3C、CommonJS Modules
翻譯文章:學習flexbox屬性、使用Velocity.js改善使用者體驗
設計/互動
靈感來源:Dribbble、SiteInspire、Httpster、設計達人、PhotoshopLady、站酷、UI中國、uiparade、365psd、Behance、Naldz Graphics、mobile-patterns、wa.design、pinterest、花瓣、堆糖、覓處、視覺中國
學點設計:TutsplusDesign、優設網、PSDFAN、Envato、abduzeedo、Interactive Guide to Blog Typography、24Ways
互動體驗:Navnav、Codyhouse、騰訊ISUX、淘寶UED、阿里巴巴中文站、阿里巴巴國際站、阿里媽媽UED、百度移動使用者體驗部、百度搜索使用者體驗中心、騰訊TGideas、騰訊MXD、騰訊UED、騰訊CDC、新浪UDC、迅雷CUED、uxbooth、tympanus
配色工具:Adobe color、FLATUI、Thedayscolor、colrd、Nipponcolors、Nolourlovers、中國傳統色、日本傳統色、Fashiontrendsetter
第二篇:github上值得關注的前端專案 以及他們的github地址
一小部分目錄
綜合/資源
frontend-dev-bookmarks 一個巨大的前端開發資源清單。star:15000
front-end-collect 分享自己長期關注的前端開發相關的優秀網站、部落格、以及活躍開發者。star:860
Front-end-Interview-questions 史上最全前端開發面試問題及答案
f2e-hub 包含Animation,UI,dialog,Carousels,color,image,workflow等。star:100
awesome-javascript 一系列很棒的javascript 庫,資源。star:3100
fks 前端技能彙總,包含前端知識架構,後端知識,linux,書籍推薦等。star:4000
node123 node.js中文資料導航。star:1200
mobile-web-favorites 移動端web開發收藏夾。star:200
gulp-book Gulp 入門指南
Front-end-tutorial 最全的資源教程-前端涉及的所有知識體系。(12.25更新)
canvas/資料視覺化
echarts 基於Canvas,純Javascript圖表庫,提供直觀,生動,可互動,可個性化定製的資料視覺化圖表。star:6900
Chart.js 使用<canvas>標籤的簡易HTML5圖表。star:14600
sketch.js 跨平臺JavaScript創意編碼框架,gzip壓縮後僅有2kb。star:1500
d3 一個基於資料操作文件的js資料視覺化框架,最流行的視覺化庫之一。star:38000
zrender 一個輕量級的Canvas類庫,MVC封裝,資料驅動,提供類DOM事件模型,讓canvas繪圖大不同!star:850
c3 一個基於 D3.js 的可重用 JavaScript 圖表庫。幾乎零學習曲線。star:4.5K(6.28更新)
img2css 將圖片轉為純css程式碼。(11.3更新)
第三篇:網站:『引』最全前端資源彙集(更新網址),github地址:GitHub - JacksonTian/fks: 前端技能彙總 Frontend Knowledge Structure (github地址),號稱最全的資源教程-前端涉及的所有知識體系。
部分目錄(此處所有目錄連結到主頁),詳細資訊請訪問具體網址和github
1 · 綜合類 bsp alt 屏幕 軟件 時間 apt 博客 png 錄像 前端必備:FastStoneCapture 和 Licecap
FastStoneCapture這個軟件非常小,只有2M多,並且其功能很強大,包括截圖,錄制視頻,量尺,取色等等,對於前端工程師絕對是必備神器。 engine des charset 中文 ges ima 其他 修改 tables 啟動mysql服務
下面列舉一下常用的sql語句,務必花幾分鐘學會它。
以下均在dos命令行下操作:
1.查看有多少庫。
show databases;
2.建庫。
我們最好
前端工具
自動化: Gulp 、 Grunt 、百度Fis 、Ant、Yeoman、Codekit、Koala、Webpack
預編譯: Slim、Haml、Coffeescript、Sass、BabelJs、Jade、Less、Stylus、Pleeease、PostCSS、
查詢工具 前端必備切圖技能--1切多個圖片
前端必備切圖技能--2轉換成智慧物件切單個圖片
前端必備切圖技能--3快速切圖
總結:
第一種方法:
儲存的時候, 選擇儲存為web和裝置所用格式 按住shift,點選你想要儲存的切片,選中的邊框會變黃,再點選“儲存” 在接下來的框的底部,點選選擇“
element - 餓了麼出品的Vue2的web UI工具套件
Vux - 基於Vue和WeUI的元件庫
mint-ui - Vue 2的移動UI元素
iview - 基於 Vuejs 的開源 UI 元件庫
Keen-UI&nbs
注意:我使用的是PhotoShop cc2017,因為版本的不同,在操作上會有所不同。
1.針對切圖最適合的PhotoShop介面設定
1.1 新建設定
檔案 ----> 新建
快捷鍵為: control / command + n
我們可
最近收到不少的粉絲的提問,問能不能推薦一些實戰綜合性強點前端學習網站。下面w3cschool精選了5個前端學習網站,相信這些網站將對前端學習者大有幫助。在這裡相信有許多想要學習前端的同學,關注小編文章最後面文字,可免費領取一整套系統的web前端學習教程!0、廖雪峰官方網站有不
矩形選框工具的使用:
新增到選區(按住shif)
從選區減去(按住alt)
與選區交叉(按住shift+alt)
按住他們的時候再進行選區的操作,在測量時,選區可以大一些,然後按住alt
1、新浪微博 <a href="http://v.t.sina.com.cn/share/share.php?url=http://www.shao-ming.com&title="分享內容"" target="_blank">新浪微博</a> 因為要告知瀏覽器的解析器用什麼文件標準解析這個文件,所以在文件的開頭要寫上文件型別宣告,H5的文件型別宣告要比H4文件型別宣告簡潔的多。因為H5不基於SGML(標準通用標記語言),所以不需要對DTD文件型別定義)進行引用,但是H4是基於SGML,必須對DTD進行引用。H4的三種文件型別宣告是:過渡模式,嚴格模 cati 後退 gecko 簡單的 開頭 存儲 搜狗 ofo 插件 因為要告知瀏覽器的解析器用什麽文檔標準解析這個文檔,所以在文檔的開頭要寫上文檔類型聲明,H5的文檔類型聲明要比H4文檔類型聲明簡潔的多。因為H5不基於SGML(標準通用標記語言),所以不需要對DTD文檔類型
前言:atom是一款非常炫酷的編輯器,讓你在當碼農的同時感覺生活如此絢麗多姿。滿足你的各種需求,更何況與git連線你還不用敲命令列,簡直就是很大的福利嘛!你一定會愛上它的,哈哈哈哈哈
個人的一點總結,希望可以幫助到你哦
一. 語法支援
1. Language-label
hai,how is it going?I'm MuQing.I come back。哈哈,最近在英語的路上奮戰,小秀一下。又好久沒寫部落格了,實習的生活漸行漸遠了,回到學校也終於能夠坐下來對很多東西進行沉澱和總結。今天就跟大家來聊聊前端需要會的PS那點事。
前端PS技巧有兩大類:1 由於機緣巧合,認識了一些朋友,給我介紹了搬瓦工的網站。買了一個國外的伺服器,既可以FQ又擁有了一個搭載 Centos 6 的伺服器。一年19.99美元,摺合人民幣也就130左右,一鍵搭建。有興趣可以點選瞭解詳情。
很久之前就看到胖哥,出了關於nginx 的教程,今天來根據他的教程在買的 linux 伺服器上面
一、安裝Package Control外掛
在安裝外掛之前,需要讓sublime安裝Package Control。
使用Ctrl+`(Esc鍵下方)快捷鍵或者通過View->Show Console選單開啟命令列,將以下程式碼複製後貼上到控制檯中,然
切圖:即從設計稿裡面切出網頁素材
一、使用Photoshop工具
工具的使用:
1.將文字與標尺的單位的設定為畫素
2.開啟這五個視窗,關閉其它視窗,儲存工作區方便以後使用
3.工作區弄亂時,可以使用上圖中的復位,或者在下圖中選擇工作區:
4.切圖常用 django 項目 header trap cli 安裝 framework -h 必備 django:版本1.11.XX
命令:pip install XXX
[email protected]
pymysql
beautifulsoup4
urlli 前端開發中,效能是一定繞不開的,今天就來說一下前後臺通訊中最重要的一個通道--HTTP2.0
最開始的通訊協議叫http1.0,作為始祖級的它,定義了最基本的資料結構,請求頭和請求體,以及每一個欄位的含義,它順應了當時的網際網路需求,首次實現了瀏覽器與後端的互動,但它有一個時代烙印,就是短連線, cal make oom edi ade 情懷 eight engine ebp
前端組件庫
搭建web app常用的樣式/組件等收集列表(移動優先)
0. 前端自動化(Workflow)
前端構建工具
Yeoman &nd ++ value 表達 ive 運行時 row net 能夠 com 介紹
Emmet (前身為 Zen Coding) 是一個能大幅度提高前端開發效率的一個工具:
基本上,大多數的文本編輯器都會允許你存儲和重用一些代碼塊,我們稱之為“片段”
2 · 入門類
3 · 工具類
4 · 綜合效果搜尋平臺
5 · 團隊Blog|週報類
6 · 開發中心
7 · Nodejs
8 · 綜合API
9 · Ecmascript
10 · Js template
11 · HTML5(HTML)
12 · CSS3(CSS)
13 · Angularjs
14 · React
15 · vue
16 · 移動端API
17 · jQuery
18 · D3
19 · Requriejs
20 · Seajs
21 · Less,sass
22 · Markdown
23 · 相容性
24 · UI相關
25 · 其它API
26 · 圖表類
27 · 正則
28 · 前端規範
29 · PHP
30 · 各大公司開源專案
31 · 常用
32 · 演算法
33 · 移動端
34 · JSON
35 · 焦點圖
36 · Ext, EasyUI, J-UI 及其它各種UI方案
37 · 頁面 社會化 分享功能
38 · 富文字編輯器
39 · 前端概述
40 · Gulp
41 · Grunt
42 · Fis
43 · pc圖輪
44 · 移動端圖輪
45 · 檔案上傳
46 · 模擬select
47 · 取色外掛
48 · 城市聯動
相關推薦
前端必備:FastStoneCapture 和 Licecap &&& c++ 編譯執行
前端必備SQL語句
前端必備
前端必備的切圖技巧
實用VUE 開發外掛!!前端必備
前端必備ps技能----切圖
程式設計師學習前端必備的5大網站,你用過幾個?
前端必備之切圖(一、使用PhotoShop測量和取色)
網頁常用分享程式碼大全(前端必備)
Web前端必備基礎知識點,百萬程式設計師:牛逼!
Web前端必備基礎知識點,百萬程序員:牛逼!
Atom外掛——前端必備哦
前端必備PS技巧
前端必備的Nginx學習
Sublime Text 3 前端必備外掛
前端必備技能之Photosh切圖
學習django和前端必備組件
前端必備效能知識 - http2.0
前端組件庫大合集-必備收藏
前端開發必備!Emmet使用手冊