Using jQuery plugins in Angular app

14 August 2013 · Permalink

If you came to Angular from jQuery background, you will probably want to use some plugins. But with Angular you should be writing an app, not just a script, so where is the place plugins should be called?

I use the following approach. First of all JavaScript files should be linked in the proper order:

  1. jQuery
  2. Angular
  3. jQuery plugin(s)
  4. Your app

In the markup bind the controller to the element you want to use a plugin on. Here I’m using Bootstrap popover plugin.

<button class="btn btn-default" ng-controller="PopoverCtrl">

Now define the controller inside your app:

var myApp = angular.module('myApp', []);
 
myApp.controller('PopoverCtrl', ['$scope', function ($scope, $element) {
  $element.popover('show');
}]);

Because we included jQuery before Angular, $element is a jQuery object, so we don’t need to traverse DOM and create a new one.

Affix (sticky) behavior

14 July 2013 · Permalink

Have you ever seen a block that sits on its place but sticks to the viewport when you’ve scrolled past it? That is behavior called affix.

If you have Chromium-based browser you can get it via position: sticky (go to chrome://flags/ and find Enable experimental WebKit features there):

.sticky {
  position: sticky;
  top: 0;
}

To make this work on the normal conditions we’ll have to use JavaScript:

var sticky = document.querySelector('.sticky');

if (sticky.style.position !== 'sticky') {
  var stickyTop = sticky.offsetTop;

  document.addEventListener('scroll', function () {
    window.scrollY >= stickyTop ?
      sticky.classList.add('fixed') :
      sticky.classList.remove('fixed');
  });
}

Unfortunately, this solution will not work smoothly on mobile devices (at least not on Apple ones): sticky element will “jump” on its place only at the end of the scroll animation.

Nevertheless, an affix behavior can be useful in some UX scenarios and doesn’t require a lot of time to implement. The source code of this article is on Codepen, feel free to use it.

Become a user first

03 July 2013 · Permalink

In his interview for Bridge, Ryan Sims gives an advice to aspiring designers:

Get your hands on as many products as possible. I’m a firm believer in using things, and valuing the time spent on using them as a learning opportunity. Every time I go through a product — whether it’s the new version of an app I use daily or one I’ve never used before — I just love getting my hands on it and figuring out why it works well, what it does differently. Make it a goal to seek out and appreciate good design, because the more you immerse yourself in it, the more it becomes part of you.

This is what I am up to lately. I believe that good design can from a negative experience or from a positive one, transfered from the outside. While books can educate, skills still come out of practice, usage and exploration.

If you are a user, you are known with the product. If you are a power user, you are familiar with it. The next step is to become a designer to apply your skills for making a better product.

CSS multi-column layout

28 June 2013 · Permalink

There is an easy way to create newspaper-like layout with CSS, so that a content will flow from one column to another. With columns property you can set columns count, width or both:

.col {
    columns: 3 20em;
}

The gap between columns will be 1em unless it’s explisitly set:

.col-spaced {
    columns: 3 20em;
    column-gap: 2em;
}

It’s also possible, to draw a vertical rule, much like border, that will be placed in the middle of the gap:

.col-separated {
    columns: 3 20em;
    column-gap: 2em;
    column-rule: solid 2px #444;
}

Any child element can easely span across a number (can be all) columns:

.col-separated h2 {
    column-span: all;
}

And that’s it! The source code of this tutorial is available at CodePen; detailed specs can be found at W3C; required prefixes and browser support can be checked at Can I use.

Fair criticism

23 June 2013 · Permalink

Ian Storm Tailor gives a solid overview of iOS 7 icons. Among the other things, he notices the poor choice of color:

For hardware design it’s not a problem because their signature gray aluminum will take on different hues and shadows depending on its environment. But in software, a dull gray will always be a dull gray.

On the opposite end of the spectrum you have apps … that use extremely saturated and low contrast colors. Colors that my high school art teacher would have referred to as “straight from the tube”, meaning taken directly from the tube of paint without thought.

This is criticism is fair: he points out what’s exactly wrong and how to fix it. Go ahead, read the whole post.

To IE 8 fourth birthday

19 March 2013 · Permalink

Exactly four years ago, 19th of March, 2009 Internet Explorer 8 was released. At the time it suppose to support IE’s high market share, fighting competitors: Firefox 3, Opera 9.5, and Safari 4. Releasing new browser version in every one or two years was a standard practice, as Chrome had only hit it’s first stable version.

The browser offered better standards support, better performance, and improved user interface. No HTML 5, CSS 3 or other fancy stuff was around.

After four years this browser is at it’s sunset. It’s the only widely supported browser that can’t be called modern in any way. The last four years was a huge leap for web development, and IE 8 standart support is desperately behind. “The modern” interface wasn’t viable enough to survive into next version. The speed is not an advantage of this browser also.

So why is this ancient browser is still widely used? Mainly because it’s the latest IE you can get on Windows XP. As long as this operating system will keep it’s share, IE 8 will be around. But it’s not hard to switch to evergreen browser, and if you can help someone to make this switch, please do so.

Some companies already dropped support for IE 8. If this measure seems to early for you, at least consider a graceful degradation strategy for your websites. Don’t hold back the web.

Browser versions for developers

09 March 2013 · Permalink

Most of the web browsers have separate bleeding edge versions, which are pretty easy to install and try the latest awesome feature you’ve just read about. Browser vendors have a different approach to these versions, so let’s make a quick overview of the Big 5.

Chrome

Chrome Canary is the latest version from the Dev channel (usually 2 version numbers ahead), which can be installed side-by-side with the stable (but won’t become the default browser, which is nice). Paul Irish wrote a nice summary about it.

You can check update notes at Chrome’s Blogspot. I would recommend setting it as Canary’s homepage.

Firefox

Mozilla team releases Aurora version of Firefox (usually 2 version numbers ahead), which installs instead of the stable version. If you want to go even further, there is Nightly build which updates every night.

The changelog can be found at Aurora Notes.

Opera

Opera used to have the Next version for developers, but looks like it isn’t available anymore. Anyway, since Opera is moving to WebKit (and Chromium), there will probably be some kind of a preview version.

Safari

For previewing upcoming features in Safari, there is a WebKit Nightly build. The Windows version is being dead for around 5 monthes, but one for OS X should be in a good shape. Go ahead, install and play with it.

Internet Explorer

The development process of this veteran amoung the web browsers remains closed. The current 10th version was developed alongside with Windows 8 and preview versions were shipped with Windows Previews. Most likely there will be Internet Explorer 11, but there is no way to test it right now.


With all those shiny new versions in your hands, don’t forget to provide an adequate support for older browsers. Have a graceful degradation strategy to insure that all the most users will get the core functionality of your website.

Prologue

02 February 2013 · Permalink

There is good advice that everyone should blog. Whatever you do, there is always some fascinating things to share with the world. However, the hardest part is to start: there are so many paths and choices, it’s so easy to get lost. Feeling of perfectionism doesn’t help though: every option doesn’t seem right, and lack of experience makes you feel unconfident.

There were many easier solutions to start with, but I’ve choosed to go a long, hard, stupid way, and I’ve learned a lot already at very beginning. It was looking like I’ll never find the time and the courage to do it. If this were true, you wouldn’t be reading this lines.

Writing is hard. Designing is hard. It will take many iterations to become easier, but the first one is the hardest one: you make a step from nothing to something. I’ve made this step, and if someone doubts, he should make it too. And let the voice be heard.