Ruben Canton – Page 6 – Just another blog about web programming, design, usability, standards and maybe some SEO

27May 2014 by Ruben Canton

First steps with Angular and MVC4.Net

So let's have a look at how to install and use Google's interface framework Angular in a .Net MVC4 project. Installation This one is as easy as get into NuGet and installing AngularJS from there, it will install lots of libraries and make some changes on your webconfig but it should just work. Hello World! Now let's make an MVC Controller, add it a View without using the layout (just to simplify the example) and no need of any Model for now. [sourcecode language="csharp" wraplines="false"] public class AngularController : Controller { public ActionResult AngularBasicExample() { return View(); } } [/sourcecode] Once we have that, we need to set the directive ng-app to the HTML tag like this: [sourcecode language="html" wraplines="false"] <!DOCTYPE html> <html ng-app> ... </html> [/sourcecode] That will tell…

19May 2014 by Ruben Canton

Using LESS on a .Net project

Web programming

I was checking which CSS pre-processor to use on a .Net project and looks like LESS is the best option as it doesn't require Ruby like SASS does. So here we go: 1. Install it using the NuGet package. Install dotLess, which is the one prepared for .Net projects, not the less.js one. Also install System.Web.Optimization.Less which we'll need later. 2. Create a .less file at your Content root just as an example: default.less with this code: [sourcecode language="css" wraplines="false"] @color: #0808b9; //blue @errorColor: red; h2 { color: @color; } p { color: @color; } p.error { color: @errorColor; } [/sourcecode] 3. Now add a controller/action/view with this on the view: [sourcecode language="html" wraplines="false"] <h2>Index</h2> <p class="error">This paragraph should be red!</p> <p>This should be blue!</p> [/sourcecode] 4. That was just…

08May 2014 by Ruben Canton

Rhino Mocks Stubs

Web programming

There are different ways to create and use stubs, you can use a repository to create stubs and handle all together, or use .Net Generics to create an independent stub. Creating a MockRepository [sourcecode language="csharp" wraplines="false"] [Test] public void CanSendMessageWithoutTextButWithAttachment2() { var mockRepository = new MockRepository(); var myStub = mockRepository.Stub<IMyClassType>(); // Creating a stub: myStub.Stub(x => x.MyMethod(null)).IgnoreArguments().Return(0); // Also you can create an expectation if you are expecting this method to be called: myStub.Expect(x => x.MyMethod(null)).IgnoreArguments().Return(0); mockRepository.ReplayAll(); // THIS IS VERY IMPORTANT!! var service = new MyService(myStub); // injecting the dependency var response = service.PerformRequest(); Assert.AreEqual(0, response); mockRepository.VerifyAll(); // THIS IS IMPORTANT TOO!! } [/sourcecode] In this way of working we create a repository for mocking that works as a workarea, we can create stubs on it and verify all…

07May 2014 by Ruben Canton

How to build .Net projects manually

Software Development

We can build .Net projects manually by making a call to the Microsoft's builder engine called MSBuilder.exe, which comes with Visual Studio so it should be placed around some folder there depending on the version of Visual Studio that you have. It is already integrated into Visual Studio, but if you want to call it manually you can make a call to it using a command line and sending which project to build and its options. As writing that each time we want to build would be hazardous and time-consuming it is better to create a script to do all the stuff just on executing it. This way, also, we can prepare different scripts with different types of builds: dev, staging, production, ... Here you have an example of what…

04Apr 2014 by Ruben Canton

Caching with memcache

Web programming

In general, if we were to add some manual caching to our system, there are some steps we need to take: 1. Try to get that value from cache. 2. Check if the value was retrieved. 3. If it wasn't, get it from database and add it to cache. 4. Handle the expiration time. 5. Return the value. Memcache will do all of that in just a line, freeing you from having to repeat the same steps all the time: [sourcecode language="csharp" wraplines="false"] public List<AdminProfile> GetAdminProfiles() { MemcachedItem<List<AdminProfile>> profiles = new MemcachedItem<List<AdminProfile>>("adminProfiles", cacheLifeTime, memcacheExpiryTime, cacheClient, () => noncachedObject.GetProfiles()); return profiles.Value; } [/sourcecode] Well, maybe I lied a little bit, as you need other preparations to make it work, but the idea continues the same. When you create a memcache object,…

21Mar 2014 by Ruben Canton

JavaScript: Primitive and Reference values

Web standards

The primitive values are those which value is stored directly on the variable, which are undefined, null, boolean, number and string. Reference values are those stored in memory and accessed through a pointer, javascript doesn't allow us to access memory directly but its pointers work the same way as in C. A reference value will be an object and the variable will store the address of memory where that value is stored instead than the value itself. [sourcecode language="js" wraplines="false"] var a = "StringValue" // variable storing a primitive value var car = new Object(); car.Color = "blue"; //this string value is instead being stored in an object, variable "car" is not a value type but a reference variable pointing a place in memory. [/sourcecode] Dynamic Properties In javascript, you…

20Mar 2014 by Ruben Canton

Rhino Mocks expectations

Web programming

One of the most powerful tools you can use with Rhino Mocks is its "Expect" tool. So that instead of setting what should be returned when calling a method/property on a stub/mock object, you can set that you expect that to be called and what should it return, useful in different ways: [sourcecode language="csharp" wraplines="false"] SetupResult.For(User.Name).Return("Ruben"); // This works when setting up the object. User.Expect(x => x.Name).Return("Ruben"); // This is setting an expectation User.Stub(x => x.Name).Return("Ruben"); // Yes, Rhino Mocks is so flexible. [/sourcecode] Each one of those ways of setting a return value will have its uses and limitations, but I'm going to focus on the Expect() on this post. The expect as it is there will return that value just once, so that if you call "User.Name" more…

20Mar 2014 by Ruben Canton

Refactoring: Removing dependencies

Web programming

I came to a code where the method was internally making a call to HttpContext which was hard to unit test, so had to remove such dependency. To do that I could have added the dependencies on the constructor but to avoid excessive refactoring (one step at a time!) I decided to do the inversion of control over the method only. (more…)

17Mar 2014 by Ruben Canton

Composing a request with Fiddler4

Web programming

We can build up our own requests using Fiddler Composer, just click on the tab "Composer" which is between to "Autoresponder" and "Filters". Now on the given panel you can write a header and a body, the body is used to set the contents of a post so if you are filling the body make sure you remember to select the "POST" method on the combo. If you need to add a cookie, just add it on the header, a very good approach to this is to make a real request to the website you want to check and copy-paste its header/body, then modify what you need on the composer. That way you can make sure the request will work. Once you are done preparing the request, just click "Execute"…

04Mar 2014 by Ruben Canton

Search tool for SSMS 2008 Express

Other

Redgate has developed a very useful tool to search for code between all your storeds, functions and tables etc. inside your SQL Server databases: http://www.red-gate.com/products/sql-development/sql-search/ It works with Microsoft SQL Management Studio 2005, 2008, Denali or the 2008 Express version (which is free). Note: If you try to install the x64 but on the menu to select what to install you don't have the "Management Studio" listed, try the x86 as I downloaded a few times the x64 but instead of installing the Management Studio was installing the SQL Server Express 2008 only.

24Feb 2014 by Ruben Canton

Selenium tricks

Web programming

Waiting until the page loads [sourcecode language="csharp" wraplines="false"] WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10)); wait.Until(driver1 => ((IJavaScriptExecutor)driver).ExecuteScript("return document.readyState").Equals("complete")); [/sourcecode] Selecting a sibling using xPath [sourcecode language="csharp" wraplines="false"] // Just in one sentence: var sibling = driver.FindElement(By.XPath("//input[@id='myId']/following-sibling::span[@class='someClass']")); // Or if you already had the first one: var someElement = driver.FindElement(By.Id("myIdentifier")); var icon = someElement.FindElement(By.XPath("//following-sibling::span[@class='someClass']")); [/sourcecode] Hovering over an element I found myself in trouble when trying to test a feature that required hovering the mouse over an element. It seems there is an easy way of doing it using Selenium with an action and: [sourcecode language="csharp" wraplines="false"] var icon = driver.FindElement(By.Id("myIcon")); var action = new Actions(driver); action.MoveToElement(icon); //I think in theory this is how it should be done action.MoveToElement(icon).Click().Build().Perform(); // Though many people around stackoverflow suggested to use this other one.…

