dervalp

[tjholowaychuk-blog]

With the advent of numerous client-side JavaScript package managers, I wanted to write up some of my thoughts about the fragmentation that we have today, and some ways that I think we could really improve delivering packages a community. Keep in mind that these are only my opinions, everyone has…

[dervalp]

cosyJS - 1st working version of cosyJS

I am glad to announce my first working version of cosyJS. A lightweight express.js UI server which includes page generation and a full stack components library.

History

I had the idea of creating a UI server since a long time and already did some prototypes but it never reached an acceptable solution. Years passed and with node.js we were now able to run Javascript on server side, something quite interesting for a front-end developer.

As a passionate person, I am always involved in "on the side project" or in "blog/website" creation for friends. I started to use node.js and more precisely express.js to make this kind of websites. I end up doing always the same, pick a js framework, pick a CSS grid system, do some prototype, get feedback, code, deploy,...

By knowing more and more about node.js, I was thinking that maybe it was the good time to get back to the UI server idea, so I started it few months ago. I was really ambitious in the beginning and my initial plan was to create a platform in the cloud where each user could have is own UI server instance. But, in the same time, I started another project which I love (guidedaytoday.com) and due to lack of time I could not continue working on this UI Server project.

As I did not want to give up on both ideas, I took part of the code I had created and turn it into an express.js module. This change gave me the ability to use it inside guidedaytoday.com (which uses express.js). I gave it a name, released it as an open source project and push it on github. cosyJS was born.

The present

As my title stated, I have now released a first working version. My first big project with it will be to use it intensively for guidedaytoday.com and add the necessary components I need. I hope it will improve quite quickly cosyJS and will make it more "attractive" for developers (eating my own food).

The future

In the same time I am refactoring guidedaytoday to use cosyJS, I hope I will have more users and contributors. If it happens, I also hope we will be able to share components and improve the concept together.

On a technical point of view, I plan to release a stand alone version of cosyJS which would not require express.js. This would be the first step to be back on the idea of having a "cloud platform dedicated to UI".

Conclusion

Try it now :)

Project's website: http://dervalp.github.io/cosyJS/

Project's sourcecode: https://github.com/dervalp/cosyJS

See it in action: http://cosytodo.herokuapp.com/

[dervalp]

Heroku and node.js

Just a hint, if like me, you struggled deploying a node.js application in heroku. Do not forget to set the engine of node.js and npm in the package.json file. If not, you will end up with the version 0.6 of node.

"engines": {

      "node": "0.8.x",

      "npm": "1.1.x"

  }

[dervalp]

Godaddy, heroku and the wildcard nightmare

So, if like me you have bought a domain name in godaddy and try to setup it with heroku, you will end up to this page : https://devcenter.heroku.com/articles/custom-domains#wildcard-domains

Saying you should point your wildcard domain: *.domain.com with a CNAME record to the name of you app (whatever.herokuapp.com).

Problem, godaddy does not support CNAME record for wildcard domain. So what's the solution? To use 3rd party services (you do not need to transfer you domain).

So, I end up using amazon 53 to manage my domain (as you know heroku is based on amazon cloud), so it appears to me to be the good choice. Unfortunately, it is not free :( But at least, you will have, imo, a good service to manage you DNS.

If like me, you use godaddy for your email, do not forget to point your mx record to the correct addresses. (10 mailstore1.europe.secureserver.ne, 0  smtp.europe.secureserver.net). Please, do not do the same mistake as me, point the APEX record (which mean domain.com) and not mail.domain.com.

Hope it will help you :)

[dervalp]

cph day-to-day - free city guide

Just little blog post to talk about a new project I am involved with. A blog about Copenhagen (currently mainly in French and English). By creating the theme and having discussions with the creator of the blog (my girlfriend :) ). We had the idea to create a free city guide about Copenhagen.

So, I wrote a node.js app and it's available at this address: http://guide.cph-daytoday.com/

There is currently not a lot of content but it will come with the time :)

By doing it, I realized that I could make it generic and create a platform which provides free high quality city guides. These guides should be done by people who currently lives in the city and enjoy blogging. Hope I could come to you with good news in the next weeks.

A+

[dervalp]

Migrii Team and open source

The Migrii team decided to refocused on open sources projects.

We are always working on our core product but as we all have full time job, it is quite hard to create a core product, contributing to open source projects, working for your day-to-day job and learning Danish (in fact, I am the only one who is learning danish). Anyway, you should face the same problem as us.

So, in order to stay motivated and to keep the process of being better Front-End Developers, we decided to act as a team even for our open source projects and gather all the projects we are working under the same banner, "The Migrii Team".

So far, it works well, we are releasing a first alpha version of our seamless javascript code coverage tool: http://migrii.github.com/blanket/

And I am currently working on an opinionated css SDK : https://github.com/Migrii/LessSdk/blob/master/README.md

I think we will also "repatriate" our own project under the Migrii Profile (gmaps, Jquery.Decorate, Jquery.Dropdownlist,...).

So, stay tuned ! I think we will come up with good news in the next few weeks !

[dervalp]

[dervalp]

Migrii - status 1

As you know (or not), I am currently looking for a new challenge in Europe. Having some free time helps me to focus on an application called Migrii. I created this app with my fellow friends and ex-colleagues (Alex.js and our mobile hacker).

Migrii (http://angel.co/migrii) is a social platform helping you to share, create and attract members to social projects. I won't be too specific for now about it as we are always in discussion about core features.

We have developed about 30% of the application and if you have already built an application alone or founded a startup, you should know that coding is the smallest part of the journey (creating mockups, writing contents, think about a marketing strategy,...).

Currently, our focus is set on providing a nice demo for potential investors. As soon as we will have something working on a production environment, I think we will open the application in private beta.

So, not too much to say about it, stay tuned for further information...

[alex-js]

I’m working on a JavaScript library that provides a repository or abstraction of various map providers.

For the moment I’ve coded some references to the Google Maps API and the OpenStreetMaps API. I might add Bing or Yahoo in the future, but the library has also been built so that you can...

[alex-js]

[dervalp]

[dervalp]

Today is my last day in Ziliko. I've learned so much during these two amazing years. It was so fun and so challenging to build two great products like oodili.com and ooliko.com. I've met so many interesting people in Montreal during these two years and had the chance to work with smart and pleasant colleagues.

Weird feeling I have today, so sad to leave a brilliant company and so exited by starting a new challenge.

Anyway, "no U-Turn"

[dervalp]

Testing route middleware with Vows and Request

I do not see a lot of documentation about how to test a route middleware with Vows. The code below is not "good" code, you could wrap some logic in helpers or objects but it can give you an overview about testing a route middleware or even a route without being force to use mock libraries.

Basically, what I am doing it's to create a fake server and make a HTTP request using the Request library. I've created a last route which sends the json data I need. Like that I can see if the output is as expected.

If you have some questions, drop me a comment :)

var express = require('express') , request = require ('request') , expressValidator = require('express-validator') , projectController = require('../../controllers/projectController') , vows = require('vows') , assert = require('assert'); var app = express.createServer(); app.configure(function(){ app.use(express.bodyParser()); app.use(expressValidator); app.use(express.methodOverride()); app.use(app.router); }); var port = 3001; var base_url = 'http://localhost:' + port; app.listen(port); vows.describe('Playing with a user controller').addBatch({ 'when I have a user controller': { topic: function(){ app.post( '/project/new', //uri you want to test projectController.validateProject, function(req ,res){ res.send(req.errors); }); return app; }, 'it should work': function (topic) { assert.ok(topic); } , 'after creation of server': { topic: function(){ request ({ uri: base_url + "/project/new", method: 'POST' }, this.callback ); }, 'it should be validated': function ( err, res, body ) { console.log(err); console.log(res); console.log(body); } } } }).export(module);

[dervalp]

MatchFWD - European geeks, it's time to be in the place!

As you know (or not), I'll move back in Europe in the end of the week. I do not know where to go and what I'll be doing there but I hope this blog will be visited next weeks by some recruiters or team leaders.

If you are one of them, I would like to share with you a nice application developed by smart guys from Montreal, MatchFWD. During my time in Montreal, I've seen lot of startups building nice app but this one is my favourite (apart from oodili.com) and I think it would be very awesome if some European geeks and recruiters could be in the place.

But what is matchFWD?

matchFWD is a smarter way for people to find, share and connect who's hiring, who's available for work, and who's good at what they do. We are a word-of-mouth accelerator for the job world.

Whether someone looking to hire, a friend looking for contracts, or a team expanding, matchFWD connects them through common contacts.

And with automated match suggestions in a carefully designed service, matchFWD is the easiest way for people to leverage their contacts and build their reputation.

from the matchFWD's website

So European geeks, see you there soon !

[dervalp]

Are you really a css guru?

During this post, I will try to show you how CSS can be very bewildering if you do not know how rule selectors works.

Here is the html we will use for all the exercises (in jade notation):

#H.a     #I.b         .c.d.e.g           | Hello world!

Your goal is to find the color of the string 'Hello World!'

1. What's the color with these rules ?

.c {color:red;}

.c.d {color:lime;}

I am sure you found it. response

2. An easy one:

.c.d {color:green;}

.c.e {color:red;}

So? Green or Red ? response

Now we inverse the order of the rule:

.c.e {color:red;} .c.d {color:green;}

reponse

So it seems like the order have some importance :)

3. A trickier one

.a .c.d.e.g {color:green;} .a .b .c.e {color:red;}

What will be the color ? response

I am sure, some of you are confused at that point.

Now, we will add a class to the second rule, what will be the color ?

.a .c.d.e.g {color:green;} .a .b .c.e.g {color:red;}

respone

So you think you get the point? Are you really sure?

#H .c {color:green;} .a .b .c.d.e.g {color:red;}

response

It seems that the id is very important, isn't it?

But now:

#H {color:green;} .a .b .c.d.e.g {color:red;}

Green or Red ?

Conclusion

During these little exercises, we've seen that the order, the number of selectors and the type of selector matter. But how to know which rules will apply and when?

Basically here is the answer:

CSS has 4 types of buckets (by the way, I highly recommend this video):

The ID bucket (#H, I,..)

The class bucket (.a, .b,...)

The tag element bucket (div, p, span)

The pseudo-class bucket (:pseudo-element)

When the browser parses the stylesheet, it will put these selectors in separate buckets.

To calculate which element will be applied, css will define a weight for the selector. All you have to do is to:

count the number of #id in the selector

count the number of class in the selector

count the number of tag in the selector

count the number of pseudo element in the selector

For example:

#ID will have 1 Id, 0 class, 0 tag, 0 pseudo

Weight = 1000

.class will have 0 id, 1 class, 0 tag, 0 pseudo

Weight = 0100

div will have 0 id, 0 class, 1 tag, 0 pseudo

Weight = 0010

.class.class2 will have 0 id, 2 classes, 0 tag, 0 pseudo

Weight = 0200

Between 2 selectors, the heaviest selector will win.

But what if there have the same weight?

The last one will win.

Knowing that rule, try the above example again and everything will seems more clear for you. Be careful with the last example, as you can see, the selector which have an idea does not win cause the selector is not enough specific, so both rules apply but as the element is concerned in the second rule and not in the first, your element will inherits the red color from the id but the most specific selector will win cause it targets the element we want to style.

NOTE: Do not forget the !important rule. If you have multiple selectors matching, the one marked with the !important will win. Indeed, it won't take into account the weight.

[dervalp]

Cookbook to become a great web developer!

In this post, I’ll offer my opinion on what you should do in order to become a great web developer.  Throughout my career, I've read lots of books on the subject; some were interesting, others were boring. Here’s my list of important factors.

1. The web highways

Too often, I meet some web developers who are unaware of how data are exchanged between browsers and web servers. Having a basic knowledge of TCP/IP, DNS and HTTP can help you a lot in your day to day work. I don’t mean to say that need to master the RFC by heart, but reading some Wikipedia articles will help you a lot.

TCP : http://en.wikipedia.org/wiki/Transmission_Control_Protocol

IP: http://en.wikipedia.org/wiki/Internet_Protocol

DNS: http://en.wikipedia.org/wiki/Domain_Name_System

For HTTP, I recommend you read "HTTP The definitive guide". Here is the cover:

Amazon link: here

Bonus: the internet's undersea world

2. Stop talking, start working

Sure, technical skills are important for a web developer but, in my opinion, what really matters (especially for startups) is the attitude. Of course, I am not asking you to change the way you are, I am just asking you to change the way your work. Here are some precious motos: "Planning is guessing", "pick a fight", "keep it simple", "meetings are toxic",... These mottos come from two amazing books, Rework and Getting Real. Rework has literately change my life at work and I am sure you won't be the same after reading it (by the way if you want know more about Jason Fried and David Heinemeier Hansson, visit the 37 signals against noise blog).

NOTE: another book that changed my work life was "the mythical man month", an essay on software engineering written in 1975 which is always releveant and applies as much today as it did back then.

3. Master the basics

You cannot develop any more without mastering object oriented programming. If you are very new to this, I recommend the HeadFirst book. After 1 or 2 years of practice, you can go a step further and read a book about design patterns (what's a design pattern?). The original book on that subject is a great one but it's written by nerds for nerds (the gang of four). I suggest reading the headfirst book before reading the original one. By the way, use design patterns with caution. If you have read Rework, you should know that over-design is something you should avoid. Design patterns appear often after the most important task in software development; refactoring. My favorite book about refactoring is an old book written by the famous Martin Fowler called "Refactoring". Sure it's note a fancy book title, but it will help you a lot in your day to day work.

4. Coding time!

Reading is great but you cannot create amazing applications without coding. If you are new to web development, you may be asking yourself (or others) "Which programming language should I learn?” - First, master HTML(5), CSS(3), it will be your day to day coding language. In the early day of your practice, coding in HTML and CSS will appear very simple, but, suddenly someone arrives at your desk and asks “Oh wait, did you test these pages on I.E?". It’s at this point that your troubles begin. If you work with smart people, they will send you this great link: http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com . I also found a great quote from Paul Irish's blog "each browser gets an experience that is customized to that browsers's capabilities.". Finding the best experience for each browser is what makes HTML/CSS so hard.

I don’t have any book to recommend for HTML, w3c school will be your best friend for the begining and http://html5boilerplate.com/ later. You can also find several websites with css resources (here is an example:http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/). - JavaScript, THE ubiquitous language for web developer. For a long time, JavaScript was denigrated by software developers. In the recent years, with the emergence of the Internet, the use of Ajax, and the help of great javascript frameworks (Jquery, mootools and prototype), javascript has become a programming language appreciated by all web developers. The Javascript community continues to grow rapidly, most notably with the emergence of node.js which allows you to execute JavaScript on the server-side. Now, more than ever, javascript is the language of web innovation. O'reilly, as usual, has great books about javascript, the definitive guide andjavascript the good part. - Backend coding. Sure you read some tutorials on node.js, but you still need to learn a "backend" programming language. The choice will be hard: PHP, Ruby, Python, Perl, Java, .NET? Which one to learn first? I cannot answer this question for you, you need to read and pick one. I chose C# with ASP.NET (now ASP.NET MVC), why? Because my first web application was written in C#, I had senior developers around me to explain how and what to do, so it was easier for me to gain experience and confidence with it. During university I learned C++ and php (by myself). I haven’t directly used any C++ in my career in web but I believe that if you follow step 4 of this post, you should not have much difficulty switching from one language to another. All languages have their pros and cons. Oh wait, I didn’t mention Java ? Does it matter?

 4.bis Testing time !

Testing is as important as coding. I’m not talking about testing your app in a browser, I am talking about automated testing. For example, if a problem in the requirements is found only post-release, then it would cost 10–100 times more to fix than if it had already been found by the requirements review. “Wikipedia - Software Testing” Bugs in production are time consuming and irritate users. Granted, it’s almost impossible to test everything, especially in web, but having code coverage of 70% will certainly prevent you from creating "broken code". There are a lot of libraries and books on the subject of unit testing. I personally use Nunit in C# and Qunit in Javascript but there are maybe other great choices.

A must read about unit testing:

5. Do not reinvent the wheel

I have a personal good tip for not reinventing the wheel, when I spent more than 30 minutes writing something which contains a namespace like "tools", "utilities", I am certainly coding something which almost exists somewhere in the web. There are so many API’s and libraries available on the web, do not rewrite one, contribute! Need a Javascript Framework?  Jquery is there, need an mvc framework for Javascript? Backbone.js, spine.js,... New to node.js ? Express, socket.io... An HTML5 template? html5 boiler plate,... You need to focus on your app (your domain) not on rewriting tools. However, if you are specifically interested in API development, go to github and fork some repositories. Open Source projects are always on demand for motivated coders.

6. How dev team are working ?

If you want to develop great projects, you need teammates. Development methodologies are important when workings as a team. I am not saying that you should learn all aspect of agile development but knowing some basis like "User stories" and scrum will help you to integrate into a development team. There are a lot of great web applications to help manage your team work. Pivotal Tracker, Basecamp, Campfire, Githhub, are all tools will improve communications and knowledge among the team. Having a great setup for your team will certainly help you to produce more beautiful code for your app.

7. Stay tuned

Fortunately or not, web technologies are always evolving, so you always need to keep on top of new developments in the field. If you are not passionate about the web and learning, do us all a favour and quit now.

Some useful industry-relevant news sites are Techcrunch, the next web, ReadwriteWeb, Mashable,... The answers to your coding questions can usually be found at stackoverflow and quora. Exploring github and all these fabulous repositories will help you to find great APIs and great demos. You can also follow “famous” developers on Twitter and buy some screencasts from Peepcode. Keeping up-to-date is a never-ending task that separates the passionate from the mediocre.

PS: special thank to Alex-Ziliko :)

[dervalp]

vows - mongoose and teardown

As there is no documentation about the teardown function in vows's website, I share my code using a teardown with a mongoose model.

As you can see, teardown can be used in a context as well as a subcontext, it's a function taking the topic as parameter. Be careful with an async callback, you will need to call the this.callback function and add the callback function as you do usually with vows.

Hope this code will help someone:

'when I have a valid model': { topic: function() { var newUser = new User.model( { firstname : "ooijoijij", lastname : "toijoijest", username : "fefefef", email : Math.random()+"[email protected]", password : "3242424" } ); return newUser; }, 'it should have attributes' : function (model) { assert.equal("ooijoijij", model.firstname); }, 'after a creation':{ topic: function(user){ console.log("saving user"); user.save(this.callback); }, 'after a successfull save': { topic: function(doc,err){ User.model.findOne({lastname : "toijoijest"}, this.callback); }, 'I can retrieve the value' : function(err, doc) { assert.equal(doc.firstname,"ooijoijij"); }, teardown: function(topic) { User.model.findOne({lastname : "toijoijest"}, this.callback); }, 'should remove the value': function(doc) { doc.remove(); } } } }