(Some) Basic Array Methods

I first learned basic array methods several months ago. I learned them, I moved on, and I forgot them.

So – I didn’t really learn them. In fact, I could never remember the difference between pop and push, and shift and unshift. Which ones were additive and put more stuff in the array, and which ones were subtractive and took stuff away from the array? Which ones added elements to the beginning of the array, and which ones added elements to the end of the array?

Finally, I got fed up trying to remember these abstract words, so I made myself a cheatsheet that associated these new concepts with an familiar existing concept in my brain – a rainbow.

Note: this only covers, pop, push, shift, and unshift. There are more array methods to learn. Here are some resources:

Pop, Push, Shift, Unshift

Title Photo - 4 Basic Array Methods feat. Rainbows
Page 0 - Introduction to Arrays
Page 1 - Introduction to First and Last Elements of Arrays
Page 3 - Pop() Method
Page 4- Push() and Pop() check in
Page 5 - Unshift() and Shift() Introduction
Page 6 - Unshift() Method
Page 7 - Shift() Method

And the thing that confused me the most? Why “shift” and “unshift”?

Great question. Your guess is as good as mine. It was a big part of the reason why these four basic array methods were so hard to memorize.

Here is a good guess from someone on Quora.

And since it’s Quora, see next year, Harry.

Mindfull World

This post is dedicated to talking about one of my recent projects, Mindfull World. To note, this project is not yet complete in its vision, but is at the time of writing this, at a phased stopping point.

Because I ❤️ process, I’ll talk about that and also get include the HTML and CSS for parts of the project along the way.

First, there was…

While I wish this project involved some of the above (I guess it’s never too late?), it started after I discovered CSS loaders. I was playing around with them and decided to include one on Playfull World when realized I could nest CSS loaders inside one another.

Sweet, right?!

Phase I

I worked on it for a couple of hours and put it on Playfull World.

I left it up there for a week.

And another week.

HTML:

                    <div class="loader1">
                        <div class="loader2">
                            <div class="loader3">
                                <div class="loader4">
                                    <div class="loader5"></div>
                                </div>
                            </div>
                        </div>
                    </div>

CSS:

.loader1 {
  border: 10px solid #f3f3f3;
  border-top: 16px solid black;
  border-right: 16px solid black;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin1 8s linear infinite;
}

@keyframes spin1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader2 {
  border: 5px solid #f3f3f3;
  border-top: 8px solid black;
  border-left: 8px solid black;    
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin2 4s linear infinite;
}

@keyframes spin2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader3 {
  border: 2.5px solid #f3f3f3;
  border-top: 4px solid black;
  border-right: 4px solid black;    
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin3 2s linear infinite;
}

@keyframes spin3 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader4 {
  border: 1.25px solid #f3f3f3;
  border-top: 2px solid black;
  border-left: 2px solid black;    
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin4 1s linear infinite;
}

@keyframes spin4 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader5 {
  border: .625px solid #f3f3f3;
  border-top: 1px solid black;
  border-right: 1px solid black;    
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: spin5 .5s linear infinite;
}

@keyframes spin5 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Phase II

Then I just couldn’t stop thinking about it. I would go back and stare at it. 🤫

Eventually, I realized that’s because it was relaxing to watch and I felt that there were some unexpressed facets of the idea.

So what if it was bigger and modeled after a seashell? Like this:

the math of nature

Then the ideas cascaded from there:

  • Seashell->ocean->blue. What if it was blue?
  • Because I was modeling it after something in nature, I wanted it seem alive. What if it pulsed?
  • What if the pulse was at a cadence that was comfortable to breathe along with?
  • This seashell has warm pinks. What if there was a pink glow that accompanied the pulse?
  • The ocean makes sounds – why not create a song for it? (The tempo [BPM] of this song matches the pulse cycle in the visualization.) Click to listen to the song on my Soundcloud.

I took out the song, but the rest of the ideas stayed. I called in Breathe.

I hosted it on my portfolio and brushed my hands off. I done with the seashells and the ocean and the math and all that.

the math of inspired-by-nature thing

HTML:

    <div class="singularity">
        <div class="loader1">
            <div class="loader2">
                <div class="loader3">
                    <div class="loader4">
                        <div class="loader5">
                            <div class="loader6">
                                <div class="loader7">
                                    <div class="loader8">
                                        <div class="loader9 gradient">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

/* animation stylings */

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 13rem #ffdcdc;
    }

    25% {
        -webkit-box-shadow: 0 0 34rem #e4a0f5;
    }

    50% {
        -webkit-box-shadow: 0 0 89rem #ff77a7;
    }

    95% {
        -webkit-box-shadow: 0 0 21rem #ffdcdc;
    }

    100% {
        -webkit-box-shadow: 0 0 13rem #fff;
    }
}
}

@keyframes glow {
    0% {
        box-shadow: 0 0 13rem #ffdcdc;
    }

    25% {
        box-shadow: 0 0 34rem #e4a0f5;
    }

    50% {
        box-shadow: 0 0 89rem #ff77a7;
    }

    95% {
        box-shadow: 0 0 21rem #ffdcdc;
    }

    100% {
        box-shadow: 0 0 13rem #fff;
    }
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1618, 1.1618, 1.1618);
        transform: scale3d(1.1618, 1.1618, 1.1618);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1618, 1.1618, 1.1618);
        transform: scale3d(1.1618, 1.1618, 1.1618);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/* general loader stylings */

.singularity {
    position: fixed;
    margin-top: 100rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* loader circle stylings */

.loader1 {
    border: 46.943rem inset rgb(145, 212, 245);
    border-radius: 50%;
    width: 487.687rem;
    height: 487.687rem;
    animation: spin1 487.687s linear infinite, pulse 8s ease-in-out infinite, glow 8s linear infinite;
    background: rgb(255, 255, 255);
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(215, 240, 252, 1) 53%);
}

@keyframes spin1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader2 {
    border: 29.013rem inset rgb(98, 186, 221);
    border-radius: 50%;
    width: 301.414rem;
    height: 301.414rem;
    animation: spin2 301.414s linear infinite;
}

@keyframes spin2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader3 {
    border: 17.932rem inset rgb(71, 164, 201);
    border-radius: 50%;
    width: 186.288rem;
    height: 186.288rem;
    animation: spin3 186.288s linear infinite;
}

@keyframes spin3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader4 {
    border: 11.083rem inset rgb(42, 145, 186);
    border-radius: 50%;
    width: 115.135rem;
    height: 115.135rem;
    animation: spin4 115.135s linear infinite;
}

@keyframes spin4 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader5 {
    border: 6.85rem inset rgb(24, 129, 170);
    border-radius: 50%;
    width: 71.159rem;
    height: 71.159rem;
    animation: spin5 71.159s linear infinite;
}

@keyframes spin5 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader6 {
    border: 4.234rem inset rgb(13, 115, 155);
    border-radius: 50%;
    width: 43.98rem;
    height: 43.98rem;
    animation: spin6 43.98s linear infinite;

}

@keyframes spin6 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader7 {
    border: 2.617rem inset rgb(6, 106, 145);
    border-radius: 50%;
    width: 27.182rem;
    height: 27.182rem;
    animation: spin7 27.182s linear infinite;

}

@keyframes spin7 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader8 {
    border: 1.618rem inset rgb(0, 98, 137);
    border-radius: 50%;
    width: 16.8rem;
    height: 16.8rem;
    animation: spin8 16.8s linear infinite;

}

@keyframes spin8 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.loader9 {
    border: 1rem inset rgb(0, 55, 76);
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    animation: spin9 10s linear infinite;

}

