03-18-2014
I started working with Jim and CBTA LLC. on their website since 2010. In fact, it was the first ever WordPress site I built, marking the beginning of my web development career. It was the good old days of buying a standard theme (for $40 or so if I remember correctly) and then customizing it through ONE single custom stylesheet, inline styles and inline scripts. With all of that, I was able to create a homepage with carousel and a Google calendar page for appointment scheduling (see the screenshots attached). I was pretty proud of myself for this.
Fast forward 3 years, the old way of using a paid theme of using inline styles and scripts became unsustainable as the practice’s needs expanded. And while I have learned and grown so much more as a WordPress developer, having built many custom themes and functionalities, I felt that WordPress was an overkill for a site like cbtallc.com. The concept of a server-side architecture with database queries became clunky for a site that requires so many custom pages and functionalities yet few content iterations. I was responsible for updating few content changes, yet unable to implement new cool features. This is when I decided that a static-site generator would suit the needs of this page better.
Having just released tobiko and used it on this personal blog, I decided to use it to power cbtallc.com version 2 as well. Thus began a very exciting process for me of stripping a rather standard business-y site originally into a more modern and minimal looking site, preserving the original functionalities yet making it more open to new features. I wanted to reduce the number of pages a user has to click through to consume the information that matters to them. All of this while keeping the site as clutter-free as possible, keeping in mind the potential audience the site would attract. Last but not least, while the amount of mobile and tablet usage was low, I believe it was because the old site could not be as mobile-friendly as it should be. So the new site was developed with responsive design baked in from the start.
Having said all that, I am not a designer by training, so I’m sure there are probably more design violations committed in the new site than legally allowed. But I think I am more okay with that, because the whole static-site architecture that tobiko provides allows the developer me to iterate quicker and make more frequent small improvements over time. This is actually what I am happiest about the new site – the new build process that is baked into it. I won’t go into depth on the benefits of tobiko here, and there are plenty, but that’s for another post.
The practice’s appointment schedule system is improved with newer tools, including fullcalendar and Twitter Bootstrap modal. A user can now select an appointment request right from the calendar without typing in the date and time repeatedly as before. The new site also exposes information about therapists at the practice and treatments offered in a way that requires less friction from the users (fewer clicking and page refreshes), which hopefully will amount to a smoother overall experience. So there are also clear UX and content wins with the redesign as well, in addition to the behind-the-scene stuff.
There are certainly many areas the site can be better, including a cleaner, friendlier calendar display and deeper content engagement with the audience through blog posts (which is thankfully built in to tobiko). These challenges and improvements will definitely be worked on as I embrace a more agile approach in developing the site. As for these past couple weeks since the soft launch, I am pretty happy that a website that started it all for me gets a facelift and hopefully serves its users better. Check it out at http://www.cbtallc.com.
12-10-2013
I have been using Meteor.js for one of my projects in the past few months. After working with WordPress and the LAMP stack for a while, I quite welcome the new and refreshing environment Meteor has to offer.
When I first started with Meteor, the one thing I sorely missed from building other web apps was the ability to use bower to manage front-end dependencies. I have come to rely on bower to get me the latest copies of libraries and put them in a consistent place. Meteor, however, has its own way of managing packages and isn’t fully compatible with bower right off the bat.
After some digging around on StackOverflow and jumping on the IRC channel, I figured that there was no perfect way to integrate this. So I decided to create a little hack to make bower works with Meteor. The package that sparked my desire to make this work was bootstrap. I posted an earlier version of this post on StackOverflow.
Where to put bower_components?
This was the first question I had to answer. Since Meteor automatically packages any .css and .js files in the client folder and serves them, client is not a good idea to put these dependencies, as they most likely have a bloated number of files you don’t actually need.
I found public to be a good place to keep these files, since “Meteor server will serve any files under the public directory”.
{
"directory": "public/bower_components"
}
How to use these assets?
Any static files (.css, .jpg, .png, .svg and so on) can be sourced like this:
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
less files can also be included in your authored less code as well:
@import "public/bower_components/bootstrap/less/bootstrap.less";
Notice the path above include the public folder.
Explicitly declare files to be included on the client
While the above method for static files works fine locally and on sites deployed to meteor.com, it fails when the app is deployed to heroku. Furthermore, it would not work for JavaScript files since Meteor templates do not execute any <script> tags in the body the way one would expect.
In order to overcome these challenges, I use a small hack.
- Create a package whose job is solely to serve any static files from bower components.
❯ tree packages
packages
└── bower-dependencies
└── package.js
- In
package.js, declare any static assets that you’d like to use on the client
Package.describe({
summary: "Load bower dependencies."
});
Package.on_use(function(api) {
// bootstrap
api.add_files(['../../public/bower_components/bootstrap/dist/js/bootstrap.min.js'], 'client');
api.add_files([
'../../public/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
'../../public/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
'../../public/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
'../../public/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff'
], 'client');
// ladda-bootstrap
api.add_files([
'../../public/bower_components/ladda-bootstrap/dist/ladda-themeless.min.css',
'../../public/bower_components/ladda-bootstrap/dist/spin.min.js',
'../../public/bower_components/ladda-bootstrap/dist/ladda.min.js'
], 'client');
});
This will make the static assets available at the proper URL. For example, to use the glyphicon fonts in this case, the URL would be /bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot.
This package will also serve any JavaScript and CSS files automatically, as they are gathered and bundled by Meteor before serving.
Install bower dependencies when deployed to Heroku
Since using bower is not a very popular pattern among Meteor developers, bower dependencies are usually left out on deployment because the bower_components folder is usually gitignor-ed and thus not included in the source code.
When deploying my app to heroku, I use this heroku-buildpack-meteorite. In order to make bower works, I added the following lines of code after packages are installed and before the meteor bundle is built:
echo "Installing bower" | indent
run_npm "install bower -g"
echo "Bower installed" | indent
echo "Installing bower dependencies" | indent
HOME="$BUILD_DIR" bower install |indent
This code is submitted as a pull request, but I also maintain a fork that has this added support for bower.
Conclusions
I hope my solution will be useful for people who would like to stay with bower for front-end package management in the Meteor world. I am aware that Meteor and Meteorite projects have official support for many important packages, including bootstrap used in this example. However, depending on those packages add a layer of delay into your workflow, as updates will not be as quick as the original. This was true for me back in September when I wanted to use Bootstrap 3 as it was released to the public. Meteor did not have support for it until much later. It is for good reason – they want to make sure things are stable and safe before pushing out an update, and probaly want to time it with their release cycle as well. However, as developers, sometimes we get itchy and want to take new things still under development out for an early ride. That is what bower is there for, so why not use it, right?
06-13-2013
So here are a few updates since my last post:
-
I have begun working at Upstatement for the summer as their web developer intern. Things are going really well here so far. Had my first company Tank Day last Friday, where we went to play bowling, arcade and pool for the whole day. Can’t complain.
-
This site will soon be moved to a static site generator based on wintersmith, a node.js-based framework. Progress on the project can be seen on Github. It will probably be hosted with Github Pages. Sad to leave WordPress and WPEngine for now (especially after the new and beautifully designed MP6), but I feel like this new platform is the right move. It fits in well with my developer workflow, including using grunt.js as a build tool, write post in markdown and allows me greater control over theming and styling. The only beef I have about it so far is that it uses Jade as the templating engine. Jade feels weird to me. It’d be better if there was a handlebars plugin or sth along that line (mustache or underscore come to mind). Maybe I can research and write a plugin for that one day.
-
I’ve been attending many meetups in the area (my favorite thing about living in Boston in the summer). I’ve heard many interesting topics being tossed around, including Data Visualization, analysis of the different JS frameworks (Angular, Backbone and Ember to name a few), more arguments for using MongoDB and other NoSQL database systems, WordPress goodness and big data hacking among others. There’s gonna be one on Client Side Data Management tonight, and a half day conference next week on Information Design and Data Visualization. I am literally in awe at the infinite amount of resources that are available in this city for someone to learn, for FREE, with pizza and occasional beers too.
04-27-2013
We’re all familiar with the concept of the 24-hour news cycle that has become to characterize most of America’s news media outlets. Today I want to mention the idea of a personal 24-hour news cycle – something I’ve noticed for a while but recently gave some more thoughts about.
As with many people nowadays, I rely on Facebook News Feed and Twitter timeline to read and receive news, engage in discussions or simply stay updated with the whereabouts of people I’ve come to acquainted through the years and over 2 continents. A testament to this was how I personally chose to stay updated with the Boston bombings two weeks ago purely through these 2 media. I rely on the people I follow on Twitter (a list of semi-carefully curated sources) for noteworthy reports and retweets. I didn’t even look at trending hashtags’s feeds – those were too overcrowded and less reliable sources of information. I looked on Facebook for more reactions from the people closer to me, whom I knew personally.
In a (long ago predicted) way, my social media has slowly replaced newspaper and TV for me as a source of information. Not just for daily news and professional insights, but also for breaking news and latest reports.
All of this is just a context for the point I’m trying to make. Out of the 1100 plus friends I have on Facebook, half reside in Asia (more specifically, South East Asia) while the rest are dotted over the rest of the world, with a concentration in the US.
If my Facebook News Feed activities were to be plotted on a heat map, I’m sure the most red area would be around 7-11pm EST, the time when a lot of my Facebook connections (a majority of whom are in my age range) update their Facebook statuses, share interesting news or just be out and about on Facebook and Twitter socializing and commenting on other people. Things would then start to die down around midnight, and around 2am I wouldn’t get many updates.
This has sort of formed my nightly habits – as a creature easily distracted by anything but my homework, I spend my evening catching up on the daily news on Facebook and only start on my work as the news cycle slows down. I suspect this is (at least partially) true for many of my college friends too, judging from the sheer number of people online on Facebook chat. (It would be an interesting study if I keep track of this number by the hour over time.)
Interestingly, when I wake up in the morning and reach for my phone expecting perhaps a handful updates through the wee hours of the night, I instead see a slew of updates coming in from Asia. In a way, this is not all too surprising – people who work on international financial markets would be very familiar with this overlapping in time zones. But on a personal level, it is exciting for me to realize that as I wrap up my day and settle down for a night’s rest, many other people I know (more than half) are just starting out on their new day. When a video or an article goes viral and originates from the Western Hemisphere (like the Boston bombings), I will see updates from this side of the world first, then later another wave of updates (with seemingly equal sense of urgency) from Asia. Similarly, when New Zealand decided to pass the law legalizing gay marriage and broke out in a song, I first heard about it in the morning from my Asia-dwelling friends, only to be reminded of it later that evening by my friends here.
The same patterns could be observed on Twitter too, but to a lesser extent as I follow fewer people in Asia than those in the US.
Another interesting thing to note is that I see fewer updates from Vietnam than Singapore. There could be many factors at play here, and one of them could be the fact that access to Facebook is more restricted in Vietnam, so many people do not use it as their primary online social media platform as in Singapore or the US.
This observation isn’t ground-breaking or extremely interesting, but I suspect that it is something a lot of people who have online social connections spread across the globe (like college students studying abroad as an example) are and will experience. Our world has always been a very diverse and happening place – now all of that information is brought more to our forefront with better connectivity and better tools to stay connected. Spending a semester in far-flung places in Africa or treading over Europe no longer means dropping off the radar. It just means that we will hear from them at a different time in the day, and vice versa.
