https://css-tricks.com/why-and-how-i-write-code-with-pencil-and-paper/ Skip to main content CSS-Tricks * Articles * Videos * Almanac * Newsletter * Guides * DigitalOcean * DO Community Search process syntax work Why (and How) I Write Code With Pencil and Paper Avatar of Preethi Preethi on Aug 17, 2022 UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. If the thought of handwriting code seems silly, it might surprise you to know that it's inevitable. If you're unsure, think about the last job interview you did, and remember how there was no computer around in the interview room -- just your interviewers, a blank sheet of paper, and a blue ball-point pen. For the students among you, it's even a bigger deal as your grades hang in by the lines of code you had strategically squeezed into the available space in your answer sheet. And not just that, experienced programmers can point you to the bundle of A4 sheets they had removed from the office copy machine to scribble down a particularly complex algorithm they had been working on. So whether you're an exam student, potential job interviewee, or someone wanting to resolve their programming dead ends, I hope this article helps you out when you put your pen to the paper to code. Although I will focus on the analog aspect of writing code, you can apply these steps to coding in any form or language. So consider this to be also like a generic coding guideline that works specifically for me but can also be very useful to you in your work. Why write it down? Before we start, it's essential to understand that no one expects you to jot down production-ready code in a notebook. It's not like you can drop that into a code editor and compile it without an error. If producing perfect code was the goal, you would be seated in front of a computer in the interview rooms and exam halls. The purpose of handwriting code is to work through logic in advance. There's s desire to "get in the browser" as soon as possible in design, but there is conventional wisdom in sketching designs by hand. A low-fidelity medium encourages quick experimentation and inexpensive mistakes. White lined paper with cursive handwritten notes on using :nth-child. The toil of trying to figure out how to affect surrounding items with one click (from my last article) The same can be true of code, mainly when working out syntax and semantics. That said, getting the correct syntax and semantics is always a plus point, though not the sole focus of the whole handwriting exercise. Let's see where we can start when it comes to handwriting code. Know your question During my final year in college, I couldn't do an internship or even attend campus interviews because of health reasons. As a result, my very first job interview was quite literal with high stakes. When I look back now, the interview was pretty easy. But having never attended one before, I was anxious beyond reason. The first thing the interviewers asked about programming was if I could output an inverted triangle made of asterisks. As I said, it was easy -- nothing a for loop can't handle, right? But like I said, my anxiety was through the roof as well. I took a deep breath, pressed my palm against the blank sheet of paper they had laid out for me, slid it as slow as possible towards me on the table (buying time, of course), clicked the pen, and then I did something right. I first drew an inverted triangle made of asterisks. That's how I found my feet on the ground to start answering their question. I've seen otherwise brilliant developers get something wrong simply because they never fully grasp what it is they are solving. The questions we work with are not like the questions physicists or mathematicians solve. They get a set of parameters and find the missing ones; our questions are also our results. We are already told what our results are -- we have to figure out how to reach them. That's why it's imperative to know the question well because you'll see the result. Writing down or drawing out what you want to output is one of the best ways to start your coding. I understand that in our fast-paced industry, the expectation is that we have to jump right into the programming by running a "hello world" demo. And that's great to familiarize yourself with an unfamiliar syntax and shake off your anxiousness about trying something new. But when someone asks you a question and gives you a result to work up to, wouldn't it just be better to put that down first? That question/result is not only your starting point but also your point of reference. At any step in your coding, you can look at it to ensure you're working towards it and that you're on the right track. So whether in your answer sheets or in that blank A4 paper you're about to write in, start by taking a second and writing down what it is you're trying to output. You can put it in the margins or a corner if you don't want it to be a part of your answer. Just make sure it's somewhere where you can keep referencing it. Outline your code This step is like a double-edged sword. It can get you a roadmap to your program or waste your time. My job is to make sure it's the former. So, first and foremost, I like to say: outlining code is unnecessary if the scope of your problem or question is small. Again, this practice is neither prescriptive nor universal to all projects or situations. Imagine I'm your interviewer, and I ask you to write how to center an element in a web page using CSS in as many ways as possible. You won't exactly be needing an outline for this. The code snippets are relatively small for each method. But now, let's say I assign you to write a web application that captures user signatures via a touchscreen interface and then saves the signature on the server. Not so straightforward, right? You've more than one thing to figure out. Perhaps, a little outline can help. 1. UI for capturing signature -- HTML Canvas? WebGL? 2. Disable pointer events on the rest of the web page when the user is signing 3. Convert and save the captured image to a PNG file -- JS 4. Then convert it to blob (maybe) and save it to the visitor's log data table. I've written a rough sequence of actions I think I might have to code. It could've been shorter or longer, depending on what I wanted from it. I highly recommend outlining code for client projects. Write the outline along with your user requirements or on the back of wireframes you've printed out. Your quick snapshot of bullet points gives you a map, a to-do list, and a checklist to verify against when you reach the end of the project -- pretty much your whole project's summary in a low-fidelity list. It can also become a template to start your next similar project. But like I said before, this step is like a double-edged sword. You'll have to keep this short for examinees and interviewees when there are time constraints. If you don't know where to start, write down just three essential functions you'll have to code in your application, and if you have got the time, make it five. But that's about it. Spend as little time as possible on this, and don't sweat over the details. The outline is not going to score you extra points. It's there only to help you make sure you have everything covered. It captures your initial gut reaction and keeps you honest throughout the project's life. Longhand vs. shorthand White lined paper with cursive handwritten notes in black ink.A quick reference to disable text selection Time to start coding. So, what do you write? "Bdrs" or "border-radius"; "div -> p" or "

