The first development job I had was working for BYU’s Independent Study program converting lessons into website material. The bane our existence was Internet Explorer. Anybody who has developed javascript a few years ago knows that every version of IE had a different engine. The css is also rendered different for each version of IE. We would have to find ways adjust for each version of IE. Below are several comics I have seen and collected over the years bashing internet explorer – hence the title Internet Explorer Bashing.
Stupid iPhone keyboard layout
I have a terrible beef to pick with Apple Inc. I originally started switching to Apple’s products years ago because they spent time to quality control their hardware and software. I was so tired of spending time fixing my development environment just so I can write code. The iPhone was a natural progression of jumping on this bandwagon. There are still several things that I love about my iPhone, but there is one default keyboard layout that is absolutely atrocious! Starting off most of us know what muscle memory is. Piano players have it when learning songs or site reading music. In order to site read music well a pianist needs to relate where the note on the sheet music is in relation to where his or her fingers are on the piano’s keyboard. The more a pianist plays the piano the more they know where the fingers go just due to muscle memory. Sending texts or SMS on a phone is no exception. People can type faster as they build muscle memory. Well Apple went and screwed this one up!

This is an iPhone 6 keyboard in landscape mode. Observe how the emoticons are on the left and the numbers are on the right. If I always type in one layout this is fine, but contrast that to the other photograph of the keyboard in vertical mode.

This is the iPhone 6’s keyboard layout in vertical mode. Notice how the numbers and emoticon positions switched from the horizontal or landscape layout.
I don’t know what usability tests Apple did in deciding to make one layout a certain direction and change it for a different layout. How am I suppose to be fast at texting or taking notes if the stupid keyboard layout changes every time I change my phone’s orientation by 90 degrees. The person who decided this should be fired.
Using groovy closures in Spock where blocks
Groovy Spock vs Java jUnit
Because Spock is just jUnit under the hood we can do everything we can in jUnit and more because Spock uses groovy. One aspect of the jUnit test framework that most people don’t take advantage of is using parameterized classes – making the test class be test driven. The best part of this is you can run the same test with different variables, allowing all sorts of edge cases to be tested without having to rewrite the test class. Spock makes this visually very easy by using a where block. The first line of the where block is the variables that you want to use through out the test. The second line (and every line after that) is a new set of data that you want to test. Remember the test will run as many times as there are lines in the where block.
class testWithClosures extends Specification { def setupSpec() { //Runs before the class initialization } def cleanupSpec() { //After the class tests run this will run } def "Some super awesome test with closures"() { when: Some conditional setup then: specialAssertion.call() where: specialAssertion | _ { Whatever Code you want to special validate } | _ { Another special case validation } } }
The blessings of using Groovy with Spock
Using Groovy in Spock has one amazing perk. The example above lets you define a variable in the where block called specialAssertion. You can take advantage of closures in groovy by placing closures inside your where block and then calling them in your spec class. I occasionally use this if I want to do some special type of assertion with the data that I am passing to the spec. You don’t have to do assertions, but any type of code that needs to be called just for that line of data in the where block. This can be thought of as a similar polymorphic approach of abstract classes and methods.
What is a QA tester?
The many types of QA testers
What is a QA tester? First off QA stands for quality assurance and if you are a QA tester you are testing the quality of any product to make sure it meets a certain standard of quality. There are several different types of QA testers in the world. Call centers, for example, will have a QA tester to periodically listen to customer service calls and see if the calls meet the company’s definition of quality. Another example would be in a manufacturing line. A QA tester would take random samples of a product being produced and determine if the quality is good. In a world where information is shared so rapidly people can go online, find the product they have purchased, and rate what they think of it. The point of a QA tester would be to find problems before the user does. You will not find every problem, but if you can mitigate major problems then when people review your product you will not have as much negative pr (public relations). Consumers will write something bad about a product far more then they will write a good review.
Software QA testers
While there are several types of QA testers in the world, the most common today is in the world of software engineering. If you talk about a quality assurance tester for testing software there are two main paths of testers.
- Quality Assurance Engineer – The qualifications for a QA engineer are the same for a software engineer. He or she has to know how to write code and test code. In a nutshell a QA engineer programs tests to validate software, works on frameworks to help a software developer test his or her code, and makes sure that the pipeline from creation to production of software has automated validation of the quality. This type of engineer can also be more focused on testing how the software behaves under stress or load conditions, or programmatically find vulnerabilities in the security of the software being developed.
- Quality Assurance Analyst – This job position does not necessarily require advanced knowledge of programming, but rather an in depth knowledge of how the product behaves and functions from a user’s perspective. An analyst is primarily focused on exploratory testing and seeing how a user would navigate his or her way through the product.
Make Your Own Website Scraper
Description of a website scraper
I recently did a project where I needed to scrape a subset of webpages from the internet. Back in the 1990s all websites were pretty much straight up html, which makes crawling them and getting their data pretty easy. All you needed was to grab the html files and run them through a tokenizer, parsing out all the juicy bits. Today things are a bit more complicated as most websites have some form of javascript execution (usually jQuery or AngularJS). In order to crawl these type of sites the web scraper needs to be able to execute javascript. There are several ways this can be done each with their benefits and drawbacks. I chose to go with Selenium Webdriver
Of the various implementations of the webdriver – chrome, firefox, internet explorer, htmlunit, and etc . . . the fastest is chrome by far. The basic idea of a web scraper is to load a page as the user would see it. Grab the text from the page that you need, massage it, and store it off somewhere for data mining later. In the process of parsing the pages you grab all the anchor tags and push them into a list of websites “To Be Crawled” and once you scrape the particular website move them to a list of “Crawled Websites.” That’s a web scraper in a nutshell, however, the implementation of one can get a bit more complex especially depending on what your goals are.
One of the major problems I ran into quickly was how angular routes store references to pages. They use a baseurl.com/#/rest_of_link. The reason this is bad is because you need to strip the “#” hash sign from other url’s like foo.com/page#div, which references an id of an html element to scroll to on the loading of that link. The following is the regex I used in order to do strip out the #! and #_end_of_url. It uses the regex look ahead to accomplish the goal.
List<WebElement> list = driver.findElements(By.xpath("//*[@href]")); for (def e : list) { def href = e.getAttribute("href"); if (href.contains('#')) { href = href.replaceAll("(?!#!)#.*","") UrlModel newModel = new UrlModel(href); //SUBMIT TO DB } }
Then once you have a list of url’s to crawl you can just initialize a new chromedriver instance with the url in question and grab all the webelements in the body. Once you have all the web elements you can grab the text values. The rest is up to you how you want to store the data and mine it later. I did not need this to go particularly fast but you can map reduce the scraping by running multiple instances of the chromedriver on several different machines. Selenium grid has a good way of doing this.
Web Designer Job Description
Web Designer Job Description
Years ago if you were a web designer that meant that you knew how to arrange a page in HTML, change colors, and work on a little bit of javascript. With such modern advances with html5, jQuery, and AngularJS, the frontend of web development needs people who are better skilled at user interface logic and can architect massive projects. Although a company may have a specific stack or set of libraries for their front end logic, there are some skills that a good web designer needs to have and companies should look for individuals with these qualities. The web designer job description is slightly different than a typical software engineer because the web designer generally has to live within the constraints of a web browser. This does not make solving problems easier. In fact because each browser behaves differently this job can be seemingly more complex.
GOOD Web Designer Description
- UNDERSTANDS NUANCES BETWEEN BROWSERS: This is where experience really counts. Each browser has its own javascript and css interpreters and this causes code to have to be written conditionally for each browser. With html5 and most new versions of browsers this has become more unified, but Internet Explorer for example is notorious for not even being backwards compatible with itself version to version.
- UTILIZES HTML5: HTML5 has eliminated a lot of legacy design patterns. Nobody orders a webpage by tables and rows anymore, instead it is done with divs and appropriate css in order to better accommodate the vast differences in users
- APPROPRIATELY ABSTRACTS CSS: There are many tools out there that help with css abstraction such as compass-style or sass. While these tools are useful, being able to just know various css properties and how to abstract classes is vital. Abstraction in css will make a web site easier to maintain and update to a newer look in the future.
- CAN CODE PROFICIENTLY IN JAVASCRIPT: Several years ago javascript was viewed as awful and people were encouraged to turn off javascript in their browsers. Today most webpages use javascript in some form or another. One of the biggest benefits of using javascript is a user will download the page to their browser and all the computations happen on the individuals computer rather than the server. The only requests then go to the server to retrieve data or documents.
- UNDERSTANDS ASYNCHRONOUS PROGRAMMING: This is probably one of the most important parts of a good web designer. Knowing javascript is good, but the requests are asynchronous. Normal programming paradigms fall apart here. A prime example is making http requests in javascript. A good web developer knows what a promise is and how to use callback functions to process multiple http requests that are dependent on happing in order.
- KNOWS REST CONTRACTS: Projects that have large data or large number of users often abstract logic into front end and backend code. The front end logic will request data or documents from the server, and the server will query for them and return them in the form of json, xml, or other various serialized forms. Being able to know how to send requests and process response bodies is vital for a web designer. This also means knowing how to handle form submissions and normalizing data from a user that is acceptable to a server.
- ABSTRACTS FRONT END CODE: Abstraction is a reoccurring theme in most software. User interface code is no exception. Angular has a good example of having a standard MVC (Model View Controller) style of abstraction. Each class or object has a purpose and it makes maintaining code much easier.
- CAN SEARCH GOOGLE: Knowing what to search for is valuable. Sometimes websites have very weird errors that are not very explicit. Looking at a javascript stack trace may show where a line broke in some library, but not what line in your code broke it. Knowing what to search for to solve problems only comes with experience. The more projects a web designer has worked on the more exposure to the various problems that will occur will be more familiar.
BAD Web Designer Description
- WEB DESIGNER IS NOT A UX DESIGNER: While having a web designer that can make a page look good, it is not his or her job to necessarily design all the functionality, layout of the page, or pick a color scheme. Web designers that freelance generally will do this, but when you start getting involved in a production software team having a UX designer to help facilitate colors and what layouts will attract users is different than the actual implementation of the user interface.
- FALLS BEHIND WITH TECHNOLOGY: As this is true of any computer career, having a web designer that does not know how to make a webpage viewable by screens of different sizes, including mobile devices, can drastically impact the amount of visibility a website will receive. Google now calculates a website’s ranking in their search engine by being easily viewable through mobile devices.
- LACKS SCALABILITY: Any person can write an html page and make several static html pages. When you start working on large projects making plain html pages does not scale well or fast. For example – if you make a recipe site, entering all the data as html is tedious and doesn’t promote involvement from other people.
Conclusion
As with most things in life you pay for what you get. If you want to offshore website development or find some high school free lancers, you can get a project started. If you need something that has a lot more involvement, such as producing graphs or using a html5 canvas, finding someone with more experience and a better sense of software abstraction and development will help make your project more successful, scalable, and generally better for the users that will interface with it.
Software Engineer Job Description
Software Engineer Job Description
There was an article I read in the news lately about the top 7 careers in Utah. Number three in the list was a software developer or software engineer. The terms have slightly different meaning, but can be interchanged quite frequently. Quite often I have either been asked what to include in a my company’s software engineer job description when we are looking to hire new engineers, or I have been looking for jobs and had to sift through tons of different qualification requirements. It seems every company has a different idea of what is a software engineer in their job description. Although it is perfectly ok to have specific requirements, we should broaden the scope a little bit. If an engineer is good at problem solving, debugging, and looking through other’s then the engineer should be considered for a position even if he or she is not familiar with the technologies that make up the specific company’s stack.
GOOD software engineer description
- CAN CODE: Obviously you need someone who can code. The best way is to have a person either code or sudo code during an interview. Have the potential candidate go to a white board and solve some problem of your choice. Some common examples are to have the engineer code a binary search or code a method to detect a palindrome.
- UNDERSTAND DATA STRUCTURES: Knowing different data structures like trees, lists, sets, and maps is essential. Every type of data structure has a specific purpose. These are just more tools inside an engineers tool belt.
- KNOW DESIGN PATTERNS: The world of software has lots complexities in it. A software engineer should know several different design patterns. These patterns are like tools in an engineers tool belt. Each tool should do one job and do it really well. Some examples of design patterns are understanding singletons, command patterns, rest, or dependency injection. These are independent of any language.
- DEBUG CODE: This is an absolute must in any software engineer. Using tools such as debug mode in an IDE or how to use programs like gdb are essential. Code will always have bugs, and being able find, troubleshoot, and fix bugs is essential. You could always present some code to the engineer with a bug and ask him or her to figure out what is wrong and give a possible solution.
- SOLVE PROBLEMS: Any features that a company or customers need often include complex problem solving. For example how to persist data based on what is need more, writing or reading? What is the best solution to the problem?
- UNDERSTAND COMPLEXITY: Knowing every algorithm and its big O complexity is overrated. More important is being able to derive big O complexity. Have the engineer determine what the big O complexity of some provided method.
- DESIGN STRUCTURES: If your stack uses OOP (Object Oriented Programming), functional (i.e. javascript or c), or embedded paradigms then the engineer should have some familiarity with them. A kernel developer, for example, needs to understand good functional programming designs more than object oriented designs.
- WHAT DON’T I KNOW: Most software engineers do not know the answers to every question. Being able to know what to search for on google is important. Example: If you are in angular land you need to know how to speak the angular language. Searching should use things like directives or scope.
- STAYS MODERN: Software is a fast moving field. If an engineer does not stay current he or she falls behind fast. A prime example is knowing only perl or php. Most software stacks have moved towards some rest server like java or node and a frontend in angular. While there are so many technologies out there knowing specifics can be hard, but an engineer should be familiar enough with what various technologies to know if they will be a solution to specific problems that arise.
- KNOWS MATH: Knowing how to implement a mathematical function – such as a simple Riemann sum – is what separates a junior or entry level position from a senior or architect level position. You could always provide a mathematical equation and have the engineer give sudo code of how to translate the idea into code.
BAD software engineer description
- SPECIFIC LANGUAGE: I have had interviews that ask very specific questions to a programming language. They reference obscure aspects of a language that nobody will need on a regular basis. Being able to google an answer is more important than knowing specifics.
- SPECIFIC APPLICATIONS: While this should be determined on a case by case basis, having requirements like knowing specific applications should generally be avoided. Example: requiring a software developer to know protractor for end to end testing. This still uses selenium under the hood and has all the same selenium problems that any other end to end testing framework will have.
- LIMITING TO DEGREES: Having a degree is always beneficial. Especially from colleges or universities that have abet accreditations. I have mixed feelings on this subject. Some self taught engineers are so thirsty to know in depth how to program, but some learn just enough to get by and have gaps in their knowledge.
- TAKE HOME CODE TESTS: These are terrible because the user can easily have someone else code the solution. If you need to give them a take home test to assess the engineer’s ability to program, then you should add bugs to the code and have the engineer debug the code in real time during an interview.
- NOT ALLOWING SEARCHING: There have been interviews I have had where I have been required to take some test without being able to use google. Being able to know what to search for in order to solve a problem is 100% essential to a good engineer.
Benefits
The number of jobs that require software to be made is only going to increase. The number of people with mobile computing platforms (iphones or android phones) is very prevalent. A company needs to not only have a competitive salary, but have other benefits or perks to attract top talent. Some companies provide 20 days paid vacation in the first year along with catered meals and great health benefits. Having good benefits will give the company a bigger pool of candidates to select.
Conclusion
Hopefully this helps define a good software engineer job description. These are things a company should look for and not look for in potential software engineering candidates.
Yeoman’s Gruntfile.js with html5 hashbang
Description
Recently I worked on trying to make my angular application crawlable by google robots. In order to accomplish this I moved my application to html5. The problem however was all sites needed to be redirected from foo.com/newpage to foo.com/#!/newpage. This is required in order to load all the css and javascript for the page. No problem – Nginx is awesome and did this for me. I still had a problem. I want to use grunt serve to do local development work on the application. In order to accomplish this I found a great article talking about angular with html5mode when your application was constructed using yeoman. I ended up having to add mp3 and pdf file types to the mod_rewrite in order to get everything on my site to work. Either way – great article.
Async functions in AngularJS to behave synchronously
Description
Having a background in server side code entering the world of javascript’s asynchronous functional programming took a bit to wrap my head around and understand. Angular has some awesome libraries that let you make rest endpoint requests using $http module. There was a scenario I ran into recently where I needed to make a rest call to get some ip address information and then make another request based off of the information I received. Under normal synchronous programming this is not a problem, but there is no such guarantee with javascript. I needed to finally learn about callbacks and promises. Although they are similar I decided to go with a callback approach, which I will share here.
The basic premise to callbacks is you are passing functions as objects. The object is read and processed at a certain point. After understanding that functions are just objects in javascript the wheels started clicking in my brain and I was able to get my service to work properly. I made a service that handled the multiple http calls and then I just pass that service as a dependency injection of my controller. Below is just psuedo code on how I was able to accomplish this.
[javascript]
//Controller logic
//This makes the call to the service and when the service is done processing what it needs it then processing the function part of this.
$scope.getQuestion() = function() {
MyService.getQuestion(index, function(question) {
$scope.questionVariable = question;
});
}
//Service Logic
this.getQuestion = function(id, cb) {
this.getIPInfo(id, cb, this.retrieveQuestion);
};
this.getIPInfo(id, cb, retrieveQuestion) {
$http.get("http://ipinfo.io").success(function (response){
//On success then we call another function based on what we passed in;
retrieveQuestion(id, cb);
});
};
this.retrieveQuestion = function(id,cb) {
// The cb is the callback from the original controller variable.
$http.getsomething based off geolocation.success(function(data){
// On successful call do some logic and set what we need in the question data
cb(question);
//This now has the var question completely set the way we need it to populate the original function call.
});
};
[/javascript]
Conclusion
Passing functions as objects is really a neat idea. Event driven asynchronous programming is taking me a while to wrap my head around, but it is really powerful and can accomplish the same end goal as synchronous programming — You just need to know how the beast of javascript behaves.