Using box-sizing: border-box in Twitter Bootstrap 2

One aspect of traditional CSS that makes it hard is that the width property value != the actual width as it includes the padding and border. So, for example, if you prototype with plain boxes without padding or border and get everything positioned right, then decorate later with padding and border, your layout will break. This applies even when you specify a 100% width, so the actual width will unintuitively be larger than parent width.

The CSS3 feature box-sizing: border-box fixes this, and makes the width mean what the average person in the street would expect: the actual width!

Fun Fact: Internet Explorer originally did sizing this way, against the W3C standard

Below is an example of a recent issue. The site uses Twitter Bootstrap for styling. I want the text input to be the full width of the container, and I want to maintain the bootstrap settings for padding and border. If I merely set the width to 100%, I get the following result :

#search_query {
    display: block;
    width: 100%;
}

Note that the text input is larger than it's parent. It isn't floating - the width is being set to 100% of the parent, but the added padding and border make the actual width larger than the specified 100%.

So let's apply "box-sizing: border-box". We're using SCSS and Compass here.

#search_query {
    display: block;
    width: 100%;
    @include box-sizing(border-box);
}

The width is fixed, but now the height is broken. This is because the original height of 20px did not include padding or border, and now it does. The top and bottom bottstrap padding and border add up to 10px, so now we need to increase the height to 30px.

#search_query {
    display: block;
    width: 100%;
    @include box-sizing(border-box);
    height: 30px;
}

Thats better!

 

railsapi.com + fluid = awesome

a little gift for Rails devs : offline Rails docs from railsapi.com + OSX Fluid browser = awesome dl.dropbox.com/u/2994458/rail…

— Gary McGhee (@gazmcghee) February 26, 2013

Using "bundle exec" with a Ruby Gem binary without an application

I am creating a server script that will be called by sshd using command= in a user's ~/.ssh/authorized_keys file. This script is written in Ruby and I want to distribute it within a gem. Gems have a bin folder specifically for scripts that act as binaries ie may be ruby files with no extension and #!/usr/bin/ruby at the top.

These days in Ruby it is almost essential to use bundler and rvm to manage the ruby and gem versions and dependencies, and so normally my script needs to be called like this :

bundle exec <script>

Even after much experimentation I was unable to call "bundle exec" without a Gemfile in the local folder. I tried using the installed gem folder for that, but that failed as rubygems wants to write a lock file, and it (probably) doesn't have permission in an installed gem folder.

Also the environment in authorized_keys command= needs to set up rvm, so I need a wrapper script. In that wrapper script I was able to create a temporary Gemfile in the home directory, point bundle exec to use it, execute the command an clean up.

Here it is :

#!/bin/bash
source /usr/local/rvm/environments/ruby-1.8.7-p371
GEMFILE=~/.wrapper.gemfile
cat << 'EOF' > $GEMFILE
source :rubygems
gem '<mygem>'
EOF
BUNDLE_GEMFILE=$GEMFILE bundle exec <mybinary>
rm $GEMFILE
rm $GEMFILE.'.lock'

BYCoffee: Coffee beans roasted in Perth (and design without a designer)

If you're interested in buying coffee beans roasted in Perth, check out www.bycoffee.com.au which was a nice little ecommerce side project for me this year. I took the opportunity to use BigCommerce.com with Zurb Foundation to do "mobile first" design and was happy with the results, given the limitations of minimal budget and my own design skills.

I fully appreciate the benefit of professional design, but when that isn't an option, I've settled on the following approach :

1) that its best not to try too hard with design, and just focus on page structure, information architecture (IA) and user experience (UX).

2) carefully chosen webfonts are a cheap way (when time=money) of applying style

3) good photography goes a long way

Integrating Zurb Foundation and SquareSpace 6 Developer Platform Templates

I just added a repo zurb-squared which is a SquareSpace developer template using Zurb Foundation. Foundation is much like the more famous Twitter Bootstrap, but seems oriented slightly more towards web page design rather than web applications.