@keyframes spin9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.gradient {
    background: linear-gradient(-45deg, rgb(144, 213, 247), rgb(144, 213, 247), #ffdcdc, #ffdcdc);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

Phase III

However, I was not done with the song, which had prompted more thinking about movement.

So I created a counterpart to Breathe, called “Move.”

I made only a few modifications – just the color palettes, shapes (in animation, square characters project solidity and strength, a more fitting shape than circles for something dedicated to movement), and the timing of the pulse cycle.

It had more energy.

This was something I could look at and feel inspired to start moving my body.

Once again, I hosted it on my portfolio and brushed my hands off. I was fairly happy with it and really done looking at the pink.

the math of an inspired-by-nature thing 2

Phase IV

After a couple weeks, I came back to Breathe and Move. It bothered me that they were both floating out there on my portfolio without a common landing page, despite being so related to each other.

I started thinking about what they had in common and came up with this list:

  • Mindfulness
  • Presence
  • Connection

This image (essentially as it appears below) came to mind, so I created very first iteration of Mindfull World.

And that brings us to today and the live version of Mindfull World.

To wrap things up, some parting thoughts…

Final Thoughts

Flow

I really loved making Mindfull World because I got deep into the creative flow state. All of the hours flew by. I am passionate about mindfulness, being connecting to one’s body, and art – this project was a combination of so many of my interests. In case you haven’t heard of the flow state:

[The flow state is a] trance-like altered state of total absorption and effortless concentration…

BBC Article

“There’s this focus that, once it becomes intense, leads to a sense of ecstasy, a sense of clarity: you know exactly what you want to do from one moment to the other; you get immediate feedback. You know that what you need to do is possible to do, even though difficult, and sense of time disappears, you forget yourself, you feel part of something larger. And once the conditions are present, what you are doing becomes worth doing for its own sake.”

Mihaly Csikszentmihalyi, TED Talk, 2004

That TED Talk is amazing, as is Csikszentmihalyi’s book. Check it out on Goodreads.

Agile

Secondly – I applied concepts to this project from the Agile Manifesto! Who knew that was possible?! There were so many directions I wanted to go with Mindfull World. Most ideas, I set aside for the future so I could release something in the present. To achieve a more Agile approach, I:

  • timeboxed my work
  • created goals for each increment of work
  • focused on delivering and releasing
  • practiced incremental and iterative development
  • kept coming back to my favorite Agile principle: Simplicity–the art of maximizing the amount of work not done–is essential.

Sometimes, planning is not great

Lastly – self-imposed creative parameters/themes/rules are useful… but only to an extent. I spent several hours trying to make the colors fit within the mathematical schema I had planned for the entire project, and it just didn’t work out. I could’ve saved myself a lot of time (and been kinder to myself) if I had been a less rigid about making my creation fit into these parameters I had established for myself and the project.

Sometimes, it is better to just let go.

And breathe.

🍵

Experiential Learning Theory and Coding

This post introduces a useful tool I discovered for reflecting on my own learning process. Education is full of paradigms, theories, and tactics – as a former educator, I am familiar with some of these and never thought to use them as self-reflection tools, as a learner of programming, until recently.

What is Experiential Learning Theory (ELT)?

Experiential Learning Theory (ELT) is a learning modal established by David A. Kolb, in which reflective observation is a critical component of the learning cycle.

In this model, Kolb defined learning style on a two-dimensional scale based on how a person perceived and processed information. How a person perceived information was classified as concrete experience or abstract conceptualization, and how a person processed information was classified as active experimentation or reflective observation (Simpson & Du, 2004).

Accordingly, Kolb (1985) described the process of experiential learning as a four-stage cycle involving four adaptive learning modes: Concrete Experience (CE), Reflective Observation (RO), Abstract Conceptualization (AC), and Active Experimentation (AE). CE tended towards peer orientation and benefited most from discussion with fellow CE learners. AC tended to be oriented more towards symbols and learned best in authority-directed, impersonal learning situations, which emphasized theory and systematic analysis. AE tended to be an active, “doing” orientation to learning that relied heavily on experimentation and learned best while engaging in projects. RO relied heavily on careful observation in making judgments.

Kolb (1985) also identified four learning style groups based on the four learning modes: Divergers favored CE and RO, Assimilators favored AC and RO, Convergers favored AC and AE, and Accommodators favored CE and AE.

Source: The Relationship of Kolb Learning Styles, Online Learning Behaviors and Learning Outcomes
Author(s): Hong Lu, Lei Jia, Shu-hong Gong and Bruce Clark

Four Stage Learning Cycle

Source: https://www.simplypsychology.org/learning-kolb.html

Four Adaptive Learning Modes

Source: https://www.simplypsychology.org/learning-kolb.html

Four Learning Styles

Active Experimentation (Doing)Reflective Observation (Watching)
Concrete Experience (Feeling)Accommodating (CE/AE)Diverging (CE/RO)
Abstract Conceptualization (Thinking)Converging (AC/AE)Assimilating (AC/RO)
Source: https://www.simplypsychology.org/learning-kolb.html

Who am I?

I express an innate preference for the Converger learning style: abstract conceptualization into active experimentation (ahem, Playground).

These students [Convergers] are motivated to discover the relevancy or the “how” of a situation. Application and usefulness of information is increased by understanding detailed information about the system’s operation.

Source: https://web.cortland.edu/andersmd/learning/kolb.htm

Ain’t that the truth.

However, I would like to gain a slightly more balanced learning approach by integrating more reflective observation experiences. This means chatting with folks about what I’m learning and writing more about what I’m learning as part of that social outreach. This way, I can be aware of my innate preferences, but also push myself to learn in different ways to increase my knowledge retention.

Final Thoughts

The theory considers learning styles to be on a mutable continuum, with learners perhaps expressing one preference or another but able to shift and move around on the continuum throughout their lives. I am drawn to this theory for multiple reasons, this being one of them.

My intent as a learner is to develop a habit of checking my assumptions and unconscious preferences as I learn programming (and just about anything). I feel this is a vital skill in the information age.

What lies at the heart of every living thing is not a fire, not warm breath, not a “spark of life.” It is information, words, instructions. If you want a metaphor, don’t think of tires and sparks and breath. Think, instead, of a billion discrete, digital characters carved in tablets of crystal. If you want to understand life, don’t think about vibrant, throbbing gels and oozes, think about information technology.

-Richard Dawkins

As the quantity of information continues to increase over time, there are few more important skills than learning how to learn in the most efficient way possible.

Additional Resources