Why (and How) I Write Code With Pencil and Paper | CSS-Tips

If the considered handwriting code appears foolish, it’d shock you to know that it’s inevitable. If you happen to’re uncertain, take into consideration the final job interview you probably did, and keep in mind how there was no laptop round within the interview room — simply your interviewers, a clean sheet of paper, and a blue ball-point pen.

For the scholars amongst you, it’s even a much bigger deal as your grades grasp in by the strains of code you had strategically squeezed into the accessible area in your reply sheet.

And never simply that, skilled programmers can level you to the bundle of A4 sheets that they had faraway from the workplace copy machine to scribble down a very advanced algorithm that they had been engaged on.

So whether or not you’re an examination pupil, potential job interviewee, or somebody desirous to resolve their programming useless ends, I hope this text helps you out once you put your pen to the paper to code.

Though I’ll give attention to the analog side of writing code, you’ll be able to apply these steps to coding in any kind or language. So take into account this to be additionally like a generic coding guideline that works particularly for me however may also be very helpful to you in your work.

Why write it down?

Earlier than we begin, it’s important to grasp that nobody expects you to jot down production-ready code in a pocket book. It’s not like you’ll be able to drop that right into a code editor and compile it with out an error. If producing good code was the objective, you’ll be seated in entrance of a pc within the interview rooms and examination halls.

The aim of handwriting code is to work by means of logic prematurely. There’s s need to “get within the browser” as quickly as doable in design, however there may be typical knowledge in sketching designs by hand. A low-fidelity medium encourages fast experimentation and cheap errors.

The identical may be true of code, primarily when figuring out syntax and semantics. That stated, getting the proper syntax and semantics is at all times a plus level, although not the only focus of the entire handwriting train.

Let’s see the place we are able to begin on the subject of handwriting code.

Know your query

Throughout my remaining 12 months in faculty, I couldn’t do an internship and even attend campus interviews due to well being causes. In consequence, my very first job interview was fairly literal with excessive stakes.

After I look again now, the interview was fairly straightforward. However having by no means attended one earlier than, I used to be anxious past purpose. The very first thing the interviewers requested about programming was if I may output an inverted triangle made from asterisks. As I stated, it was straightforward — nothing a for loop can’t deal with, proper? However like I stated, my nervousness was by means of the roof as properly.

I took a deep breath, pressed my palm in opposition to the clean sheet of paper that they had laid out for me, slid it as gradual as doable in direction of me on the desk (shopping for time, in fact), clicked the pen, after which I did one thing proper.

I first drew an inverted triangle made from asterisks. That’s how I discovered my ft on the bottom to start out answering their query.

I’ve seen in any other case good builders get one thing fallacious just because they by no means absolutely grasp what it’s they’re fixing.

The questions we work with are usually not just like the questions physicists or mathematicians clear up. They get a set of parameters and discover the lacking ones; our questions are additionally our outcomes. We’re already advised what our outcomes are — we’ve to determine the right way to attain them. That’s why it’s crucial to know the query properly since you’ll see the consequence.

Writing down or drawing out what you wish to output is among the greatest methods to start out your coding. I perceive that in our fast-paced business, the expectation is that we’ve to leap proper into the programming by operating a “hiya world” demo. And that’s nice to familiarize your self with an unfamiliar syntax and shake off your anxiousness about attempting one thing new.

However when somebody asks you a query and provides you a consequence to work as much as, wouldn’t it simply be higher to place that down first? That query/consequence just isn’t solely your start line but in addition your level of reference. At any step in your coding, you’ll be able to take a look at it to make sure you’re working in direction of it and that you simply’re heading in the right direction.

So whether or not in your reply sheets or in that clean A4 paper you’re about to jot down in, begin by taking a second and writing down what it’s you’re attempting to output. You’ll be able to put it within the margins or a nook should you don’t need it to be part of your reply. Simply be sure it’s someplace the place you’ll be able to preserve referencing it.

Define your code

This step is sort of a double-edged sword. It will possibly get you a roadmap to your program or waste your time. My job is to verify it’s the previous.

So, initially, I prefer to say: outlining code is pointless if the scope of your downside or query is small. Once more, this observe is neither prescriptive nor common to all initiatives or conditions. Think about I’m your interviewer, and I ask you to jot down the right way to middle a component in an internet web page utilizing CSS in as some ways as doable. You received’t precisely be needing a top level view for this. The code snippets are comparatively small for every methodology.

