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.

Starting islooJS

We are starting islooJS, a meetup for Javascript enthusiasts based in Islamabad!


Today I am with the efforts of Sakina and Creanyx starting an Islamabad based meetup for JavaScript developers. The purpose is to bring the creative heads under one roof once a month to share ideas and help the JavaScript Community in general.

To start with I have created an animation for islooJS landing page using SVG and CSS.

See the Pen islooJS (SVG) by Shakeel Shafiq (@thirdknife) on CodePen.

This will be once a month meetup and will be hosted at local cafe’s in Islamabad. More details will be posted on the webist islooJS.

JavaScript for Bioinformatics

How JavaScript is changing the face of Biology and Information


JavaScript has played a major role in web development in recent 5-10 years or so. We have seen too much development in Browser technologies including HTML5 and CSS3. But that’s not just about it, JavaScript has played a major role in server side development too. With the emergence of node.js and its advantages it has taking good chunck of web developers stack.

Writing JavaScript has many advantages, first it also runs the same on client as well as server side and second its an evenet based programming so you can take great advantage of it’s event based nature.

I strive daily to work towards better life on earth and space. For the part of earth I am working in the field of BioSciences, specifically Bioinformatics. Bioinformatics is the science of managing information realated to biology so that biologist can make better descision related to their work in molecular biology or biochemisty. Bioinformatics is a very intersting feild for me because it bring great computational challanges to solve in the domain of complexity and optimization.

I am currently working on a tool which helps search genes data and its position on a paticular gene. I am currently working with !BioJs a JavaScript based library which you can use both at the client side and server side. It has complete set of functions for the development of Biologist Information System which can be DNA allignment, trees or chromosome diagrams. The developer community is great and if you hang out on IRC at #bioinformatics they are really helpful and friendly.

Look up!

Links:

Lingo Game in Javascript

This blog post is about an opensource Lingo game.


One of the vivid memories from my childhood was growing up watching the TV game by the name of Lingo (a.k.a Bingo). I liked the game show because it was a test of not only intellegence but also mindfulness. Even today if I watch that show it takes me back to those days and I can recall all my memories.

I wanted to play that game online but didn’t find one in JavaScript. So I created my own as one of my opensource projects. I invite the JavaScript community to contribute to my opensource game.

The development stack at the moment is very basic. Its just the Express App with few jade templates. I will write a blog post about every new feature I add. Currently it only allows the user to type in 5 words and it will tell you what letters are correct and what are misplaced and what are not inculeded in the original word to guess.

Green : Letter is correct and in place

Red : Letter is not correct

Blue : Letter is in the word but its in a different place

Current demo url

Git Repo