About the Author:

Basics to Reading/Writing Cookies with JavaScript

January 17th, 2017

Cookies are relatively small text files that a web browser embeds on a user’s computer. Cookies allow otherwise stateless HTTP communications to emulate state (i.e., memory). Cookies are being replaced by somewhat newer technologies such as local storage and session storage; however, cookies are still widely used by many major websites today. For that reason alone, it’s a good idea for you to familiarize yourself with how cookies work. Additionally, it’s fun to see how you yourself can use JavaScript to read from and write to the your browser’s cookie API. In the following tutorial I’ll show you how to do precisely that. Let’s get cookie-ing!

First, let’s look at how to use JavaScript to read cookies: To achieve this, simply write document.cookie in your JS file or in your browser’s JS console. You can output the value to HTML or just simply log in the console. Here’s an example of what you might see if writing cookie data to HTML (Note: Your browser needs to have cookies enabled and values present for the demonstration to work):

See the Pen rjMjgp by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Yeesh.. what a mess! No worries, we can do some formatting. You’ll notice that there are = and ; interspersed throughout the cookie text. The = denotes key=value pairs while the ; delimits the individual pairs. So in order to clean things up a bit, you might write something like this:

See the Pen zNKZOj by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Much better!

Now, how to write cookies: To write cookies using JavaScript, simply use the same document.cookie property we looked at before, but this time set it equal to a key=value pair (as a string) using the assignment (=) operator. Like this:

See the Pen LxRWKV by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

See it? In green? I just added my email address as a cookie to your machine. Feel free to drop me a line! :) Of course you can delete it if you want…

Moving on, let’s say you want the value of just 1 key=value pair within the cookie. What to do..? Well, you could write a custom function to do something like this:

See the Pen zNKZdm by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

And from there, you can do all kinds of things depending on whether or not a certain key=value pair exists as a cookie on a user’s machine. One of the most common uses for cookies is keeping users logged in to a credentialed website (such as Facebook, Twitter, of YouTube) by placing a cookie on the user’s machine once successfully logged in. The logic goes something like:

    if (key=value exists) → show logged in content, if (key=value doesn’t exist) → prompt user to log in

that kind of thing.

And there you have it, a basic introduction to accessing and manipulating cookies using JavaScript. For more detailed information on cookies, you can always check out sites like MDN.

Thanks for reading!

About the Author:

EASY Speech Recognition and Speech Synthesis in JavaScript

December 19th, 2016

As a society, we’ve become increasingly intrigued by the concept of machines that can talk and listen. From fictional AI systems like HAL 9000 in 2001: A Space Odyssey (“I’m sorry, Dave. I’m afraid I can’t do that.”), to Apple’s Siri ,and Google’s new Assistant, our culture seems inexorably drawn to the idea of digital beings with ears and a voice. Implementing such sophisticated technology may seem far beyond the grasp of a beginner or even more experienced programmer; however, that assumption couldn’t be further from the the truth. Thanks to user friendly APIs found in modern browsers, creating simple speech recognition and speech synthesis programs using JavaScript is actually pretty straightforward. In the following tutorial, I’ll show you how to use JavaScript to access your browser’s speechRecognition and speechSynthesis APIs so that you too can create programs you control with your voice; ones that not only can hear you, but ones that can speak to you as well. Come, let’s have a listen…

Explore JavaScript Courses

To start, it’s typically a good idea to explore which browsers best support the technologies we’re going to be working with. Here’s MDN’s spec sheet for the speechRecognition API: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility. As you can see, it’s pretty much Chrome leading the way; however, Firefox has some capability as well. The same holds true for the speechSynthesis API: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis#Browser_compatibility. Do note that Microsoft’s Edge browser enjoys some speech synthesis capabilities. David Walsh wrote a nice article on setting up the speechSynthesis API for cross-browser functionality; but, for simplicity’s sake and for the remainder of this tutorial, I’m going to assume the use of Chrome. 

