Category Archives: Web Dev

Testing 101 – 15 Ways to Build Quality Into Your Code

Things certainly have changed.  I remember a day when testing meant writing up a set of scenarios to manually test, or having a checklist of features to repeatedly test against on deployment day.  Now, with modern tools, there are lots more ways to test your code.  Automation can repeatedly test those scenarios for you, and ensure you didn’t break your code when new changes are made.  You can use these automation tests in lots of different ways, along with some basic things to keep in mind to ensure those tests are as valuable as possible.

Basic Types of Automation

  1. Unit Testing with Code Coverage – Write reusable test cases that test your functions, methods, and classes.  Integrate them into your automated build pipeline, and measure how much of your code is tested.  Aim for 100%, but expect a bit less.  Some unit testing tools are jUnit, nUnit, CA LISA, Rhino Mocks, and many more.
  2. Functional / System Testing – Write tests from your customer’s perspective.  walk through your application in the browser, fill in the fields with predefined values, and submit.  Test if the data is correct, if the validations worked, if the data was submitted.  Common tools for this are Selenium, Cucumber, CA Lisa, Rhino Mocks, etc.
  3. Browser and Device Testing – The Browser Wars may be over, but we still have a fragmented landscape of browsers used, and you have to test them all – Chrome, Edge, IE, Safari, Firefox, Android, iOS, phones, tablets, desktops… To cover them all, you can automate your tests and integrate with tools like BrowserStack, SauceLabs, Selenium, etc.
  4. Beta / Acceptance Testing – You need to ensure that you have built a quality project that meets the requirements of the business and the customer.  This is usually a set of manual tests completed by your customer before and / or after launch.
  5. Install Testing – This subset of existing automation tests ensures you exercise as much of your codebase as possible in a new environment, particularly production, to ensure your server installation has completed properly.
  6. Smoke Testing – A small subset of existing automation tests, most probably used in other cases, that ensures any environment changes have not had an impact on your codebase and its functionality.  These tests usually follow the happy paths (or red routes).
  7. Regression Testing – a complete and thorough suite of tests that exercise all of your code, new features and old, happy path and all known edge cases, including past and present bugs, ensuring you are prepared for a launch to production.
  8. Performance / Load / Stress Tests – Identify break points and thresholds in your software and hardware, and improve.  Common tools include jMeter, LoadRunner, Silk Performer, and many others.
  9. Security / Penetration tests – Make your code more secure, prevent hacking and attacks.  Tools include SonarQube, OWASP ZAP, Nexpose, WireShark, Retina, Aquila, and many more.

Tips To Keep In Mind

  1. Keep your code simple – Keep your code focused on solving one problem at a time.  This makes it easier to read and understand, code correctly, debug, and maintain.
  2. Pair Programming – Two heads are better than one.  Write your code cleaner, faster, and with less bugs.  This method comes with built in code reviews.
  3. Use Design Patterns and Architecture Patterns – Follow these, and you are using proven methods that other developers will understand.  The Gang of Four is a good place to start learning design patterns, and there are many others.  MVC, MVP, MVVM, and VIPER are some common architecture patterns that you can use to organize your code at an application level.
  4. Comment and Document your Code – Do this as close to the code as possible.  This makes your code easier to read and understand.  One way I like to do this is write pseudocode first, then fill in with actual code.  Then the pseudocode becomes natural code commenting.
  5. Automated Builds and Continuous Integration – Run your code and test cases as often as possible, make sure they all work together.  Jenkins is the most common way to achieve this.  Another common tool is Bamboo.
  6. Demos – this forces you to think holistically about your code, how you will communicate your solution to others, and gather feedback from your audience.  If you follow an agile methodology, chances are this is already part of your process.

 

9 Tools to Help You Recover from Malware

So I was at my parents’ house this weekend, and my dad asked a very simple question… “Could you take a look at my computer?  I can’t run CCleaner.”  I thought to myself… That’s great!  He has been running CCleaner regularly!  But when I sat down to take a look, things only got worse.  Windows Update wouldn’t start, CCleaner wouldn’t start, Microsoft Security Essentials wouldn’t start properly or update, and AVG Free wouldn’t install.  That is not good.  Here is a list of tools I used to scrub his machine, and boy did i need them all, and for different reasons.

  1. MalwareBytes Anti-Malware
  2. PortableApps
  3. SpyBot Search & Destroy
  4. SuperAntiSpyware
  5. CCleaner
  6. HijackThis
  7. AVG
  8. Microsoft Windows Defender
  9. Belarc Advisor

