Spark

Subscribe via Email

Subscribe to RSS feed

Archives

Follow Us on Twitter

Archive for the ‘Innovations’ Category

6 Ways to Overcome Programming Roadblocks

shutterstock_61202323Programmers, whether novice or professional, encounter roadblocks and issues every day while working with code. This can lead to unnecessary frustration, hamper productivity, and pose a threat to reaching the product deadline.

The following are a few measures that I, as a front-end developer, have developed to overcome roadblocks while working in fast-paced environments with stringent deadlines:

1. I am setting up my developer workspace. It is working for him but not for me.
Setting up a workspace can be one of the most tedious or scary tasks a developer encounters when he or she starts working on a new project. Set aside ample time for this, and do not be scared by the heavy stack of technical documentation. Follow each step meticulously, and make sure you have all the pre-requisites setup. Do not hesitate to take the help of a peer or your team lead if you come across a issue – be it simple or complex. Ultimately, having a proper workspace is the foundation for all the great work you are about to do on the new project.

2. My code is not working or it’s throwing up an error.
We encounter this issue almost every day. We would have gone through the requirement, analyzed the dependencies, made sure the functionality is there, and still the code does not work. Rather than simply blaming the code for throwing up an error, it is best to investigate why it is doing so. Check the browser console, error logs, stack trace. Often it could just be a spelling mistake or a syntax error causing the issue. Have a peer or your lead look over the codebase. A second eye helps in most instances. Do not lose hope, get frustrated, and start cursing your job or the client.

3. My jQuery on click function is not working.
As a front-end developer, you would be dealing with a lot of jQuery, and this issue is something we come across quite often. The blame is blandly put on jQuery or the browser itself. Rather, make use of breakpoints in the JavaScript console of your browser. Check if the code has been rendered on the page and if there are any errors in the console. Put appropriate the breakpoint and examine each step. A div id might be missing, could be a syntax error or even a missing semicolon. Breakpoints are your friend when it comes to javascript errors. Make use of them.

4. Clear browser cache.
We know this, but don’t do this. You have made change to a CSS file, and it is not reflecting on the browser. Always remember to clear your browser cache (It’s easy: Just press cmd+shift+del on your browser, check cached images and files and click Clear browsing data) for any new changes to be seen on the browser.

5. Know how to Google for error.
So you have checked the console logs, made sure there is no syntax error, cleared browser cache and still something doesn’t work – end of the world! Not really, as long as there is the Internet to help us out. Someone would have encountered this already and might have put a solution or the issue could be a well-known one. One important thing is to make sure how to make the best use of Google to help us fix errors. Search for the errors with meaningful phrases, such as ‘jQuery works in console, but not in code’, ‘bootstrap modal dialog function’ rather than simply searching for ‘jQuery is not working’ or ‘modal dialog issue.’ Another helpful measure is to search with the exact error message thrown in the console or error logs and often this might help us find a solution quickly.

6. Take breaks, and do not multitask.
Take adequate short breaks at regular intervals to regain your focus and keep up the concentration. If you have been looking at your computer screen for too long and you encounter an issue, chances are that you would end up stressed out or frustrated and lose focus. Hence, taking breaks is important. Secondly, we all think we can multitask, switch between different windows while drafting an email or checking one. We are actually not multi-tasking here. Rather, we are shifting the focus of our brain to different jobs in short intervals of time. This is bound to make you stressed out after a while and leave you feeling tired. It is best to focus on one job at a time, complete it, and then move on to the next to increase your productivity.

I hope these measures help you mitigate a roadblock when you are working with code every day. What are some of the measures you have been following? Share them below.

The Connected Car Platform Conundrum

I recently completed some proof-of-concept work for a major automotive manufacturer and I have come to the realization that the automotive manufacturer’s approach to the concept of the “Connected Car Platform” is going to run into growing pains as the pace of mobile innovation continues unabated.