"; "pl()" or "println()"; "q()" or "querySelector()"? If someone else is grading your code, then there's no choice. Leave out abbreviations, pseudo-codes, Emmet shortcuts, and any other form of shorthand writing. Otherwise, there's no reason to assume that anyone reading this knows what your abbreviations mean. It's really up to you. If you've gotten out of touch with writing by hand -- and many of us have -- it's better not to go overboard with the longhand notations, as they get tedious. At the same time, there's no such thing as being too frugal with your writing. Not if you want to be able to look back on it one day and understand what you'd written down. I have an open file in my note-taking app and a lined notepad on my desk where I write down code snippets I want to save for later reference. They are unorganized, just a long stream of snippets. That's why when I browse through older notes, I wouldn't know what I meant to write if I had not written them down clearly. I forget syntaxes all the time. For instance, I've been using the arrow notation for JavaScript functions since it was introduced (because it's shorter), and I'm pretty sure if someone suddenly asks me to define a function using the function keyword, I might even misplace the parentheses or the function name, inciting a syntax error. It's not unusual for us to forget syntaxes we haven't used in a while. That's why it's better to write your notes clearly when you know you need them for future reference. The non-sequential flow of code Unlike the last step, which doesn't apply to those of you interviewees and test-takers, this one is catered especially to you. Most programming languages are interpreted, compiled, and executed so that sometimes pre-written code in the source is executed later when called. We do it in JavaScript, for example, with function calling -- functions can be defined initially, then executed later. Examinees and interviewees can use this to start working on the critical point of your answer first. As I've said from the very beginning, the purpose of handwriting code is to work through or test the logic of whatever it is you program. It's best when you focus on resolving that first. Let's take a classic textbook example -- a program to find the nth Fibonacci number. If I were to write a simple outline for it, it would be something like this: 1. Get the input. 2. Calculate the Fibonacci number. 3. Summarise the output. 4. Print the output. All the steps in that outline are essential; however, 1, 3, and 4 are more obligatory. They are necessary but not important enough to focus on right away. It's better to start writing down the code to calculate the Fibonacci number rather than to fetch the input. Wrap it in a function, then go ahead and write the code sequentially and write down a line to call that function where appropriate. Spend your time writing code that focuses on the heart of the problem. Real professionals can skip ahead. Let's say I have a client project, and I have to work with some triangle geometry -- got two sides, opposite angle, and gotta find the third side's length. And I've decided to scribble on paper to get started rather than opening my IDE. First, I would draw the triangle, of course (that's something I'm very experienced with, as you can tell). I would write down some sample lengths and angles. Then I'd write the formula (compliments of online searching, for sure), and then I'd jump right to the code for the function. There's no point in me writing down the obligatory steps even though I'll need them in production-ready code. But it would be different if I had to write that on an answer sheet in an exam. I can't skip the other steps; however, I can still start with the code for the formula. Pseudo-code Chris has already written a handy article on pseudo-code that I highly recommend you give a solid read. For all those professionals who feel like the whole handwriting code thing doesn't seem like your cup of tea but still might be curious if it can help you, then pseudo-code might be the balance you're looking for. It's similar to outlining the code, as I mentioned in one of the previous steps. However, it's briefer and feels more like shorthand coding. It's sometimes also referred to as "skeleton code." Here's some quick pseudo-code for a CSS grid layout: Grid 5 60px rows 6 100px columns There isn't much to write! So, even though putting a pencil to paper is excellent for this sort of thing, it's just as effective, fast, and inexpensive to jot some pseudo code into whatever program you're using. Space and comments I believe code is 90% keywords and 10% tabs. Withoutspacesthereadabilityofwordsdecreases. Indentations are necessary for handwritten code as well. However, please don't use it for every level because the width of the paper will limit you. Use spaces judiciously, but use them. Yellow unlined paper with code handwritten in cursive in black ink. Prized OG snippet, written with extra TLC If you're writing code for your use, I also believe that if you've followed everything I've mentioned so far and have already written down your output and an outline on the page, you may not even need to include comments. Comments tell you quickly what its following set of code does. If you have already written and read an outline for the code, then comments are redundant notes. However, if your judgment says to put down one, then do it. Add it to the right side of the code (since you won't be able to insert it between already written lines the way you could in, say, VS Code). Use forward slashes, brackets, or arrows to denote that they are comments. For examinees who are unconfident with a certain syntax, write down comments. This way, at least, you're letting the person grading your paper know your intention with that incorrectly formatted code. And use only the correct delimiters to denote comments -- for example, that would be the forward slashes for JavaScript. Analog vs. digital As I mentioned earlier, everything I'm providing here can is generic coding advice. If you don't want to try this with physical paper, any note-taking application also works. But if you're going to try the digital route, my recommendation is to try using something other than a straight note-taking app. Work with more visual digital tools -- flow diagrams, mind maps, wireframes, etc. They can help you visualize your result, the outlines, and the code itself. I am not much of a digital citizen (except for working on the web and recently converting to reading e-books), so I stick to physical notebooks. My favorite tools for handwriting code Any pencil and paper will do! But there are lots of options out there, and these are a few choice tools I use: * Staedtler Pigment Liner 0.3mm (Black) * Mitsubishi JETSTREAM 101 0.7mm (Black) * MUJI Notebook A5 6mm Rule 30 sheets (Lightweight and easy to carry) * MUJI Twin-Tip Highlighter Pen (Yellow) There is no "write" way to code I hope, if nothing else, my little way of handwriting code with pencil and paper makes you evaluate the way you already plan and write code. I like knowing how other developers approach their work, and this is my way of giving you a peek into the way I do things. Again, nothing here is scientific or an exact art. But if you want to give handwritten code planning a try, here's everything we've covered in a nice ordered list: 1. Start by writing down (with sample data, if needed) the output of your code. 2. Write an outline for the code. Please keep it to three steps for small projects or ones that are less complex. 3. Use longhand notations. Developers writing for themselves can use shorthand notations as long as the writing is legible and makes sense to you when you refer to it later. 4. When under a time constraint, consider writing the code that tackles the heart of the problem first. Later, write down a call to that code at the right place in your sequential code. 5. If you feel confident, try writing pseudo code addressing the main idea. 6. Use proper indentations and spaces -- and be mindful of the paper's width. That's it! When you're ready to try writing code by hand, I hope this article makes it easy for you to start. And if you're sitting down for an exam or an interview, I hope this helps you focus on getting the questions right. Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services. Comments 1. Jacob Permalink to comment# August 17, 2022 I appreciate this article! Sometimes interacting with natively digital concepts like code can seem out of place in the physical world. It really does make a difference though to have something real in front of you. There have been occasions that other developers and I have even printed out source code and collaboratively marked up the changes we wanted to make. Should all source code be printed out? Definitely not. Just consider it one of many tools and use it when it is helpful. Reply 2. arh Permalink to comment# August 17, 2022 No computer during a coding job interview? lol! Reply 3. Greg Gibson Permalink to comment# August 17, 2022 This is great. And it makes me feel a little less weird for doing the same thing! I have a stack of graphing notebooks that I use for much of my coding, UX, and UI designs well before I create anything on the computer. By the time I actually go digital, that process is so speedy, because I've already worked things out in my head-and on paper. Reply 4. Rob Schluter Permalink to comment# August 17, 2022 Reminds me of a final exam for a programming language where all questions had to be answered by writing valid code on paper. Imagine writing code without syntax highlighting, code completion, or even a backspace! Just a pen and a block of paper printed with lines divided in 80 columns. Can you guess the programming language? Reply 5. Life as a Burrito Permalink to comment# August 18, 2022 I write code on paper to avoid side effects. Reply 6. Dan Jones Permalink to comment# August 21, 2022 The last time I wrote code on paper during a job interview was twelve years ago. I know it was that long ago because they offered me the job a week later, the day my daughter was born. Ever since then, they gave me a coding test to do at home, and then email them back, or sat me down at a computer in their office to do a coding test. Reply 7. Miracle. Permalink to comment# August 22, 2022 This is really helpful. Thank you. Reply 8. Mick Permalink to comment# September 3, 2022 "The purpose of handwriting code is to work through logic in advance." A very important takeaway. Just to elaborate a little: The purpose of writing down ideas, design issues, handwriting code (and/or pseudo-code) is to work through design and logic in advance. Handwriting makes you 'think' through the issues, and solve the the 'right' issues. If I have my design and logic already fully thought through then my monkey brain can mostly fill in the gaps with code. 'Coding on paper' (for many situations) is far quicker than re-writing swathes of code because you got logic/functional design wrong. I've seen it, and I've done it. Gr8 to see such an article still being posted today. Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] [ ] [ ] [ ] Comment * [ ] Name * [ ] Email * [ ] Website [ ] [ ] Save my name, email, and website in this browser for the next time I comment. [Post Comment] Copy and paste this code: micuno * [4.1 ] Leave this field empty [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] D[ ] CSS-Tricks is powered by DigitalOcean. Keep up to date on web dev with our hand-crafted newsletter DigitalOcean * DigitalOcean * DigitalOcean Community * About DigitalOcean * Legal * Free Credit Offer CSS-Tricks * Email * Guest Writing * Book * Advertising Follow * Mastodon * Twitter * Instagram * YouTube * CodePen * iTunes * RSS Back to Top [Jetpack-Search-on-CSS-Tricks-Instant-Search]