26 June 2016

Beginning Website Updates

I've had a personal website for a while now, but I haven't really done much with it -- mostly just placeholder pages for where I'd eventually put projects. But that's not much drive to get any actual content.

I think the main thing holding me back was just layout and design that I'd never been too happy with. I knew some tricks, but unless I was working with a design team on the job then I didn't feel capable of doing those sorts of things myself.

Important Side Note!

Trevor has a new job! (well, new as of three weeks ago. I don't want to make promises, but I should be updating this blog more recently) It's primarily front-end web development, and it's a very different atmosphere than I've been used to. It's also my first experience with Responsive web design, so styles changing as the browser window shrinks. They aren't using things like bootstrap, either -- it's just straight css @media queries.

Anyway, that was allowing me to pick up on new concepts really quickly and really boost my confidence with wanting to build up my personal website again.


Redesign

Hey, it's blog posts from here!
Since I don't really have images to put on my blog, I'm trying to keep with a 'simple is better' approach now. Just a few different styles for the text and only a few colors. Blue is probably overdone (Facebook, Twitter... probably others), but it's my favorite.

Also, instead of placeholder pages, I'm just showing the pages that are functional. In the future, this won't necessarily mean 'functionally complete,' but it means there will have to be more than 'this page will contain something in the future' to be visible.

Honestly really liking it so far, though I'll want to be updating the navigation soon -- it's the only thing I'm iffy about. Plus, it's not really scale-able.


Front-End Sample

Pretty tiny and clean
The homepage is laid out the same, except it's just a title and a few paragraph blocks. I just have a header file that I can inject into the page, so I don't need to duplicate any of the code appearing across multiple pages. The div 'blog-entries' is just a placeholder div for the javascript logic, so it has a place to add the blog entries pulled.


Back-End Sample

blog.js contents
And there we go. When the page initializes, this tiny function just makes an ajax request to a feed service. I'm just getting back some basic RSS data from my blog here -- it doesn't really even include sample text (though I'm sure this is possible if I tweak the RSS settings or something -- the properties are there in the return, but they just didn't have any data in them).

No big problem, though. I loop through the results and add a link to each blog post on the page -- including the title of the post and the published date. Since it's RSS, the results are in order from latest to earliest. At least for now, I'm also only pulling the latest 10 entries, which is just fine.


To the Future!

I have a few different ideas floating around for what I'd like to add to my website. The next project is a bit daunting, so it may take a bit of time before it appears live, but I'll be trying to tackle some blog posts as the process moves forward.

And so it begins...