There shall be binaries

Standard

screenshot5

There comes a point when your program needs to be distributed to other users. You don’t want to always have to give every intended user of your program a list of modules or libraries to be installed before they can use your software.

I’ve found myself developing software with python a lot lately and usually, I like people to check them out. Most times, my target users are Windows OS users. I built my programs but packing them into binaries became the pain in the neck for me.

Thanks to sherafff on the IRC. He got my first required binary done for me from his windows development machine. I’m no windows user and yet I have to be on the operating system for the target binary while I bundle it. This is no big deal! I have a windows VM.

After sherafff made the first binary for me, I found there were still a lot of program bugs that I had to fix. After fixing this in the source, I needed my binary to be updated again but then I wasn’t seeing sherafff active. He was on like most IRC users but was always away.

Taking my decision on what binary builder to use

I’d always thought of py2exe but it seemed like too much headache for me as a starter. Sherafff had used PyInstaller and said it was cool so I tried reading the docs carefully and I was able to make use of it. My preferred way of running pyinstaller on windows is

  • –icon because I like specifying my icon because I don’t like the default icon for generated executables
  • –noconsole because I don’t need a debugger console being displayed to a human end user
  • –onefile to get my single file rather than folders with a lot of DLLs (Dynamic Link Libraries)
  • –upx-dir just to specify where I’ve downloaded UPX to.

Upx helps with compression while the executable is being packed. Pyinstaller integrates finely with upx and that is cool to me. I know py2exe has limitations even as I’ve not explored it well enough (I should soon). There are other builders that can be used to build my binaries which I also hope to explore soon and they are:

  • py2app
  • cx_Freeze
  • bbFreeze
  • vendorID

While I was being lazy to read the docs and get started with pyinstaller, I also got a heads up on a graphical builder which I think is cool. I haven’t used it yet but I hope to put it to use in my next project. It is gui2exe which was built with wxpython.

I’ve only scratched the surface of C programming but I believe in such a compiled language as C, we don’t have to create executable for Linux as that is what is done after compiling. 0xFEEDBAC had always felt python will ruin me but I love it anyway :D. He said run while you can :) . Yea after a few more python experiments, I think I will be building most of my desktop applications in C and just make stick to web applications and simple programs with Python.

Thoughts on cybersquatting

Standard

Cybersquatting

 

IFWT_cybersquatter

I have never been a cyber-squatter and I don’t plan on becoming one as I have better dreams and goals to achieve. I’m way to busy for that. Although, I know it does fetch a lot of money if lucky but still I don’t see it as a right thing to do.

What is cyber squatting?

Squatting in itself means occupying an abandoned area. It is also known as domain squatting. Wikipedia describes it this way:

Cybersquatting (also known as domain squatting), according to the United States federal law known as the Anticybersquatting Consumer Protection Act, is registering, trafficking in, or using a domain name with bad faith intent to profit from the goodwill of a trademark belonging to someone else. The cybersquatter then offers to sell the domain to the person or company who owns a trademark contained within the name at an inflated price.

Here’s what a domain owned by a cyber squatter looks like:

screenshot

Oh darn! The whitehouse? Oh yea they got the white house.

I think the guys that do these things are really smart. They see potentials of a domain being put to use in the future and they grab it so fast. Let’s say my name is John Doe and I suddenly become a big rap star. Some squatting fellas will make a fast move to buy domains like johndoe.com, johndoe.us, johndoe.info, johndoe.biz, johndoe.net, johndoe.org and as much as they can.

As some point I feel I need a domain like other my other celebrity friends and I see that all my name domains have been purchased and are available for purchase at an extremely steep price.

What’s my problem with this?

Like I said I’m not a squatter but at the same time I don’t think this should be taken illegal in any way. These guys didn’t steal what didn’t belong to them. They simply purchased something before the intended owners and for no reason should it be a crime. I’m aware the United States, Australia, and Canada take civil actions against people that involve in this.