14 Web Site Graders To Test Your Redesigned Site

When you redesign or enhance your site, you make a lot of changes.  You change the content, the design, the front end technology, the back end stack, the user flows, the information architecture, everything.  It is tough to know what you have done right, and what needs help, particularly as it compares to other sites.  These sites can help show you what you have done right, what needs help, and how you compare to other sites.  I use them… and so should you.

  • https://website.grader.com/ – the gold standard of online web site graders. Shows performance, SEO, mobile capability, and security.
  • https://www.semrush.com/ – this site gathers a LOT of marketing information about your site… Monitor this information before and after your cutover.
  • https://validator.w3.org/ – Are you W3C Compliant?  Are you writing valid HTML?  Using this throughout your development will ensure your site is as readable and indexable as possible.
  • http://www.webpagetest.org – How long does the first view of my page take?  How about the second view?  This grader shows you both… just like the Developer Tools in Google Chrome.
  • https://developers.google.com/speed/pagespeed/insights/ – another technical site grader that can give you guidance where to increase performance.  Be careful trying to get 100/100, though… not everything NEEDS to be done.
  • http://nibbler.silktide.com/en_US – Evaluates your site down in four areas – Accessibility, Experience, Marketing, and Technology.  Still useful to get another view of your site.
  • https://www.woorank.com/ – “Run a review to see how your site can improve across 70+ metrics” – Marketing, SEO, Mobile, Usability, Technology, Crawl Errors, Backlinks, Social, Local, SERP Checker, Visitors.
  • http://www.similarweb.com/ – Another great site for a large, corporate web site.  But not a lot of information about performance.  Good to monitor usage and marketing metrics.
  • https://moz.com/researchtools/ose – Moz is known for its SEO tools, and this is an easy dashboard of information to monitor before and after your redesign.  The free version is useful, but the Pro version is even better.  Not a lot of tech help here, though.
  • http://www.alexa.com/ – 7 days for free, the paid version is the only one really useful.  Lots of marketing information is available, though.
  • http://builtwith.com/ – Very technical.  Shows you the infrastructure and software choices made by the development team.  You will be surprised.  Helpful for technology and information security teams.
  • http://www.google.com/analytics  – Free analytics tool.  Tells you who uses your site, how much, where they are from, what browsers, what time of day… a plethora of information.  Including Page Speed.
  • https://www.google.com/webmasters/tools – Free tool that shows you what index errors Google has encountered, things to make your site more indexable, and what your pages look like to the Google Search Crawlers.  Use this.
  • http://www.bing.com/toolbox/webmaster – Everything that Search Console is for Google, this site is for Bing.

So did I miss any tools that you use?  Are any of these ones you have struck off your list?  How do you measure results of your site before and after?  Leave a comment and let me know!

EDIT: Two more sites were recommended to me that help redesign projects, so I am adding them here:

2 New jQuery Plugins

I have just finished creating two new jQuery plugins.  I found them very useful for my own site, and thought I would share them with everyone else.  One is called FlickrTools, the other is SocialCards.

FlickrTools

FlickrTools is a simple jQuery plugin that queries the Flickr API, and gathers all the images that match a certain tag.  At some point, this can be expanded to query other properties in the API, but this is the simplest way to start.  I use my flickr images as part of my home page hero, and as a rotating carousel of images.  One of the nice things about this plugin is that the data retrieved from the query is reusable between both features on the site.  The hero is custom jQuery, whole the carousel uses Slick.

SocialCards

SocialCards is a jQuery plugin that queries all of your social media outlets and gathers all of your recent content into cards and displays them on your own site.  Currently it queries blog posts, Etsy, Flickr, Foursquare, GoodReads, Pinterest, and Tumblr.  Soon to be developed are Facebook, Google+, Instagram, Twitter, and Youtube.  It uses a masonry style based on the one I found on w3bits, that is configurable using CSS, included in the sample.  The plugin integrates with the Google API for easy RSS reading, and with Yahoo YQL API for other more complex data.

Please feel free to give these a try.  These are the 1.0 release, so they may not fit your needs exactly.  Reach out to me at brian.whaley@gmail.com with any comments, suggestions, or constructive criticism.

Upgrades to My Web Site – Eating My Own Dog Food

It has been a couple years since I have made any big changes to my web site, so I thought it was time.  I have taken my own advice in my post 2014 Web Design Trends, and added some changes to my own site.  I have flattened the design, added a hero image area, focused on Mobile First design, trimmed some text, and focused on a card based design.

Flat Design