So what does the code look like? A simple example of speech recognition code (written in JavaScript) looks like this (NOTE: You’ll probably have to open a new tab/window by clicking the “Edit in JSFiddle” link AND allowing your the browser access to your computer’s microphone (it should prompt you to do so).):

Try it out. Give the browser access to your computers mic and then try saying a few different words or phrases. If all goes according to plan, you should see what you say being written to the body of the html. If you’re having trouble getting it to work, try:

1) Making sure your computer has a mic and that your browser has access to it.

2) Making sure you have open only 1 application/tab/window that’s using the microphone.

3) Making sure to use Chrome as your browser and loading up the JSFiddle example in a new tab/window.

Okay, so the above example simply writes what the computer heard to the body of the html. That’s pretty interesting, but now let’s do something a bit more fancy; let’s tell the computer to do something for us! In the following example, trying opening up the Fiddle and telling the browser to change the background color of the HTML. The way I programmed it, you’ll have to say this exact phrase:

“Change background color to…” and then say any of the many colors recognized by CSS (e.g., “red,” “blue,” “green,” “yellow,”etc.).

Pretty cool, right? And really not all that difficult to pull off!

Now let’s look at giving the program a voice. I’m going to use Chrome’s default voice (yes, it sounds pretty robotic); but once you get the hang of it, feel free to read up on how to get and use different voices. Here we go; let’s see what it’s got to say:

Hear that? This time, the program audibly confirms that it’s changing the color of the background! Fantastic.

To recap all of this…

Speech Recognition

– The browser’s speechRecognition object has start and stop methods you can use to start and stop listening for audio input.

– The speechRecoginition object can react to for onend and onresult events.

– To get a string/text of what the computer heard, you can pass the onresult event to a function and then reference the event.results[0][0].transcript property.

Speech Synthesis

– The speechSynthesis object has a speak method that you can use to utter new SpeechSynthesisUtterances.

– You can pass a string (or number) value to the SpeechSynthesisUtterance constructor to create words or phrases.

    – pass that whole thing to the speak method and you’ve got a talking computer!

And there you have it. In this tutorial I’ve shown that it’s relatively simple to employ speech recognition and speech synthesis technology in your browser through the use of JavaScript. With this new tool set, my hope is that you’ll explore the wide array of possibilities that now exist. In theory, you can program your browser to execute most if not all of its functions at the sound of your voice. And you can make the browser say pretty much anything you want it to say. As usual, the limit is your imagination; so get out there and say something interesting! Better yet, have your browser say it for you. ;)

Explore JavaScript Courses

About the Author:

3 Ways to Center in CSS

November 16th, 2016

Centering HTML elements using CSS can be a surprisingly difficult task. Getting the horizontal alignment right is relatively straightforward, but getting the vertical alignment down can prove to be challenging. And getting an element to sit smack dab in the middle of its container? Forget about it! :) I’m kidding, but how to center elements using CSS is a question I see asked pretty regularly; one for which I don’t always see good or reliable answers. So in order to provide some guidance, in this article we’ll look at 3 ways to center HTML elements using CSS. I’ll start with the most backwards compatible of the 3, then move towards what I see as the most elegant solution. Pick the one that works for you… Let’s have a look!

First, let’s see all 3 methods in one page:

See the Pen ObNRjV by Chase Allen (@ccallen001) on CodePen.

Individually,

1. Padding

The first method relies on the padding property of the containing element, and CAVEAT you have to do some calculating/experimenting with this one in order to get it right. The padding property is applied to the parent element equally all the way around on each side. Doing so forces the contained element in to the center. A good way to think about the calculations is by starting with the width and height you want for your container element (let’s say 200px for example’s sake). Next, determine the width and height you want for the centered element (let’s say 50px). You calculate the padding needed by subtracting the inner element’s dimensions from the outer’s and dividing by 2. In formulaic fashion:

padding = (outer - inner) / 2

or

p = (o - i) / 2

