Archive for the ‘web development’ Category

Resources for Design & Front-End Web Development

Wednesday, November 23rd, 2011

It’s been a while since I’ve written here, partly because I feel like anything I might want to say has been said already by people who could say it better! However, I’ve been promising some friends that I would make a list of some of my favorite blogs and websites I use for front-end dev and design resources, and I’ve been slacking off. Since these are the resources I’ve gathered over time, this is finally something I can write that someone else cannot ;)

Hopefully I’ll be able to get back into the swing of things and write here more often. But in the meantime at least, here’s a list of the web dev/design blogs that I try to keep up with.

  • 24 Ways – The best description is right off the front page of the website: “24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.”
  • A List Apart – I’m pretty sure that everyone knows about this, but you can’t just leave it out :) really fantastic articles from really smart people.
  • CSS Tricks – Lots of neat CSS tricks to be learned here.
  • Finch Fresh Thinking – Thought-provoking articles on design
  • Jens Meiert – “Jens O. Meiert (Google, W3C, O’Reilly) on professional web design, web development, accessibility, and usability.”
  • jQuery for Designers – I’m ashamed to admit it, but I like to just have things work in JS and not have to play with it forever. jQuery makes my life easy for this, so this site is kind of perfect.
  • Just Creative Design – Fun to read articles on web and logo design
  • Kimili – Pretty sure this is a friend of an old coworker of mine. I’ve enjoyed reading the seldom blog posts though and have used some of the techniques he has written about.
  • Pro Blog Design – Many helpful WordPress tips here.
  • SitePoint – Lots of assorted articles that are generally helpful for web development. They also sell books if you are so inclined to buy some.
  • Smashing Magazine – Yet another site with lots of helpful articles about a wide variety of topics relevant to web designers/devs.
  • Spyre Studios – Web design/dev magazine. Lots of list type posts (ie “6 amazing things you can do with wordpress”) but I’ve enjoyed reading the articles.
  • The Designer’s Review of Books – I’ve added way too many books (is there such a thing?) to my amazon wishlist because of this site.
  • Vandelay Website Design – Nice blog with list posts, inspiration, etc.
  • Web Designer Wall – Inspiration for design and development, and tips!
  • Web Designer Depot – Articles on design and development
  • WP Recipes – More WordPress tips and tricks.

People in the web design/development world I like to follow. I think these are all pretty obvious :)

Not updated but I still keep an eye on it and may use old articles for reference:

I think that hits the majority of them. Of course, there are also some sites I don’t follow regularly but still grab some articles off of them that I like. You can always find a list of the web dev related bookmarks I’ve made on delicious.

A Day Apart

Thursday, May 5th, 2011

An Event ApartToday I attended A Day Apart in Boston! My only regret is that I was unable to attend for Monday and Tuesday due to not realizing how early in the year the conference was this time around.

The last time I attended An Event Apart, it was 2008 and the conference was in June. So I’m just glad I was able to get a ticket, even if it was only for A Day Apart!

A Day Apart is the HTML5/CSS3 workshop that is tacked on to the end of the standard An Event Apart conference. In the first half of the day, Jeremy Keith, author of HTML5 for Web Designers spoke to us about HTML5. We started with an overview of the history of HTML and then went over the syntax and what has changed (or hasn’t changed) since HTML 4, as well as a kind of quiz on the new elements. It was a lot of fun and gave me high hopes for the rest of the day.

I was at first a little unsure of what the CSS3 portion of the day would be like. After all, I’ve already been using some aspects of CSS3 quite regularly, and others I’ve known about for some time even if I haven’t used them in a real website so far. However this portion of the day was really surprising to me! It was Ethan Marcotte’s turn to talk, and he went over a variety of CSS3… some of it I knew already and it was nice to get an overview, but some I hadn’t ever used or really noticed being used before. I learned a lot and also got even more excited than I already was for the new emerging technologies. I was a little disappointed that his talk ran a bit long and had to be cut short in order for the conference to end in a timely fashion, because I was particularly interested in hearing what he had to say on responsive web design. However, he does have a book coming out next month called Responsive Web Design, so perhaps I’ll get some of my answers there!

By the end of the day I was pretty sure I was going to go home and spend all night changing all of my personal sites over to full HTML5 and CSS3 support. That is… unrealistic, to say the least. However, it’s great when a conference/workshop can give you so much excitement and hope for your industry! I am looking forward to converting this site and perhaps my other, geeky non-web dev blog into HTML5 and also to include more CSS3, but somehow I don’t think that will all be done in the next two hours… :)

Book Review: Handcrafted CSS

