Category: Programming

Anything related to coding and the things needed to do so

Finishing BattleTop

Jeroen

Okay, the title is about as uninspired as topping a vanilla ice cream dessert with chocolate sauce. But it’s to the point! Also, with slight OCD, it’s nice that my archives will show nicely aligned “Finishing …” titles. This is important for many reasons!

BattleTop ThumbnailAnyhow, as I’ve announced recently, I had already finished wrapped up one project: BattleTop. Have a peek at the Source, or check out the Live Version.

Elevator Pitch

What would’ve been the Elevator Pitch if I had made one when I started? Something like this:

I’m developing an app for keeping combat initiative so tabletop RPG groups can skip the tedious parts and share the initiative state easily, using (mobile) devices that are present in sessions anyways.

Writing elevator pitches is far from my specialty, perhaps I should’ve said something about “the competition” too: I’ve actually looked for existing apps, and tried a few from the Android Play Store. Only a few existed at the time, and they were very unsatisfactory.

What’s it built with?

I’ll be honest: from the subset of suitable technologies, I didn’t choose based on “best for the job”. Instead, I chose two technologies that I wanted to learn more about, and stayed in my comfort zone when choosing the rest.

The initial prototype was built with:

  • Html5, because at the time I loved tinkering with the new semantic tags. Also, I intended to learn all about tinker with LocalStorage for saving state between (possibly accidental) page refreshes.
  • Custom CSS, because it’s “good enough” for a prototype, and switching to SASS or LESS later on is easy.
  • jQuery, because I thought I wanted to learn how to write jQuery plugins.

Only two days / 11 commits after I had started did I branch off to rewrite things MVVM style with KnockoutJS. I’ve not looked back since. It also paved the way for easy unit testing, allowing me to experiment with QUnit.

How’s it wrapped up?

The frequency with which our group did RPG sessions had dropped dramatically. This removes the need to have a tool, the motivation to keep developing it, and the ability to test it. And this is okay with me. I learned some cool new things, and heck: it even got it to a functional beta version.

To wrap it up I just reviewed all of my code. Unit tests had already been done in August, and even though the code isn’t the fanciest ever, it didn’t have any obvious loose ends or idiotic bugs. So after some minor changes I just added a “discontinued” warning to the code, the live version, and the project site, and that’s that: closure!

Any future for BattleTop?

Not very likely. I think I prefer to focus effort on one certain other project, and after that probably even start new projects before picking up BattleTop again.

But like I said: I’m okay with that.

Software Licences

Jeroen

Software licenses are confusing. I thought making a summary would require some useful research and would be a great way to learn more! Also, I was inspired by this WTFPL comic about licenses.

So I sat down and started my research.

Then I broke down and cried.

Why is this shit so hard? The opensource.org site is decent, and even dares annotate pieces. However, for a summary of the popular license you’d have to construct something yourself from the bare license texts.

Anyways, I stopped crying. Grabbed both a beer and a hot cup of tea, and went in for round two. Surely Wikipedia has a good starting point? A zoomed out screenshot of the Comparison of free and open-source software licenses looks like this:

Open Source Comparison

So I started crying again.

Why I is this shit so hard? I guess it’s in part tiredom and beer (or even the tea? :O) talking, as the comparison table is actually quite informative and clean (after blinking once or twice). However, this would not help me summarize the licenses that I would consider using for a project.

In any case, I stopped crying. Poured a glass of whiskey after downing a cup of coffee. Round three.

Time to remember why I was doing this in the first place. Or perhaps not why, but more what triggered this post in the first place (besides the WTFPL comic).

The reason’s actually simple: it was the Stack Overflow license. Specifically this meta question. User  “Stefan” asks how to get permission to use a function from a SO post in GPL-licensed software. I had never thought about that: people may have to worry about all sorts of things to use entire snippets from SO posts. And heck: I am also one of “people”…

Interestingly, the solution from a code-providing point of view is simple. Posting on Stack Overflow means you release it under “cc-by-sa 3.0 with attribution required”. However, you can license it in other ways too if you so desire (and have the (copy)right to do so).  As user Pëkka puts it in this post:

Stack Overflow Copyright flowchart

So I broke down in tears again.

Why was this shit so easy for Pëkka to describe? How can I ever hope to create a text or picture about licenses equally eloquent and explanatory?

I think I can’t. So it’s probably best if I don’t write a post about licences.

CSS syntax naming conventions – REDUX

Jeroen

I’ve blogged about CSS naming conventions before. The Stack Exchange question I referred to then has since been closed (for understandable reasons). However, it recently also started gathering “delete” votes. Given that I don’t have enough reputation to see deleted posts on Programmers.SE, I intend to salvage up front whatever info was in that post and it’s answers here.

So, here’s the redux version of my post, along with the answers. If anything, this’ll be a good excercise in following the cc-by-sa license from Stack Overflow.

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. 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:

  1. UpperCamelCase, mainly as a cross-over habit from server side coding
  2. lowerCamelCase, for consistency with JavaScript naming conventions
  3. css-style-classes, which is consistent with naming of css properties (but can be annoying when Ctrl+Shift+ArrowKey selection of text)
  4. with_under_scores, which I personally haven’t seen used much
  5. alllowercase, simple to remember but can be hard to read for longer names
  6. UPPERCASEFTW, as a great way to annoy your fellow programmers (perhaps combined with option 4 for readability)

And probably I’ve left out some important options or combinations as well. So: what considerations are there for naming conventions, and to which convention do they lead?

Amos M. Carpenter answered:

Bounty or not, to some extent the choice will always be a “matter of preference” – after all, how would you feel if the W3C recommended (or even imposed) a certain convention that you didn’t feel was right?

Having said that, though, I personally prefer the lowerCamelCase convention, and I’ll give the reasons and practical considerations I’ve used to make up my mind – I’ll do so by a process of elimination, using the numbering from your question:

(5.) justnoteasilyreadablebecauseyoudontknowwherewordsstartandend.

(6.) ASABOVEPLUSITSANNOYINGLIKESOMEONESHOUTING.

(4.) historical_incompatibility_plus_see: Mozilla Dev Documentation.

(3.) a-bit-trickier-to-explain… as you mention, selectability in text editors is one issue (as with underscores, depending on the editor), but for me it’s also the fact that it reminds me of the syntax reserved for vendor-specific keywords, even if those start with a hyphen as well as having words separated by them.

So this leaves your (1.) and (2.), UpperCamelCase and lowerCamelCase, respectively. Despite the mental link to Java classes (which are, by a more clearly defined convention, UpperCamelCase), CSS class names seem, to me, to be better off starting with a lowercase letter. Perhaps that is because of XHTML element and attribute names, but I guess you could also make the case that having CSS classes use UpperCamelCase would help to set them apart. If you need another reason, lowerCamelCase is what the W3C uses in examples for good class names (though the URL itself, annoyingly, disagrees with me).

I would advise against (4.), (5.) and (6.), for the reasons stated above, but suppose that arguments could be made for either of the other three.

Whether or not you (or anyone else for that matter) agree with me on this matter is up to you though. The fact that you haven’t got a definite answer quoting authoritative sources by now can be taken as a hint that there isn’t such a thing as a definite standard on this issue (else we’d all be using it). I’m not sure that’s necessarily a bad thing.

Emanuil Rusev answered:

Words in CSS class names should be separated with dashes (class-name), as that’s how words in CSS properties and pseudo-classes are separated and their syntax is defined by the CSS specs.

Words in ID names also should be separated with dashes, to match the syntactic style of class names and becaus ID names are often used in URLs and the dash is the original and most common word separator in URLs.

tdammers answered:

It’s mostly a matter of preference; there is no established standard, let alone an authoritative source, on the matter. Use whatever you feel most comfortable with; just be consistent.

Personally, I use css-style-with-dashes, but I try to avoid multi-word class names and use multiple classes wherever possible (so button important default rather than button-important-default). From my experience, this also seems to be the most popular choice among high-quality web sites and frameworks.

Lowercase with dashes is also easier to type than the other options (excluding the hard-to-read nowordseparatorswhatsoever convention), at least on US keyboards, because it doesn’t require using the Shift key.