One of first issues I ran into was that I did not own any of the client’s vehicles so I could not develop against an actual head unit but instead, had to use a head unit emulator.  Each manufacturer has their own head unit (that is the screen in the dash and all the associated systems that controls the music and any information displayed on the screen) with their own custom software and approach to connectivity.  This requires a mobile developer to work with aconnected_car multitude of manufacturer’s SDKs in order to have their mobile app work with any number of vehicle platforms.  The current state of the world in terms of mobile development for car platforms is very similar to what we found ourselves at a number of years ago when you were trying to decide how to support four or five different mobile platforms (iOS, Android, Microsoft, Blackberry and maybe Symbian).

Either you choose the top two or three, depending on the size of your development staff or looked at an expensive alternative such as Verivo. For the small mobile developer or development team, are you only going to support Ford and GM, leaving out all the other vehicle platforms? That might have worked in the 50s when GM and Ford dominated the automotive landscape, similar to what iOS and Android do in mobile today but not now.  There are initiatives such as the Open Automotive Alliance, however, their goal is to bring Android Auto to vehicles.  That cuts out the iOS platform and for families like mine who are blended (I have an Android phone but the rest of my family has iPhones), that won’t work.  Apple has come out with CarPlay but again, supporting that platform in a vehicle cuts out the Android consumer. Read the rest of this post »

Front End Development: CSS-centric or JS-centric

Recently, I was reading this article which came across my newsletter, outlining what Front end developers need to know for this year and beyond. What struck me was where the author talks about the growing gulf between those who focus on CSS and those who focus on javascript. Isn’t Front end development about both css and javascript? Lets not forget html! But what’s been mentioned is indeed true. Here is how I tend to see this pattern.

I started my career as a web developer and my daily source of bread involved taking a psd asset, slicing and dicing it and creating pixel perfect, browser compatible html and css using cool jQuery plugins to beautify the UI. And that’s where my interest towards javascript began. I got to know the basics, understood the different paradigms, kept track of its progress, introduced to the MV* frameworks, got to know node, the build tools, pre-processors, et al.I would say many of us peers share a similar career path. 

But there is another set of front end developers (or what do I call them) who solely focus on javascript and thanks to css frameworks (bootstrap, foundation, etc), writing css has never been so easy. They need not know the intricate differences between css2 and css3 nor how different browser engines interpret the css box model. They need not even support IE8. They are skilled and adept in the javascript MV* frameworks, node, the different build tools, good enough to create a web application. 

These two different breeds of front end development raises some very interesting questions. How should the former advance his career ? And should the latter fall back to learning basics of creating pixel perfect sites ? Or are there two different sets of Front end developers now ? One solely focusing on creating pixel perfect html, css and js while the other focusses on MV* frameworks. How should the corporations decide on hiring whom they need ? 

I personally feel if you are from either group, it is still important to know the basics of any fundamental technology you are working on, think from a broader perspective and be inclusive. What do you think ? 

Client side Templating and Performance

A lot has been talked about client side view templates hindering the critical path, thus affecting performance. I have made an effort to summarize the need for client side rendering and measures to enhance the performance.

Before we actually jump on to measures, lets revisit how today’s web application ended up being rendered and compiled on the client (browser) using javascript based templates –

Before the advent of nodejs and javascript templates, how did one used to render json data on the browser ? 

Front end developers (FED) used to write prototypes based on html, css, jquery and hand this over to the backend developers. Backend devs take this asset and integrate it with the java code, parsing the json themselves directly in the servlet or jsp. Here, it takes only one call for the page to load and FED can focus on optimizing critical path, gzip the assets, etc thus improving the performance. This really worked well when we had only one or two FEDs for the whole project and a waterfall approach was followed. Designers used to provide the comps, UI developers created pixel perfect prototypes, and no design changes were allowed once the development started.

And then, what happened ?

