CSS regression tool? [closed] - css

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm looking for a visual regression testing tool for CSS refactoring and see whether or not there are any unintended cascading behavior in a website.
Ideally, the tool that can crawl a website (even locally) and grab snapshots of each page and store it in a single repository.
When run for the second time, it will show the pages that are visually different since the last time it was run.
Even better:
if it can show the overlapper XOR view of the 2 version of the page.
compare rendering results of different browsers (almost like an automated Microsoft Expression Web compare feature).

My current favorite is WebDriverCSS in combination with BrowserStack Automate API. This pair of tools allows for multi-platform, multi-browser regression testing across the very wide range of devices that BrowserStack supports. It requires writing code but is much more comprehensive than any solution bound to Phantom or Slimer.
If you are ok with an old WebKit being your only test UA, here's a great writeup on CSS regression testing using PhantomCSS. Their basic example provides exactly what the original question desired: visual diffs between two commits.
For a simpler tool that requires no coding (only YAML config), I point people towards Wraith more often than PhantomCSS. Give #ericcraio's answer a vote if you like Wraith and don't want to write Casper code.

I know this question has been posted for awhile but I wanted to mention about a new CSS regression tool called wraith by bbc-news.
http://github.com/bbc-news/wraith
It utilizes tools such as phantomJS and imagemagick.
http://responsivenews.co.uk/post/56884056177/wraith

Check out Browser Shots. This is a free service.
There are some restrictions on how many tests you can run each day as a free user. But unlike Litmus; you can run tests on all supported browsers--Litmus only allows free users to test their websites on Internet Explorer 7 and Mozilla Firefox 2.

I am developing a CSS regression testing tool which is called SUCCSS, it is a npm global, open source: https://github.com/B2F/Succss. Atm, you can read its full documentation there: http://succss.ifzenelse.net

Check out Litmus.
It'll crawl your site and take screen captures has damn near every browser you'd want.
In addition to the core functionality Litmus also allows you to to track bugs, log in to private sites, and allows you to publish compatibility reports from your tests.

What you've described is precisely what Mogotest does. We can log into your site, take screenshots for all the pages you've configured, and do automated comparison using the principles of Web Consistency Testing.
We also keep a full track of history so we can tell you exactly when something broke (and what your site looked at that time) and even cooler, we can detect when you've fixed something. And finally, we snapshot your code at each test run so we can show you exactly what changed for each issue.
Sorry for the self-promoting nature of this answer. I just wanted to be thorough in addressing what you're looking for.

Related

