Learning to Write Code that is Good Enough

When you go through school you’re always taught to do your best, to try to make the thing you’re working on the best it can possibly be. When it comes to software we naturally want the same – we dream of something that’s fast, accessible, responsive and free from any bugs. It’s just not realistic.

Need for Speed

In the real world of web or software development, speed of development is key. We have to deliver functionality by deadlines. This might be because users need it for a fixed date, or maybe you need to move quickly to make the most of a gap in the market, or you need to beat your competitors or keep pace with them – there are many reasons.

Let’s say we’re adding a new feature to search and filter product data. We’ve estimated that the full feature will take 4 weeks. However, we can deliver a very basic search box that just matches all product text within a week. We can actually deliver about three quarters of the value to the end user in one quarter of the time.

The need for speed means that we can’t take our time and build the perfect solution. We need to be fast and that inevitably means compromising and cutting corners. It’s OK to release something that isn’t perfect. It’s even OK to release something with known bugs.

Release Early

By getting the code into production and letting users try it out earlier we can use their feedback to steer the rest of the feature. Maybe after the first release we realise that this is all they need and we don’t need to build the rest? Maybe it’s too slow in the real world and we need to go back and improve this before adding more complexity? Maybe the known bugs are not quite what we thought they were?

This is general agile development, starting simple and building in iterations, and is largely about good planning and communication. We can apply the same kind of thinking to the coding.

Coding Shortcuts

Can we get away with a hard-coded list or a static JSON file for now instead of creating a new database table or API?

Can we select defaults on dropdown lists or radio button groups so we don’t have to add required validation?

Can we use browser storage rather than writing to the database?

Can a form just post key-value pairs to an email address to begin with while we’re working on the database?

We don’t need polished design or animations until we know the solution is right.

I’m sure you get the idea. Not perfect, just good enough. Go fast, hit the deadline, listen to feedback and improve it when the pressure’s off. If you’re releasing something that you feel is risky do it under a ‘BETA’ or ‘Experimental’ flag so users know what to expect and it doesn’t damage your reputation.

Developing in Codepen

A look at why and how I use Codepen for front end development work.

Background

I work on a web app with a development team. We use AngularJS with a RESTful API. My role is looking at the design and UX side of things and scoping out how a new feature will look and behave in a web browser, or, I should say, in various browsers at different screen sizes.

I generally do my work up front. I’ve always been a design in HTML and CSS kind of guy. To me, with my skill set, working in a graphics editor takes as long as coding it so it makes little sense for me to do the work twice.

Until recently, I’ve been using static HTML and then another developer has added the binding and data. Where the feature is on a new screen I can go a step further and create a dummy data object, to represent the data returned from the API, and actually do the binding as well as create any custom behaviour.

Working on existing screens has been much more difficult. It’s almost impossible to add new data, binding and behaviours without breaking the existing code. To use a dummy data object I need to intercept the real data retrieval and replace the object, which stops the page working when wired up again. However I work things, I’m having to check in code which is not releasable.

A new way of working

I’ve started using Codepen to abstract away the new feature. I set up a new pen, import any existing dependencies and then create the HTML, CSS and JavaScript for the new feature in isolation.

This means that the original project code does not get touched and broken. As the next developer brings in any model/schema changes he/she can bring in my front end code so we don’t have any breaking check-ins.

By importing the dependencies – JavaScript libraries, CSS – we avoid any clashes or inheritance issues and additional work trying to integrate my code.

It also means I can give the new feature my full attention without having to use other parts of the screen, for example, if I’m working on a modal window, I don’t have to go through the usual page processes in order to call it.

I’m using Codepen in the way it was intended, as a front end playground, an environment where I can experiment with different ways of doing things. The results are displayed in a frame, updated instantly as you type, which makes working much faster – no more manual refreshing or rebuilding.

From what I’ve described up to this point, this abstraction could be done by making a copy of the page but copying the HTML page, the CSS and JavaScript and changing all of the references between these files is quite a headache. Believe me, I’ve been there enough times.

One of the massive advantages of Codepen for a designer is the ability to fork pens, so you just hit one button and you’ve got an exact copy of the pen you were working in, making it very easy to create a few variations of a design.

As each pen is available on a public URL it’s easy to share designs with colleagues or clients and they can see a working prototype – much better than a static screenshot. It also means that links can be embedded in documentation. Personally, I feel that now web animation has become mainstream, it’s important to be able to show how screen elements transition between states, how things appear/disappear and demonstrate where the user’s attention is drawn through processes. Static screenshots just don’t cut it any more.

