Designing For Code: Copy & Paste

As a developer, I’m constantly on the web. Learning, reading, finding solutions to problems or looking up odd bugs. There is a great community of developers that are constantly publishing solutions / fixes / workarounds / techniques for the benefit of their fellow developers. Being developers, you would expect to find that the sites they run are easy to use across the board! For the most part they are but every now and again though I run across a site that makes me want to bash my head against the monitor. Why? Because it breaks the simplest feature:

Copy. Paste.

If you EVER post code on the web on a site you control, or if you are in charge of a site where you or others post code. Make. Sure. Copy. Paste. Works. Period. I’m not just talking about ‘I can select it and paste it’ functionality, I’m referring to those ‘code highlighting’ plug ins that add line numbers to EVERY SINGLE LINE of a code snippet when you paste.

Don’t Do It.

There are lots of good highlighting plug ins out there, sites that will format your code for you, and so on. Whatever method you chose, test it and make sure you can use the code from your site without having to modify or do anything to it. If you can’t, abandon it. Find something else. Use raw text. Whatever it takes to get the basics working well.

In addition, make sure your code works well when the site is scaled up or down. If you have a site that doesn’t change width as the browser size changes, ignore this, and read this post on fluid layouts:…mi-fluid-grids/. Now IF your site changes width, your code should ALWAYS work on whatever size the visitor is looking at the site on. Check it on a smart phone. Check it on a tablet. Stretch your site across two wide screen monitors. If it ‘breaks’ (as in becomes unreadable or inaccessible) fix it. Go back to the basics. Remove / alter / don’t use a plugin. Again, do whatever it takes to make the basics work.

Don’t underestimate the importance of the small supposedly insignificant details. In all honesty, users aren’t going to come to your site and praise you for what an elegant job you did on making your code easy to copy and paste, or how nice the content looks, or how readable the article is. Its similar to the way people will notice spelling and grammar. If your sentences are well formed and correct and the article is well structured the person reading should never have to mentally think about it. On the other hand, if an article is not well crafted, that person will have to wade through the mistakes and mentally jump between what was actually written and what the author intended. In same way, whatever type of content you present to a visitor, it should always be presented it in such a way that the person consuming it can do so without ANYTHING getting in the way of them doing so effectively.

Think about it. Go check your site. Make the net a better place.

2 thoughts on “Designing For Code: Copy & Paste

  1. Deleting the line numbers of small code snippets with box selection is very easy, if the amount is large, the author should attach the sample codes.

    • You’re right in that deleting line numbers is easy for short 3-5 line snippets. I’m cool with that. It’s that most of the time, code is more than a one liner, its a function that’s 10-30 lines, (properly indented, counting both digits, the period, and excess tabs, that’s about 60 presses of the delete or backspace key to clean up the code and several moves of the hand to the mouse to re position the cursor.) Or it’s a set of functions where I only need the one that addresses my particular problem. Furthermore, I HATE downloading solutions without being able to browse them. It’s source code. Text. Why the HECK do I need to download, extract, cluttering up my desktop, open the solution, upgrade the solution, dig through all the excess helpers, classes, to get at the one function or line I need, only to then go paste it, or take the ideas and method for solving the problem. I then have to go and delete the solution. Repeat 3-5x times because more than half the time when I do this the particular solution I’m looking for doesn’t exist in that project, but there was no way to know because there was NO WAY TO BROWSE THE SOURCE CODE BEFORE DOWNLOADING IT.

Leave a Reply

Your email address will not be published. Required fields are marked *