I don’t like to break the rules but at the same time I love to share my opinions. There is nothing illegal about domain squatting. It’s only a smarter move by the squatters. If you find potential in yourself then get your domain soon enough. We are all running horse necks on the internet. It’s a battle, a market, a competition. Whoever gets it first owns it and has the right to it. They are known cases of cyber squatting which I’ll list below:

  • Jethro Tull
  • Madonna
  • Primedia Magazine Finance Inc. (Tiger Beat) vs Next Level Productions (Benny Doro)
  • People for the Ethical Treatment of Animals v. Doughney
  • Lamparello v. Falwell
  • Lufthansa v. Future Media Architects
  • The White House against Whitehouse.com and Whitehouse.org

I’ll love to get opinions of others on this. You can drop yours in the comments

Adding Resource files to your Qt designer project and using pyrcc with python

Standard

original_197540_cFBHyyvbg3IyK6SnFMmj5IyPO

I’ve planned writing on this for long but I’ve just been so busy. When I started building GUI programs with Qt designer, this was a big challenge for me for a while but somehow I figured it out on my own.

When creating a GUI project in Qt designer, you need images on some parts of your interface. Qt designer allows you add images that have been included in your resource files. My first pain was “How the heck do I add images to this resource file and where the heck is it?”.

Well I said I figured it out on my own but yet I got the little internet aid. I found out from a search that I needed to have a app.qrc file for my resource files. This was all the information I got.

After failing to create a resource file several times, I decided to try out the “Add new resource file button”

apprc

From this point you can open an existing qrc file or create a new one.

apprc1

Now we can add images as needed to the file

apprc2

Now that’s it. When saved, this creates our app.qrc in the following format:

So far I’ve named my resource file app.qrc. After compiling your ui file with pyuic, it will require a app_rc.py to be imported. In a case where you chose example.qrc for your resource files, a example_rc.py file is expected from the generated UI python modules. To create this resource modules containing binaries of our image data, we have to use pyrcc to compile to python like so:

Now we have successfully made use of our resource files with our GUI program. If you have any additions please don’t hesitate to drop it in the comments.

Getting started with GUI development in Python

Standard

z_design

Most people that are fond of Windows operating system will always root for graphical desktop applications (GUI) over command line (CLI) programs. Since after DOS, windows operating systems have been known to use simple and user friendly GUI. This is one of the reasons why they have made a lot of customers around the world.

Apple computers have also had wonderful GUI but their product prices still limits their products to those with more funds. There’s always an argument on Microsoft stealing the GUI concept from Apple but as much as I’m not a big Microsoft fan, I never agreed to that. Xerox started it, Apple found it, then Microsoft found it. You may say Microsoft stole from Apple what they had stolen from Xerox. I wouldn’t want to have the argument here. If you aren’t familiar with these stories, you should read the history.

Most programmers I’ve seen from various languages usually start with CLI programs besides web developers. We are in a world where everyone wants a graphical interface for everything and then we choose to make programs that are CLI based. Since Microsoft is fully GUI oriented, its programming languages allow you easily build GUI programs. I once developed with Visual Basic 8 and Visual Basic.NET in Visual Studio 2008, 2011. It was very easy and interesting building what I needed on those platforms but I just totally got tired of being a Windows developer and I abandoned them ever since.

I chose the Python path now as I’m still interested in building GUI programs and I will work you through GUI development as I’ve had my adventure in it so far.

In Python, there are 4 modules you can use to build GUI programs and they are

  • Tkinter (Ships with Python)
  • wxPython
  • PyGTK
  • pyQT

I started out with Tkinter since it shipped with my python installation while I was on a Windows operating system. This tutorial helped me http://sebsauvage.net/python/gui/. As soon as I got to do my first Tkinter program, I went ahead to do the wxpython program. At this point, I know what it felt like to build a GUI but I didn’t fully understand how to handle signals and slots. I only used samples from sites and my GUI programs didn’t have enough objects and enough actions in them.

After some reading, I decided to go with pyQt. I never tried pyGTK till date so I have less to say about it. I wrote my first pyQt4 program this way:

The comments explain what each part of the code does. This is just a blank window frame with no objects in it. After this, I found this code for creating shapes within a canvas in a frame

The button object here was sending signals to change the shapes in the canvas. This was my first experience working with signals and slots. It’s like a simple jQuery where we have two objects in the DOM being selected.

