Needs rework

When I today began working I have thought that the navigation worked everywhere. But this morning when tried it just in case. I found one. On front-page.php it didn’t work as it should. Everywhere else it was fine. The function which I used is modified Twenty Fourteen function:

I fixed this problem with by using variables $next and $previous instead and for the front page where I use WP_Query I dropped last wp_reset_postdata() and it works.

I plan on deploying this theme later today or tomorrow.

Still down

When I began this 60 day project I thought that I could do every day one project. I was wrong. It is not a problem objectively but I didn’t count myself into an equation. I never was mentally stable. There were days from time to time when the best I could do was to start an autopilot and wait for the end of the day. And now since I have time and space to destress myself it’s worse than at when I suppressed my stress’.

But I am not giving up. I am just slowing down for the time being to a pace I can handle. Today I did some coding in WordPress. Most of it was PHP where I was figuring how to work with WP_Query to get first, last and random post link for my comic strip post type. I figured how to show older strips even though I’ll have to move them to a different post type and then probably put respective redirects in .htaccess to keep SEO or I am pass on it.

One thing with CSS I really wanted to try was horizontal flip so I don’t have to make sprite bigger than it needs to or load more images. I found a quite handy snippet on css-tricks couple of days ago. I did my best today even though it was not everything I wanted to accomplish.

The day everything went wrong

Today was one of those days when everything which should work does not. My today’s task was to fix Lone Wolf comic’s website. The problem was that when I did it for the first time I did really awful job. The one reason was lack of time or rather I wanted a platform ASAP no matter what. So right now I am thinking about taking LWC for some time down and redoing current content.

The biggest problem I encounter was the same as five months ago: How to add text and image(s) separately into one post? The first time I decided to put image into a WYSIWYG editor and commentary for it into a metabox. As a result I got sloppy code.

My second approach was similar as I wanted to do the first time. I wanted to use WordPress’ Media Library but I couldn’t find a way how to do it. I found before and now couple of tutorials but none of them were close to what I wanted. But when I was trying to put metabox into my custom post type Add New page I saw Custom fields. I began then researching this approach.

After googling wordpress media library metabox I found one plugin, Media Library Custom Fields, which looked promising but for the  time being I’ve chose to use different one, Advanced Custom Fields, which is well rated as well as well documented. In coding there are days like this. So I am not ending this project now.

Lone Wolf comic redesign

After last quite exhausting week, as I wrote earlier I am an ice hockey junkie, I decided to work on a redesign of my other website I own but I have neglected it for too long. After reanalyzing the needs of Lone Wolf comic website I began doing wireframes. And then proceeded to pixel pushing.

The needs for a web comic are quite simple. Users need to see individual comic strips and to move between them. Archive is probably the most important less visible feature. The third thing which is more useful than necessary are tags for each comic strip. Individual tag may or may not be visible when user browses comic strips but it would be nice to be able to choose only those strips with certain tag. I also decided to create this website as a responsive one as a default so it’ll make coding part more challenging than the design part which is a little bit too easy or too dull.

Due to the previous work, let’s call it beginner’s mistakes, I have comic strips in various sizes in both width and height. So I designed looks for what I shall consider standard 200×600 (height x width) pixels three panel strip and for older strip formats. 200×600 pixels is standard format for desktop, for mobile I decided to flip it to 600×200 pixels.

mockup1panelsSingle

Single comic strip in old format

mockup3panelsSingle

Single comic strip in new format

mockup3PanelsSingleMobile

Mobile version looks the same for both older and newer format except that in older one there is only one panel.

mockupArchive

mobileArchive

This website is not challenging on the design part but it’ll let me explore WordPress in depth.

24 hour comic

Because today is Sunday I decided to cross off an item from my bucket list. Somewhere between six and three months ago 24 comics began to appear in my RSS reader. I wanted to do one but a) I didn’t know the rules and b) it was never good time to do it. While I was reading Gretchen Rubin The Happiness Project I learned the rules and today was the day I did it.

The hardest part was unlike my expectation the production part. This was because I am more of pen and paper person and what I mean by production part is translating with my graphical tablet pictures on paper to digital images. It was hard because it was mechanical. I probably need to work on my workflow but at the moment I am good.

The biggest inspirations for all panels were mostly past and current 24 hours. Today was last day of Olympics which is on five panels, three about a men’s ice hockey final match and two about the closing ceremony. I am a fan of Boston Bruins so I didn’t care much who would win, my favorite players were on both sides. I did some sleeping panels. One panel where I work late, one where I draw comic. Three panels about food and couple with recreational activities.

What I disliked was that on some panels, probably two, Lone wolf’s body is more cat like than I’d like which is a thing to be fixed with practice. 24 hours at Lone Wolf comic

Note: panels 14 (Tre Kronor) and 15 (Maple leaf) were drawn before the match.

Coding new WordPress theme

Today was that kind of the day when one wants just to lie in bed. I just couldn’t get started until late afternoon. But when I got myself into coding zone I was more thinking what features to implement, I was my own scope creep.

I run this blog on WordPress and therefore I wasn’t thinking about switching CMS. I quite like WordPress even though I’d like to try Perch CMS and ExpressionEngine one day. But as long as I have current infrastructure I am not planning to make a change.

I use my own bare theme which I use as a baseline. The one I use I am not willing to give away yet because it’s still in alpha stage.

