forked from imathis/octopress
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
193 lines (130 loc) · 16.9 KB
/
Copy pathatom.xml
File metadata and controls
193 lines (130 loc) · 16.9 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
183
184
185
186
187
188
189
190
191
192
193
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Heartcode Blog]]></title>
<link href="http://heartcode.github.com/atom.xml" rel="self"/>
<link href="http://heartcode.github.com/"/>
<updated>2012-11-23T00:41:11+00:00</updated>
<id>http://heartcode.github.com/</id>
<author>
<name><![CDATA[Robert Pataki]]></name>
<email><![CDATA[heartcode@robertpataki.com]]></email>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Fixing the trailing slash issue in the invalid Chrome extension manifest file]]></title>
<link href="http://heartcode.github.com/blog/2012/11/15/fixing-the-trailing-slash-issue-in-the-invalid-chrome-extension-manifest-file/"/>
<updated>2012-11-15T23:45:00+00:00</updated>
<id>http://heartcode.github.com/blog/2012/11/15/fixing-the-trailing-slash-issue-in-the-invalid-chrome-extension-manifest-file</id>
<content type="html"><![CDATA[<p><a href="http://heartcode.github.com/blog/2012/11/15/fixing-the-trailing-slash-issue-in-the-invalid-chrome-extension-manifest-file/"><img src="http://heartcode.github.com/images/posts/fixing-the-trailing-slash-issue-in-the-invalid-chrome-extension-manifest-file/fixing-the-trailing-slash-issue-in-the-invalid-chrome-extension-manifest-file.png" width="789" height="443" title="Trailing slash" alt="Trailing slash"></a></p>
<p>The other day I had some spare time and I thought it was a great opportunity to do some JavaScript code refactoring on my <a href="https://chrome.google.com/webstore/detail/fontier/dkbamaalakfhckcidgiigdinhcncaeae" target="_blank">Fontier Chrome extension</a>. The refactoring process didn’t take a long time, because the application itself is very simple. I tested the new version of the add-on in the newest <strong>Chrome (Version 23.0.1271.64)</strong> and in <strong>Canary (Version 25.0.1325.0 canary)</strong> and after seeing that it worked fine in both, I decided to update the extension in the Chrome Web Store.</p>
<p>After I finished refactoring my extension code I logged in to my Developer Dashboard and I updated the extension using the ZIP upload tool. When I was done with the update I removed the 0.3 version of Fontier from my Chrome and I went to the Chrome Store to install the new version. For some reason Chrome didn’t let me install the extension :)</p>
<!--more-->
<p>When I hit the ‘Add to Chrome’ button, the following error message popped up under the address bar:</p>
<blockquote><p>“Package is invalid. Details: ‘Illegal path (absolute or relative with ‘..’): ‘/img/icon_48.png”.</p></blockquote>
<h2>But that worked before…</h2>
<p>Fair enough, I thought I broke the <strong>manifest.json</strong> file. I was sure that apart from increasing the ‘version’ from ‘0.3’ to ‘0.4’ I didn’t change anything, but I quickly scanned through the manifest to make sure everything was alright. Esentially everything was the same as it was before:</p>
<pre><code>{
"name": "Fontier",
"version" : "0.4",
"minimum_chrome_version": "22.0.1229.79",
"manifest_version": 2,
"description" : "The quickest way to change the default font size in Chrome. Great for testing Responsive websites using em and percentage units.",
"permissions": ["fontSettings"],
"icons": {
"16": "/img/icon_16.png",
"48": "/img/icon_48.png",
"128": "/img/icon_128.png"
},
"browser_action": {
"default_icon": "/img/icon_48.png",
"default_popup": "/html/popup.html"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}
</code></pre>
<p>Obviously I triple checked the path of the icon files, but I couldn’t see anything wrong with them, so I Googled the error message, and I’d found this <a href="https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-extensions/4BSWseDPjZM" target="_blank">Google Groups thread</a>. So it seemed that I wasn’t the only one with this problem. It looked like that something had changed in Chrome and it no longer liked the paths of the icons. The strange thing was that I couldn’t find anything about any relevant changes in the <a href="http://developer.chrome.com/extensions/manifest.html#icons" target="_blank">API documentation</a> either.</p>
<p>I guess your first bet is to remove the trailing slash from the paths, and you’re absoutely right! That was my first thing to do, but for some reason, when I updated the extension, it still didn’t work. From that point I spent long hours of changing-zipping-uploading the extension but it kept throwing the error messages telling me that the manifest file was somewhat broken. After about 4 hours of trying I gave up… I thought it was probably Chrome being funny and I really had to wait until a new version comes out.</p>
<h2>The ‘painful’ aha moment</h2>
<p>I just couldn’t let it go that easy :) The next day I spent another couple of hours of investigating the issue and I found that whenever one updates an extension, the old version gets cached for quite some time. It was a pretty painful lighbulb moment…</p>
<p>So I went back to my very initial idea of removing that cheeky trailing slash from every single file path in the manifest file and when I updated the extension I took my time and let the server to take its time as well… After about 5 minutes I saw that the very recent version showed up in the <a href="https://chrome.google.com/webstore/detail/fontier/dkbamaalakfhckcidgiigdinhcncaeae/details" target="_blank">Details panel</a> and when I hit the ‘Add to Chrome’ button, it worked!</p>
<p>I genuinely felt stupid for not taking the server caching into consideration, but at the same time I was super happy that eventually Fontier was back to action :)</p>
<p>So, just for your record, here is the new <strong>manifest.json</strong> file whithout any trailing slashes:</p>
<pre><code>{
"name": "Fontier",
"version" : "0.4",
"minimum_chrome_version": "22.0.1229.79",
"manifest_version": 2,
"description" : "The quickest way to change the default font size in Chrome. Great for testing Responsive websites using em and percentage units.",
"permissions": ["fontSettings"],
"icons": {
"16": "img/icon_16.png",
"48": "img/icon_48.png",
"128": "img/icon_128.png"
},
"browser_action": {
"default_icon": "img/icon_48.png",
"default_popup": "html/popup.html"
},
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"
}
</code></pre>
<h2>Lesson learnt</h2>
<p>So it turned out that it indeed was the trailing slash. I figure that something has changed in the extension packager and it no longer lets developers to use the trailing slash in file name paths - which is completely fine. The only problem whith that is that it is not documented and it turns out accidentally :) Luckily the problem wasn’t a biggy, so it was pretty easy to sort.</p>
<p>I actually made the problem worse by not counting with the server caching and not checking the version numbers properly.</p>
<p>That tought me a damn good lesson of patience and to listen a bit more carefully to the tools that I use.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Doing LESS right using compilers]]></title>
<link href="http://heartcode.github.com/blog/2012/03/27/doing-less-right/"/>
<updated>2012-03-27T14:33:00+01:00</updated>
<id>http://heartcode.github.com/blog/2012/03/27/doing-less-right</id>
<content type="html"><![CDATA[<p><a href="http://heartcode.github.com/blog/2012/03/27/doing-less-right/"><img src="http://heartcode.github.com/images/posts/doing-less-right/doing-less-right.jpg" width="789" height="443" title="Screenshot of the Less app for Mac" alt="Screenshot of the Less app for Mac"></a></p>
<p>Developers hate repeating themselves over and over again. It is especially true when we’re talking about writing CSS3 behaviours and we are forced to use the elusive vendor prefixes to tell every single browser what we want them to do. Don’t get me wrong, I don’t think <a href="http://www.netmagazine.com/features/big-question-are-vendor-prefixes-hurting-web" target="_blank">vendor prefixes are necessarily evil</a>, but they are very unconvenient for frequent use.</p>
<!--more-->
<p>Delevopers like to come up with brilliant solutions to problems. <a href="http://lesscss.org/" target="_blank">Less</a> is a good solution for people who want to write less CSS and don’t want to keep repeating themselves. You write some pretty Less code, which then will be compiled on the client side using JavaScript and will be turned into CSS. It works, that’s for sure, but there are some problems, whitch bother me about this solution:</p>
<ol>
<li>You use client-side JavaScript to generate your CSS</li>
<li>You load an external JavaScript file to process your Less files (one extra http request)</li>
<li>There is always going to be a short “psychological” delay between the content loading, the JavaScript loading and running, and the CSS displaying</li>
</ol>
<p>I am not saying that these problems are very concerning, but still there must be a neeter way of doing Less, right?</p>
<h2>Right!</h2>
<p>As I was trying to get my head around Less today, I’ve found a very good <a href="http://fadeyev.net/2012/02/16/less-update/" target="_blank">article about Less compilers</a>. Of course, what a brilliant idea! Use Less as you usually do, but instead of using the cient-side JavaScript solution, you use the compiler, that helps you to generate the output CSS whilst you are developing your content. The article mentions some cool Less compilers for <a href="http://wearekiss.com/simpless" target="_blank">Windows</a>, <a href="http://incident57.com/less/" target="_blank">Mac</a> and <a href="http://wearekiss.com/simpless" target="_blank">Linux</a>.</p>
<p>Now I am going to quickly go through of setting up the Less.app on Mac and will show you how to use it.</p>
<h2>Using the Less.app (on Mac OS X Lion)</h2>
<p>I tried the Less.app for Mac only, as I refuse to use Windows anymore :) The app is really lightweight (under 3Mb) and absolutely free. You can download it <a href="http://incident57.com/less/" target="_blank">here</a>.</p>
<p>After downloading the app, the user needs to unzip and run it.</p>
<p>The Less.app has a very nice, simple and easy to use UI with two tabs in the header for “Less Files” and “Compiler”.</p>
<h3>Less Files</h3>
<p>In the “Less Files” view you can drag-and-drop a web project on the side bar, and the app automatically searches for Less files in the structure.</p>
<p><img src="http://heartcode.github.com/images/posts/doing-less-right/doing-less-right-drag-drop.jpg" width="789" height="443" title="Adding a project to the Less.app on Mac" alt="Adding a project to the Less.app on Mac"></p>
<p>Once the search is done, you can see your Less files in the “File & Output” panel. According to the Less.app tutorial when you drop your project on the side-bar, the app should automatically offer the output location for the compiled CSS files, but for some reason it didn’t happen to me, so I manually had to set the output folder. To set your CSS output destination folder simpy right-click on the Less file in the list and choose “Set CSS Output Path”. There is an option for minifying your output CSS file, which comes very handy.</p>
<p>You can add multiple projects to the side-bar and then you can manage them separately, which is clever.</p>
<p>Before you compile your files you need to go to the “Compiler” view.</p>
<h3>Compiler View</h3>
<p><img src="http://heartcode.github.com/images/posts/doing-less-right/doing-less-right-compile.jpg" width="789" height="443" title="Compiler view of Less.app on Mac" alt="Compiler view of Less.app on Mac"></p>
<p>In the “Compiler View” you can see a list of your already done and pending processes. In the footer there is a checkbox for automatic compilation on save - this is a very smart feature: If you tick it, the app will automatically compile your CSS file every time you change and save your Less file. On the right hand side of the footer there is a button for clearing the list, and another one for compiling all your Less files.</p>
<h2>Conclusion</h2>
<p>After the very easy and straightforward setup process the Less.app is ready to go. All you need to do is to check if it’s running when you’re working on your project. When you save your less files, the app compiles silently in the background and generates your CSS files.</p>
<p>Whith Less compilers developers can get rid of using JavaScript for generating the CSS on the client-side, whilst they still can use Less code and save precious time for creative coding (and debugging) :)</p>
<p>I’d love to hear your voice! Do you use any Less compilers? What is your experience with them and why do you think using Less compilers is a good/bad idea?</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[The Heartcode blog is back]]></title>
<link href="http://heartcode.github.com/blog/2012/03/18/the-heartcode-blog-is-back/"/>
<updated>2012-03-18T16:01:00+00:00</updated>
<id>http://heartcode.github.com/blog/2012/03/18/the-heartcode-blog-is-back</id>
<content type="html"><![CDATA[<p><a href="http://heartcode.github.com/blog/2012/03/18/the-heartcode-blog-is-back/"><img src="http://heartcode.github.com/images/posts/the-heartcode-blog-is-back/heartcode-blog-octopress.png" width="789" height="335" title="The Heartcode Blog is now running under Octopress" alt="Green heartcode monster and Octopress-puss"></a></p>
<p>It’s been almost a year ago since I’ve started the Heartcode Blog. I’ve wanted it to be my personal journal for writing about my journey from being a Flash Developer switching towards Front-End development, whilst trying new and exciting methods and technologies. I have to admit that beside the daily work and personal projects I’ve been working on it’s been quite difficult to write quality stuff and I didn’t want to post things just for the sake of posting.</p>
<!--more-->
<p>One morning - pretty much at the same time when my <a href="http://heartcode.robertpataki.com/canvasloader" target="_blank">CanvasLoader Creator</a> page went live, our server gave up on traffic and the blog quietly died. Ever since I didn’t feel like blogging until now.</p>
<p>Instead of writing posts I have read a few very interesting <a href="http://pinterest.com/robertpataki/books-worth-reading/" target="_blank">books</a> and <a href="http://pinterest.com/robertpataki/articles-worth-reading/" target="_blank">articles</a>, I worked on a couple of exciting projects at <a href="http://waste-creative.com" target="_blank">Waste Creative</a>, and I also kept working on my personal projects including the <a href="http://github.com/heartcode/CanvasLoader" target="_blank">Heartcode CanvasLoader</a>, Claire’s <a href="http://bubblegraphics.com" target="_blank">new portfolio site</a>, <a href="http://robertpataki.com" target="_blank">my portfolio site</a>, and a JavaScript tutorial for <a href="http://heartcode.robertpataki.com/360-image-slider/" target="_blank">.Net Magazine (issue #224)</a>. Long story short I did loads of things, but blogging wasn’t one of them.</p>
<p>This year I am looking forward to more exciting times than ever. After being a Flash developer for more than 9 years I decided to give it up as a full time occupation and I soon will start working as a full time Front-End Developer at a very cool company called <a href="http://unboxedconsulting.com" target="_blank">Unboxed Consulting</a>, who are using Agile and TDD to deliver robust web applications. It is going to be a big challenge to catch up with the guys in all these things I’ve never done before, but it’s really looking forward to it :)</p>
<p>After riding on the back of the ActionScript wild horse for ages, I will do completely different stuff such as Ruby, HTML, JS and CSS and loads of other things, which I am truly excited about. And this is my main initiative why I want to (re)start blogging. I want to share my thoughts about Front-End Development, and about my way towards being a better developer.</p>
<p>To give things a fresh start, I started using <a href="http://octopress.org" target="_blank">Octopress</a> to replace the good old <a href="http://wordpress.org" target="_blank">Wordpress</a> engine. It looks like a really friendly and awesome tool to use, it is also very well documented. Without having much experience with Ruby I’ve found it pretty straightforward to set up, and so far it does the job perfectly.</p>
<p>I just realised that I already have started doing some Ruby coding with Octopress. Wicked :)</p>
]]></content>
</entry>
</feed>