Design Treats

I posted to designmeltdown.com

One page portfolios

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/zTebNxUL0yM/

I try not to put things in more then one category, but this is a situation that just can’t help but be in two places at once. Which is ironic given its single page approach. http://vandelaydesign.com/blog/design/one-page-portfolios/
- Tags:
- portfolios
- One Page Site
February 24 2010, 10:00am | Comments »
I posted to designmeltdown.com

Black and white sites

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/s1WuUgR2kTM/

While I have covered this topic several times in the past I still never tire of seeing how beautiful black and white sites can be. And of course I imagine that is why I was drawn to the theme this very site is based on. http://10steps.sg/articles/featured-articles/40-black-and-white-stylish-websites/
- Tags:
- Color
February 24 2010, 6:00am | Comments »
I posted to smashingmagazine.com

Smashing Newsletter Challenge… And Giveaway!

http://feedproxy.google.com/~r/SmashingMagazine/~3/0t7steOMliY/

It’s time for something brand new and exciting on Smashing Magazine. Actually, we have quite a few things in the works, and today we are happy to reveal one of them. Over the years, we have published many lengthy articles, and now we want to write some shorter ones for a change. We want to launch the Smashing Email Newsletter and we prepared some nice prizes for our subscribers.Every week our editorial team will work on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter will be sent out once a week, probably on Tuesdays, and will contain unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers.The 10,001 Subscribers ChallengeAnd to make it a bit more interesting, we decided to create a challenge for us and our readers. Here’s the deal: the Smashing Newsletter will be published only if we get at least 10,001 subscribers. (The earliest we would send it out is next Tuesday.) So, it’s up to you to decide whether we should launch the newsletter. And you can help right away: just type in your (valid) email address, confirm the subscription (opt in) and you’re done!Subscribe to Smashing Newsletter Now!Email Address Email Format html text mobile If the form doesn’t work in your RSS-feed reader, please view the article in your web browser. Sorry for any inconvenience!Of course, you can cancel your subscription at any time. The Smashing Newsletter will always be free of charge. We respect your privacy: we will never give your data to third parties, and we will never spam you. You have our word.[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed with excerpts of the post?]Join In To Win One Of Our Prizes!Of course, we knew it wouldn’t be as much fun without an incentive, which is why we are giving away some beautiful gadgets and books to some lucky subscribers. The winners will be announced in the first edition of the newsletter (if we meet the challenge). And here are the prizes:Wacom Bamboo Fun Pen and Touch (Medium)The Wacom Bamboo Fun Pen and Touch is a unique device to harness your creativity. It’s perfect if you want complete control with a pen or finger tap input. It has single- and double-finger functions, supports left- and right-handed use and has an integrated pen holder.Microsoft SideWinder X8 Laser Gaming MouseThe ultimate wireless gaming mouse, with advanced tracking, 12 buttons (7 of which are programmable), scroll wheel with tilt and full-speed USB reporting.Harman Kardon SoundSticks II Speaker SystemThe Harman Kardon SoundSticks II combines performance and an attractive visual design, a combination that always makes our hearts beat a little faster. It’s nearly perfect, save for a few design flaws.Microsoft Arc Mouse BlackThe Arc Mouse has the comfort of a desktop mouse and the portability of a notebook mouse. It folds to 60% of its fully expanded size for when you’re on the go. Two color options are available to match your style.Last But Not Least, The Books!Confessions of a Public Speaker, by Scott BerkumDecoding Design, by Maggie MacnabThe Laws of Simplicity, by John MaedaSmashing WordPress, by Thor HaedengrenUniversal Principles of Design, by William Lidwell, Kritina Holden and Jull ButlerPlease participate only once, and spread the word about the challenge to your friends and colleagues. Thanks, and let’s get this rolling, folks!(al)© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 46 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: e-mail, newsletters
- Tags:
- Events
- e-mail
- newsletters
February 24 2010, 4:30am | Comments »
I posted to designmeltdown.com

Black web sites

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/pWKW_3axYlQ/

What else can I say. This is a fine collection of black web sites. http://webexpedition18.com/articles/beautiful-black-website-design-flavours/
- Tags:
- Color
February 23 2010, 10:00am | Comments »
I posted to designmeltdown.com

Football sites

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/SDrMNBKrUVE/

In honor of the Super Bowl Templatemonster has put up a post of the best football web site designs. Though this topic is likely far from your niche it is still worth a look. Its interesting to see what can be done with an abundance of content and endless action photos. http://blog.templatemonster.com/2010/02/05/top-designs-football-websites-tribute-super-bowl/
- Tags:
- Sports
February 23 2010, 6:00am | Comments »
I posted to smashingmagazine.com

Shalom! Showcase Of Web Design In Israel

http://feedproxy.google.com/~r/SmashingMagazine/~3/kqzA0DyPRRc/