I have made some minor changes to focus on a flatter, simpler design.  I have removed shadows and rounded corners throughout.  This makes the site look lighter, simpler, and cleaner.  I like the look. You can see more at 25 Delightful Flat Design 2.0 Websites for Inspiration.

Fixed header and navigation

I have anchored the header and navigation at the top of the page, so that it is visible even if you scroll away from the top of the page.  This is a very popular technique, particularly if the header and navigation is kept slim.  You can see more examples of fixed header and navigation areas at 22 Examples of Fixed Position Navigation in Web Design.

Hero Area

I have added a hero area on the home page, which showcases my own photos stored on flickr.  This adds a lot more interest and personalization to my site.  Some additional examples of this design can be seen at 30 Web Designs that Fully Embrace the Hero Image.

Mobile First

The amount of traffic coming from mobile devices increases with each passing day.  Building mobile specific web sites or applications separate from your desktop web site is not sustainable.  My site is now accessible on phones, tablets, desktops, and extra large screens.

Less Text

I have trimmed the extra, unneeded filler text from each of the different areas of my web site.  this kept the site focused on the original content, and on my photography too.

Card Based Design

This is a very popular design lately.  I have gathered and organized my most recent social media content from pinterest, tumblr, twitter, and my blog, and displayed it on my home page.  Each post, tweet, and pin is shown as a separate card.  I like that it is always updating and follows my pixelated design theme.  You can see more examples of card based designs at 15 delicious examples of card-based web design.

8 Planning Poker Options for Remote Teams

The most common way to size user stories for an agile team is to use planning poker and fibonacci sequence numbers.  But sometimes doing this is difficult if you are not colocated.  I was a big fan of planningpoker.com.  But without much fanfare, they changed their tool to only allow 10 people into their estimation session.  Definitely hoses half of my team.  now i need a new tool to help me size my user stories.  Here are some web based tools that can help me out.

  1. The Original – Planning Poker – https://www.planningpoker.com/ .  This is what I used for years.  But now, the free version is only available to 10 people on your team at a time.  To add more you must pay $25 per month.  Crazy talk.
  2. Pointing Poker – https://www.pointingpoker.com/ .  Simple, basic, very popular, and FREE.  That is all that needs to be said.
  3. Plan It Poker – http://www.planitpoker.com/ .  I like their tag line.  “Completely free to use no matter how large your team.”  Sign me up.
  4. Planning Poker for Hangouts – http://nearsoft.com/resources/tools/planning-poker/ .  If you or your team are fans of Google Hangouts, this is the tool for you.
  5. Scrummy – http://playscrummy.com/ .  This one looks cool… but sounds like it was more of a technology proof of concept than a new product to be launched.
  6. FirePoker – http://firepoker.io/#/ .  Another popular estimation tool.  This one uses angular.js .  Give it a try.
  7. Planning Poker (old version) – http://www.old-planningpoker.com/ .  This one looks to be a legacy install of the original planning poker before the change, and before the redesign.  This might be the answer to my problem.
  8. Agile Estimation for Jira – https://marketplace.atlassian.com/plugins/agile.estimation.3.0_private .  If you are a Jira user,and don’t mind spending money on a plug-in, this is for you.  Not how I would go… but maybe you will.

Which one do you use?  How do you estimate?  Have a tool I missed?  Leave me a comment and let me know!

Forty SEO Checklist Items for Agile Teams

If you are building a web site on an Agile team, you need to find ways to save time.  These two checklists will help you with that.  The first checklist, for on-page optimization, is helpful when building a new page or significantly modifying an existing one.  This is a good set-up for success criteria for a user story or sprint.  The second checklist, for on-site optimization, is good for regression testing or stabilization, and is a good baseline for success criteria for the release.

Do you have any feedback?  Things you disagree with?  Anything I missed?  Please leave feedback.

