Category Archives: Featured

Weekly Best of – Selected Links

Posted on by
Reply

Auto Resize jQuery Plugin

I really like Facebooks implementation of automatic expanding textareas. This auto resize plugin for jQuery helps you add that neat usable effect to your forms.

Typography on the web

Smashing Magazine has a really good list of resources for web typography.

API for Location based on IP

I think we have only seen the beginning of location-based web-apps. This little GeoIP-API helps you geographically locate your visitors.

Screen Scraping with CSS Selectors

This Simple HTML DOM Parser written in PHP makes it easy for you to screen scrape content. For all jQuery and CSS selector fanatics out there, it will be great news for you that it supports CSS Selectors and it supports invalid HTML (if it wouldnt it would be pretty useless).

How to create a leaner User Interface

There is a good list on Webdesigner Depot about different techniques you could use in order to de-clutter your user interface.

Library Independent JavaScript

I found this article by James Padolsey interesting, because I think it is a growing problem. People tend to write jQuery, Prototype now a days, not JavaScript, this is ok for me, but when you are building something that other people will maintain and develop it may be interesting to try to find a development model that are framework agnostic. James has some examples in this article how to create an absctraction on top of your favorite javascript library.

Free Database for IP to Country

Maxmind has free databases for retrieving country and city from the users IP-address. I am using this on a number of websites and believe it is a very good tool for creating more usable web sites and easier to target (and split) advertising.

One Trillion Dollars

One trillion dollars is a lot of money. This article shows you how much it is in real life in volume. Amazing.

Do you have more links I should share or look at? Follow me on Twitter and share your favorite links.

2008 in Retrospect

Posted on by
2

In this post I will list a couple of things I think was interesting, significant or the bomb during 2008. In no way is this list full and I probably missed something such as the birth of a new internet empire or something, but the things listed below is stuff I remember and find interesting about 2008 and believe will make the biggest effect on the years to come.

Mobile Web

iPhone and the Android platform have changed the way people interact and expects of web based services the last year. We wrote a post about how iPhone and Android will change the web earlier this year and with Firefox as mobile browser coming up, we know that 2008 was the year mobile web, finally after a lot of years, made it to the crowd and online services.

Mature JavaScript Libraries

2008 saw no or very small happenings in the JavaScript library world. We saw a lot of great implementations on top of the big libraries but nothing revolutionary. The big things coming as I see it are jQuery 1.3, YUI 3 and hopefully someone who dares to take the libraries to a new abstraction level without bloating the experience of using the framework/library. One framework that have been good at promoting its name the last year is Dojo. I believe 2009 can be interesting when it comes to JavaScript as developers who traditionally only developed back-end solutions will move over to write more front-end solutions as the online libraries, services and tools are growing in numbers.

CSS Frameworks

No one likes CSS. Except the guys and girls who distribute and maintain CSS frameworks. One really good thing with 2008 was that we saw that CSS frameworks such as BlueprintCSS, YUI, YAML, Boilerplate and 960 grew in numbers and more people started using them. The higher abstraction level the easier to focus on the right things instead of things such as browser bugs etc. What are the next step? I believe we will see more interaction pattern based components that combine CSS, JavaScript and Markup and solves problem under the hood, graceful degraded, unobtrusive, SEO-friendly and better than you as a single developer can build them.

Bubblish

2008 was the year we saw strange services pop up each and every day, and you asked your self the question: “OK, I know the Internets are big and that, but who wants a micro-blogging-video-on-demand-service for chihuahuas?”. Together with the financial crisis and venture capitalists that start to think one more time before throwing money at someone faster than they can say “twitterish” we have moved into something that looks more and more like the dotcom-bubble 2000-2001. The big difference now compared to then is that now we actually have websites who earn money, and hopefully some people will still have a job to go to in late 2009.

Platforms and Tools

Not all platforms and APIs was released 2008, but this was the year we actually started using the platforms, tools and APIs out there. LinkedIn, MySpace, Facebook, Yahoo, Twitter and Google all opened up new ways to retrieve and manipulate data as third party developers. In 2009 we will laugh at services who do not expose a platform or API. It will look as stupid as not having a mobile front-end.

Google App Engine

