What is JSHint? It is JSLint tamed for humans.
I always wanted to have JSHint properly integrated into my development flow but never took the plunge. Until now. Prerequisites: nodejs installed in your PATH.
Install JSHint CLI
The command line interface to JSHint can be installed via npm:
npm install -g jshint
And you will be able to do this in the shell:
# JSHint can verify recursively every js file in a folder:
$ jshint .
# … or a single file
$ jshint assets/app.js
# to ignore others' problems:
$ jshint assets/!(vendor|require.js)
assets/app.js: line 23, col 1, 'console' is not defined.
1 error
The jshint command searches the current folder and its parents for a .jshintrc file and falls back to ~/.jshintrc. This enables project-level jshint options. A gitignore-style .jshintignore can be provided to exclude certain files or folders from syntax check.
Note: to have the !() syntax you might need to enable the extglob feature in bash (see bash manpage).
Add JSHint to VIM
Install syntastic. Done.
Syntastic will automatically pick the appropriate syntax checker for most languages. If you happen to have both JSHint and JSLint installed, syntastic has to be configured to ue the former. Add this to vimrc:
let g:syntastic_javascript_checker = 'jshint'
Add JSHint as a compiler to VIM
Useful for JSHinting whole projects with large number of JavaScript files - possibly with many errors.
Install jshint cli (see above) and create ~/.vim/compiler/jshint.vim with the following contents:
CompilerSet errorformat=%f:\ line\ %l\\,\ col\ %c\\,\ %m
CompilerSet makeprg=jshint
Then in VIM comand line:
:compiler jshint
"Validate current folder recursively:
:make .
"Validate current file:
:make %
"Validate selected files:
jshint assets/!(vendor\|require.js)
You might need to add this line to .vimrc to enable advanced patters in bash:
set shell=/bin/bash\ -O\ extglob
Make collects errors output the quickfix window (:copen). You might want to use the location list window instead. In this case use :lmake and :lopen. Read more about quickfix/location list window: :help quickfix.txt.
Credit goes to Jonathan Jacobs for this trick.
Add JSHint to Rake build pipeline
It might be useful to automate running JSHint on the codebase before deployment, from CI or as part of the test phase. Using rake it is as simple as adding this to Rakefile (replace assets with the folder to be JSHinted):
task :jshint do
system('jshint', 'assets') || abort('JSHint check failed')
end
The downside of this approach is that it requires JSHint cli to be installed. If that’s not an option, there is a gem called jshintrb which a provides ruby wrapper around JSHint and a Rake task (JavaScript runtime is still required).
Install:
gem install jshintrb
Or add this line to Gemfile:
gem "jshintrb", "~> 0.2.1"
Add jshint task to Rakefile:
require 'jshintrb/jshinttask'
Jshintrb::JshintTask.new :jshint do |t|
t.pattern = 'assets/**/*.js'
t.exclude_pattern = 'assets/{vendor/**/*,require}.js'
t.options = JSON.parse(IO.read('.jshintrc'))
end
Cons of JshintTask: does not use .jshintignore, neither the same magic for config lookup as JSHint cli does.
The common approach is width:100px; left:50%; margin-left:-50px which is simple but will only work with fixed width. Here is how to do it in a more flexible way.
The CSS:
.container {
/* fixed position a zero-height full width container */
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
/* center all inline content */
text-align: center;
}
.container > div {
/* make the block inline */
display: inline-block;
/* reset container's center alignment */
text-align: left;
}
…and HTML:
<div class="container">
<div>I will always be at the top center.</div>
</div>
Tested on recent Chrome, Firefox, iOS 5, Android 4, IE9. Should work in every browser that supports inline-block. Try it on the demo page.
The result of a recent struggle with IFRAMEs on iOS Safari is an interesting discovery: IFRAMEs can expand to fit their (content documents) content without any JavaScript. Even cross-domain! There are two important notes:
- Adding
scrolling="no" attribute to IFRAME disables this behavior.
- It only works with dynamically changed content: the IFRAME will not fit the initial content.
Example code:
<iframe width="100" height="100" src="content.html"></iframe>
content.html:
<div>
<button
type="button"
onclick="this.parentNode.style.height='300px'">
resize
</button>
</div>
Click the button and see the magic! Try example code online from your iOS device.
Tested on iOS4 and iOS5, does not work in any other browser I tried. Could not find any relevant documentation on this behavior except a StackOverflow post.
GitHub Pages are the perfect way for geeks to create personal or project websites, blogs. GitHub uses Jekyll, a static site generator.
Requirements
Install Jekyll if you want to preview the generated pages locally. Ruby and Gem are the only prerequisites.
gem install -v 0.11.0 jekyll
Optional: install Pygments if you want to test code syntax highlight locally. See the Jekyll Install page for details. It is recommended to use the same Jekyll version as GitHub if you want to push it.
Create the Basic Layout of Your Site
.
├── _layouts
│ └── default.html
├── _posts
│ └── 2011-11-11-hello-world.markdown
└── index.markdown
default.html will hold the HTML code that wraps your content, e.g:
<!doctype html>
<html>
<head>
<title>Getting Started with GitHub Pages and Jekyll</title>
</head>
<body>
{{ content}}
</body>
</html>
Fire up your favorite text editor, open _posts/2011-11-11-hello-world.markdown and create your first post in your favorite syntax (mine is Markdown). The post file name must start with a properly formatted date.
---
title: My First Post
layout: default
---
## Hello world!
Now you can run Jekyll locally:
jekyll --server --auto
Open http://localhost:4000/2011/11/11/hello-world.html and you should see the miracle.
It is useful to have an index.html to list your posts, let’s create index.markdown:
---
title: My First Jekyll Blog
layout: default
---
{% for post in site.posts %}
- [{{ post.title }}]({{ post.url }})
{% endfor %}
Open http://localhost:4000/ and voilà! Now you can add posts, improve the layout and implement some nice design. The following pages are useful for learning more about the tools used:
Push it to GitHub
Once you are happy with the newly created site, you can publish it to GitHub. Two options are available:
More instructions can be found at the GitHub Pages Introduction.
Tips and Tricks
Use baseurl
If you are creating project pages, every url has to be prefixed with the project name, e.g:
<a href="/myproject{{ post.url }}">{{ post.title }}</a>
It can even be made configurable:
<a href="{{ site.baseurl }}{{ post.url }}">{{post.title }}</a>
Create _config.yml with the following content:
baseurl: /test
Override this with Jekyll’s --base-url [url] command line switch locally if you like so (e.g. to serve from the root).
Use HTML5 in Pages or Layouts
Maruku understands HTML5 tags. Add this to your _config.yml:
markdown: maruku