Website Design – sketching and mockups

I have access to Photoshop again, so I can now document the design work I’ve been doing on the website. I spent several hours sketching and thinking about both the design of the site as well as brainstorming how I’d put together the back-end:

Before starting to code, I spent some time in Photoshop working on a site mockup. This image shows the main content layouts for the resume itself (homepage), the blog, and a single blog post respectively.

General page layout will look like this:

Not sure how I’ll deal with sidebars/more detailed layouts on mobile/tablet. Maybe just have that content at the bottom? Or hidden behind a button?

I also had this idea about a splash screen for the home page, but I don’t think I’ll end up including it… implementation will be a pain and it’s a bit extraneous.

Website Update – How I’ve Been Spending My Time

I renamed the repo ‘pynocms‘ – its like python + cms + nuno. Best I could come up with. Anyway I’m not expecting anyone to use it, but maybe someone will get some use out of it or find it interesting.

So far I’ve implemented logging in, logging out and the basics of loading pages based on the URI. Soon to come is editing/creating pages and posts.

I’m going to break down roughly how I’ve been spending my time:

20% Writing Code
Writing code is rarely the hard part. I’m not an expert but I’m pretty comfortable when it comes down to ‘write a function that does this’. There have been a few exceptions, like today when I rewrote the function that parses the URI to direct the user to the appropriate page. It took me 2 tries, and while I’m happy with the result, it annoyed me that such a (seeminly) simple task took so much of my time.

40% Looking Stuff Up and Reading Documentation
This is by far the place I spend most of my time. I’m using Python 3.5.2, for no particular reason other than it’s the latest version at the time of writing. I’ve used Python 2.7 in the past and this time around I’m bewildered about how few supported modules/good documentation/examples there are for version 3+. For example, figuring out which MYSQL package to use (mysql.connector) and appropriate documentation took, like, a ridiculous amount of time. At one point I spent 30 searching to figure out that the cursor.execute() function escapes user input automagically (unlike other python MYSQL modules which have explicit escape_string() functions and similar).

30% Planning, Thinking, Agonizing
This is easily the most difficult part. I’ve had to think and rethink how different parts of this thing work all the time. Some of this time overlaps with the ‘looking stuff up’ portion because I’ll have an idea for how something will work, spend time starting to implement it,  then realise this is terrible and that there must be a better way, and finally spend more time figuring out a more elegant solution. Great example of this is when I realised you could dynamically import modules with importlib. At this point I think (I hope) I’ve solved the ‘how’ of the major features of pynocms.

10% Commenting and Updating the Readme
I’m commenting my code pretty gratuitously. It does help me remember how it works though. I’m pushing 700 lines of python code now so at this point I should probably write up a little dissertation in the readme of how the thing actually works. Currently the readme’s main feature is a joke referencing an ad for Pine O Cleen which no one will get, and a somewhat inaccurate outline of the directory and database structure.

Extra

• I’m not using javascript anywhere (yet). This is sort of intentional. While it would make aspects of pynocms more user-friendly, it should be fundamentally unnecessary to the functionality of the site. For now I’m just POST-ing data the old fashioned way.
• Currently every query is handled by main.py. This is due to how I’ve set up .htaccess to keep urls pretty. The current idea is that a site visitor never sees a ‘.py’ extension or any “?var=value”-type url data, just clean-looking subdirectories like “pagename/category/tag1/tag2”. I’m not sure if this is the best solution, but it sure looks pretty, and I’m kinda stuck with it now.
• Main.py basically figures out exactly what the query is and what it means, and hands off the job of deciding what html to print to another module like a user template or core module (both are in .py files).
• At some point I’m going to have to write a lot more html/css and make stuff look pretty (its just the bare bare bones right now). Considering using bootstrap (It’s a thing I should really learn) but then again I want this to be coded ‘from scratch’ so maybe I’ll just do it by hand…sigh… I’m dreading this part tbh; so boring.

Next blog post I think I’m going to give a general overview of how everything works without getting too specific (you can look at the code if you want that).

Installing Arch linux on an X220 thinkpad

The laptop

A couple of weeks ago I purchased a secondhand lenovo X220 thinkpad on ebay for about ~$200.

Basically I needed a second laptop as a backup for the (increasingly frequent) times my Windows-based Asus machine has shat itself/stopped working for some reason.

