Building ‘Iceland: Textures & Landscapes’

Iceland: Textures & Landscapes is a study in creating a truly resonant work. It aims for resonance of content, aesthetic and build. Photographic works from Iceland are displayed in themes of listening deeply, stillness, and reflection. The website they are presented on and its code also seek to be as minimal and beautiful.

Sketch depicting resonance.

The following storytells the passage of this project.

Content

Cold fingers, changing lenses. Solo travel can conjure things in you — somewhere and somehow, I understand that I’m on a deeply explorative, immersive art trip. “Iceland: Textures & Landscapes” — I can see it in my head. The feat takes me out of bed, up bright and early, driving through rugged terrain, navigating many, many, new and different scenarios.

Scary driving.
Beautiful scenery.
A moody road.

I sit atop a large, grey mountain, eat my sandwich, and consider: “Am I crazy?” I’m the only one around for miles and miles, as far as I can see. Thankfully, later that day, two Irish girls run into me. Similar thoughts when I land at a farmhouse for the night, advertised as a BYO sleeping bag dorm. Indeed, it is, however, I am the only one there. Wait, so — middle of nowhere, Icelandic farm, literal bales of hay, creek, tractor? Thankfully, nothing unfolds like a bad 90’s horror film.

I enjoy being in nature very much. Iceland is incredible; vast, expansive, sonorous. You can not help but feel in total supplication of the environment, the majesty of nature. There are so many periods where you can marvel at being totally alone amongst stunning cliffs, ice, snow, gorges, waterfalls, caves. There is a sacred lull of and captivation to nature that we all know about. I’m fortunate and grateful to be a traveller to this place.

My choice is to shoot fixed, on film. This constrains the content nicely. I don’t depress the shutter until I am 200% convinced that I have magic in my hands. It’s a feeling. This means I may go on a 10-hour hike and have one, two images. It may mean I’m looking at the ground at a tourist site, and have 2 minutes before the group rushes off, and take five pictures I love in a row. Basically, I’ll stand there for a couple minutes, peer into the viewfinder, consider for half a minute whether I like the image or not, inspect it through my narrower lens, then inspect through my wide lens. If it isn’t quite right, I may get on to my tippy-toes or find something to stand on to get it from above. I’ve walked kilometers to get to the right side and view of the mountain, waded knee-deep in water, etc. Only when I know in my bones that I have a winner do I take the image.

In an art sense, I believe I am influenced consciously by a few things, and subconsciously by many things. The look of water, the light of sound — how does one describe these things? I’ll do my best to collect influences.

First, it would be an overt failure not to mention Agnes Martin. I was exposed to Agnes earlier that year at a retrospective at Guggenheim, New York. Across the board, I am conscious of her exact influence. It may also be a case that the narrative she presents brings together nicely many of my own thoughts and latest learning experiences. In any case, I fell enamoured with both her approach and her artworks. Most simply, Agnes conjures the image in the mind before painting it. It is like that she is in meditation, then paints. For example:

“When I first made a grid, I happened to be thinking of the innocence of trees and then this grid came into my mind and I thought it represented innocence, and I still do, and so I painted it and then I was satisfied. I thought, this is my vision.”
untitled #3, 1974

She is known for saying: “My paintings are not about what is seen. They are about what is known forever in the mind.” There is a beautiful element that discusses formlessness, too. When you are looking into the sea, when you are gazing into the clouds — how does it feel? These elements are formless, yet they rouse such a feeling.

morning, 1965
“My [artworks] have neither object nor space nor line nor anything — no forms. They are light, lightness, about merging, about formlessness, breaking down form. You wouldn’t think of form by the ocean. You can go in if you don’t encounter anything. A world without objects, without interruption, making a work without interruption or obstacle. It is to accept the necessity of this simple, direct going into a field of vision as you could cross an empty beach to look at the ocean.”
falling blue, 1963

Last, I enjoy Agnes because I understand the process of ‘seeing in the mind then doing’ as a vote of positive freedom. It’s a concept I learned about in an undergraduate course I took called ‘Politics, Philosophy, and Economics’. It’s like this: there is a fork in the road, and you get to pick whether you go left, or right. Alternatively, there is no road: carve out a path that you want to go. Agnes talks about ‘painting above the line’. She means this to say she will only paint things she positively asserts (e.g. thinking of joy, a morning). Not necessarily to avoid the negative, yet, to state positively.

My second conscious influence is an exploration of Buddhist concepts that have gradually come into my life. Next, a wonderful photographer and friend Siah Patterson and our conversations. Then, travels in nature in Fiji and Hawaii after graduating, followed by the museums I saw in NYC.

