Disabling a previously specified max-width

I just did something stupid with my CSS but it had me scratching my head for a while.

If you have a max-width set and need to disable it in a cascaded style, you need to set it to none rather than auto i.e.:

img {
    max-width:100%;
}

#some-other-selector img {
    max-width:none;
}

This sounds obvious (and it is really), but because you usually use width:auto to override a previously specified width, I found myself inadvertantly doing the same with max-width and it took a while to realise what I’d done.

Posted in Tips | Tagged | 16 Responses

TeamCity 7 upgrade “failed to install tomcat service”

I was just (somewhat belatedly) upgrading to TeamCity 7.0 from 6.5 on a Windows Server 2008 box when I got an error. I’ve upgraded numerous times in the past without any problem, but this time I got the message “failed to install tomcat service“. I was advised to check my permissions and settings and either abort, retry or ignore, with the latter being deemed inadvisable.

Googling didn’t turn up much, but after digging around I discovered that the “TeamCity Web Server” service was in a “Disabled” state. Attempts to do anything with it gave me the message “This service is marked for deletion.”

With the help of this StackOverflow answer, I quickly figured out that I’d started the upgrade process with Windows’ Services viewer open. For whatever reason, this kept a hook into the outgoing TeamCity service which couldn’t be fully uninstalled as a result.

The solution was simple – close the Services window and retry. The installation completed without any further issue.

Whilst this is a bit of an edge case, the fact that the TeamCity error message didn’t directly reference the “TeamCity Web Server” service didn’t help. A clearer message would have sped up the diagnosis.

Posted in Fixes | Tagged | 6 Responses

Useful links for getting started with web development

Update 06/02/14: I’ve just done a quick review of this post and made some changes. There’s loads more I could add but time doesn’t permit right now 🙂

Every couple of years I go back to my old school to participate in a careers convention, where people from a range of industries get together to dish out tips and advice to pupils trying to make career choices. A great cause, especially with uni now being a more challenging prospect here in the UK due to the huge hike in tuition fees. Youngsters really need all the help they can get to make sure they pick the path that’s right for them.

I promised those I spoke to this year that I would post a list of links on my blog as a follow-up to find out more about web development. I should stress that this list is by no means exhaustive; I put it together quite quickly and there’s plenty more I could have included. For example, whilst I’ve tried to include links relating to a range of technologies, inevitably there’s more about the areas I have more experience with. Hopefully though it can still provide plenty of reading material and food for thought to help in evaluating whether web development is a subject worth investigating further as a potential career or perhaps just as a hobby.

I’ll try to update the list from time to time when I think of more (suggestions also welcome via the comments). I’m also hoping to follow this blog post up with some further thoughts on choosing web development as a career.

Without further ado, here are the links:

Programming Languages / Frameworks

  • HTML5/CSS/JavaScript – Open technologies at the heart of the web – learn these first!
  • Node.js – Increasingly popular serverside JavaScript platform
  • Ruby – Widely used
  • Ruby on Rails – One of the most popular web frameworks, built on Ruby
  • Python – A good starter language, often taught on uni courses etc.
  • PHP – Been around a long time and still widely used, though not considered too cutting edge these days
  • ASP.NET – Microsoft’s web platform, used a lot in the enterprise (see also http://asp.net/ and http://msdn.com/)
  • Java – Mostly found in the enterprise, not a good choice if you want to keep ahead of the curve!

Online video/interactive training

  • Treehouse – Web design & development
  • Codecademy – Interactive coding courses in a range of languages including JavaScript, HTML/CSS and Ruby
  • CodeYear – Learn to program in a year (part of Codecademy)
  • PluralSight – Large library of videos for a range of technologies, not free but reasonably priced
  • TekPub – Screencasts on a range of topics, some of which are free (update: has been bought out by PluralSight)
  • appendTo – jQuery/JavaScript training
  • NodeTuts – Node.js screencasts
  • RailsCasts – Ruby on Rails screencasts

(e)Books

Look out for deals of the day from most of these – they tend to have an ebook or two available each day for around £7-£10 (see my Twitter list covering many of the ebook publishers).

Resources

  • Move the Web Forward – One stop shop for keeping abreast of web standards and getting involved in the community
  • Webmaker – A Mozilla project “dedicated to helping you create something amazing on the web”
  • frontend-dev-bookmarks – A huge list of frontend development resources
  • jQuery – Most popular JavaScript library for rapid web development (though use with caution – easy to produce spaghetti code if you’re not careful)
  • Twitter Bootstrap – UI framework that makes it really easy to get a good UI up and running very quickly
  • Google Reader – RSS aggregator – subscribe to blogs and news sites and have all articles brought together in one place to save having to check each site manually (update: service has closed)
  • Feedly – A drop-in replacement for Google Reader, a good way to aggregate articles from across the web into a single feed (or multiple if you prefer)
  • TweetDeck – Useful Twitter client for monitoring topics and lists of accounts to help breakdown the wealth of information that flows through Twitter

Databases

  • MySQL – Most popular open source relational database server (free)
  • PostgreSQL – Another popular open source relational database (free)
  • SQL Server – Microsoft’s SQL database, common in the enterprise (free cutdown editions available – Express and Compact Edition)
  • MongoDB – Popular open source “NoSQL” database (free) – an alternative approach to “traditional” databases (has pros and cons)
  • CouchDB – Another popular NoSQL database

News / Views / Tutorials

  • Hacker News – Anything and everything of interest to a techie
  • Reddit Programming – As above – see http://reddit.com/r/LearnProgramming/ and other related sections also
  • Smashing Magazine – Large selection of articles, resources etc relating to web design
  • HTML5 Rocks – Google resource with a host of articles, tutorials and resources on HTML5 and modern browser techniques
  • DailyJS – JavaScript/Node.js news
  • Ruby Inside – Ruby news and tutorials
  • Techmeme – General tech news, usually one of the first places you’ll find the big stories
  • Twitter – One of the best ways of keeping on top of everything – many blogs tend to post on their Twitter feeds when new articles are posted, plus there’s an endless stream of useful links being shared

Help

  • StackOverflow – Q&A site for developers with specific problems, usually related to specific source code
  • Programmers – Q&A site for programmers with higher-level conceptual problems

Mailing Lists

Podcasts

Web Hosts

  • Heroku – For Ruby, Node.js, Python, Java and more (requires understanding of source control – see below)
  • AppHarbor – For .NET (requires understanding of source control – see below)
  • Amazon Web Services (AWS) – Amazon’s cloud platform, a more granular and pay-as-you-go way of choosing your hosting infrastructure
  • Azure – As above, but Microsoft’s equivalent platform
  • WebHostingTalk – Great forums to help find/discuss any type of web host
  • LowEndBox – Useful place to find a really cheap and basic (but functional) server to manage yourself

Jobs

Source Code / Version Control

  • Git – One of the most popular version control systems out there
  • Mercurial – Similar to Git, slightly easier learning curve
  • Github – The most popular source code host, based on Git
  • BitBucket – Supports Git and Mercurial
Posted in Careers | 19 Responses

Handling the proprietary CSS filter attribute in dotless

I’m a big fan of the LESS CSS library – a fantastic way of simplifying the process of writing CSS by offering a number of basic programming capabilities such as variables, functions and mixins.

There are a number of implementations available for different platforms, and the purpose of this blog post is to highlight a feature in dotless – the .NET implementation – which I’ve had to call on occasionally but often forget about in the interim, so I’m hoping this will stop me from forgetting 🙂

From time to time (when needs absolutely must) it’s necessary to use the proprietary filter attribute to accommodate IE (much better if you can use something like CSS3 PIE but like I say, sometimes needs must). For example:

.some-class {
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color='#000');
}