My requirements were:

• Really cheap (not a replacement for my main laptop)
• Able to run linux natively without having to do hacky things to the BIOS/firmware (a lot of newer laptops are optimized for Windows and the manufacturers don’t give shit if you want to run a different OS)
• Small and portable (my windows laptop is 15″ and has a bulky charger)
• Ergonomic (Goes with portable; less chance I’ll be lugging around an external keyboard/mouse)

After doing tonnes of research, especially on prices (It’s realllly hard to find anything decent for <$200), I decided on the X220.

I managed to snag this one in a bid on ebay for AUD 182.50 plus 30.00 shipping. Not bad, considering it has an SSD, 3rd gen i5 processor, which are specs that vastly outstrip the other cheap options I was looking at (Chromebooks).

Lubuntu

I wanted to run linux natively and decide to start with something relatively user friendly. I decided on a lighter-weight version of the popular Ubuntu OS; ‘Lubuntu.’

It’s really easy to install, (its basically Ubuntu). I used most of the default options (though there’s not a lot of choice in the l/ubuntu installer by design), and soon I had everything up and running. I did notice that despite its claim of ‘light’ness it still came with a suite of software installed by default like Libreoffice, Pidgin messenger etc.

Anyway, after using it for a couple of weeks I decided to install Arch instead.

Arch

The philosophy of Arch Linux is ‘keep it simple’. As a person relatively new to linux and the shell, I found it difficult to believe this. It took me several hours, carefully following the Beginner’s Guide to install the core Arch system.

I did learn a heck of a lot in the process, however. One of the main things I learned about was the significance of setting up pertiand spent the next day or so setting up my environment. I’m using Xmonad (official site) as my window manager, along with xmobar (for time/battery info), urxvt (terminal app), dmenu (very handy application launcher), XDM (for login/display management), alsa-utils (audio), firefox, thunderbird and some other stuff.

The thing I’m loving about Arch is how everything is on me. I have to understand how stuff works before I use it, and as a consequence I’m learning a lot about how linux (and OS’s in general) work. The package manager, pacman, always tells you exactly what its doing and its easy to remove unwanted packages (and their unused dependencies!)

Some stuff is a bit harder to configure though; eg udev rules for audio. Currently if I want to use a USB headset I have to plug it in then reboot the computer before udev will detect and use it correctly (this only takes about 30 seconds, but still). In order to make udev rules detect it on the fly I’ll need to add a custom, very non-trivial script.

Another thing I’ve had some dramas with was connecting to uni wifi. netctl, the default networking utility, doesn’t autodetect or deal with WPA2 Enterprise networks automatically. To solve this I had to add a custom eduroam profile, disable the netctl-auto service (which automatically connects to recognised wifi networks), and start the profile manually. There’s probably a way to get it to work with netctl-auto but I haven’t found it yet. It seems as though netctl stops working altogether if you try to start a profile while netctl-auto is active. hnnng.My Windows 8.1 computer (which I usually use for everything) is currently dead due to an unexpected crash, so I’m being forced to use Arch exclusively for now, which I don’t entirely mind.

nunodasneves.com

So it’s midsemester break and I’ve decided to build a website to house my resume. It will also contain a more ‘official looking’ blog where I can put summaries of projects/cool stuff that I do. Hopefully it will be fun to make and also increase my employability.

I’ll do a more in depth about-me blog sometime soon but for now I just want to talk about  this a little.

I’m using git for the first(ish) time.

Repo is here: https://github.com/NunoDasNeves/nunodasnevescom

The idea is to build a CMS in python to manage the site, just using basic CGI concepts (I don’t anticipate a great deal of traffic). I’ll be coding and designing everything pretty much from scratch.

I’ve pretty much finished the visual design/UX design of the site, but my windows machine is playing up so I can’t use photoshop right now 😦 Later this week I’ll put up some pretty pictures of the design.

Anyway its almost 4am now. Better get sleepin’

What is this blog even?

Hi! I’m going to be blogging about software, uni, art, random crap, computers, travel. Idk. For now mostly software though. This is a personal, ranty blog (mainly for myself) and I’ll treat it as such.
My name is Nuno. Don’t tell anyone you saw this. It’s our little secret, ok?