The distinguishing features I like are :

1) It uses SASS rather then Bootstrap's LESS (a debate in itself, not a clear win)

2) It uses box-sizing: border-box everywhere

3) It now provides HTML templates

as well as the essentials like responsive throughout, a nice grid etc.

KOJAC

Finally updated the description of my rich web client architecture KOJAC (Key Oriented JSON Application Cache) github.com/buzzware/KOJAC

KOJAC is an opinionated design and implementation for data management within "single page" or "Rich Internet" applications.

Integrating Infragistics NetAdvantage edit components with Ember.js

I've finally got my technique figured out for integrating Infragistics NetAdvantage edit components with EmberJS. This technique is just as valid for any jQuery UI components, and is based on this suggestion on the emberjs site.

The code is just the essence of the technique. Basic things like emberjs, jquery and jquery ui loading are not shown.

Goals

1. Use a generically named HandleBars helper as a layer of abstraction, so I could swap out Infragistics later without modifying my many templates
2. Support Infragistics and Ember/HTML properties
3. DRY (it could be drier still eg. only specify Infragistics fields once)

How it Works

• CurrencyEditor is an extended Ember.TextField, so Ember will insert a <input\> for us
• CurrencyEditor reflects some properties of igCurrencyEditor that are then available in the Handlebars helper
• CurrencyEditor observes these properties with the multiObserver handler, and if any are changed, their value is passed down to the igCurrencyEditor
• The CurrencyEditor helper is registered with a didInsertElement handler that combines the properties given in Handlebars with the local properties, then updates the igCurrencyEditor.

Conclusion

Overall this combination of Infragistics NetAdvantage with Ember.js is looking like a powerful solution for building commercial grade solutions.

Handlebars Usage

{{CurrencyEditor valueBinding="vo.balance" minValue="0" currencyMaxDecimals="2"}}

ObjectUtils = {
    createObject: function() {
        var result = {};
        result[arguments[0]] = arguments[1];
        return result;
    }
};


EmberUtils = {
    copyProperties: function(aDest,aSource,aProperties) {
        var p;
        var v;
        if (aProperties) {
            for (var i=0;i<aProperties.length;i++) {
                p = aProperties[i];
                v = Ember.get(aSource,p);
                if (v!==undefined)
                    Ember.set(aDest,p,v);
            }
        } else {
            for (p in aSource) {
                v = Ember.get(aSource,p);
                if (v!==undefined)
                    Ember.set(aDest,p,v);
            }
        }
        return aDest;
    },
    addObservers: function(aObject,aProperties,aHandler,aTarget) {
        for (var i=0;i<aProperties.length;i++)
            aObject.addObserver(aProperties[i],(aTarget||aObject),aHandler);
    }
};


$.ig.loader({
    scriptPath: 'net_advantage/js/',
    cssPath: 'net_advantage/css/',
    resources: 'igShared,igEditors,igValidator,igCombo',
    theme: 'metro'
    ready: function () {
        App.initialize();
    }
});

var CurrencyEditorIgFields = ['validatorOptions','disabled','minValue','maxValue','currencyMaxDecimals','currencyMinDecimals'];
CurrencyEditor = Ember.TextField.extend({
    validatorOptions: {
        onblur: true,
        onchange: true,
        onsubmit: true,
        formSubmit: true
    },
    disabled: false,
    minValue: null,
    maxValue: null,
    currencyMaxDecimals: 2,
    currencyMinDecimals: 2,
    multiObserver: function(sender, key) {
        this.$().igCurrencyEditor(ObjectUtils.createObject(key,this.get(key)));
    },
    init: function() {
        this._super();
        EmberUtils.addObservers(this,CurrencyEditorIgFields,'multiObserver');
    }
});
Ember.Handlebars.registerHelper('CurrencyEditor', function(options) {
    options.hash.didInsertElement = function() {
        //this._super(); //?
        var ops = EmberUtils.copyProperties({},this,CurrencyEditorIgFields);
        ops = EmberUtils.copyProperties(ops,options.hash,CurrencyEditorIgFields);
        this.$().igCurrencyEditor(ops);
    };
    return Ember.Handlebars.ViewHelper.helper(this, CurrencyEditor, options);
});