That’s my interpretation in jQuery of handling signals and slots as I have demonstrated them with their related class names.

Writing GUI code can take a lot of time and can be really stressful. This is one of the reasons why I enjoy Qt because it has QtDesigner. It reminds me of my days with Visual Basic as it has a simple environment for you to just pick GUI components and drop on your frame. It’s a good toolkit to build GUI programs in few minutes. Here’s my Qt designer

snapshot8

I designed the UI for my KDE desktop to be dark because I love dark UI so it it may not be such a dark UI in your case. The panes on the left are objects/widgets you can drop on your frame. On the right, we have property editor, signal/slot editor where you can set signals for some slots while designing the UI from the designer. For some signals, I prefer to manually attach them to their slots by writing my python code.

Qtdesigner produces user interface files in .ui extension. This ui files are in XML format. Here’s a short sample of its output

We can work with these XML files directly to build our GUI but I wouldn’t recommend that. It’s best to turn this into a python code we can work with. Qtdesigner is built for C++ so C++ programmers can simply click Form > View Code to see the cpp code generated. For Python developers we use a UI compiler program (pyuic). I use pyuic4 so compiling a UI program is this way for me:

pyuic4 guiprogram.ui -o guiprogram.py

You can’t just run this generated program to load up your GUI program. To use the generated code, see the docs

Now you’re up and running. To wrap this all up, let’s create a simple GUI with an input box (QTextEdit), a button (QPushButton), and a label (QLabel). This program will take contents of the input and display in the label field after the button is clicked.

I started by creating a new Main Window from the QtDesigner templates

snapshot9

Next things will be to set the width, height, and geometry (location of the window by XY axis on screen). Also, we have to take note of the objectName because it is the way we call our objects in the program. This is done in the property edior

snapshot10

click to zoom in

You can see my objectName is MainWindow and I have chosen to use a window of size 400 x 280. I want it at the extreme top right so my geometry is (0,0) which stands for x-axis = 0, y-axis = 0.

I could create my signal and slots right away from the designer like so:

snapshot11

 

As you can see the signal/slot editor has the names of each object. and the view for the signals/slot editor shows there’s a relationship between the display button and the label below. I will just delete this slot to handle this part with my code because I have less options from the designer. I saved my design as example.ui and I’m compiling to python code with:

pyuic4 example.ui -o ui_example.py

Now I have this generated python code:

The name of the window object in the designer is “MainWindow” so the class name in the generated code is Ui_MainWindow based on that. Following the docs on using generated code, I imported this in my major program

Now the signals. We have three objects on this frame. Let’s rehash them but this time with the names we’ve given them in the program.

  • QTextEdit = textEdit
  • QPushButton = pushButton
  • QLabel = label

You can see I’ve used default names to make things easier but you can make it different in your case. QPushButton sends a signal, QLabel receives it and picks the content of QTextEdit to display in itself as a slot. I’ll amend my code to perform my function

and voila! It works. See it in action after running “python example.py”

snapshot12

Conclusion:

Building GUI programs may be a challenge but as the world evolves, it is very necessary. You should also not directly use generated code from pyuic because you may want to make changes to the UI at any point. Each compilation with pyuic will make you lose your changes you’ve made on the generated code. I’ve chosen Qt as my best module for building GUI. You may choose something else that works for you but from what I hear, Tkinter has a lot of downsides so it’s not recommended.

Internet Freedom September 10th 2014

Standard

tumblr_inline_nbcf2gqnSg1r1kl7d

If you woke up tomorrow, and your internet looked like this, what would you do?

Imagine all your favorite websites taking forever to load, while you get annoying notifications from your ISP suggesting you switch to one of their approved “Fast Lane” sites.

Think about what we would lose: all the weird, alternative, interesting, and enlightening stuff that makes the Internet so much cooler than mainstream Cable TV. What if the only news sites you could reliably connect to were the ones that had deals with companies like Comcast and Verizon?