In saying this, an art friend mentioned that the images reminded him of the Korean movement ‘dansaekhwa’. A quick Google image search and you’ll totally get it. Because of what I’ve told you about my influences, and now disclosing the fact of a Korean mother, it may be little surprise. In fact, I spent the hardest winter of my life (cold, desolate) in Korea, and I believe it marks the beginning of my visual art life. Nevertheless: a little and great victory to see others on a similar page.

Here are some final suggestions. On the website, you will see that the title text changes for the last two slides (in the forwards direction only). Here is where consciousness ends and subconsciousness may just begin. Somewhere in memory floats a sentiment from a letter of a friend, travelling in China. He writes:

“Today I saw natural beauty from the northern peak. I walked through the foreign forest and my the native forest of my childhood memories. I entered the solitude of nature, then came back to the kindness of strangers.”

From Rumi:

“I looked in temples, churches, & mosques. But in my heart, I found the divine.”

Most equivocally: this poem from the classic film Love Jones. Please listen to Nina’s heartfelt rendition here.

Aesthetic

For another website, I coded a full-page slider that goes up and down as well as left and right to switch photo stories like switching lanes! The more I thought about it though, for this project, I couldn’t really get my head around either:

a) Having one whole slide, the first slide, dedicated to showing the title and potential navigation for the user, or

b) Putting text over an image to achieve said effect…

I enjoyed the ‘art gallery’ feel of a lot of white space around. I knew I wanted a minimalist interface. Then?

First test

My first site had a title and said slider. You could click on the slider to advance the image. It only advanced. Unfortunately, I was still bold enough to approach others at my work space with my laptop. The common experience was: A few seconds of looking. Trying to scroll. Hovering over the title. Hovering over the slider. Finding it clickable. Clicking. They liked the pictures.

This was a great way of learning that a slider presents two things:

1. A need to know it’s a slider
When a user sees a picture, least energy says it’s just a picture. These days, common signifiers (to use some lexicon from Don Norman’s Design of Everyday Things) are:

a) Little dots

b) Little previews

c) Little arrows

d) The whole slider is shown — remarkable!

e) It moves itself — usually accompanied by at least one of the above.

2. How to use it (to advance, reverse slides)
In most cases you can click on the dots, previews, or arrows. Personally, I find myself trying the arrow keys as well. One unique approach I found involves the cursor changing to an arrow upon hover over the slider. On the right-hand side, the cursor changes to a right arrow, on the left, the cursor changes to a left arrow.

Developing the UI and UX

I trial:

a) Icons. They’re cute, I guess.

b) Text. It’s direct.

I contemplate arrows. For a site where I just have a title and a slider, introducing arrows would kind of make it a third of what’s on the page. It may be a small thing; I wanted less.

I receive feedback from design friends that they prefer the text. It’s less gimmicky; in fact, I hear we are now living in a ‘text-based’ world, and it’s completely OK. I decide to show the text as the user explores hovering over the slider; the text fades in and out from the title. For mobile, instructions simply appear on load of the site and disappear after a few clicks or swipes.

To this, I add a counter. I have the hopes it supports the first requirement: to show it’s a slider. If a user sees we’re at 1/32, I hope they get that there are 32 pictures in total. Feedback is positive.

Somewhere in this process, I’ve also conjured the layouts for different devices. The mobile portrait design mimicks the ‘portrait’ (narrower) desktop layout where the title, the slider, and the counter is displayed in a column. Users rotate the phone to then view the images full-screen.

On a desktop, users can use arrow keys or click to advance. I start with click to advance for mobile, then quickly also adopt the swipe.

Build

Investigation

Where to begin? On one hand, frameworks such as Ruby on Rails and Bootstrap were suggested to me. On another hand, I’d also received advice that they might not be necessary for such a simple project. At the time, I had only a bare understanding of these frameworks. I understood the fundamentals of Javascript, teaching myself via Udemy, but had not yet written code that involved Javascript with HTML and CSS, or basically, really developed for the web.

To be honest, I can’t totally remember how or why I began looking at custom slider implementations. It may have been that I simply didn’t like any sliders I found via Ruby on Rails or Bootstrap. It may have been that I was super eager and wasn’t certain if the frameworks were worth the learning effort/could cause convolution. It may have been that they didn’t fit my initial vision — I’d wanted my entire background to be a slider and to build on top of it, rather than feature a slider on a page. Finally, it may have been a preference towards understanding one thing at a time than quickly finding myself in code bloat and complication. Looking back, it now seems obvious I’ve done the right thing coding from scratch, especially if the aim is minimalist code, yet, I grant there would have been equal amounts of learning on each side of the decision — so I wouldn’t have been fussed.

