RICHARD VENNEMAN
22 year old adventurous developer.
I love good design and focus on creating great user experiences.
<small>Currently busy creating awesome digital experiences at Noorderstorm.</small>
Twitter- LinkedIn
- Tumblr
- GitHub
- Contact
-
Tweets
- @dirksierd hoorde zoiets ja :p.. Werken.. Steen.. Leven
- Winkels dicht? :(
- @simonvenneman haha arme Luuk! ;( Jo succes met examen vanmiddag!
- Is this the prettiest Ruby if-expression one liner? if index % 3 == 0 then row += 1 end
- @dirksierd @tjosinga sweeet
- .@RubyMotion makes my nights worthwhile and fun!
- @jellea Nerd version: Tried IcedCoffeeScript? RubyMotion? Parse? :D
- @dirksierd oh hij linkt bij Installation naar mijn StackOverflow antwoord
- @dirksierd check ook het antwoord van SO bij de laatste link :)
- @dirksierd neeeee ik ga dood. Dit is te goed, precies wat ik nodig had. Dank vriend.
- Zooo Kinect is vet! Die camera is echt goed en voice commands.. :O http://t.co/IMJzrvlM
- Optreden van vader en band bijgewoond. Baas! http://t.co/7mGWIhkw
-
Info
- Development & Interaction at NoorderstormMedia Production | Groningen Area, Netherlands, NLSummaryCurrently venturing into unexplored and exciting areas running a web- and mobile applications business.
In January 2012 Noorderstorm was launched. We create engaging digital experiences for web and mobile.
I deliver these experiences by thinking up and implementing great User Interfaces.
I have experience with lots of web templating engines and preprocessors. To make interactive stuff happen, I write CoffeeScript/Javascript.
Next to web apps I've created a couple of iPhone apps. In pursue of great user experiences I'm currently expanding my knowledge about Objective C.Specialties: User Interface Design, Front-end development, Mobile Application DesignExperience- Jan 2011 - PresentDevelopment & Interaction / NoorderstormNoorderstorm is the digital agency from Fryslân, specialized in creating engaging experiences for web and mobile. I am responsible for the front-end development and Interaction Design.
- Jan 2010 - PresentOwner / Nightly VenturesAt Nightly Ventures I think up, design & develop mobile applications.
- Sept 2010 - Jan 2011Internship Student / ByYourSite BVAt Bys, I wrote Javascript and developed iOS applications.
- Oct 2008 - Mar 2010Co-owner / 1stNatureAt 1stNature I learned to work with web technologies such as CSS preprocessors, HTML templating engines, Javascript frameworks and Ruby on Rails. I applied these technologies in web-based healthcare tools.
Education-
2007 - 2011Noordelijke Hogeschool LeeuwardenBachelor of Multimedia in Mobile application design
-
2001 - 2007De Nieuwe VesteHAVO in Economics and sociology
Additional Information-
Websites:
-
Honors:1st place (group) in De Friesland gameconcept contest, 2009
-
Interests:Web & Mobile technologies, Design, Arthouse & Foreign movies, Gaming, Music, Longboarding
-
Posts
If you’re awesome and practice test-driven development and you happen to know interwebs memes like Nyan Cat, you should definitely check out Nyan Cat RSpec Formatter. It takes your RSpec test results and displays them in the familiar Nyan Cat rainbow. Nyan Cat music not included.
Those who are willing to educate themselves and commit to improving their craft have an amazing opportunity to be on the forefront of design, to demand higher rates, and work on more interesting projects.
Lately I have been working a lot with YAML data in my HAML templates via Middleman. YAML is great for providing data to display on your site. It allows for easy modification and addition trough separate
.ymlfiles instead of having to copy-paste HTML/HAML. YAML is very intuitive to write and work with from Ruby (and templates). But if you are in need of some good documentation, check out this YAML Cookbook.Jonathan Snook shares his vision and some good tips and techniques on how to organize your CSS code.
- Static site development with Middleman
It’s great to use innovations such as CoffeeScript, Sass/Less and templating engines like Haml and Slim but they all need to be compiled in order to be understood by browsers. Command-line tools are provided but it can get tedious when working with multiple of these tools at a time. Building a huge rakefile might be a solution but it would be nice to have a flexible and ready to use solution, right? Luckily there is!
Enter Middleman: static site development at its finest. Middleman is static site generator based on Sinatra. It consists of a single command-line tool that watches a directory for changes and runs a server serving the compiled files.
Installing Middleman
To install Middleman and initialize a project:
$ cd my_project $ gem install middleman $ middleman init my_project --bundler --template=html5I used two flags:
--bundlercreates a Gemfile containing a fixed version of middleman itself.--template=html5adds HTML5 Boilerplate as a starting point. You can use the addedindex.htmlandstyle.cssif you are OK with using plain HTML and CSS. I prefer HAML and SASS. You can drop in these HAML/SASSified versions of HTML5 Boilerplate I created. Or download the latest versions from this actively maintained Compass version of HTML5 Boilerplate at GitHub.Start the server from the command-line:
$ cd my_project $ middleman server.. and open
http://localhost:4567in your browser.Now just start developing your site! Any file you drop in your projects source folder will be automatically compiled by Middleman. The terminal will also notify you of any errors in your files.
Exporting your site
When you are done developing your site you will need to build it. Building means compiling all the source files for a production environment. This can be achieved by running the
middleman buildcommand:$ cd my_project $ middleman buildYou will find the compiled site in the
buildfolder.Compressing assets
Middleman will optionally minify CSS & Javascript and compress images. You can enable these optimizations by editing the
config.rbfile to include the following lines:configure :build do activate :minify_css activate :minify_javascript activate :smusher endSmusher image compression requires for the
middleman-smushergem to be installed:$ gem install middleman-smusherIf you’re using Bundler, just add
gem "middleman-smusher"to your Gemfile and runbundle.Automatic browser reloads with LiveReload
LiveReload is a Ruby gem and browser extension which automatically reloads your browser when you make changes to source files.
This is how to install it on OSX:
- Add
rb-fseventandguard-livereloadto your Gemfile - Run
bundle - Install a browser extension (Safari, Google Chrome, Firefox)
- Run
middleman server --livereload - If you’re using Safari, right-click the page and click ‘Enable LiveReload’
Your browser will now automatically reload upon file changes!
Follow the installation instructions on the LiveReload Github page for instructions on how to install on Linux and Windows.
Conclusion
Working with Middleman is a really pleasant experience. It definitely changed the way how I work on static sites. Its flexible system allows you to swap any templating or markup language and there are a whole lot of other features to discover like YAML data, templates & layouts and a ‘blog mode’. I tried a whole lot of other solutions like Nanoc and writing my own rakefiles, but in the end I definitely recommend Middleman. For more information, check out the excellent documentation over at middlemanapp.com.
- Add
I am currently working on a responsive design which contains an embedded Vimeo video. After spending an hour trying to get the damn video to scale (while maintaining aspect ratio) I found this wonderful jQuery plugin called FitVids. It handles it all in just one line:
($ '#videoContainer').fitVids()Check it out!
Good is the enemy of Great Latin-1 is the enemy of UTF-8
You write web apps. You understand the web is global, and want to support internationalization. You want UTF-8.
UTF-8 is extremely sane. Well, as sane as an encoding can be that features backwards-compatibility with ASCII. Everything…
It came to my attention that teehan+lax, the team behind the excellent iPhone GUI PSD did an Android GUI PSD too. This PSD contains all Android interface elements so you can use them in your Photoshop mockups. Check out their downloads page too, sweet!
- Automated Jasmine Javascript testing
Last week I went on a bootcamp with my team to build a prototype for an upcoming web app. We decided on a test-driven approach to the project. I feel like this is one of the best decisions we’ve ever made. It might be slow to get into, but once you are you never want to go back to regular ‘ol programming style. Never I’ve had so much faith in the code I’ve written. It also really is a huge step forward in productivity.
I’m working quite a lot with Javascript as I’m the front-end developer on the team. In this tutorial I will now explain how I handle with tests in Javascript and I hope I can convince you of the awesomeness that is test-driven development!
The ingredients
There are a couple of ingredients to the automated testing workflow I’ve come to love:
- Jasmine - A testing framework for Javascript
- Jasmine-jquery - Some sweet Jasmin selectors and fixture support
- CoffeeScript - Programmer happiness++
- Jasmine Headless Webkit - Outputs feedback into the terminal
- Guard - Makes it possible to run tests directly when you save them
Prerequisite
Jasmine Headless Webkit uses a QTWebKit Widget to run the tests in. Therefor we’ll need QT on our system. If you’re on OSX, the easiest way to install it is via Homebrew:
$ brew install qtIf you’re on another OS check the Jasmine Headless Webkit website and look in the Qt 4.7.X section for instructions.
Setting up the Ruby environment
If you haven’t already done so, install RVM by reading the installation documentation. Now create a new RVM configuration by running the following commands in a terminal in your project directory:
$ rvm use 1.9.2@myproject --create $ echo 'rvm use 1.9.2@myproject' > .rvmrcThis will create and use an enclosed Ruby 1.9.2 environment within your project and will make sure it will use the correct Ruby version every time you enter your project via the command line. Try this by
cd ..andcd myproject. The first time, you’ll be asked to confirm you want to use the.rvmrcfile we just created.We will now create a Gemset using Bundler. With Bundler we will create a “Gemfile” which will list the gems needed for our project. Installing it is as easy as running:
$ gem install bundlerNow create a file called
Gemfile(yes, without an extension) in your project directory root and add the following lines to it:source 'http://rubygems.org' gem 'jasmine' gem 'jasmine-headless-webkit' gem 'guard-jasmine-headless-webkit'Save the file and run the following command:
$ bundleThis will download and install the gems and their dependencies to a contained gemset within the RVM environment. It will also create a new file called “Gemfile.lock” which is kind of a binary file containing the gems.
We’re now ready to configure our environment. Let’s get started!
Setting up Jasmine
Jasmine comes with an
initfunction which will set up a directory structure for you. Run the following command from your project root directory:$ bundle exec jasmine initWith bundle exec, the jasmine executable will be called from the gemset.
Download the latest release of jQuery and drop it into
public/javascripts/vendor(you’d have to create the ‘vendor’ folder). Next download jasmin-jquery tospec/javascripts/helpers.We’re now going to edit the Jasmine configuration file. Open up
spec/javascripts/support/yasmine.ymland replace the contents with the following:src_files: - 'public/javascripts/vendor/jquery-1.6.2.min.js' - 'public/javascripts/*.{coffee,js}' spec_files: - '**/*[sS]pec.{coffee,js}'This ensures that jQuery is picked up at the start so we can use it in our tests. We’ll also tell Jasmine to look for .coffee files since Jasmine Headless Webkit supports CoffeeScript!
You could actually start testing right now but there’s one more thing..
Configuring Guard to automate testing
Guard lets us start a process when filesystem events occur. In our case, Jasmine will run the tests when we edit them. To enable Guard for our project, run the following command:
$ guard init jasmine-headless-webkitThis creates a “Guardfile” with all configuration we need. To start watching your project, simply run
guardfrom your project root. This will automatically run all tests when you save a spec file.Bonus (Growl notifications): Add the gems
rb-fseventandgrowl_notifyto your Gemfile and runbundleto enable Growl notifications for Guard!Let’s test our testing setup
Finally we’ve got our testing environment all set up so it’s time to test if our setup works.. The actual writing of tests is beyond the scope of this tutorial but for now I’ve provided a spec and an implementation file. I might do an in-depth testing tutorial soon.
spec/javascripts/pwd_spec.coffee
public/javascripts/Password.coffee
If you’ve run
guardalready, you should see that the 5 tests that came with Yasmine passed. Once you’ve created above files there should be 8 passing tests.Further reading
We had to do quite some research to find the optimal testing workflow and I believe we succeeded in finding our way in this. I hope this setup will make the awesome test-driven development that everyone should practice somewhat easier.
If you’d like to learn more about this workflow, you’ll like these resources:
- Meet CoffeeScript Peepcode - all about writing Jasmine tests in CoffeeScript!
- jasmine-ajax - Easy AJAX testing
- Jasmine wiki
- Content-Aware Fill watermarks
Just discovered a great use for Photoshop’s Content-Aware Fill function: hiding watermarks in stock images!
For a design I’m working on I needed a soil background. I was planning on just trying different ones but I didn’t want to buy them all. E.g. this photo on Dreamstime has this big Dreamstime logo in the center. Content-Aware Fill-ing this section hid the watermark perfectly. This way I could easily try several images in my comp before buying a larger size.
Fantastic browser extension (Safari, Chrome) to identify fonts. Works by hovering text, clicking reveals detailed info such as font-size and line-height.
- Photoshop New Doc iOS & Android presets
Photoshop gives you the ability to create custom “New Document” presets. These come in quite handy when you’re designing for multiple (mobile) screen resolutions. From the “New Document” dialog you can create and delete presets, but for some reason there are no edit or export options. Fortunately we can add and edit these presets by editing a specific TXT file.
The default New Document presets get stored in a file called
Default New Doc Sizes.txtlocated inApplications/Adobe Photoshop CS5/Locales/en_US/Support Files. If you’re on Windows it should be in/Program Files/Adobe/Adobe Photoshop CS5/Required/. You can edit this file to your likings, by adding new presets and deleting any unneeded presets. Below are the presets I use for Mobile (iOS and Android) design. You can add them between “Standard screen sizes” and “Generic mobile device sizes”, somewhere around line 189:These values are taken directly from the iOS HIG and the Android Developers Guide. Note that these lines include the correct resolutions (pixels/inch) which could come in handy if you’re going to print your designs. Also, Color Profile: “Don’t Color Manage this Document”. Read Setting Up Photoshop For Web, App and iPhone Development on Smashing Magazine for more information on that subject.
The presets are currently subsets of the “Mobile & Devices” section. Unfortunately due to localization restrictions, it seems you cannot create your own sections. Hope it is of some help anyways!
-
Repositories
- 1 fork / 1 watcher / Pushed May 07, 12
- Compass version of the Html5 Boilerplate project by Paul Irish1 watcher / Pushed May 21, 11
- The iconic font designed for use with Twitter Bootstrap244 forks / 3697 watchers / Pushed May 19, 12
- A methodology for documenting CSS and generating styleguides58 forks / 1249 watchers / Pushed May 16, 12
- Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.415 forks / 3497 watchers / Pushed May 10, 12
- 1 fork / 1 watcher / Pushed May 07, 12
- PreRelease Versions, Examples, and Documentation for the Titanium Parse Module. (Valid subscription from marketplace needed to use modules)2 forks / 6 watchers / Pushed May 06, 12
- An Active Record pattern for your Parse models on RubyMotion.1 fork / 54 watchers / Pushed May 05, 12
- A creative-commons book on Backbone.js for beginners and advanced users alike232 forks / 3693 watchers / Pushed May 05, 12
- Unofficial API for the MyAnimeList.net's website.5 forks / 32 watchers / Pushed Apr 29, 12
- A professional front-end template that helps you build fast, robust, adaptable, and future-proof websites.1889 forks / 12652 watchers / Pushed Apr 25, 12
- Wax is a framework that lets you write native iPhone apps in Lua.54 forks / 927 watchers / Pushed Apr 06, 12
- A folding grid for responsive design.107 forks / 1053 watchers / Pushed Mar 22, 12
- OAuth Adapter for Titanium, CommonJS style2 forks / 8 watchers / Pushed Feb 14, 12
- Compass version of the Html5 Boilerplate project by Paul Irish63 forks / 649 watchers / Pushed Jan 25, 12
- A Textmate bundle for the Slim language (http://slim-lang.com), based on the Ruby Haml bundle.16 forks / 93 watchers / Pushed Nov 16, 11
- An Experiment with Mobile-First Images that Scale Responsively & Responsibly76 forks / 1034 watchers / Pushed Sep 07, 11
- Gridless is an awesome HTML5 and CSS3 boilerplate for making responsive, cross-browser websites with beautiful typography76 forks / 775 watchers / Pushed Aug 29, 11
- The Missing Android Bundle for TextMate.10 forks / 79 watchers / Pushed Jul 25, 11
- Compass version of the Html5 Boilerplate project by Paul Irish1 watcher / Pushed May 21, 11
- A collection of nifty tools for Titanium Mobile13 forks / 148 watchers / Pushed Dec 07, 10