Google launched Google App Engine in April 2008 and the main thing with it was the possibility to host and run you web application in the big Google Cloud. This opens up for the developer to easily build big scalable web apps. I believe we will see more of this in 2009.

Google Chrome

The Google Chrome Strategy is interesting and not fully understood yet, but years of discussion about the Gbrowser and Google pushing for Firefox ended in Google releasing Chrome. Chrome is not available for Mac and Linux yet, but built on WebKit and with an extremely fast JavaScript engine (V8) it will probably start gaining market share anyway. My personal opinion is that we do not need another browser, I would rather have seen Google going full time into either Firefox or WebKit rather than starting their own branch. In the long run we do not need more browsers.

Authentication Services

Facebook Connect, Friend Connect from Google and OpenID saw their big debut and usage in 2008. Even though OpenID been available for a while, it was just now we saw big use of such services. With 1,000,000 different social networks and other sites where you need to store credentials, the need for such services will only grow stronger over the years to come.

Twitter and FriendFeed

For micro-blogging sites such as Twitter and real mashups, such as FriendFeed, 2008 was the bomb. According to services such as Compete.com these services has grown significant during 2008 and nothing seems to stop them during 2009 (maybe the uptime for Twitter though ;-) ). Barack Obama used Twitter (even though I doubt he did it in person) as one important piece of his winning election campaing that sent him to the white house.

Personal Level

  • My then-wife-to-be gave birth to our second child in May
  • We finally got married in December
  • I turned down a really (really, really, amazingly) good job offer
  • I was about to build a great new house

Conclusion

2008 was an interesting year with ups and downs, both private and professional. I believe that 2008 finally showed us the web as a web of services where small dedicated services prosper over the ones trying to be a one-stop-shop for anything. The internet is more and more becoming a distributed UNIX-system with specific services doing the thing it does best, and it is up to the user (another service or a person) to do whatever he/she/it needs the system for achieving.

Happy New Year,
Mattias

WP-JSON – JSON Syndication for your WordPress Blog

Posted on by
1

I have just finished a very simple plugin that enables JSON-syndication for blogs running on WordPress. You can test the output on this blog.

http://frontendbook.com/feed/json/?callback=? (content-type:application/json)

Find out more

Why

  • I think JSON is a very powerful way to syndicate content and data
  • I think we should not need to write stupid proxies for aggregating feeds via JavaScript
  • Opening up your data is a good thing
  • I could not find a working example that was a plugin, all solutions I found was hacks in the actual source code of WordPress.

jQuery Example Retrieving JSON

[sourcecode language='javascript']
$(function(){
$(“body”).append(‘

Loading JSON

‘);
$(“#wp-json”).css({
‘position’ : ‘fixed’,
‘right’ : ’0px’,
‘top’ : ’0px’,
‘background’ : ‘#f00′
});
$.getJSON(‘http://frontendbook.com/feed/json/?callback=?’, function(json){
var result = ‘

‘;
$(“#wp-json”).css({
‘background’ : ‘#fff’
}).html(result);
});
});
[/sourcecode]

Download

Recession Reality Check for Web Developers

Posted on by
Reply

Ok, Yahoo is laying off people in big numbers, and every day we hear about the health of the world economy. I think it is clear to everyone, this is more than a sneeze, it is recession hitting us hard and fast all over the world. Of course this will become reality even for people working in healthy businesses, in comparision to Yahoo, where there are a business strategy, product focus and numbers going in the right direction. How do you adapt to the fact that things are actually going the wrong way, and things out of your hands may eventually decide wether or not you have a work to go to next month. People who were part of the dotcom-crisis know that even healthy companies got hit harder than they deserved. In this post I will try to discuss how you can handle recession and prepare for the worst and make all you can in order to avoid it.

Pragmatic, Pragmatic, Pragmatic

OK, now is the time to start being pragmatic when it comes to everything. Roles, tasks, platforms, frameworks, libraries or any other thing that could enable cat-fights in any web department. Ask yourself the question: “Am I a pragmatic person when at work?”. If the answer is Yes, could you be even more pragmatic in even more areas, in order to avoid unecessary (from a business point-of-view) discussions and fights. If your answer is No, start being more pragmatic, put feelings and opinions away and focus on facts, reality and truth. I know a lot of people who say they are pragmatic (everybody wants to be pragmatic) and at the same time say that we must spend 12 man-year on building an almighty architecture that will survive WW III, when business needs here and now could be solved with existing tools or with lesser efforts added to the project. In short: Start being pragmatic in your daily work, and stop saying you are pragmatic.