I reasoned theoretically there’d be three kinds of slider builds:

a) All slides load horizontally across page, scrollbar hidden, only the ‘active’ slide is shown. (Guangyi, Very Simple Slider, Kevin Foley)

b) All slides load stacked on top of each other, CSS is used to manipulate view states so only one slide is shown at a time e.g. via the opacity or display property. (Super. Simple. Slider)

c) JS is used to dynamically load and remove slide content. I found this didn’t really exist, probably due to practical performance reasons.

Reading various code on the internet was tricky at first, primarily because of the different styles used. Quickly, I found myself an incredible tutor, Dr. Pete Markiewicz of the University of California Los Angeles. In my first week, I learned about JS design patterns. For instance, I loved finding Addy Osmani’s Learning JavaScript Design Patterns. Here are some notes I’ve found from this period:

  • How do you know which pattern you need? If you know which pattern to look up you are likely already close to the solution…
  • Beginners’ confusion with JS can stem from not being able to ‘see’ contexts, blocks, machinations. Having the right mental model goes a long way!
  • I’d like to know more about coding patterns in JS that are popular because they simulate object-oriented patterns or because they are true JS-like.
  • People love Douglas Crockford!

Build 1

I went ahead with a CSS-type build that manipulates opacity as well as an HTML class field to show one slide at a time. Because my mind was in learning and thinking about design patterns, I coded an ‘objectless.js’ as well as an ‘objectful.js’, based on what I’d seen in ES5. Now, because I have only one ‘object’, I reason that I go ahead with the ‘objectless’ style.

From here, everything evolves. I go on a bloodthirsty (yes, I could really describe it this way) hunt to learn everything I can on JavaScript/programming paradigms, methods, principles. If I want to claim my code is minimal, well, it better really be to the ultimate best of my knowledge, for as far as I can find out. I’m reminded of the Bruce Lee quote: “Absorb what is useful, discard what is not, add what is uniquely your own.”

The hunt

I do everything from structure in MVC to write ‘smart’ objects to explore types of prototypal inheritance. I arrange my program in pub-sub. I learn some functional programming. I sit, for many hours, considering abstractions of the build.

UI elements and user actions.
next() and previous() increment/decrement the slider index, with the effect of changing the slide showing, the title text, and the counter.
Desired functions for mobile vs. desktop, then its orientations.

The above is ultimately how I view things. I went with this declarative approach at end where I decided to simplify by simply stating what I wanted, as the designer. In other words, I spoke my program. I told what I needed to do. Hey, isn’t this similar to the Agnes Martin? Therefore, the program is an extension of my logic. It is innately my mindset. It is natural in the way it comes from my perception of needs and design, therefore, also hopefully feels comfortable, natural, and easy, now not just to the users but future programmers (or myself) using this code. One and the same. Where I humanly fall, it falls; where I rise, it rises.

“There is a slider of pictures. A title accompanies it. You can go next, previous. There’s a counter. It advances with the slides. To help people understand how to use the slider, there’s a signifier. For mobile and desktop, the views are slightly different. They also change on device orientation. So, the orientation and the device are also implicit user calls. We want the title to change on the last two slides, so make it that the title checks itself for every slide change. etc.”

In the process of ideating abstractions, I came up with many wild and wonderful schema. For example, below I organise each UI item as an item with a content element and a display element. On some cue, such as the index changing, each item has knowledge of how to display. I can then run some cute function like loadContent(), renderDisplays() to set up the entire site.

index = Int
slider = [slides]
onNext -> index++
onPrevious -> index--
title, counter, signifier, slider = (content, display)
display = {
onIndex: {},
onUI: {},
onDevice: {},
onOrientation: {}
}
onMobile -> 
onLandscape -> show one way
onPortrait -> show another way
onDesktop -> 
onLandscape -> show one way
onPortrait -> show another way
onFullScreen -> show full-screen

A peace

Finally, I decide: OK. I know myself. I’ve got this. There is a time for one thing, there is a time for another. I write for what this situation calls for. The proposed solution contains no explicit frameworks e.g. MVC, revealing module pattern. It does strive to follow an abstraction in the simplest way. The thought is that this code is then easily reviewed and re-structured as necessary. There’s also a full-screen function (not yet accessible via UI) to test the robustness of the code. Check it out here on Github.

Calls I’ve made

To load files via server-side code or insert them explicitly?
Insert them explicitly. This refers to the image files for the slider. While having code dynamically look up and load files is a cool idea, KISS — I’m not likely to change my slider order or content much.