CI Build status output alternatives [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
We currently use Cradiator to display the status of our continuous integration (CI) builds from CruseControl.net, on a 42" Samsung television on display high-up in our IT department.
Cradiator is a great starting place, but we're getting to the point whereby we're having lots of projects on there and it's starting to get a bit 'full'.
What I'd like to know is, what do you use to display your build statuses? Custom software? Off the shelf stuff? etc. Alternatively, I'm looking for ideas on how we improve on Cradiator.
I use Hudson, and when I have a chance to dedicate a monitor to it, I'm going to start with this:
http://wiki.hudson-ci.org//download/attachments/37323554/Hudson_1.jpg
http://wiki.hudson-ci.org/display/HUDSON/Radiator+View+Plugin
... after all, if they're green, they don't need to take up much screen space, do they? Imagine if they were all green. People would be just as happy (and just as informed) if it showed a big checkmark and nothing else. So you only really need to highlight the failing ones. Cradiator looks skinnable, and you're already using it, so that's the first thing I would try.
I mentioned several solutions for Hudson in a previous answer:
There are many solutions (all links
below point to working solutions with
Hudson or existing plugins):
Hudson Build Status Lava Lamps
Hudson Ambient Orb
Hudson Do It Yourself Orb
"Red Bear Alert!" - The Hudson Bear Lamps
"Watch the bikes!" - Extreme Feedback with Traffic Lights
Start to smell those code smells
Nabaztag
TuxDroid
Radiator View (ideal for displaying on a screen on the office
wall)
eXtreme Feedback Panel (even better than the Radiator View,
especially for a FullHD flat panel)
Check out the other Build
notifiers plugins for more ideas.
Personally, I have experienced the
bunny, lava lamps, orbs and the
radiator view. They all do the job but
I have a little preference for the
lava lamps. As Jeffrey mentioned in
another answer, it's indeed funny to
race against the wax to fix a build
failure :)
We're currently using the Radiator View that includes now the modifications mentioned in this comment. It's use the space in a very neat way and does a perfect job, even when you have a lots of projects. It's just great.
(source: hudson-ci.org)
Check the link for more screenshots. I miss lava lamps a bit (because they are fun) but the Radiator View provides better feedback IMO.
One idea (and Cradiator does have an issue tracker item for it) is to only showing broken builds.
Another idea, is to monitor multiple configuration sets and switch/fade between them at a set interval.
Our team has 12 projects to monitor, but to get around the clutter we currently have 1 machine with 2 monitors connected. Each monitor has an instance of Cradiator running on it. Doing this and using the RegEx Project Filter feature in Cradiator we show 5 projects on one monitor and a different 7 on the other. This should keep us going until about 15 projects, when the clutter will start to gang up on us again.
Cradiator is open source and the 'skin' concept is relatively isolated, just waiting for you to get your hands dirty in the source code!
In fact, I have just moved the source code for Cradiator to GitHub for a more flexible approach to sharing each other's work. Fork away.
One of the primary goals of radiating build status information into a room is to get developers to respond to broken builds and fix them. Quickly working out who might be responsible for a failing build is important.
What I have experienced first hand at my company is that processing check-in comments and displaying pictures of the users contributing to a build is very effective way of getting developers to react to build failures. People seem to respond to their face on a red bar, and others don't have to be so distracted.
With this in mind, I have developed a standalone build radiator web-app that talks to Jenkins and TeamCity over their REST APIs. CI-Eye is trivial to set up, and will probably give you better results in the workplace than many other plug-ins and radiator apps. Give it a try, and let me know what you think -- I'm quite actively improving it, and welcome any feedback.
CI-Eye is free and open source -- see the CI-Eye wiki for more details.
A good option for continuous integration radiator is Buildron (Mac & Win).
Its supports a lot of builds in same screen, as you can see:
And you can filter builds using a remote control (iOS & Android).
If projects depend on each other somehow or if you can assign some priority (business value?), then I would consider some tree or a map kind of stuff. For 100+ projects it really should be more visible which greens/reds are more important than others. Myself I'm using just the structured web dashboard + systray. Not even email.
Brett, actually Cradiator just added a feature called MultiView to Cradiator - which is one way of fixing your problem of having too many projects showing.
So you can split your projects between separate "views". A view is the combination of URL/Skin & Project Filters.
Each view is shown on a rotation cycle every poll interval (default 30 seconds)
For example, if you have 12 projects, you can set 2 views which show only 6 each.
See the Release Notes for v2.8 for details.
The show only breaking builds feature has been added as well.

How to document a ASP.net website? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have released a ASP.net website.
How to document it ?
Is there any tools available in VS2008?
How it can be achieved ? Please help?
Any automatically-generated documentation is useless, in my opinion. Unless you are ready to take your time and describe high-level decisions, structure, code organization and other issues personally, you can safely omit this part.
As it has mentiond good documentation can't be automated. So you can use MS Word. And for any kinds of diagrams I would use MS Visio.
I found this tool, they offer a free trial version. I never used it. Maybe it will help you.
http://www.innovasys.com/products/dx2008/overview.aspx
Quotes from the site:
"Document! X automates the process of creating and maintaining documentation for a wide range of solution elements."
"With Document! X, documentation can be automatically produced throughout design and development without requiring investment of developer resources, providing development teams with an accurate and up to date reference and allowing new developers to jump the learning curve of new components and schemas. Document! X makes producing documentation a natural and productive activity for developers and technical writers alike."
This is a quote from other site about the same tool:
"New features included in Document! X 2008 include compatibility with Microsoft Visual Studio 2008, documentation of ASP.NET Ajax Javascript and new templates to replicate the fresh look and feel of the Microsoft Visual Studio 2008 documentation."
What do you need to document?
The design? You can use sandcastle to generate a code file from the XML comments in your source code. Providing a detailed description of design choices and architecture can't be automated and requires time to document. Provide workflows where necessary to explain processes. You might want to split this document into high level design and detailed design, providing an overview of functionality and then a detailed description of the design. Don't replicate or explain the actual code per se (i.e. "using an integer counter, loop through..."), that's what the source is for.
The application usage? Again, this is something that you will need to spend timing writing. Hopefully you already have a functional specification and use cases for the application and can leverage these to write a user document.