Friday, January 7th, 2011

Handcrafted CSS was a great addition to my collection. The earlier chapters were mostly review of things I’ve already learned from blogs and practice, but the latter chapters especially were invaluable to me.

CSS3 is something I’ve been excited to use for ages and recently started using on various projects, because, as this book will hammer into your head, all websites do not have to look exactly the same in every browser. Every once and a while they might have to – but for the most part, it isn’t a big deal if the more ‘modern’ browsers like the latest version of Safari get rounded corners and IE8 does not.

In this book there are a lot of examples of CSS3 techniques that are available for use today and work in the recent versions Chrome, Safari, and Firefox. It shows what it will look like in Internet Explorer (both 8 and older versions) and also if your site does in fact have to look the same in all browsers, also gives some methods for achieving the same (or close enough) look with JavaScript or some hacks, and always with a graceful degradation in old browsers that don’t support even that.

The CSS3 sections of this book though were not the ones that I felt really taught me something, though they are certainly useful. I really appreciated the section on “clearfix” since it had another method for it that I hadn’t heard of before… but mostly it was the last two chapters that caught my attention.

The second to last chapter is on ‘the fluid grid’. It was packed with information and really easy to follow, and demonstrated how we, the developers, can translate a fixed width website into a fluid width beauty, including methods for images that I didn’t know worked! I’m really excited to try out a fluid width website soon, perhaps experimenting with my own.

The final chapter is just on those little extra touches that can go a long way toward making your website a finished product. Fancy ampersands, @font-face, simple jQuery stuff… lots of basic things that can give a site a bit of polish.

The whole book is written in a friendly and very readable manner; it isn’t dry at all! I was also happy to note that in some sections that looked like code segments one might want to copy and paste onto their computer had web links provided so it didn’t have to be copied by hand out of the text.

All in all it was an enjoyable read and a valuable addition to my collection of web development books.

HTML5 for Web Designers

Friday, July 9th, 2010

HTML5 for Web Designers book coverI just finished reading HTML5 for Web Designers. In fact I also just started reading it! It was a short read (only 85 pages) but each and every one of those pages was chock full of information. I got a brief history of HTML5 and where it has come from as well as information on just how I can start using HTML5 in today’s environment, where only some browsers have limited support for various elements, and others may have none at all.

I for one got pretty excited about the possibilities while reading – both those that we can implement today and those that will be coming to us in the future. In particular the new form elements sound amazing, and of course, HTML5 video. It is wonderful to see that even when using most of these new tags (like the audio and video tags) that for browsers that don’t support them, there’s a simple and easy to use fallback. No more needing to worry about this or that or the other thing that is going to prevent this from working in a certain ancient Internet Explorer browser. No crazy workarounds!

For the most part I had been avoiding HTML5 because even though it has been getting a lot of buzz, I still felt like implementing it was silly because a day when browsers will actually support this fully is still going to be years away (not to mention the day when the general public is using the browsers that support this content). I’m glad to say however that the book proved me wrong. A lot of things have easy fallback capability built in – and if they don’t, this book suggests some ways to do so simply.

Overall, if you are interested in learning some more about HTML5, I’d recommend picking up this book. It is informative, it’s funny, and best of all it is readable. The content is designed to be read by an actual person and in my opinion was not dry at all. Absolutely worth the money I spent on it!

IE6, IE7, and a weird padding on top of my LI elements

Tuesday, April 27th, 2010

I had a ul with top padding of 10px with a variety of li’s inside. (more…)

IE8 display none bug

Monday, March 22nd, 2010

I was given the task at work to fix a problem with a form that we have here.  After going through the issues (related to some scripts that were being included twice on the page) I realized that in IE8, and IE8 only, the form wasn’t displaying anything at all.  Some of the CSS being applied to the form was there (a background image in particular) but that was it!  It showed up in the source just fine, and (even weirder) was fine in every other browser I tested quickly, including IE7.

First thing I did was remove all of the html on the page so it was only the form and the css – still not working.  I thought it was a problem with the form, but then I noticed the form was working fine on all of the other pages it is being included on.

So I removed all the css. The form suddenly shows up!

Great, so I’ve narrowed down the problem.  I removed a chunk of css and it disappeared.  Read through what I deleted – and included there was:

.FormBoxBackground p {display:none; }

Removing that fixed the problem.  What is especially odd to me however is… there are no p tags in this form that should be doing this!  Regardless, removing that css fixed the problem.  Definitely explains why everything was fine in the other browsers, though.  IE8 is assuming a paragraph tag where there is no paragraph tag!