I use two column design which can be implemented several ways. I tried faux column but I wasn’t able to make it work. I went different way with two wrappers. One for each column. In the footer there is a similar visual structure but I used but I used float: left;  because in that place it works better. When I tried floats it didn’t work as I wanted.

Work is not done. It’s far from over. Especially with my personal projects which I want to stick around for some time I am in favor of continuous development and deployment.

Blog on a paper – redesign

When I redesigned this blog in September last year I knew it was a temporary solution. I planned it to realign/redesign it when I’ll have time. I didn’t found mood and time until two weeks ago but I wasn’t satisfied with the result. So yesterday I decided to take a look at it today.

My first thought was what purpose has a blog? The answer is fairly simple to broadcast the message in post. So as opposed to current design I wanted to place menus, logo etc. around the content instead of arranging content around logo, menus, sidebar and footer.

BOAPMockUp2006BOAPMockUp1004At first I gathered all components which I wanted to use. First would be another realignment of current design except without sidebar. Although it works on a lot of blogs I’ve grown to dislike because it is too common. Therefore I tried non-traditional #2 and #3. After that I tried to combine #1 with #2 and #3 which I didn’t like much.

Note: I prefer doing mockups in hand because when I tried using Balsamiq but I wasn’t as efficient and I was always searching for elements.

When it comes to mobile web design I decided to hide menu as a default option. I use at the moment standard hamburger icon. And I am not sure if to show in mobile footer anything more than contact form yet. I will see later. It’s not the best solution at the moment but this particular thing need in my opinion A/B testing.

When I had wireframes I went to do some pixel pushing in Pixelmator. I am well aware that at this time there is no such thing as pixel perfect website no matter how designers try. As a first thing I created boxes according to mock up #2 because I prefer it over #3. The color scheme is similar to current ones. I changed dark greys to dark blues and light grey to  light oranges.

I experimented with skeuomorphism because this is a blog on a paper but as always I rejected it. Instead I use white borders between main blocks with flattish looks. But the button in contact form and the hamburger button are not flat unless the menu is active.

Here is the design I will code tomorrow:

MockupA

MockupAArchive

MockupMobile

MockupTitle

MockupTitleMenuActive

Button day

Under my display I have index card with three sentences. One of those is Practice, practice, practice. With this motto I decided to go to basics and as I said yesterday I made hundred buttons.

A lot of them are just variations. But what surprised me was the power of white and black compared to times when I used shades of grey to substitute them. I admit that this day was more about practical color theory than it was about buttons. Nevertheless I was working with buttons. For most of them I made flat and not-flat variations to see how bad recent design trend can be.

When I saw flat buttons as I made them I knew that the situation with flat design is worse than I have anticipated. How can a user know what is label and what is button when button doesn’t appear to be visually clickable? I am also not a fan of skeuomorphism but even old notebook keyboards where keys were not divided by flat space but as divider was used a set of skewed edges and that was considered flat or slim. Everyone understood it. These days I am not sure.

At the end of the day I ended up with three files of sum of hundred buttons:

buttons buttons2 buttons3

Download File 1 File 2 File 3

Ribbons and stuff

Today was quite opposite day compared to two previous ones. I underestimated how much I can do in a day and I also overestimated the time I’ll watch ice hockey at the Olympics. I know that I have this 60 day project but over the years I’ve grown to love hockey games and even without this project I would watch those games anyway.

Today’s task was to make 20 ribbons and 10 labels for my own asset collection. I decided to do this despite knowing there are thousands collections with ribbon because I will never know what kind of ribbons I’ll need and therefore I’ll always have template at hand. The same goes with templates.

Probably the most important lesson from today is not everything that looks good on paper will look as good when realized. That is probably the first thing we had to understand when we were in engineering school. And it applies for design no matter how petty the task may seem. I like some of those ribbons but most of them don’t look great for my skill level.

Because I like to be hard on myself I will create around 75±25 buttons. Just buttons. Day dedicated to buttons.

ribbonsribbons

Ribbons in iDraw format

MaajReedr part 2 – putting it on a backburner

Today my task was to continue what I have started yesterday. My personal goal was to deal with the database and configuration. And hopefully rewrite recommendation algorithm from underscore.js to vanilla JavaScript. When I look back I have to say that I have underestimated this project a lot. It is not something I can finish in a day or two but I have to devote more time to it. For this week I am putting it on the back burner unless I’ll feel the need to work on it.

What stole most of my time were node.js’ asynchronicity features. I did not realize that there are two types of read/write operations. I saw them in the API documentation but I didn’t pay much attention until I was getting undefined when I wanted to log into database. Second time when I met asynchronicity was when working with the database. It was at the time I was sending content before it was ready. I wanted to save couple of lines of code but it didn’t work.

At first I was planning to use mongodb library for node.js but I couldn’t make it work. Therefore I later during the day opted for different library, mongoose. At the moment I am at point when I can read from database. From what I can tell from documentation saving to database isn’t much different.

The third thing which made scratch my head were nice URLs. I thought that those designed yesterday were good ones but after a second look they were really bad. And I didn’t realize that until I had to rewrite them. The structure I devised is:

Lesson learned today:

  1. Good tools are hard to find. I have spend a lot of time today to find a good database manager for MongoDB. I settled for MongoHub. The second thing I hate are text editors I use. I haven’t found one I like. Most of them are good enough not to opt for command line editors like nano but none of them are great.
  2. Seriously, when estimating time follow Scotty’s advice.
  3. Simple SQL commands were easy but mongoose’s way looks like more fun