A new Code By Monkey

No comments yet Posted in Builds

My portfolio at Code By Monkey has been the same since I started freelancing in April, and even then it had old and outdated work in it. The implementation wasn’t the best and the site was static, so updating it took a bit of time.

Something had to be done, so I decided to re-build it with a WordPress back-end. I spent a lot of time on the design changes and agonised over various ways of doing things.

This write up aims to simply talk about a few things I did on the site, as some are pretty cool. :) I will be showing some code, so I should mention here that the CSS is written in LESS, so if the styling code looks a little off, that’s why.

Forms & Validation

There’s only one form but it’s duplicated, so it displays on the home page footer and contact page. It’s just 3 fields, so the barrier to entry is very low. Large forms scare me.

I use some JavaScript do validate fields and apply various classes which show the error-filled field to the user. It’s all normal stuff other than the shake which happens to draw the eye to an invalidated field. I use the wonderful Animate.css library from Dan Eden.

The way I add these classes is checking the values for each field. If it fails I add the classes error animated-fast shake, removing the animated-fast shake classes after the animation has ended. If it passes, I remove those 3 classes, showing a normal grey field.

Portfolio

I used a custom post type for this, as I wanted to manage these items properly. I added a bespoke meta box which lets me upload images, define a link and testimonial, of they exist. This means I can easily build the portfolio section, as I only need a normal WP loop.

The meta box only stores the ID of the image, meaning whatever the URL of the site is, I get no domain issues. See this post for more on those domain issue prevention techniques.

image

Portfolio Images

Carrying on from the CPT, I wanted a nice & intuitive way of showing the 4 images attacked to each portfolio item. I played with a few solutions including the very generic carousel but I felt they weren’t so nice to use, so I rolled out my own solution which is showing one large image with all of them displayed as thumbnails underneath, as a navigation.

When you click a thumbnail, it fades out the large image and displays a loading animation, the large version of the thumbnail is loaded behind the scenes, then when it’s loaded the src attribute of the large image is changed to the new one, the loading animation is closed and large image is faded in again.

Texture

A long time ago, I found out about mask-image: url('image.jpg');. I felt I needed to use it, so I did. It’s not a standard yet, so it requires vendor prefixes, so I just use a mixing from my little LESS library, meaning I could simply write h1 {.mask("@{images}/mask.png");} in my LESS file with all the type stuff in and all headers, obviously targeting every header in that selector.

Section Gradients

This was a little stroke of genius, I think. I knew a subtle gradient at the top of a few sections such as the portfolio items.

In-keeping with the modern web, I didn’t want to use images, so I experimented with CSS gradients with a transparent edge. I put the gradient in a pseudo element, so I didn’t need extra markup which would burn the document flow. Works a charm. Here’s the trimmed code.

.full_width_shadow_top {
    position: relative;
    &:before {
        content: "";
        border-top: 1px solid rgba(0,0,0,0.1);
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 50px;
        #gradient > .vertical(rgba(0,0,0,0.08), rgba(0,0,0,0));
    }
}

Just make sure to put the content on a higher z-index so it can still be selected.

Header Action

This aspect of the design got a little attention and most of the mentions on Twitter. The only page that has a sticky header is the home page, because it’s split into three main sections. Home/Top, Services & Portfolio. I felt the header was a little stick when scrolling down, so when you scroll down past the 300px, it shrinks. I only want this to happen when the site is at it’s widest though, essentially a desktop-only function. See below for how I achieve this.

Responsive JavaScript

There were various functions I only wanted to run when the site was at a desktop size or mobile, so I needed a way to call this. I came across a piece of JS that essentially works like media queries.

var mediaCheck = function(options) { 
    var mq,
        matchMedia = window.matchMedia !== undefined;
    if (matchMedia) {   
        mqChange = function(mq, options) {
            if (mq.matches) {
                options.entry();
            } else {
                options.exit();
            }
        };
        createListener = function(mqDetails) {
            mq = window.matchMedia(mqDetails.media);
            mq.addListener(function() {
                mqChange(mq, mqDetails);
            });
            mqChange(mq, mqDetails);
        };
        createListener(options);
    }
};

This means I can do something like this:

mediaCheck({
    media: '(min-width: 1000px)',
    entry: function() {
        home_header(true);
    },
    exit: function(){
        home_header(false);
    }
});

If the viewport is at least 1000px, do run, else don’t. The true/false value is whether I want the function to run. I just have a check inside the function, if I want to run, it gets true.

So there we have it. It’s nothing amazing, but certainly a step in the right direction. Now begins the never-ending rounds of refactoring and improvements.

Leave a Reply