On-Page Optimization

  1. URLs
    • Readable by a human
    • 115 characters or shorter
    • shorter URLs are better for usability
  2. Head Section Order
    • Meta tags are in the right order: Title > Description > Keywords.
    • these tags are used to render the title and description in the search engine results pages
  3. Title Tag
    • 6 to 12 words , 70 characters or less
    • Unique across the site
  4. Description Tag
    • include the most important info and  keywords before the SERP cutoff
    • approximately 160 characters including spaces.
    • make it compelling – don’t want to waste your prime real estate
    • Unique across the site
  5. Keywords Tag
    • Even with the controversy of their value, include it as a best practice
    • List keywords in order of importance, separated by commas.
  6. Meta Robots tag
    • <meta name=”robots” content=”noindex”>
  7. NoFollow prop on anchor tags
  8. View State tag
  9. Heading Tags
    • make sure your first heading tag is an <h1>,and that there is only one on the page.
  10. Canonical tag
    • rel=canonical
    • Helps prevent duplicate content within your site
  11. Hreflang
    • rel=”alternate” hreflang=”x”
    • Tells Google what language to target for search purposes
  12. Images
    • Use page level keywords in your image alt attributes
    • Ensure your images have proper descriptions for Accessibility Standards
    • Alt attributes are also required to validate your HTML code.
    • Ensure file names reflect the content of the image
  13. Geo Meta Tags
  14. Overall Word Count
    • More than 250 words is recommended,
    • Quality content is key.
    • avoid duplicate content and thin content
  15. Dashes vs. Underscores in URLs
    • Underscores are alpha characters and do not separate words.
    • Dashes (i.e. hyphens) are word separators, but not too many or things could look like spam
  16. Links
    • use fully qualified links, i.e. http://www.URL.com
    • 100-200 links on a page is a good high end target
    • Make sure your link text uses keywords and is relevant
  17. Make JavaScript/CSS External
    • Ensure the most important part of your page is the first thing the  bots crawl.
    • externalize code to ensure there aren’t unnecessary lines above the body text.
  18. Make sure there are no misspellings or grammar mistakes
  19. Make sure your page is W3C valid HTML
  20. Last but not least, make sure it is relevant content

On-Site Optimization

  1. Site Map
    • Have an HTML sitemap with every page on it,
    • Every page should link to that sitemap page
    • Have an XML Sitemap to submit to search engines
    • The site map should always have fully qualified URLs.
  2. Text Navigation
    • Use text navigation, not JavaScript or Flash navigation that spiders can’t see.
  3. Pagination
    • rel=next and rel=prev
  4. Fully qualified domain
    • 301 redirect from domain.com to www.domain.com
    • Make your site available over http and https
  5. Robots.txt File
    • tells the search engine spiders what to index and what not to index.
    • Ensure XML sitemaps are listed in the robots.txt file
  6. Social Sharing
    • Make sure they are all set up and working properly
  7. Web Analytics
    • make sure you have it – GA, Omniture, etc.
    • Make sure you have only one of each analytics tag on your page
    • Ensure your analytics are set up properly – test with Fiddler, firebug, etc.
    • Monitor them regularly
  8. Server Configuration
    • Regularly check your server logs, looking for 404 errors, 301 redirects and other errors.
  9. Privacy Statement
    • An important element to Bing. It’s best practices to include one anyway
  10. Static Pages
    • Do not use more than two query string parameters
    • use mod_rewrite or ISAPI_rewrite to simplify URLs
    • use the Canonical tag.
  11. Check for Duplicate Content
    • check out CopyScape.com . Use it regularly.
  12. Find and Fix Broken Links
  13. Google Search
    • site:www.prnewswire.com
    • Home page should appear first
    • Track how many pages are indexed
  14. 301 redirects
    • Do not use multiple 301 redirects
  15. Site wide Uptime
  16. Cache your site
  17. Improve Site Speed
  18. Improve Site Performance
    • Compress images
    • Minify CSS and JS files
  19. Set Up a Google Webmaster Tools Account and check it regularly
    1. https://www.google.com/webmasters/tools/home?hl=en
    2. Register all versions of your domains and subdomains
    3. Check Health ad Crawl Errors Reported
    4. Review Mobile Usability Issues
    5. Check for Manual Penalties Reported
    6. Check blocked content
    7. Ensure CSS and JS is not blocked
  20. Set up Bing Webmaster Tools as well

SEO Checklist Source URLs

Debugging Home Run – Problem Step Recorder in Windows 7

4E38RY7KZA4J

I just got an email about a really cool new tool built into Windows 7 that Microsoft used to debug their new platform. It is called Problem Step Recorder. The best thing to do is to post a snippet of the email right here. I think it says everything perfectly:

“In case you’re not aware of this, here is a little known Microsoft tool bundled with Windows 7 that can be extremely useful to illustrate a problem when testing an application. The diagnostic tool called “Problem Step Recorder” was originally produced by Microsoft during the development of Windows 7 Beta to assist their Quality Assurance team in debugging the OS. It uses a combination of screen captures with mouse tracking to record your actions and can be a great way of describing a problem to others. The program is launched from the Start menu by typing ‘psr’ or ‘psr.exe’ in the search field. You’ll get a floating applet that looks like this: When you hit the Record button, the applet tracks your mouse and keyboard input while taking screenshots that correspond to each new action. When you stop recording your session is saved to an HTML slide show that recreates your steps. It also allows you to add comments to further document the problem. I think it can be very useful as an attachment in [your bug tracking tool] for those hard to describe issues or as a “How To” document for end users.”

