Vuejs: Kickstart My Heart

I’ve never really considered myself a web developer as such. Yes, I work the full stack but the front-end has always felt like the wild west to me. It’s hard to apply the same kind of discipline to application structure in the front end that I’m used to in the back-end, or at least it was.

For a good number of years now my server side code structure has avoided the traditional idea of layered development in favour of feature “slices” or if you will, components. It has paid off handsomely and I love to show others the benefits of the approach I use. It’s an almost cookie-cutter implementation that in terms of team size scales wonderfully and makes it easy to produce codebases that anyone can jump in and out of with complete familiarity.

However, when it came to the front-end all bets were off. My ability to structure Javascript client-side code sucked. I knew it but I kind of put it down to the nature of web development. I told myself that that was just the way it was. Then a few months ago, in a concerted effort to get better at the front-end I came across React and the promise of components in the UI, and started down that route but for some reason I can’t quite remember I got sidetracked by this wonderful library called Vuejs and I’ve not looked back since.

Vue doesn’t get quite the same headlines the way React does but it’s definitely no less worthy. It’s pretty simple in nature and incredibly powerful in practice. Granted I’ve had to learn one or two other things to really get the benefit such as webpack, vue-router, and some Node stuff too but after a couple of weeks of experimentation I felt I knew enough to start applying it at work.

I’m now four months in on a journey to replace an ageing, poorly written, poorly performing, enterprise e-commerce application used by nearly all of our clients and Vuejs is at the heart of it. When I look at what I’ve already achieved in such a short space of time and the positive feedback both from within the work place and the one or two clients that have had a preview, I have zero regrets and full confidence that I made the right choice. I can’t imagine how I would have implemented some of the functionality using just plain old javascript and jQuery.

For the longest time I didn’t really enjoy coding in the front-end but if nothing else, Vuejs has actually made me interested in web development again. It’s given me a renewed enthusiasm, and sparked a whole slew of ideas for improving our existing applications. Who knows, I might even learn enough to share on this blog (something else I’ve neglected for too long). As far as I’m concerned, that alone is quite an achievement.

Vuejs: Kickstart My Heart

HTML and the Art of Zen Coding

I love cool stuff, most developers do, but it’s been a while since I’ve truly been impressed by a tool or technology. Today was one of those “whoa! this is really cool!” moments when I happened upon the Zen Coding plugin as I explored WebStorm from JetBrains (a company that also makes cool tools). So what does it do? It basically saves you time and keystrokes by providing a shorthand notation for all the boring, repetitive HTML that you write every day. For instance, typing:

div#container.cont1>table#menu.tab1>tr>td.test*3>a

and then hitting the tab key automatically generates the following html:

<div id="container" class="cont1">
    <table id="menu" class="tab1">
        <tr>
            <td class="test"><a href=""></a></td>
            <td class="test"><a href=""></a></td>
            <td class="test"><a href=""></a></td>
        </tr>
    </table>
</div>

It’s fairly easy to see how that single line became the finished output so I’m not going to go into any great detail about it but what if you need to create elements that “live” at the same nested level like, say, a table with thead and tbody elements?

div#container.cont1>table#menu.tab1>(thead>tr>td.test*3)+(tbody>tr>td*4)

translates to:

<div id="container" class="cont1">
    <table id="menu" class="tab1">
        <thead>
        <tr>
            <td class="test"></td>
            <td class="test"></td>
            <td class="test"></td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
</div>

You can see that wrapping each section inside parantheses and using the + symbol as a “new line” creates the desired output. How cool is that!? Pretty damn cool if you ask me. By using something close to css syntax we can chain together the structure we have in mind and get a lot of output for minimal effort. Now, I may be late to the party but better late than never. Over the course of many pages this is going to save me a huge amount of time. What’s even cooler is that this plug-in is available for many different editors, so you should definitely checkout the home page to see if it’s available for yours.

Hats off to the devs for a great tool.

HTML and the Art of Zen Coding