Nice post on using CSS pseudo-elements

 

Creating pure css icons, without using fonts or svg or images.

http://nicolasgallagher.com/pure-css-gui-icons/

 

Holey cow, these icons are created with just CSS, no fonts, no svg, no images not nothing, just the magic of CSS en pseudo elements.

 

screenshot

 

To see this in live action go to: http://nicolasgallagher.com/pure-css-gui-icons/demo/

Press F12 and be amazed:

image

 

How to use pseudo elements in css:

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Most developers say: code comments are evil, I agree and I don’t agree…

Most developers I know say: don’t write any comments, because they are evil and little puppies will dye if you do.

The arguments they give:

  • code comments will get out of date
  • code should be self explaining.

 

I totally agree, but there are counter arguments, to write comments:

 

Code comments out of date?

If you look at the AngularJS code, the comments are used to generate the documentation on the site, so when the comments are not updated, the documentation on the site will be outdated. This is one trick to keep your comments up to date.

 

Code should be self explaining

I totally agree, code should be self explaining!

But it’s not the problem, that code comments are written, but the way they are written.

The most comments explains what the code does, not why. I do not care, “what” the code does, I want to know “why” it is written and “why” it is written in the manner it is written.

 

I recently had to make changes to C# code that was written ages ago (13 months in this case). I red the code and the “WTF counts per minute” started to pile up. I red the code comments and they exactly explained what the code did, but I am an experienced C# developer, I know what the code does, because I can read C#, but I did not understand why the code was written and why it was written in the way it was written.

So I checked source control to find this “terrible” developer that had written this code to ask him, what on earth he was thinking and as you will probably expect it was me, myself and I, 13 months ago Smile.

 

So please, if you write inline comments, don’t write “what the code does”, write “why” the code is written and “why” you write it in the way it is written”.

Tip: Can’t sign out of Office 365 with Google Chrome

When accessing https://outlook.office365.com I was getting a error message that I was signed in with an other account and I had to sign out. I think this was caused by the fact, that I have a private “live” e-mail and a work e-mail on “office 365”. But everything worked again, by following the steps at: http://support.microsoft.com/kb/2507767

 

Step 4: fixed my problem

 

image

Setting height / width sparklines and removing spacing with Kendo UI and AngularJS

In the following screendump, I used 6 sparkline fields:

 

image

 

To increase the width / height of the sparkline (bar) I set the following values:

– charArea options (height, padding, margin)

– Series options (gap and spacing)

$scope.kostenMinderPersoneelChartOptions = {
chartArea: {
background: "",
height: 17,
margin: {
top: 1,
bottom: 0,
left: 0,
right: 0
},
padding: 0
},
tooltip: {
visible: false
},
series: [
{
type: 'bar',
color: '#EC008C',
field: 'sparkline',
gap: 0,
spacing: 0
}
],
valueAxis: {
min: 0,
max: 200000
}
};

How to Fix: No “organize usings” and F12 “Go to definition” disabled or grayed out in Visual Studio 2013

When I right clicked on my using statements in a C# file, the context edit menu, didn’t contain the options for refactoring and “organize usings” and the menu item “F12 Go to definition” was grayed out.

I found the fix at: http://stackoverflow.com/questions/25898616/visual-studio-go-to-definition-disabled-or-gray-out

 

  • Clean your solution
  • Close solution
  • Remove any [solution].ncb, [solution].suo, [solution].vspscc files
  • Reopen solution
  • Rebuild solution

Menu options should appear and be enabled.

An angularjs switch / toggle, that works in IE8 and modern browser will get css 3 transitions.

Code can be found at: http://plnkr.co/edit/wBFKg33JxG7ABIHBvtik?p=preview

 

image

 

 

 

image

 

Based on the code found at: http://codepen.io/iamtyce/pen/kxrhC

 

html template

<div class="toggle toggle-alternate {{ value }}">
<label class="{{ value }}">{{ getSwitchText() }}</label>
<input ng-class="{ isChecked: value == 'off' }" type="radio" name="toggle" value="off" ng-model="value">
<input ng-class="{ isChecked: value == 'on' }" type="radio" name="toggle" value="on" ng-model="value">
<span class="switch {{ value }}"></span>
</div>

Part of the code

image

How to refresh a kendo ui widget, when options on the AngularJS $scope change.

Code can be found at: http://plnkr.co/edit/8CQURTLHftIpBwXUAN7s?p=preview

 

Let say, we want to show all records in a pageable kendo-grid, when the user clicks on a button.

This can accomplished by programmatically setting the page size of a kendo-grid and using the k-rebind attribute:

 

image

 

After clicking on the “Set page size” button:

 

image

 

