Coming Soon: New .Blog Domains for Websites

It is happening!

The WordPress.com Blog

For more than a decade, the word “blog” has been synonymous with “your home on the web.” And since 2005, WordPress.com has been proud to help you create a unique space that is all yours.

Now we’re excited to announce a brand new way to create a unique identity for your website: .blog, a top-level domain extension that will let you create a customized name and web address for your site.

A name that’s all yours

Just like .com before it, .blog is clear and accessible, and it creates millions of fresh, new options for naming your blog. It’s the perfect place to build your home on the web.

The .blog domains are coming this year — sign up here to get notified when they become available. We’ll be offering them to all websites — you won’t need to have a WordPress or WordPress.com site to purchase one.

Why .blog?

For years, .com was the…

View original post 201 more words

Paywall bypass bookmarklet – Come From Google

Install CFG by dragging the link to bookmarks

When surfing around the web, sometimes you will hit a paywall to see the content. This is terrible UX in my opinion. I understand that companies need to make money one way or another and it might be a better choice than to put on some ads on the page. Nevertheless, I still think it is a bad experience and have written a bookmarklet to quickly workaround this problem.

Enter CFG (Come From Google)

This bookmarklet, CFG, will allow you to see any paywalled content by redirecting the page from Google. Just drag the link to your bookmarks, and click it when you see a paywall. It will reload the page and you will be able to see it.

How does it work?

It is a known feature/bug, that if you access a paywalled site from a search engine, you will be able to see the whole content. However, if you land the page from somewhere else, you hit a paywall. Therefore, the manual workaround for this was to search the url in Google and click the result.

This bookmarklet does the same, it does a search to Google and enables the old friend I’m feeling lucky meanwhile. This results in a full redirect to the URL. Viola, paywall is gone!

Install link (drag and drop to bookmarks bar): Come From Google

A test URL

Here’s a URL in which you can test the bookmarklet. https://go.umur.io/wsj/
When you land this page from this URL, you see a paywall. Click on CFG and you can see the full content.

Enjoy.

Advanced Angular: $parse

If you want to step up in your AngularJS knowledge, $parse is one of the most important services that you should know about. It is used in most of the directives, and opens up your imagination to a new set of possibilities.

So, what does it do? Let’s start with a place we all well know: ngClick.

ngClick directive, takes an expression, and executes the expression when the directive element is clicked. So, how does it work internally? Yep, you guessed it: with $parse.

$parse takes an expression, and returns you a function. When you call the returned function with context (more on that later) as first argument, it will execute the expression with the given context.

It will execute the expression with the given context.

Context is a pure javascript object, as far as $parse is concerned. Everything in the expression will be run on this object.

Let’s see it with an example:

function MyService($parse) {
  var context = {
    author: { name: 'Umur'},
    title: '$parse Service',
    doSomething: function (something) {
      alert(something);
    }
  };
  var parsedAuthorNameFn = $parse('author.name');
  var parsedTitleFn = $parse('title');
  var parsedDoSomethingFn = $parse('doSomething(author.name)');

  var authorName = parsedAuthorNameFn(context);
  // = 'Umur'
  var parsedTitle = parsedTitleFn(context);
  // = '$parse Service'
  var parsedDoSomething = parsedDoSomethingFn(context);
  // shows you an alert 'Umur'
}

So this is very cool, we can evaluate strings with a context safely. Let’s write a very basic myClick directive.

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e){
          // The event originated outside of angular,
          // We need to call $apply
          scope.$apply(function () {
            onClick(scope);
          });
        });
      }
    }
});

See, the pure javascript object turns out to the our scope!

This works, but if you look at the docs of ngClick, it lets us to inject $event object to the function. How does that happen? It is because the parsed function accepts an optional second argument for additional context.

We have access to event object in the click callback, and we can just pass this through.

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e){
          // The event originated outside of angular,
          // We need to call $apply
          scope.$apply(function () {
            onClick(scope, {$event: e});
          });
      });
    }
  }
});

And the usage:

<a href=""
   ng-click="doSomething($event.target)">link</a>

Bonus

If you don’t need to pass additional context, you can save some bytes and remove code of the code. Here is a way to do it cooler. How does it work exercise it left to the reader. Please leave a comment if you think you’ve found the answer!

angular.module('my-module', [])
  .directive('myClick', function ($parse) {
    return {
      link: function (scope, elm, attrs) {
        var onClick = $parse(attrs.myClick);
        elm.on('click', function (e) {
          scope.$apply(onClick);
        });
      }
    }
});

See PEP8 errors introduced in a branch

