DEV Community: may arden

ZenDesk Customer Help Application

may arden — Thu, 10 Feb 2022 00:54:25 +0000

The need here is for there to be a platform upon which Clients can contact Customer Support directly regarding their ticket purchases. In order to achieve this, there must be a client-facing UI which offers message board-like functionality for the Customer Support to respond to Client comments and complaints.

The solution this ZenDesk Course offers is a Customer Help Application on the ZenDesk Application Framework (ZAF) which uses HTML, CSS, Ruby and async JavaScript.

In order to build this application, one must first confirm that one has the latest version of Ruby installed on their machine ruby -v, gem install rake for database management, install ZAT gem install zendesk_app_tools and initialize a new application on the ZenDesk framework using the command zat new.

There are three crucial elements: the manifest.json file is located in the root directory and includes administrator information and validations. The assets directory includes the logo files and the iframe.html which is the Document Object Model. The third crucial element is the translations folder located in the root directory.

The first step is to create an instance of the ZAF Client Object ZAFClient.init() by assigning it to the variable client

var client = ZAFClient.init();

The following steps include adding event listeners, fetching information about tickets from external APIs, building the user interface using CSS, and packaging, validating and uploading the application to the ZenDesk Marketplace.

controlled forms in react

may arden — Mon, 25 Oct 2021 17:58:15 +0000

A controlled form is used to submit data to be persisted to a database that derives its input value from state. The alternative to a controlled form is an uncontrolled form, in which the data is handled not by state but, instead, by the DOM. Simply put, in a controlled form, state is aware of the characters being typed into any given form field at any given time. If a controlled form had a parenting style, it would be a helicopter parent, where an uncontrolled form would be a mega-chill and sort of 'hands off' parent, not totally paying attention but still kinda' there.

One good way to tell the difference between a controlled form or uncontrolled form, is to check for value or for defaultValue. If the component has a value prop, it is a controlled component. If it does not have a value prop, it is an uncontrolled component. An uncontrolled component can optionally have a defaultValue prop set to its initial value -- but -- if the component has a value prop, it is a controlled component.

How does it work, you ask? Let's walk through. I arrive at a browser window which is rendering a controlled form. It wants my first name.

The current state looks like this

   state = {
       name: '',
   }

I start to type my name, I hit the letter 'M' on my keyboard. Now, state looks like this

   state = {
       name: 'M',
   }

I continue typing my name, but then I accidentally hit the wrong key. state looks like this now

   state = {
       name: 'Mau',
   }

I realize my error. state looks like this,

   state = {
       name: 'Ma',
   }

and I correct my mistake. state looks like this.

   state = {
       name: 'May',
   }

Before I even press the 'submit' button on the form, state already knows my name. That's accomplished through the following event handler

handleChange = e => {
       const { name, value } = e.target
       this.setState({
           [name]: value
       })
}

Which is invoked inside of the controlled form by the event listener on line five

    <form onSubmit={this.handleSubmit}>
      <label>your name:</label>
      <input type="text">
       value={this.state.name}
       onChange={this.handleChange}
       name="name"/>
      <br/>
      <input type="submit" value="submit"/>
    </form>

These guys work together and say "as soon as there is a change in the form field, we're going to handle that change by passing and destructuring the data provided in the form field and setting it equal to the current state".

Pretty cool.

Now that I've entered my name, I'm ready to hit the 'submit' button. Here we have another event listener & handler ready to send the data from the form field to the database and reset state

handleSubmit = e => {
    e.preventDefault();
    this.props.addPerson(this.state)

    this.setState({
        name: ''
    })
}

This event handler is invoked inside of the controlled form when I press the 'submit' button. My name is then couriered to the database, and state looks like this again now, just like it did at the beginning

   state = {
       name: '',
   }

Why do we do it this way? Controlling forms makes it more convenient to share form values between components. Since the form values are stored in state, they are easily passed down as props or sent upward via a function supplied in props. Another reason controlled forms are preferred is that uncontrolled forms typically yield code that is not DRY. In an uncontrolled form, one may access the form data within the event -- that is to say, the data is available

handleSubmit = e => {
 e.preventDefault()
 const carMake = e.target.children[0].value
 const carModel = e.target.children[1].value
 this.persistDataToDatabase({ carMake, carModel 
 })
}

but, it is just not quite as efficient, or elegant as the alternative, a controlled component.

handleSubmit = e => {
 e.preventDefault()
 this.persistDataToDatabase(this.state)
}

Thanks for reading!

javascript, html, css, production design

may arden — Fri, 21 May 2021 20:41:19 +0000

I began learning JavaScript and immediately struggled to synthesize the concepts. I realized that I needed to further develop my understanding of HTML and CSS, because the three languages work together like a jigsaw puzzle.

They are all components of styling and interactivity, similar to the design of a stage production. They are all integral parts of composing a compelling user experience which, at its essence, is storytelling. Just as in an opera or other type of stage production the set design, costuming, and lighting are all essential parts of bringing characters to life, the frontend languages of computer programming allow users to engage with the virtual realities we developers weave.

The other metaphor I found myself delving deeply into is that of the DOM tree, and its nodes. The word node comes from the Latin nodus ‘knot’. It is in these knots where further branches extend, creating a veritable ecosystem which can easily grow into a brambly mess if you aren’t paying attention. For me, I found that when I lost track of my

’s, things got messy.

Building, hedging, trimming and styling with attention and care proved to be the most effective way of managing front end development. Any time I began coding without intention or focus, I inevitably ended up making some kind of mistake or creating some type of bug, simply through inattention. Any time this happened I stepped away, took a breath, and reviewed my notes regarding the design narrative for my application.

For this project, because JavaScript was developed in 1995 I wanted to use Times New Roman because it harkens back to those days. I wanted to use Millennial Pink as the background, because Millennials are into VaporWave and mid90s culture and aesthetic. I wanted the application to look clean, and minimal, and I wanted to make it look similar to Instagram.

Just as it is with backend development, where you need to go in with a strategy to manage the way in which your data will be structured, so too must you approach front end development with a strategy to manage your narrative structure.

miching

may arden — Fri, 20 Nov 2020 18:48:12 +0000

When I set out to build my command-line interface application, I knew I wanted to find an application programming interface which was related in some capacity to music. After some research, combing through lists of free API's, I still hadn't found something which resonated which me. A moment later, though, I typed in the words 'baroque music API' into the Google search box and lo! OpenOpus.org was one of the first results.

As I began examining the metadata contained within the OpenOpus API, I recalled how struck I'd been in a recent lesson in which I discovered .sample -- a Ruby method which allows you to extract a random value from an array of data. I remember being moved by that particular concept, because as when one rolls dice, picks a random card, or flips a coin, what are the forces at play in determining what side of the coin falls, or which side of the dice is on top? Plainly, when a machine makes a random selection, how does it do that?

Since Bach was a numerologist, deeply spiritual, but also intensely analytical, I decided to build a little cleromancy machine which would receive a genre name (chamber, keyboard, orchestral, or vocal) as user input, and then use .sample to spit out a 'random' title of a piece by Bach which fits into that genre.

Another facet of random selection that interests me is the way one can use games or activities of chance within structured parameters to increase or enrich creativity, as with Brian Eno's Oblique Strategies -- a deck of cards, upon each is an insight or a directive for musicians and producers when they are working in the studio and get stuck. For instance, one might draw a card which says 'use an old idea', or 'honour thy error as hidden intention', or 'what would your closest friend do?'. These cards were inspired in part, I've read, by the I Ching, an ancient Chinese tradition of cleromancy.

hello world

may arden — Sat, 31 Oct 2020 06:55:48 +0000

"unspoken feelings are unforgettable"
andrey tarkovsky

My romance with the computer started early. Entering commands into the MS DOS command portal, tapping with my chubby little fingers, not sure what was happening because it felt like magic. Next came the Logo Turtle, an early digital music production program called Sessions, Oregon Trail, Myst, Riven, X-Wing, and a little known (but wildly entertaining) game called Wrath of the Gods in which the lo fi pixelated player must inhabit the roles of various Greek heroes and amble about the Grecian countryside slaying Medusa, stealing the Golden Fleece, defeating the Minotaur and sleuthing his way between the clashing rocks.

I took a class from a woman in college where we read PKD, Margaret Atwood, Ursula K. Le Guin and William Gibson all year long. She had a background in Medieval Literature, and her lectures tied Beowulf to Ridley Scott and back to Sappho. My excitement for futurism intensified.

When I learned about Luigi Russolo, the Futurist movement of the early 20th century, and their intonarumori, the mechanical ancestors of the analogue and digital synthesizers we use today, I felt a yearning to dig my fingers into a machine and to use that as my instrument.

I installed the program called Ableton Live on my Macbook, and when I opened it up it looked like a foreign language with a foreign alphabet. I had no idea how anything worked. Almost all of the terminology was new to me. There were dials, filters, inputs, outputs, dithering settings, amplitude adjustments, volume, gain ... I felt the weight of having so many choices, but more than anything I felt inspired that this elegant machine would aid me in my quest to make something beautiful. I just had to learn the rules, and solve the puzzle.

I felt that same way when I started learning how to code, sort of a majestic curiosity. I started to notice and think about how Bach's contrapuntal techniques and numerical symbols which he used to create his musical compositions of exquisite beauty are not unlike the languages and techniques we use today to commune with our machines. It sparked in me a longing to learn programming in much the same way I'd felt compelled to learn to make music, an intangible desire to collaborate with this object imbued with such deeply creative potential. At the root of my desire to code is my reverence for and curiosity about the systems we use to organize our selves, our thoughts, our ideas, our feelings, to express ourselves in this world. I seem to find systems of self-expression endlessly mysterious and engaging.