{"id":5200,"date":"2023-12-16T12:37:41","date_gmt":"2023-12-16T12:37:41","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=5200"},"modified":"2024-01-11T21:20:47","modified_gmt":"2024-01-11T21:20:47","slug":"code-is-poetry","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/","title":{"rendered":".code {is: poetry;}"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\">3 | concrete poetry<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"262\" data-attachment-id=\"5251\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/code-poetry-icon\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry-icon.gif\" data-orig-size=\"262,262\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"code-poetry-icon\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry-icon.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry-icon.gif\" alt=\"\" class=\"wp-image-5251\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>.code {is: poetry;}<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f10d3723280\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f10d3723280\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Every_website_is_concrete_poetry\" >Every website is concrete poetry<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Concrete_vs_abstract\" >Concrete vs. abstract<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#History\" >History<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Word_as_image%E2%80%A6\" >Word as image&#8230;<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Appolinaire_in_CSS\" >Appolinaire in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#e_e_cummings_in_CSS\" >e.  e.  cummings in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#bpNichol_in_CSS\" >bpNichol in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Bob_Cobbing_in_CSS\" >Bob Cobbing in CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#%E2%80%A6_or_image_as_word\" >&#8230; or image as word?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Typography_type_drawing\" >Typography = type drawing<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#A_genre_waiting_for_a_medium\" >A genre waiting for a medium<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Hypertext_fold-ins_and_n-narratives\" >Hypertext: fold-ins and n-narratives<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Our_project\" >Our project<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Collaboration\" >Collaboration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Concept\" >Concept<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Iteration\" >Iteration<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Good_basic_code_samples\" >Good basic code samples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Code_helper_sites\" >Code helper sites<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#Synthesis\" >Synthesis<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"360\" data-attachment-id=\"5202\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/code-poetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry.gif\" data-orig-size=\"480,360\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"code-poetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/code-poetry.gif\" alt=\"\" class=\"wp-image-5202\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/code-poetry.com\/home\">From the introduction to <strong>.\/code &#8211;poetry<\/strong> by Daniel Holden and Chris Kerr<\/a><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>&#8220;Code is Poetry&#8221; is one of the evocative and thought-provoking taglines coined by <strong><a href=\"https:\/\/wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress<\/a><\/strong>, one of the most popular content management systems on the web \u2014 it&#8217;s the one we use for this wiki.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<p>Reflecting on the WordPress tagline, Matt Ward writes:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If a poem is written for a particular purpose, then the composition should reflect that purpose. The structure, word choice, subject and tone should all work together to support the primary purpose. &#8230;<\/p>\n\n\n\n<p>Our code should be much the same.  &#8230;<\/p>\n<cite><a href=\"https:\/\/www.smashingmagazine.com\/2010\/05\/the-poetics-of-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>The Poetics of Coding<\/strong><\/a><\/cite><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"674\" data-attachment-id=\"5258\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/wordpress-logo-code-is-poetry-big-610x674-1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1.png\" data-orig-size=\"610,674\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"wordpress-logo-code-is-poetry-big-610&amp;#215;674-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1.png\" alt=\"\" class=\"wp-image-5258\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1.png 610w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1-272x300.png 272w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/wordpress-logo-code-is-poetry-big-610x674-1-300x331.png 300w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Matt extends the metaphor: poetry and code share aspects of semiotics, structure, and conciseness that inevitably lead one to be &#8220;surprised by just how deep the similarities run. In some ways, the metaphor almost blurs into reality.&#8221;<\/p>\n\n\n\n<p>Jay Hoffman expands this further:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8230; Poetic flow is different from prose because it is not determined simply by grammatical structure, but by the way each word naturally bounces to the next, unveiling something more essential through their juxtaposition.<\/p>\n\n\n\n<p>Code has the same effect; each function, each coding phrase infuses with the words around it to create meaning. Each line, juxtaposed with the next, is able to do something that neither could do on its own. &#8230;<\/p>\n<cite><a href=\"https:\/\/torquemag.io\/2012\/12\/code-poetry\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Code Poetry<\/strong><\/a><\/cite><\/blockquote>\n\n\n\n<p>In our project, framed by this metaphor, we will create <strong>concrete poetry<\/strong> through the medium of code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Every_website_is_concrete_poetry\"><\/span>Every website is concrete poetry<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Concrete poetry? That&#8217;s a funny term. What is it?<\/p>\n\n\n\n<p>Superficially, it can be defined as words making form. There&#8217;s nothing particularly radical about that: we see this sort of thing occur all the time in advertising and logo design. Some critics of concrete poetry claim it is little more than a bunch of truisms with clever graphic design applied, like advertising. Concrete poetry does borrow from visual design strategies in the manner of advertising because it has to: both are visual media. But the best concrete poetry, like the best in any creative output, is transcendent, ineffable, and richly layered\u2014in fact, the <strong>opposite<\/strong> of characteristics we often find in advertising. Concrete poetry is a kind of <strong>visual poetry<\/strong>.<\/p>\n\n\n\n<p>So there&#8217;s always a relationship between text and image in a concrete poem. We might say the same thing about every website that combines image-based and text-based content. We can draw a fairly densely connected set of dots between <a href=\"https:\/\/en.wikipedia.org\/wiki\/Concrete_poetry\" target=\"_blank\" rel=\"noreferrer noopener\">concrete poetry<\/a> and like-kind forms, such as <a href=\"https:\/\/en.wikipedia.org\/wiki\/Micrography\" target=\"_blank\" rel=\"noreferrer noopener\">micrography<\/a> and the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Calligram\" target=\"_blank\" rel=\"noreferrer noopener\">calligram<\/a>. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"440\" height=\"659\" data-attachment-id=\"5265\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/a_shiviti_denmark\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark.jpg\" data-orig-size=\"440,659\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"A_shiviti_Denmark\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark.jpg\" alt=\"\" class=\"wp-image-5265\" style=\"width:auto;height:400px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark.jpg 440w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark-200x300.jpg 200w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/A_shiviti_Denmark-300x449.jpg 300w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em><strong>Micrography<\/strong>: a Hebrew text in the shape of a&nbsp;menorah.<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"261\" height=\"365\" data-attachment-id=\"5266\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/caligrafia_arabe_pajaro\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Caligrafia_arabe_pajaro.jpg\" data-orig-size=\"261,365\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Caligrafia_arabe_pajaro\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Caligrafia_arabe_pajaro.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Caligrafia_arabe_pajaro.jpg\" alt=\"\" class=\"wp-image-5266\" style=\"width:auto;height:400px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Caligrafia_arabe_pajaro.jpg 261w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Caligrafia_arabe_pajaro-215x300.jpg 215w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>An Arabic&nbsp;<strong>calligram<\/strong>&nbsp;in the shape of a peacock.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>By transcending a singular focus on words or pictures,  but combining and intertwining both, we can argue that a concrete poem and a web page are both manifestations of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Intermedia\" target=\"_blank\" rel=\"noreferrer noopener\">intermedia<\/a> \u2014 the combination of multiple media expressions \u2014 and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Transmedia_storytelling\" target=\"_blank\" rel=\"noreferrer noopener\">transmedia narrative<\/a> \u2014 a story told across various means of writing, drawing, time-and-motion graphics, and audience interactivity, all enabled by today&#8217;s digital media.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Concrete_vs_abstract\"><\/span>Concrete vs. abstract<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The term&nbsp;<strong>concrete poetry<\/strong>&nbsp;develops a distinction between&nbsp;<strong>concrete<\/strong>&nbsp;and&nbsp;<strong>abstract<\/strong>&nbsp;image-making through words. The term&nbsp;<strong>abstract<\/strong>&nbsp;refers to ideas or concepts that have no physical referents. Say a poet wants to write about love. She can&#8217;t hold this in her hand or describe its form: it&#8217;s an <em>abstraction<\/em>. But when she generates a visual poem, through wordplay, typography, figure-ground relationships, and other phenomena, she <em>gives form<\/em> to this idea of love. This form-making makes the abstract idea available to the senses: it makes it&nbsp;<em>concrete<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"History\"><\/span>History<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Although concrete poetry was a term coined in the 1950s by the Brazilian literary group <strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Concrete_poetry\" target=\"_blank\" rel=\"noreferrer noopener\">Noigandres<\/a><\/strong>, the idea of suggesting shape with words has a <a href=\"https:\/\/glia.ca\/conu\/digitalPoetics\/prehistoric-blog\/2008\/11\/18\/petroglyphs-concrete-poetry-and-graffiti\/\" target=\"_blank\" rel=\"noreferrer noopener\">long history<\/a>, from prehistoric <a href=\"https:\/\/en.wikipedia.org\/wiki\/Petroglyph\" target=\"_blank\" rel=\"noreferrer noopener\">petroglyphs<\/a> and Egyptian <a href=\"https:\/\/en.wikipedia.org\/wiki\/Egyptian_hieroglyphs\" target=\"_blank\" rel=\"noreferrer noopener\">hieroglyphs<\/a> through Celtic <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ogham\" target=\"_blank\" rel=\"noreferrer noopener\">Ogham script<\/a>, right up to hip-hop <a href=\"https:\/\/en.wikipedia.org\/wiki\/Graffiti\" target=\"_blank\" rel=\"noreferrer noopener\">graffiti<\/a>, the simple <a href=\"https:\/\/en.wikipedia.org\/wiki\/Emoticon\" target=\"_blank\" rel=\"noreferrer noopener\">emoticons<\/a> we adorn our text messages with&nbsp;<strong>; )<\/strong>, and their more elaborate cousins, the Japanese <a href=\"https:\/\/en.wikipedia.org\/wiki\/Kaomoji\" target=\"_blank\" rel=\"noreferrer noopener\">kaomoji<\/a> <strong>(^_^)<\/strong>.<\/p>\n\n\n\n<p><strong><a href=\"http:\/\/www.ubu.com\/historical\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">UbuWeb<\/a><\/strong> is the premier web archive for concrete and visual poetry, and it&#8217;s fascinating to see what we think of as a radical mid-twentieth-century invention permeating all times and cultures. Some examples from UbuWeb&#8217;s <strong><a href=\"http:\/\/www.ubu.com\/historical\/early\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">early collection<\/a><\/strong> and Wikimedia Commons:<\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default is-style-rectangular wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/is-code-poetry\/simias-egg\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"800\" data-attachment-id=\"5205\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/simias-egg\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg.jpg\" data-orig-size=\"603,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"simias-egg\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Simias Rhodius, Egg, circa 300 B.C.E.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg.jpg\" data-id=\"5205\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg.jpg\" alt=\"\" class=\"wp-image-5205\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg.jpg 603w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg-226x300.jpg 226w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/simias-egg-300x398.jpg 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/is-code-poetry\/marus\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"496\" height=\"661\" data-attachment-id=\"5216\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/marus\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus.jpg\" data-orig-size=\"496,661\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"marus\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Hrabanus Marus, &amp;#8220;De adoratione crucis ab opifice \/ De Laudibus Sanctae Crucis&amp;#8221; Augsburg, circa 845 C.E.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus.jpg\" data-id=\"5216\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus.jpg\" alt=\"\" class=\"wp-image-5216\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus.jpg 496w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus-225x300.jpg 225w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marus-300x400.jpg 300w\" sizes=\"auto, (max-width: 496px) 100vw, 496px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/is-code-poetry\/kiedrichsv18\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"486\" data-attachment-id=\"5247\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/kiedrichsv18\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kiedrichsv18.jpg\" data-orig-size=\"625,486\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;2.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Finecam SL300R&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1091273375&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;5.8&quot;,&quot;iso&quot;:&quot;200&quot;,&quot;shutter_speed&quot;:&quot;0.25&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"kiedrichsv18\" data-image-description=\"\" data-image-caption=\"&lt;p&gt;Erhart Falckener, Gerechtigkeitsspirale (Spiral of Justice), St. Valentin, Kiedrich, Germany, 1510 C.E.&lt;\/p&gt;\n\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kiedrichsv18.jpg\" data-id=\"5247\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kiedrichsv18.jpg\" alt=\"\" class=\"wp-image-5247\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kiedrichsv18.jpg 625w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kiedrichsv18-300x233.jpg 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\"><em><a href=\"http:\/\/!https:\/\/web.archive.org\/web\/20160304094510\/https:\/\/art.famsf.org\/andrew-hoyem\/egg-simias-rhodes-translated-w-r-paton-plate-1-portfolio-shaped-poetry-san-francisco\" target=\"_blank\" rel=\"noreferrer noopener\">Simias Rhodius, Egg, circa 300 B.C.E.<br><\/a><a href=\"https:\/\/www.ubu.com\/historical\/early\/early01.html\" target=\"_blank\" rel=\"noreferrer noopener\">Hrabanus Marus, &#8220;De adoratione crucis ab opifice \/ De Laudibus Sanctae Crucis&#8221; Augsburg, circa 845 C.E.<br><\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Gerechtigkeitsspirale\" target=\"_blank\" rel=\"noreferrer noopener\">Erhart Falckener, Gerechtigkeitsspirale (Spiral of Justice), St. Valentin, Kiedrich, Germany, 1510 C.E.<\/a><\/em><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Word_as_image%E2%80%A6\"><\/span>Word as image&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The most salient feature of concrete poetry is how word becomes image, clearly expressed in the examples below. The earliest of these, Lewis Carroll&#8217;s <strong>The Mouse&#8217;s Tale<\/strong>,&nbsp;is a typically Carrollian quadruple pun: part of a tale about a tail, the poem is typeset in the shape of a tail,&nbsp;with the rhyme occurring at the end of each line (known as a <strong>tail rhyme<\/strong>).&nbsp;It is structured with&nbsp;an AABCCB <strong><a href=\"http:\/\/en.wikipedia.org\/wiki\/Rhyme_scheme\" target=\"_blank\" rel=\"noreferrer noopener\">rhyme scheme<\/a><\/strong> which is easier to see unformatted (akin to HTML content without CSS applied):<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"763\" height=\"1024\" data-attachment-id=\"5219\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/carroll_mouse\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse.jpg\" data-orig-size=\"763,1024\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"carroll_mouse\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse.jpg\" alt=\"\" class=\"wp-image-5219\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse.jpg 763w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse-224x300.jpg 224w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/carroll_mouse-300x403.jpg 300w\" sizes=\"auto, (max-width: 763px) 100vw, 763px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p><em>Fury said to a mouse,<\/em><br><em>That he met in the house,<\/em><br><em>&#8216;Let us both go to law: I will prosecute you.\u2014<\/em><br><em>Come, I&#8217;ll take no denial:<\/em><br><em>We must have the trial;<\/em><br><em>For really this morning I&#8217;ve nothing to do.&#8217;<\/em><br><em>Said the mouse to the cur,<\/em><br><em>&#8216;Such a trial, dear Sir,<\/em><br><em>With no jury or judge, would be wasting our breath.&#8217;<\/em><br><em>&#8216;I&#8217;ll be judge, I&#8217;ll be jury,&#8217;<\/em><br><em>said cunning old Fury:<\/em><br><em>&#8216;I&#8217;ll try the whole cause, and condemn you to death.&#8217;<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Although still witty, without the form, the poem takes on a more superficial and conventional character.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Appolinaire_in_CSS\"><\/span>Appolinaire in CSS<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>As you analyze the examples below, try to imagine what you&#8217;d need to do to set it in CSS. Some seem impossible! For example, the Appolinaire poem is typeset on a curve, like text set on a vector path in Illustrator. <a href=\"http:\/\/csswarp.eleqtriq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cutting-edge<\/a><strong><a href=\"http:\/\/csswarp.eleqtriq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"> CSSWarp<\/a><\/strong> can do it! As we get into our project, we&#8217;ll be introduced to CSS code generators and tutorials that will allow you to style just about any effect you see in the poems below! After all, remember that the Marinetti exercise was based on a concrete poem.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"996\" height=\"313\" data-attachment-id=\"5218\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/appolinaire-la-columbe-poignardee-et-le-jet-deau-3\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Appolinaire-La-Columbe-Poignardee-et-le-jet-deau-3.gif\" data-orig-size=\"996,313\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Appolinaire-La-Columbe-Poignardee-et-le-jet-deau-3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Appolinaire-La-Columbe-Poignardee-et-le-jet-deau-3.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Appolinaire-La-Columbe-Poignardee-et-le-jet-deau-3.gif\" alt=\"\" class=\"wp-image-5218\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Guillaume Appolinaire, from Calligrammes, 1913-16<\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/cssWarp-compound.html\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>Visit the website with the code &gt;<\/strong><\/em><\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"793\" data-attachment-id=\"5298\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/csswarp2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2.png\" data-orig-size=\"1411,1093\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"csswarp2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2-1024x793.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2-1024x793.png\" alt=\"\" class=\"wp-image-5298\" style=\"width:416px;height:auto\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2-1024x793.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2-300x232.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2-768x595.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/csswarp2.png 1411w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Screen capture showing the use of CSSWarp<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/cssWarp-compound.html\" style=\"border:1px #cccccc solid;\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"400px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"e_e_cummings_in_CSS\"><\/span>e.  e.  cummings in CSS<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Don&#8217;t use a lot of non-breaking spaces to typeset this poem by e. e. cummings! Instead, it can be set by using the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/shape-outside\/\" target=\"_blank\" rel=\"noreferrer noopener\">shape-outside<\/a> property to create the diagonal margin. The trick is to include the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/float\/\" target=\"_blank\" rel=\"noreferrer noopener\">float<\/a> property with it! If you incorporate a float to the left and right with two separate shapes, you can create the illusion of <em>shape-inside<\/em>, a property that is not in the W3C standard (yet?). Look at the CodePen resource below to see how.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"499\" height=\"699\" data-attachment-id=\"5304\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/cummings_xlv\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv.jpg\" data-orig-size=\"499,699\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"cummings_xlv\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv.jpg\" alt=\"\" class=\"wp-image-5304\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv.jpg 499w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv-214x300.jpg 214w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cummings_xlv-300x420.jpg 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>e. e. cummings, XLV, 1925<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe src=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/shape-outside_example.html\" style=\"border:0px #ffffff none; width: 100%; height: 582px;\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0px\" marginwidth=\"0px\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/shape-outside_example.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the website with the code &gt;<\/a><\/strong><\/em><\/p>\n\n\n\n<p class=\"has-text-align-center\">Our code was developed by adapting techniques from the <a href=\"https:\/\/codepen.io\/Chokcoco\/pen\/ZyWRbQ\">shape-outside diamond<\/a> Pen by Chokcoco, seen adjacent<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"shape-outside diamond\" src=\"https:\/\/codepen.io\/Chokcoco\/embed\/ZyWRbQ?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/Chokcoco\/pen\/ZyWRbQ\">\n  shape-outside diamond<\/a> by Chokcoco (<a href=\"https:\/\/codepen.io\/Chokcoco\">@Chokcoco<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"bpNichol_in_CSS\"><\/span>bpNichol in CSS<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p><em>Blues<\/em> by bpNichol is here set using the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Grid<\/a> property, which is the first CSS module created to solve the layout problems developers have been hacking their way around for as long as they&#8217;ve been making websites. Strangely, it hasn&#8217;t caught on since it was introduced around 2017, perhaps because it has what people perceive to be a steep learning curve. Sarah Edo offers the <a href=\"https:\/\/cssgrid-generator.netlify.app\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>CSS Grid Generator<\/strong><\/a> as a visualization tool to get past the somewhat abstract coding exercise.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"900\" data-attachment-id=\"5221\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/bpnichol\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol.png\" data-orig-size=\"691,900\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"bpnichol\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol.png\" alt=\"\" class=\"wp-image-5221\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol.png 691w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol-230x300.png 230w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/bpnichol-300x391.png 300w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>bpNichol, Blues, 1974<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/love-evol_css-grid_example.html\" style=\"border:0px #ffffff none;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"542px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/love-evol_css-grid_example.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the website with the code &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bob_Cobbing_in_CSS\"><\/span>Bob Cobbing in CSS<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Some of the more intimidating works to emulate are Bob Cobbing&#8217;s typewriter poems. Impossible? We created a similar rotation blurriness by using the <a href=\"\/\/www.w3schools.com\/cssref\/css3_pr_transform.php\" target=\"_blank\" rel=\"noreferrer noopener\">transform<\/a> property to rotate blocks of divs, in combination with some opacity changes.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"353\" height=\"500\" data-attachment-id=\"5220\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/cobbing-1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1.jpg\" data-orig-size=\"353,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"cobbing-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1.jpg\" alt=\"\" class=\"wp-image-5220\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1.jpg 353w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1-212x300.jpg 212w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cobbing-1-300x425.jpg 300w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Bob Cobbing, Music for<br>Dancing, 1971<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/transform-rotate_example.html\" style=\"border:0px #ffffff none;\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0px\" marginwidth=\"0px\" height=\"500px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/transform-rotate_example.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the website with the code &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>In many of the examples above, we used helper sites created by developers to assist each other and ease the workflow. <strong><a href=\"https:\/\/www.smashingmagazine.com\/2021\/03\/css-generators\/\" target=\"_blank\" rel=\"noreferrer noopener\">Smashing Magazine<\/a><\/strong> has collected several in this article, and <a href=\"https:\/\/tiny-helpers.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Tiny Helpers<\/strong><\/a> has collected a few hundred (!), organized by kind. Everything from blending modes to animation has a visual generator to shortcut lots of code-writing!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%80%A6_or_image_as_word\"><\/span>&#8230; or image as word?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>In the examples above, we note how poets approach image-making, but visual poetry works both ways. Artists of many stripes permit visual work to take on the poet&#8217;s task.&nbsp;<\/p>\n\n\n\n<p><strong>Cecil Touchon<\/strong> recombines poster material until type leaps over legibility. Imagine how you would set one of his works in CSS.&nbsp;Think large-scale, sans-serif type in white on a red field, transform-rotations, hidden overflow, and a CSS grid, this time with divs spanning across cells to randomize the basic module.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"656\" height=\"699\" data-attachment-id=\"5225\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/touch1592_xl\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl.jpg\" data-orig-size=\"656,699\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"touch1592_xl\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl.jpg\" alt=\"\" class=\"wp-image-5225\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl.jpg 656w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl-282x300.jpg 282w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/touch1592_xl-300x320.jpg 300w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Cecil Touchon, Visual Poetry, 2008<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/touchon_css-grid_example.html\" style=\"border:0px #ffffff none;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"400px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/html_templates\/touchon_css-grid_example.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the website with the code &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Francis Picabia<\/strong> combines drawing and text  \u2014 you could create an <code>svg<\/code> as a background image overlayed with divs containing text.<\/li>\n\n\n\n<li>Musician&nbsp;<a href=\"http:\/\/www.arras.net\/brown_ewriting\/?p=50\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>John Cage<\/strong><\/a> applies his famous chance and scripting operations to language \u2014 you could call a dozen <code>font-family<\/code> instances to create a similar visual effect. <\/li>\n\n\n\n<li><strong>Bruce Nauman<\/strong> applies commercial neon to a mystical message \u2014 the CSS <code>filter<\/code> properties could create the glow, and <code>mix-blend-mode<\/code> could generate an overlay. <\/li>\n\n\n\n<li><strong>Jiri Kolar<\/strong> applies his collagist sensibility to sculpture in a text-as-texture work \u2014 you might be able to set the Kolar as a 3D object using <a href=\"https:\/\/get.webgl.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>WebGL<\/strong><\/a> and the <a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>threejs<\/strong><\/a> Javascript library!<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"691\" height=\"1024\" data-attachment-id=\"5223\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/picabia_cantharides\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides.jpg\" data-orig-size=\"874,1296\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Picabia_Cantharides\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-691x1024.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-691x1024.jpg\" alt=\"\" class=\"wp-image-5223\" style=\"width:auto;height:600px\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-691x1024.jpg 691w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-202x300.jpg 202w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-768x1139.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides-300x445.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Picabia_Cantharides.jpg 874w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Francis Picabia, Cantharides, 1918<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"432\" height=\"576\" data-attachment-id=\"5224\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/cage\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage.jpg\" data-orig-size=\"432,576\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"cage\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage.jpg\" alt=\"\" class=\"wp-image-5224\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage.jpg 432w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage-225x300.jpg 225w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/cage-300x400.jpg 300w\" sizes=\"auto, (max-width: 432px) 100vw, 432px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>John Cage, mesostic, 1967<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Bruce Nauman, The true artist helps the world by revealing mystic<\/em> <em>truths, 1967<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"426\" data-attachment-id=\"5228\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/kolar-shoe-with-dedication\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kolar-Shoe-With-Dedication.jpg\" data-orig-size=\"600,426\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"kolar-Shoe-With-Dedication\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kolar-Shoe-With-Dedication.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kolar-Shoe-With-Dedication.jpg\" alt=\"\" class=\"wp-image-5228\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kolar-Shoe-With-Dedication.jpg 600w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/kolar-Shoe-With-Dedication-300x213.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Jiri Kolar, Shoe With<\/em> <em>Dedication, 1986<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>If Kolar brings a concrete poetry sensibility to sculpture, Conceptual artist <strong>Joseph Kosuth<\/strong> brings it to architecture in his work&nbsp;<em>a labyrinth into which I can venture (a play of works by guests and foreigners)<\/em>. Although we won&#8217;t go THIS deep into the possibilities, know that the bleeding edge of the most highly experimental CSS can create spatial modeling in the most modern browsers.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"367\" data-attachment-id=\"3411\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/co-evolution\/kosuth_labyrinth\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/kosuth_labyrinth.jpg\" data-orig-size=\"480,367\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;2.8&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;Canon PowerShot A610&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1160655485&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;7.3&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0.125&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"kosuth_labyrinth\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/kosuth_labyrinth.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/kosuth_labyrinth.jpg\" alt=\"\" class=\"wp-image-3411\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/kosuth_labyrinth.jpg 480w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/08\/kosuth_labyrinth-300x229.jpg 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Joseph Kosuth, &#8220;a labyrinth into which I can venture (a play of works by guests and foreigners)&#8221;<\/em> <em>installation view, 2006<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Typography_type_drawing\"><\/span>Typography = type drawing<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>But no matter how enthusiastic the poet may allow himself to become about the potential &#8230; of the new visual poem, when he gets down to practicalities, he is confronted with certain problems inherent in his materials. If he is going to find poetry in the visual dimensions of words, he must learn to handle them typographically. In the world of advertising where visual communication with words is a cut-throat business, it is the designer&#8217;s job to decide which type face or type faces will best persuade the viewer&#8230; . The poet&#8217;s typographical concerns are far more subtle and significant, and he should exercise even more care, perhaps, in making typographical decisions; for the form, weight and scale of letters and words can be used to heighten, can at best become physically part of what he has to say; they can unobtrusively have little effect upon what he has to say; or they can intrude a discordant note into what he has to say.&nbsp;<\/em><\/p>\n<cite><em>\u2014Mary Ellen Solt<\/em><\/cite><\/blockquote>\n\n\n\n<p>To illustrate the power of typography, let&#8217;s return to the Brazilians. Solt continues:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>A bold, penetrating type face has come to be associated with Brazilian concrete poetry; but within the framework of this over-all characteristic style, the poets have been able to work with a great deal of typographic freedom and individuality<\/em>.<\/p>\n<\/blockquote>\n\n\n\n<p>We can see this in these samples:&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"837\" data-attachment-id=\"5231\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/pignatari-life\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life.jpg\" data-orig-size=\"510,837\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"pignatari-life\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life.jpg\" alt=\"\" class=\"wp-image-5231\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life.jpg 510w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life-183x300.jpg 183w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/pignatari-life-300x492.jpg 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>D\u00e9cio Pignatari, LIFE, 1957<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"281\" data-attachment-id=\"5232\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/lifelogo\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/lifelogo.jpg\" data-orig-size=\"500,281\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"lifelogo\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/lifelogo.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/lifelogo.jpg\" alt=\"\" class=\"wp-image-5232\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/lifelogo.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/lifelogo-300x169.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Life Magazine Logo, used to generate Pignatari&#8217;s poem<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1298\" height=\"1682\" data-attachment-id=\"5234\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/xisto\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto.png\" data-orig-size=\"1298,1682\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"xisto\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-790x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto.png\" alt=\"\" class=\"wp-image-5234\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto.png 1298w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-232x300.png 232w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-790x1024.png 790w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-768x995.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-1185x1536.png 1185w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/xisto-300x389.png 300w\" sizes=\"auto, (max-width: 1298px) 100vw, 1298px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Pedro Xisto, epithalamium, 1969<\/em><\/p>\n\n\n\n<p>An epithalamium is a poem traditionally written for a bride on the occasion of her marriage night. Note the table with interpretations of the elements.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"412\" data-attachment-id=\"5235\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/decampos1\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1.png\" data-orig-size=\"3286,1322\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"decampos1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-1024x412.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-1024x412.png\" alt=\"\" class=\"wp-image-5235\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-1024x412.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-300x121.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-768x309.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-1536x618.png 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos1-2048x824.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Augusto de Campos,<\/em> <em>Luxo Lixo, 1965<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"512\" data-attachment-id=\"5236\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/decampos2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos2.jpg\" data-orig-size=\"726,512\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"decampos2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos2.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos2.jpg\" alt=\"\" class=\"wp-image-5236\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos2.jpg 726w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/decampos2-300x212.jpg 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Museum installation, 2007<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Perhaps inspired by the Brazilian concrete poets, how do these artists use attention to typography to inform their work?<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"847\" data-attachment-id=\"5237\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/gomringer\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer.webp\" data-orig-size=\"1280,1059\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"gomringer\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer-1024x847.webp\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer-1024x847.webp\" alt=\"\" class=\"wp-image-5237\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer-1024x847.webp 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer-300x248.webp 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer-768x635.webp 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/gomringer.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Eugen Gomringer, Silence, 1968<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<iframe height=\"300\" style=\"width: 100%;\" scrolling=\"no\" title=\"Tutorial 01\" src=\"https:\/\/codepen.io\/celestelayne\/embed\/oNXJaBV?default-tab=html%2Cresult\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\">\n  See the Pen <a href=\"https:\/\/codepen.io\/celestelayne\/pen\/oNXJaBV\">\n  Tutorial 01<\/a> by Celeste (<a href=\"https:\/\/codepen.io\/celestelayne\">@celestelayne<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.\n<\/iframe>\n\n\n\n<p class=\"has-text-align-center\">A Pen demonstrating a simple CSS setting of <em>Silence<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"1024\" data-attachment-id=\"5238\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/furneval\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval.jpg\" data-orig-size=\"932,2048\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"furneval\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-466x1024.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-466x1024.jpg\" alt=\"\" class=\"wp-image-5238\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-466x1024.jpg 466w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-137x300.jpg 137w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-768x1688.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-699x1536.jpg 699w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval-300x659.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/furneval.jpg 932w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>John Furneval,&nbsp;The Tower of Babel, 1964<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"801\" data-attachment-id=\"5239\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/finlay\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay.jpg\" data-orig-size=\"1024,801\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"finlay\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay.jpg\" alt=\"\" class=\"wp-image-5239\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay.jpg 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay-300x235.jpg 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/finlay-768x601.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Ian Hamilton Finlay,&nbsp;Poster Poem, 1964<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"700\" data-attachment-id=\"5241\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/mayer\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer.png\" data-orig-size=\"502,700\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"mayer\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer.png\" alt=\"\" class=\"wp-image-5241\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer.png 502w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer-215x300.png 215w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/mayer-300x418.png 300w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Herbert Mayer,&nbsp; , 1962-3<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"754\" height=\"1024\" data-attachment-id=\"5242\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/belloli\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-scaled.jpg\" data-orig-size=\"1886,2560\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"belloli\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-754x1024.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-754x1024.jpg\" alt=\"\" class=\"wp-image-5242\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-754x1024.jpg 754w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-221x300.jpg 221w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/belloli-scaled.jpg 1886w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Carlo Belloli, acqua, 1961<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Some artists must resort to the very invention of a typeface to bring their work to bear.&nbsp; James Johnson developed one of the early masterworks of interactive web-based art in his work <em><a href=\"https:\/\/spot.colorado.edu\/~johnsoja\/1KWords.html\" target=\"_blank\" rel=\"noreferrer noopener\">A Thousand Words<\/a><\/em> using a font he created from contorted skeletons posing to form letters. The spectator clicks on the letters to create a new, random set, with associations conjured by the viewer&#8217;s own history.<\/p>\n\n\n\n<p>Sadly, the work, a Shockwave .dcr format, is <a href=\"https:\/\/web.archive.org\/web\/20150522061053\/http:\/\/spot.colorado.edu\/~johnsoja\/1KWords.html\" target=\"_blank\" rel=\"noreferrer noopener\">no longer playable online<\/a>, though you can trick it if you&#8217;re <a href=\"https:\/\/www.reddit.com\/r\/mac\/comments\/pac8n2\/is_there_a_way_to_play_shockwave_games_on_mac\/\" target=\"_blank\" rel=\"noreferrer noopener\">adventurous<\/a>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"333\" data-attachment-id=\"5246\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/johnson\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/johnson.jpg\" data-orig-size=\"402,333\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"johnson\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/johnson.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/johnson.jpg\" alt=\"\" class=\"wp-image-5246\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/johnson.jpg 402w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/johnson-300x249.jpg 300w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>James Johnson, screen capture from A Thousand Words, 1991<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_genre_waiting_for_a_medium\"><\/span>A genre waiting for a medium<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Johnson&#8217;s work is notable among this group, in that it started as a physical installation: lots of words in a grid on a wall. Typical at the time and typical still, an accumulation of material filling a room makes for a fairly run-of-the-mill installation strategy. It was the transition of the work from physical to digital that gave it power&#8230; <strong>as if it were a work waiting for a medium<\/strong>. This can be said of concrete poetry generally:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>&#8230; D\u00e9cio (Pignatari) saddled up to the stage and began recalling the history of concrete poetry as it applied to the Noigandres group in S\u00e3o Paulo in the early 1950s. I was stunned. Everything he was saying seemed to predict the mechanics of the internet in so many respects: delivery, content, interface, distribution, multi-media, just to name a few. Suddenly it made sense: like de Kooning&#8217;s famous statement: &#8220;History doesn&#8217;t influence me. I influence it,&#8221; it&#8217;s taken the web to make us see just how prescient concrete poetics was in predicting its own lively reception half a century later. I immediately understood that what had been missing from concrete poetry was an appropriate environment in which it could flourish. For many years, concrete poetry has been in limbo: it&#8217;s been a displaced genre in search of a new medium. And now it&#8217;s found one.&nbsp;<\/em><\/p>\n<cite><em>\u2014Kenneth Goldsmith<\/em><\/cite><\/blockquote>\n\n\n\n<p><strong><a href=\"https:\/\/web.archive.org\/web\/20161111023139\/http:\/\/beinecke.library.yale.edu\/about\/blogs\/room-26-cabinet-curiosities\/2010\/02\/15\/house-dust\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>A House of Dust<\/em><\/a><\/strong> by Alison Knowles and James Tenney is an early example of a poem generated by an algorithm, which came into being (hard to say it was &#8220;written&#8221;) in 1967, opening up the possibility for computers and poetry to coexist. Forty years later, the web has exploded as an arena for concrete and visual poetry and literature, combining sound, design, image, and text in ways the Noigandres group could only dream of. Aside from UbuWeb, several institutions curate this ambiguous genre mashup, including <a href=\"http:\/\/writing.upenn.edu\/pennsound\/\" target=\"_blank\" rel=\"noreferrer noopener\">PennSound<\/a> and <a href=\"http:\/\/eliterature.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Electronic Literature Organization<\/a>.<\/p>\n\n\n\n<p>ELO&#8217;s <a href=\"http:\/\/collection.eliterature.org\/2\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Electronic Literature Collection, Volume 2<\/em><\/a> contains lots of James Johnson&#8217;s heirs.&nbsp;Start with<em>&nbsp;<a href=\"https:\/\/collection.eliterature.org\/2\/works\/clifford_the_sweet_old_etcetera.html\" target=\"_blank\" rel=\"noreferrer noopener\">The Sweet Old Etcetera<\/a><\/em><a href=\"https:\/\/collection.eliterature.org\/2\/works\/clifford_the_sweet_old_etcetera.html\" target=\"_blank\" rel=\"noreferrer noopener\"> by Alison Clifford<\/a> (sound alert!).<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ffdddd\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Note: to interact with much of the content at the <em>Electronic Literature Collection<\/em>, you&#8217;ll need to be on a desktop device using a browser with the <strong><a href=\"https:\/\/ruffle.rs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>ruffle<\/em> Flash player emulator<\/a><\/strong>. Much of this early material was built in Flash and therefore deprecated in 2020. The <strong>ruffle<\/strong> emulator allows Flash content to be played without the security concerns that eventually led to the death of Flash&#8230; a topic we&#8217;ll cover in a future project!<\/p>\n\n\n\n<p class=\"has-text-align-right\"><strong><em><a href=\"https:\/\/ruffle.rs\/#downloads\" target=\"_blank\" rel=\"noreferrer noopener\">Download and install ruffle &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>For a fuller history of the relationship between computers and poetry, find a copy of&nbsp;<a href=\"http:\/\/en.wikipedia.org\/wiki\/Prehistoric_Digital_Poetry\" target=\"_blank\" rel=\"noreferrer noopener\">Prehistoric Digital Poetry: An Archaeology of Forms, 1959-1995<\/a>&nbsp;by C. T. Funkouser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hypertext_fold-ins_and_n-narratives\"><\/span>Hypertext: fold-ins and <em>n<\/em>-narratives<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>We tend to think of that relationship as being a one-way street: computers came along and upended the world. But it was&nbsp;<a href=\"http:\/\/newmediaabington.pbworks.com\/w\/page\/26422138\/ART%20315%20-%20Interact%202%20-%20The%20Future%20of%20the%20Novel\" target=\"_blank\" rel=\"noreferrer noopener\">William Burroughs<\/a>, with his invention of the fold-in method in <strong>literature<\/strong>, who has been credited with the conceptual framework for the hypertext. Part of what makes the web the web is the simple, clickable link that fast-forwards us out of one context and into another: a kind of open-ended, spectator-driven narrative with many possible outcomes.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:67%\">\n<p>Anyone who plays a video game understands this concept: this author calls such a story a <em>nNarrative<\/em>, where <em>n<\/em> is the number of stories allowed by the &#8220;programming&#8221; of a game-tale by an author. By comparison, most literature throughout time has been a one-way, linear narrative. Enter the hyperlink, and this multivalent storytelling style becomes an incredible extension of an already rich genre. <\/p>\n\n\n\n<p>Visit the <a href=\"http:\/\/www.eastgate.com\/ReadingRoom.html\" target=\"_blank\" rel=\"noreferrer noopener\">Reading Room<\/a> at <a href=\"http:\/\/www.eastgate.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Eastgate<\/a>, publishers of hypertext: of all the worthy options, start with <strong><em><a href=\"https:\/\/www.eastgate.com\/Help.html\" target=\"_blank\" rel=\"noreferrer noopener\">HELP<\/a><\/em><\/strong> by dane \u2014 sound alert (playable with <strong>ruffle<\/strong> \u2014 see above).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"854\" data-attachment-id=\"5356\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/help_dane\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane.png\" data-orig-size=\"794,854\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"help_dane\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane.png\" alt=\"\" class=\"wp-image-5356\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane.png 794w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane-279x300.png 279w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane-768x826.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/help_dane-300x323.png 300w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"width:100%; display: flex; justify-content: center;\">\n<iframe loading=\"lazy\" src=\"https:\/\/www.eastgate.com\/Help.html\" style=\"border:0px #ffffff none;\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"430px\" width=\"400px\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><em><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">**Hit your browser&#8217;s refresh button to reset the frame if you wish to stop the sound**<\/mark><\/strong><\/em><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:67%\">\n<p>Follow up with a return visit to UbuWeb, this time to the&nbsp;<a href=\"http:\/\/www.ubu.com\/contemp\/\" target=\"_blank\" rel=\"noreferrer noopener\">contemporary<\/a>&nbsp;section. Of the many to choose from, begin with Brian Kim Stefans and <a href=\"http:\/\/collection.eliterature.org\/1\/works\/stefans__the_dreamlife_of_letters.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>the dreamlife of letters<\/em><\/strong><\/a> (playable with <strong>ruffle<\/strong>).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"800\" data-attachment-id=\"5211\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/image_16\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/image_16.gif\" data-orig-size=\"900,800\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"image_16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/image_16.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/image_16.gif\" alt=\"\" class=\"wp-image-5211\" style=\"object-fit:cover\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div style=\"width:100%; display: flex; justify-content: center;\">\n<iframe loading=\"lazy\" src=\"https:\/\/collection.eliterature.org\/1\/works\/stefans__the_dreamlife_of_letters\/the_dream_life_cleaned.html\" style=\"border:1px #cccccc solid;\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"400px\" width=\"400px\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:67%\">\n<p>Finally, return to the&nbsp;<a href=\"http:\/\/directory.eliterature.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">ELO Directory<\/a>&nbsp;and find the link to&nbsp;<a href=\"http:\/\/www.secrettechnology.com\/flanet\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em><strong>With love, from a failed planet<\/strong><\/em><\/a>&nbsp;by Jason Nelson \u2014 sound alert (also playable with <strong>ruffle<\/strong>).<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-attachment-id=\"5362\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/failed_planet\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet.png\" data-orig-size=\"1196,1196\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"failed_planet\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-1024x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-1024x1024.png\" alt=\"\" class=\"wp-image-5362\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-1024x1024.png 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-768x768.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet-100x100.png 100w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/failed_planet.png 1196w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.secrettechnology.com\/flanet\/\" style=\"border:0px #ffffff none;\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><em><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">**Hit your browser&#8217;s refresh button to reset the frame if you wish to stop the sound**<\/mark><\/strong><\/em><\/p>\n\n\n\n<p>With the multi-narrative power of the hyperlink firmly in your grasp, let&#8217;s begin the project. For more inspiration as you work:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.anatol.cc\/\">http:\/\/www.anatol.cc\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/visual-poetry.tumblr.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/visual-poetry.tumblr.com\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.typeroom.eu\/article\/twenty-things-you-must-know-about-concrete-and-visual-poetry\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.typeroom.eu\/article\/twenty-things-you-must-know-about-concrete-and-visual-poetry<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.theartstory.org\/movement\/concrete-poetry\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.theartstory.org\/movement\/concrete-poetry\/<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Our_project\"><\/span>Our project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The <strong>.code {is: poetry;} Project<\/strong> involves both individual and collaborative activity. You will create an original work of art as part of a larger hypertext.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Collaboration\"><\/span>Collaboration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<p>First step: receive a unique number from the random number generator.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"width:100%; display: flex; justify-content: center;\">\n<iframe src=\"https:\/\/www.random.org\/widgets\/integers\/iframe.php?title=True+Random+Number+Generator&amp;buttontxt=Generate&amp;width=235&amp;height=235&amp;border=on&amp;bgcolor=%23FFFFFF&amp;txtcolor=%23777777&amp;altbgcolor=%23cccccc&amp;alttxtcolor=%23000000&amp;defaultmin=&amp;defaultmax=&amp;fixed=off\" frameborder=\"0\" width=\"235\" scrolling=\"no\" longdesc=\"https:\/\/www.random.org\/integers\/\">\nThe numbers generated by this widget come from RANDOM.ORG&#8217;s true random number generator.\n<\/iframe>\n<\/div>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Next, receive a set of words from the random word generator at quite possibly the world&#8217;s best-named website:&nbsp;<strong>watchout4snakes<\/strong>.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"http:\/\/watchout4snakes.com\/wo4snakes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit watchout4snakes &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Next, use <strong>Visuwords<\/strong> as a visual way to find synonyms, antonyms, and multiple meanings.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/visuwords.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Visuwords &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>As you develop, note that a link needs to be created to every other poem file with one of your shared words. The group will also collectively agree on an overall navigation strategy to code and include on every page. This should at minimum be a link of some kind, placed in a discrete div with the same location on every page, back to the home page.<\/p>\n\n\n\n<p>Finally, the home page will also need to be collectively designed and will be hosted by the instructor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Concept\"><\/span>Concept<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In your conceptual sketch, develop ideas for a visual poetic work using your words. You may use more words, but you must use the words you received. As you work think about the possibilities for formatting, linking, and other content manipulations unique to the HTML, CSS, or JS environments as discussed in class. Take authorship over this and don&#8217;t be intimidated by perceived limitations. CSS can do some pretty amazing things on the cutting edge, and there are several code generators on the web to take the headaches out of some of the wilder coding scenarios you might dream up.<\/p>\n\n\n\n<p>As part of the concept, you will also do some team management to create common assets:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A home page, which will be hosted by the instructor but designed and built by some members of the team.<\/li>\n\n\n\n<li>A common navigation tool, which will be comprised of a container div to be shared with every person, is designed and built by other members of the team.<\/li>\n<\/ul>\n\n\n\n<p>In addition to ideas for individual pages, you&#8217;ll develop sketches for these shared assets.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Iteration\"><\/span>Iteration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In iteration, you will experiment a lot with code. You&#8217;ll likely work on several historical states of your page, much like you saw in the development of the Video Mash and Marinetti exercises. As you experiment, you&#8217;ll want to borrow some code that you know &#8220;just works.&#8221; We have some samples linked below, as well as some cool helper sites for generating code.<\/p>\n\n\n\n<p>In Dreamweaver, translate your idea to layout and code as you did for the Marinetti exercise.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up a new site named&nbsp;<em>cip20XX<\/em><\/li>\n\n\n\n<li>For your file name, use the following naming convention:&nbsp;<em>username_word.html<\/em>, where&nbsp;<em>username<\/em>&nbsp;is your school username and&nbsp;<em>word<\/em>&nbsp;is the random word you received. Your group may choose a different convention if you wish.<\/li>\n\n\n\n<li>You&#8217;ll find creating links to be tricky because the files are not yet uploaded. You&#8217;ll have to prefabricate a URL for each person with whom you share a word&#8230; that will be up to four URLs. Work together to make sure these are correct because if not, the links won&#8217;t work on upload!<\/li>\n<\/ul>\n\n\n\n<p>We will also develop the home page and common navigation div in iteration.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Good_basic_code_samples\"><\/span>Good basic code samples<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p><a href=\"https:\/\/www.freecodecamp.org\/news\/how-to-center-anything-with-css-align-a-div-text-and-more\/\" target=\"_blank\" rel=\"noreferrer noopener\">Centering anything in CSS<\/a>  |  <a href=\"https:\/\/www.w3schools.com\/howto\/howto_js_navbar_sticky.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Sticky responsive navigation bar<\/a>  |  <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/a\/aspect-ratio\/\" target=\"_blank\" rel=\"noreferrer noopener\">Using aspect-ratio CSS<\/a>   |   <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clip-path\/\" target=\"_blank\" rel=\"noreferrer noopener\">Clipping path in CSS<\/a>  |  <a href=\"https:\/\/css-tricks.com\/how-to-do-knockout-text\/\" target=\"_blank\" rel=\"noreferrer noopener\">Knockout text<\/a>  |  <a href=\"https:\/\/www.frontendhero.dev\/tutorial\/mask-text-with-image\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mask an image using text<\/a>  |  <a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Blend modes<\/a>  |  <a href=\"https:\/\/coderpad.io\/blog\/development\/everything-you-need-to-know-about-all-11-css-filters\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Filters<\/a>  |  <a href=\"https:\/\/createjs.com\/demos\/easeljs\/curveto\" target=\"_blank\" rel=\"noreferrer noopener\">Draw using JS<\/a>  |  <a href=\"https:\/\/createjs.com\/demos\/easeljs\/alphamaskreveal\" target=\"_blank\" rel=\"noreferrer noopener\">Erase using JS<\/a>  |  <a href=\"https:\/\/codepen.io\/philipgriffin\/pen\/rLZzXV\" target=\"_blank\" rel=\"noreferrer noopener\">Image swap using JS (on click &#8211; better for tap action on mobile)<\/a><\/p>\n\n\n\n<p>Many of these are demonstrated in <strong><a href=\"https:\/\/codepen.io\/williamCromar\" target=\"_blank\" rel=\"noreferrer noopener\">my CodePen<\/a><\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_helper_sites\"><\/span>Code helper sites<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Code generators and code advice on the web can help you bring your vision to life in the iteration stage. There are too many to list here but here are some of my current favorites:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clippy<\/strong>: A browser-based clip-path and polygon shape generator: <a href=\"https:\/\/bennettfeely.com\/clippy\/\">https:\/\/bennettfeely.com\/clippy\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>Text Flow<\/strong>:&nbsp;Using the shape-outside property: <a href=\"https:\/\/blog.logrocket.com\/creative-text-flows-using-css-shapes\/\">https:\/\/blog.logrocket.com\/creative-text-flows-using-css-shapes\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>Text Flow<\/strong>: Faking a &#8220;shape-inside&#8221; property: <a href=\"https:\/\/www.html5rocks.com\/en\/tutorials\/shapes\/getting-started\/#toc-inside-shape\">https:\/\/www.html5rocks.com\/en\/tutorials\/shapes\/getting-started\/#toc-inside-shape<\/a>&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Blend Modes<\/strong>: two kinds of blend properties explored here, mix-blend-mode and background-blend-mode: <a href=\"https:\/\/alligator.io\/css\/exploring-blend-modes\/\">https:\/\/alligator.io\/css\/exploring-blend-modes\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>Link Styles<\/strong>&nbsp;of many varieties: <a href=\"https:\/\/freefrontend.com\/css-link-styles\/\">https:\/\/freefrontend.com\/css-link-styles\/<\/a><\/li>\n\n\n\n<li><strong>Hover Effects<\/strong>&nbsp;for rollovers on color backgrounds and images <a href=\"http:\/\/www.corelangs.com\/css\/box\/hover.html\">http:\/\/www.corelangs.com\/css\/box\/hover.html<\/a>&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Embedding a Font<\/strong>&nbsp;in your website: <a href=\"http:\/\/www.fontsquirrel.com\/fontface\/generator\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/www.fontsquirrel.com\/fontface\/generator<\/a><\/li>\n\n\n\n<li><strong>Text Warp<\/strong>: functions like the text-to-path tool in Illustrator: <a href=\"http:\/\/csswarp.eleqtriq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/csswarp.eleqtriq.com\/<\/a><\/li>\n\n\n\n<li><strong>Transforms, Gradients<\/strong>, and other tools: <a href=\"http:\/\/westciv.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/westciv.com\/<\/a><\/li>\n\n\n\n<li><strong>Animation Generator<\/strong>: <a href=\"https:\/\/animista.net\/\">https:\/\/animista.net\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>CSS Animation Easing<\/strong>: You&#8217;ll never do ease-in-ease-out without beziers again: <a href=\"https:\/\/matthewlein.com\/tools\/ceaser\">https:\/\/matthewlein.com\/tools\/ceaser<\/a>&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>iFrame Generator<\/strong>: not exactly CSS but quite useful: <a href=\"https:\/\/www.iframe-generator.com\/\">https:\/\/www.iframe-generator.com\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>Button Generator<\/strong>: <a href=\"https:\/\/cssbuttoncreator.com\/\">https:\/\/cssbuttoncreator.com\/<\/a>&nbsp;<\/li>\n\n\n\n<li><strong>Tons of ideas<\/strong>: <a href=\"https:\/\/css-tricks.com\/\">https:\/\/css-tricks.com\/<\/a>&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>And if you don&#8217;t see a helper site here that gives you what you need, you can do a global search of hundreds of these and other tools at:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tiny Helpers<\/strong>: All the tools at one site: <a href=\"https:\/\/tiny-helpers.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/tiny-helpers.dev\/<\/a> <\/li>\n<\/ul>\n\n\n\n<p>This will be a highly visual, time-based, and interactive project, and it&#8217;s difficult to hold to accessibility standards, but these are some tools to help you understand accessibility issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.webaim.org\/techniques\/fonts\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Accessibility in Mind<\/a>&nbsp;&#8211; all about selecting fonts<\/li>\n\n\n\n<li><a href=\"http:\/\/www.typetester.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Typetester<\/a>&nbsp;&#8211; helps you compare screen fonts<\/li>\n\n\n\n<li><a href=\"http:\/\/juicystudio.com\/services\/luminositycontrastratio.php\" target=\"_blank\" rel=\"noreferrer noopener\">Juicy Studio Luminosity Analyzer<\/a>&nbsp;&#8211; helps you see the contrast between background and font colors (and many other tools on the <a href=\"http:\/\/juicystudio.com\/services.php\" target=\"_blank\" rel=\"noreferrer noopener\">Quality Assurance<\/a> page)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Synthesis\"><\/span>Synthesis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Upload and share the final work:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using&nbsp;<strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\">SFTP<\/a><\/strong>&nbsp;in Dreamweaver, upload your portion of the site to your server space. Make sure to follow the folder organization and naming conventions strictly!<\/li>\n\n\n\n<li>Your instructor will host the home page. Share the files so they can upload it to their server.&nbsp;<\/li>\n\n\n\n<li>Test drive the site after you upload it. Check all the links emanating from the home page. Check all the links from your page to the others.<\/li>\n\n\n\n<li>If there are any bugs, find them and fix them, or work with your colleague to fix them. Debug! Check the site all around to ensure links work, code files connect, and images don&#8217;t break. Debugging is part of the process. There isn&#8217;t a single project in the world that doesn&#8217;t fall prey to bugs. And never forget my favorite dad joke about coding:<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\"><strong><em>Q: What is the one language used by every computer programmer? <\/em><\/strong><br><strong><em>A: Profanity.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 3 | concrete poetry .code {is: poetry;} From the introduction to .\/code &#8211;poetry by Daniel Holden and Chris Kerr &#8220;Code is Poetry&#8221; is one of the evocative and thought-provoking taglines coined by WordPress, one of the most popular content management systems on the web \u2014 it&#8217;s the one we use for this wiki&#8230;. <a href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,12],"tags":[],"class_list":["post-5200","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-artwork"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>.code {is: poetry;} - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\".code {is: poetry;} - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-16T12:37:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T21:20:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\".code {is: poetry;}\",\"datePublished\":\"2023-12-16T12:37:41+00:00\",\"dateModified\":\"2024-01-11T21:20:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/\"},\"wordCount\":3994,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Artwork\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/\",\"name\":\".code {is: poetry;} - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-16T12:37:41+00:00\",\"dateModified\":\"2024-01-11T21:20:47+00:00\",\"description\":\"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/code-is-poetry\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\".code {is: poetry;}\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":".code {is: poetry;} - newMediaWiki","description":"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/","og_locale":"en_US","og_type":"article","og_title":".code {is: poetry;} - newMediaWiki","og_description":"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-16T12:37:41+00:00","article_modified_time":"2024-01-11T21:20:47+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":".code {is: poetry;}","datePublished":"2023-12-16T12:37:41+00:00","dateModified":"2024-01-11T21:20:47+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/"},"wordCount":3994,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Artwork"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/","url":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/","name":".code {is: poetry;} - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-16T12:37:41+00:00","dateModified":"2024-01-11T21:20:47+00:00","description":"Code is poetry: the Wordpress tag line is more true than they know. Create a collaborative concrete poem using HTML, CSS, and JS.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/code-is-poetry\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":".code {is: poetry;}"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=5200"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5200\/revisions"}],"predecessor-version":[{"id":6034,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/5200\/revisions\/6034"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=5200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=5200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=5200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}