Israel is a young country with an old heart. It has been quickly built up over the last 60 years as an independent democratic Jewish state and is shockingly cutting edge for a country so new.It is a tiny surreal sliver of land smack dab in the middle of the Middle East: a very European, modern civilization… just programmed to Jewish tradition. Israel has great weather, nice beaches along the Mediterranean sea, fresh and tasty food and a warm and friendly culture. It is home to historic holy sites of the world’s three major religions, and buses drive down streets whose stones are older than anything you’ll find in Europe.Israeli design at its best: ILook, an Israeli street-fashion blog. The text on the left side says: “Send me a good picture of a hipster and win 300 bottles of Maccabi beer” (via Tal Sach).It feels as if Israel has one foot in Silicon Valley and the other in ancient Canaan — with an undercurrent of Middle Eastern hospitality and culture in this already multi-cultural society. And yet, English is commonly spoken here because many Jews from all over the world immigrate here regularly (not to mention the thousands of tourists from around the globe who pour in for sun, falafel, nightlife and a dash of biblical archaeology.) In some areas, you hear as much Spanish, French, Russian and English on the streets as Hebrew.Because of its small size and the everyone-knows-everyone effect of being a bunch of Jews, cabin fever (and completion of mandatory army service for the younger generation) drives Israel’s citizens out on frequent travels across the globe, to India, Asia, and South America. As a result, a unique mix of cultural discoveries abroad is woven into Israeli culture.Tel Aviv is Israel’s most urban, chic city: the capital of all things sexy, secular and spiritual (in alternative ways to traditional Judaism.) You can read more on Tel Aviv’s unique soul in this article by Ehud Azriel Meir.Much like many of Israel’s cities — hastily built and functional, yet poorly planned — such is the unfortunate state of most of the country’s websites. Most Israeli websites look unfinished, and they probably are. And Hebrew being a right-to-left language doesn’t help! Being victims of circumstance, Israeli Web designers cannot unleash their creative potential to make modern, usable working websites.agadir, a Hamburger joint.Even though some cutting-edge technologies are being developed right here in Israel — which is home to former hot startups such as ICQ (which became AOL messenger) and Intel (which is inside your machine… have a look!) — most business owners still putter around in IE6. Israel opened its first official Mac store only last year.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]What’s Unique About Israeli Web Design?Here are some other issues that designers face here (and, I imagine, in most places outside the US, Canada and Western Europe):Websites must work in legacy versions of IE (though IE6 is finally almost out). Israeli business owners emphasize this more than getting their websites to work in Safari or Firefox.There is a strong liking for Flash-based designs… it must be a cultural thing.Little value is given to Web designers (and those in related fields, such as copywriting — although marketers and SEO people seem to being doing okay), and many designers are not taking back their profession.Clients care more about cost than usability and standards.CSS-based designs are not standard, and many of the people responsible for hiring are not aware of it.Big agencies are usually asked to make conventional designs, and although they do quite impressive branding work, the websites they turn out are behind the times. Because they are launched by such big companies, the websites succeed “in spite of themselves,” leading many to believe that this is the formula for wildly successful websites: for Agency X to do our website the way they did for Company Y.The Lionways website.Many entrepreneurs here believe that because they are smart and successful in tech that they know your field as well as their own. They think they can write English better than a US-born copywriter and can design better than a graduate of FIT. Needless to say, this can be frustrating for the person trying to build a new website for them.Despite that, usability is starting to be demanded by many website owners, especially the genuinely intelligent tech companies, Web app providers and social media startups; hundreds of these are in Israel, mostly in English.Israel is always a few years behind American and European trends and standards, and this is no different on the Internet.The State Of AffairsWe spoke to key people in the Web design industry in Israel to get their point of view on the state of affairs.Q: Do you find you have to convince and educate clients a lot to be able turn out the high-end websites that you do?Arie Zonshine (Lionways.com): “Most people calling for a quote don’t really know what they want. It’s as if they are calling to get the price of an air conditioner. It doesn’t matter if they want a new site or a make-over of an existing site: they usually don’t have written specifications, they don’t know what kind of pages they want and they don’t have a visual concept.“So, I have to guide them through a series of questions, maybe looking at a few sites together in order to understand their needs. Sometimes, their lack of knowledge leads them ask for functionality that would work against them in terms of SEO, for example. I usually don’t have to work too hard to convince them to do things the right way.”Eran PalQ: Are clients surprised by how much you quote them? What buzzwords do you hear most from clients?Zonshine: “Always! Naturally, customers want the best price and, unfortunately in most cases, are not aware at all of the time and work invested. It’s even more problematic with issues such as Web standards and browser compatibility, because these aspects of the work have no visual impact on the website and are difficult for the client to appreciate. [I hear] SEO, AdWords and Flash. Very few mention browser compatibility, Web standards, semantic mark-up or CSS-based design”.Q: Approximately what percentage of Israeli businesses are into the new standards of websites written in XHTML and CSS, that are non-Flash and that use minimal JavaScript?Zonshine: “The numbers are unfortunately very low. I would say about 5%. Maybe less.”Alfred Gallery ExhibitionsQ: Why do you think most Israelis are into conceptual Flash designs that are hard to navigate, outdated and slow? Is this a cultural thing? Are more people waking up?Zonshine: “In too many initial conversations with potential clients, I hear requests to make things ‘Move on the screen like in PowerPoint.’ Many Israelis forget that the inside is just as important as the outside, and that foundations are more important than a cool façade (i.e. a flashy home page with clever animation) that has nothing behind it. I do believe it’s a cultural thing: you can see it in many areas. The ‘great façade with no foundation’ combo is very representative of Israeli culture. You see it everywhere. However, I do believe that appreciation of quality grows with time, experience and knowledge. More and more people call in already understanding the disadvantages of a Flash-only website”.Tower of DavidQ: Arie, I notice in your portfolio that you still use Flash, though you seem to have found the middle road between Flash and usability. Please explain.Zonshine: “Exactly. We wanted to make the point that cool and functional can work together seamlessly and are not contradictory. It was indeed an early decision that I took together with my partner Dana Ronen, who is responsible for the Flash programming on the site. We wanted to show creativity and Flash capabilities but also show that it can be done without compromising the accessibility, functionality and SEO of the site.“So, on almost every page, there is a small or big gimmick in Flash, depending on the content of the page and its function. On the home page, the flying business card gets center-stage; similarly, on the ‘About us’ page, the laptop CD tray makes an exciting entrance. On other pages we wanted the client to focus on the content itself, so the gimmicks were demoted to a supporting role and, in most cases, done in Flash (e.g. the credit card terminal, the coffee steam and the compass) and in other cases in jQuery (e.g. the changing color stamp on the contact page)”.Bee Creations Design AgencyQ: How does the fact that Hebrew is written from right to left influence your design work?Zonshine: “If the site will be Hebrew, you just need to flip your way of thinking horizontally. In terms of layout, it means that the logo would be probably placed in the top-right corner of the page rather than the top-left. You also need to mirror the placement of elements on the page, because the visitor’s eye-tracking patterns are mirrored in Hebrew.“The issue becomes more complicated when the site has both Hebrew and English or another left-to-right language. A good example of a dilemma that arises is a design that has a large background image, which I use quite often. When the background image cannot be flipped, it usually results in the logo and other elements being positioned on the “wrong” side of the page for one of the languages (Lionways is a good example of that). If, on the other hand, the image can be flipped, it’s much easier, as the Jerusalem Camerata site shows [see below] — the large violin image is mirrored on the English side of the site”.Waltz with BashirAnother example of this issue is Twitter, which scrambles any right-to-left tweets to an almost ridiculous degree. But again, Israel’s creative minds come to the rescue with Talker, a Twitter API-based… well, Twitter, except in Hebrew and right-to-left. Compare a Twitter Talker right-to-left account with a left-to-right account.Q: How does Hebrew affect other aspects of Web design?Zonshine: “First of all, a much smaller selection of safe fonts can be used for live text. Arial is probably the most common, followed by Times New Roman, Tahoma and Courier. That’s it, more or less. There aren’t any equivalents of Trebuchet, Georgia, Palatino or other fonts.“Also, if the site has both Hebrew and English, choosing a font for titles and logos becomes much trickier, because you usually need to choose two separate fonts — for English and Hebrew — that work well together. The Hiddush logo is a good example of that. I spent hours searching until I found a close-enough English font (Anderson the Secret Service) that worked well with the Hebrew one (AgadaMF), and even then I had to clean it a little to match the other. A few font shops in Israel, such as FontBit, offer quality fonts that are designed to blend well in both Hebrew and English”.“On top of all this, there are many technical problems with dealing with right-to-left texts in graphic elements, especially Flash components. Small and trivial things suddenly become an issue, such as the inability to control the location of punctuation marks, numbers and other symbols. Sometimes the only solution, as silly as it sounds, is simply to avoid certain characters, but this is impossible to control when dealing with dynamic content.“Q: Do clients pay on time. And what is negotiating like?Zonshine: “Negotiating is a part of Israel’s culture. People almost always ask for a discount. I almost always get paid on time”.Uzi Shmilovici (co-CEO at Netcraft) adds: “A lot of the logos that are designed in Israel have English typography. So the question is, where should the logo appear on the site: the left side or the right side?”Examining some of the biggest websites in Israel shows that this dilemma remains unsettled.“The other issue”, Shmilovici continues, “is using English words and phrases (either quotes or special terms) in the middle of Hebrew sentences. They force users to change the direction of their reading, which affects the flow of the article and scanning”.Israeli web design: Confederation House by bigdesignTypographyTypography is one of the most interesting crafts related to Hebrew websites and design. While traditional Hebrew fonts are great for creating an ancient or holy atmosphere, Web designers face a big challenge in finding or creating modern (or even futuristic) fonts from an alphabet that was invented for one thing: Torah books.Typography fans might be interested in the “Torah Scribe,” written by a person who handwrites Torah books and who follows a strict set of rules and guidelines. The slightest mistake makes the book un-kosher, and he has to throw it away and start all over again (which is why Torah books cost so much).Another trend in Hebrew typography is nostalgic fonts from the early days of the state (the British Mandate). A great example is the Palestina font created by Oded Ezer (see image below), which is an effort to fuse an ancient typeface to a modern design.Oded Ezer’s website is a great place to look for modern Israeli fonts and experiments in Hebrew typography. A leading Israeli typographic artist, Ezer also runs the blog Spare Type. If you are into typography (and who isn’t?), you must check out two works by Ezer in particular: Ketubah and Typosperma.Any Israeli knows how hard it is to find beautiful fonts in Hebrew. Lucky we have Oded Ezer, a typographic artist, logo and type designer, lecturer and typographic experimentalist. His studio is located in Israel.Fontef, Israeli font designers.Ha’Gilda: Hebrew fontsInteresting Solutions to Israeli Design ProblemsYotam Hadar redesigned nrg.co.il, Israel’s second-most popular news source and seventh most popular website. The old version had too many boxes, low readability and nowhere to focus the eye, not to mention unconventional and hard-to-use navigation. Since its redesign, the website has continually gained popularity (and the statistics show much longer stays), yielding more income and a smaller team on which to rely for maintenance. (The website was completed while the designer was working at Maariv, in collaboration with NRG’s design team, under chief designer Amir Hadad.)Efficiency Is A Double-Edged SwordIn a 62-year-old country that is in a constant state of war, where every citizen has to join the army at the age of 18, efficiency (not to be mistaken for productivity or effectiveness) is almost sacred. It has been the most important quality in building this country, and it tends to be the most valued quality in any project. One could say, “It doesn’t matter if it’s good, as long is it works…” Sort of… Close enough. Thus usability, aesthetics and trends are ignored quite often, making the job of the designer secondary.Another side effect of this harsh efficiency-driven attitude is the de-emphasis on a proper technological education. Because clients only demand that things “work,” standards, trends and aesthetics are the last thing on a developer’s mind. In turn, clients lack a real understanding of the media, which is why so many Israeli websites use Flash. The lack of variety of supported Hebrew Web fonts is also a factor. But fortunately SEO is creeping in and forcing even the most stubborn clients to ditch Flash for HTML and to replace images with live text as much as possible, which will hopefully push typography awareness to the next level.ha’Sushia has an original navigation menu.Adam Benayoun (CEO and co-founder of Lionite), puts it very well: “It is a technology-oriented market. A lot of Israeli companies don’t focus on the front end, design, UI, experience, because we are all developing and selling technology to the US.”Lea Aharonovitch (a senior product manager at Answers.com and a UI/UX blogger) adds: “I would even go further to blame each and every one of us Israelis as consumers for not demanding higher standards from websites that prefer banner spots to design.”“Just a quick look at some of the 130 Israeli Web 2.0 companies demonstrates how much creative types and services are trying to solve problems and foster new exciting ways to do more on the Web… If we support designers and let them show us what they can really offer, we stand a chance that the next ‘Made in Israel’ design article will boast about how Israel has become the cutting edge of intuitive and excellent user-centered design.”Lea is also a former manager of UPA Israel (Usability Professionals Association), which recently initiated a series of usability reviews published weekly on Israel’s biggest news website Ynet (the equivalent of CNN in terms of traffic and importance), inspecting a different Israeli website every week.Tel Aviv city budgetQ: What other setbacks against designers in Israel can you identify?“Behind every Israeli designer stands a team of managers who just don’t get it,” says Aharonovitch. “Managers don’t think they can afford to offer simple, less monetized interfaces, so designers are required to add as many monetization elements as possible”.Shmilovici: “Strong interactive companies lead clients to invest a lot of money in the media (where they have big commissions), and the result is usually less resources for UX and design (because the development part is a must anyway)”Oded Ezer, whose work was featured earlier in this piece, give us a typographer’s point of view: “Conservativeness. Instead of relying on 3,000 years of documented culture and Jewish heritage, young designers are looking to modern European design for inspiration.”Dinamo-DvashLocal InfluencesIt’s worth mentioning that the second official language of Israel is Arabic, another right-to-left language with amazing appeal to typographers. But a whole other article would be required for that and for the question of why Israel has so few Arabic websites.ShatilMossawa CenterKoloudtof. This website is Hebrew but influenced by local cultures. Remarkably, about 50% of Israelis come from Arab countries.Let’s Turn To The FutureWeb designers in Israel seem to have two choices: find work overseas, or deal with the conditions in Israel, which in most cases mean lower wages and having to dabble in print design and other unrelated design work. This is another reason why finding good examples of Israeli Web design is hard, because most of the work is done for European and American clients or, if done for domestic clients, just doesn’t compare to the quality of design overseas.But as Israelis, we always look at the bright side and seek solutions. “Clients in Israel are just like clients all over the world,” says Adam Benayoun, putting as much of the blame on service providers. “We need to educate clients on the importance of design,” he says, advice that is as true of designers in Israel as it is anywhere else.Baboo, a lighting boutique.Lionite is a great example of Israeli creativity in business model and workflow. The Tel Aviv-based Web shop provides a complete solution for clients in Israel and overseas, combining development, design and even marketing. “Clients overseas prefer us because of our standards, not because of or despite of our being Israeli,” says CEO Adam Benayoun. “We believe you have to be good no matter where you are from, no excuses.”Netcraft’s Uzi Shmilovici seems to agree with that philosophy: “Although Israel is not the cheapest place on earth, it is still cheaper than Europe and the US. That said, professionally, Israeli designers are definitely on par with European and American designers. Take those two facts together and you’ll understand why Israeli design gives you the best value for your money.”Q: So, what do you think we have to offer the world in terms of style, influence, etc.?Shmilovici: “I do think that some of our unique typography issues have led to some nice progress. Because the Israeli font inventory was weak, we had to come up with new fonts quickly. Some of those explorations, done by Oded Ezer for example, ended up in the MoMA.” Oded EzerAharonovitch: “Israel is considered one of most innovative nations in the world when it comes to technology. It’s hard to compete with our sense of creativity, our high level of adaptability and flexibility and our high skill level in problem-solving and other traits.”While at times it may seem that we’re not organized or that our affairs are managed informally or that our processes are not well defined, these are our advantages when considering the Agile or Lean development method that has been gaining popularity recently. The last thing to mention is the emotional strength and maturity that many Israelis develop at an early age — mainly derived from growing up in as challenging an environment as the Middle East and serving in the army at the age of 18.”Showcase of Israeli Web DesignDenis ZilberSchlafstundeRachel TimorElad TayerKeoss Studios (warning: music is turned on automatically!)Anz.co.ilAravaRubin MuseumE-Dologic.co.ilHayehudim, an Israeli music band.Kid.org.ilMoran in the big cityMoran in the big citySegal WinesSiblingOded Babayoff“The Block”Israel TodayIE StudioThe Red Sea Jazz Festival WebsiteZero NineStudiogavriel’s workThe Wall, Jerusalem.Sipholux.co.il3 BearsKitshQuicheria, one of the many Flash-based websites in Israel (via Wix.com)Terry Poison, electro-rock and roll band.Duddi Hasson, Fashion photographer.halas.am, Holon Art Lab Audio Serviceshani bar, Fashion designer.while you were away, Ben Ben-Horin.hello supersize, Matty Marianski (Supersize), Motion graphics and interaction design.The Jerusalem CamerataThe Red Sea Jazz Festival WebsiteHydrosIsraeli Designer ShowcaseThose who are able to rise above the circumstances end up turning out top-notch websites. Some such stars are featured here.Shual (meaning “Fox” in Hebrew) is a two-person team that churns out modern Web-standard websites. Its own portfolio is startlingly green. Aside from this neon-green page complete with fox howl, the team turns out such beautiful websites as the following:Galia OffriArt FocusNetcraft does it right and sets a good standard. It is one of the leading agencies in Israel.It designed this well-known e-commerce website:Lionite is an Israeli agency with a unique approach to business.It also created Octabox…… and Cubicl.Itamar Lerner is an Israeli-born graphic designer. He started working as a designer at 2002. In the following three years, he was employed by several design studios around Tel Aviv.Adam Tal (a collaborator on this article) created this stylish website to make his wish come true and was shocked by the feedback and attention he received.Daina Reed is a freelance Web designer in Tel Aviv.Inbal Pinto and Avshalom Pollak Dance Company created this beautiful, simple and artistic Flash website, which may be impractical for most in the real world.Inkod Hyperanucampaign offers great insight into the real Israel (as opposed to the Israel you know from the news).IllustratorsLiron Tocker is a talented Israeli illustrator and icon designer who lives in Germany.Mikimottes is commendable for his sketching of everyday Israeli scenery.Asaf Hanuka worked on the art for the award-winning animated documentary feature film by director Ari Folman.hoop: this is just about the end of our journey. If you wish to absorb more Israeli design, you should visit hoop.Related PostsYou may be interested in the following related posts:Showcase of Web Design in RussiaShowcase of Web Design in GermanyShowcase of Web Design in MexicoShowcase of Web Design in IrelandAbout the AuthorsDaina Reed is a freelance Web designer and Web project manager in Tel Aviv.Adam Tal is a Web entrepreneur who believes that code is poetry and design is music. Follow him on Twitter @adamtal, or check out his website.Sara Eisen is a freelance writer, editor, journalist and “marcom” and Web content consultant. She blogs at http://the-word-well.com.Also, this article wouldn’t have been possible without the contributions of Joey Simhon and Lior Yair of Netcraft, a digital agency in Tel Aviv that specializes in user experience and Web technologies. Special thanks to Avi Joseph, CEO of SmediaC for helping with the research for this article.(al) (dr) (at) (vf)© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 12 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: israel, showcases
- Tags:
- inspiration
- showcases
- israel
February 23 2010, 5:53am | Comments »
I posted to designmeltdown.com