There are times when you need to see PEP8 errors only introduced in a branch, so that you can fix those and say the excuse “I didn’t introduce, those, they’re not my problem.”

This generous script lets you do that. It compares the current branch with a target branch, and shows the new ones in the current branch, and hides the ones in the target.

This requires that you use git, and pep8 should be installed.

Continue reading “See PEP8 errors introduced in a branch”

AngularJS Directives, Using Isolated Scope with Attributes

Directives in AngularJS are very powerful, but it takes some time to understand what processes lie behind them. While creating directives, AngularJS allows you to create an isolated scope with some custom bindings to the parent scope. These bindings are specified by the attribute defined in HTML and the definition of the scope property in the directive definition object.

There are 3 types of binding options which are defined as prefixes in the scope property. The prefix is followed by the attribute name of HTML element. These types are as follows

  1. Text Binding (Prefix: @)
  2. One-way Binding (Prefix: &)
  3. Two-way Binding (Prefix: =)

Let’s see how these are defined in directives, and I’ll go into details one by one.

JS:


angular.module("myApp",[])
  .directive("myDirective", function () {
    return {
      restrict: "A",
      scope: {
        text: "@myText",
        twoWayBind: "=myTwoWayBind",
        oneWayBind: "&myOneWayBind"
      }
    };
}).controller("myController", function ($scope) {
  $scope.foo = {name: "Umur"};
  $scope.bar = "qwe";
});

HTML:

<div ng-controller="myController">
<div my-directive
     my-text="hello {{ bar }}"
     my-two-way-bind="foo"
     my-one-way-bind="bar"></div>
</div>

1. Text Binding

Text bindings are prefixed with @, and they are always strings. Whatever you write as attribute value, it will be parsed and returned as strings. Which means anything inside curly braces {{ }}, will reflect the value.

So, if we were to define $scope.username = "Umur", and define the attribute like <my-directive my-attribute="hello {{ userName }}" />, the value in the directive scope is going to be hello Umur. This value would be updated in each digest cycle.

2. One-way Binding

One-way bindings are prefixed with & and they can be of any type. They are going be defined as getter functions in the directive scope. See it with example:

Controller:

/* more code */
$scope.someObject = { name:'Umur', id:1 };
/* more code */

HTML:

<my-directive my-attribute="someObject" />

Directive:

{
  scope: {myValue: "&myAttribute"},
  link: function (scope, iElm, iAttrs) {
    var x = scope.myValue();
    // x == {name:"Umur", id:1}
  }
}

Since they are getter functions, they are read-only, any changes to the value will not propagated to higher scopes.

3. Two-way Bindings

Two-way bindings are prefixed by = and can be of any type. These work like actual bindings, any changes to a bound value will be reflected in everywhere.

Let’s see it by example:

Controller:

/* more code */
$scope.someObject = { name:'Umur', id:1 };
/* more code */

HTML:

<my-directive my-attribute="someObject" />

Directive:

{
  scope: {myValue: "=myAtrribute"},
  link: function (scope, iElm, iAttrs) {
    var x = scope.myValue.name;
    // x == "Umur";
    scope.myValue.name = "Kieslowski";
    // if we go to parent scope (controller's scope, in this example)
    // $scope.someObject.name == "Kieslowski";
    // would be true
  }
}

Summary with Code

JS:

angular.module("myApp", [])
  .directive("myDirective", function () {
    return {
      restrict: "A",
      scope: {
        text: "@myText",
        twoWayBind: "=myTwoWayBind",
        oneWayBind: "&myOneWayBind"
      }
    };
}).controller("myController", function ($scope) {
  $scope.foo = {name: "Umur"};
  $scope.bar = "qwe";
});

HTML:

<div ng-controller="myController">
<div my-directive
       my-text="hello {{ bar }}"
       my-two-way-bind="foo"
       my-one-way-bind="bar"></div>
</div>

Results:

/* Directive scope */

in: $scope.text
out: "hello qwe"
// this would automatically update the changes of value in digest
// this is always string as dom attributes values are always strings

in: $scope.twoWayBind
out: {name:"Umur"}
// this would automatically update the changes of value in digest
// changes in this will be reflected in parent scope

// in directive's scope
in: $scope.twoWayBind.name = &quot;John&quot;

//in parent scope
in: $scope.foo.name
out: "John"

in: $scope.oneWayBind() // notice the function call, this binding is read only
out: "qwe"
// any changes here will not reflect in parent, as this only a getter .

If you like this post and would like to know when I posted something new in here, follow me on Twitter @umurkontaci.