What's Your Stack?

Years ago, I proudly applied the LAMP (Linux, Apache, MySQL, PHP) stack to all of my web development efforts. Never mind that it was smack dab in the middle of the time when PHP deserved its bad reputation and most, if not all, of the code that I wrote was as bad as the worst out there. I was making money. I was confident, working steadily, and proud of my work.

Times have changed. I took some time off from working and quite literally forgot everything I knew about Web Development. It was time to do some retraining.

One logical perspective suggests that it would’ve been best to jump back into the PHP ecosystem. If I read some tutorials I might revive some of the connections that made me enjoy being a PHP developer. There are many employment opportunities for PHP Developers and PHP has come a long way since the bad old days. It’s much easier to write good code in PHP and there are powerful frameworks like Symfony and Laravel that put Web Development with PHP on par with other contemporary methodologies. But I didn’t take this route. I felt like I needed something new to spark my imagination again.

There were a few things poking at my enthusiasm (Wake up!… You’re not dead yet…). First of all, I remembered having fun with jQuery. It was mostly frontend animated stuff. I definitely wanted to have fun again. CSS animation was the next thing to have captured my imagination. I didn’t know how to do it, but I knew that it was a thing and I wanted to know more. Finally, there’s Node. I knew almost nothing about it, but I had heard that it allowed server-side development using JavaScript.

Here’s how it all connected in my mind…

jQuery == JavaScript == animation == fun
∴ JavaScript == fun && animation == fun
∴ CSS animation == fun
∴ Node == fun

It was about this time that I (re-)discovered freeCodeCamp, which guides the learner through a Web Development stack using jQuery, React, & NodeJS. So, freeCodeCamp’s curriculum was perfectly aligned with my interests and goals.

Some time has passed since then. I’ve followed freeCodeCamp’s curriculum pretty closely, but I used many other resources too. I still have a lot to learn, but I’d consider myself a competent MERN (Mongo, Express, React, Node) stack developer. Given all the information I’ve gleaned from forums, social media, and job search sites, I’m confident that I’ve chosen the right path for me.

This isn’t to say that I’ve completely abandoned the LAMP stack. On the contrary, I’m looking forward to jumping back in. I definitely plan to present both LAMP and MERN skills among my service offerings.

I have to give credit for my current Web Development focus to my past experience with jQuery. Ironically, I don’t have much use for jQuery these days. Anything I ever did with jQuery can be done using a combination of plain JavaScript and CSS, without the overhead of external libraries.

So… What’s your stack? And why?

transitionend Promise

I’m working on a page that displays thumbnail images. When I click on a thumbnail I want it to show an info box containing more image details. I’m using a CSS transition on the info box and I want to populate the image details while the info box is hidden. If the info box is already visible from clicking on a different thumbnail, I need to hide it first and populate the image details after the transition completes.

Here’s some pseudocode that shows what I want to happen…

thumbnail.addEventListener('click', e => {
  if (infoBox.isVisible()) {
    // hide the info box (CSS transition)
    // after the transition ends, populate the image details
  } else {
    // populate the image details immediately
  }

  // show the info box (CSS transition)
})

The browser triggers a transitionend event when a transition finishes, but it’s not fired at all if the info box is already hidden. A function that hides the element and returns a Promise would be ideal. The Promise would be resolved after the transition completed or immediately if theinfo box was already hidden, but I don’t use JavaScript to hide or show an element. I typically just toggle a hidden class and let the CSS animation do the work, so we can’t determine when the animation has completed.

I can’t just return a Promise from the event handler for transitionend because I don’t call the event handler. I just pass it as an argument to addEventListener() and the browser calls it. But there’s always a way…

I searched for promises for CSS transition events, but the higher ranking search result has a fatal flaw. In a pen1 entitled “CSS Transition End with a Promise”, a Promise is resolved when the transition completes, but the event handler is never removed from the element. The code attempts to remove the handler, but removeEventListener() is passed a function that wasn’t attached as the event handler. The actual event handler is an anonymous function that calls the function which the author tries to remove. If you use this code it could eventually cause a problem (What kind of problem? How soon? … this needs testing) as new event handlers are infinitely attached to the element.

I found a good solution on my second attempt at this Gist. The trick is a function that returns a Promise and makes a CSS (or CSS class) change that causes a transition, then immediately attaches an event handler for the transitionend event in which it removes itself and resolves the promise.

Here’s my demo inspired by the Gist:

See the Pen CSS `transitionend` event with a Promise by Vince Aggrippino (@VAggrippino) on CodePen.

What's in a Portfolio?

What am I supposed to put in my portfolio? Ideally, I’d have several projects that I built while learning as well as links to past employers’ websites that I contributed to. I should also have some testimonials from people I’ve worked with in the past, but I don’t have any of this.

My professional history is too far in the past. My previous employers have either been bought / merged / closed or have moved far past my contributions.

What I do have is over 175 pens at CodePen.io, 27 repositories at GitHub, and 17 "projects" I completed for freeCodeCamp. None of this is professional-quality code worthy of a portfolio.

In short, everything I’ve ever done to show my skills or experience is either gone or an embarassment, and that makes it difficult to actively look for work right now.

This is very disheartening… I’ve been working with computers professionally since 1990 and focused on Web Development since 2001, but I’ve got nothing to show for it.

Nothing right now, at least…

To quote the mantra of the excellent Shop Talk Show podcast "Just Build Websites!" In that vein, I’ve got some ideas for sites to build for the sole purpose of putting them in my portfolio. My first portfolio project, a search engine, is in progress.