Creative introductions

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/ftjqNT6jdQ4/

The style I (and many others I suppose) refer to as “the pitch” is when you introduce a site in a visually prominent and very succinct way. My biggest frustration with some sites is not being able to tell what they are selling or represent with out trying to hard. If I can’t figure out why I am on your site, I am out of there. These sites might not spell it out so literally, but they do try to draw you in and retain your attention by starting off with some sort of introduction. http://webexpedition18.com/articles/showcase-of-creative-introductions-in-web-design/
- Tags:
- The Pitch
February 22 2010, 10:00am | Comments »
I posted to designmeltdown.com

Coming soon…

http://feedproxy.google.com/~r/designmeltdown/uecD/~3/mRw5SKCRKDg/

No, its not the post thats coming soon, but rather common soon landing pages for sites that are soon to be. This huge sets should definetly get you started on the topic. http://www.instantshift.com/2010/01/09/90-creative-coming-soon-page-designs-and-resources/
- Tags:
- Coming Soon
February 22 2010, 6:00am | Comments »
I posted to smashingmagazine.com

The Seven Deadly Sins Of JavaScript Implementation

http://feedproxy.google.com/~r/SmashingMagazine/~3/cw8h09tw6FQ/
Using JavaScript has become increasingly easy over the last few years. Whereas back in the day we needed to know the quirks of every browser, now many libraries such as jQuery, YUI, Dojo and MooTools allow someone who doesn’t even know JavaScript to spruce up boring HTML documents with impressive and shiny effects. By piggy-backing on the CSS selector engine, we have moved away from the complexity and inconsistencies of the DOM and made things much easier.If you look at some of the code that has been released, though, we do seem to have taken a step backwards. In gaining easier access, we also became a bit sloppy with our code. Finding clearly structured, easy-to-maintain jQuery code is quite tough, which is why many plug-ins do the same thing. Writing one yourself is faster than trying to fathom what other developers have done.The rules for solid, maintainable and secure JavaScript haven’t changed, though. So, let’s run through the seven sins of JavaScript development that will bite you in the backside when you have to maintain the code later on or hand it over to another party.We’ve all had to work with code written by other people. We have despaired over the lack of maintainability and documentation as well as weird logic. Funny enough, as developers, we started to see this as normal and got used to ignoring other people’s work and instead writing new code for the same problems over and over, as if we were subconsciously trying to secure our jobs by leaving behind unmaintainable code—code that only we understood, while complaining that no good solutions were out there.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]Sins Of Our Fathers: Browser-Specific CodeOne of the main obstacles that kept us from evolving as developers was that JavaScript was largely browser-specific.This was mainly because browsers did not support the standards (or were shipped before the governing bodies agreed on standards at all), and because we had to deliver our work before the competition and without extending the overly optimistic deadline set by our project managers.This happens to be one reason why Internet Explorer 6 refuses to die. Hundreds of expensive software packages that are being used in offices worldwide were built when this browser was state of the art. This—and the monoculture that advocated using one software vendor for everything from the operating system to documents to spreadsheets to the browser—is the reason why companies now can’t simply discontinue support for it. It also means that newer versions of IE will always have to support the rendering mistakes of IE6 in one way or another. IE6 is the Frankenstein of the Internet, haunting its creators, terribly misunderstood by the townsfolk, who would sooner kill it, burn it and dance around it than make any sense of it.The good news is that you won’t find many scripts these days that begin with if(document.all){} and continue with else if(document.layers){}. If you do find one, please send its creator a brief email encouraging them to move on or, better yet, to redirect their website to a better script that is actually being maintained.Libraries to the RescueThe job of JavaScript libraries such as jQuery, YUI, MooTools, Dojo and Glow is to make JavaScript development predictable and to relieve developers of the living hell that we call browser support. In other words, they fix random bugs in browsers and free us to adopt standards without worrying that certain browsers won’t recognize them.For example, the DOM method getElementById(id) should be straightforward: find the element with the ID id and return it. But because some versions of IE and Opera also return elements that have the name attribute of id, jQuery solves the problem this way:var elem;