<!-- App scripts -->
<script>
(function () {
"use strict";
// This is the starting point (main) for the angular app.
var app = angular.module("spike", ["kendo.directives"]);
// Set culture info to Ducth:
kendo.culture("nl-NL");
}());

(function () {
"use strict";
var app = angular.module("spike");
var controller = function ($scope, $animate) {
$scope.title = "Programmatically set pagesize kendo grid.";
var data = [
{ id: 1, name: "Bob1" },
{ id: 2, name: "Bob2" },
{ id: 3, name: "Bob3" },
{ id: 4, name: "Bob4" },
{ id: 5, name: "Bob5" },
{ id: 6, name: "Bob6" },
{ id: 7, name: "Bob7" },
{ id: 8, name: "Bob8" },
{ id: 9, name: "Bob9" },
{ id: 10, name: "Bob10" },
{ id: 11, name: "Bob11" },
{ id: 12, name: "Bob12" }
]
$scope.mainGridOptions = {
dataSource: {
data: data,
pageSize: 4
},
pageable: {
pageSizes: [4, 8, 12]
},
sortable: true,
dataBinding: function (e) {
// This is a fix.
// When the user selects an other page size in the "page size" dropdownlist, 
// the MainGridOptions are not updated.
// To reflect the changes from the "page size" dropdownlist, we set the "page size" manually here.
$scope.mainGridOptions.dataSource.pageSize = e.sender.dataSource.pageSize();
}
};
$scope.setPageSize = function () {
$scope.mainGridOptions.dataSource.pageSize = data.length;
};
};
app.controller("main", ["$scope", controller]);
}());
</script>
<div ng-controller="main">
<h2>{{ title }}</h2>
<div>
<br />
<button ng-click="setPageSize()">Set page size</button>
<br />
<br />
<div kendo-grid="mainGrid"
k-options="mainGridOptions"
k-rebind="mainGridOptions"></div>
</div>
</div>

Start progress animation (infinite rotate / spin) on click, without using angulars animation service ($animate).

 

See code at, Plunker: http://plnkr.co/edit/jUzCC1FmtgxdX4gWTVIW?p=preview

 

I used a custom directive with isolated scope:

<!-- App scripts -->
<script>
(function () {
"use strict";
// This is the starting point (main) for the angular app.
var app = angular.module("spike", []);

}());
(function () {
"use strict";
// Adds an animation to an element.
var directive = function () {
function link($scope, element, attributes, controller) {
$scope.$watch('loading', function (newValue, oldValue) {
if (newValue === true) {
element.removeClass("progress-indicator fa fa-refresh spin");
element.addClass("progress-indicator fa fa-refresh spin");
}
else {
element.removeClass("progress-indicator fa fa-refresh spin");
}
});   
}
return {
restrict: "EA",  // Directive be used as element and as attribute.
link: link,
scope: {
// This directive expects an attribute "loading".
// The value of the attribute "loading" will be watched.
// When this value === true, classes will be added to "show" and animate a progressindicator.
// When this value !== true, classes will be removed, to stop animation and "hide" the progressindicator.
loading: "=loading"
}
};
};
angular.module('spike').directive('zvdzProgress', [directive]);
}());
(function () {
"use strict";
var app = angular.module("spike");
var controller = function ($scope, $animate) {
$scope.title = "Start progress animation on click.";
$scope.isLoading = false;
$scope.start = function () {
$scope.isLoading = true;
};
$scope.stop = function () {
$scope.isLoading = false;
};
};
app.controller("main", ["$scope", controller]);
}());
</script>

 

<div ng-controller="main">
<h2>{{ title }}</h2>
<div>
<br />
<button ng-click="start()">Start</button>
<br />
<br />
<button ng-click="stop()">Stop</button>
<br />
<br />
<div zvdz-progress loading="isLoading"></div>
</div>
</div>

 

 

image

 

On start ng-click, a refresh icon is shown that spins:

image

Awesome: Visual Studio will minify a css file automatically, when original file is altered.

I Just discovered that Visual Studio will automatically re-minify a css file, when the original not minified version is altered.

So I have two file: in a folder including the map files:

 

test.css

test.css.map

test.min.css

 

When I change the test.css the test.min.css is automatically overwritten by a new minified version.

Awesome!

Fix: wait cursor hang with AngularJS Block UI

When I stopped Block UI the wait cursor remained until I moved the mouse.

To fix this problem I changed the Block UI css (I moved the “cursor: wait” from the class .block-ui-container to the class .block-ui-active):

 

.block-ui-container {
position: absolute;
z-index: 10000;
top: 0; right: 0; bottom: 0; left: 0;
height: 0;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=00);
}
.block-ui-active {
cursor: wait;
}