Setup OSX Apache for web development

By default, you can put web assets under ~/Sites/ and they will be shared under http://localhost/~username/. This is not ideal for development as you probably want a clean root url e.g.. http://myproject/ Here is how I fixed it :

1. add myproject after localhost on the same line with a space inbetween in /etc/hosts. This avoids an issue where local domains besides localhost take a long time to be resolved

2. It seems the standard OSX configuration only wants to serve from within ~/Sites. But we don't necessarily want to put our projects under Sites. Rather than defeat this restriction, we can use a symlink eg.

   ln -s /Users/username/repos/myproject/public /Users/username/Sites/myproject

3. Make sure you uncomment extra/-vhosts.conf file in /etc/apache2/httpd.conf

4. edit -vhosts.conf to look something like

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# 
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.
#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any  block.
#
#
#    ServerAdmin webmaster@dummy-host.example.com
#    DocumentRoot "/usr/docs/dummy-host.example.com"
#    ServerName dummy-host.example.com
#    ServerAlias www.dummy-host.example.com
#    ErrorLog "/private/var/log/apache2/dummy-host.example.com-error_log"
#    CustomLog "/private/var/log/apache2/dummy-host.example.com-access_log" common
#
#
#    ServerAdmin webmaster@dummy-host2.example.com
#    DocumentRoot "/usr/docs/dummy-host2.example.com"
#    ServerName dummy-host2.example.com
#    ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
#    CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
#

DocumentRoot "/Library/WebServer/Documents"


        DocumentRoot "/Users/gary/Sites/adviserConsole"
        ServerName localhost2

5. enable Web Sharing

Choosing a Javascript framework/template language

Here is the cream of a little research I’ve done on Javascript frameworks and template languages.

Of course the Javascript field is extremely volatile, so this is all debatable and likely to change fast.

1. this review is quite extensive and supports EmberJS as the leading framework http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/
2. this describes why LinkedIn is moving to client-side templating http://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates
3. this puts Handlebars (the template language in EmberJS) near the top of the list http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more I reckon this study is pretty in-depth, recent and involved many engineers responsible for running a high-load, very successful system. The mobile version of LinkedIn is pretty much state of the art for a HTML mobile app.

They choose 4 finalists :