On September 10th, just a few days before the FCC’s comment deadline, public interest organizations are issuing an open, international call for websites and internet users to unite for an “Internet Slowdown” to show the world what the web would be like if Team Cable gets their way and trashes net neutrality. Net neutrality is hard to explain, so our hope is that this action will help SHOW the world what’s really at stake if we lose the open Internet.

If you’ve got a website, blog or tumblr, get the code to join the #InternetSlowdown here: https://battleforthenet.com/sept10th

Everyone else, here’s a quick list of things you can do to help spread the word about the slowdown:http://tumblr.fightforthefuture.org/post/96020972118/be-a-part-of-the-great-internet-slowdown
Get creative! It’s September 10th. It’s happening this midnight

Prioritizing Critical (Above the fold) CSS to optimize page load speed

Standard

F58bHgM

I made a slide on this about a month back and I’ve been intending to write about it here but I’ve just been so busy.

Every developer that cares about user experience will always want to fix everything that makes a user come on their application and then take a second thought of never coming back. I’ve found myself in such situations where I begin to think that whoever did this thing must have invested a lot of time making a totally crappy stuff. We don’t want our applications to be thought of that way.

I design websites and also desktop applications with python and Qt for the latter, and Sass with Javascript for the former. Usually on my desktop applications, all I have to care about when considering UX is the where the objects are placed around the Window frames. I may not be totally right about that probably because I’ve not taken time to go through the GUI Bloopers book. I intend to read it soon and then I will share my new experiences from it.

Unlike desktop applications for me, I have to include how fast my web pages and their components load to the considerations for a good user experience. I’m a DO-IT-RIGHT freak so I try to keep up with the latest ways things are being done. I’m in the habit of validating my HTML and my CSS when I do website designs. As much as I spend time making sure I have a syntactically ok code even as I’m privy that validation tools wouldn’t check for semantic flaws. I also like to see how my resources are being loaded to my visitors and how much time it takes. For this, I make use of Google pagespeed insights and Web page test. I don’t pursue 100% on all my projects but I try to get close on the ones I can by familiarizing with the requirements for good result. Recently, I started getting this line

snapshot7

when I see things like this initially, I just ignore them and tell myself “you don’t need to care about this, it’s for people who love to stress their brain”. After some time, I remember I fall in that category and I start trying to implement what I almost ignored. Well, my trial paid off and I was able to implement on this little bootstrap project http://ostrich-dev.com/lab/feedapp . As of the date of this writing, that website has 100% user experience and 44% page speed because I didn’t minify my javascript and CSS and I’m not leveraging browser caching. Besides this, check the details of the passed rules I have and you will see I have defeated the above-the-fold issue. Now let’s talk about what is really going on here

The image below represents what happens when users request for their favorite websites on their browsers. The following client-server model occurs:

 

client-server-model

For each request, HTML, CSS, Javascript, Images, and every other asset on your site is being requested from your web server with the client’s browser except if the client isn’t visiting for the first time and you implement a client-side caching mechanism. Images can be optimized (I’ll talk about this in another article soon), javascript can be minified, CSS can be minified and then made to load better than we may expect.

What we did here is to reduce the resources being requested on the initial HTTP request and we requested for the things we really need our users to see first while we waited for the other things to load before they scroll down. Don’t be fooled by the jQuery plugin I used in my example site to think that’s what makes my images make a bouncy load as you scroll below. That’s just an animation effect.

I wouldn’t like to repeat everything I’ve already said in my slide so I’ll just give it to you here

Conclusion:

This is just one step to optimizing page load speed. There are other steps that may be required. As you have seen from my example that this didn’t just give me a 100% speed because it wasn’t everything that had to be done. Don’t ignore this. I see it as a chance you should leverage for better web experience for your users. In the slide, I wrote briefly about the Compass extension: jacket. I will talk fully about this and how it was used to achieve separating my critical CSS from the non-critical CSS in a future article. I make a lot of typos because I blog when I’m tired. Feel free to correct me when you spot one

Regex: A required skillset for developers and power users

Standard

national_regular_expression_day_xkcd_shirt

I care about information and I believe everything we do wraps around trying to find information, protecting it, and making use of it. There is Google, DuckDuckGo, and other search engines, there is grep for Unix-like system users, there are search panes on applications and websites. Sometimes these media of information gathering may not be good/aggressive enough to find the exact outputs you expect. This is why we learn how to do our searching and pattern matching “like a boss”.

 

