UI개발 Tip & Tech Top 10
10
Chrome DevTools
Network
Capture Screenshots
Throttling the Network
Filter
9
Chrome DevTools
Sources
Format
Source map
8
Chrome DevTools
Search
Search All Files
7
Chrome DevTools
Animation
Easing Preview
6
Sublime Text Plugin
Emmet
How to install
- Run "Package Control"
- Find and install `Emmet` plugin
- Restart ST editor
5
Sublime Text Plugin
cdnjs
https://cdnjs.com/
How to install
- Run "Package Control"
- Find and install `cdnjs` plugin
- Restart ST editor
4
Sublime Text Plugin
Autoprefixer
How to install
- You need to have Node.js >= 0.12.0 installed.
- Run "Package Control"
- Find and install `Autoprefixer` plugin
- Restart ST editor
Options
(Preferences → Package Settings → Autoprefixer → Settings - User)
{
"browsers": ["last 2 versions"],
"prefixOnSave": false
}Default
User
{
"browsers": ["last 1 version", "> 10%", "> 5% in US", "ie 8", "ie 7"]
}
3
Sublime Text Plugin
LiveReload
How to install
- Run "Package Control"
- Find and install `LiveReload` plugin
- Restart ST editor
- You can also use one of the extensions listed here
LiveReload with Sass
- You need to have ruby installed.
- $ gem update --system
- $ gem install sass
- $ gem install compass
Install - Ruby
Install - Sass & Compass
2
Sublime Text Plugin
SublimeServer
How to install
- Run "Package Control"
- Find and install `SublimeServer` plugin
- Restart ST editor
{
"attempts": 5,
"autorun": false,
"defaultExtension": ".html",
"interval": 500,
"mimetypes":
{
"": "application/octet-stream",
".c": "text/plain",
".h": "text/plain",
".py": "text/plain"
},
"port": 9000
}
Option
1
파일 바꿔치기
http://www.telerik.com/fiddler
Mobile Debugging
Mobile Debugging
Tools > Fiddler Options > Connections
Mobile Config
- HTTP 프록시 > 수동
- 피들러 설정한 PC IP
- 피들러에서 설정한 port 번호
Bonus
CSS Sprites
with gulp
sprite.css
.sp_ico_sns_facebook {
display: inline-block;
background-image: url(/MW/img/common/sprites/ico_sns/sp_ico_sns.png);
background-position: 0px 0px;
width: 54px;
height: 55px;
background-size: 231px 175px;
}