Hi,
I'm Mike,
Web Developer.
Web Developer / Full Stack / Front End
Scroll Or Use The Navigation Strip

User Experience

Look at every line of code imagining yourself as a first-time user. Contemplate if the interface is intuitive, pleasant, and would draw you to return. The goal is to optimize user experience such as focusing on load speed by caching data or preloading. If preloading isn’t possible, distract the user with something they like. In some cases, that could be a floating tennis ball.




DRY Code

Taking the ring to Mordor and second-breakfast doesn’t always need to be two separate functions. Striving to code efficiently is the ever guiding quest of a code warrior. Object literals in JavaScript or Classes in Ruby are two classic methods used to follow the acronym of "Don't Repeat Yourself."




Testing

I’m pretty sure most web developers use a browser's DOM just as often as a text editor when developing code. Testing and fixing bugs can easily comprise 80% of development. For smaller projects, the DOM is your best friend. For more complex undertakings that will have many iterations, a testing framework (like Mocha) is an indispensable tool. It's responsible and good practce to test every step of the way.




Getting Help

Every good developer bookmarks resources to find answers to code problems that stump them. However, sometimes the fastest way to get over a hurdle is to respectfully ask the coder sitting next to you for a hand. Become extremely familiar with your digital resources, but don't be afraid to utilize your team, as well. Helping each other out builds positive relationships.

Code

Example







As an example of my coding thought process, here’s how I met the challenge of creating flickering neon arrows on this page.


Goal:
Have neon arrows that flicker randomly and constantly as fringe, atmospheric content.


Obstacles:
1) Create glowing and non-glowing graphics for the arrows.
2) Find a way to flicker the graphic at random intervals that are not annoyingly predictable.
3) Make the flicker constant without introducing memory leaks.


Web Languages:
HTML5, CSS3, JavaScript, and AngularJS 1.7


I first dove into photoshop to create the neon arrows, and separately, their glow. For the glow, I copied the finished arrow into a new document and blurred it with the Gaussian Blur filter. This had the effect of maintaining the same color profile, while making the lines of the arrow diffuse like a glow. I then saved the diffused arrow as a transparent .png.




In HTML, I overlaid the images as a div within a div. I chose this DRY method instead of using CSS to place them in the exact same location. This way, I wouldn’t need to calculate where the glow needed to be should I choose to change the arrow's location. Using AngularJS’ ng-show/hide function, I hid the glow graphic. A JavaScript function will be in charge of revealing the glow graphic at the correct timing.




With my View and Model in place, the arrow needs a JavaScript Controller. Human brains are pattern sensitive; a recurring flash on the webpage will quickly become irritating if not varied randomly. In order to keep the flicker pleasant, I needed to manufacture a simple interval pattern that changed constantly. After experimentation, I settled on a motif of two quick, to one long interval. I put this pattern into an array as five interval values. Two of those values would represent a non-glow while three of them, a glow, thus creating a flicker of off and on.




From here, I needed to craft a method, called intervals( ), to redistribute these interval values into a random order every time the flicker was called. I chose to use a Math.random function on the array’s index, then push the reordered values into another array called “duration”. In this way, we have a constantly varying pattern of the same values.




For the flicker effect, I would need to draw on AngularJS’ version of JavaScript's Promise ($q) and Timeout ($timeout) methods. $q has served me very well in creating an island of synchronicity within JavaScript’s asynchronous universe.


I attached a flicker( ) function to AngularJS’ $scope making it accessible from HTML. When called, it invokes my intervals( ) function for an array of randomly distributed duration values. $q ensures those values are received before proceeding to call an anonymous function of five nested $timeouts. Each Timeout pauses for several milliseconds according to the values received from the duration array. The arrow glow switches on, then runs through each duration value switching off, then on again until finally switching off at the end of its run, prepared to be called again.




Now that the flicker function is set, it needs a way to be called. I could have used JavaScript’s Interval method to call the flicker function every twenty seconds or so. However, Interval has a nasty tendency to create memory leaks and I try to avoid it whenever I can. Thankfully, I’ve always figured out a workaround to Interval. It’s not too difficult if you put some thought into it. In this case, I realized that the natural flow of the user could unwittingly trigger the function. If I create mouseover events in choice locations across the page, the user will trigger the flicker as they explore my content. To the user, it would seem that the flicker happens randomly, outside of their control, but as they stop moving their mouse, the flicker stops as well. No memory leaks, no unnecessary processing power when idle.


Feel free to explore some of the mouseover events that call the flicker( )!

Hi!

I’m Mike.

I build websites and also work with teams on large web apps. I’ve been a professional web developer for over three years sharing my skills with cool companies such as Apple, Foxconn, and Fitbit.

I was twelve when I wrote my first program moving green pixels across a black screen. In high school, I discovered the love of logic and algebra that gave me a philosophy of thinking that has shaped my mind ever since. I was one of those geeky, nerdy kids who spent their lunch breaks converting the saga of Star Wars into algebraic formulas, but didn't dare tell anyone. Had there been programmers in my family to encourage me, I would have stayed this course. Instead, I took a multifarious path through performance, music composition, and education before recently coming back to code. As an adult programmer, I hope to help others realize their coding potential and create amazing things.

Coding is a true art form that utilizes multiple disciplines. It's founded in mathematics, but in anticipating user experience, it touches psychology. It's creative, builds an understanding of architecture, leadership, and teamwork.

A couple hundred years from now, I anticipate working alongside robots to better the world .

Culture Fit

It would be nice if we got along with our teammates as well as we do with our BFFs. Reality is, we are culturally, physically, and emotionally diverse adults; and ultimately, that reality is so much more engaging. When tolerating difficult personalities, keep this as a reminder. And remember, sometimes we're the difficult personality that others are tolerating.

To minimize friction, model the behavior you want to experience from your teammates. Be kindly direct and maintain broad perspective. Ego-attachment to your code is not worth the tension it creates in your team. Keep your humor respectful, and be generous with your help.

You'll likely discover that a positive workplace culture makes every project feel like Christmas. Support that culture and earn your right to be there.