Coming back to where we are today, as the web evolved, more focus is put on User Experience, and with the introduction of LeanUX, design and development are being done simultaneously. Now, backend developers cannot change the html in the jsp or servlet every time the design changes and becomes frustrating for them and they don’t see the need to do that at all. Enter jQuery and ajax. FEDs can make an ajax call to the RESTful service, parse the json and render it on the presentation layer, i.e jsp. But, this resulted in a convoluted mess of spaghetti code and became hard to maintain as the application grew. 

Same time, javascript became more mature and nodejs was introduced.  With the help of nodejs, enter client side templating – handlebars, mustache, htmlbars, etc. These templates are logic less (no if, else, for loop statements in the html) and provided a clear, neat separation of html and data paving the way for a true MVC architecture on the client. Both front end developers and back end devevelopers are happy as FEDs can focus on neat reusable, DRY html with dynamic data while backend developers can focus on generating the RESTful API service, data binding and need not worry about design changes at all. Because, data parsing is completely done on the browser now. To help with this data parsing and templating for the FEDs, a host of task runners to improve performance, based again on nodejs got introduced – grunt, gulp, etc. So that, FEDs can focus on the html and the task runner can do all the performance optimizations for them. Wonderful, isn’t it ?

So, what is the disadvantage of this client side templating ? 

With client side templating, every ajax call we make, there is an extra http call on the browser, and the template has to parse this data as well as render itself on the browser. Enter performance issues and critical path rendering.  

How to remediate ?

Fallback to nodejs for solutions again. Client side templating is still fairly new and as the web progresses, definitely the focus will be on ways to render the data on the server itself. There is already htmlbars, which is out to do that as mentioned herehere and also here.

Ultimately, the advantage of separating html from the backend code and allowing front end developers to make robust design changes concurrent with the development cycle has proved more advantageous, than the performance issues with the client side templating.

Take the Plunge. Get Up to Speed with Front-End Build Tools

A colleague recently asked me to give him a high-level overview on how to get started using these fancy front-end build tools everyone’s talking about. Since I’m a team player, I thought it would be best to share my advice with all of you as well!

First, what the heck am I talking about? What are “front-end build tools”? Simply put, there is a community of people and a whole bunch of services out there who just want to make it easier for front-end developers to build projects. Their motivation? Why go through the hubbub of setting up your working directory structure, downloading the plugins and libraries you need, writing scripts for minification, etc., when all of that can be automated?  Enter the realm of build tools.

Now that you know what they do, how do you use them? I fully support the idea of learning by doing, so my job here is to introduce you to your new friends, and let you guys get to know each other on your own time. Have fun!

The Tool Trifecta

Read the rest of this post »

For Enlightened CIOs, the “I” Stands for Insight

Who’s the most important marketing person at your company? Your CMO? Someone on her team? Maybe your CEO? What about your CIO? While your Chief Information Officer isn’t likely to craft your next campaign, the impact he or she has on customer experience is becoming more direct and more critical every day.

shutterstock_234372760The reason is simple, and it has to do with insight. More and more, CIOs and their teams hold the keys to unlocking the customer understanding that designers and marketers crave. A convergence of trends — abundant customer data, demand for greater insight in defining and managing customer experiences and a growing need to empathize with a wider range of customers — are driving CIOs into the insights business. A question remains, however, in how effective marketing and IT teams will be in working together to uncover customer data and convert it into meaningful actions.

Insight into customer behavior is what separates good customer experiences from bad. Insight drives empathy, a raw ingredient in the effort to humanize technology and harness its brand-building potential. The astute use of customer insight is so vital that we include it as one of seven factors in Perficient’s CXIQ Assessment, our measure of an organization’s customer experience maturity. While every company offers its customers an experience, few understand what it takes to systematically turn customer insight into the superior experiences that lead to increased preference and loyalty.

Read the rest of this post »

Reconsidering Enterprise Wearables