21Feb 2014 by Ruben Canton

Changing Outlook 2013 default theme and View settings to make it look a bit better

Other

I never really liked Outlook being honest, but the new one is much worst than the old, in terms of design I've always reminded myself one of the foundations of design: its purpose is to help the user to do what it's designed for, not to look great, if it also looks great then... marvelous! That is not the case with Outlook 2013, the panels and messages all share the same color unallowing me to differentiate the different regions and forcing more my eyes to find each thing I need, also, the emails listing uses more space in vertical displaying less messages per page on my window than before, not good either as the more messages I can see the easier to handle them. That said, looking here and there,…

20Feb 2014 by Ruben Canton

Styling a checkbox using CSS3

Web design, Web programming

Got this idea from tutsplus but found a problem with iPad so just wanted to save it on my blog: Taking advantage of the ":checked" selector at CSS3 we can now style a checkbox using this: [sourcecode language="css" wraplines="false"] input[type="checkbox"] {display:none;} input[type="checkbox"] + label .fakeCheckbox { display:inline-block; cursor:pointer; vertical-align:middle; width:19px; height:19px; margin:-1px 4px 0 0; background:url(check_radio_sheet.png) left top no-repeat; } input[type="checkbox"]:checked + label .fakeCheckbox { background:url(check_radio_sheet.png) -19px top no-repeat; } [/sourcecode] The idea is quite similar to what we would do using javascript but instead of using a script to set the "on/off" we just use the CSS3 :checked selector to know if the radio is on/off and determine the background position of the span (fake checkbox). A nice improvement on previous method. That said, there is a bug on…

19Feb 2014 by Ruben Canton

Help your designers to be more creative!

Web design

There's many times when your designers come to you with some crazy ideas that aren't good at all for websites as it would crash the layout too much or stop working on some browser/device due to compatibility, but many times what happens is just the opposite, they just don't dare to ask for too much just in case, making too simple designs, or even worst, as technologies improve things that were not possible in the past now become possible, but as they are focused in designing they aren't aware of the new CSS3 possibilities or any other coming, it is then for you to tell them what could they do to make sure your website design will be as cool as possible. Style Properties Let them know about some CSS…

04Feb 2014 by Ruben Canton

CSS Tips

Web design

Some guidelines I find useful when writing CSS styles: Use an identifier, not the tag name Except for setting those general styles at the body, headers, anchors etc. you should never go for this: [sourcecode language="css" wraplines="false"] .someRegion div { ... } .someRegion div a { ... } [/sourcecode] Just because you may decide to make that "div" a "p", or an anchor, which would force you to change the style selector to maintain the style. But also, because forcing a combination of HTML tags could make you lose styles or scripts assigned this way in case the DOM chain changes (moving an element outside of its "div" or "p"). A better approach would be: [sourcecode language="css" wraplines="false"] .someRegion .myElement { ... } .someRegion .linkType { ... } [/sourcecode] Don't…