Focus on Possibilities

Recession opens up for good things. When times are bad, investors and competitors decrease their efforts and that is a possibility. When others are braking, you should increase your efforts in order to gain market shares or enter a market that are ultra-competitive during good times. As long as you are still employed or running your own business getting clients, make sure you invest whatever you can invest making sure that you are increasing your market shares and revenues. This sound easier than it is in real life. But in order to convince you: Apple, Microsoft and businesses such as Online Poker where born during other time of crisis. I am confident we will see new business-leaders born or growing big during the coming years. I am writing a post on what companies I think will go out of recession as winners, will publish it before Christmas. Remember: In bad times, brave people can build the platform for being the next winner.

It Aint Personal

If for some reason someone (your company or lack of clients) puts you in the corner where your job is at risk, or even worse you get sacked or have to shut down business, Do not take it personally, because during times like these even talented people are fired. Often middle-management has to fulfill a number of layoffs and meet some strange budget-requirement making their decisions somewhat numeric instead of human-resource-optimized. Often roles needed for running daily businesses are the ones that are prioritized to keep. If you do not do this right now, you are probably more likely to get sacked than the guy making sure that the SVN-server is up and running. But it aint personal (most of the time at least).

Business Argument not Techie Arguments

I do not like techie arguments when we have good times, and I am pretty sure no business owner likes them at all during bad times. Developers have to be better, in good and bad times, trying to put numbers on their arguments. This is important for two reasons: First, it is easier to convince the business owners with business arguments and second, if developers try to find business arguments instead of tech arguments, they will be better developers as they do understand business better and tech solutions are business driven and not vice verca.

Summary

We will face recession. Your company will adapt to this. Maybe they speed up, maybe they slow down. The important thing to know is that no one is safe but recession is not all bad, it also opens up for new businesses and possibility to enter competitive markets. One good thing to bear in mind during recession, as well as better times, is to try to be more pragmatic and business oriented not only in mind but also in action.

3 Ways To Use Twitter – spamming is not one of them

Posted on by
1

How do you use Twitter?

I am increasing my use of Twitter. I have been trying to figure out whether or not I like Twitter as a daily tool, and I am leaning towards a positive answer. As I see it there are numerous of ways you could use Twitter, and I am sure I have only started with the most basic functionality (tweeting my thoughts, posts and whereabouts). In this post I will try to discuss and figure out different ways you could use Twitter.

Make sure you do not miss something

When I wake up every morning, before I hit the shower, I make sure I check teletext so I do not miss out on anything important. It would be pretty embarassing coming to work and everybody are talking about planes flying into buildings or other breaking news I easily could have managed to collect. For other people radio or morning tv serve the same purpose, but when you have small kids, morning tv is Bob the builder, Shaun the sheep and not CNN. I believe Twitter serve as my niche radio or niche teletext. As long as I follow the people in my niche, all over the world, I will surely not miss even the smallest news in my niche. As someone who is looking forward to learn more, get the news when it happens and have input for blog posts, I really appreciate this part of how to use Twitter. Of course tools such as Thwirl and Twitterific helps you on achieving this.

Promoting Your Stuff

This is a tricky part. I have seen people mixing it up pretty good, not only spamming Twitter with links back to their blogs, but also managing to actually do 140 character analysis worth reading on their own. I think this is something you should gradually manage to find a strategy for, that suits you and the ones following you. It all boils down to personal branding, do you wanna be considered a spammer or someone who adds value to other peoples tweet-list. I have actully unsubscribed to a lot of people I had higher beliefs in before I started following them. Twitter is such a powerful tool, as soon as you say something it is availble on all your followers dashboard, that forces us to have some kind of plan on how we would like other to look at us. My strategy is to always promote my blog posts, because I believe that the people who have choosed to follow me may also be interested in reading my blog posts. On top of that I try to post link to resources I find valuable. In order to promote your stuff, I think it is important that you also add value to the network through interaction and actually respond to the people who you follow or are followed by.

Feeding Content into other systems