elem = document.getElementById( match[2] );

if ( elem ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); }

// Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; }This is where libraries are awfully useful and is why JavaScript libraries are here to stay. Browsers will always do things wrong, and old browsers will not be upgraded by end users, either because of the aforementioned company regulations or because people simply don’t care to keep up with the times.So, while the practice of building software for certain browsers is on the decline (at least for JavaScript—with CSS, we have a whole other headache ahead of us), we still have to be mindful of certain sins.Sin #1: Not Playing Nice With Other ScriptsHere’s the first one, which we still see a lot of on the Web. Sadly, it is very common in demo code for APIs and Web services: global variables, functions and DOM-1 event handlers.What do I mean by these? Consider the following:Every script in the HTML document has the same rights as the others and can, if need be, overwrite what other scripts have done before.If you define a variable or function name, and some other include uses the same name, the initial one will be overwritten.The same applies to event handlers if you attach them the old-school onEvent way.Say you have the script script_one.js: x = 5; function init(){ alert('script one init'); document.getElementsByTagName('h1')[0].onclick = function(){ this.style.background = 'blue'; } } alert('x is '+x); window.onload = init; And immediately after this one, you include another script, script_two.js: x = 10; function init(){ alert('script two init'); document.getElementsByTagName('h1')[0].onclick = function(){ this.style.color = 'white'; } } alert('x is '+x); window.onload = init; If you open this document in a browser, you will find that x turns from 5 to 10 and that the first init() is never called. The script two init alert() does not come up, nor does the h1 get a blue background when you click it. Only the text turns to white, which renders it invisible.The solution is not to use onEvent handlers, but rather the proper DOM level 2 event handlers (they don’t work in IE, but let’s not worry about that at the moment—remember, this is what libraries are for). Furthermore, wrap your functions in another with a more unique name to prevent them from overriding each other.var scriptOne = function(){ var x = 5; function init(){ alert('script one init'); document.getElementsByTagName('h1')[0].addEventListener( 'click', function(e){ var t = e.target; t.style.background = 'blue'; }, false ); } alert('x inside is '+x); return {init:init}; }(); window.addEventListener('load',scriptOne.init,false); alert('x outside is '+x);

