Crusty Naan

You can make it in your oven! yes.

Ingredients

• Milk.
• Yeast.
• Olive Oil.
• Butter.
• Salt.
• Sugar.
• Bread Flour or Regular Flour.
• Seesame seeds for topping.

Recipie

1. Prehead the oven to 400F.
2. Take what ever quantity of milk, this will make sure how much dough you want. I usually take 2 cups of milk and make it luke warm in the microwave.
3. Add 1 teaspoon of Yeast in the warm milk and let it sit for 5 mins.
4. Add 1 teaspoon sugar and pinch of salt.
5. Start mixing flour, add to the amount where it is still like paste. Keep mixing with hand or a plastic stick.
6. Start adding more flour until it start to get a doughy shape. Once you get the desired consistensy which is not too hard not to soft, start mixing it well.
7. Add 1 teaspoon of olive oil and keep mixing it until it turns into rounded shape dough.
8. Let the dough rise for 2 hours.
9. Make small equal dough balls and start making them flat. Use the tip of your fingers to make it flat and shape it how ever you want.
10. Melt butter and use a brush to brush butter off on the top of dough.
11. Sprinkle seesame seeds on top.
12. Put the dough in the oven and bake it for 5 mins or until it starts to turn brown. Switch to broil so that the top part can get crispy.
13. Serve it with curry or a dip of choice.

Not everything is black and white

Grey is useful sometime

Black and white is what makes us understand physical laws, grey is what makes us understand us.

There is something hidden under the water

There is so much under the water

Weather changes all year around. We change as well, and when we do we start seeing things that were hidden before. Those can be very pretty and bring the best out of us.

Use Pylint to enforce single quotes in Python

Enforce single quotes for strings in Python

I write Python these days and I use VS code for that. Before you enforce linting rules you should have the following plugin installed for VS code:

Python extension for Visual Studio Code.

I run my code inside container, you can read more about it at here.

Your container or your environment has to have the pylint and pylint-quotes packages installed. You can install it via pip or you can have it in the requirements.txt file and your docker configuration can help install it.

Add the following to your .devcontainer.json or settings.json:

	"python.linting.pylintArgs": [
		"--load-plugins", 
		"pylint_quotes"
	],

If all the dependecies are installed you should see single quotes warnings in VS code PROBLEMS tab.

AngularJS and Reddit API

How to create a Gallery using AngularJS and Reddit API

AngularJS helps to write javascript code in a structured way. Following will be guide how to use angular to consume reddit read only API and make a nice looking image gallery.

DEMO

Angular provides directives, which is a nice way to isolate code for a specific part of your DOM, let say you have a sidebar on your page then you create a directive and name it sidebar or what ever you want and just write your code for that part of the page.

For my case I am calling it pics. The HTML goes something like this

<div class="grid" ng-app="reddit" ng-controller="pics">
	<div class="grid__item" data-size="1280x857" ng-repeat="x in names | nsfw:this">
		<a href="" class="img-wrap"><img src="" alt="" imageonload>
			<div class="description description--grid">
				<h3></h3>
			</div>
		</a>
	</div>
</div>

and the app controller part goes something like this

app.controller('pics', function($scope, $http) {
	$http.get("https://www.reddit.com/r/pics/new.json?sort=new&limit=100")
	.success(function(response) {
		$scope.names = response.data.children;
	});
});

The HTML has to declare the ng-controller="pics" so that Angular attaches that part of the DOM with the directive. Once the application fires up it calls the reddit API to get the data. $scope is a function scope of your controller or a temporary store of your controller in which you can store data and share across your controller directives or filters. $http is to load a remote calling library for your controller, Angular works on the philosophy of dependency injector. As we are telling angular to load the scope and $http library it will load them for us after during execution.

Once the data is loaded, next part is to generate the images divs using a loop. Angular has a ng-repeat directive which acts as a for loop on javascript object or array. In our case we have variable called names attached to our scope so we iterate over it.

ng-repeat="x in names | nsfw:this" tell to iterate over names and put single value in x variable. The pipe symbols tells angular to pass in the filter for data manipulation. In my example I wanted not to show NSFW(not safe for work) images so had to pass in nsfw and this is used for sending in the scope to the filter.

The filter is defined as

app.filter('nsfw', function() {
	return function(list) {
		if(!list){return};
		var result = [];
		for(i = 0; i < list.length; i++) {
			if(list[i].data.url.indexOf("i.imgur") > -1 && list[i].data.url.indexOf("gif") == -1  && list[i].data.thumbnail != 'nsfw'){
				result.push(list[i]);
			}
		}
		stack = result.length;
		return result;
		}
	});

This returns an array which will be used to render the page. I am putting some check here which includes that the image url must be starting with i.imgur and is not a gif as well as it should not be a nsfw

The biggest challenge was not to render until all the images are preloaded, otherwise it gave a bad ugly image clutter. For that I calculated the length of images which pass the filters and save it in the stack global variable and also a custom directive by the name of imageonload which basically binds the load event with the image it self and is being called when every time a single image is loaded. I was incrementing loaded image count inside a global variable by the name of dataLength and when they match the length of list passed by filter I call the create grid function applyGrid which keeps a nice user experience.

I have not created the gallery effect, I am using this from a demo at Codrops page.