Thursday, January 21, 2016

4 ways to easily find any element on a web page.

Just added another testimonial to my QA coaching page from Justin Bailey of Denver Colorado, check it out :-)  

When web scraping, writing automation, or whenever you need to select elements from the DOM, ( here's a good article to understand the DOM https://css-tricks.com/dom/ ), you will need to know how to find Html elements easily.

For people who are new to learning how to select elements from a web page.  Most start with simply clicking around and guessing how to target an element.  Here are some ways that I go about targeting elements.


Option #1

You can use Firefox's Firebug and select an element like this screenshot shows:




You'll notice that the 'id='main_right' is selected from the HTML panel, but on the web page, you won't see the name of the id highlighted, only the element outlined in blue.  This is how I first starting finding and selecting web elements.  Using Firebug works, but there are definitely easier ways.



Option #2

You can use Chrome's Dev Tools and select an element like this screenshot shows:




You'll notice that the 'id='main_right' is selected from the Elements tab, and also on the web page.  I love how Chrome Dev Tools automatically converts the 'id' into the correct CSS syntax '#'.  If you now take the highlighted id and use jQuery in the Console panel, you can tell if you are targeting only one element.  You don't want to accidentally target an element that returns more than 1 instance.

Here is how I easily check if I am targeting only a single element.

I took a picture of the highlighted element using the Captured app http://www.capturedapp.com/,  I then open the Javascript console tab, and use jQuery to target the element.  Here's how:






Type out the CSS Syntax to select the element, and click enter.




After clicking enter, if you only get 1 element returned in the array ( like above ) then you have selected the element correctly and won't have issues with multiple selections.  One other way to check if you are targeting an element correctly is to use '.text' to see the text that the element returns like this screenshot shows:




Option #3

A very easy method is to use Firefox's addon, FirePath.  You simply right-click on any element and select 'Inspect in FirePath'.  You will instantly be given the exact, unique XPath for that element.



 There are several issues with this:

#1 XPaths run 2 - 3 times slower than a scoped CSS element.
#2 XPaths have to load the entire element each time they are called.
#3 XPaths are very hard to read and understand.
#4 XPaths have to load the entire element each time they are called.
#5 XPaths are very fragile, and break whenever anything on the DOM is changed.

XPaths are quick and easy to locate but there is a technical cost for choosing them.  With that said, sometimes there is really no other option than using a XPath.  I only use XPaths as a last resort.


Option #4

The last option is one of my very favorites when having issues with finding a hard to target element.  Selector Gadget http://selectorgadget.com/.  Selector Gadget is the closest thing to Html and CSS magic that I have ever come across.  Selector Gadget works by you telling it which element you want it to target.  It will then generate the CSS syntax that it thinks you want for the element.  Next, you will click on the elements in yellow that you don't want.  Selector Gadget will then adjust the CSS it generates until it only selects the 1 element that you are targeting.  Here are a couple of examples:

Click on the Selector Gadget Icon to get started



Next highlight and click the element that you want.



Success!  You have the CSS generated and can see that only 1 element has been targeted!


Here is another example:



Select the element you want to target.  Notice that the yellow shows all of the other elements that are going to be targeted as well.  You need to now 'train' Selector Gadget by clicking on one of the yellow elements, letting it know that you don't want to target it.




Success!  You will see that Selector Gadget has once again successfully figured out the element you are trying to target and generated the correct CSS syntax.





















The only issue that I can find with Selector Gadget is that the CSS could be fragile is some cases with using of ':nth' but overall I highly recommend it!  Using the above methods, you should be feeling more confident in being able to handle targeting any tricky element situation that you run across.  I think Html and CSS 'noobs' should first try to target an element on their own. Then after  5 - 10 minutes if they can't figure it out, use Selector Gadget and learn the correct way to select the element.

Keep coding peeps, you can do this!






Wednesday, January 6, 2016

Things I like, things I do.

Hey All, I've been a little busy lately and have switched jobs since we talked last.  The only problem the longer I am employed at companies is, the less and less I can say about those experiences :-)  I thought I would share with you some of the things I read, and like.  The intent is that you can see what I do and hopefully some of it will help you in your own learning to code journey.


I believe your education never ends.  When people say they are "well educated" referring to their college education, I see it as offensive and slightly ignorant.  I believe you should never stop learning, and should always be improving your own education regardless if you are in school or not.

According to studies 85% of our success in the work place is due to 'human engineering', not your level of college education.  When I was 14 I said something to my Aunt Becky that she took as being rude.  Her husband called me later that night and told me how rude and offensive I had been.  My Aunt and Uncle had historically always given me cash for my birthday in a card that matched my age. For my 15th birthday instead of $15 in cash as I expected, I received a very worn out copy of Dale Carnegie's "How to win friends and influence people" and 1 single stick of gum...I guess I had bad breath too :-) 

I read that book 3 - 4 times, it changed my life.  I had no clue about how humans worked or what they liked or didn't like.  I know now at age 30 that my strongest asset is my people skills.  Most people that I have worked with, and most of my coaching student's weakest area is dealing with people.

Here are the books that have meant the most to me over the years.  Honestly, if I hadn't read them all, I don't think I would have ever been able to switch from a career as a Blacksmith/Farrier to one of writing Code.  There are many more good books, but I think all of the ones below would help anyone learning how to code.  Only 4 of the books below are code related though.  There are more great tutorials and resources, but if you completed just the 4 I mention, you would have enough technical ability for a junior Rails position, and know the basics of coding.

I think the most important tool that we have as a "knowledge worker" is our brain.  Which is why I do things every day to improve it.  For example I write left handed and use my mouse all day left handed even though I am a natural right hander.  I have high lighted the top 10 books I recommend if you only could pick 10.  I try to read at least 10 new books a year.  Last year I read 13.  NOTE: I don't make any money by recommending these books:



  • How to win friends and influence people - Dale Carnegie
  • The power of eye contact - Michael Ellsberg
  • No More Dreaded Mondays - Dan Miller
  • Secrets of a Buccaneer-Scholar: How Self-Education and the Pursuit of Passion Can Lead to a Lifetime of Success - James Marcus Bach
  • Whole Brain Power - Michael Lavery
  • The Education of Millionaires: Everything You Won't Learn in College About How to Be Successful - Michael Ellsberg
  • The Choose Yourself Guide To Wealth - James Altucher
  • Rhinoceros Success - Scott Alexander
  • How to Have Confidence and Power in Dealing with People - Les Giblin
  • Anything You Want - Derek Sivers
  • What Every Body is Saying - Joe Navarro
  • The Compound Effect: Jumpstart your income, your life, your success - Darren Hardy
  • The ONE Thing - Gary Keller
  • It's Not How Good You Are, It's How Good You Want To Be. - Paul Arden
  • Quitter: Closing the Gap Between Your Day Job & Your Dream Job - Jon Acuff
  • The Art of Non-Conformity: Set Your Own Rules | Live The Life You Want - Chris Guillebeau
  • The Magic of Thinking BIG - David J. Schwartz, Ph.D
  • WIN: The Key Principles to Take Your Business From Ordinary to Extraordinary - Dr. Frank Luntz
  • The Real You - Dr. Kevin Leman
  • Eat That Frog! - Brian Tracy
  • How to Think Like Einstein: Simple Ways to Break the Rules and Discover Your Hidden Genius - Scott Thorpe
  • Learn To Program - Chris Pine
  • Michael Hartl's Rails Tutorial
  • Whys Poignant Guide To Ruby
  • In The Beginning Was The Command Line - Neal Stephenson

Things I do to daily/weekly to improve myself:

If you read Whole Brain Power and agree with what he says about the overall benefits of becoming ambidextrous, and how it improves your overall brain function.  Then these next few things will make sense to you, otherwise you will think me a bit weird :-)

  • I use my mouse at work left handed the entire day.
  • I bounce a golf ball off of very small hammers and also off of very heavy hammers several days per week.
  • I convert license plate numbers into pictures using Phonetics.
  • I convert the letters into numbers, and then into pictures.  For example DE would make the number '45' which would convert to the picture of a Rail Road Track.  ( Look up the Majors memory system if you want to know how it works )
  • I close the number 1 Grip Crushers = 140 pounds of force to close, every 2 days ( most weight lifters can not close it )
  • If I need to take notes in a meeting I make sure I write them down and that I do it with my left hand.
  • I go to the acupuncturist once per week for needles and cupping.
  • Read a part of a book each night or work on my Rails app.
  • Basically do everything as much as possible left and right handed, for example when I was at Fidelity I would play 2 games of ping pong after work most nights.  I would always play one game right handed and the other left handed.  I consistently beat people with my left hand.
  • Always lots of goals, some huge goals, and then 1 or 2 crazy outlandish goals that I don't tell anyone or else they laugh at me.  I think that keeps me very positive when thinking of the future and full of energy to welcome the start of a new day.

All the above may be weird, I personally think they help me learn quicker and keep my brain as healthy as possible.  I don't mind doing weird things as long as they work.  Most very successful people do things that others might consider strange or unusual.  My motto is when I see what everyone else is doing, I go the opposite direction.  How can you have remarkable success in life if you merely follow what everyone else does?  How can you be anything but normal if every night you simply watch Netflix?  Oh yeah, I don't watch much T.V. either :-)

Keep coding peeps, you can do this!