var scriptTwo = function(){ var x = 10; function init(){ alert('script two init'); document.getElementsByTagName('h1')[0].addEventListener( 'click', function(e){ var t = e.target; t.style.color = 'white'; }, false ); } alert('x inside is '+x); return {init:init}; }(); window.addEventListener('load',scriptTwo.init,false); alert('x outside is '+x);If you run this in a browser (not Internet Explorer 6), everything will come up as you expect: x is first 5, then 10 on the inside, and the heading turns blue and white when you click it. Both init() functions are called, too.You also get an error. Because x is not defined outside the functions, the alert('x outside is '+x); never works.The reason is that by moving the x into the scriptOne and scriptTwo functions and adding the var keyword in front of them, we have made them a part of those functions but hid them from the outside world. This is called a closure and is explained in detail here. It is probably the most powerful feature of JavaScript.Using closures and var keywords, you won’t have the problem of variables with similar names overriding each other. This also applies in jQuery: you should namespace your functions.This can be tough to grasp, so let’s look at a simpler example:var x = 4; var f = 3; var me = 'Chris'; function init(){} function load(){}All of these are global variables and functions now. Any other script having the same variables will override these.You can nest them in an object to avoid this:var longerAndMoreDistinct = { x : 4, f : 3, me : 'Chris', init : function(){}, load : function(){} }That way, only the longerAndMoreDistinct is global. If you want to run this function, you now have to call longerAndMoreDistinct.init() instead of init(). You can reach me as longerAndMoreDistinct.me and so on.I don’t like this because I have to switch from one notation to another. So, we can do the following:var longerAndMoreDistinct = function(){ var x = 4; var f = 3; var me = 'Chris'; function init(){} function load(){} }();You define longerAndMoreDistinct as the outcome of a function without a name that gets immediately executed (this is the () on the last line). This now means that all of the variables and functions inside exist only in this world and cannot be accessed from outside at all. If you want to make them accessible from outside, you need to return them to the outside world:var longerAndMoreDistinct = function(){ var x = 4; var f = 3; var me = 'Chris'; function load(){} return { init:function(){} } }();Now init() is available as longerAndMoreDistinct.init() again. This construct of wrapping things in an anonymous function and returning some of them is called the Module pattern, and it keeps your variables safe. Personally, I still hate the shift in syntax, so I came up with the revealing module pattern. Instead of returning the real function, all I do is return a pointer to it:var longerAndMoreDistinct = function(){ var x = 4; var f = 3; var me = 'Chris'; function load(){} function init(){} return { init:init } }();This way, I can make things either available or not available simply by adding to the object that is returned.If you don’t need to give anything to the world and just want to run some code and keep all of your variables and function names safe, you can dispense with the name of the function:(function(){ var x = 4; var f = 3; var me = 'Chris'; function load(){} function init(){} })();Using var and wrapping code in this construct makes it inaccessible to the outside world, but still makes it execute.You may find this to be complex stuff, but there is a good way to check your code. JSLint is a validator for JavaScript, much like the HTML or CSS validators, and it tells you all the things that might be wrong with your code.Sin #2: Believing Instead Of TestingThe next big sin related to implementing JavaScript is expecting everything to go right: every parameter being in the right format, every HTML element you try to enhance being truly available, and every end user entering information in the right format. This will never be the case, and that last assumption is an especially bad one because it allows malicious users to inject dangerous code.When you write JavaScript and give it to the world or integrate it in a product that will be maintained by a third party, a little paranoia is a good thing.typeof is your friend. Fegular expressions are your friend. indexOf(), split and length are your friends. In other words, do everything you can to make sure that incoming data is the right format.You will get a lot of errors with native JavaScript; if you do anything wrong, you’ll know what happened. The annoying thing about most JavaScript libraries is that when they fail to execute some functionality, they do it silently. The maintainer is left guessing and has to run through all the code and start debugging with stop points (or—shudder!—alerts()) to reverse-engineer where you entered instable code. To avoid this, simply wrap whatever you can in a test case rather than try to access it.Sin #3: Using The Wrong Technology For The JobThe biggest problem with JavaScript happens when you use the wrong tool for the job. It makes maintenance a nightmare and deteriorates the code’s quality. Use tools for the jobs they were meant for. This means:Absolutely essential content and mark-up should be in HTML, regardless of the environment it will be displayed in.Any “look and feel” elements should be maintainable through CSS. You should not have to scour through JavaScript to change a color.Any interaction with the user that goes beyond hover effects (which, by definition, are an invitation to interact and not the interaction itself—because they are inaccessible to keyboard users) should be done with JavaScript.The main reason why this is still a valid, pragmatic and sensible approach to development is that as Web technologies get muddled (for example, you can create content with CSS and JavaScript, animate and transform in CSS and—if you really want—paint with HTML), people’s skills and interests in these different technologies vary quite a bit.Semantic mark-up buffs are not much interested in applying closures in JavaScript. JavaScript developers are not much interested in the order of elements in CSS. And CSS fans aren’t keen to learn how to make a JavaScript animation run flicker-free.This results in the same problems being solved over and over again, only with different technologies. This is a market-wide problem: a lot of state-of-the-art Canvas tricks were done in Flash years ago, their impact debated and their problems fixed.My favorite instance of this is when people write loops to hide a lot of elements on the page to make them available later on.Say this is your HTML:<h2>Section 1</h2> <div class="section"> <p>Section 1 content</p> </div>

