Category Archives: Web Development

Fixing SASS –watch on OS X Lion

Posted on by
Reply

I have had problem with my SASS-styles not being compiled automatically when I change a partial file, so first I got help from @chriseppstein, Sass Core Developer via Twitter suggesting I should watch the directory instead of the file. Then I ran into this:

sass --watch public_html/css
>>> Sass is watching for changes. Press Ctrl-C to stop.
  overwrite public_html/css/style.css
/Library/[...]/fsevents.rb:27: [BUG] Segmentation fault
ruby 1.8.7 (2010-01-10 patchlevel 249) [universal-darwin11.0]

@chriseppstein suggested I try to reinstall fsevents, I did not get that to work so I searched some more, and found this resource suggesting running this command:


gem install fssm

When that has finished and you start watching a folder you get promted to:


FSSM -> An optimized backend is available for this platform!
FSSM ->     gem install rb-fsevent

So, just do what you are told


gem install rb-fsevent

Now it works. Thanks for helping. Just putting this down for people experience the same issues (and myself when I have forgot the solution)

Mumrik 2 – Work has started

Posted on by
Reply

For a long time (2 years+) I have had the intention to start working on Mumrik 2, a web framework and WordPress theme aiming at getting a good looking web up quickly. Today I started working on it. It will be a web framework mainly and the wordpress theme will be based on the framework. If you are interested, make sure you follow the project on Github:

https://github.com/hising/m2

Mumrik 2 is a follow-up to my old WordPress theme named Mumrik

If Developers Were To Try a Real Job – Carpenter

Posted on by
1
“How many hours do you need to build this interior wall, it is 2.40 x 5 meters. Just a standard wall with 2-by-4 studs and covered with plasterboard?”
“I don’t like plasterboards, I try to solve the wall problems with plain particleboard.”
“OK, good for you, but back to reality, I want a 2.40 x 5 meter interior wall with plasterboard. Can you do it?”
“Of course I can, but I wont, only idiots use plasterboard.”
“OK, why is that?”
“Plasterboard was invented 1938 as a solution to another problem, and it has come to my attention that it is not perfect in all conditions. You must use another solution in order to create a better quality. That is why I use glue and particleboard on steel studs. It is the smartest and best solution.”
“But that was not what I wanted.”
“You want wrong”
“No, I WANT A 2.40 x 5 meter interior wall with tree 2-by-4 studs and plasticboard, because that is the freaking standard!”
“Standards are compromizes, I DO NOT COMPROMIZE.”
“So, you cant do it?”
“I wont do it.”
“You cant”
“I can, but I suggest you go to India, hrrm, sorry Poland because they just build what you want with high skills and quality at a good price. If you want something expensive and not what you expected, please call me.”

Action is the Killer App

Posted on by
2

Everybody is looking for the killer app. Everyone wants the billion dollar idea, sell it to Google and sit back and just watch the money roll in. I got a question a couple a weeks ago on how much value I would be able to generate as a developer if I got to work 100% on developing new stuff together with one of the best guys in the industry. I have not worked for more than 4 hours focused the last couple of years due to enterprise architecture, meetings and family. My answer was:

If I get to work on something 100% for three months with skilled people I am sure I will be able to create a new religion.

It felt so absurd. Once when time was an infinite factor action was just something that came along. Now when time is finite and is competed for, a timespan such as three months is just absurd.