Regex (Regular expression) is a way to specify your search with deeper intensity. It is somewhat like wildcards. But, this is beyond very generic wildcards we use in simple instances. You may refer to this as wildcards on steroids.

This post is intended to be really long, containing most of what you need on regex. Since my work takes a lot of my time and I have less time to blog, I will start with the basics and update the article each time I get the opportunity to write.

I don’t think I have to explain why regex is necessary but I have this XKCD image to help with a little illustration

regular_expressions

That PERL hero saved the day with his super powers (knowledge of regex).

Paint an instance where you have to find every occurrence of gray and grey in a large pile of text. Running (gray|grey) through a regular expressions parser will find all the expected results which are “gray” and “grey”. The pattern used to find them simple meant I want to find every occurrence of gray or grey.

Being aware of how the | (pipe) can be used as an OR operator, I can write a better pattern this way gr(a|e)y and it will find the same results as the earlier used pattern.

There are tokens to be passed into regulation expressions parser to get outputs and some of them are listed in the table below:

Tokens Category Meaning Example Matches
\w Meta sequence word characters Emma, Wattson
\d Meta sequence digits 12345
\D Meta Sequence non-digits Andrew&@#c
\W Meta Sequence non-word 47585^#@
\s Meta Sequence white space
\S Meta Sequence non white space ABC123
a{3} Quantifier Exactly three of a aaa
a+ Quantifier One or more of a aaaaaa OR a
a* Quantifier (Greedy) Zero or more of a aaaa
a? Quantifier Zero or one of a cat OR cup

My examples are probably not the best you will get to see and I can’t mention all the token types here as I will be turning this blog post into a regex dictionary. If you need to find more of them, I think the bottom right pane at regex101 is enough to feed you with all you want.

Using the tokens to find matches

regular-expression-introduction

Summary:

Regular expressions are very necessary and I think every institution should consider it a as compulsory course for every computer science student and departments that do a lot of computing.
If you will like to see a graphical illustration of what happens while you use regular expressions, try out regexper. It produces neat graphical illustration of what roles the patterns play like in the image below

regexper

Regexr also does something similar to what regex101 provides. It’s your call to pick what’s best for you.

References:

Motion Graphics Obsession

Standard

_origin_Ka-izskatas-filmas-bez-5I’ve gotten to do a lot of things besides writing codes. I once took a job as a graphic designer and then I made vector graphics for ads. Here’s one of what I did in my free.

wonu-vectorI love good designs, graphics, and creativity. I’ve been an artist from my childhood and I haven’t dropped it till date. I only happen to be more of a code artist these days.

Motion graphics is way beyond my vector illustration up there. I once dived into it but I was too busy with other things to cling on to it. I did a few works (3 maybe) with After Effects.

Since I’m no god and I can’t do all things even as I like them, I feel it will be nice to talk about something I like.

I’m crushing on VFX (Visual Effects), CGI (Computer Generated Imagery), FUI (Fictional User Interfaces), and I always look up to the works of Corey Bramall who did the effects in popular movies like:

  • G.I Joe: Retaliation
  • Captain America: The Winter Soldier
  • Transformers: Age of extinction
  • Iron Man 3

He talked about how he used Yanobox Nodes with After Effects  in the making of Transformers here

Going through his works just makes me think of how much I want someone into this to be around me. A friend or a relative. Sadly, no one is getting creative enough to go into that.

I may never be a VFX designer but I’ll always admire does who do it well, and appreciate their works.

If you’re into motion graphics, then I admire you and I hope you keep doing what you’re doing.  :)

 

 

Good son, bad father: I’m leaving PHP but I love Laravel

Standard

parents-need-to-parents-not-friends

PHP has a really shallow learning curve. It’s easy for a 8 year old to pick it up and start messing around with it. This is good and I love it about Python as well. However, PHP has been known to have a lot of flaws, one of the major reasons being because it was not built as a functional programming language but rather, just a Hypertext pre-processor. It was meant to just automate the behaviour of HTML. Around 2005, OOP was introduced to PHP and it made PHP developers feel among the big boys of the web.

