2011년 6월 9일과 11월 10일에 열린 세미나에서 두 번 발표했던 내용을 글로 정리했습니다.
지금까지 다양한 버전관리 시스템을 쓴 경험과 Git의 장점이라고 느낀 점에 대해서 발표했었습니다.
Git에 대해 이야기를 하기 전에 지금까지 어떻게 버전관리를 해왔는지 되돌아보겠습니다. 아마 비슷한 경험을 하시고 공감하실 분들이 많으실 듯합니다.
<!doctype html> | |
<html ng-app="Demo" ng-controller="AppController"> | |
<head> | |
<meta charset="utf-8" /> | |
<title> | |
Lazy Loading Images With AngularJS | |
</title> | |
<style type="text/css"> |
2011년 6월 9일과 11월 10일에 열린 세미나에서 두 번 발표했던 내용을 글로 정리했습니다.
지금까지 다양한 버전관리 시스템을 쓴 경험과 Git의 장점이라고 느낀 점에 대해서 발표했었습니다.
Git에 대해 이야기를 하기 전에 지금까지 어떻게 버전관리를 해왔는지 되돌아보겠습니다. 아마 비슷한 경험을 하시고 공감하실 분들이 많으실 듯합니다.
react-hot-loader 는 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐부분만 빠르게 교체해주는 라이브러리입니다. 비록, 리액트 어플리케이션을 개발 할 때 필수적인 개발도구는 아니지만, 앱의 규모가 커지면 개발서버가 수정될때마다 새로고침이 된다면 딜레이가 발생되어 개발의 흐름이 중간중간 1~6초씩 끊길 수도 있습니다. 특히, styled-components 를 사용하게 되는 경우엔, 스타일이 JS 안에 있어서, 스타일을 수정 할 때마다 새로고침이 된다는게 조금 불편할수도 있겠죠.
이렇게 자바스크립트 코드의 일부분만 교체하는 기능은 웹팩 개발서버의 기능이기 때문에, 라이브러리 없이도 코드를 조금 건들여주면 가능합니다. 하지만, 어플리케이션의 state 를 계속 유지하려면 과정이 복잡하기 때문에 라이브러리의 힘을 빌릴 필요가 있습니다.
이전에는, webpack 쪽에서 설정을 해야 될 것이 있었기 때문에, 무조건 yarn eject 를 해주어야 했지만, 이제는 바벨 설정만 하면 되므로 eject 하는 작업은 선택적입니다. 최신 react-hot-loader 는 굉장히 많이 편해졌답니다.
app.filter('parseUrl', function() { | |
var //URLs starting with http://, https://, or ftp:// | |
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, | |
//URLs starting with "www." (without // before it, or it'd re-link the ones done above). | |
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim, | |
//Change email addresses to mailto:: links. | |
replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim; | |
return function(text, target, otherProp) { | |
angular.forEach(text.match(replacePattern1), function(url) { |
function changeVolume(diff) | |
return function() | |
local current = hs.audiodevice.defaultOutputDevice():volume() | |
local new = math.min(100, math.max(0, math.floor(current + diff))) | |
if new > 0 then | |
hs.audiodevice.defaultOutputDevice():setMuted(false) | |
end | |
hs.alert.closeAll(0.0) | |
hs.alert.show("Volume " .. new .. "%", {}, 0.5) | |
hs.audiodevice.defaultOutputDevice():setVolume(new) |
var application_root = __dirname, | |
express = require("express"), | |
path = require("path"), | |
mongoose = require('mongoose'); | |
var app = express.createServer(); | |
// database | |
mongoose.connect('mongodb://localhost/ecomm_database'); |
Look at LSB init scripts for more information.
Copy to /etc/init.d
:
# replace "$YOUR_SERVICE_NAME" with your service's name (whenever it's not enough obvious)
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element
or the /deep/
path selector.
video::webkit-media-controls-timeline {
background-color: lime;
}
video /deep/ input[type=range] {
Sublime Text 2 ships with a CLI called subl (why not "sublime", go figure). This utility is hidden in the following folder (assuming you installed Sublime in /Applications
like normal folk. If this following line opens Sublime Text for you, then bingo, you're ready.
open /Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl
You can find more (official) details about subl here: http://www.sublimetext.com/docs/2/osx_command_line.html
" Vundle config | |
set nocompatible " be iMproved, required | |
filetype off " required | |
" set the runtime path to include Vundle and initialize | |
set rtp+=~/.vim/bundle/Vundle.vim | |
call vundle#begin() | |
" alternatively, pass a path where Vundle should install plugins | |
"call vundle#begin('~/some/path/here') |