• Closure: not used much outside Google, stagnant, not DRY (http://en.wikipedia.org/wiki/Don’t_repeat_yourself)
• Mustache: good marks and very popular, but a subset of Handlebars with no advantage over it
• Handlebars: an improved superset of Mustache, and integrated into in EmberJS
• DustJS: I haven’t heard of it before this review, but LinkedIn will probably push forward its development. This study shows it to be way way slower than Handlebars or anything else http://jsperf.com/dom-vs-innerhtml-based-templating/456 but that is probably compiled on the client. It can also be compiled by the server. Not sure if we would be doing that. Also not sure how well it would integrate with EmberJS.

So this confirms my previous conclusions (always nice when that happens!) that EmberJS is the leading choice right now.

“Applying an embedded font to HTML text is much more difficult than using system fonts. The standard method of applying a font is simply to set the font in a font-family property within a style and then apply the style to a span. However, embedded fonts require that the font tag is used in the HTML to apply the embedded font.”

—

An important point when trying to use embedded fonts in HTML text viewed in a Flex 3 control (eg. TextArea) via the htmlText property.

Flex 3 Cookbook

How to get Airbrake.io working with BrowserCMS

Based on this thread I was able to get airbrake.io working with browsercms 3.1.2.

Below is a “tweak” using my tweaks gem. The important point for getting it to work with browsercms is to hack the error handler to store the exception in request.env[‘rack.exception’]

Its also an example of how a tweak can be a Rails Metal app. This is Rails 2.3.8.

# tweak for adding airbrake to bcms sites
#
# * includes a hack to get airbrake working with browsercms
# * airbrake configuration can be passed into tweak
# * environment.rn should contain :
#
#     config.gem 'airbrake'
#
# Sample tweak config :
#
# Tweaks.configure(
#   :airbrake,
#   :development_environments => [],  # required to enable airbrake in rails development mode for debugging
#   :api_key => 'sdhfjdhsfkdsfhfjksdfhjfjksdfjh'
# ) if RAILS_ENV=='production'

class RackBuzzAirbrake < Rails::Rack::Metal

  def initialize(aApp,aConfig)
    #super(aApp)
    @ab = Airbrake::Rack.new(aApp)

    Cms::ErrorHandling.module_eval do
      alias_method :orig_handle_server_error, :handle_server_error
      def handle_server_error(exception)
        request.env['rack.exception'] = exception
        orig_handle_server_error(exception)
      end
    end
  end

  def call(env)
    #@app.call(env)
    @ab.call(env)
  end

end

Tweaks.define(
  :airbrake
) do |cf,name|
  require 'airbrake'
  Airbrake.configure do |config|
    cf.each do |k,v| 
      config.send((k.to_s+'=').to_sym,v)
    end
  end
  ActionController::Dispatcher.middleware.use RackBuzzAirbrake,cf
end

How to log into bigcommerce.com with explicit mode ftp for scripting

lftp is an advanced ftp client for UNIX. It supports many variants of FTP, including “explicit mode” FTPS also known as “ftpes” as required by bigcommerce.com. lftp is also scriptable - with the -f option you pass a script file of commands to execute.

Note that lftp must be compiled with ssl. You can check this by typing

lftp -e 'set -a;exit' | grep ftp:ssl-allow

and you will see the following if you have ssl compiled in

set ftp:ssl-allow yes
set ftp:ssl-allow-anonymous no

Now create a file called script.lftp with the following content :

#debug  # optional for debugging info
set ftp:ssl-allow-anonymous yes
set ssl:verify-certificate off
set ftp:passive-mode on
set ftp:ssl-force on
set ftp:ssl-allow on
open -u <username>,<password> <server>.bigcommerce.com
lcd <local_dir>
cd "/content"
put <local_filename> <remote_filename>
exit

The fields in angle brackets need to be replaced with your specific info

Now execute it with :

lftp -f script.lftp

Enjoy !

How to install lftp with ssl on OSX with homebrew

brew install lftp

brew edit lftp // see http://stackoverflow.com/questions/3939651/how-to-modify-a-homebrew-formula

make the file look like this :

require 'formula'

class Lftp < Formula

  homepage 'http://lftp.yar.ru/'
  url 'http://ftp.yars.free.net/pub/source/lftp/lftp-4.4.0.tar.bz2'
  sha1 '4eef63d05760a0e7d6d6a7318e1fcda8de8c154e'

    depends_on 'pkg-config' => :build
    depends_on 'readline'
    depends_on 'gnutls'

    def install
        # Bus error
        ENV.no_optimization if MacOS.leopard?

        system "./configure", "--disable-dependency-tracking", "--prefix=#{prefix}", "--with-included-readline=auto", "--enable-nls", "--with-openssl", "--without-gnutls"
        system "make install"
    end
end

brew uninstall lftp

brew install lftp

Note that you may have to update the url to the source code and then when an error is produced by the SHA1 not matching, copy and paste in the actual SHA1 and try again

Whats wrong with Flex 4 skinning, and how to fix it.

Note

This article was written while researching development of a non-Mobile application. Flex Mobile skinning follows the same approach, but has many differences with greater constraints (especially greater emphasis on Actionscript over MXML), less features, and replacement classes (eg. for text rendering) in order to achieve decent performance on less powerful mobile devices. See http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html for specifics.

Background

1. The Flex 4 component architecture is designed so that the visual appearance of each component is provided by a separate, but associated “skin” class, that can be created in various ways by a designer or developer.

2. A designer using Flash Catalyst can select some artwork, then convert it to a skin class, specifying the standard component it should map to. This class library can be used in a Flash Builder project.

3. A developer can easily use the “New…” menu item in Builder to create a skin class based on a standard template. This generated class descends from a generic skin class, and includes a non-trivial amount of code.

4. Skins are responsible for rendering their children.

5. Skin parameters can be given in CSS, then used by the skin code.

6. Flex 4 has some very significant improvements in CSS, including more advanced selectors

7. For a custom component to appear in Catalyst for skinning, it must follow some strict rules, including being developed in AS3 not MXML. http://www.adobe.com/devnet/flashcatalyst/articles/flashcatalyst-compatibility-checker.html, http://learn.adobe.com/wiki/display/fcc/Flash+Catalyst+CS5.5+compatibility+schema and http://www.slideshare.net/danorlando/360flex-2011-optimizing-the-designer-developer-workflow-using-flash-builder-4-flash-catalyst-cs5 slide 18.

8. A very useful ability of Flex is the simple separation of areas of an application UI into reusable components containing subcomponents. These can be skinned as a whole, but it is quite complex and ultimately not worthwhile. Instead the container can be skinned as simply a container, and then the subcomponents skinned separately. CSS allows selecting of subcomponents just like in HTML. Also the subcomponents are likely to be standard components anyway, so can be skinned accordingly, not treated as special because they are inside a container.

9. Some discussion on the web says that compared to Flex 3, Flex 4 skinning makes some simple things much harder, but advanced things much easier.

10. Builder generates AS3 skins, subclassing Skin, SparkButtonSkin and probably others.

11. Catalyst generates MXML skins, subclassing Skin and adding states and drawing code.

The issues

1. The standard components and skins are lacking basic functionality

Flex 4 skins don’t have as many configurable parameters as Flex 3 components, and you are often forced to use skinning even for some trivial customisations

eg. the Flex 4 Button lets you change the text color, but not the background color in CSS

2. Adobe implicitly encourages skins to be created as application specific, without inheritance or linking in shared code

Builder generates code from templates for the standard components, and this code will therefore be repeated for each custom component you create. Like any code this needs to be maintained, debugged etc and violates DRY (Do not repeat yourself). If Adobe later updates their template for this code, your components will of course not be updated.

Skins created in Catalyst don’t use CSS at all eg. to seperate out assets or colors from rendering code. Please consider and support users in creating configurable components (via CSS), and properly supporting inheritance to maximise reuse.

3. Round-tripping is not the Holy Grail

There is no need for both Builder and Catalyst to be able to edit the same application or library project, and this is an enormous task for Adobe to implement, full of gnarly issues now and into the future. Anyway, developers are quite capable of using Flash Catalyst if necessary, and probably already have or could be given a license to do so. Flash Catalyst applications or libraries only really need to be edited by Flash Catalyst.

Instead we need a linear workflow from designer to developer. The designer should be able to open and edit the FXP/L file as they need, without interference from the developer (although the developer would need to occasionally view and edit). When a developer gets the latest FXP/FXPL by updating from version control, ideally they would be able to rebuild the application in Builder and see the result including the latest FXP/FXPL. This would mean allowing Builder to link in (not import) an FXP/FXPL from Catalyst. Manual exporting and importing is a timewaster and error-prone.

Supporting the FXP format in Builder and encouraging its use in workflow tutorials means that its very easy for developers to do things inside a FXP that are valid in Builder but will make them incompatible with Catalyst. Imagine spending hours on skins that work fine in Builder, only to find you have ruined compatibility with Catalyst and your designer. Adobe provides a compatibility checker to assist in avoiding this, but it is still a productivity risk. Developers shouldn’t try to be too clever in an FXP.

4. FXPL is not a real project format in Catalyst

FXP is the application project format for Catalyst. It is equivalent to a zipped Builder application project. Builder can also load, save and edit FXP files. Catalyst also provides some support for the FXPL format, which is equivalent to a zipped Flex Library project. In Catalyst however, FXPL’s aren’t real projects. You can’t open or save them - you import them into your FXP, or you export your FXP as a FXPL. This is a fundamental faux pas - applications and libraries are different animals - its going to end in confusion when designers unwittingly export one as the other type.

In Catalyst, importing an FXPL does not link the given library, it merges a copy of its files into the current project, once again violating DRY. And so if we are using Catalyst and want to make a minor change to an FXPL, we must begin with an FXP, import the FXPL, make the change and export to FXPL. Presumably the result won’t just have our minor change, the whole FXP will be included too. Catalyst does not support linking of libraries of any sort into an FXP.

On the Builder side, we can import an FXPL from Catalyst into a Builder Library Project, and that seems like a potential way of working intelligently with a version control system, doing a roundtrip to the designer and back using FXPL as a transport format, and checking it in on each return, and perhaps throwing away the FXPL. But it is a manual process for the designer to pass it over, and the developer to receive it. Ideally the designer would just open, save and edit an FXPL, and potentially export a swc for simple linking into the Builder application.

5. FXP/FXPL files are not version control system-friendly

Being zipped into a single file defeats the merging abilities of version control systems like subversion or git. It means that if a designer and developer both modify a common Catalyst project, their changes cannot be automatically combined, and they will have to choose who’s project will be the next version, then apply the other’s changes to that. With a normal unzipped Builder project however, a version control system can merge changes automatically. Simply allowing Catalyst projects to operate on an unzipped folder would solve this problem, but admittedly tempt them into modifying and corrupting the contents without the tool.

There are also some issues with .svn folders being deleted by Builder and Catalyst. See http://kb2.adobe.com/cps/899/cpsid_89968.html

This is not a problem if we treat FXP/FXPL as merely a transport format (a concept I wouldn’t encourage), or if it is very unlikely that two users would work on the same FXP/FXPL at the same time.

6. Skins in Catalyst projects can’t be linked into the application in a Builder project.

We need to view and edit skins in a Catalyst project, then somehow link (not import) that into a Builder application project. Builder can link to SWC files and Flex Library Projects, but Catalyst won’t output a SWC, or work with FXPLs properly.

How to fix the situation

1. For now, use this script to compile FXP -> SWC

Catalyst projects are FXP. For linking into Builder, the ideal format is SWC. Therefore we need a simple conversion process from FXP -> SWC. Thankfully this has been solved here : http://www.rogue-development.com/blog2/2009/06/compiling-fxp-swc-a-catalyst-workflow

2. Develop a reusable set of components skins calling getStyle() instead of hardcoded values, drawing code or embedded assets.

The Flex 4 skinning model is actually a great opportunity for component developers as it completely separates the component logic from appearance and interaction. Most of the reasons we may have had for making a custom component in Flex 3, may only require a custom skin in Flex 4. This also means we don’t have to duplicate, maintain or replace component logic when are only interested in the appearance or interaction.

There is now an opportunity for the Flex community to develop open source skin libraries that replace the standard Spark skins and provide adequate customisability via CSS, such that a single skin can work for the requirements of most applications.

Messages to Adobe:

1. Please make the standard skins + CSS good enough for 90% of use cases. This would greatly reduce the need for skinning for general applications.
2. Round-tripping is not the Holy Grail. Linear workflows are easier to implement, and keep Catalyst accessible in its licensing and distribution to both designers and developers.
3. Please allow loading and saving of FXPL projects in Catalyst
4. Please allow linking of FXPLs into FXPs in Catalyst
5. Please allow building of FXPLs and FXPs to SWCs in Catalyst
6. Please allow linking of libraries into Catalyst
7. Provide a commandline method of compiling a FXP/FXPL to a swc
8. perhaps provide an option where a parallel swc is recompiled whenever the project is saved in Catalyst, for automatic linking into builder.

A small conundrum : For a designer to develop their skin classes, they need to lay out instances of them, compile, run and play with them. Normally this would require an application project, not library project ie an FXP. On the other hand, a library project is more like what we are trying to achieve - a project linkable into the application. This is solved by compiling FXP -> SWC, or if Catalyst fully supported FXPL projects, it could allow components to be dropped onto a pasteboard for experimenting with, and this pasteboard would not be compiled into the production SWC.

References & interesting links

http://www.developria.com/2011/01/as-a-developer-have-you.html

http://www.scribd.com/doc/54315969/85/Handing-off-to-developers

http://learn.adobe.com/wiki/display/fcc/Flash+Catalyst+CS5.5+compatibility+schema

http://www.rogue-development.com/blog2/2009/06/why-i-like-my-proposed-catalyst-workflow/

SOLUTION: svn: Can't open file '.svn/text-base/somefile.ext.svn-base': No such file or directory

I was getting this error and it seemed my working copy was corrupt. A sure fire way to fix this, if you can afford to, is to remove or move the folder with the error and update to get a clean copy. But just now I had this with a folder of 300MB of images.

The following quick hack worked though :

1. copy some other file like .svn/text-base/somefile.ext.svn-base in the same folder to .svn/text-base/somefile.ext.svn-base
2. update to a version of the repo before somefile.ext existed (or maybe changed - not sure) like this "svn update -r XXX"
3. update to the current version "svn update"

The above should get past the error by having a correct-looking file in the expected place. We then cause that file to be replaced with its correct content by causing svn to overwrite it

SOLUTION: "svn: No repository found" error with svn+ssh on the same host

I had a strange problem where a SVN working copy was working fine on one machine, but after file copying it to the same machine that the svn server lives on, any server accesses would fail with "no repository found". The breakthrough came when I tried to ssh in as the svn user, which should connect directly to svnserve and give some gibberish back, but instead was logging in with a waiting shell prompt. 

Why was this happening from the same machine and not another machine ?

The problem turned out to be how sshd authenticates. Somehow it wasn't trying the correct key in the .ssh directory, and defaulting to a password login.

The solution was to specify which key to use on the client side when connecting as the svn user for the svn server.

eg. in ~/.ssh/config :

Host your-svn-server.com
    IdentityFile ~/.ssh/your-svn-key.ppk
    User svn

Git vs Subversion (svn): The Background

Subversion was designed to take over from CVS as the primary version control system for Open Source projects. It emerged in 2001, some years before Git, and until Git appeared, it soon became the clear choice even over very expensive commercial rivals with its simple command syntax, atomic commits and excellent tool support especially from TortoiseSVN on Windows.

Git was born in 2005 by the one and only Linus Torvalds, creator of Linux. It introduced, or at least brought to the masses some revolutionary ideas, such as its distributed nature, serverless ability and advanced automatic merging. In this video from 2007, Linus is very damning of Subversion, to the point of rudeness. He makes some valid points, especially about merging in svn, and at the time Subversion didn't have "merge tracking", so you had to keep track of what you had already merged to figure out what range of revisions to specify when performing a merge.

For a while there, it seemed that Git was going to take over. GitHub appeared as a superior alternative to SourceForge, and introduced the concept of "social coding". It introduced the idea that anyone should be able to fork any project at will, when previously this was frowned upon. Major leading projects like Ruby On Rails moved to Git and GitHub, and it looked like svn's days were numbered.

Personally I resisted Git because I was comfortable with svn and was feeling the need to minimise the time I spent on learning new technologies vs actually getting stuff done. From reading articles it seemed the Git commands were less intuitive and there were more steps involved, and the distributed nature added more complexity. However, once GitHub took off and I decided to share my core libraries as open source, I began to understand the power and importance of GitHub and decided it was the place to be. So I setup my GitHub account and learnt git enough to upload my libraries.

Several months later however, I missed the simplicity of svn and realised the GUI tools were so important for understanding and resolving a complex merge, yet the git GUI options were very patchy (SmartGit didn't exist). I also realised I could not put my 1GB repository of the past 2 years into Git and only checkout the relevent folders (what would I do with 10 years worth of projects ?) Look for a following article on this.