Final point. Designing in the browser with work stored in the cloud is awesome for design. I could be out and about and suddenly see some inspiration for something I’m working on or get a new idea. Rather than hope I’ll remember it, I can quickly create a new pen or fork an existing one and add some code or notes there and then from a phone or tablet. I don’t have to hope I’ll remember or wait until I’m back at my desktop. It’s exactly what the web should be.

Introducing… Dinowebs.net

DinowebsAs a web developer and programmer I’m always on the look out for solutions to little problems. How do I do that? How can I make that do this without X, Y and Z happening? You get the idea.

My first port of call is always Google. The way I see it is that I’m unikely to ever have a technical requirement that somebody else hasn’t had before. In fact, it’s highly likely that hundreds, even thousands of people have faced the same challenges. By using the right search terms on Google I can usually find the answers to my problems. This inspired me to build a technical blog. It’s my way of sharing what I’ve learnt and, hopefully, helping someone else out.

As well as trying to help others it’s also tremendously useful to me. Every time I overcome an obstacle I write about it and provide the solution giving code examples where I can. It’s very handy to just be able to just come back to it rather than try to remember things that I’ve done in the past. I also use the site for setting up links to resources I like and use. Again, it just saves me time looking for things.

My site is called Dinowebs, http://dinowebs.net. The site covers all sorts of coding and web development subject matter. Please take a look.

My website is 5 today!

Happy 5th Birthday!My website, www.chris-smith-web.com, is 5 years old today.

I registered the domain name and started building the site on 15th June 2004. This has made me all nostalgic so I thought I’d take a quick look back over the last 5 years and how the site and business has changed in that time.

I registered the domain with a company called 123-reg whom I still use to this day. They provide good value domain registration with a nice simple control panel. I also hosted my first site with them though now I have moved on, mainly due to the more advanced technologies I now use.

website in 20042004

My first design was fairly basic but, looking back on it now, I still like its simplicity and clarity.

Although it was a new site it managed to bring in some good enquiries and before long I was off and running.

I can still remember my first enquiry and the first website I built for a client very clearly.

website in 20062006

As the “cheap web design” market got more and more competitive I needed to redesign the site to try to improve its search engine rankings. I tried using an individual web page for each individual service I could offer.

With hindsight, I think what I gained in web traffic I lost in conversions as this design failed to impress web development seekers.

website in 20072007

Another year on the web was changing and Web 2.0 technologies were becoming more common. I decided I needed a different design with a fresher, more vibrant feel. This design change saw a marked improvement in my enquiry levels.

I also started using server side technology to create more interactivity.

Today

My site now uses a blogging model and has articles as its centre rather than just the static pages about my services. This model is strong on the search engine side and my visitor numbers are higher than ever. It also means I get to write about the things that I’m passionate about – web development and online marketing.

The Future

I’m just in the process of launching a new site focused on Online Marketing. Please take a look at Chris Smith Marketing, www.chrissmithmarketing.com.

Need a website? Confused about what you need? Read this.

Here are the real basics of starting a website in simple, jargon-free, easy to understand English.

Web ServicesHow a website works

A website is a collection of files (text, images, video, etc.) on a computer made available to the public. When someone visits a website files are copied to the visitor’s computer for them to view. Each web page needs a unique address so that people can find it.

What do you need?

To run a website you need three things:
1) someone to create the files for you,
2) somewhere to make them available and
3) a nice name to make it easy to find.

The process of creating these files is known as web development.
The service of making them available is known as web hosting.
The name for a site is known as the domain name.

These three elements are available as separate services from different suppliers or can often be bought together from one.

Web Development

You need the services of a web developer or web designer. In real terms when you’re searching for someone to prepare a site for you there’s not much difference between the two but a designer is possibly more concerned with the site’s appearance and style whereas a developer is more focused on how people use the site.

Web Hosting

To make your site available to the public you need it to be hosted. Web hosting companies have special computers designed for this purpose called web servers. In order to put your website onto the web server and make changes to it your web developer will need access to your hosting account.

Domain Names

To give your site a nice user-friendly name you need to register a domain name with a domain name registrar. There are lots of sites that offer this service including a lot of web developers or hosting companies. The domain needs to be set to point visitors to your hosting account. Instructions of how to do this are usually provided by the hosting company or a web developer will do this for you.