When using Grunt a nice way of revving js files (or any other, really) is to use grunt.template.today to append today’s date to the file-name. This helps keeping everything organized and is good for cache busting.
uglify: {
options: {
banner: '<%= banner.top %>'
},
dist: {
src: ['js/scripts.js', 'js/more-scripts.js'],
dest: 'js/scripts.v<%=pkg.version %>.<%= grunt.template.today("yyyy.mm.dd") %>.min.js'
}
}
While loading a page you might see a flashing of a raw Angular template for a very short but noticeable time. For example if we write:
<!doctype html>
<html lang="en" ng-app ng-controller="thisAppCtrl">
<head>
<meta charset="utf-8">
<title>Search for: {{query}}</title>
<!-- ....... -->
Thus binding a search input to our page title we still might see the raw template flashing while loading. To avoid this inconvenience we ca leverage the ng-bind-template directive like so:
<!doctype html>
<html lang="en" ng-app ng-controller="thisAppCtrl">
<head>
<meta charset="utf-8">
<title ng-bind-template="Search for: {{query}}">This text will be replaced as soon the page loads.</title>
<!-- ....... -->
Read more at Angular API: http://docs.angularjs.org/api/ng.directive:ngBindTemplate
Here’s how to let Angular automatically display the index number of a given item in a ng-repeat.
Obviously as $index is zero-based we need to add 1.
<section ng-controller="RecipesCtrl">
<ul>
<li ng-repeat="recipe in recipes">
{{$index + 1}} - {{recipe.dish}} is from {{recipe.country}}
</li>
</ul>
</section>
This will result in something like:
And so on…
I was about to write down a quick post about this topic, but it turns pout Treehouse has published this video to provide a clear answer. In less than 1.30 minutes the differences are finally cleared out.
Why is it a good idea to let Google host your jQuery (and any other library you happen to use)?
As John Gietzen points out in this Stack Overflow answer:
Still, if we want to be sure that our users get a copy even during CDN downtimes or maybe viewing our site offline from a local copy we can provide a fallback to a local copy of our desired library. Here’s one way to do it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script><!-- load bundled jQuery if Google CDN is out of reach --><script type="text/javascript">// <![CDATA[
!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.8.2.min.js"%3E%3C/script%3E'))
// ]]></script>
If you want your full file paths to be shown on top of the Finder window while navigating through your folders (like in the picture), then it’s real simple.
Open up the Terminal and copy/paste this string right here:
defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES
Hit enter and you should be good to go.
The customization while take place on next reboot, but if you want it straight away just restart the Finder like so:
killall Finder
I recently upgraded my snippet expander from Zen Coding to Emmet in Sublime Text 2.
Good news is that Emmet comes with native SASS, SCSS and Stylus support so now Zen Coding-like snippets are now available also when writing SASS code.
If you installed Emmet too you may encounter a problem with your old custom snippets being now unavailable. As stated in their Github Repo this is due to Emmet’s overriding the dafault Tab expansion. To get your snippets back you just have to locate your Emmet.sublime-settings (on a Mac click on Sublime Text > preferences > browse packages > Emmet folder, copy and paste that file in your User folder.
If you’re a Sublime Text 2 user and a SASS/SCSS/Less/Stylus lover you may have noticed that ST2 does not come with bundled code coloring for those syntaxes.
Luckily adding a proper code coloring to your stylesheets is extremely simple.
Pop up your Package Control (CMD+Shift+P), look for Install Packages and then for your favourite syntax (say SCSS). Install the bundle and you’ll be ready to go.
It’s as easy as that.
A couple of days ago I coded a SASS mixin for fast creation of CSS triangles. At the end of it I found myself thinking whether there could be a solution to create a mixin that’d be able to easily aim the triangle in every direction we wish, without being tied to the basic eight directions shown in that article.
I think I came up with the right solution, although it has to be noted that it relies on CSS3 2D transforms so this may cause support issues in IE, being transforms supported only form IE9 on. In this example I also use Compass as a helper for our rotation, although I’ll explain how we can achieve the same effect with SASS only.
I’ve always been quite interested in typography but I’m surely far from considering myself as the greatest expert in history in this field. This is probably only one of the many reasons that recently made me feel like I needed a little refresher, and a much more solid, scientific background for my font and font-sizing decisions while coding.
One of the most interesting topics I concentrated on was about Vertical space and rhythm.
But while I was quite confident with the theory I struggled a little bit when it came up to apply what I read. What I was missing was a visual clue to keep track of the rhythm of my page.
I’ve looked for a bookmarklet that could help but wasn’t quite satisfied of none I tried, so I decided to code myself a little piece of JavaScript to test my pages in the development stage according to custom line heights.
I finally decided to convert it into a bookmarklet and called it Portamento. By publishing it on the web I hope it will be useful for other people too.
You can try/get it here.