Relaunch!

By  on  

After weeks of research, hard work, pulling my hair out, and drinking too much wine, I've finally convinced myself that the blog is ready for relaunch.

Redesign

Disclaimer: I am not a designer.

As with every redesign, I'm stuck with my limited visual imagination, so it's a typical "header > content > sidebar > footer" site. I made an effort to use as few nodes as possible to not muddle up the DOM, and used SASS to create my (still-bloated) CSS. I used curlJS and AMD to create all of the JavaScript modules and functionality. I took a good amount of time ensuring the site looks good at different screen sizes and on different devices. Other than that, there's not much to say.

New Features

With each redesign, I tell myself "you're going to do this, this, and this." By the end of it, I say "OK, this is ready, and those other two will come later." Not this time. Here's a roundup of what's new:

  • AJAX Page Loads + pushState: I 've wanted to do AJAX page loads for a while and now was the right time. Christoph Pojer's History class made AJAX page loads not only fun but fairly simple. Pages are also "cached" in a JS object, and since the sidebar doesn't need to be loaded more than once, page loads should be very fast.
  • Next/Previous Post Links: If your monitor is of decent size, you can see "next" and "previous" post links to the left and right sides of the page, allowing for much easier post navigation.
  • Keyboard Navigation: I'm super excited about this. If you're on a list page like CSS Tutorials, you can press up and down keys to move from one post in the list to another. If you're on a post page (like this one), you can press the left or right key once to see what the previous or next post is, then again to view that post.
  • Top / Dropdown Navigation: I acknowledge my site has been difficult to navigate simply because I haven't provided enough options; I've fixed this by highlighting popular pages in those menus.
  • Speed: I've written the site with speed in mind, so I created a build process for this theme. The build process:
    • Minifies all JavaScript using UglifyJS
    • Minifies all CSS
    • PNGCrush'es all images
  • New & More Specific Categories: I've added the following post categories:
  • Comment Code Editing: Writing code in a textarea sucks -- even copy/pasting to a textarea is a nightmare. Now you can click the "Use Code Editor" link to transform the comments textarea into a workable text editor.
  • Mobile: The site should still look sexy on mobile. Additionally, swiping left and right on post pages should take you to the previous and next articles.

I have a few more ideas for features and those should come relatively shortly. Hopefully these are enough to hold you over though!

Script & Style is BACK!

I never wanted to close Script & Style in the first place but it was not maintained well and it was starting to look bad. I've rebuilt Script & Style from the ground up and integrated it with this site. The Script & Style Twitter account has been posting for weeks already and there's a new Script & Style Facebook page. Feel free to follow any and all. Also, please be sure to submit awesome blog posts so they get the attention they deserve and so they may inspire thousands of other developers!

My Gift To You

Over the next month, I'll be publishing guest posts from legends in the JavaScript, CSS, vector graphic, PHP, and python communities. You'll see names like Chris Coyier, John Hann, Thomas Fuchs, Guillermo Rauch, and many more. They're incredible developers and I look forward to sharing all of them with you.

I've also made an effort to round up giveaways or coupon codes from vendors I use for this website -- look forward to those too!

Lastly, it isn't so much a gift, but I'm renewing my commitment to bringing you some awesome tutorials that have been missing from my blog over the past few years. It's time to step it up!

See a Bug?

I've created a blog GitHub repo to allow users file issues they find around the site. If you see something wrong, or have a feature request, please file an issue on GitHub and I'll get to it as soon as I can. Thank you!

Thank You!

Thank you all very much for your support over the past 5 years. I'll keep writing as long as you all keep reading. THANK YOU!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

Incredible Demos

  • By
    Checkbox Filtering Using MooTools ElementFilter

    When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application.

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

Discussion

  1. Very nice redesign!
    I will definitely follow you relaunch!

  2. Francisc

    Everyone is a designer.

  3. As you said “speed in mind”, yes its much faster and we dont feel like page is loading. Nice design. Browsing davidwalsh.name is more fun now.

  4. The redesign looks pretty good. I like the Mozilla influence.

  5. Luiz Damim

    The redesign looks very good, congratulations. One little usability problem: middle-clicking links are opening them in the same tab instead on a new one.

  6. Nice redesign :) Two little comments. Ad blockers (I use them on some sites) disable your sidebar, and as Luiz ha said, the middle-click doesn’t work as expected.

  7. Looks awesome

  8. Chris

    The new site looks great!

  9. awesome work mate!

  10. I really like the navigation with the keyboard keys! Very smooth. I’ve been playing with the window history API (pushState() and onpopstate event) for a while for consoles displaying resources at pages with a REST-like URLs. It’s nice to see it in action on a blog ;)

  11. Alex

    Pretty awesome redesign! I wonder how much will change after another 5 years :)

  12. Jesus Bejarano

    Good desing , it’s about time.

  13. Jesus Bejarano

    I wish that this blog was made in octopress , would be faster.

  14. ruff

    Hi David!

    Just a remark: I played with Windows 8 pre-release version and checked IE 10 on it. I realized the back and forward buttons of the browser have been located the same position like your ‘older’/’newer’ buttons, if it uses Metro theme. Maybe, that could be confusing when the user wants to paginate your posts with click. Probably the keyboard handling solves this problem.

    By the way, the blog looks really good!! :)

  15. Surprise,,

    I was wondering why you haven’t updated your theme for year or more,

    – The comment layout and the top navigation icons looks more likely inspired from Google+ though it looks great.
    – the right – left navigation is awesome,

    Loved it

  16. yeah, your website speed more faster than before. and I wonder how you store / cache your page in JS Object, maybe it will be good tutorial.

  17. Dag Ole

    I like it!
    Not to rain on your parade or anything as I know this is only an issue for a very small percentage of visitiors, but have you checked the blog out in Opera(I’m using 12.02). The “script and style” title in the “kwicks” navigation grows too large so it wraps on two lines and gets overlayed with the paragraph. There’s also some weirdness going on in the featureblock in the sidebar, but I suspect that is some bug in Opera as Dragonfly behaves weirdly there also…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!