However now, let’s say I assign you to jot down an internet utility that captures person signatures by way of a touchscreen interface after which saves the signature on the server. Not so easy, proper? You’ve a couple of factor to determine. Maybe, a bit of define might help.

1. UI for capturing signature — HTML Canvas? WebGL?
2. Disable pointer occasions on the remainder of the net web page when the person is signing
3. Convert and save the captured picture to a PNG file — JS
4. Then convert it to blob (possibly) and put it aside to the customer’s log information desk.

I’ve written a tough sequence of actions I believe I may need to code. It may’ve been shorter or longer, relying on what I wished from it.

I extremely advocate outlining code for consumer initiatives. Write the define alongside along with your person necessities or on the again of wireframes you’ve printed out.

Your fast snapshot of bullet factors offers you a map, a to-do checklist, and a guidelines to confirm in opposition to once you attain the top of the venture — just about your complete venture’s abstract in a low-fidelity checklist. It will possibly additionally change into a template to start out your subsequent comparable venture.

However like I stated earlier than, this step is sort of a double-edged sword. You’ll need to preserve this brief for examinees and interviewees when there are time constraints.

If you happen to don’t know the place to start out, write down simply three important capabilities you’ll need to code in your utility, and if in case you have bought the time, make it 5.

However that’s about it. Spend as little time as doable on this, and don’t sweat over the main points. The define just isn’t going to attain you further factors. It’s there solely that can assist you be sure to have every little thing coated. It captures your preliminary intestine response and retains you sincere all through the venture’s life.

Longhand vs. shorthand

Time to start out coding. So, what do you write? “Bdrs” or “border-radius“; “div -> p” or “<div><p></div></p>“; “pl()” or “println()“; “q()” or “querySelector()“?

If another person is grading your code, then there’s no selection. Pass over abbreviations, pseudo-codes, Emmet shortcuts, and another type of shorthand writing. In any other case, there’s no purpose to imagine that anybody studying this is aware of what your abbreviations imply.

It’s actually as much as you.

If you happen to’ve gotten out of contact with writing by hand — and many people have — it’s higher to not go overboard with the longhand notations, as they get tedious. On the similar time, there’s no such factor as being too frugal along with your writing. Not if you need to have the ability to look again on it in the future and perceive what you’d written down.

I’ve an open file in my note-taking app and a lined notepad on my desk the place I write down code snippets I wish to save for later reference. They’re unorganized, only a lengthy stream of snippets. That’s why after I flick through older notes, I wouldn’t know what I meant to jot down if I had not written them down clearly.

I neglect syntaxes on a regular basis. As an illustration, I’ve been utilizing the arrow notation for JavaScript capabilities because it was launched (as a result of it’s shorter), and I’m fairly certain if somebody abruptly asks me to outline a perform utilizing the perform key phrase, I’d even misplace the parentheses or the perform title, inciting a syntax error.

It’s common for us to neglect syntaxes we haven’t used shortly. That’s why it’s higher to jot down your notes clearly when you want them for future reference.

The non-sequential circulate of code

Not like the final step, which doesn’t apply to these of you interviewees and test-takers, this one is catered particularly to you.

Most programming languages are interpreted, compiled, and executed in order that generally pre-written code within the supply is executed later when known as. We do it in JavaScript, for instance, with perform calling — capabilities may be outlined initially, then executed later. Examinees and interviewees can use this to start out engaged on the important level of your reply first.

As I’ve stated from the very starting, the aim of handwriting code is to work by means of or check the logic of no matter it’s you program. It’s greatest once you give attention to resolving that first.

Let’s take a traditional textbook instance — a program to search out the nth Fibonacci quantity. If I have been to jot down a easy define for it, it might be one thing like this:

1. Get the enter.
2. Calculate the Fibonacci quantity.
3. Summarise the output.
4. Print the output.

All of the steps in that define are important; nevertheless, 1, 3, and 4 are extra compulsory. They’re crucial however not necessary sufficient to give attention to instantly.

It’s higher to start out writing down the code to calculate the Fibonacci quantity somewhat than to fetch the enter. Wrap it in a perform, then go forward and write the code sequentially and write down a line to name that perform the place applicable.

Spend your time writing code that focuses on the guts of the issue.

Actual professionals can skip forward. Let’s say I’ve a consumer venture, and I’ve to work with some triangle geometry — bought two sides, reverse angle, and gotta discover the third aspect’s size. And I’ve determined to scribble on paper to get began somewhat than opening my IDE.