Whether you have 4 hours a week to focus or three months, there is only one hidden secret for creating great value and moving towards the billion dollar idea. Action. There are probably 1000 reasons for not being able to deliver the idea you have.  Below I have listed a few, just to show that it is all about mindset. Dont take the items to serious, they are just examples of the 1000 reasons people use in order to not get things done.

  • I need a designer! – Solution: Call one and give him/her percentage on the product if you dont have any money
  • The pricing model is not set yet – Solution: Pricing and income should not be the key elements for building a product from the beginning, user expectations and experience should. Go with the first pricing model you have in mind, if you dont have one in mind, start without.
  • There may be legal problems with the product – Solution: Yep, there may be, do your best to find out, start, this will only be a problem if usage picks up, then you can hire people for this, of course you should avoid things that are illegal to start with, like selling drugs, offer online poker to americans or similiar.
  • There may be scaling issues if we get 100,000 users – Solution: If you have 100,000 users that is a good thing, fix it when you have 100,000 users, IF it is a problem (choose your tech solution wisely)
  • I will only be able to support payments in USD, I would like to offer a solution that works for all – Solution: Offer only payments in USD, prioritize other currencies in your product backlog after launch
  • I need to get me a computer with Windows XP and Internet Explorer and test that everything works – Solution: Do it or use your users. There are a lot of users using Internet Explorer, they will contact you if stuff doesn’t work, or be a pioneer and dont give a f**k about user of IE8 and below. You should build the product according to some development principle such as accessible, mobile first, graceful degradation or progressive enhancement, so this shouldnt be a big problem.
  • I have written inline styles, inline scripts and run business code in the view – Solution: Hell yeah! The thing with products is that the user buys the product not the components it was built of. Forget it, or fix it when you have the time and money to fix it. Sometimes problem solving forces ugly solutions, hard fact, so forget it.
  • There are someone who does the same thing online already – Yeah, as there is only one brand of cereals or toothpaste. Do your thing, find your niche and execute it better than the competition.

The important thing with the list is not the actual problems or the solutions, but the thing that there is always a way to move forward when you run into trouble. Think action and get things done. It is better to release a product that fails than not to release a product at all. You are not that smart that you can think it all out. Get it out there, let people feel it. If they dont like it, build something new. If you still believe in your product, keep building, but release often in order to be able to fail early. Sooner or later your product will be good, and if it is good you will gain users. The big problem is that a lot of people has to move away from the idea that the idea is the killer app, when it is action. Any idea is the killer application with action bundled into its implementation. Now go and build what you love and users will show their love.

Redirect www to non-www on nginx

Posted on by
4

Logging this as a note for myself (and eventually someone else) so I dont forget it. Solves the problem of coexisting contexts www and non-www. With this all requests to www.* are redirected to * on the nginx webserver

server {

	listen 80;

	server_name www.domain.com domain.com;

	root /var/www/domain.com/public_html;

	index /index.html;

	if ($host = 'www.domain.com' ) {
		rewrite  ^/(.*)$  http://domain.com/$1  permanent;
	}

	location / {
		#whatever
	}

	location ~ /\.ht {
		deny  all;
	}
}

Update. According to Nginx the above code is a common pitfall, and should instead read:

server {
        server_name www.domain.com;
        rewrite ^ $scheme://domain.com$request_uri redirect;
}

server {

	listen 80;

	server_name domain.com;

	root /var/www/domain.com/public_html;

	index /index.html;

	location / {
		#whatever
	}

}

There are actually three problems here. The first being the if. That’s what we care about now. Why is this bad? Did you read If is Evil? When nginx receives a request no matter what is the subdomain being requested, be it www.domain.com or just the plain domain.com this if directive is always evaluated. Since you’re requesting nginx to check for the Host header for every request. It’s extremely inefficient. You should avoid it. Instead use two server directives like the example below.

Thanks to Johan as well who pointed me in this direction in his comments. However, if you use the first setup, I dont think you have to hurry to change it, it is almost certain of academic value on 90%+ of all nginx-setups.

My Upcoming Posts

Posted on by
Reply

Below you can find the upcoming blog posts on Frontendbook.com with a short excerpt for them. Please come with input if you find some of them more interesting than others.

jQuery Plugin Template

In this article I will show how easily you can write your own plugin template for jquery plugins. Having a template for this eases development and lets you get up to speed quickly. I will also share this template for Textmate so that you easily can use the best editor out there for writing your jQuery plugins.

Extend Google Analytics

In this post I will go into details on how you can extend Google Analytics to better suit your needs. We will look into custom reports, user types, tracking external links, tracking downloads and more. After reading this article you will be able to better track and analyze the behavior of your visitors.

Writing a SEO-friendly Widget

In this article we will go through the steps needed in order to setup a SEO-friendly widget. If someone is willing to put your content on their website, you should thank them, but you should also take the advantage to send some link-juice back to your site with the preferred keywords you are targeting. I show you how.

Piggybacking API-loading

