Keith Bartholomew

About Me

Dear Designers: Top 5 Ways to Make a Web Developer Your Valentine

Macintosh with heart on screen

As a web developer, I get a lot of people lightly criticizing my social skills or comparing me to Sheldon Cooper or pretending that when I talk about Javascript, I’m all of sudden speaking in Klingon, even though Klingon sounds nothing like Javascript—not to mention that the tonal complexities of Klingon far exceed…I digress.

I get along very well with the designers I work with, but I’d be lying if I said I didn’t like working with some more than others. So, designers: if you want a developer you work with to be positively smitten with you this Valentine’s Day, stick to these 5 tips and you’ll be tugging at their heartstrings in no time.

1. Be Consistent

Developers work in patterns. It keeps our code clean and elegant, and allows us to sleep at night. So if you’ve designed an entire website with 1-pixel lines separating each section except for that one spot on that one page where it didn’t look right so you made it a 2 pixel line, expect a fight from the developer, who will grill you and demand that you justify the reasoning behind this breach of protocol. And if your design uses dozens of shades of the same color in seemingly random places, well…don’t say I didn’t warn you.

2. Think in Templates

Most websites are generated by taking a few templates and adding content to them. Your back-end web developer’s life will be made much easier if you’ve considered your design in terms of major blocks. Imagine you had to sketch the home page of your website, but you could only draw 4 or 5 squares to do it. What would those squares be, and what would they contain?

3. Ask for advice

Web developers tend to spend a lot of time reading and learning about best practices and what’s cool or trendy or cutting-edge. Use that knowledge! If you’re stuck on a certain aspect of your user interface design, ask for their ideas. They may suggest a really creative way to solve the problem that you never considered, or even knew was possible. And, if they’ve got some experience, they could probably also warn you against certain pitfalls that they’ve seen on other websites or apps that just don’t work well.

4. Think Responsively

With the explosion of tablets and smart phones and “phablets,” there are more and more devices and screen sizes being used than ever before. Responsive design is an elegant way to solve this problem, but it requires completely re-thinking the visual design process. Sure, that spacious Photoshop mockup looks nice, but what happens if you don’t have that much room on your screen? Does your text resize? Do certain elements expand or slide or disappear altogether? If these are questions you’re constantly hearing from your neighborhood web developer, then do that person a favor and answer the questions beforehand so there are no doubts and no surprises. Consider every possible screen size, paying extra-special attention to the screen sizes of popular devices like the iPad and iPhone. Also, check out viewportsizes.com for a great reference of popular devices and the sizes of their screens.

5. Do the Impossible

Developers are problem-solvers at heart and love a challenge. We might groan and sigh when you come to us with your concept for a 4-dimensional pie chart that boggles the mind, but deep down we want to make that dream a reality just as much as you do. Go to your developers with grand ideas, and try to get them as excited about it as you are.

Keep your web developers in mind this Valentine’s Day! Skip the boxed chocolates or embossed candy hearts, and do something they’ll really appreciate. Ask them about the coolest use of HTML5 Canvas they’ve seen, (if you have 30 minutes to spare while they geek out) or give them a PSD chock-full of notes about scaling and breakpoints and progressive enhancement. They’ll be in love with you, and you’ll be in love with the results.

  0 comments about this.  Leave your own

4 Things to Expect at CES 2014

The 2014 Consumer Electronics Show is just a month away, which means it is once again the season for tech journalists and analysts and pundits to flock to Las Vegas and drool over the latest and greatest high-tech gadgets. This will be a big year for CES, as a number of brand-new technologies are reaching the exciting tipping point from prototype to mainstream gadget. We’re anxiously waiting to see everything that comes out of CES this year; here are a few things we expect to happen.

1. 4K and More K

“Ultra HD” TVs and camcorders will make their prime time debut, but getting 4K-quality content may still be challenging.
4K televisions and video products are beginning to show up in the mainstream market, but with sticker prices that boggle the mind, most consumers aren’t paying all that much attention to the category right now. 4K TVs, which have around twice as many pixels as what we now call “HD”, have been around for several years, but have only recently transitioned from being experimental toys to tangible products for high-end consumers.

Don’t expect any prices to be slashed—4K is still very new and very expensive—but do expect to see the market round itself out a bit at this year’s CES. There’s currently a content problem with 4K TVs, namely that there is no 4K content. Blu-Ray is currently limited to traditional HD quality, and only the highest-end professional cinema cameras can even record 4K video. Without any “Ultra HD” content, how can deep-pocketed early adopters possibly show off their new toys? Sony, for one, launched a 4K video download service to accompany its first 4K TVs, but expect to see several other players announce solutions of their own, from 4K camcorders to higher-capacity Blu-Ray discs.