Using the example values from above the formula yields

75 = (200 - 50) / 2

or

75px

You set the containing element’s width and height to match the centered element’s width and height and apply apply the calculated padding. So to get a container with width and height of 200px, with a contained center element of width and height 50px… simply give the containing element a width and height equal to 50px and a padding value equal to 75px. As mentioned, this method is probably the least elegant of the three (as you have to do some calculating), but it’s probably the best supported across browsers and on older browsers as well. Here’s what the code and results look like:

See the Pen BQKRmm by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

2. Transform

This method relies on CSS3’s transform property. It additionally relies on the position property. This method, like method 1, is not one of great elegance; however, you won’t have to do any extra calculating or hard coding of values to get it to work. The idea with this one is to give the parent element a position of relative (setting up its child element for absolute positioning) and then using positioning on the child element to set it 50% from the top and 50% from left of the borders of the parent. Because the centered element itself has dimensions, we’ll have to pull it back a ways in order to get it to sit perfectly in the middle. We’ll use the transform: translate property to pull the element back 50% of it’s own width and height. So all together, we simply push the contained element 50% of the way from the containing element’s top and left edges… then we pull the element back by 50% of its own width and height. Doing so effectively puts the contained element dead center within the parent. Note: The transform: translate property is applied to both the X and Y axes of the child element; and a value of -50% is applied. Here’s what it looks like:

See the Pen xRVdjb by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

3. Flex

This last method is dirt simple and highly effective, so it’s by far the most elegant approach of the 3 discussed. This method uses flexbox. Flexbox is a relatively new concept in the world of CSS and thus has the least cross browser/older browser support. Here’s some information on flexbox browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Browser_compatibility

As usual, IE is the one you have to look out for!

Using flex to center an element in its container really is as simple as giving the parent element a display value of flex, and then using the align-items and justify-content properties to center the child element(s). And the values of those two properties couldn’t be simpler either, you literally just type center for each. align-items does the vertical centering and justify-content handles the horizontal axis. The code and results look like this:

See the Pen LbNyBN by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

So there you have it! 3 ways to center elements using CSS. The padding method is likely the oldest and most supported approach, but you’ll need to do some calculations to get it to look just right. Using the transform property relies on CSS3 compatibility but it doesn’t require any special calculations. Using flexbox, or flex, makes the job a cinch; unfortunately, flex isn’t supported in older browsers.

Hopefully you found this article helpful. Thanks for reading!

About the Author:

Functions as First-Class Objects in JavaScript: Why Does This Matter?

October 28th, 2016

Functions in JavaScript are first-class objects (or “first-class citizens”). Fascinating, but… what does that mean? Why does it matter? Read on and we’ll have a look!

We’ll start with the basics: What does first-class citizenship mean in general? First-class citizenship, within the world of programming, means that a given entity (such as a function) supports all the operational properties inherent to other entities; properties such as being able to be assigned to a variable, passed around as a function argument, returned from a function, etc. Basically, first-class citizenship simply means “being able to do what everyone else can do.”

In JavaScript, functions are objects (hence the designation of first-class object). They inherit from the Object prototype and they can be assigned key: value pairs. These pairs are referred to as properties and can themselves be functions (i.e., methods). And as mentioned, function objects can be assigned to variables, they can be passed around as arguments; they can even be assigned as the return values of other functions. Demonstrably, functions in JavaScript are first-class objects.

Let’s look at some examples/tests:

Can we assign a function to a variable?

See the Pen JRVgLw by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Yes we can!

Can we pass a function as an argument to another function?

See the Pen XjQvqY by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Sure enough!

But can we return a function… from a function?? (Hint: We already did, but… let’s see it again!)

See the Pen LRvwro by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Yep, piece of cake!

One can get pretty creative with assigning functions to variables and passing them around to other functions from which they can be returned. If you’re not careful (or maybe if you just want to have a bit of fun!), the rabbit hole can get pretty deep, pretty quickly! Consider this… a function can be passed to itself and even returned from itself!