Sometimes you will have to write some generic JavaScript code that can be used in a wide variety of environments, maybe on platforms not hosted by you (read our Writing a SEO-friendly Widget article) or maybe as script used in a plugin on some CMS or blogging platform. Of course you should make use of any of the nice libraries that exists (jQuery, Prototype, YUI, MooTools or Dojo) but at the same time, you should not distribute these libraries as a lot of websites already have them included, and if not better alternatives exists. I show you how.

The Zen of Internal Linking

Why is internal linking important? I see internal linking as way describing your content in a more dynamic and interactional type of pattern, adding usability to the user. Internal linking done right is very close to the first idea of hypertext or hyperlinking. Look at Wikipedia, they have taken internal linking to perfection. This article will discuss the philosophy and zen behind internal linking and discuss why and who users and search engines likes it.

10 reasons why Flash sucks

Posted on by
3

It just sucks

First reason is pretty easy. Flash just sucks.

It is not an open standard

Flash sucks, if it was open someone who actually know what they are doing could fix it. Now that is impossible.

It makes my computer sound like a tractor

As soon as I enter some website where they have had a 9 year old writing the code for their obtrusive ads my computer starts sounding worse than any mechanic machine I have ever seen or heard.

People do such awful things with it

Flash “developers” pollutes the web. They build things that hurt my eyes and make me angry. No one wants cool stuff, that is so multi-media. People want good services, build them with the right tools. Using Flash for building web is like building houses of papier-mache, it will look awful, be useless, fall apart and make the user angry.

Good Content are hidden

Lets say, hypothetically, that there would be a website where they had actually added some good content to a Flash implementation. It is impossible for me to find it using the Google on the interwebs! How could someone choose to build stuff in Flash?

It Breaks Conventions

Flash fucks up everything that a user has come to learn about navigation on the web when it comes to hyperlinks. Of course you can build that in Flash, hypothetically, but since there are no good Flash “developers” it just breaks conventions and frustrates users.

It takes too much resources

As there are no good developers developing on the Flash platform, all ads/crap-flash stuff kills any computer.

It is too common

It is everywhere and that makes it difficult for Google, MS and others to ignore it. The only company with a good approach is Apple who actually has started to show the web community that they do not plan to support flash anymore on iphone and ipad.

There are better alternatives

Build accessible HTML5-applications instead with graceful degradation. If you really need desktop functionality, for god sake, use some other solution than Flash. You should be able to use web technology for most of your needs, it is only a definition of support and accessibility for lesser browsers, something Flash “developers” have ignored anyway.

It is a private product

Adobe runs a business. They want to tie in as many users as possible. They do not care about the evolution of web technology. This is the main thing, they dont have to fix things as long as they can sell IDE:s and upgrade to new versions when they need better cash-flow.

Flash must die. It just have to.

TextMate and Transmit 4 Settings

Posted on by
2

I upgraded to Transmit 4 a couple of weeks ago and I really missed the functionality I had setup on Transmit 3 and Textmate where I could double click any text file in Transmit and get it to open in TextMate with the functionality to save it back to the server on save. In Transmit 4 it seemed I was forced to use the built in editor even though I was sure I set everything up as on Transmit 3. But now I finally solved it, so in order to remember it myself and help anyone who may have the same problem, here is the solution.

1. Go to Transmit >> Preferences

2. Choose the Files tab

Preference window for Transmit 4

3. Make Sure TextMate is a Custom Editor

4. Set TextMate to handle all file extensions

Textmate handling all file extensions

Add it with the plus (+) if not available and set File Extension to (*). If already in your list of editors click the pen and do the same.

5. Add the correct behavior

Now Textmate will handle all types of files, you just need to make sure that Transmit 4 know what to do when you double click a file. In the same window choose Edit in External Editor in the Double Click Action drop-down. Voila.

Choosing double click action for transmit 4

Together with the new Transmit Disk feature you will have a great and quick access to your externally located files.

Update:

Got an e-mail as a response from Panic on this:

Sorry for the confusion. We’re going to expose the “edit all in this editor” functionality in a future version.

–
xxx
Panic Inc.

Setting up a website with WordPress 3 in 10 minutes

Posted on by
1