Writing a pub-sub type emitter or explicitly linking together functions?
Insert them explicitly. We have a pseudo-emitter in there for when the index changes. It then tells the relevant elements to change based on the index. I figure it’s the same as any other type of emitter right now because there is no privacy/model structure to the code. Eventually, an emitter has to know where and how to link.

To pass variables around or create global variables?
Hm. I already know the answer to this one. My response to this is — yes, we can get to it when we consider relevant frameworks. Taking a step back, I wonder what kind of security or good practice is needed for a program of this scale and purpose. Is it apt to have all out in the open, when no other programs are expected to interface? What does minimalism vs. good practice mean? You tell me.

To change views by CSS media queries or use alternate CSS files?
CSS media queries for now. Here we’ve the approach of delegating as much as possible to CSS media queries and wherever we can’t, we do via JS. I’m on the fence if this is a good approach. I’m influenced by perhaps something I’ve read that using multiple CSS files is shameful. On the other hand, I see its benefits. The view change per device/orientation is explicit as read from the JS file. I’ve experimented by adding the desktop full-screen function, which can be initiated by pressing ‘Enter’ and closed by hitting ‘Escape’. This is a view change that is inaccessible by CSS media queries because it is a user option on the same browser size. There are now CSS changes made via JS. If we were to add many other view changes, I propose it’d be cleaner and more consistent to create separate CSS files called in the JS. I’m uncertain whether it would perform adversely or be more error-prone.

To use ‘if’ statements or not…
Yes, a few. An emitter was trialled so that ‘if desktop or mobile’ and ‘if portrait or landscape’ was removed. This simply passed the if statement on to another part of the code.

Last, some of what is on the schema/abstraction could be eliminated by delegating to the DOM. The DOM could be: slider, title, mobile-signifier, desktop-signifier, counter. In this case, we wouldn’t have to set separate signifiers. The DOM could also be: bounding-box-for-desktop, bounding-box-for-mobile, etc. This means less DOM restructuring for a view in desktop. The specificity has to exist somewhere, therefore, this decision is much of a muchness. Here, we have chosen to continue keeping the DOM as clutter-free as possible. This encourages manipulating the DOM via JS, which may prove simpler and more sustainable for future iterations.

** Update: went with bounding-box-for-desktop ‘left-box’ in DOM.

Going further

Here is a reflection I’ll share from the 27th of May, 2018:

OK, have now hammered away here and there, altogether feeling a little frustrated that while I definitely have something that is nicer, it doesn’t feel like the magnum opus, angels harking from heaven-type solution I was hoping for.
On one hand, I’m thinking — is it because web dev is necessarily messy? No, I don’t think so. What is true is that I built to match my aesthetic/UI demands, and not for code minimalism first. My site would probably look a little different if it were that way. In this project, I gave myself the liberty of designing how I liked, and the code takes the slack.
To reach the true aims of my project, that is, a truly resonant work, I may be able to reconsider the UI and the code as a whole, together. In fact, I’ve a good feeling that this is where the answer lies.
In another level of reflection, I’m now reminded of Michelangelo’s work where the art, the human body statues, are emerging out of stone. This suggests the art (the ultimate solution) has always existed and is simply waiting to be uncovered.

I like that I’m able to unearth lessons like these by persisting for a certain standard, quality.

things. that should be asked. 
often. in every type of. 
relationship. 
how is your heart. 
is your breath happy. here. 
do you feel free.
- nayyirah waheed

I’ve an inkling of a solution that ‘breathes’. To detail a small technical example, one can horizontally center for all view versions, reducing one point of complexity (albeit it is only one point amongst any other point). For now, I’m content with where the project is at. Given the next bunch of time, I’ll draw out a solution!

Reflection

Altogether, I’m happy with where the project is and what I’ve learnt. I’m happy I’m able to show my photos from Iceland in my own, cool way. I appreciate the autonomy of knowing how things work and how to build things to then create positive expressions. I reflect that I may just have that right little combination of stubbornness to ideals/standards and eagerness to please/communicate/inspire/be accessible to others that the job demands. I like that I reached out to others for help, advice, and feedback.

In the future, I’d also like to consider these points. First, considering that I am quite thorough and learn quickly, I’d like to pick my battles wisely, and therefore how I spend time. Second, I’d love to work with many others. This project could have developed much faster or in a better way with greater feedback and expertise. Then, there is also the balance of context (interacting with peers, getting to market) that improves the overall health of the work.

On a spare afternoon, I was inspired to write a piece that is slightly different in style. You can read it here. Avanti!

Thank you’s

Dr Pete Marckiewicz
Friends