First, I might draw the triangle, in fact (that’s one thing I’m very skilled with, as you’ll be able to inform). I might write down some pattern lengths and angles. Then I’d write the method (compliments of on-line looking, for certain), after which I’d leap proper to the code for the perform.

There’s no level in me writing down the compulsory steps although I’ll want them in production-ready code. However it might be completely different if I needed to write that on a solution sheet in an examination. I can’t skip the opposite steps; nevertheless, I can nonetheless begin with the code for the method.

Pseudo-code

Chris has already written a helpful article on pseudo-code that I extremely advocate you give a stable learn.

For all these professionals who really feel like the entire handwriting code factor doesn’t appear to be your cup of tea however nonetheless could be curious if it could enable you to, then pseudo-code could be the steadiness you’re searching for.

It’s just like outlining the code, as I discussed in one of many earlier steps. Nevertheless, it’s briefer and feels extra like shorthand coding. It’s generally additionally known as “skeleton code.”

Right here’s some fast pseudo-code for a CSS grid structure:

Grid
5 60px rows
6 100px columns

There isn’t a lot to jot down! So, although placing a pencil to paper is great for this kind of factor, it’s simply as efficient, quick, and cheap to jot some pseudo code into no matter program you’re utilizing.

Area and feedback

I consider code is 90% key phrases and 10% tabs. Withoutspacesthereadabilityofwordsdecreases. Indentations are crucial for handwritten code as properly. Nevertheless, please don’t use it for each degree as a result of the width of the paper will restrict you. Use areas judiciously, however use them.

If you happen to’re writing code to your use, I additionally consider that should you’ve adopted every little thing I’ve talked about to this point and have already written down your output and a top level view on the web page, you might not even want to incorporate feedback. Feedback inform you rapidly what its following set of code does. You probably have already written and skim a top level view for the code, then feedback are redundant notes.

Nevertheless, in case your judgment says to place down one, then do it. Add it to the suitable aspect of the code (because you received’t have the ability to insert it between already written strains the best way you might in, say, VS Code). Use ahead slashes, brackets, or arrows to indicate that they’re feedback.

For examinees who’re unconfident with a sure syntax, write down feedback. This manner, at the very least, you’re letting the individual grading your paper know your intention with that incorrectly formatted code. And use solely the proper delimiters to indicate feedback — for instance, that may be the ahead slashes for JavaScript.

Analog vs. digital

As I discussed earlier, every little thing I’m offering right here can is generic coding recommendation. If you happen to don’t wish to do that with bodily paper, any note-taking utility additionally works.

However should you’re going to attempt the digital route, my advice is to attempt utilizing one thing apart from a straight note-taking app. Work with extra visible digital instruments — circulate diagrams, thoughts maps, wireframes, and many others. They might help you visualize your consequence, the outlines, and the code itself.

I’m not a lot of a digital citizen (aside from working on the net and just lately changing to studying e-books), so I keep on with bodily notebooks.

My favourite instruments for handwriting code

Any pencil and paper will do! However there are many choices on the market, and these are a couple of selection instruments I take advantage of:

There is no such thing as a “write” option to code

I hope, if nothing else, my little manner of handwriting code with pencil and paper makes you consider the best way you already plan and write code. I like figuring out how different builders strategy their work, and that is my manner of providing you with a peek into the best way I do issues.

Once more, nothing right here is scientific or a precise artwork. However if you wish to give handwritten code planning a attempt, right here’s every little thing we’ve coated in a pleasant ordered checklist:

1. Begin by writing down (with pattern information, if wanted) the output of your code.
2. Write a top level view for the code. Please preserve it to 3 steps for small initiatives or ones which might be much less advanced.
3. Use longhand notations. Builders writing for themselves can use shorthand notations so long as the writing is legible and is smart to you once you discuss with it later.
4. When beneath a time constraint, take into account writing the code that tackles the guts of the issue first. Later, write down a name to that code on the proper place in your sequential code.
5. If you happen to really feel assured, attempt writing pseudo code addressing the principle concept.
6. Use correct indentations and areas — and be conscious of the paper’s width.

That’s it! Whenever you’re able to attempt writing code by hand, I hope this text makes it straightforward so that you can begin. And should you’re sitting down for an examination or an interview, I hope this helps you give attention to getting the questions proper.