David Smeringe weblog

From time to time I create a new site (actually, that’s kind of what my job is all about.. ). Such job is usually quite similar from one site to another. In order to simplify this process and – perhaps even more valuable – increase the production quality, I use frameworks and boiler templates. Currently my favourite setup is the HTML5 Boilertemplate together with grid960.

Let me introduce the two of them for you.

HTML5 Boilerplate:

This is what it sounds like. A basic proof-of-concept foundation for any website what so ever. No need to invent the wheel all over again. It’s important to notice though that it’s not a framework, but a ready made template setup which you then can (usually) scale down safely as well as add on to, to fit your needs.

That’s where the nice CSS Framework grid960 comes in!

The Grid960 is much more of a framework (as far as you can speak of frameworks in CSS). It gives you ready made CSS classes for a grid-splitted layout with a set width (960). Quoting their site;

“All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.”

There are really nice plugins for Photoshop/AI/Fireworks/Dreamweaver that makes life even easier.

Applying the 960 grid to your boiler template is just a matter of adding the 960.css right after the boilerplates style.css link-tag (Ignore the reset and text css).

Read more about these two at

http://mashable.com/2010/09/02/html5-boilerplate-guide/ – Short intro

http://html5boilerplate.com/- Home of the boilerplate

http://960.gs/ – Home of the CSS grid

..and Some QA for boilertemplate @github

Next up will be chopping it upp all again to fit the CMS or whatever system it needs to fit into (TYPO3 maybe?!)

Updates 24 feb 2011:

Here are some adjustments or additions when working with boilerplate and TYPO3:

Skywriter (Bespin) is an on line pure web standards code editor from the Mozilla ppl.. It’s also available as a bookmarklet (apart from an embedded release). The bookmarklet is pritty cool, allowing you to click the bookmarklet when visiting any site with a textarea in it and then transform them into code editors with highlightning etc..

Just stumbled (surfed) upon this link http://mrdoob.com/projects/harmony/.

Monkey

Short share of TypoScript know-how..

TYPO3 comes with a handfull different cObjects, such as TEXT, IMAGE etc.. (see the tsref) and then there are the more general cObjects for content rendering; CONTENT and RECORDS. The CONTENTS object focuses on a more widely rendering process, where you find your data with a select property, and a renderObj output.. ..then there is the little bit simpler variant RECORDS that allows you to find and output records from one or more tables in a bit more raw way thant CONTENT allows you to.. anyway.. what I wanted to share today was this difference when outputing a RECORDS object..

Take this TypoScript:

It outputs a tt_content record with uid 47 like this:

Quite often you might want it a bit more trimmed.. (especially when you map it with typoscript object path in templavoila into a predifend position in a template). Then you can do like this

Which renders this instead:

The basic thing is – define what you want in your output, and ignore the rest. The same could be done with a logotype image or similar (mapping an image content outputs a lot of extra wrappings by default..)

Another small notice; If you map a ts object from templavoila and get HTML output as text, then edit DS/TO and uncheck “as content through htmlSpecialChars (HSC)” for that field….

I recently decided to be dary – I ordered a MacBook Pro – the 15″ i7, 2.66ghz, with the highres (1680) screen. I got it last week, and so far all I can say is actually – WOW It does feel like ‘*Nix made right’. Of cource, there are some bridges to cross, but I didn’t expect anything else anyway.

I thought it’d be cool to post my experiences so far, and the stuff I’ve so far has bloated the computer with, so here we go

• The little characters commonly used by developers – the (in swedish at least) so called seagul wings – { and }. They can be found with the combination shift+alt+8or9. I would prefer one less key in the combo – but I’m getting used to it..
• The brackets [ and ] are under 8 and 9 as well, but solely with alt+number.. Still teaching my fingers that..
• The dollar sign.. On my swedish keyboard there is a € char above number 4. Found out that the $ char is there as well, but with alt+4.
• Change primary screen when using an external screen? first it seemed a bit problematic when I found solutions like, “close the computer, and press space bar on the keyboard which activates the computer a gain”. It’s far esier. Open dislpay settings and drag the toolbar to the screen that should be primary. Done..
• Clearing the DNS settings is done with (terminal) dscacheutil -flushcache

Some settings I’ve quicly changed…

• I quickly changed so that the F[1..12] keyboard buttons are F[1..12] buttons and not function keys. Now the function button is used to reach the function buttons behaviour instead. Better…
• Changed so that double clicking on window list minimizes the window.
• Changed size on dock (The menu list on a mac) and set it to auto hide (which also means that maximizing a window really uses the entire space and not just down to the top of the dock).
• The setup on the Dock – a lot of rearly used apps there, removed them (they are still in the Applications folder), and added the terminal (I use it a lot!) and some other more commonly used apps (like all browsers etc)

AAANND the apps