Excellent! But okay… who cares if JavaScript functions are first-class objects? What does it matter?

The beauty of JavaScript functions enjoying first-class citizenship is the flexibility it allows. Functions as first-class objects opens the doors to all kinds of programmatic paradigms and techniques that wouldn’t otherwise be possible. Functional programming is one of the paradigms that first-class functions allow. Additionally, listening for and handling multiple events by passing callback functions is a useful feature within JavaScript and is achieved by passing a function as an argument to the document object’s addEventListener method. The process would not be nearly as elegant if functions were not granted first-class citizenship within the language. Furthermore, the practices of closure and partial-application/currying would not be possible within JavaScript if functions didn’t enjoy the status of first-class.

In summation, with functions being first-class objects within JavaScript, developers are able to do all kinds of interesting things and explore all sorts of programming paradigms that wouldn’t be otherwise be possible. It is in part due to this functional first-classness that JavaScript has become the powerful and prolific language that it is today.

Thanks for reading!

About the Author:

How to Make Circular/Curved Text with JavaScript

September 28th, 2016

Creating circular text, or text on an curved path, in webpages may seem like somewhat of a intimidating task. There isn’t really a straightforward way to achieve it with standard HTML and CSS. There is a JavaScript plugin or two out there with some pretty decent results, but using plugins means extra dependency and load time associated tacked on to your project. So… what can you do? With a little bit of plain old vanilla JavaScript and standard CSS, it’s actually not that difficult to create curved text of your own! In this article, I’ll show you how to create circular/curved text that relies on as little as 15 lines of JavaScript. The result is functional and reusable so that you can apply as much circular text to your projects as you would like! You won’t need any special libraries or plugins of any sort; just good old fashioned HTML, CSS, and JavaScript. I’ll provide examples as we go, and I’ll provide items for consideration along the way. Circle the wagons; let’s get started!


Circular Text: The HTML

We’ll start by setting up the HTML, which is pretty much as simple as it gets. You’ll want a container for the circular text (although not 100% necessary) as well as a target element in which you’ll insert your circular text. Here’s how I’ve got it set up:

See the Pen ALoKJJ by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Circular Text: The CSS

Next we’ll add a some CSS to get things set up. None of the following CSS is actually necessary, and it can be adjusted as needed. For the purposes of this tutorial, I chose a purely arbitrary blackish background with whitish text; I also chose to center the target element (the div with class=circTxt), but you can choose to position the containers and target elements however you please! Here’s how I have the CSS:

See the Pen NRvNEv by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Circular Text: The JavaScript

Next comes the magic, the JavaScript. Things get a bit more complex here, but the overall logic isn’t really all that difficult. To give a broad overview before actually looking at the code, here’s what we’ll want to accomplish:

  1. Create a reusable function named circularText that takes 3 arguments: 1) the text to be written in circular fashion, 2) the radius of the circle on which the text will lie, and 3) the DOM index of the target class=circTxt element
  2. Split the text in to an array and get it’s length (i.e., the number of characters it contains)
  3. Divide the total degrees in a circle (i.e., 360 deg) by the length/number of characters in the text to determine spacing
  4. Specify the origin, or starting point, for the circular text (for simplicity’s sake, I’m going to hardcode 0 degrees)
  5. Create a loop (here using Array’s forEach method) that inserts the text around the perimeter of a circle using the defined radius and updating the origin/start value as it goes
  6. Call the function to create the circular/arced text!

Got all that? Believe me, it’s really not that complicated; less than 15 lines if you please. Here’s what the code looks like:

See the Pen rrzZoK by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

NOTE: I am do use ES6 syntax there (the arrow function and the template literal), but the code can easily be refactored to comply with more traditional syntax.


Well… there you have it… circular text with plain old HTML, CSS, and JavaScript!