Twitter exposes all content via API:s, this makes sure you can build applications posting to Twitter, and applications reading from Twitter. We have seen a lot of applications for updating Twitter and some applications for searching Twitter (before Twitter had search). I believe that the next step is to use Twitter as a tool for updating external system, such as posting content other social networks (yes we see that today on FriendFeed), but actually being able to trigger specific actions on the other system. Because lets be honest: Twitter is only a tool for updating with short texts, we have only started to playing with the possibilities on what we can do with such tools. 140 characters are short for stories, but long enough for sending actions, events, triggers and commands to other systems. I believe that we will start to see more system accounts on Twitter where followers can run system commands by “replying” to the system account (@system Location:New York, Group:user1,user2,user3). Maybe I am way out here, but the tools we could build are amazingly interesting. Using Twitter like this is to see Twitter as a part of your application architecture. The benefits you get is that the tool is widely spread, easy to use and have a lot of API:s.

Conclusion and Analysis

Twitter has gained an enormous amount of users in a short time, as always, the geeks where there first, and a lot of people think it is a geek thing, but, I am sure that tweeting will, as blogging has, move from the geeks to ordinary sane people with bigger interests than programming and internet. When that happens, we will see an explosion of different ways to use Twitter, or twitter-clones, enabling new features for spreading whatever users are interested to spread quickly to a wide network of connected followers. The big questions are How do you use Twitter and How do you think Twitter will evolve?

Adding a header image to the Mumrik theme

Posted on by
20

A lot of people have asked us how to add a custom header image to a page using the Mumrik Theme so the page you are using will look something like this.

In order to achieve that page layout you will have to create a page (not a blog post), add and edit some custom fields and finally select the proper page template. We will guide you through the steps in this post

1. Create a Page

First you need to create a page, or edit an existing page.

2. Set Custom Fields Values

When writing or editing an existing page or post, you have the possibility to add custom fields with values specific for that post or page. These values can then be used by themes or plugins in order to achieve whatever the theme or plugin author have in mind. When it comes to the mumrik theme we use custom fields for layout on pages. Scroll down to Custom Fields in your Write Post UI and expand and add the fields full_image and puff where full_image should point to the image you would like to add (preferrably the image is 938 pixels wide) to your layout, within puff you can specify the markup you would like to be added in the semitransparent area in the bottom of the page.

3. Choose Page Template

When the custom fields are set, you have to choose the correct page template. Mumrik is delivered with a custom page template named Section First Page. Choosing the template is easy, all you have to do is scroll down in the Write Post UI and expand the section Page Template and choose Section First Page from the drop-down.

4. Publish and enjoy

When all this is done, all you have to do is publish your page, and you are going to have a brand new layout on your Mumrik-driven page.

Web Standards vs. Reality

Posted on by
4

Some people in the web development/web design/front-end development industry would rather be caught on tape stealing food from small children than admit they pollute the web with websites that do not meet standards when it comes to markup, stylesheet and javascript.

I break these standards on a regular basis, and apparently a lot of other people do as well, according to Opera, only 1 in 25 adhere to web standards, and the rest breaks them in some way. Why is that? Are standards not worth following? My answer is: it depends on the context.

In this post, I will not discuss things such as page size, design from content separation, behaviour from design separation, search engine optimization etc etc, as I believe that all of these can be achieved just as good not adhering to web standards, and that the areas have been dicussed for 5+ years. I would like to focus on things that not so many people talk about when discussing standards; How it affects revenues and the actual organization running a website.

The Business Perspective

Building a new Website / Redesigning a existing one
If you are building a new website, there are few reasons not following standards for css, script and markup. From a technical point of view, there are probably no arguments that are valid for not adhering to standards, but from business point-of-view, there may be some arguments that are valid. These arguments may be:

- Legacy non-standard CMS Software enabling quick time-to-market
- More time efficient development given the teams core comptence
- Alternative Cost, how much do we gain (in money, short and long term) from adhering to standards comparing to not have it as a business requirement.

Running an existing non-standards compliant website

