Website update #2

newdesign

It’s been quite a while since I last wrote a blog post, but I’ve got some pretty good reasons for that. First of all, I was busy moving to London (!!!) about which I’ll write more in my next post. And second, I was re-designing my website. I am very happy with the result and hope you like it too 🙂

The main thing I changed is the menu. First, I had a static menu that remained on the top of my site all the time, which looked like this:

oldmenu

Now I made a menu that can appear and disappear whenever the user wants. I did this through jQuery. jQuery is a Javascript library which amongst others makes it very easy to create animations on a web page. I never learnt jQuery but it’s very easy to understand what’s going on when you read the code. For example, in the code below I wrote the part that makes the menu pop out, the body part of the page you’re looking at move to the right and become opaque when you click on the words ‘MENU’. By using jQuery I made my website a lot more interactive and dynamic then it was before.

javascript

But there are other ways through which you can add animations to your website. When you click on any of the pages in the menu tab you’ll see the content fades in. I did this with Animate.css. This lets you add animations in your css code.

Another thing I added is the map on my contact page. I did this by following the steps on the google devlopers page about Google Maps: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map.

Of course, re-designing my website brought along some problems, most of them were very small but the thing I struggled with a lot was the size of the images in my blog posts. Somehow all of the pictures I added in the blog posts I wrote were deformed. I tried adjusting my css and HTML but nothing seemed to solve my problem. I always post my posts on WordPress first because it’s very easy to add images there and copy the complete post in HTML and then add it to my site. But the thing is, when adding images in WordPress it stets a fixed size for your images, so when I then add it to my site the width and height are adjusted again by my sites’ css and then weird stuff happens. So I decided to post most of my posts again and get rid of the fixed widths and heights wordpress assigned to my images. That’s why it now seems as if I posted al lot blog posts today. I admit this wasn’t the solution I hoped for, but at least I managed to solve the problem.

Let me know what you think of my new design 🙂

Advertisements

Website update

websiteupdateYou might have thought that my website was finished the moment I launched it, but it wasn’t. In fact, I make improvements to it all the time. Most of those improvements are barely noticeable but today I added two major features to my site: caching and comments.

Caching is something that will help make my website load a lot faster. I’ll explain how. All of the data on my website is stored in a database, and every time you want to load my page your computer will make a request to my database and say “show me all the content of http://www.mereltheisen.com “. And then my database will answer this request by sending all the data and then my website will load on your screen. But all of these requests to the database take quite a lot of time. So this is where the cache comes in. The cache stores data that your computer has requested from the database before, so your computer doesn’t have to ‘talk’ to the database again. So for example, suppose you loaded my homepage 5 minutes ago, and now want to load it again. Before, both these loads would require your computer to talk to my database, which takes a lot of time. But now, because I implemented caching, your computer only has to talk to my database the first time it wants to load the homepage. The second time, the cache will have remembered the homepage data and send it to your computer a lot faster. You will probably not really notice this change, because my website is not that big (yet) but your computer will definitely notice the difference. If you want to know more about how to implement caching you should check out Udacity’s Web Development course.

The second feature, comments, is probably more interesting for you. Because now you can’t only read my blog posts, but also comment on them! I didn’t develop this tool myself, but decided to use Disqus. Disqus is very easy to implement on any website and allows visitors to leave comments by logging in on Facebook, Twitter, Google or Disqus. I hope you’ll enjoy these new features!

The next improvement for my website will be adding pagination. I’ll keep you up to date about how I’m going to implement that feature 🙂