To me, recipe development and writing is enormous fun! Code writing, not so much. So when tasked to work with students through an arts integrated Code Workshop, going the recipe analogy route is a no-brainer.

10 ways programming is like recipe writing.

1. Language

   Recipes are written with specific terms (for ingredients, measurements, etc), formatted in a specific way. Code also has a language, syntax, made up of grammar, keywords, and symbols. Different coding languages are used for different application, such as software, games, apps, or food blog pages. 🙂

2. Instructions and Commands

   A recipe gives instructions to the cook. Code gives commands to the computer.

3. Step by Step Sequence

   Both recipes and codes are written in a step by step format. Do one thing, then do the next thing, then the next thing…

4. Need for detail and accuracy

   Good detail and accuracy makes both recipes and code user-friendly. A mistake in code could result in a glitch or an Error alert on the computer screen. In a recipe, an ingredient left out, the wrong amounts, or lack of specificity, like calling for onion, but not telling the cook whether it should be red, white, yellow, of green, or calling for an herb without saying if it should be fresh, dried, ground, etc, is likely to change the dish.

   Example: Same salsa recipe. One just had a few details missing.

   How ’bout a cookie recipe requiring 2 cups of sugar, accidentally printed as 2 cups of salt!
   Detail and accuracy are VERY important for both recipe writing and code writing.

5. Building Blocks

   Recipes have ingredients.
   Code has graphics (GUI) or text in brackets (HTML).

   

6. Use of Building Blocks

   Recipe ingredients can be changed, moved around, used differently to create all sorts of dishes. Code graphics (GUI) or text in brackets (HTML) can be moved around and rearranged to create and change results any way the programmer likes!

   Recipe ingredients example: Flour and water amounts and methods can be change and used to make any number of foods, such as crackers, bread, pizza dough, donuts, gravy, and glue!

7. Method

   Code and recipes both have Method. Method tells the cook or the computer how to use the building blocks.

   Hmm #6 and #7 may be the same thing… will probably edit later.

8. Range

   Code and recipes can be both be either very simple or very complex, and everything in between.

9. Results

   A well written recipe allows for ANY cook to follow it and get the exact same result. Well written code also yields consistent results every time.

   

10. The Writer/Developer

    Code and recipes require someone to develop and write them.

    The writer studies and learns, or creates, language, with the user in mind. In what application will the code be used, who will use it, and on what device(s)? Who will follow the recipe… a new cook? A pro? How will they use the recipe… for flavor? for health? for easy dinners? This understanding helps the programmer of recipe writer to develop programs and recipes for a specific group of people.

HTML PRACTICE for Students

To follow is a simple recipe. Create your own recipe and use code to format it for publication. Below (under the heading HTML – text “building blocks” code in red) are your building blocks, code in brackets. You can use them to change your text size, color and formatting.

Or… You can cut and paste the coded Peanut Butter and Jelly Sandwich recipe, leaving the code in place and replacing the title, ingredients, and method instructions with your own!

Peanut Butter and Jelly Sandwich

Ingredients

• two slices of bread
• 2 Tablespoons peanut butter
• 2 Tablespoons jelly

Method

1. Spread peanut butter evenly onto one slice of bread using a knife.
2. Spread jelly or jam evenly onto the other slice of bread.
3. Press the two slices of bread together (peanut butter and jelly sides together).
4. Cut the sandwich in half on the diagonal

Enjoy!

The same recipe written in text code.

<h2>Peanut Butter and Jelly Sandwich</h2>
<strong>Ingredients</strong>
<ul>
<li>two slices of bread</li>
<li>2 Tablespoons peanut butter</li>
<li>2 Tablespoons jelly</li>
</ul>
<strong>Method</strong>
<ol>
<li>Spread peanut butter evenly onto one slice of bread using a knife.</li>
<li>Spread jelly or jam evenly onto the other slice of bread.</li>
<li>Press the two slices of bread together (peanut butter and jelly sides together).</li>
<li>Cut the sandwich in half on the diagonal</li>
</ol>
<strong>Enjoy!</strong>

HTML – text “building blocks” code in red

How to code for bold type. = <strong>How to code for bold type.</strong>

How to code for red color font. = <span style=”color: #ff0000;”>How to code for red color font.</span>

How to code for italics. = <em>How to code for italics. </em>

 

How to code a number list:

1. first item on list
2. second item on list
3. third item on list

How to code a number list:
<ol>
<li>first item on list</li>
<li>second item on list</li>
<li>third item on list</li>
</ol>

 

How to code a bulleted list:

• first item on list
• second item on list
• third item on list

How to code a bulleted list:
<ul>
<li>first item on list</li>
<li>second item on list</li>
<li>third item on list</li>
</ul>

 

Code for blockquotes.

<blockquote>Code for blockquotes.</blockquote>

 

Left alignment = Left alignment

Center alignment = <p style=”text-align: center;”>Center alignment</p>

Right alignment = <p style=”text-align: right;”>Right alignment</p>

Insert a hyperlink. foodhighs.com = <a href=”https://foodhighs.com”>foodhighs.com</a>

Strikethrough = <del>Strikethrough</del>

Indent first line of paragraph. = <p style=”padding-left: 30px;”>Indent first line of paragraph.</p>

Heading =

<h2>Heading</h2> 

Heading in purple =

</h1><h1><span style=”color: #800080;”>Heading in purple.</span></h1>

 

code for blue = #0000ff

code for green = #008000

code for orange = #ff6600

code for pink = #ff99cc

code for red = #ba062a

code for yellow = #ffff00

 

Shout Out!

Images in this post are from the Summer STEAM camp workshop organized by Engaging Creative Minds, based in North Charleston, SC. It is my privilege to partner with this organization for specific events. If you happen to live in the Charleston area, this comprehensive and FUN program provides learning experiences through the arts and science.

You can learn more about Engaging Creative Minds HERE.

As promised for my ECM campers, here are your appetizers you made while practicing your recipe writing skills. Great job!