Which leads to other ways of doing this… you could youse WebEx or Windows Media Encoder to document any bug as a step-by-step. If you use WatiN, Selenium, or VS2010, you can also use their recorders to document any bugs you may find in a web application, hand that to the dev team, and then there is no guessing how to reproduce the bug.

Kudos to Microsoft, and to the folks who uncovered this!

Main Course – My Motorola Droid, With a Blogroll for Dessert!

Motorola Droid

So I have traded my Samsung i760 running Windows Mobile 6 for the Motorola Droid running Android 2.0.1 code named Eclair. I am loving this phone. It is just as good as (some even say better than) the iPhone. It is fast, comes with a speaker phone, a big screen, built in wifi, bluetooth, and GPS, is based on Linux, is all open source, and is a slider so I have a physical keyboard. The hardware, OS, and software are all very finger-friendly. The Android market doesn’t have as many apps as the iPhone yet, but there are still thousands to choose from and the number is growing every day.

My Favorite Apps

The first thing I did was to connect my Gmail account to my Android phone. I instantly got my Gmail, Google Calendar, and Contacts synced. Then I connected the email and calendar client to my Outlook account at work. I love how the Corporate Contacts app can look up people at work without any additional information.

Plantronics Voyager Pro

I also bought a new Plantronics Voyager Pro and hooked it up to my new phone.  What a great pair!  The bluetooth connection is great, the noise cancelling works awesome, the volume is excellent… i am so glad I bought this!

Blogroll

And here are some of the great articles that i have read recently on SEO, social media marketing, and user experience.

Mobile-izing an Existing Site

There has been a lot of talk amongst my clients lately on how to make our existing sites more mobile device compatible. We have done some brainstorming, and have come up with some ideas on how to do this.

Build a separate site

The simplest thing to do would be to do build a separate site for mobile users. Some simple user agent switching based on the user’s browser can take mobile phone users to the separate site. The new site can then be tailored for smaller screens, be less graphics intensive, and develop alternative solutions for Flash components.

Full Redesign of the existing site

Another possibility would be to build one site that has enough logic to manage multiple resolutions. This could be through multiple master pages, separate sets of images, JavaScript to display different image sizes, different CSS files, and a fluid CSS based layout without tables. This can be cumbersome and time-consuming, but may be a good approach long term. This will accommodate both large monitors on desktops, smaller resolutions on netbooks, and tiny resolutions on mobile phones.

Hybrid approach

One approach we are considering is a hybrid approach, combining the strengths of the first two approaches. If we have two domains with user agent switching, we can optimize each of the sites – one for mobile users and one for full browser users. Each site could have its own master page or template with its own separate set of images. We can reduce the work by tagging the reusable content with specific div or span labels, and reuse them on the mobile site.

Build a Mobile App instead

Building a separate mobile application for each of the major phone platforms would allow the development team to tailor the user experience to the individual phone. Delivery to the phones and advertising the mobile application may make the user base smaller. We would also need to develop across at least 4 different platforms – Android, iPhone, Windows Mobile, and Palm. There are multiple versions of the platform to manage, as well. The phones that use a custom platform would then miss out on the entire mobile experience.

Invest in a tool or 3rd party

There are lots of third party tools that can be used to help migrate or transform your site into a more mobile friendly experience. Some of the companies who develop and support these tools either have fully managed solutions or have a consulting services group that can be hired to help you through this process. There are also a lot of companies who say that they specialize in mobile-izing sites that you can contract with, and I am sure they are not cheap.

Do Nothing

The further technology advances, the more this option becomes really viable. The iPhone’s browser has multi-touch pinch-to-size technology, allowing you to zoom in and out of the HTML page. The Android is releasing this as well very soon, but in the interim has a zoom feature. Even the old Windows Mobile 6.0 phone I used to use had a custom browser with zoom technology for the pages it rendered. the more improvements in technology, the less developers will need to customize based on resolution.

What are your thoughts?

What are you or your team doing to break into the mobile arena? Do you prefer one of these solutions over another? Do you have another idea or approach you would use? What tools or 3rd parties are you using to mobile-ize your site? Leave your thoughts, ideas, or experiences here and share with others!