Some things to consider are the need for adjusting the passed radius value based on how many characters are in your text. Generally speaking, the more characters you have in your text, the larger the radius you’ll need to use (however, you can create some neat effects by using a radius that might initially appear to be too small). Also note that you can created arced or curved text without going around a full circle by being purposeful about using spaces in your text.

See the Pen kkobjp by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

The arc effect can also be achieved by modifying the origin value used in the code (i,e., starting somewhere other than at the top of the circle). Regarding modifications to the CSS, the code could be changed to target elements with specified ids or tag names; you could use the document object’s querySelector method to achieve precision targeting as well. Additionally, you can modify both the circTxt containers (positioning them wherever you like on the page, giving them height and width, etc.) and the circular text within.

See the Pen Circular Text Generator by Chase Allen (@ccallen001) on CodePen.

I encourage you to go wild, get creative with it, circle back and have some fun! :)

About the Author:

Using the JavaScript ParseInt Method

May 19th, 2016

JavaScript’s parseInt function is all about converting a string to an integer. The function takes a string value as an argument and converts it to a numerical value with no decimal places, or alternatively the value NaN. ParseInt has a total of two parameters and thus takes two arguments. The second parameter specifies a radix value (i.e., a value representing the mathematical base that will be used when converting the string value to a number).

A simple example using the conventional base-10 (decimal) counting system looks like this:

var x = "1";

console.log(x, typeof x); //1 string

x = parseInt(x, 10);

console.log(x, typeof x); //1 number

Live code example: https://codepen.io/anon/pen/NNVryN?editors=0010

Explore JavaScript Courses

If no argument is passed to parseInt for the radix value, the default value of base-10 will likely be employed. Alternatively, you can 2 for the radix value to tell the parseInt function to use the binary (base-2) numbering system; a value of 8 will tell parseInt to use the octal numbering system; and a value of 16 will tell the parseInt function to use the hexadecimal, or base-16, numbering system. With bases greater than 10, letters of the alphabet are used to represent numbers greater than 9. Wikipedia gives more information about numbering systems; including the binary, octal, decimal, and hexadecimal systems, which have their own entries: https://en.wikipedia.org/wiki/List_of_numeral_systems#Standard_positional_numeral_systems.

To show an example of using a non-decimal system, let’s look at an example of converting a binary number in to an integer in the base-10 system:

var x = 10;

x = parseInt(x, 2);

console.log(x); //2

Live code example: https://codepen.io/anon/pen/oxRLJV?editors=0010

See that? The variable x was given a value of 10. In binary, a value of 10 (i.e., “one zero”) is equivalent to 2 in the decimal system. We passed 10 to the parseInt function and specified a radix of base-2. The function returned the integer value 2, which is the integer equivalent of “one zero.” Pretty nifty!

So what happens if we pass a numerical value with a decimal point to the parseInt function? Let’s take a look:

var x = 3.14;

x = parseInt(x, 10);

console.log(x); //3

Live code example: https://codepen.io/anon/pen/bpyeZw?editors=0010

Would you look at that? The parseInt function took our numerical value with a decimal place and parsed it in to an integer. It doesn’t get more titular than that!

But… what if we pass a non-numerical value to parseInt? What happens then? Here’s an example:

var x = "Hola World!";

x = parseInt(x, 10);

console.log(x); //NaN ...or, Not a Number

Live code example: https://codepen.io/anon/pen/ONYXGN?editors=0010

That’s right, if parseInt is passed an argument that doesn’t readily convert to a numerical value, then the returned value will be that of NaN (or Not a Number). If the function is passed a combination of numerical and alphabetical string values, then the function will convert the numerical characters to a integer and discard the remaining alpha characters. Here’s that in action:

var x = "123UnoDosTres";

Explore JavaScript Courses

x = parseInt(x, 10); console.log(x); //123

Live code example: https://codepen.io/anon/pen/EKzyze?editors=0010