What are some key concepts for effective development teams? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
Where I work we've recently put together what we call the Development Standards Committee which is tasked with improving our procedures, processes, methodologies, tools, standards, and whatever we think would help us become a more effective team.
We've got a spreadsheet of items that we've ranked and are going to start tackling from the top down. We've got things such as better source control (currently on SourceSafe), implement a bug tracker (such as Mantis of FogBugz), peer code review, move to .Net 3.5, possibly move to some form of Agile, do more actual team development rather than single developer per project type stuff, and some other things...
What do you think are some key things that can make or break a development team? What should we add to this list?
Some additional information: We have about 12 people on our windows team, and about fifty in development if you include all platforms. We want to improve as much as possible for everyone, but we're our biggest focus is the Windows team. All of us have been here for a couple of years at least, so most of us know each other and work together pretty well.
The number of people on your team is actually really important here. There are basic things that every team should implement (source code control, bug tracking, etc), but there are things that are different base don team size. Code reviews on a very small team, for instance, can be more informal.
Moving to Agile is a good idea, unless you're particular development environment makes it a bad idea. Also, you'll not be able to do this without support from the people who are using your software.
Consider doing things to ensure that communication between the team is easier and with less roadblocks - do all your members know each other pretty well? Can you work with each other? Do you understand each other's idiosyncracies? Learning to work as a team is much more important than any random process improvements you can make.
Require comments when you check in code (it's great if you can tie commits back to your bug tracker)
Maybe Static Code analysis, like what's built into Visual Studio
Continuous Integration like CruiseControl
Development teams really need good people to start with, that work well together, but this isn't really an item to add to the list. It does however affect my first recommendation, be pragmatic. If you're not encouraging your developers to think about how they work and can drive them selves to improve, it's really hard to lay down a development environment that will do it for them.
Mentor and Training: If you can't do XP, then at least hook up your Juniors with Seniors whenever you can. Not only will you share knowledge but you'll share the context around your projects you own.
Some sort of Continous Integration and regular, tested, working "releases" make wonders for quality.
as better source control (currently on SourceSafe)
If this is Visual SourceSafe -- you need to change this immediately. Try cvs, svn or even something paid like Perforce.
There exists something called Rational Unified Process that deals with your problem (and much more).

What is a good tool or site to use to performance test a web page/site? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
What is a good tool or site to use to performance test a web page/site? I am trying to find a good baseline to detect how fast my page will load on one hosting provider vs another. I initially used http://www.freespeedtest.com/ but like to get opinions and links for others.
I use Firefox with the FireBug and YSlow plugins installed.
I use this to measure a page's size and number of HTTP requests required:
http://www.websiteoptimization.com/services/analyze/
I use Pingdom to measure my website's average response time.
For simple basic testing, use ab (ApacheBench) or httperf.
Pingdom is very useful for initial analysis of a particular page and measurement of site response. However, this is not a load test tool.
For that you have to go to the commercial tools. Here are some options:
Keynote
Gomez strong text
Loadrunner
I also checked out Load Impact recently and it seemed like a good basic tool.
Lastly, here's a fairly comprehensive list of options.
http://www.softwareqatest.com/qatweb1.html#LOAD
Here are a few that I use:
http://www.linkvendor.com/seo-tools/speedtester.html (This one is pretty detailed)
http://www.vertain.com/?sst (Very fast and simple speed test)
http://www.iwebtool.com/speed_test (Another simple speed test)
YSlow addin for Firefox is very good for helping you tune performance as is the NET tab of firebug.
Firebug with YSlow is a pretty common combination. Google also has PageTest which is another plugin which works with Firebug. It has a few different rules and such but is still pretty similar to YSlow. I like using both tools for initial testing since they can provide very simple and fast results.
Once you have started making optimizations and you want to see how performance is changing I would recommend using Pagetest. It provides a web interface for YSlow like performance results/analysis along with really nice waterfall charts to see where time is being spent. Perhaps the two most useful things about Pagetest are that 1) it allows you to easily perform multiple trials and 2) it gives clear results for cold and hot cache cases. I have found that multiple trials is the only real way to get realistic performance results, there is simply too much variance in single trials.
I tried all of these tools and finally came across the "Net Export" plugin for Firebug. Now I use the "NET" tab of Firebug to trace my site performance and I can export it to .har format to view later as an archive. I can use the .har archives as baselines and then take more firebug "persist" traces and then compare them visually later.