However, because of the abnormal syntax this involves, it causes parsing issues with dotless. I’ve read about a number of ways of working around this, but the only one I’ve found to be properly reliable (e.g. including the ability to use variables within the filter) is the use of dotless’ formatString function (which appears to be undocumented).

This has a similar signature to String.Format i.e. it takes as its first argument a string containing placeholders where values need inserting ({0}, {1} etc) followed by an argument for each value to be substituted. So using the above example, your CSS would look something like this:

.some-class {
    filter: formatString("progid:DXImageTransform.Microsoft.Shadow(Strength={0}, Direction={1}, Color={2})", @strength, @direction, @color);
}

Or perhaps more usefully, making use of a mixin:

.some-class(@strength = 15, @direction = 0, @color = '#000') {
    filter: formatString("progid:DXImageTransform.Microsoft.Shadow(Strength={0}, Direction={1}, Color={2})", @strength, @direction, @color);
}

Obviously formatString can be used for much more than this particular scenario, it’s usefulness isn’t restricted to working around annoying proprietary CSS attributes that really are way past their sell by date…

Posted in Tips | Tagged , , | 8 Responses

TeamCity unable to load changes from Git due to an existing remote

I’ve recently been doing a lot of work in TeamCity, including switching over from SVN to Git (more to come on that in future blog posts). I’ve just had to deal with an odd issue which was entirely my fault but took a bit of head-scratching to figure out.

I got the following exception (where <URL_TO_GIT_REPOSITORY> is a placeholder I’ve substituted for the original URL):

jetbrains.buildServer.VCS – Error while loading changes for root <URL_TO_GIT_REPOSITORY> #master {instance id=43, parent id=3}, cause: ‘git fetch’ command failed.
stderr: The repository at directory ‘D:\Development\Infrastructure\.BuildServer\system\caches\git\git-4D05D25B.git’ cannot be opened or created, reason: The specified directory D:\Development\Infrastructure\.BuildServer\system\caches\git\git-4D05D25B.git is already used for another remote <URL_TO_GIT_REPOSITORY> and cannot be used for others (<URL_TO_GIT_REPOSITORY> ). Please specify the other directory explicitly.

What this essentially seems to be saying is that it can’t checkout changes from my remote Git repository because its local repository is currently tracking a different remote repository… which just happens to have the same URL! This didn’t make any sense – why was it thinking there were two different URLs here when they were clearly the same?

Well the eagle-eyed amongst you may spot that there is actually a subtle difference between the two reported URLs – the one in brackets has a trailing space after it. Turns out that I was setting the VCS root URL via a build parameter and had accidentally left the trailing space in there for one of my build configurations, giving me two different values in theory, even though to a human eye they looked the same. Clearly TeamCity doesn’t trim whitespace from VCS root URLs, otherwise it would have normalised them and treated them as one and the same.

Needless to say, removing the trailing space prompted everything to spring back into life.

Posted in Fixes | Tagged , | Leave a comment