So there you have it; the basics of JavaScript’s parseInt function. Remember that parseInt’s primary purpose is to take a string value and convert that value to an integer (no decimal places) of the type number. You can specify the base (or counting system) that you want to use. If the function is passed a value that cannot be readily converted in to a number, then parseInt will return a value of NaN.

Additional information on JavaScript’s parseInt function can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

About the Author:

Brainstorming a Creative Project Part 4: Conclusion

October 16th, 2014

So far in this series on creative project brainstorming, we have looked at the type of questions and exploration techniques you could use when you’re in the challenge phase of your project. In this last part, though short, we’ll cover how to close the project discovery and let you do the actual work.

Closing an exploration phase doesn’t mean the close of the entire project discovery. In fact, until you and your team have come to a final decision on how your initial goal will be reached, you’ll probably be closing many different exploration phases. To help with semantics, think of the discovery phase of your project as one big (opening –> exploration –> closing) group with many, many smaller, similar groups inside of it. It’s not uncommon to have an ‘open, explore, and closing’ group for a every single topic in your project.

Closing a topic is meant to be the end of the topic at this stage. Your best solution right now may need some modifications later, and that’s okay. It’s helpful to keep this fact in mind when you are brainstorming. It’s fairly common to revisit old ideas to make sure your new ideas are conflicting with them. Even if they do, it’s fair to start a new round of questioning and exploration on that topic. You may do this without even realizing it.

Closing Questions

You close a topic by asking closing questions. Remember how we talked about opening questions and that were intentionally vague and used to create discussions? Of course you do. Closing questions are the opposite of that. Questions like, “Which of these options is the best solution for this problem?”, are designed to get people thinking about a single solution, in this case from a list of choices, that they can agree on.

Idea_Pool

You and your team have already had many discussions on whether your ideas are viable and consistent with your goal. Closing questions should also create discussion, but of a different sort. Up until now, you’ve been asking questions to figure out aspects of the project. Now, you’re trying to figure out which of those aspect ideas are the best, or at least the best right now.

That’s really all there is to it, actually. Make sure you and your team are aware of when you have ‘enough’ ideas and are ready to close a topic. Otherwise you may have some confused people.

Series Conclusion

In this article series, we didn’t talk about anything technical or code related, but rather techniques that can be used to help a team come together and brainstorm on a creative project.

Vague opening questions can help you determine where you want to go with your initial idea and help you define your goal. Keep in mind that you need allow yourself and your group to have discussions to open up the exploration phase of the topic and get all ideas on the table, and I mean ALL. Make sure your team members’ voices are heard and instigate anyone that seems like they are holding back. There are (almost) no bad ideas.

If you follow these guidelines, you are going to have an innovative, user-friendly, robust application. I hope you take some ideas from this series on Brainstorming a Creative Project to apply to your own endeavor.

About the Author:

Live Long and Prosper with JavaScript

October 15th, 2014

Jonathan Creamer, a JavaScript Engineer here at appendTo, wrote an article published on ModernWeb.com today that takes JavaScript where no JS has gone before. Jonathan takes you on a warp speed journey through JavaScript’s architectural patterns by demonstrating how applications are created today and discusses what the future holds for this continuously changing language from the 23rd century and beyond!

To read the article in its entirety, check it out here!

javascript_code_star_trek

About the Author:

A Really Good Second Pair of Eyes

October 7th, 2014

This month (October) is my two-year anniversary at appendTo. Two years may not sound long to you but in the tech world it is a bit of an eternity. My wife Brittany still can’t believe I’ve stayed that long–most of my other jobs have been project-based and have lasted a year or less. When I started with appendTo my desire was to find a place to hang my hat for a while. And here I am, two years later, and the hat is still on the hook.

I flew to Tacoma with a co-worker, Matt, a few weeks ago, to help a large, enterprise company conduct an internal hackathon for their IT support team. We functioned as technical coaches, helping each of the five teams participating to make decisions about technical trade-offs (they had two days to finish their projects), and to help mitigate any technical obstacles that arose. It was a marvelous, albeit exhausting experience. When we met with this company’s leadership for the first time I was asked to describe what appendTo is all about, and this is what I said:

appendTo’s name is a play on the the jQuery function of the same name. In JavaScript we often want to take an element, say a hyperlink or a some emboldened text, and append it to some other element, like a paragraph. Our company has a similar relationship to the clients it engages: we append to that client, becoming a part of its team, to help accomplish its goals with our own expertise and values. We are very fast, and very effective.

I was then asked about my personal qualifications as a technical coach. Each team, in theory, could choose any technology stack for their project (though each project had to function on mobile devices), but in reality the company had a significant Microsoft infrastructure. Matt and I had spent a good deal of time discussing the potential technical avenues each team might take, and we had concluded that, given the time constraints and culture of the company, Microsoft-based, cloud hosted solutions were likely candidates.

Fortunately I have experience with the .NET stack, which put the client at ease. But I also stressed that my career has spanned many stacks, languages, frameworks and paradigms, and that I had sought from the beginning to be a generalist, not a specialist. To me, understanding problems is more important than particular solutions, which may be myriad. Problems are always contextual.

The leadership team then asked what I thought about my role in the hackathon. I replied: “I am going to be a really good second pair of eyes.”

It was a decent elevator pitch.

Each team ended the week with polished projects, and though we were all tired and giddy from the process, an intense camaraderie emerged. Both Matt and I lived up to the promises we made and the client was very pleased.

I’ve since reflected on the claims I made in our initial meetings (all of which I believe), and projected them onto the backdrop of my experiences at appendTo. I’ve worked with a lot of clients, on a lot of projects, with a lot of different technologies. I’ve produced code, written articles, coached a hackathon, given presentations, migrated a mountain of WordPress data (a task I would not wish on my enemies), created and contributed to open source projects, and so on. For each client engagement I straddled the line of being uniquely me, and being that second pair of eyes; of maintaining my own personal boundaries and standards, while appending to an existing team or management structure with their own goals and values. I’ve seen my co-workers do the same, time and again, in development, design, and management capacities.

There is a time for modesty, but this is not it.

appendTo harbors amazing people with amazing talents. Moreover, it treats its employees like entrepreneurs, free to grow their ideas and visions and passions while serving clients. It’s a petri dish for excellence. And this characteristic is intentional.

When I was first hired, I was told that appendTo was a place for recovering developers who had been abused by the corporate world. And though the journey is not always smooth (no good journey is!), the work I do here and the relationships I make are, and will continue to be, some of the most significant in my life. And for that I am both grateful and humbled.

*This blog post was previously featured on nicholascloud.com.

 

About the Author:

Brainstorming a Creative Project Part 3: The Exploration Phase

October 2nd, 2014

In Part 2 of this series, you learned what being in the challenge space means and about some of the overall techniques used while there. Now begins Part 3 which will take you deeper into the exploration phase of brainstorming your creative project by investigating on more granular level.

Types of Questions

We spent some time over the last two parts in this series talking about the questions that you and your team ask when trying to determine the goal of your project and when you are exploring the challenge space. It’s important to have a plan of attack when you are preparing your questions for the team, even if the plan is spontaneous. Knowing what kind of questions you are asking can lead to results faster than not. Let’s take a look at some common types of questions that relate to brainstorming a creative project.

Instigating Questions

Instigating questions, or opening questions as some call them, serve as that spark when you and your team are firestarting a topic. They are meant to be very open-ended to create a divergence in thought; to force you to think of all the ways you can accomplish the same thing. In web development, the number of ways to do the same task seems infinite and opening questions help you see that.

Directional Questions

For obvious reasons, questions that try to find a path or put you on a certain path are called directional (or navigational) questions. By starting with a vague question like, “What pages does our web application have?”, your team can get off track due to all the possibilities that could be. It’s important for whomever the team leader is to interject with a question that takes the currently discussed idea and finds out whether or not it’s viable. “Is this discussion going to move us along?” is an example of a directional question. It may seem simple, but it makes people think about whether or not the topic is helpful. The answer could be yes or no, and if it’s ‘no’, the team needs to either start a new topic or another directional question like, “Is the next item on our list still a possible solution?” is needed.

Exploring Questions

It’s time to fully explore any and all ideas during the challenge phase. Exploring is about following a line or flow of ideas to a solution, or at least a common endpoint. It’s also about testing and examining whether or not an idea is viable, kind of like the scientific method.

Let’s say you want to come up with a way to get a user from a landing page to the checkout process. That’s pretty open-ended so you could either take a few suggestions about the first step of the user interaction, or you could take suggestions on entire paths and examine it. You can do this by diving deeper into a subject and looking closer at how something works; not how something might work, but how it does work. You may simply ask, “How does it work?”, when a team member suggests an image carousel. If someone wants all the buttons in the application to have a hover effect, “What is the purpose of the effect?”, is a good way to examine the idea.

Another subtype of exploring questions is testing questions (or sometimes referred to as experimental). Conversely, we use these questions to define how something might work. Oftentimes you experiment with something directly after examining, but sometimes the idea is vague enough that you can go right into the experimental step. For example, if you want to experiment with the button hover effect in different ways, you might ask, “What types of styles make sense for this application?”, for a design experiment, and, “What else can this button do when a user hovers over it?”, for a functionality experiment.

After experimenting a little with each idea, it may be helpful to go back and examine them again depending on the time and budget for the project. Re-examining may prove beneficial.

Closing Questions

These types of questions are used to bring all the explorative ideas to a ‘close’, meaning, they should finalize a topic to a solution. You may have more than one solution if you need to have redundancy, but your team should still be converging on those solutions without any remaining ideas on how to solve the problem.

More on Exploration

Now that you’ve seen a few examples of the types of questions that are useful when brainstorming a creative project, let’s take a closer look at exploring your ideas as a team.

One thing you should always keep in mind is topic scope. It’s important to not venture out of the idea zone. If your team is on the topic of what kind of options a product has, don’t offer ideas on how to display those options. That is a separate issue and it has it’s own scope. Write it down and deal with it later. You may be thinking that the content of a dropdown is just as important as the way it’s displayed. I’m not saying that it isn’t, since there are plenty of cases where the two go hand-in-hand, but functionality, design, and content are three distinct things and should be separated accordingly. True, there may be a web of dependencies, but the topics are different and can be explored separately without affecting each other.

Relative Space

Sometimes when scientists or psychologists research something, they will categorize the flow of their methods into two categories: precision and ordering. This helps them determine what is more important: knowing in which order they did the experiments and/or what methods provided them with results. Sometimes it’s more important to know when something happened after or before something else rather than during the task. In other cases, the opposite is true and in rare cases, both are true. When you are exploring your creative idea with your team, you may find yourself developing a flow for a user to follow. In the case of a web application, this might be the path a consumer follows from the home page to the checkout page.

Think about what’s more important for your application. Do you care more about the number of steps it took to get to the checkout page with one or more products or are the products that are added to cart more important?

Below, we see a flow of generic steps that you want a user to take to reach your goal. In this case, the larger picture is more of a concern than what the user was doing in between the steps.

Ordering Focus

order_focus

In a precision focused approach, the basic steps are the same, but there are minuet steps within those larger steps that are important to us. In this case, the focus is more on what options are chosen rather than speed.

Precision Focus

precision_focus

To be clear, you do not need to decide if only one of these approaches is better for your entire project. Use them both! You may find that one topic needs to be thought of in an ordered sense, while another could use some precision thinking. Heck, use the ordered approach to get a grasp of the general idea and break into precision mode if you still have unanswered questions.

Part 3 Wrap Up

When you’re in the challenge space and the project needs to be explored, it’s important to understand the different types of questions you need to ask when properly examining and experimenting with your idea while keeping yourself and your team in line with the goals you’ve set.