• Adium for chatting – It’s a superb IM client for most protocols
• Growl – a really cool notification app that integrates with most apps
• FileZilla client (FTP) – I’ve used under both Linux and Windows. By far the best FTP client. Easy to transfer from the PC by exporting/import the settings as XML.
• Skype
• NetBeans – my current IDE of choice
• Subversion – command line version so far.. Still missing a good client (would prefer an OSE one, otherwise the Versions app seems good)
• Microsofts RDP client
• MySQL server (also remember to copy/create a config file under /etc for admin apps to work..)
• MySQL Workbench
• Firefox with some of the common add ons for a web developer
• Chrome
• TextMate (heard it should be the developers best friend on a mac) – trying it out still.
• Smultron (a dev editor as well. testing that too)
• Tomboy. One of my favourite apps from the Linux world. A note taking app based on the wiki concept. really smooth.
• The Adobe CS5 Web package.. (I actually hoped that I could convert my CS4 license to a Mac one, but apperantly that’s not possibly now since they released the version 5.. buhu..
• I’m about to install the VirtualBox, but I’ve not come that far yet..

I think that’s it for now.. btw:

• four fingers sliding down – show all open windows..
• three fingers sliding left/right. Browser back/fwd (and such)
• two fingers sliding down/up. scroll
• two fingers clicking – right click

- I like it.

The only downside so far is my configuration mess up with my external keyboard. less than/greater then (<>) becomes §° instead (the key is actually lost in the mapping for some reason). Havn’t found a solution to that yet.

Cheers.

I’ve been digging quite a lot into this thing about generating a TYPO3 page as a PDF file. There are a few extensions in TER that does this in various ways. The two best shots I came up with after some fiddeling was

• PDF Generator 2 (pdf_generator2)
• WebkitPDF (webkitpdf)

There are some others but, afaik they lack CSS support.

I started out with the first one, which was really  easy to set up and use, but when I launched it on my production server it throw memory errors, so I started to play with WebkitPDF instead. This extension is a simple but powerfull wrapping around the Wkhtmltopdf project (http://code.google.com/p/wkhtmltopdf/) which basically takes the Webkit HTML engine and generates a print out from that.

The documentation instructs you put the FE plugin on a new page, and then add a short TS into you TS Setup. I thought I’d post my TS setup here for example on how to use it slightly different (mostly since I wanted to have the current page title as filename). Note that I’m forwarding the PDF link to a ts object – lib.pdfLink. I’ve mapped that in an FCE with links in my case. Instead of adding the FE plugin on a separate page I include it on all pages (last row in TS) – since I need the ouput possibility on most pages anyway.

Additional notes:

I just realized that the CSS attribute page-break-after/before is a bit kinky with the pdf converter (actually it’s the webkit engine, and Firefox has the same problem. I didn’t bother to check if IE suffers from the same, but I guess it does…).
If you want to break a page somewhere, then make sure the page break doesn’t reside in floated elements. This is a bit tricky since a modern HTML template normally consists of floated divs and by that there is no natural position for such page break. This was fairly easy to solve for me in my current case since I really didn’t need the other columns in my output. Therefore I could first set the divs like:

I made a small FCE in TYPO3 containing a div with class .pagebreak, which I could insert anywhere on a page. It’s hidden in media screen, but breaks the page when printing. Pritty nifty if you ask me

by Josef from Eden Foundation.

There is one frustration every Swing programmer shares: The message box system. The class JOptionPane, that comes with the Java Runtime Environment, is indeed versatile – but at the same time agonizing because of a very basic problem. Long messages don’t wrap… (click on the image to see what I mean)

This is the default behavior. There are various workarounds, the best that I’ve read about being to override the getMaxCharactersPerLineCount() method through a subclass. It’s a decent solution.

But once you start thinking about a bad class, you start getting wishful. And my wishlist came to include:

• HTML-formatting for my messages (so some things can be written in bold or italic).
• Possibility for the user to select and copy parts of the message, or it’s entirety, for sending in chats or emails when communicating with support.
• Support for really, really long messages, the ones that are as long as License agreement! for the cases where this actually is desirable. If so, the message box should not disappear partly outside the screen. Instead, the message should be scrollable.

As I couldn’t find my dreambox anywhere on the net, I finally took the time to fix my own. I found it especially challenging because of the LayoutManagers that just didn’t seem to want to do what I want, but in the end, a tip from Stanislav Lapitsky helped me sort it out. He had a quick-and-dirty on how to figure out the height of a JEditorPane if you are locking it’s width:

http://java-sl.com/tip_text_height_measuring.html

So I’ve made a wrapper class that I call instead of JOptionPane, that wraps my message strings into a JEditorPane before displaying them. The key part of the code was to embed the text messages in a nice component.

The result looks like this:

…like this…

…or this…

…or if the message is really, really long and almost qualifies to be an End User License Agreement (as if any end users ever have the time and legal knowledge to understand those), like this:

You can find the full source here:

http://www.edenfoundation.org/products/code/MsgDlg.java

A client of mine has their own SVN repository and they where running ssh over another port than the normal 22. Doing this can be a bit tricky since svn doesn’t really like the common host:port style when using svn+ssh protocoll (or whatever you call that combo).

I’m using NetBeans (6.7.1) in Ubuntu, so was eager to get svn working directly from there. Since svn itself doesn’t like special ports, neither did NB. But after a simple search on “netbeans svn ssh port number” I surfed into (not stumbled – you know – I surf the web..) a subject in the subversion mailing list which reviled a simple solution. With ssh you can add some kind of alias for hosts for which you also can define a port etc, then it’s as simple as one two three to use custom ports with svn+ssh. I’m taking the liberty to sum the mail archive post here:

create (if not already there) a file in you home folder ~/.ssh/config

Adopt the following to your needs and add them to that file


host mysvnhost
Hostname svn.onthehost.tld
Port 80
ForwardAgent no
ForwardX11 no

Then just use svn+ssh://mysvnhost/path/to/repo with svn.

Long time since last post, and by then it’s this really on topic link: http://sarien.net/

Just had to post it. Brings those old memories back to life. Those where the days, right?

Thanks Martin Kool for bringing it all back

Show your support for TYPO3 and the upcoming framework FLOW3 and nominate them for a soure forge community award.

Hit this image to nominate FLOW3 for “Best New Project” and “Most Likely to Change the Way You Do Everything”

..or, hit this button to nominate TYPO3 for “Best Project” and “Best Project for the Enterprise”

There aint much more to say about that