<h2>Section 2</h2> <div class="section"> <p>Section 2 content</p> </div>

<h2>Section 3</h2> <div class="section"> <p>Section 3 content</p> </div>

<h2>Section 4</h2> <div class="section"> <p>Section 4 content</p> </div>The normal jQuery solution for this would be:$(document).ready(function(){ $('.section').hide(); $('h2').click(function(e){ $(this).next().toggle(); }) });And then you realize that making the style of the current section deviate from that of the other sections would be great.$(document).ready(function(){ $('.section').hide(); $('h2').click(function(e){ $(this).next().toggle(); $(this).next().css('background','#ccc'); $(this).next().css('border','1px solid #999'); $(this).next().css('padding','5px'); }) });A few things are wrong with this. For starters, you’ve made it hard to maintain this by controlling the look and feel in JavaScript, not CSS (more on this later). Secondly, performance: while jQuery is amazingly speedy, a lot of code is still hidden under the hood in $('.section').hide(). The last, and very painful, performance issue is the copied and pasted lines that set the CSS. Don’t ask jQuery to find the next sibling four times and do something to it. You could store the next() in a variable, but even that is not needed if you chain. If you really need to set a lot of CSS in jQuery, use a map:$(document).ready(function(){ $('.section').hide(); $('h2').click(function(e){ $(this).next().toggle().css({ 'background':'#ffc', 'border':'1px solid #999', 'padding':'5px' }); }) });What if you then want to allow only one of them to be open at any time? Inexperienced developers would do something like this:$(document).ready(function(){ $('.section').hide(); $('h2').click(function(e){ $('.section').hide(); $(this).next().toggle().css({ 'background':'#ffc', 'border':'1px solid #999', 'padding':'5px' }); }) });This does the job, but you’re looping around the document and accessing the DOM a lot, which is slow. You can alleviate this by keeping the current open section in a variable:$(document).ready(function(){ var current = false; $('.section').hide(); $('h2').click(function(e){ if(current){ current.hide(); } current = $(this).next(); current.toggle().css({ 'background':'#ffc', 'border':'1px solid #999', 'padding':'5px' }); }) });Predefine the current section as false, and set it when you click the first heading. You would then hide current only if it is true, thereby removing the need for another loop through all elements that have the class section.But here is the interesting thing: if all you want is to show and hide sections, you don’t need any looping at all! CSS already goes through the document when it renders and applies classes. You just need to give the CSS engine something to hang on to, such as a class for the body:$(document).ready(function(){ $('body').addClass('js'); var current = null; $('h2').click(function(e){ if(current){ current.removeClass('current'); } current = $(this).next().addClass('current'); }) });By adding the class js to the body of the document and toggling the class current for the current section, you maintain control of the look and feel in CSS:<style type="text/css" media="screen"> .section{ border:1px solid #999; background:#ccc; } .js .section{ display:none; } .js .current{ display:block; border:1px solid #999; background:#ffc; } </style>The beauty of this is that the handle will be re-usable by the CSS designer and maintainer. Anything without the .js selector would be the non-scripting-enabled version of a part of the document, and anything with the .js selector is applied only when JavaScript is available. And yes, you should think about the case when it is not.Sin #4: Depending On JavaScript And Certain Input DevicesThere is quite a discussion about the need to consider non-JavaScript environments in this day and age, but here is a fact: JavaScript can be turned off, and any JavaScript could break the page for the other scripts that are included. Given the flakiness of code out there that may be running alongside yours and the instability of wireless and mobile connections, I for one want to build one thing: code that works.So, making sure that the most basic usage of your product does not depend on JavaScript is not just nice to have but essential if you expect people to actually use the product.Absolutely nothing is wrong with using JavaScript heavily. On the contrary, it makes the Web much smoother and saves us a lot of time if done right. But you should never promise functionality that doesn’t work. And if you rely on JavaScript, this is exactly what you’re doing. I’ve already covered the effects of bad JavaScript in detail in the AJAX, JavaScript testing and security articles here on Smashing Magazine, but once again here are some simple steps you can take to make sure you don’t break your promise to end users:Anything vital to the functionality of your product should not require JavaScript. Forms, links and server-side validation and re-direct scripts are your friends.If something depends on JavaScript, build it with JavaScript and add it to the document using the DOM or the equivalent method in your library of choice.If you add JavaScript functionality, make sure it works with the keyboard and mouse. Click and submit handlers are bullet-proof, whereas key and mouse events are flaky and don’t work on mobile devices.By writing clever back-end code that recognizes when data is required by JavaScript rather than building APIs that render HTML, you avoid having to do double-maintenance, which is an argument that many of the “Everyone enables JavaScript” zealots bring up a lot. For proof of this, check out the presentation on building Web applications using YQL and YUI that I gave a few weeks ago (video in English and German).When JavaScript Dependence Is Okay (to a Degree)A lot of misunderstanding about JavaScript dependence stems from people making blanket statements based on the environments they work in.If you are a Google engineer working on Gmail, you would be hard pressed to think of why you would even bother working without JavaScript. The same goes for widget developers who work on OpenSocial widgets, mobile applications, Apple widgets and Adobe Air. In other words, if your environment already depends on JavaScript, then by all means don’t bother with a fall-back.But do not take these closed environments and edge-case applications as the standard by which we should be measuring JavaScript. JavaScript’s greatest power and greatest problem is its versatility. Saying that all websites can stand JavaScript because Gmail needs it is like saying that all cars should have a start button because they work great in Hybrids, or that hybrid cars should have massive tanks and cow catchers because they work great on Hummers. The technical feature set of a product depends on its implementation and target market. Different applications have different base functionality that needs to be satisfied in order to reach the largest audience and not block people out.Consider the Use Cases and MaintenanceOne fascinating aspect of JavaScript-dependent code is that, in many cases, people have simply not considered all the use cases (here’s a great example). Take the following HTML:<form action="#" id="f"> <div> <label for="search">Search</label> <input type="text" value="kittens" id="search"> <input type="submit" id="s" value="go"> </div> </form> <div id="results"></div>Without JavaScript, this does nothing whatsoever. There is no sensible action attribute, and the text field has no name attribute. So, even when you send the form off, the server won’t get the information that the user has entered.Using jQuery and a JSON data source such as YQL, you can do a pure JavaScript search with this:$('#s').click(function(event){ event.preventDefault(); $('<ul/>').appendTo('#results'); var url = $.getJSON('http://query.yahooapis.com/v1/public/yql?'+ 'q=select abstract,clickurl,dispurl,title '+ 'from search.web where query="'+ $('#search').val() + '"&format=json&'+ 'callback=?', function(data){ $.each(data.query.results.result, function(i,item){ $('<li><h3><a href="'+item.clickurl+'">'+ item.title+' ('+item.dispurl+')</a></h3><p>'+ (item.abstract || '') +'</p></li>'). appendTo("#results ul"); }); }); });This works… unless of course you are like me and prefer to send forms by hitting “Enter” rather than clicking the “Submit” button. Unless I tab through the whole form and focus on the “Submit” button, I get nothing.So, that’s the first thing to fix. If you create forms, never use a click handler on the button. Instead, use the submit event of the form. This catches both the clicking “Submit” and hitting “Enter” cases. With one change, you now support all of the keyboard users out there, and the whole change is contained in the first line:$('#f').submit(function(event){ event.preventDefault(); $('<ul/>').appendTo('#results'); var url = $.getJSON('http://query.yahooapis.com/v1/public/yql?'+ 'q=select abstract,clickurl,dispurl,title '+ 'from search.web where query="'+ $('#search').val() + '"&format=json&'+ 'callback=?', function(data){ $.each(data.query.results.result, function(i,item){ $('<li><h3><a href="'+item.clickurl+'">'+ item.title+' ('+item.dispurl+')</a></h3><p>'+ (item.abstract || '') +'</p></li>'). appendTo("#results ul"); }); }); });We’ve now covered the first case. But without JavaScript, the form still doesn’t do anything. And another problem brings us to the next sin of writing JavaScript.Sin #5: Making Maintenance Unnecessarily HardOne thing that keeps great code off the Web is that our work environment, deadlines and hiring practices condition developers to build code for quick release, without considering how difficult maintaining that code will be later on. I once called JavaScript the village bicycle of Web design (slides here): anyone can go for a ride. Because the code is available in the open, future maintainers will be able to mess around with it and extend it any way they like.The sad thing is that the harder your code is to maintain, the more errors will be added to it, leading it to look more like alphabet soup than organized script.Take the above example. Those of you who haven’t worked with YQL and JSON-P for cross-domain AJAX undoubtedly had a “What?” moment looking at the code. Furthermore, keeping a lot of HTML in JavaScript easy to follow is hard, and guess what is the first thing to change when a new design for the page comes along? Exactly: the HTML and CSS. So, to make it easier to maintain, I for one would shift all of the work to the back end, thus making the form work without JavaScript and keeping maintenance of all the HTML in the same document:<?php if(isset($_GET['search'])){ $search = filter_input(INPUT_GET, 'search', FILTER_SANITIZE_ENCODED); $data = getdata($search); if($data->query->results){
```
$out = &#x27;&lt;ul&gt;&#x27;;

foreach($data-&gt;query-&gt;results-&gt;result as $r){

  $out .= &quot;&lt;li&gt;
             &lt;h3&gt;
               &lt;a href=\&quot;{$r-&gt;clickurl}\&quot;&gt;{$r-&gt;title}
                 &lt;span&gt;({$r-&gt;dispurl})&lt;/span&gt;
               &lt;/a&gt;
             &lt;/h3&gt;
             &lt;p&gt;{$r-&gt;abstract}&lt;/p&gt;
           &lt;/li&gt;&quot;;
}

$out .= &#x27;&lt;/ul&gt;&#x27;;
```
} else {
```
$out = &#x27;&lt;h3&gt;Error: could not find any results&lt;/h3&gt;&#x27;;
```
} }

