All content work is not equal. Several factors influence how long it can take to edit a single document. Let’s review the seven levels of editing as detailed by Susan Wyche, and lay a foundation for how to calculate the time it takes to edit content. Read the rest of this post »
Programmers, 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.
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.
A contingent of XDers from across the country recently met up in New York City to attend the Responsive Web Design conference and workshop (RWD) led by the awesome duo of Ethan Marcotte and Karen McGrane. Several of us will be posting deeper digs on the subjects covered, but I wanted to share a few quick highlights from my perspective.
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 a 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 »
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 ?
The majority of jobs that we hold have us sitting at our desks from 8am to 5pm, five days a week. That’s 40 hours of sitting, typing, and talking. Sure, we walk to the bathroom, we walk to get coffee, but when I tracked my steps for an average day in the office, I was at around 3,000. For comparison, it is recommended that we walk 10,000 steps a day.
Many of us have difficult schedules and conflicts that don’t allow us to workout at the crack of dawn, or maybe we have to pick up the kids from school after work, so that is shot, too. Even though your schedule may not allow for you to carve out 45 minutes a day to work out, here are a few tips for staying “active” while sitting at your desk.
So it only takes you 15 steps to get coffee or go to the bathroom? Instead of taking the closest route, take the long way! For example, walk a lap around your entire office, get coffee/go to the bathroom, and then take another lap. This activity will easily add at least 100-200 more steps to you daily routine.
A pregnant co-worker of mine was the first in my office to bring in a yoga ball to sit on to help with her symptoms. While this does help ease those side effects, it’s also very effective if you’re not pregnant! In a study done by the State University of New York Buffalo, people who sat on a stability ball burned 4.1 times more calories than those that sat on a chair. This may not sound like much to you, but it adds up to more than 160 additional calories burned each week and 640 additional calories burned each month. Buying a stability ball doesn’t have to break the bank! Target, Five Below, and Wal-Mart carry quality stability balls that will meet your budget. Read the rest of this post »
1. Put your users first and search engines second. Providing a great user experience and creating valuable content for your target audience, will positively impact your Search Engine Optimization efforts by default.
2. Best practices are just that. Even though we have several best practices for different SEO factors, if something doesn’t make sense for your business or customers, then you should not obsess over it.
3. SEO is not a one-time or a stand-alone activity. SEO should be part of the overall Digital Marketing strategy and should be implemented throughout all digital efforts (press releases, social media, blogs, webpages, etc.)
4. Learn from the past, don’t take short-cuts and follow your gut. If it sounds too easy to be true (e.g. write articles just for backlinks, or “sprinkle” keyword X as much as possible on the copy), you will probably have to pay for it later. Search engines will only get smarter so do things the right way, and ask yourself if it adds value to your human users before proceeding.
5. It is a joint effort. If you are working with an agency it is critical to work together in order to succeed. Nowadays you can’t expect to outsource SEO work, let them “do their magic” and appear on the first page of search results. Having good communication and making sure SEO consultants are involved with the digital marketing team is key.
Color is an important element of visual language in most user interface designs. People process color before they are consciously aware of it., so the colors you choose to use can be the difference between a user-friendly design and a confusing, unusable design. Careful planning and implementation of color will create not only an aesthetically pleasing website, but a functional one as well. Below are ten color –related benefits you may want to consider when creating your next design.
1. Speed visual search. Color-coding will help the user stay focused on a certain area of information. This comes in handy when multiple areas of information are being displayed. Color-coding helps keep the eye focused and the information organized.
2. Improve object recognition. Colors should reflect the physical world. Seeing objects that are colored different than real world expectations causes cognitive confusion. For speedy recognition, use colors that are normally associated with objects, e.g., bananas are yellow.
3. Enhance meaning. Colors can be used for emphasis, to display a most important element or message. The example below shows an emphasis on red that gets our attention and clues us to what the site is all about.
4. Convey structure. In addition to speeding visual search, color can structure a page or presentation. It offers yet another form of organization, allowing the user to quickly identify and recognize information.
5. Establish identity. In today’s world, brand identity is the greatest visual recognition element of any business or organization. Color is ubiquitous and is a source of information; incorporating and utilizing the appropriate color palette in your visual design will reinforce the client’s brand throughout the user experience.
6. Symbolism. Color can also be used to represent cultural and psychological concepts. Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in someone else. Sometimes this is due to personal preference, and other times due to cultural background. Context plays a large part in color symbolism. One color can have positive or negative connotations depending on the larger framework. Take a look at the “white” website image below. In western cultures, white represents color of purity and peace. In Eastern and Asian cultures, white is the color of death. Understanding the cultural context of your client’s audience can alert you to culturally based color sensitivity.
7. Improve usability. Colors impact site visitors psychologically, and can affect the user’s experience. In user interfaces, color informs visitors of the most important functions and areas of the screen. Take the user’s need and site functionality into consideration before strategizing your use of color.
8. Communicate mood. Color creates mood. Research shows that lighter colors have a more positive effect on users than darker colors. The following link provides examples of colors and the psychology it impacts. http://usabilitygeek.com/colour-user-experience-psychology/
9. Show associations. Color can be used to indicate associations to groupings or other graphical elements. For example, we recognize the U.S. political party colors to be blue for democratic and red for republican. In the same way, colors used in web design can be utilized to help a user identify certain information or functionality.
10. Express metaphors. You have heard of feeling blue or seeing red as metaphors for being sad or angry. Metaphoric inferences can be translated visually in your design. Utilizing a color like pink, for example, can translate into a young, teen girl experience for a youth clothing store.
In the end, don’t be afraid to experiment with the use of color to enhance the appearance and functionality of your design. Color has great meaning and will you create an impactful, functional and beneficial user experience.
Tell us about your color experience and design considerations. Are there specific colors you avoid in your design to improve the user experience?
“5 Quick Ways to Improve Website Usability”-usabilitygeek.com
“10 Reasons to Use Color”-understandinggraphics.com
“Color Theory for Designers” –smashingmagazine.com
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.
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.
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 here, here 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.
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!