I was talking to a colleague a number of weeks ago and the topic came up of where mobile was headed now that smartphones/tablets have become “commonplace”. The three areas that seem to get a considerable degree of focus is wearables (whose hype will be even further boosted if Apple releases the rumored iWatch on September 9th), Google Glass, and Bluetooth Low Energy (the catchier-named “iBeacon” to you iOS types). As a mobile architect, trying to keep up with all the things going on with mobile, I try to keep the deluge from being overwhelming by focusing on those mobile technologies that have enterprise applicability and that clients may come to Perficient seeking expertise. Therefore, I told my colleague that I had dismissed both Google Glass and wearables as more consumer-focused and that my focus was on the possibilities of iBeacons in the enterprise.

However, after a number of subsequent conversations with other mobile architects and articles such as “Salesforce.com sees wearables catching on with customers, partners” has caused me to rethink my position. While I am not confident in Gartner’s claim that by 2017, wearable devices will drive 50 percent of total app interactions, I moto360do believe there is a place where having access to data on your wrist (rather than digging into your pocket for your cell phone or having to have a tablet in one hand) or a headset will have advantages to various classes of enterprise users such as those who require hands-free access such as industrial (warehouse, transportation, etc.), healthcare or in the case of one enterprising firm, replacing access key cards with a wearable.

The challenge for mobile architects and enterprise IT in general is to understand how wearables could provide an advantage to the business (by actually going out and observing how warehouse workers may be using ruggedized tablets now rather than clipboards or rolling computer kiosks and how a wearable could provide an even more productive work environment) by starting to take a look at this technology. This means short R&D initiatives with minimal investments in both hardware and developer time (taking fail-fast to a new level) and developers open to new approaches in terms of screen size, data input, even further optimization of enterprise data access over what is needed for smartphones and processors/memory. In addition, after the issues that firms have had with BYOD in relation to security and mobile device management, determine if wearables create issues that smartphone access to the enterprise did not already expose. If so, better to address it now rather now in an R&D mode rather than later, when you are creating a true business application. The final issue of course is to determine which platforms will break out with many new watches (Apple iWatch, Moto 360, Samsung Gear ) being released and all of which are jockeying for position.

Microservices as a Mobile Development Enabler

A mobile application has very little function without data to work with and enterprise business mobile applications, even more so. This has given rise to the visibility of application programming interfaces or APIs within the enterprise. Businesses are using APIs to allow visibility to certain business data to business partners outside the company. This concept is nothing new, businesses have been sharing data through Electronic Data Interchange (EDI) and Value-Added Networks (VANS) since the 1980s. However, in the last two years, the spotlight has again shown on APIs as the linchpin to support mobile development.

Microservices as a Mobile Development EnablerOne facet of creating APIs to support mobile development is Microservices which are small, single-purpose, server applications and that can be composed together to form other server applications. The idea is that a microservice does one thing well and executes as a standalone application within a server container (which is one of the differentiators between microservices and their larger SOA brethren). A number of IT technologists have equated microservices with the idea of Unix shell pipeline apps in that they share characteristics such as “small”, independently deployed in their own container, may communicate with each other and are loosely-coupled. James Lewis and Martin Fowler of Thoughtworks published an excellent paper that covers Microservices 101:

In short, the microservice architectural style is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API.

You can say that the above statement could also fit SOA but Lewis/Martin call out how microservices are different enough to stand as its own architecture.

One of the reasons that microservices is a popular choice for mobile development is that each service can start out small, the developer can work both sides of the effort, creating both the mobile app and the service to support it, iterating the services to meet the needs of the mobile app and simply deploy the changed service without coordinating with other developers or the service development team.

This leads into the second trend besides mobile development that has pushed Microservices to the forefront which is the shift to DevOps and Continuous Delivery as another key enabler. The reason for this is that microservices support the need for quicker, independent development (no teams), easy rollback, developer-owned (no handoff to the service support team, it follows more of the “you built it, you support it”), and frequent releases.

Microservice allows an easy and flexible way to integrate automatic deployment with Continuous Integration tools familiar to developers such as Jenkins. That is not to say that microservices provide some type of free-lunch; once the size, number and complexity of the services move out of infancy, a number of issues need to be addressed including operational overhead, a higher level of DevOps skills and the complication of managing a large number of services, many of which perform some level of service inter-communication.