However, there are still some things wrong about how it behaves in its OOP. For example when using namespaces, the following still seems wrong to me

I needed the preceding backward slash to bring me back to the global namespace. But when using the use statement,

Everything is wrong about this. I have friends that hate me for being a PHP developer but I chose to stick with it anyway.

While I was contemplating to leave PHP earlier before now, I had seen Anthony Ferrara‘s blog post “PHP sucks! but I like it” which convinced me to still stick with it. It was a response to the popular post by Eevee on “PHP:A Fractal of Bad design”. Anthony said it’s easy to get help with PHP. At the time, I was gullible to go with it.

When I think of it now, It’s easy to get help on whatever you need if you have internet. On the Freenode IRC, I went ahead to count the present number of users at this time 12/08/2014 which is the date of this article, and then I checked the users on the following channels:

##php  639 users (including bots),

#ruby 885 users (including bots)

#node.js 1299 users (including bots)

#python 1469 users  (including bots)

Doesn’t seem like PHP has much help anymore. The need for PHP developers by organizations has plummeted.

Although, the PHP community still have awesome frameworks like Laravel and Symfony where you can use composer and other cool stuff. But that’s for you the coder to think about. An average tech savvy looking to hire a developer for his new idea of a web app will ask other entrepreneurs about what’s best for development and they’ll mention Ruby-on-Rails, Python, Node. After which he starts searching for developers into those. It may take a while to convince them that there is actually a good part to the PHP that sounds evil (or never gets heard of).

Someone may come on the comments to rant that sites like Facebook use PHP. There are still big websites and CMS still making use of PHP but Facebook has been using its in-house developed language called Hack since February 2014. It’s commonly described as “All that PHP should have been”.

Facebook had to leave because they had their own better JIT runtime compiler HHVM which helps them a lot better and faster. Rasmos Lerdorf was faced with a question on how PHP could be sped up and his response was “Well, it can’t be”. He admitted! Now why should Facebook keep tweaking what isn’t getting better. They just had to get their own stuff.

This is not about criticizing PHP. Besides, I’m just a 21st century programmer. I don’t have a 10 years or 20 years programming experience but I like to do what I do right. I am really poor at ASM even as I’ve been reading some books on x86. If you are looking for critiques against PHP, the following sites can be of help

In my comment to this post on “why learn PHP”, I was soliciting for Laravel as a PHP framework.

Conclusion:

I don’t at all hate PHP as I’ve said earlier, it’s not like something you should not do. It’s just something you may not get satisfied with if you like to get the best results. Simply because I’m seeking to do more projects I’ll be happy with myself about, I’ll be dropping PHP after my current project. Well, I can’t leave it totally. I will still be contributing to the open source Laravel packages I’ve forked and I will have to touch it sporadically.

References:

The chips have ears

Standard

Chips
The common saying is “The walls have ears”. This is a figurative expression that expresses that things we say can be heard by people around even while we think there’s no one around (or information just leaks in one way or another). Technology in this generation has caused a lot of transformations and changed the way we see things.

The more technologies, the more paranoia. How long can we stay secure. How sure are you that your 48 bit password secured machine doesn’t send logs to the NSA? This is even out of the context.

The technologies around now have converted what used to be figurative expressions into literal expressions. If I say “The walls have ears” today, then they have ears (could be through a listening device like cameras, recorders). That’s even safe because you can take good enough precautions to check your surroundings for such devices before having confidential conversations.

With MIT research, audio can be retrieved from visuals. A listening device doesn’t have to be present for your conversation to be logged. The chips you left on your table can keep logs of your conversation.

How? From the research, an algorithm was developed to analyze minute vibrations from the visual. This could be a mute video of an event, a distant CCTV, or more.

From the MIT News:

“When sound hits an object, it causes the object to vibrate,” says Abe Davis, a graduate student in electrical engineering and computer science at MIT and first author on the new paper. “The motion of this vibration creates a very subtle visual signal that’s usually invisible to the naked eye. People didn’t realize that this information was there.”

This is a video demonstration of this: