forked from jameslutley/jameslutley.github.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
182 lines (116 loc) · 13.1 KB
/
index.html
File metadata and controls
182 lines (116 loc) · 13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//use.typekit.net">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//disqus.com">
<link rel="dns-prefetch" href="//mediacdn.disqus.com">
<link rel="dns-prefetch" href="//www.gravatar.com">
<title>James Lutley - Front-end web developer</title>
<meta name="description" content="So far 2012 has been a big year for me in progressing my front-end web development skills, tools and process. I’ve also been busy learning new …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://jameslutley.github.com">
<link href="/favicon.ico" rel="shortcut icon">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="/stylesheets/widescreen.css" rel="stylesheet" media="screen and (min-width: 45em)">
<script src="//use.typekit.net/qlz5kkl.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link href="http://feeds.feedburner.com/jameslutley" rel="alternate" title="James Lutley" type="application/atom+xml">
</head>
<body >
<header class="main-header" role="banner">
<h1><a href="/">James Lutley</a> — Front-end web developer</h1>
<nav role="navigation">
<ul class="main-nav">
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/work">Work</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<div id="main">
<div id="content">
<div class="blog-index">
<article class="article">
<header>
<p class="meta">
<time datetime="2012-05-21T16:47:00+01:00" pubdate data-updated="true">May 21<span>st</span>, 2012</time>
| <a class="disqus-link" href="/my-2012-front-end-web-development-workflow/#disqus_thread">Comments</a>
| <a class="rss-feed" href="http://feeds.feedburner.com/jameslutley">RSS Feed</a>
</p>
<h1 class="entry-title"><a href="/my-2012-front-end-web-development-workflow/">My 2012 front-end <em>web development workflow</em></a></h1>
</header>
<div class="entry-content"><p>So far 2012 has been a big year for me in progressing my front-end web development skills, tools and process. I’ve also been busy learning new languages and frameworks and getting up to speed on the latest advancements.</p>
<p>Here’s what’s changed in 2012:</p>
<h2>Languages / frameworks</h2>
<ul>
<li><a href="http://sass-lang.com/"><abbr title="Syntactically Awesome Stylesheets">SASS</abbr></a> / <a href="http://compass-style.org/">Compass</a> — this has <em>totally transformed the way I write <abbr title="Cascading Style Sheets">CSS</abbr></em>, and if you’re into Compass, I highly recommend the <a href="http://susy.oddbird.net/">Susy responsive grid system</a> by <a href="http://oddbird.net/">Oddbird</a> (<em>semantic grids in <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> have been a game-changer for me</em>). I’m currently using the <abbr title="Sassy CSS">SCSS</abbr> flavour of <abbr title="Syntactically Awesome Stylesheets">SASS</abbr>, and when I refer to <abbr title="Syntactically Awesome Stylesheets">SASS</abbr>, I usually mean <abbr title="Sassy CSS">SCSS</abbr>. I’m aware of the whole <a href="http://css-tricks.com/sass-vs-less/"><abbr title="Syntactically Awesome Stylesheets">SASS</abbr> vs. LESS</a> debate, but I’m not going there.</li>
<li><a href="http://git-scm.com/">Git</a> / <a href="https://github.com/">GitHub</a> — I hate to admit it, but when I first started out, I edited sites directly on the live server via <abbr title="File Transfer Protocol">FTP</abbr> without a version control system. <em>Never again!</em> There are many <a href="http://git-scm.com/documentation">great</a> <a href="http://git-scm.com/book">free</a> <a href="http://gitready.com/">resources</a> available online for learning Git.</li>
<li><a href="http://haml.info/"><abbr title="HTML Abstraction Markup Language">HAML</abbr></a> / <a href="http://daringfireball.net/projects/markdown/">Markdown</a> — makes writing <abbr title="HyperText Markup Language">HTML</abbr> quick and enjoyable. This post was written in Markdown.</li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a> — I’m just dipping my toes into Ruby, but I’m hoping to develop my skills in Ruby and <a href="http://rubyonrails.org/">Ruby on Rails</a> over the next year. I’ve also wanted to expand my knowledge beyond the <abbr title="Linux Apache MySQL PHP">LAMP</abbr> stack for some time.</li>
<li><a href="http://octopress.org/">Octopress</a> — this site is powered by Octopress, which is an excellent framework designed by <a href="http://brandonmathis.com/">Brandon Mathis</a> for <a href="https://github.com/mojombo/jekyll">Jekyll</a>. When I set out to build this blog I knew I wanted a static (“baked”) site, and <a href="http://theindustry.cc/2012/03/06/2-responsive-sass-awkward-hugs/">awareness of Octopress</a> and the benefits “baked” blogs has been increasing lately.</li>
<li>Command line — it goes without saying that the languages and frameworks listed above require some knowledge of, and being <em>comfortable in the command line</em>. This is something I’m still relatively new to, but I’m already seeing improvements in my productivity as I do more in the command line.</li>
</ul>
<h2>Tools</h2>
<ul>
<li><a href="http://www.sublimetext.com/2">Sublime Text 2</a> — I recently switched to Sublime Text 2 for all of my text editing / coding and it’s phenomenal. I can’t recommend it highly enough. This is responsible for my single biggest jump in speed / productivity in a long time. <a href="http://opensoul.org/blog/archives/2012/01/12/getting-started-with-sublime-text-2/">Learn it</a> <a href="http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/">inside out</a>, learn all the keyboard shortcuts and <a href="http://net.tutsplus.com/tutorials/tools-and-tips/essential-sublime-text-2-plugins-and-extensions/">get as many great extensions as you can</a>. Opening files in Sublime Text 2 from the command line is also a great way to speed up your workflow — it’s lightning quick.</li>
<li><a href="https://www.google.com/chrome">Chrome</a> / <a href="https://tools.google.com/dlpage/chromesxs">Chrome Canary</a> — these days I’m mostly designing in the browser, and I’ve recently switched to Chrome and Chrome Canary as my default browsers for all development, due to the excellent <a href="https://developers.google.com/chrome-developer-tools/docs/overview">Chrome Developer Tools</a>. To get the most out of the power of Chrome’s Developer Tools, it’s worth taking the time to <a href="http://youtu.be/N8SS-rUEZPg">learn</a> <a href="http://jtaby.com/2012/04/23/modern-web-development-part-1.html">what they can do</a>, check out <a href="https://vimeo.com/40929961">some of the recent advances</a>, and install some developer extensions. For debugging or designing in the browser, you should definitely check out the amazing <a href="https://github.com/NV/chrome-devtools-autosave">Chrome DevTools Autosave</a> by <a href="http://elv1s.ru/">Nikita Vasilyev</a>. It allows you to edit <abbr title="Cascading Style Sheets">CSS</abbr> and JavaScript in Chrome’s Developer Tools and autosaves those changes to your source files (no more copy and paste).</li>
<li><a href="http://incident57.com/codekit/">CodeKit</a> — makes running projects using <abbr title="Syntactically Awesome Stylesheets">SASS</abbr>, Compass, <abbr title="HTML Abstraction Markup Language">HAML</abbr>, <a href="http://lesscss.org/">LESS</a>, etc a breeze. It compiles everything on the fly, live reloads your browser, optimises images and a lot more.</li>
<li><a href="http://smilesoftware.com/TextExpander/">TextExpander</a> — since I move to Sublime Text 2, I needed a new way of managing my code snippets. I’ve been trialling TextExpander, which is a great system, but I now think I’ll move all of my code snippets to <a href="https://gist.github.com/">Github Gists</a> and insert snippets into Sublime Text 2 using this brilliant <a href="https://github.com/dlazic88/Gist">Gist plugin</a>.</li>
<li><a href="http://www.mamp.info/en/mamp-pro/">MAMP Pro</a> — an essential part of my toolkit for local development, plus it allows you to quickly setup virtual hosts, which is useful for local Windows and Internet Explorer testing on the Mac. Recently, I’ve been using this less now that I’ve started building sites in Ruby and using <a href="http://en.wikipedia.org/wiki/WEBrick">WEBrick</a>.</li>
<li><a href="http://www.iterm2.com/">iTerm 2</a> — this is a great Terminal replacement for the Mac. I often have several different shells open at a time, and iTerm 2’s split vertical view is perfect for this.</li>
<li><a href="http://www.vmware.com/products/fusion/overview.html">VMware Fusion</a> — for testing and debugging sites in Windows and Internet Explorer. Using MAMP Pro’s virtual hosts you can also <a href="http://seansperte.com/entry/Setting_Up_a_Killer_Local_Web_Development_Environment_on_a_Mac_with_MAMP_an">setup a local development environment for testing on Windows</a>.</li>
<li><a href="http://labs.adobe.com/technologies/shadow/">Adobe Shadow</a> — this website was designed exclusively in the browser (Chrome) on my MacBook Pro, but throughout the entire process the site was also open in Adobe Shadow on my iPhone 3GS and iPad 2. This has totally transformed my mobile-first, responsive web design process. <em>These devices are no longer used for testing the assumptions I’ve made in a narrow width desktop browser, they are now central to the design and development process</em>. On a side note, this really drains battery power fast, so keep all devices plugged into a power supply.</li>
<li><a href="https://www.dropbox.com/">Dropbox</a> — this is an obvious one, but worth mentioning. Essential for syncing documents between different devices and backup of files that don’t live in version control.</li>
</ul>
<h2>Productivity Tools</h2>
<ul>
<li><a href="http://www.alfredapp.com/">Alfred</a> — I’m a recent convert to Alfred and I love it. Now that I’m using the command line a lot more, I find I’m using my trackpad and mouse less. Alfred allows me to launch applications, search Google and get things done quickly without leaving the keyboard.</li>
<li><a href="http://mizage.com/divvy/">Divvy</a> — great for quick and easy window management, for example, if you have your browser and text editor open alongside each other.</li>
</ul>
<h2>Conclusion</h2>
<p>Keeping up with the rapid change in front-end web development can be pretty challenging at times, but it can also be a lot of fun. Although it may sound like I’m using a lot of different tools in my workflow, I can pretty much get by for most development with just Chrome, Sublime Text 2, iTerm 2 and Adobe Shadow open at any one time. I’ve never been happier with my front-end development tools / process and look forward to refining this setup over the coming year.</p>
<p>If anyone has any suggestions, additions, or comments, I’d love to hear from you.</p>
</div>
</article>
<div class="pagination">
<a class="prev" href="/archives/page/2/">« Older</a>
<a href="/archives">Blog Archives</a>
</div>
</div>
<aside class="sidebar">
<section>
<p class="biog"><a href="https://twitter.com/jameslutley">James Lutley</a> is a front-end web developer living in Da Nang, Vietnam <em>(soon relocating to London)</em>. <a href="/about">More about me »</a>
</section>
</aside>
</div>
</div>
<footer class="footer" role="contentinfo"><p>
© 2013 James Lutley
<span class="credit">— Powered by <a href="http://octopress.org">Octopress</a>, fonts served by <a href="https://typekit.com/colophons/qlz5kkl">Typekit</a>, hosted by <a href="https://github.com/jameslutley/jameslutley.github.com/">GitHub</a>.</span>
</p>
<p class="top"><a href="#">Back to top ↑</a></p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'jameslutley';
var disqus_developer = 1;
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script>
var _gaq=[['_setAccount','UA-11308838-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>