For id’s, there is the additional practical consideration that if you want to reference elements by their ID directly in javascript (e.g. document.forms[0].btn_ok), dashes won’t work so well – but then, if you’re using jQuery, you’re probably going to use them through $() anyway, so then you can just have $('#btn-ok'), which makes this point mostly moot.

For the record, another convention I come across regularly uses Hungarian warts in ID’s to indicate the element type, especially for form controls – so you’d have #lblUsername, #tbUsername, #valUsername for the username label, input, and validator.

asfallows answered:

I strongly believe the thing that matters most is consistency.

There are two ways to look at this:

  1. A good argument can be made for alllowercase or css-style-clauses (probably the better choice) because they will be the most consistent with the code they’ll be in. It will lend a more natural flow to the code overall and nothing will be jarring or out of place.
  2. An equally good argument can be made for a style that is distinct from HTML tag names or CSS clauses, if it will differentiate IDs and classes in a way that aids readability. For example, if you used UpperCamelCase for IDs and classes, and didn’t use it for any other construct or purpose, you would know you had hit on one every time you saw a token in that format. One restriction this might impose is that it would be most effective if every ID or class were a 2+ word name, but that’s reasonable in many cases.

In writing this answer out I came to find that I’m much more inclined toward the second choice, but I will leave both because I think both cases have merit.

1995: It was a very good year…

Jeroen

Apparently, 1995 was a very good year. But wait, I get ahead of myself!

Recently I had a conversation with a friend about CMSes. We were confused, disagreeing on whether “Django” was a CMS or a web application framework. Neither of us was entirely sure, both of us being developers in the Microsoft stack.

Given that looking for (meta-)comparisons, and coming up with (sometimes far fetched or even disrespectful) parallels is a “secret” hobby of mine. So why not attempt to insult as many technology zealots in one go as I can by comparing popular technologies? At the very least I’d find out if Django is a CMS or web framework.

Turns out it is both.

Of course, finding parallels is hard and at times nearly impossible. Platforms and technologies differ and overlap at times, making a tabular comparison quite a challenge. Here’s my (first) attempt at a comparison:

Web App Framework(s) Example CMS(es) Package Manager(s) IDEs
C# (and VB.NET)

Current: 5.0
Originated: 2000
Microsoft

 ASP.NET: WebForms & MVC DotNetNuke, Orchard NuGet Visual Studio, MonoDevelop, SharpDevelop
Java

Current: 8
Originated: 1995
Oracle

 Spring, JSF, Struts, Google Web Toolkit, etc. Liferay, Hippo, Open CMS, Pulse Maven Eclipse, IntelliJ, NetBeans
PHP

Current: 5.6.0
Originated: 1995
The PHP Group

 Zend 2, CakePHP, CodeIgniter, Symfony WordPress, Drupal, Joomla! Composer PhpStorm, PHPEclipse, Zend Studio, NetBeans, Sublime Text
Ruby

Current: 2.1.2
Originated: 1995

 Ruby on Rails Radiant, Refinery, BrowserCMS RubyGems n/a
Python

Current: 3.4.1
Originated: 1991
Python Software Foundation

 Django Django-CMS, Plone Pip, PyPM n/a
JavaScript (Node)

Current: 5
Originated: 1995
Joyent

 Node.js Ghost, KeystoneJS, Hatch.js, Calipso npm n/a
Perl 5

Current: 5
Originated: 1987
The Perl Foundation

 Catalyst, Dancer, Mojolicious Bricolage nCPAN, PPM n/a

There were two main takeaways from this comparison for me. First, apparently “Django” is a Python web application framework, and “Django-CMS” is, well: a CMS. Second, 1995 was a very good year: Wikipedia lists 4 out of 7 languages as originating in 1995.

Guess it was a very good year.

CSS Kata “The Lord of the Rings”

Jeroen

After last kata I’d really had it with CSS-ing “true semantic” markup. So this time I went all out: bend the markup backwards as far as it’d go. And though the html-gods may strike me down, they won’t do so before I’ve created this monster:

The Lord of the Rings - Comparison

I’ve spent 1 minute on a background to match the “feel” of the original poster, and a good 2 hours fiddling on the markup and CSS. The result felt moderately pleasing. I only felt like doing the easy bits, so I left the things I didn’t instantly know a solution to for what they were (the 3D effect on the letters, choosing a better font, etc.).

For reference, here is the monster we’re talking about:

So many spans, my eyes! Here’s the corresponding CSS:

See it in action on JSBIN.

This concludes my self-imposed challenge of CSS katas. Even though these katas (or the fact that I insisted on publicizing them) were probably not “lightweight” enough, the basic principle of doing katas was enjoyable. Perhaps I should secretly start another series…

CSS Kata “Fight Club”

Jeroen

I’ve now done four CSS Katas, and four times I ended up Googling “CSS first-word selector”. Of course, every time the answer was the same: not possible.

Today I made final attempt to avoid introducing non-semantic elements and use purely CSS to hack the actual movie poster together. However, it requires you to resort to some pretty hefty hacks to get things working. Take, for example, the heading for the movie stars:

Fight Club Movie Stars

In markup for this I can still rationalize grouping the two names into their own elements, but separating first name and surname feels like a bit too much. So we end up with markup like this:

Now, without a “first-word” selector: what’s left in CSS to style first names differently from surnames? All I could think of was this dirty trick:

This creates a linear gradient left-to-right, with stops at oppropriate horizontal positions: exactly between words. After that, it sets the text to clip out that background, so that you can only see the background where there’s also text. Oh, obviously this will only work in webkit browsers (and will look pretty awful in others.

Other parts of this poster were less interesting. The soap bar is mostly an excercise in text-shadow, line-height, letter-spacing, and some rotation. In any case, this is the end result, compared to the original:

Fight Club CSS Kata Result

The code for this result can be found on cssdesk, and is as follows:

And this CSS:

Next time: Lord of the Rings. Probably with full-markup-cheats turned on!

Book List – Update May 2014

Jeroen

Almost two years ago I posted about starting a book list. So I did, and today I also took some time updating my Book List Page.

Books "A-List" per 2014-05-11

The list was growing, so I divided it into three groups. Shown above are 10 book covers from the “A List”: books which I loved reading and would highly recommend. The “B-List” are books that were well worth my time, yet aren’t directly recommended for one reason or another. The “C-List” are books I’ve read, but I’d recommend against picking them up for one reason or another.

A shout-out goes to my friend and colleague who’s been solid in providing recommendations (as well as lending me physical copies); he’s accountable for about half of the books on my A-List.

I’m in doubt what to read or do next though. Some things I’m considering:

  • Either one of the “Seven X in Seven Weeks” series (programming languages and/or databases).
  • Something about Java and/or a new book on programming for Android.
  • Anything like “PHP The Good Parts”, if it’s out there. (with topics like OO, Unit Testing, Dependency Injection, etc.)

On the other hand, I might also stick with some hobby programming or Pluralsight courses for now.

Of course I was hoping writing this post would help me figure out the question of what to do next. No luck so far though.

Ah well, the Right Thing to do will come to me with time, I guess.

CSS Kata “Face/Off”

Jeroen

Here’s the slogan for today’s Kata:

Commas: use them bitches!

Or in general: interpunction is important. Turns out with this poster that even certain content (e.g. slashes) may not be content after all, but just styling.

First things first though. For the Face/Off Kata the first thing I did was to get the text in there, with only a wee bit of styling to get going. This is the markup:

And this is the CSS:

For some reason I did place a “/” in the movie title, yet not between the actor’s names, even though it was clearly there in the original poster. This is probably a problem, that can be discovered by imagining how a screen reader would go about this text. Basically, the Windows Narrator tells me this:

John Travolta Nicolas Cage in order to trap him, he must become him Face slash Off June 27nd

Not good. I’ve tried to improve my markup into this, using commas and other important interpunction:

This is much, much better. It is read by Narrator like this:

John Travolta, Nicolas Cage. In order to trap him, he must become him. Face, off. June 27nd.

Okay, so let’s assume the Narrator is my Oracle, and this markup is perfect. This poses a challenge for my CSS to still get a resulting visual that resembles the original poster. Here’s the result I settled for (compared to the original):

Face/Off Comparison

I’m not happy with this, as in: I wish I was more succesful in finding hacks to fix the differences. These include:

  • Getting the actor names to spread out on two lines, with the actor’s first names in a smaller font. I’ve tried using “first-line”, but as soon as I decrease the font-size the second word will also fit on the first line. Highly frustrating, I see no simple solution here.
  • Replacing “, ” (comma + space) with a single “/” (slash). I’ve tried several things, including the experimental unicode-range descriptor. No dice.
  • Getting rid of the periods at the end of sentences. Alas, there is no “last-letter” or “nth-letter(…)” pseudo-selector.
  • Finding CSS to fix the horizontally stretched text shadow on the titles. A meager “text-shadow” was as close as I could get.

In short: a failed attempt. Educational, though.

Pretty Database Diagrams

Jeroen

This is a cross-post about database diagrams, originally a self-answered question on the new Software Recommendations Stack Exchange site.

Up until a few years ago I used Microsoft Visio to reverse engineer an existing database to a diagram. This feature has been deprecated for a while now, and I’m rather stuck in finding an alternative.

Requirements

So, what would be the requirements for an alternative? Most of the requirements below were in Visio, though not all of them. I guess finding one piece of software that has them all is not feasible, but I’d like to get close.

Important:
  • SQL Server 2012 databases;
  • Reverse engineer tables with all columns and Primary/Foreign Key indications;
  • Reverse engineer foreign keys as connectors between tables;
  • Manual layouting of boxes and connectors (I want to group stuff visually);
  • Basic theming: choose background colors for tables;
  • Able to handle complex models, e.g. 100+ tables;
  • Able to choose which items to show or not (e.g. leave out certain tables, etc);
  • At least a free trial available;
  • Exporting to various formats for distributing and printing purposes, PDF, or PNG would also do;
  • WYSIWYG;
Main bonus points:
  • Runs on Windows 8 (though I’d install a Linux VM for software fulfilling all important requirements)
  • Automatic layouting and connector routing to minimize overlap;
  • Able to do SQL Server 2008 and 2008R2;
  • Able to reverse engineer views;
  • Free (or a free version);
  • Incremental update, e.g. reverse engineer again and have tables added/removed, etc., whilst keeping theme, existing layout, etc.
  • Pretty diagrams (modern look and feel, anti-aliasing, choice of fonts, colors, gradients, drop shadows, theming, etc);
  • Friendly learning curve (I can handle many complex features as long as it’s easy to get the basics done quickly);
MUST HAVE:
  • Installer doesn’t secretly install toolbars in my browser or change my home page!

My Research

Of course this question has been asked before, even on sister sites (with some success even though they’re off topic there). Here’s a few:

And slightly similar, from DBA.SE:

Furthermore, Wikipedia has a table comparing several software packages for “reverse engineering” feature:

Tried

These are the things I’ve tried:

  • Visio 2003 (this is what I used to use). Not free, outdated, but otherwise it fit the bill for most points. Not an option anymore though.
  • Visio 2010 and 2013 (this is what I have currently). Reverse engineering is no longer supported. I’ve considered writing a plugin or using VBA to hack things together though. Not sure how tough that would be. It’s not free (except I guess that I personally have it already), but fits the bill on a lot of other points.
  • Graphviz. Tried this quite some time ago, from what I remember it had a bit steep learning curve and I wasn’t quite able to manually determine final layout.
  • SSMS diagrams. This works for small cases, but can be cumbersome for larger cases.
  • Visual Studio 2012 ADO.NET Entity Data Model. Manual layouting of connectors is limited, theming does not exist at all, it is really meant for a goal other than documentation and it shows (e.g. default you get “Navigation Properties”, etc), and it doesn’t work well for 100+ tables. This may be useful for smaller scenario’s but doesn’t fit the bill for me.

And I think I may have tried a few suggestions from the SO threads, though I can’t really remember specifics.

So I asked: what would others recommend?

…Radio silence…

So I guess I’ll have to answer my own question then. My suggestion:

Use plain Visio for this.

Here’s why.

Explanation of my approach

There is no tool that conveniently satisfies all mentioned requirements, not even one that fulfills the main requirements only. Visual Studio 2012 comes close, but lacks theming support and didn’t work very well for a large number of tables.

The following process worked for me:

  1. Create a blank Visio Flowchart template. I’ve also tried the UML template and shapes but this has infuriating behavior for connector routing. Not recommended! Choose a design you like. Set the page and print sizes to something you want (I chose landscape A3 format and the “Linear” theme).
  2. Open a query in SSMS on the side to get the details you’ll need later: tables, column names, and IS NULL info.

  1. Start adding the tables one by one. Choose manually which tables and columns you which to include.

This is an example of what the end result looks like:

Database Diagram Example (Zoomed In)

Or a zoomed out screenshot of the entire model (because it was manual labor I chose to include significantly less than all 100+ tables):

Database Diagram Example (Zoomed Out)

The procedure I used to make the “tables” look as they do:

  • Headers are bold and a larger font size.
  • Separators aren’t lines but just a series of bold “—” dashes after eachother.
  • Four “sections”: TableName, Primary Key, Foreign Keys, plain columns.
  • Bold for NOT NULL columns.
  • White for TableName and separators, black for column names.

In addition, I chose for foreign keys to:

  • Never allow crossing connectors, and instead creating small “reference” blocks that refer to a table that’s somewhere on the other side of the model.
  • Not include all tables (i.e. there are more foreign keys than connectors).

Hopefully the above will be of use to others too.

How it holds up to the requirements

As a bottom line, I do recommend this approach, mainly because you end up with a visually appealing model and a high degree of control. This approach doesn’t fit the entire bill though. Here’s how it holds up to the requirements:

Data connectivity
  • SQL Server 2012 databases
  • Reverse engineer tables with all columns and Primary/Foreign Key indications
  • Reverse engineer foreign keys as connectors between tables

± This is all possible but not automated. So “more or less”.

Control and visuals
  • Manual layouting, basic theming, able to choose which items to show
  • Able to handle complex models, e.g. 100+ tables

✓ Yes, this all works very well with plain Visio.

Moneys
  • At least a free trial available

✓ AFAIK there’s a free Office trial available. I haven’t looked into this though as I have Visio.

Other
  • Exporting to various formats
  • WYSIWYG;

✓ Yes, this is available in Visio.

Bonus Points

It has about half of the bonus points:

  • runs on Windows 8
  • SQL 2008 also supported
  • pretty
  • friendly learning curve

Conclusion

It’s a shame I didn’t find any tool that met my requirements. I actually feel like failing in this regard: surely I haven’t looked hard enough?

It’s also a shame that I wasn’t able to muster the perseverance to automate this. I’m a developer for fuck’s sake!? (Or am I?)

It’s without shame though that I did end up with a rather pretty, useful diagram, with exactly the layout and content I wanted. I guess “Good is the enemy of Perfect” held up here.

CSS Kata “Citizen Kane”

Jeroen

Given that I’m fine with not blogging for a few months, I might as well also be fine with posting twice in one week! I had some inspiration to work on the second CSS Kata: “Citizen Kane”. Here’s what I decided to do differently this time:

  • Include all the other texts (next to the movie title) as well (as suggested by a friend of mine);
  • Pick low-hanging fruit in making my effort look less shitty (e.g. using Paint.NET to find the correct color codes in the original poster);
  • Use this Kata as an excuse to make an animated gif;

Here’s a comparison of the final result:

Citizen Kane CSS Kata Overview

Pretty darn close! To clarify, the rightmost one is the same as the middle one with an opaque background showing the non-textual elements on the movie poster.

Oh yeah, I mentioned an animated gif, right? I kept track of all the changes I did, here’s my train of thought visualized:

Animation of Citizen Kane CSS Kata

(Animated GIF may not display correctly in RSS feed readers; open image or post directly to view it.)

No cheating was involved: these were the actual steps from zero to final result. Here’s the html I ended up using:

And this is the CSS to get to the end result:

Next up: “Face/Off”. Tomorrow, next week, next month, next year: who knows! Whenever I feel like it. Because blogging should be (mainly) for fun!