månadsarkiv: juli 2013

Set IE Proxy Server with PowerShell

Today just a quick one-liner tip for PowerShell.  Use this script to set a proxy server in IE Settings. I got the inspiration from Aymeric’s blog:  Scripting : Toggle proxy server in IE settings with PowerShell:

By the way sp is just alias for Set-ItemProperty cmdlet:
proxy_002

This corresponds these settings in IE (Tools – Internet Options – Connections – Lan Settings):

proxy_001

It can be useful if you have want to automate this.

Learning a CSS preprocessor language. Why?

The important question here is: Can you get by without it?

Here’s how it usually plays out when you take your first steps into the world of web styling: You start out with learning CSS, setting colors, height of boxes. Getting annoyed with margins not behaving as they should.  Creating classes, using IDs, getting annoyed with specificity. Trying out gridsystems, using hover and getting annoyed with  float. Actually, a lot of CSS creates some itchy feelings. In my opinion, it is too simple. There’s too much manual labour, too high a risk for mistakes.

CSS preprocessor languages are, for me, a way to make it bearable. Here follows a short introduction to LESS, a preprocessor language that I recently looked at at work. The other big player in the field is Sass, a comparison of the two will feature in a future post. This is a really short and simple summary of what Less can do

Top 3 things that LESS can do:

Variables

I’ve missed these, how did I ever live without them! Imagine you have a site with a fixed width, say for example 970px. You write 970px over and over again all over your stylesheet. And then… you change your mind. You really don’t like 970px. 980px is the way to go. Now you have to switch the two values all over the document, and find-and-replace is an awful idea, cause some of the element still want to be 970px. It is soul killing, mind numbing work. What if you could just change it in one place? Use a LESS variable!

1
@the-width-of-stuff: 980px;

Now it is as simple as using the variable in your LESS-stylesheet.

Mixins

This is a way to create a rule that you can then use and reuse in another rule. This way you don’t have to write the code for creating a browser resistant gradient over and over again. You can just use the same bit of CSS. Mixins can be created with or without parameters. If you want the exact same code again, you don’t need parameters, but say for example you want different colors on your gradient, LESS lets you provide arguments to your mixin!

Mixin without parameters:

Here is a mixin called .backgroundcolormaker that when used, sets the background color to red. Now it contains just one attribute, but it can ofcourse be expanded just as a normal CSS rule.

1
2
3
4
5
6
7
8
.backgroundcolormaker {
background-color: red;
}

.some-class {
width: 980px;
.backgroundcolormaker;
}

Will output this:

1
2
3
4
.some-class {
width: 980px;
background-color:red;
}

Mixin WITH parameters:

Here is a mixin that takes one argument. It sets the given value to the background-color attribute. This way you can use the same rule but with different values. You can specify more than one argument when creating a mixin.

1
2
3
4
5
6
7
8
.backgroundcolormaker (@bg-color) {
background-color: @bg-color;
}

.some-class {
width: 980px;
.backgroundcolormaker(pink);
}

Will output this:

1
2
3
4
.some-class {
width: 980px;
background-color:pink;
}

Libraries

With both LESS and Sass you can import libraries with mixins to use. Finished, usable snippets that help with browser support and complex CSS3 attributes. For SASS the most popular one is Compass, for Less there are LESSHat, Bootstrap and Elements, among others. For example you can use the .transform mixin to transform an element with your prefered values, without having to worry about browser compatibility. Or the .border-radius one that creates nice, rounded corners for you. Extremely practical!

 

Do yourself a service and take a look at a CSS preprocessor language of your choosing. I know I can’t live without it now.

I will be back soon with integration with Visual Studio and a comparison of LESS and Sass!

SharePoint Apps: “Provider Hosted First” Approach

Recently I had an exciting mail conversation with Thomas Deutsch. He came up with an idea how to fasten the development of apps. This smart approach is called “Provider Hosted First”. See Thomas’ original blog post. Here are some highlights:

What you actually do is a local website which runs in grunt server:

Then a SharePoint-hosted app is created with an SPAppIframe that refers to that local app site. Genious!!!

Some key features of this approach:

  • This local app contains a livereload script. Your sharepoint app is updated every time you save your css, js, html file in your IDE
  • Grunt minifies, bundles your assets
  • Grunt runs your tests automatically when your content is modified
  • The SharePoint app can be on Premises, on Office 365, wherever you want it.

Video

See the video how it looks like to develop using this approach

See the video how it looks like to develop using this approach