Runtime Page Optimizer for ASP.net - Any comments? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
RPO 1.0 (Runtime Page Optimizer) is a recently (today?) released component for ASP and Sharepoint that compresses, combines and minifies (I can’t believe that is a real word) Javascript, CSS and other things.
What is interesting is that it was developed for ActionThis.com a NZ shop that saw at TechEd last year. They built a site that quickly needed to be trimmed down due to the deployment scale and this seems to be the result of some of that effort.
Anyone have any comments? Is it worthwhile evaluating this?
http://www.getrpo.com/Product/HowItWorks
Update
I downloaded this yesterday and gave it a whirl on our site. The site is large, complex and uses a lot of javascript, css, ajax, jquery etc as well as URL rewriters and so on. The installation was too easy to be true and I had to bang my head against it a few times to get it to work. The trick... entries in the correct place in the web.config and a close read through the AdvancedSetup.txt to flip settings manually. The site renders mostly correctly but there are a few issues which are probably due to the naming off css classed - it will require some close attention and a lot of testing to make sure that it fits, but so far it looks good and well worth the cost.
Second Update We are busy trying to get RPO hooked up. There are a couple of problems with character encoding and possibly with the composition of some of our scripts. I have to point out that the response and support from the vendor has been very positive and proactive
Third Update I went ahead and went ahead with the process of getting RPO integrated into the site that I was involved in. Although there were some hiccups, the RPO people were very helpful and put a lot of effort into improving the product and making it fit in our environment. It is definitely a no-brainer to use RPO - the cost for features means that it is simple to just go ahead and implement it. Job done. Move on to next task
I decided to answer this question again after evalutating it a little.
The image combining is really amazing
The CSS and Javascript is nicely minified
All files are cached on the server meaning that the server isn't cained every time it makes a request
The caching is performed at a browser level, meaning it will still work if you use an old (unsupported) browser because you'll just recieve the page un-compressed
You can see the difference youself Optimized vs Unoptimized
The price is as follows...
$499 until the end of september is a steal
$199 for an annual renewal is a steal
I love how RPO is plug and play.
It will take time to create a module like theirs and depending on work load can be worth the $750/year versus the development time it takes to re-create it.
I'm very excited about RPO and reviewing it's effect on my sites.
Something I used quite recently was page optimization module from I found on Darksider's blog. It it not nearly as intense as what RPO sets out to achieve, but a nice start block to building your own optimization module if that's what you're after.
Clarification on the RPO price. Launch price until end of September 2008 is $499 - and this discount is by voucher (email service#getrpo.com to get a voucher). This includes software assurrance for 12 months, after which you can choose to renew for $199 or not - the software still works.
The RPO automates 8 of Steve Souders/Yahoo's principles for High Performance Web Sites - the important thing for us was making a developer friendly tool - you can keep your resources in the format and structure that makes sense for development and the optimization happens at runtime.
I don't want to spam this forum with sales stuff, so just email me if you have any questions - ed.robinson#aptimize.net. Thanks for looking at the RPO.
Ed Robinson, Chief Executive Officer, Aptimize Ltd
I've been a user of the RPO since beta and have it deployed in anger on two of my sites:
http://www.syringe.net.nz (My blog) and
http://www.medrecruit.com (A company in which I have an interest)
I've done a longish winded blog post on the whole why not just turn on caching question here:
http://www.syringe.net.nz/2008/10/21/RuntimePageOptimizerWhyNotJustEnableCachingInIIS.aspx
The short summary version- Caching is a nice to have for people who aren't really geared up to turn it on in IIS (it's still not super easy in IIS6)... the real power is in combining resources as it's latency * request count that really kills your performance.
minifying and gzipping commonly called scripts and style sheets is totally worthwhile - the file size reduction speaks for itself. That's something that you can do through your webserver, without the help of another product.
However, merging scripts and styles and serving them together is an interesting idea from a general 'the fewer requests the better' standpoint.
It looks like interesting technology - I'd try it out. It almost certainly couldn't hurt.
Just had a little look, a lot of the things they offer you should be able to do yourself with a little palnning and foresight (combine all javascript files, combine all css, minify, enable GZip...
$750 a year seems a little steep, and theres no options.
(edit)
After speaking with the marketing bods, it's $499 until end of september, and renewing the liscence will be $199. That persuades me a lot more!
I'm going to give it a whirl and then see how much it improves our DEV server.
I personally have been using a product called PageBlaster by Snapsis that does caching, minification. It is primarily used in DotNetNuke applications, but if I recall correctly it can be used with any ASP.NET application, and the price is right.....

Resources