This is where reality hit hard on standard advocates. Converting an existing non-standard-compliant website to a standard-compliant website can be a really daunting job. But it all boils down to technical solutions and a lot of hard work. The real problem is to find the argument, money-wise, to do it. As a businessowner you must ask your self the question: “Why should we use X nr of resources for moving to standards, when we could use the same resources for making our product better?” This is where people who thinks standards are a matter of life and death have to sharpen their arguments. Below I have listed different aspects of a websites function and lifecycle where it is important to understand the conflict between reality and standards.

The Knowledge Perspective

Not all websites are built by people who are educated in web standards. I think that a very common problem with web standards, are the fact that a lot of web-frontends are built by someone who knows their standards and run and maintained by people who do not care or have the knowledge needed to adhere to the standards that the site should support. The big question is again money. How much do we gain, educating people in standards compared to keep the speed up with the current knowledge?

The Web as API Perspective

This is where standards becomes important, in order to expose your web as an API, enabling mashups, this could be done using micro-formats, your own XHTML-schemes or just letting external users grab your content easily and mash it up on their side. Of course a valid XHTML-page will be easier to parse and load as an API, but on the other hand, screenreaders, search engines and other page parsers have been able to grab info even from non-standard supporting websites for a long time, there are even numerous of libraries that lets you do just that. When it comes to the web as API, I believe it is important to focus more on building a website that is API-ified when it comes to url-structure and parameters for responseTypes and locales etc. From this perspective, adhering to standards is of course important, but not adhering to standards is not the same as not being able to expose your web as an API. The only thing you do if you run a website that do not follow standards is making it a tad more difficult for your integrators to mashup your website.

The Accessability Perspective

Accessability and Usability, how do they relate to web standards? There is one argument that everyone is talking about all the time, screen readers. OK, this is close to the above argument. My belief when it comes to this is that a screenreader that can not read non-standard pages, will not be a big success, since a lot of websites, as stated above, do not adhere to standards. Of course a semantic web is easier to understand by machines, and will increase accessability and findability enabling better SEO. As the machines reading the web will become more sophisticated, issues like this is probably a smaller issue in the future, than it is now

The Maintenance Perspective

Some people say that standard based front-ends are easier to maintain. From one perspective I am obliged to agree, web standards fronts are more often separated semantically, css doing design, script behaviour and markup for content. But the separation has nothing to do with standards. One argument could be that if we use standards we do not have to maintain “hacks” in css, script and markup, but as long as you are using components and frameworks you should not have to worry about these things. If everything is a mess with no separation and no standards followed, there may be reasons to change this, if we can find a business argument for it: The cost for moving the web to standards and separation of markup, design and behaviour must be lower than the gains from maintaining a standards compliant product compared to the old solution.

The Code Quality Perspective

Another argument is that standards are better from a quality perspective, that is just noncence. You can build crap with cheap and expensive tools, as well as you can build crap websites with standards and non-standards. You can even build great websites with non-standard solutions.

Conclusion

Standards serve a purpose, they get developers to start thinking how they build things, and slowly they adapt to new patterns and processess building webpages, creating better semantics and separation of design, content and behaviour. Standards are good. But not following them is not the same as doing wrong. There are a number of arguments that may force us to build or keep maintaining products that do not follow standards, often the reason are economical. I believe that in order to be business-oriented all developers have to understand that sometimes the “best” technical solution is not good enough from a business perspective.

Resources

  • http://dev.opera.com/articles/view/mama-markup-validation-report/
  • http://www.sitepoint.com/blogs/2008/10/17/opera-just-413-of-webs-code-is-valid
  • http://dev.opera.com/articles/view/mama/
  • http://dev.opera.com/articles/view/mama-key-findings/
  • http://dev.opera.com/articles/view/mama-the-url-set/

NeeWee Theme Upcoming Features / Backlog

Posted on by
Reply
  • AJAX Comments
  • Drop-down menus on top navigation
  • Configurable navigation (show/hide pages)
  • Add helper navigation for generic pages such as FAQ, Advertise, Sitemap etc
  • Better layout support for top-30 plugins and widgets
  • Create better gallery user experience with fewer clicks and integration of ligthbox or similar
  • Integrate signup and password reminder into theme
  • Make sure bbpress looks good running on NeeWee
  • Set up different types of templates depending on page type and navigation level
  • Move some configuration from database
  • Combine Scripts and CSS and set cache headers if possible
  • User defined image/logo in header
  • Add possibility to add custom scripts and css files to header