Bonus: Look for a couple of 6K (or even 8K) prototypes to make a guest appearance.

2. Wearable Technology

Competitors to Google Glass and Samsung Galaxy Gear will try to steal the spotlight in creative ways.
Experimenting with wearable technology like connected glasses or watches seems to be the hobby of any tech company with a bored R&D department. Expect to see a lot more of this at CES this year, with a focus on building competition for Google Glass and the long-rumored-but-still-nonexistent Apple watch (As far as products that actually exist, look for competition to Samsung’s recently-launched Galaxy Gear).

Wearable tech is widely expected to be the next big product category in consumer electronics, as smartphone users continue to look for ways to be connected to the rest of the world without having to constantly pull their smartphones out of their pockets and purses to do so. Like 4K, the possibilities with wearable tech are all very new and immature, but that means only good things for consumers. This will be the year for extremely creative applications for wearable technology that, while not necessarily practical, are almost guaranteed to make any gadget fan geek out.

3. Digital Wallets

Gadget makers will search for ways to make buying things easier than ever before.
Credit cards are so 2013. Tech companies are going to look for new ways to remove some friction from the payment process, in order to make it easier for you to buy things and in turn easier for online vendors to get your money. Google Wallet is one of the best examples crossing into this area, but startups such as Coin, a programmable credit card, will be looking to gain traction and become household names. In general, phone-based payments will be a hot topic, whether in the form of Bluetooth Low Energy companion devices, or new services that allow consumers to make purchases quickly and easily.

4. A Hype Bubble

CES has been over-hyped for years, and this may be the year the bubble finally bursts.
Amidst the excitement over pixels and watches and wallets, keep your eyes peeled for signs that CES is getting a little over-hyped. This is a sentiment that’s been brewing for a couple of years, and it seems that journalists everywhere are holding their collective breath for the bubble to burst. The trouble with CES is that it’s a show for companies and investors within the industry, not necessarily for consumers themselves. Most of the products revealed at CES won’t be available for several months, and even then may not be widely available or even successful. Consumers looking for a product launch with an “available next week” tagline will be sorely disappointed. In truth, we’ve been spoiled by Apple and Google’s product announcements, which frequently debut products that are available almost immediately.

As a tech-savvy consumer, keep in mind that CES is not the place to go for instant gratification or to build a shopping list. It is, however, a great way to get a pulse check on the industry in general and to build excitement for what the future of consumer electronics can do to improve our lives.

  0 comments about this.  Leave your own

The Quest for NodeJS Best Practices

NodeJS, the hot new non-blocking server-side platform, should probably be on every developer’s “to learn” list. I’m not saying you should use it to develop every project you ever work on from this day forward, but you should definitely commit some time to playing with it and seeing what it’s all about.

And when you do decide to go down this wonderful path of learning, you’ll find something a little unexpected—there are really no NodeJS best practices. There are tons of tutorials out there, some of which are really great and some of which seem like they were written by somebody who just started learning NodeJS for themselves. Add to this the fact that NodeJS is very, very new (created in 2009) and you have a young community full of novices all trying to find their way around without a whole lot of help.

This is a problem that’s somewhat unique to the NodeJS community. You could make the case that Ruby on Rails is just as young NodeJS, but Rails inherits a lot from its Ruby background, a language that’s practically synonymous with best practices. NodeJS is just Javascript though, and Javascript has this nasty reputation as being the go-to toy for “script kiddies.” Indeed, there are a lot really badly-written solutions to Javascript problems out there…in a world where new developers learn by Googling, these bad habit can be hard to get rid of. All of a sudden, our de facto NodeJS best practices are actually just a frankenstein compilation of what others have done so far.

The second problem is that because NodeJS has the ability to be written in very succint ways, tutorials tend to write entire examples as one single, monolithic “app.js” file. This is great when you want to walk somebody through a couple of concepts, but when a young developer copies your code verbatim and expects to turn that into a production-ready web application, a pretty significant problem develops. All of a sudden, there are thousands of lines of code out in the wild, all of which is nearly impossible to maintain…and it’s all because the developers simply didn’t know any better.

Creating your own NodeJS best practices isn’t difficult, either. Many of the principles that go into building maintainable PHP or Rails apps translate very easily to the NodeJS world. But what the NodeJS community needs is a unified forum to share and criticize each others’ opinions of what great NodeJS apps look like, and what young, budding developers can do to follow in those footsteps.

  0 comments about this.  Leave your own

Three Dimensional Web Navigation

SVG Demo

TL;DR: Play with the demo

Scrolling is so tired. Every single website: up, down, up, down. With some projects, when you really need your user experience to stand out and draw somebody in, we have to think outside of the box and play around with the three-dimensional space.

Many websites have taken the obvious approach of scrolling their content from side to side as a way to stand out. This can be very effective, because it provides a fresh experience without being too confusing to the user. Working with two-dimensional space is also very easy to accomplish with the tried and true tools of CSS and Javascript.

As web browsers continue to get more powerful, however, new opportunities are opening up in three-dimensional space. Imagine, for instance, that instead of scrolling down a long website, you dive deeper and deeper into it. In combination with other two-dimensional navigation, this can literally give your web app depth, and provide a visually interesting way to indicate to your users a hierarchy in your site’s content. It also looks really cool.

There are a number of ways to go about creating 3D effects: There is experimental support for 3D in the HTML5 canvas, and there is also experimental (although slightly more standardized) support for 3D effects in CSS3. In the end, for the sake of compatibility, I decided to “fake” the 3D experience, as the results were essentially the same, and the performance just as good.

I found that by adjusting a combination of scale (increasing/decreasing size), opacity, and blurriness, I could create the effect of a page flying towards or away from a camera, going out of focus, and either disappearing in the distance or behind the “camera.” To keep things looking crystal-clear at any point during this zoom, I used Scalable Vector Graphics (SVG) for most of the design elements. And just for fun, I added some Hammer.js hooks, so users with touchscreens can play with the demo, too.

Play and enjoy: interactive demo

  0 comments about this.  Leave your own

Fun With Fonts: Chicago

Many of my projects begin with a font. Sometimes, the subtle curves of a certain typeface can define an entire brand.  The idea of fonts on a computer is a relatively new idea, and we’re still seeing fonts evolve with the changing times. One of the first typefaces developed specifically for a computer screen was called Chicago. Susan Kare created it for the original Macintosh way back in 1984. It’s a classic sans-serif, and is every bit as notable as Helvetica or Rockwell are today. Inspired by the retro feeling invoked by Chicago, and with free time for some Photoshop fun, I figured a little homage was in order:

You can download a bigger version here.

 

  0 comments about this.  Leave your own

Quick Tip: HTML5 Data Attributes

Many times, as you press ever forward to develop the next best website, you may find yourself needing to establish a relationship between two different elements, for example when a click on a button should make another div visible. Or, you may need to attach some custom information to an element to be used later by your JavaScript. Instead of leaning on the id or class properties to identify these elements to jQuery, the HTML5 specification gives us a great tool in the data-* attributes.

You can name these attributes anything you want, for example:

<div data-page-id="3"></div> or <div data-bgimage="http://..."></div>

You can then select one of these elements with Javascript like this:

var div = $('div[data-page-id="3"]');

or you can just get the value of the attribute like this:

var value = $('div').attr('data-page-id');

These attributes and values don’t have to be unique, so you could have several elements with the same “data-page-id” value. You can take advantage of this to connect to the two elements together. Another popular use of the data attribute is to “lazy load” images. For example, one of my projects contains animated GIFs that are complex and about 3-5MB EACH! It wouldn’t make sense to load all of those when the page loads, especially because most of them aren’t visible at first. We can dodge this problem by referencing the large, animated GIF in a data attribute, but only loading a small static one until the image becomes visible in the browser:

<img src="static.gif" data-src="animated.gif"/>

and then with Javascript after some event, such as when the element scrolls into view:

var newImage = $('img').attr('data-src');
$('img').attr('src',newImage);

The possibilities are endless!

  0 comments about this.  Leave your own

Are Our Brains Wired for Tragedy?

2013 is turning out to be a shockingly news-filled year, with fatal tragedies ranging from the Sandy Hook Elementary shooting (technically 2012), The Boston Marathon bombing, and now the deadly explosion in West, Texas.  Add to that a series of homicides and jail escapes in my hometown, and you might start to draw the conclusion that we live in a scary, tragic world. And you’d be right.

If there’s one thing to take note of amidst all this suffering, it’s that news travels fast—and with social media, it travels even faster.  But why are we drawn to such tragedies? Why is the same sad story so compelling to watch or read again and again?

A Tale of Two Hormones: Adrenaline and Oxytocin

We’re all familiar with the “adrenaline rush” of doing something dangerous or thrilling. Its caffeine-like jolt can be addictive. With more and more sources of news, from “man on the street” tweets to first-person video from a smartphone, the illusion of “feeling like you’re there” is getting stronger and stronger. The fear of a fire or explosion is intense, and the virtual reality of the news allows us to feel the adrenaline rush of such events without the danger of actually being there. It’s where the news junkie meets the adrenaline junkie.

You may think all of this bad news would just leave you feeling sad and disheartened, but that’s where another hormone comes into play. Oxytocin is a powerful hormone that causes us to feel compassion for others. Our bodies release it naturally as a response to the sadness we experience when seeing others in pain.  Oxytocin has some interesting side effects though—it creates intense feelings of bonding and closeness (hint: it’s also released during childbirth and orgasm) that drive us to help out our fellow man however we can. This is all capped off by the fact that we also release a waterfall of endorphins when we donate money or help out, in a phenomenon so strong psychologists call it the “helper’s high.”

Between the rush of adrenaline and the endorphin high of oxytocin, it’s no wonder we have such mixed yet intense feelings about tragic events. It unites us when we’re divided and ignites the fire of activism in each of us. It seems, sad as it may be, that our brains are simply wired to experience—and respond to—the tragedies of everyday life.

 

  0 comments about this.  Leave your own

Why Fading Support For Gun Control Tells the Real Story

There’s no denying that the December 2012 shooting at Sandy Hook Elementary re-ignited the civil discourse on gun control. And after such a tragic event, especially so soon after a similarly shocking shooting in Colorado, it’s hard to blame anyone for wanting to fix a gun violence problem that seems to have gotten out of hand. President Obama, Congress, the NRA, and various lobbying and activist groups all jumped on the bandwagon to console the grieving families in Newtown—and maybe gain a few polling points at the same time.  Public opinion on gun control spiked tremendously, with 85% of Americans saying they would support stricter background checks and 80% saying that gun sales to the mentally ill should be prevented.

Months after Sandy Hook, however, support for gun control reform seems to be fading away, falling to nearly the same levels as before the shooting. Support for stricter gun control laws has fallen to 47% since the shooting, and a number of lawmakers are ratcheting back on the ambitious gun control promises they made immediately after the shooting.

Do we forget so quickly?

The current opinion on gun control is not representative of the actual opinion on the subject.Many have criticized what appears to be very slow action on behalf of Congress, and President Obama even said “shame on us” if Newtown becomes forgotten in time. For long-time gun control activists, the Sandy Hook shooting was in many ways a blessing in disguise to wake up America and convince lawmakers to finally improve the country’s seemingly ineffective gun control laws. Just as outspoken after the shooting were the country’s staunch gun rights supporters, who rather courageously (or foolishly, depending on your perspective) said that nothing should change about the culture of gun ownership in America. There is clearly no single, unanimous opinion about the issue, nor is there a clear way to fix the problem, should we seek a way to fix it at all. The modus operandi in local governments and Congress alike, however, seems to be to do something, and do it now.

Is it right to act so soon after such a traumatic event? Are our minds clouded with revenge and the need for closure? Are our lawmakers—and we ourselves as a country—ready to make the best decisions for the future of our society?

The problem is that we are currently outliers to ourselves—the current opinion on gun control is not representative of the actual opinion on gun control, when unaffected by significant external events. Before the Newtown incident, Americans seemed pretty happy to live in a country full of assault weapons and the occasional mass shooting—it just comes with the territory, right? It’s a classic knee-jerk reaction, and we would be taking advantage of an almost unavoidable emotional reaction to accomplish a long-standing political agenda.

I’m not saying whether that political agenda is wrong or right, but perhaps we should wait until we’re all in a “normal” state of mind before deciding what to do about things.

  0 comments about this.  Leave your own

This is What it Looks Like When Apple Fights Back

​In a relatively rare move, Apple launched a new advertising campaign for the iPhone 5 over the weekend, about halfway through their traditional release cycle. This comes just days after Samsung launched their newest flagship phone, the Galaxy S4.  While years ago, Samsung might have been expected to fumble the launch of potentially game-changing phone, they’ve been at their advertising finest, with great (albeit poorly translated) ads and videos, promoting the Galaxy S4 as a “Life Companion” and a fun device to bring you closer to your loved ones. This kind of maudlin emotional appeal kind of reminds you of the sickeningly-sweet TV spots Apple did for FaceTime when it launched.

Apple’s course correction is certainly warranted. A number of high profile iPhone users have been seen switching to Android lately, citing the platform’s rapidly-advancing set of features and the bevy of phones with all-star hardware specs, although some maintain that the extensive “features” in Android phones are more gimmicky than useful, like a built-in kickstand or the ability to chest bump your phone with somebody else, as long as they have the exact same phone that you do. With the launch of Samsung’s newest phone though,round after round of sexy Android phones like the HTC One and the Galaxy S4 have begun a sea change in customers’ opinions.