SOA has been around for quite a while and it is difficult to remember when it was the new kid on the block. For the most part, service development around REST and the JSON data interchange format has taken hold and microservices has made it easier for the mobile developer to easily and quickly build/deploy the services needed to support a mobile application.

Designing From A Fresh Perspective

As a designer, its easy to fall into patterns that conform to established models. But to truly innovate, you must bring a fresh perspective to every design challenge. I was recently reminded of the value of a fresh perspective, when my 7 year old daughter took on the challenge of making a computer for her American Girl Doll. Because we all know that any self-respecting doll, has gotta be connected.

IMG_3311

American Girl Doll Using Her Laptop

However, this was not an ordinary computer. It was a Mac, which was already enough to make me proud. But it was also customized to her doll’s very specific needs. First of all, it was purple, which is the doll’s favorite color, it was also sized perfectly so that it could fit into her purse and it even had a rear facing camera to take pictures of the other dolls while she was on “Facebook.” But what amazed me the most was the keyboard layout. Yes it included most of the typical numbers and letters that you’d find on a keyboard. However this keyboard was also personalized. It had special keys for her email address, zip code, and Facebook username “in case she got tired of typing.” This really made me realize how much I hate typing in my email address all the time, especially on mobile devices. Wouldn’t it be great if I could have a single key that take care of that for me? Yes, I know most web browsers retain email inputs to support an autofill function, however mobile browsers typically don’t support that capability as well. And in mobile interactions, that capability would have most value.

IMG_3313

Personalized Keyboard

In designing her computer, my daughter never considered the limitations that come with a standardized physical keyboard. In her mind, a computer should be customized to meet the needs of the user. And in today’s world of virtual keyboards and personalization features, there is the opportunity to make that reality. It might even change the way we think about our personal devices. So in your next project, try injecting a fresh perspective and you may be surprised with the results.

 

 

 

 

Flex that Box Model!

The CSS Flexible Box Layout Module Level 1 (or Flexbox) is a box model specification in which the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.  In other words, it’s a neat way for front-end developers to layout content in a way that isn’t just “left to right, top to bottom”.

Flex that Box ModelBut I’m not here to tell you what Flexbox is, nor am I here to tell you how to use it.  At the end of this post are a few links that can cover that for you well enough.  No, what I’m here to tell you is that right now you in fact can use Flexbox.  Go ahead!  Use it!  Before vender prefixes were added, browser support for Flexbox had been sporadic and not very well adopted.  It was possible to use Flexbox on any project you wanted, but the problem was it wouldn’t work on a majority of browsers and mediums.  Now (looking at this Can I Use chart), adoption is so widespread it’s almost universal.

The only problem is (say it isn’t so!) Internet Explorer.  Trying to use the flex box model on anything earlier than IE10 just isn’t going to work.  This is the main issue, and unfortunately it’s a pretty dang big issue.

The solution? Go ahead and use Flexbox, just be sure to contain it to mobile devices (or progressive enhancements).  Most uses that I’ve had for needing to adjust the box model layout in a way that required Flexbox were design changes from desktop to mobile devices. Say you’ve got a two column layout with your main content and a right-hand sidebar.  If you wanted that sidebar information to float to the top of your page on a mobile device above the main content, you were going to have a difficult time. With Flexbox however, it’s pretty simple. And if used in conjuncture with media queries or Modernizr, keeping any usages of Flexbox limited to mobile device should be simple as well.

At the time of this posting, I’m not aware of any shims or polyfills to make Flexbox work on IE9 and earlier, so it’s not looking like widespread adoption of Flexbox in Internet Explorer will be happening anytime soon, but never say never!  And regardless of that, it is now finally a good time to start use Flexbox on mobile devices!

If you’d like to learn more about using and implementing Flexbox, here are two links from Chris Coyier of CSS-Tricks: