Galen Framework Hover in JavaScript

A bit of a small audience for this one, but a project I was put on wanted us to use the Galen Framework to test their UI. For people who do not know what this framework is, it is a method of writing acceptance code that matches up to the output in the browser window. This can be coded to work for all different device, sizes and URLs. One hard space I came to was to action the hover state of an element and then test it.

If you would like to read up more about the Galen Framework first then you can find all the information you need on the website.

To test you can either run it in the Galen syntax to run in the Command Prompt or you can also run it using JavaScript. I opted of the Galen Syntax for no real reason, but there was a method to action the hover in the JavaScript version.

Ivan Shubin, the creator of the Galen Framework, point me here for the example.

load("init.js");

load("pages/WelcomePage.js");

 

testOnAllDevices("Welcome page", "/", function (driver, device) {

new WelcomePage(driver).waitForIt();

checkLayout(driver, "specs/welcomePage.gspec", device.tags);

});

 

testOnDevice($galen.devices.desktop, "Menu Highlight", "/", function (driver, device) {

var welcomePage = new WelcomePage(driver).waitForIt();

logged("Checking color for menu item", function () {

checkLayout(driver, "specs/menuHighlight.gspec", ["usual"]);

})

 

logged("Checking color for highlighted menu item", function () {

welcomePage.hoverFirstMenuItem();

checkLayout(driver, "specs/menuHighlight.gspec", ["hovered"]);

});

});

You can see the ‘hoverFirstMenuItem’ that actions the hover. This is built into the Framework that comes with the JavaScript. You can find more about the API and the ‘hover’ method on the Reference Guide for JavaScript.

However I was trying to use the Galen Framework in the command prompt, which can inject JavaScript into the page that runs once the page has loaded. The first idea I had then was to run a ‘hover’ action, which because the site I was running it on has Jquery loaded I could use like below:

$(document).ready(function () {

//hover links

$('a').trigger('mouseenter');

$('a').trigger('mouseover');

$('a').trigger('hover');

$('a').hover();

});

Though as you can see I went a bit overboard trying these all out as none of them seemed to work. I knew the Jquery was working as I was able to run other method to do click events and other thing. After some searching I found a method.

I found a way to get all the style sheets and then search through them. Once I could search them I could find out what the ‘hovered’ styling was for that element. Then I could extract the styling and inject it onto the element, so now its standard style becomes its hovered style.

You can see the below method that I use ‘document.styleSheet’ to loop through each style sheet, then get each rule and loop them. If the class I am looking for is found the I user ‘cssText’ to get all the styling from the rule. This does come back as ‘{background-color:blue}’ so the response text is stripped down to just the CSS.

function getStyle(className) {

            var c = '';

            for (var i = 0; i < document.styleSheets.length; i++) {

try{

                var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;

                if (classes) {

                    for (var x = 0; x < classes.length; x++) {

                        try {

                            if (classes[x].selectorText.indexOf(className) > -1) {

                                var s = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;

                                s = s.substring(s.indexOf("{") + 1);

                                c += s.substring(0, s.indexOf("}"));

                            }

                        } catch (ex) {

                        }

                    }

                }

                        } catch (ex) {

                        }

            }

            return c;

        }

You will notice there is a few try catches in the loops, these are because some style sheets it picks up are not accessible so they create an error in the JavaScript. The try catches mean it can keep looping on through the ones it can access instead of breaking out. Another bug fix is where it uses ‘rules’ or ‘cssRules’ and ‘.cssText’ or ‘.style.cssText’. This is due to different browser standards, some of the browsers use one set and some use the other, this prepares for either case when your tests run.

Below is how the full code sits together and can be used. You can see I invoke the method by passing ‘a:hover’ as it is the hover state I need to access to the link.

$(document).ready(function () {

function getStyle(className) {

            var c = '';

            for (var i = 0; i < document.styleSheets.length; i++) {

try{

                var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;

                if (classes) {

                    for (var x = 0; x < classes.length; x++) {

                        try {

                            if (classes[x].selectorText.indexOf(className) > -1) {

                                var s = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText;

                                s = s.substring(s.indexOf("{") + 1);

                                c += s.substring(0, s.indexOf("}"));

                            }

                        } catch (ex) {

                        }

                    }

                }

                        } catch (ex) {

                        }

            }

            return c;

        }

        //all links

        $('a').attr('style', getStyle('a:hover'));

});

Sticky Menu Bar code and example

This is a bit of a feature a lot of websites use and love, which is the Sticky Menu Bar. This could also be used for things like a cookie policy bar as well, but what ever the use it is a good feature. However I see some people add these with some terrible code and methods, because they don’t understand how it would work. I will explain my method and why I think it is better.

Although it is all done via JavaScript and JQuery, we will start with the HTML. This is sort of simple that you can have what ever you like, but you need the navigation wrapped in a container. For my example I have the HTML5 ‘nav’ element as my container and then the actual navigation as an Unordered List.

<nav >
<ul >


<!--ul>

This will be explained further on, but the reason for this is so your content does jump.

For the CSS it is pretty much just standard styling more for the benefit of the visual of the navigation, not for the functionality. The ‘nav’ has colour, the ‘ul’ removes the bullet points and then the final styling to bring the link containers inline.

nav {
background-color: #0073AA;
}

ul {
list-style: none;
}

li {
display: inline-block;
color: white;
padding: 10px 0;
}

Then is the JavaScript/JQuery that I have done in a prototype, so that it can be added once then used however many times. The basics to set this up is the initialisation method and the defaults object added to the prototype.

The ‘defaults’ contain 3 parameters that are the ‘itemClass’ the class given to the navigation controller for my example the ‘ul’, the ‘itemParent’ the class given to the parent of the navigation the ‘nav’ and finally the ‘stickyClass’ which is the class given to the item once it has stuck to the top of the screen. This is so if you want to style it different once it has stuck. The defaults, mean if you don’t want your own classes then there are back up classes instead.

StickyBar.prototype = {
defaults: {
itemClass: "sticky_item",
itemParent: "sticky_parent",
stickyClass: "sticky_class"
},
init: function() {
}
}

You also have a ‘init’ method attached. This is where we action the method to run the functionally of the navigation. This is below and starts off with putting the object into a scope called ‘base’. This give the ‘this’ the scope of the method.

We then have the on scroll attribute of JQuery to read each time the user scrolls, you can tell where they are. Next I have put in the ‘each’ attribute so if you have multiple sticky bars with the same class, they are all picked up and checked. You can have multiple sticky bars, as the position of these are done in the CSS, so as long as you have a different class on each for their direction then you can have more than one.

Within here is the real thinking. With the if command we check if the scroll position of the window is further down the page then the navigation. This is the reason we have the navigation container, as once you have stuck the navigation to the page it moves with the page and therefore the window will never scroll back over it. With the container you can stick the content inside and then use the container as the reference point.

If it is to be stuck then we add some inline CSS to position fix it to the window and add the sticky class to the navigation. If it is not to be stuck then it does the opposite. There is also a bit of functionality to give the parent element some height, because once you stick the navigation it is not relative on the page so all the content will shift up. Instead we add the height on as a placeholder. I have added it here, so that if your item change for instance a drop down menu or you also have multiple stick bars, then it works for all.

startScroll: function() {
var base = this;
$(window).scroll(function() {
$(base.itemClass).each(function() {
if ($(window).scrollTop() >= $(this).parent(base.itemParent).offset().top) {
$(this).css({
'position': 'fixed'
})
$(this).addClass("stickyClass");
$(this).parent(base.itemParent).css({
'height': $(this).height()
});
} else {
$(this).css({
'position': 'relative'
});
$(this).removeClass("stickyClass");
$(this).parent(base.itemParent).css({
'height':'auto'
});
}
})
})
}

Once last thing we need to do is add it to the ‘init’ method and it is complete. Please also notice the object StickyBar that sets the each sticky bar and the IFFY around everything to run this on load.

All you then need to do to initialize each instance is call the object and add in the optional parameters, which again I have put in an IFFY to have it load straight away.

//New Sticky
(function() {
var stickyBar = new StickyBar({
itemClass: '.nav_bar',
itemParent: '.nav_bar_parent',
stickyClass: 'nav_bar_stuck'
});
})();

Please see the full code and an example on CodePen

Coding Project Mind Block

When you are developing for fun, do you ever get a project mind block? What to do, what’s best to do or what could be fun to do of course.

I do little projects on Code Pen for fun and also for personal development. They help me try out new technologies and practice existing skills I already know. The projects I have done so far are ideas I needed for a job, plus some random items I have done that just pop in my head. For instance I did the Time Difference Project for a delivery count down module on a clients website, but found it was useful to put on Code Pen as well. This way if I need it again or someone else needs it then it is there for them. I also have done things like Tile Game Project after I played the app on my iPhone and thought it would be fun to recreate it.

I keep getting some Ideas, but then I hit the wall of code. I just get to a point that I can’t think of a project that will be fun, challenging and also worth it. If the project is not going to interest me then I will get to a point and leave it, which is just a waste of time. Then if it is not challenging then I will not be gaining any knowledge and over coming any struggle, so it will have to improve me to be worth the time. Finally I would like to get something out of it some times, that isn’t just fun and challenging. I would also like the project to have its worth in real world modules and websites. I do admire and wish I could think of a module to publish to Git, then used by thousands. I think most developers want their work and effort recognised, but for now I will settle with it being useful to myself and the select few.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

As I proposed before, what do you do? Well here are some places and things I did to find what projects to do next:

  1. Simple but great is to look at others code. This could be on Code Pen, Git or even people’s websites. You can find some amazing work out there that will make you dribble. You can then either recreate their projects, or you can look at how to perfect it. Recreating them can be fun, but it gives you the chance to cheat and see how they did it. If you look to perfect or create it in your own way, then you will have more of a challenge to learn what to do in the future.
  2. Like looking at perfecting code, you could also look back at what you have done before. With new technology and even more time you could make previous modules and code even better. I know I would like to reconstruct a few things that was rushed for a deadline.
  3. After me hitting my block I reached out on Twitter and one place Code Pen tweeted back to me was this link http://tevko.github.io/practice/. This person Tevko has made a web app that you can get given random challenges. Some are easy ones that if you are a experienced developer you could do in a second, but some can be really good and even challenging. It also has the ability to give problems from Github to solve. This way not only do you have fun, but you can also help out others which is always rewarding.

    My first challenge I have got was to build a clock with CSS. I did sort of cheat as I set the HTML and the start time with AngularJS. You can check it out here CSS Clock

  4. Speaking about solving others problems on Github, you could also go on to Stack Overflow to solve issues on there as well. If you have been on there before, you know it never short of peoples problems.

I hope you find some more great challenges and if you want to share any other methods please use the comments below to help others.

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

No more desktop 2016?

They have said that this is the year of responsive websites and so do you wonder if next year there will only be mobile device websites? If every one goes on their mobile  and tablet devices all the time then is there a need to worry about desktop?

When I first started website developing there was no real need to develop for mobile devices. They were not really used for website searching and product browsing. This was because of the device speed, roaming speed and also it was just not easy with them phones. As technology for the devices have grown to become mini computers, cameras, controllers and a lot more, the web developing standards have also growth.

The stats show that over the past year more people are browsing and shopping on mobile devices including tablets, mobiles and soon to be watches. This has then brought focus to the developers making a website mobile responsive a want to a must. If you do not make your website mobile responsive then not only will it not appear great to the users of the website, but search engines like Google will see it as a negative. Read my post about responsive website development to see why responsive is a must and how best to do it by Google’s standards.

If the mobile devices are on such a rise with tablets and mobiles being cheaper to buy, then will the developing needs switch. Like when there was no need to for phone and tablet design/development, will it turn to the other way when you do not need to developer or design for desktop?

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

(adsbygoogle = window.adsbygoogle || []).push({});

When you start designing would you start with the mobile device design and have the desktop as an after thought? Would you even sell mobile websites and then the desktop as a bonus?

I think the desktop will either always stay or at least until the technology really does boom in mobile devices. There are always the hardcore gamers, programmer and even the older generation that want to use a desktop, plus need to for the power. You can’t beat a desktop or even a laptop on power, speed and battery life compare to a mobile device, so there will always be a demographic. Though technology will advance and could change this.

What do you think? Do you think that you will still be developing or designing for desktop devices in the next few year?

Better to be specified

Are you a master at one or are you good at all? I am asking this question to see if developers want, need and like to be a master at one topic or if they think it would be better to be multi talented.

Just a quick background blurb of why I question this. I started at a small company, where I was taken on as a web developer. I started to learn all areas of this area including not just ASP.NET, HTML, and CSS,  but also server set-up, maintenance, e-shots, cocoa touch and SEO plus more. So I was an all rounder at the web development, then I moved to A larger company. I was taken on as a back-end developer as I thought I would like to specify in the ASP.NET language. However when I started to show I could cover most other roles, I have taken on more responsibility of all the areas. So I am now an all round developer again and this then brings me on to if it is better and also who for.

The great thing about this subject is it can apply to any type of job, as we all have the same decision.
The all rounder

How is it for us

To be an all round kind of worker you have got to work much harder due to the amount of things you need to know to be great. For my application I need to know HTML, CSS, JavaScript, ASP.NET, servers and some other languages just in case like PHP plus more!. To keep this up is hard, but is it worth it? I have found I have gained more respect and knowledge by covering all these areas as people know they can come to me for that knowledge, advice and decisions. It also, with my line of work, brings the overall project together. I can see how a website needs to be built for the server set up, front end, back end and then maintenance. For example if it needs optimisation then I know where it would be best to shave off load time in what sections and how it would affect the other sections.

Job prospects become hard though as an employers wants the best of the best, but with out killing off all social life and fun, you can’t know everything. Especially as much as someone who is religiously learning one section constantly.

This can also become a problem when  you can mange all areas, then you need to work all areas. You would need to be invoked in every project, while also delivering results like you are working on one project. It is like taking a bite from multiple apples at the same time, possible but very very hard.

What the client thinks

WINNING… Well they might be depending on how good you are, but then again they probably still will be even if you only have a little knowledge in most areas. You should have a basic understanding of what ever the other subjects are, so for example I am a front end developer, but I have a basic understanding of back end. This still gives the employer an advantage as you understand basically how they work together and can appreciate the work going on in the other sections.

If you are close to master at most areas then bingo. They then have someone who can make, create and manage all their areas of work, so if one person is off you can cover all and hopefully very well. This also can become new avenues, like I know Objective C with COCOA Touch for iOS APPs which my employer is not currently doing. Therefore I could be the growth of the company which is of course is in the interest of the company.

Overall

If you don’t mind working your ass off then, you can become great and go far in this type of role. You can cover all areas and therefore would make a great team leader or manager as you can support the whole team. This also gives you safety for if they cut areas of the company or team then you can easily transfer.

It works for the employer, but if you want the best of the best then this is not going to work. You can only learn, listen and become great at one thing, but good at multiple things.

I think this kind of role is best for small companies that need to pay less and get more, though that can work for both parties.
Master of one

For us

Becoming the Yoda of a subject is the best thing ever. If you can become so valuable in that subject then everyone will want you. You can then move to the top of the food chain and teach all the others. Employers would want you in their company as you can produce the best work, but there are some pitfalls.

You may be the best, but there is always some one better and new information being release, so you can’t just relax. You would still need to work as hard as you can to keep up the top and be competitive to others like yourself, which can be harder as it is harder competition.

Being in this role may make it harder as well to understand how other areas work together. In all though it does reduce the amount of things you have to learn and worry about so you can concentrate more.

For client

WINNING… And again the client wins. They have a hard working, determined and great employee that is a master at just the subject they want. If they need anything to happen in that line of work, then you are the go to person. This, in their mind, would secure your job as you are a required asset. They would hope that with your knowledge they can gain the advantage to push their business to the next level and surpass others. You would know what is best to go with at current and future, so why would it be bad.

The problem would lie that they can only rely on you for that area of work. If they need a section fixed and that guy is out then your amazing skill turns to nothing. This will then start the cogs in the employers mind, what if we had an all rounder? How beneficial is this person?

Overall

In the end you are the master and you can become valuable to the employer, so it is probably the best way for you and the employer. It would be less stress for you and also more fun, as you can become a guru. Then employer will be happy as you can do the job not just well, but very well. Though you have to make sure you are required all the time or questions could pop up.

Summary

Not the ending you want, but it’s up to you. In the end it always does.

You have to decide if you want to be the all rounder and have a whole bank of knowledge or if you want to be the master with amazing knowledge in one area.