In my previous post I ranted about the way the design community seems to violate the DRY principle. Let’s revisit the code (and Repeat the code, I know, I know):
font-size: 1.5em; /* 24px / 16px */
What’s going on here? Well, to get to our beloved Em measurements, we apparently need a calculation based on our body’s font-size (24px) and the h1 target font-size (16px). This “would make future adjustments much, much easier”.
It’s not that I dislike this really, but more that I despise (having to do) this. We’re saying “1.5em” here, only we’re doing it twice.
Last week I’ve tried one of the solutions to this: SASS. And let me say, this feels like it could be love at first sight! With SASS, the above snippet will quickly transform into the following:
font-size: (24 / 16) * 1em;
Much better, no? We’ve now only stated once what the font-size should be: a certain fraction × 1em. I’m a little bit disappointed about needing the “* 1em” there, but hey: it’s a great reason to ask another Stack Overflow question.
Anyways, SASS doesn’t stop here. It will add more improvements, one of particular importance to the above snippet. Consider this:
What’s up with the additional lines of code? Isn’t that extra code bloat? Well no, those lines help us achieve two very important goals:
Our calculation is now much more meaningful, and will now truly “make future adjustments much, much easier”.
We can reuse those variables in our style sheets. In the somewhat contrived example above it doesn’t really shine, but you can surely imagine this is a great benefit to the entire style sheet.
For my current pet project I’ve tried SASS in a feature branch, but I’ve already closed that branch: it was merged into the main branch after only a few hours. With this I’m indeed implying there’s a very friendly learning curve for SASS.
And yes: I’m also implying that you should try it for yourself! There’s many more nice features I haven’t even mentioned yet. And if I didn’t convince you, perhaps the two-page tutorial will!
My wife called me out for looking at CSS through a pair of Programmer’s Glasses™. She hastily added this could well be a Good Thing, and I suppose I’ll just interpret it as a compliment. In fact, I must say I agree, feeling more like a “developer” than a “designer”.
I usually put the math behind my measurements in a comment to the right-hand side of the line, which makes future adjustments much, much easier for me to make.
At first glance, this makes sense. However, in the long run, this feels really weird to me: it smells like code duplication. The actual result and the calculation in the comment both express the “what“, just in different form. It reminded me of Clean Code, where a whole chapter is dedicated to comments, and I’d think this would fall under the Bad Comments section (“Noisy Comment”, perhaps?).
Now I’m currently thinking I must be wrong: everyone who is something in responsive design is generating this type of sample code. Maybe it is because I should read this kind of code like:
font-size: 1.5em; /* Form 1 */
/* font-size: (24px / 16px)em; */ /* Form 2 */
Both forms describe what the font-size should be. Form 2 is probably “best” from a Clean Code point of view (as it’s most descriptive), but unfortunately only form 1 is valid (plain) CSS. As a compromise both forms are kept.
So, what are the options for improving things? There’s at least a few I can currently see:
Combine “Form 1 and 2”. Accept that you’ll need discipline to keep the measurement and comment in synch. This is what the Responsive Design community leaders seem to practice.
Just use “Form 1”. You’ll loose (or never have) the benefit of understanding your measurement.
Use a CSS pre-processor. There are Sass and LESS, the most well-known ways to introduce (among others) calculations in stylesheets.
To be honest, this list is currently my reverse order of preference. I’d love for option 4 (the CSS3 modules) to become a success. Until then, I’m bound to investigate the CSS pre-processors, because option 1 and 2 are both crappy, in my opinion.
If you’re going to create a study plan for yourself based on this, you should note the following:
These are pure study hours; breaks and such are not included.
This is what worked for me; no warranty given or implied!
I spent these hours mostly in the order above.
Before these hours I had zero experience with WCF, a wee bit experience with ASMX services, and quite a bit of experience with ASP.NET.
The great thing about these 200- hours: this is approximately what I estimated up front I’d need to get a passing grade.
Here are some miscellaneous details about the abovementioned materials.
Programming WCF services, 3rd edition
This book by Juval Löwy is widely considered the most in-depth book about WCF. It explicitly focuses on the things the author deems important, leaving out (or just barely mentioning) the esoteric or “useless” bits of WCF. When studying for something I prefer to get in over my head, and slowly fill in the gaps. If you prefer to build up your knowledge steadily instead of doing a deep-dive: save this book for last.
Windows Communication Foundation 4, Step by Step
This book was probably the worst but most complete tour you could get for WCF. It takes you along most of the features with practical excercises, but is horrible in explaining things (even mis-informing at times). The worst part about this tour is the fact that you have to follow the tour guide to the letter, otherwise you’ll get lost without any clue how to get back on track. Glad I read the other book first, which allowed me to understand what this tour guide was showing me.
WCF 3.5 Self-paced Training Kit
There is no .NET 4 version of the WCF training kit (makes you wonder how invested Microsoft is in this technology, huh?). Instead, most fora recommend just grabbing the 3.5 version. This book is very decent, has topics chopped into nice small chunks, offering a mix of theory, exercises, and training questions. It also was very complementary to the book by Juval Löwy.
Answering questions on the various Stack Exchange sites is one of my current hobbies. It made sense to practice and test my WCF knowledge by answering questions, and I can highly recommend it as a form of study! It was based on the slogan: “If you want to get good at something, start teaching it!“. Words of wisdom.
Okay, maybe not one of the brightest ideas I had. It did act as a general review of WCF, but in the end it didn’t feel worth it. I suggest you spend your time on something else.
Reviewing the Exam Objectives
This was crucial to passing the exam. I printed all the objectives, and went through each letter of it, making sure I knew exactly what each and every item was about. I reviewed every topic by at least looking it up in one of the books I had, and often enough I also went on to read more about it on MSDN. This exercise was useful not in the least because there were some objectives on the list that weren’t even mentioned in any of thebooks.
There’s a lot about the 70-513 exam that understandably lures folks to using those brain dumps. The most important things to mention:
WCF is a vast topic, boring in many aspects. Given that you’ll only use a small subset of WCF.
Questions on the exam are horrible, with things like “In which namespace does class X reside?“.
The exam on itself tests factual knowledge and not in the slightest practical proficiency.
Yet still I’m glad I finished and passed without resorting to “cheating”. The above study plan is what did the trick for me. Maybe it’ll help someone else too.
A few months ago I started studying for the MCTS 70-513 exam on Microsoft WCF (web services). Before I started I had already heard of a phenomenon I knew under the name “TestKing”: test-questions to prep you for the actual exam. As I found out, “TestKing” is just one of the more well-known Brain Dump providers: cheat sheets with just about all the possible questions you may get on your actual exam.
Turns out a lot of people use these prep sets, usually as a companion to quite a bit of study time. They ginormously improve your chances of passing the exam, partially because they shield you from (amongst others) the utterly worthless type of question: “In which namespace does BadAssClassXyz live?”. In fact, it seems you can pass an exam with nothing else but about 20 hours of cramming those brain dumps.
Early on, I decided I would try to get the certification without using brain dumps.
Okay, glad I got that decision out of the way. Time to make a plan of attack, time to find out how much study time would be needed to pass the exam without resorting to cheating. So I hit up a typical Google query, but that turned up nothing. Following that I searched Programmers.SE, finding only this meagre question which just links to companies providing test exams or brain dumps. In the end, the only thing remotely useful was a blog post I didn’t find until one week before my exam date: this overview of MSDN links for reviewing the exam objectives.
Turns out, nobody knows, or at least nobody has posted online how much time studying for MCTS exams typically takes. Is it 40 hours? Maybe 150 hours? Or even a 1000 hours? Sure, the answer will always be “it depends” to some degree, but if only someone had posted how much time it took him/her this could help get a general idea.
So I decided to diligently keep trackof my study hours, and publish them on my blog once I had passed my exam. By now I’m the proud owner of an MCTS 70-513 certificate. So stay tuned for part 2 in this series, where I’ll post the study plan actuals that turned out to be good enough for me.
This is a follow-up to my previous post on Hg Hosting Providers. I found that on the surface all four of them were very similar. From the four providers I investigated, CodePlex overall felt most intriguing, so I decided to start by trying out that one.
Note: I participate in another project, which I will be uploading to Bitbucket (because that’s the only one that supports small private projects at no charge), so I may be doing a follow-up on that provider too.
Sign Up and Project Creation
The CodePlex home page lures you into creating a project with a big, purple, Metro-style button:
When you hit the button you’ll be asked to either sign in or register:
If you don’t have an account yet (like I did) you can register for one on the spot. I decided to create an account linked to my Windows Live ID:
The hardest part is the Captcha: damn those things can be a challenge! After finally completing this mini-game, it turned out CodePlex had forgotton all about my intention to “Create a Project”, and instead presented me with my personal (and very empty) project home page:
Luckily, there’s another (though less obvious) “Create a Project” link on the page. There’s only a small number of fields you have to complete:
The whole point for me was to choose Mercurial hosting, but it’s noteworthy that both TFS (which also supports SVN clients) and Git are an option too. Hit “Create” and if all goes well you’ll be directed to the brand new project’s home page:
The project has now entered the “Setup Period”. This gives you 30 days to set up the project, i.e. before you have to go live. This was in fact a welcomesurprise to me, because since this was my first time coordinating a hosted project the setup period allows me to calmly check out all the features.
Importing the Existing Repository
Keeping in mind that eventually I would be hosting the code online, I had already started with a Hg repository, committing my changes locally. There are several advantages to using version control while still flying solo, amongst others having backups and traceability.
I already suspected it wouldn’t be too hard to merge an existing repository into a new hosted project, and I even got some response to my question on Twitter, indicating it should be possible. The only thing I was worried about is that the username for commits would be “wrong”, because my computer user name “Jeroen” is different from my new CodePlex user name “jeroenheijmans”. To get everything to work I took the following steps:
A simple copy/paste back-up of the existing repository, just to be safe.
With some effort I got this Hg convert trick to work, changing the user name in commits for the existing repository to my CodePlex username.
Make a clone (a.k.a. check out) of the project repository from CodePlex to a new local folder.
Copy the existing repository over the clone from CodePlex.
Some of the hidden files in the .hg folder have to be overwritten. I double checked all files with Notepad++, and in all (my!) cases the clone’s file could be safely overwritten.
Using TortoiseHg I now pushed all the changes. In the previous step the CodePlex URL was probably lost, but that was easily remedied by entering it once more.
To be honest, in hindsight I don’t know if step 4 and 5 are really necessary. I guess you could safely try just pushing your existing repo to CodePlex: if it doesn’t work surely you’ll get an explanatory error message?
Either way, after completing the above steps my CodePlex project contained a complete history of 40+ commits, only minutes after setting up the project!
CodePlex Features Overview
After importing the source code it was time to investigate the various CodePlex features. Given the 30 day setup period I was able to check out all the features without having to worry others may see my silly mistakes. Here’s my first impression of the available features:
Home is the first thing you see if you go to the project URL (which is a nice subdomain of CodePlex: http://yourproject.codeplex.com). It mainly contains some text to explain what the project is all about, and you’re invited to edit it (with Wiki-style markup). Worked nice and easy for my simplistic purposes.
Downloads is the section where you can offer releases, which can have various properties as well as attachments such as binaries or installers. So far I’ve only created two “Planned Releases”, which worked pretty straightforward.
Documentation is Wiki-based. So far I’m headed straight for the quintessential documentation pitfall: I’ll create it once the product’s finished.
Discussions looks like a forum-based commenting area. Given that the project is one we do together with friends we may not get to use this option much.
Issue Tracker is a very basic work-item system. It contains the bare essentials, but not much more. This was a bit disappointing to be honest, I would at least have liked to have some basic formatting, but apparently that’s still a work item on CodePlex itself.
Source Code is the section where… well… you can find the source code! It shows all commits in descending order, and even though I haven’t tried it yet it also shows forks and pull requests. If you click on a commit you get to see the diffs for changed files.
People shows all the coordinators, developers and editors on the project. It’s also the place to invite your team mates to the party!
License is where you can view and change the license for your project. CodePlex allows you to choose from ten different OSI licenses. I’m leaning towards picking the BSD license, but this license stuff feels like a snake pit (with it’s own acronym: IANAL).
So far this list of features seems pretty sufficient. At least: I haven’t “missed” a feature so far.
All together I’m pleasantly surprised by how easy it was to set all this up. I’m not sure (yet) how it actually compares to the other hosting providers I considered, but so far I’m happy I chose CodePlex.
I’m fairly certain our project will be published some time soon, and when it does you can find it at bieb.codeplex.com: join the party!
Okay, I’ll admit it: I love making lists. I’m one of those people that can make a list of things to do, and add one or two things I’ve already done, just so I can enjoy that feeling you get when you check something off the to-do-list. Do you recognize that feeling?
For books I know there’s wildly popular sites like Goodreads, to keep a list of things to read, get suggestions, and so on. I wanted something simpler, and something I have control over. So I decided to put it up on my blog as a page, just like all the (other?) hipsters with blogs. Not so much a reading list to tell others what they should read, but more a track record where I can quickly look up things I’ve read before.
The book that inspired me for this reading list (shown in the image) is The Pragmatic Programmer, amongst others. Who knows; perhaps this post will inspire others to (re)start a reading list as well?
Want to know what I have been reading? Check out my book list.
This weekend I decided to deep dive in a StackOverflow question on the combination of pseudo-elements and the IE8 (and lower) filters. Even though it seemed to me the question couldn’t be answered with 100% certainty, I still gave it a shot. A similar but better answer got accepted (damn you, “ScottS”!!), but that’s besides the point. The most important thing I learned from answering this question, is understanding the magic in IE (especially version 8 and below). So, for reference, here are the important links of articles that made me understand IE a bit better:
On having Layout, a piece from 2008 explaining the details and consequences of IE’s take on layout.
The kicker from all this research is that I now finally understand this remotely related line of CSS I’ve seen (and even used) a lot:
This is a CSS hack to get some versions of IE to behave nicely. So far, nothing new. However, after reading the above articles, I finally understand what it does: it forces the hidden IE property hasLayout to true. And that’s useful for quite a few cases where you’d expect things to have layout, but when they don’t by default.
Hack or not, I’m glad I understand things a wee bit more now.
Last week I wrote a post about CSS naming conventions, while trying to start up my review of the Programmers Stack Exchange site. Writing the question got me all excited about the wonderful answers and insights I was about to gain. Unfortunately my question fell to the 2nd page of the site quite quickly, with a meager one upvote, and one (though well-written) unsatisfactory answer.
For a week I debated whether to skip Programmers and review a different site, but today this problem struck me as an opportunity! This is a great way to test the bounty system. So I decided to put 100 of my current 106 reputation up for a bounty, looking for any answer that can provide me with something more solid than the “personal-preference” argument.
While waiting and frantically F5-refreshing the question I have some time to write about the site. One fun side-effect from the reputation system already became clear though: I can’t upvote any answers on the site anymore, because the 100 rep bounty I gave up dropped me below the 15 rep threshold you need to pass to be able to upvote things.
Just like last review, first we dig up the current facts for this site:
Bigger than Cooking SE, but still quite the “little brother” to Stack Overflow.
Next up, my questions. Even though I often have questions that feel like a great fit for Programmers SE, once I’m halfway writing them I tend to delete them again. The reason is simple: even though the “good subjective” kind of questions are the bread and butter of Programmers SE, I’m probably too exact to ask a subjective question. However, the one question that got this post rolling is still worth noting:
Like many people I have a certain mental threshold before I post anything on a public site like Stack Overflow. However, I was determined to overcome or ignore the threshold for the Stack Exchange Challenge. Nonetheless, at the time of writing this, I came up with zero answers.
Perhaps in the future I will answer a question or two (heck, I may even answer my own question), but until then, this section is shamefully empty…
Now this is the good part of Programmers Stack Exchange. Although often subjective or even “whiny”, there are quite a few questions that are interesting or plain fun to read! Some questions i enjoyed:
This particular Stack Exchange is a fun site. It’s a fine line though between subjectivity and questions following the “good” Q&A format. This fine line will probably keep me from becoming a regular poster. However, I can highly recommend the level of interaction I’ve currently settled on: follow them on Twitter for the occasional fun-to-read question that pops by.
My next Stack Exchange Challenge post will most likely be about the Programmers SE. One part of the challenge is to actually ask a question I have on the topic. The question I came up with (to be honest, this has been bothering me for months now) took quite some time to write down carefully. So, as I don’t have my next SE Challenge post ready yet, I decided to cross-post my question here on my blog as well.
The Question:what are the practical considerations for the syntax in class and id values?
Note that I’m not asking about the semantics, i.e. the actual words that are being used, as for example described in this blogpost. There are a lot of resources on that side of naming conventions already, in fact obscuring my search for practical information on the various syntactical bits: casing, use of interpunction (specifically the - dash), specific characters to use or avoid, etc.
To sum up the reasons I’m asking this question:
The naming restrictions on id and class don’t naturally lead to any conventions
The abundance of resources on the semantic side of naming conventions obscure searches on the syntactic considerations
I couldn’t find any authorative source on this
There wasn’t any question on SE Programmers yet on this topic
Some of the conventions I’ve considered using:
UpperCamelCase, mainly as a cross-over habit from server side coding
Lying is useless: I’m addicted… to music. Just about whatever I do, I will have music in the background. Especially when I’m working on the computer: programming, photo-shopping, video-editing, gaming all require music.
Different activities and varying times of day require different types of music for me. Luckily, I enjoy just about all kinds of music. The growing popularity of Spotify has driven both di.fm and last.fm radio from my favorites, and allows me to pick just about anything I want to hear.
This brings us back to the topic of this post then (hope no-one was expecting a guide on how to program music on some device), music for programming duties! I realized I put on certain types of music whenever I’m in a certain type of zone. So here’s a go at my music choice per programming task.
Creating C# interfaces, designing server side code
Hopefully I’ll be able to look back at this post some time in the future and create an updated overview. Perhaps this will even inspire someone to up a music-programming cross table of their own. If you do: let me know!