A good friend of mine is setting up a website about watches and I think he has made a good choice of software for the site, he uses WordPress 3 for the development of the site. I think he takes on a good way for a non-tech to solve the evolvment of a website. Start with a lot of content, add functionality, create better searchability/findability and usability as you go. WordPress 3 will make it easy to create great landing pages for things such as barefoot running with garmin gps watches because of WordPress 3′s ability to support custom taxonomies and more good stuff will make it possible to gradually create a better user experience with websites such as my friends. With WordPress 3 WordPress is turning into a CMS-platform and less a blogging platform. And it is just a 10 minute work getting up and running, even the default theme Twenty Ten is looking great! Keep up the job Dave, and if you need help, call me.

10 Web Development Links for You

Posted on by
1

It has been a good week for all people working with web development, below I have listed some of the things I think stood out this week.

Google Chrome OS

GoogleChrom1When Google announced that they were about to launch an Operating System, a lot of people said that they “knew it” and some said that “they had to” and some reacted to that the OS was not built on Android. I felt like when I watched Sixth Sense with Bruce Willis, if I had looked close enough, maybe I could have realised that it was coming, but I was actually pretty stunned by the news that Google will enter the OS-market. The best thing from my point of view is of course the tools people will be using for building applications on top of it, plain web development tools! The Google OS is the Web Developer OS. I will write a longer post on Google Chrome OS later this week where I try to analyze how Google Chrome OS will change how we look at Web Develoment and Web Developers.

BBC Future Media Standards & Guidelines

BBC released their JavaScript Library Glow as Open Source and the library is part of a bigger web development strategy from – BBC Future Media and Guidelines.

Specialist Working Groups, with representation across the BBC, are responsible for considering industry trends and developments in their respective divisions, and defining appropriate standards in response to these developments.

From what I have seen, the documentation and size of the project can only be compared to the YUI-project driven by Yahoo.

Custom Taxonomies in WordPress 2.8

I believe that WordPress will become a big player in the Web Content Management area the next coming year. A lot of people see WordPress as a blogging platform only and complain about the code quality. I think that we are starting to see really good features such as Custom Taxonomies which opens up for very specific solutions built on top of the WordPress platform.

Web Form Validation – Best Practices and Tutorials

I have always liked the problem of client-side form validation on the web and wrote a piece on the subject a couple of years ago, best practices for web form validation, and last week I noticed a peek in traffic as I was linked (somewhat hidden though) from an article on Web Form Validation by Smashing Magazine. The link was to my form validation framework jForm who are in the idea-stage.

Interactive jQuery Selector Test

The guys at the jQuery Blog blogged about this interactive selector test script for jQuery. I like the idea, but would like to see a bigger selector (XPath, XSL, Regular Expression) as an add-on to my favorite editor TextMate

Online Regular Expression Testing

Like a natural law, you will turn to documentation when you need to write a regular expression. This online tool for testing regular expression are the best one I have seen yet, but as mentioned earlier, I would like to see a bundled solution not only for the web but also as plugin to different editors.

SlickMap CSS

Very niched design solution to problem a lot of designers, developers need to solve from time to time, how should we present our Sitemap in a slick way that do not force me to write HTML to scare the kids with. SlickMap CSS solves that problem for you. These small design solutions often becomes standard toolsets as both developers and users find it very handy to use them (Lightbox). Go visit SlickMap – A Visual Sitemapping Tool for Web Developers.

Google Page Speed

Google hired Steve Souders to work on Web Performance, he earlier worked as Chief Performance on Yahoo. Yahoo has done a great job with YSlow Firebug extension making it easier to find bottle necks and easy to solve performance issues on your website. Now Google launches a similar program and add-on for Firebug, Google Page Speed, I bet Steve has something to do with it.

Raphaël JS

This library helps you with your work online with vector graphics using JavaScript. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. The demos are really neat. I think that the good support for different browsers together with the ease-of-use API can make this a hit. It is about time we start seeing bigger use of non-flash vector graphics online.

JavaScript Regular Expression Library

XRegExp is an Open Source JavaScript library that provides an augmented, extensible, cross-browser implementation of regular expressions, including support for additional syntax, flags, and methods. Go check it out.