if($_SERVER['HTTP_X_REQUESTED_WITH']!=''){ echo $out; die(); } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ajax Search with PHP API</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <form action="independent.php" id="f"> <div> <label for="search">Search</label> <input type="text" value="kittens" name="search" id="search"> <input type="submit" id="s" value="Go"> </div> </form> <div id="results"><?php if($out!=''){echo $out;}?></div> <script src="jquery.js"></script> <script src="ajaxform.js"></script> </body> </html> <?php function getdata($search){ $url = 'http://query.yahooapis.com/v1/public/yql?'. 'q=select abstract,clickurl,dispurl,title '. 'from search.web where query="'.$search.'"'. '&format=json'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); curl_close($ch); $data = json_decode($output); return $data; } ?>Someone who doesn’t understand PHP at all should still be able to change the HTML display without breaking the code. With this in place, the JavaScript boils down to a very simple script:$('#f').submit(function(event){ event.preventDefault(); $.get('independent.php?search=' + $('#search').val(), function(data) { $('#results').html(data); } ); });The normal way to make code more maintainable is to move everything that is likely to change away from the main functional part of the script into a configuration object at the very top of the script. You can return this as an object to the outside world to allow people to set it before they initialize the main functionality.So, one change we can make to our earlier example—albeit a small one now, but that can change quickly when more requirements come in—is to have a configuration section right up front that defines the CSS classes in use:$(document).ready(function(){ /* Configuration object - change classes, IDs and string here */ var config = { /* CSS classes that get applied dynamically */ javascriptenabled:'js', currentsection:'current' }

/* functionality starts here / $('body').addClass(config.javascriptenabled); var current = null; $('h2').click(function(e){ if(current){ current.removeClass(config.currentsection); } current = $(this).next().addClass(config.currentsection); }) });For more information on configuration objects and why they rock for maintenance, check out the blog post “Providing Script Configuration Inline and Programatically“.In summary, go over your code once more when you think you’ve finished with it and the next person is about to take it over.Sin #6: Not Documenting Your Code“Good code documents itself” is a terribly common and misguided belief. In my years as a developer, I’ve found that my style of coding has changed constantly. What was common knowledge and best practice in 2004 might be forgotten or even considered poor style these days.Documenting all of the tricks and workarounds we do to make our code work in different browsers is definitely a good idea. This allows future maintainers to remove them when the targeted browser version becomes obsolete or a library function fixes the issue.Commenting your code also allows the maintainer to trace it back to you should they need some piece of information, and it allows people who have stumbled across your script to include it in a larger solution or library (which has happened to me). Because JavaScripts tend replicate on the Web (in all of those blogs and “script collections”), it is also a way to make your name known.Don’t go overboard with commenting, though. Obvious things don’t need to be spelled out. I have found the following situations worthy of comment:Necessary hacks Browser hacks; content clean-up; things that should be supported server-side but are not yet.Sections that are likely to change Timely solutions; IDs, classes and strings (as explained earlier).Start of classes and reusable functions With name, author, version, date and license.Third-party code Give credit where credit is due.Sections with dependencies Some comment like, “Needs the Google API with an own key—this one will not work on your server.”In short, comment on anything that deviates from the normal flow of coding. I tend to use / / instead of // because it won’t create a bug if people remove the line break by accident.Special Case: Commenting Out CodeOne special case is commenting out sections that will be necessary in future releases or that depend on functionality not currently available. This can be amazingly useful but also a security risk, depending on what you’re commenting out. For example, don’t leave in any code that points to server-side APIs that are not available yet but could at any time be half-implemented. I’ve seen this before, where administrator links with the full unprotected path were commented out in the HTML.Still, commenting out can be very useful for debugging. One neat trick is the following:/

myFunction('do something');

// /This is now commented out. But by adding a single slash in front of the first comment line, you will uncomment the whole block and make it live.//

myFunction('do something');

// */This trick makes it awfully easy to toggle whole blocks.Sin #7: Optimizing For Machines, Not PeopleThe last sin is over-optimizing JavaScript based on the scads of information about performance that are available to us. You will find a lot of information on the Web about optimizing JavaScript for performance in the current browser environment. Notice that “current browser environment”—much information is browser- and version-specific and a necessary evil for now, but not necessarily in future. If your application is large or your website is high traffic, knowing and applying this information could make or break it. Again, though, a lot of this applies to edge cases that would have little impact on small projects and environments. This optimization does make it harder to maintain the code; some of the things we need to do to make browsers run fast on high-scale websites, such as writing out script nodes with removed, are downright nasty.When faced with the choice between making code cleaner and easier to amend, extend and understand on the one hand, and shaving two milliseconds off every page load on the other, I opt for the former. A lot of JavaScript optimization can be done through scripts. And rather than teach all developers on a project the ins and outs of JavaScript performance, an expert team (or even a tool) could optimize the code before it goes live.If you can do anything with machines to make the jobs of other machines easier, do it. The time has come for us to apply build processes as much to front-end code as we do to back-end code, instead of forcing ourselves to follow coding practices that go against the natural flow of writing code.Further ReadingI hope you’ve gotten an idea now of how to make scripts more useful, easier to extend and safer to use. For more information, please check out the following links:The Importance of Maintainable JavaScriptFive Things to Do to a Script Before You Hand It to the Next DeveloperPragmatic Progressive EnhancementPlanning JavaScript and Ajax for Larger Teams (presentation)(al)© Christian Heilmann for Smashing Magazine, 2010. | Permalink | One comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: javascript
- Tags:
- coding
- javascript
February 22 2010, 4:45am | Comments »