Samsung Galaxy S4

Apple stands to lose lots of ground while the Galaxy S4 wins hearts and minds.

Now the seemingly unstoppable technology and marketing juggernaut known as Apple is playing a little bit of catch-up.  This is something new for the company that has led the smartphone race for the past several years, despite being obviously behind the bleeding edge of technology.

Unless Apple makes a drastic change in its production pace, we won’t be seeing a new iPhone until late in the summer. With several phones on the market capable of blowing the iPhone 5 and the stale iOS out of the water, Apple stands to lose lots of ground while the Galaxy S4 wins hearts and minds. And here we see Apple, which tends to coast on its products’ popularity and let them speak for themselves, giving the iPhone 5 a mid-cycle boost to focus consumers away from the Galaxy S4.

Advertising battles are nothing new, but Apple’s new campaign marks the beginning of a fundamental shift in the smartphone market. Apple has long characterized the playing field as: “There’s iPhone. Then there’s everything else.”

Now it seems that things may be slowly shifting towards: “There’s a lot of options, and one of them’s an iPhone.”

  0 comments about this.  Leave your own

WordPress in the Enterprise: Some Assembly Required

​If not for name recognition alone, WordPress is without a doubt one of the most popular publishing platforms on the Internet today. Developers are familiar with it, designers love the simplicity of creating themes, and users love the point-and-click ease of use. But can WordPress really work in the enterprise? I mean, flexibility is one thing, but large companies have a whole spread of other issues to contend with, such as compliance, support, not to mention the need to manage tons of websites with a limited staff.

Making WordPress and the enterprise work together is by no means impossible

At TCU, we’ve been hard at work for months getting WordPress fit for the enterprise. I have to admit, I was skeptical at first. Necessity is the mother of invention though, and after weeks of research and trial and error and inspiration and more trial and error, we’ve finally come up with a WordPress system that’s actually scalable and manageable in an enterprise environment. Here are some tips if you find yourself trying to make WordPress in the enterprise actually work:

  1. Automate Everything. WordPress is built for the single person or small team who wants to set up and run a single small blog. While it IS very easy to set up (WordPress highly touts their “5-minute” installation), things start to get out of hand when you have to repeat that process for 30 or 40 different sites.  We use the awesome automation capabilities of Puppet to push out WordPress sites from a central location. This is especially handy if you have clustered web servers, because you can make a change once and it gets distributed to every web server at the same time.
  2. Multi-Tenancy is essential. Multi-Tenancy is the idea of having multiple instances of WordPress all sharing the same code.  If you know how “shortcuts” work on a computer, then you already know how this works. Take for example, the wp-login.php file, which handles the process of logging in to your blog. Instead of having 50 different copies of this file for 50 different sites, we just keep one “master” copy and then have 50 shortcuts pointing back to the one master copy.  This might seem like a lot of extra work at first, but consider when there’s an update for WordPress or one of its plugins, you just have to update the master copy, and all 50 sites are instantly updated at once. That’s what we call a 98% reduction in effort!

  3. Don’t be afraid to write your own plugins or themes. As time goes on, you’ll start to realize that there are some very specific things that your enterprise would like all of its WordPress sites to do, and that the plugins available to do those things…well, suck. You may want to have logins integrate with a Single Sign-On system, or share visitor data with a CRM system.  If you have some skilled developers in your enterprise, you’ll find that writing WordPress plugins is a piece of cake. Creating themes might seem like a restrictive thing to do, but in many ways WordPress themes just act like giant plugins. That means if you want some really intense, integrated functionality in your theme, you can add it to the theme’s functions.php file for all of your users to enjoy!
  4. Tier your heart out. Big companies love tiered applications, and for good reason: it works. Between the load balancer, caching server, web servers, shared storage, and database, there’s no limit to how much you can spread out the potential load of your WordPress sites to reduce the risk of having downtime.  And when you’re deploying WordPress in the enterprise, there’s a good chance you already have most of the tools in your environment to make a multi-tiered system like this work smoothly.

Making WordPress and the enterprise work together is by no means impossible, but it definitely takes a little ingenuity and a lot of elbow grease. And as with any project on the web, it’s a perpetual work-in-progress. Don’t be afraid to tweak things as you go along, and never stop learning!

  0 comments about this.  Leave your own

Page 1 of 5 pages  1 2 3 >  Last ›