Code posts

Let’s face it, JavaScript hasn’t always had the best reputation among developers, and since the foundation of CoffeeScript back in 2009 this little language has taken the world of JavaScript developers by storm; mainly because it overcomes what some may say is the worst aspect of JavaScript: the syntax of its code.

Even though this is a new language you will pick it up really fast mainly because it’s reformulated JavaScript; it’s essentially prettier, simpler JavaScript .

When writing CoffeeScript don’t forget you are writing code that before being deployed is going to be compiled into JavaScript that follows best practices...

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers...

In the last post, we took an in-depth look at Google’s Panda and Penguin updates and how they have impacted on search rankings for businesses. Whilst we established that using black hat SEO techniques is likely to result in a site becoming penalized, we didn’t look at what’s known as gray hat SEO.

Gray hat SEO is, as the name suggests, somewhere in the middle of black hat and white hat. This means that whilst the practices may be perceived by some as being OK, for the most part they still break search engine rules and may result in losing rankings, or worse.

However,...

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll...

SEO has always been a tricky business, not only do experts have to spend time on researching keywords and following the best practices, they have to be prepared for the changes which search engines inevitably put into place.

Last year saw search giant Google make two major algorithm updates — Panda and Penguin — that saw many a site plummet down the rankings, as they were penalized by the new rules.

This was because the changes were implemented in order to rank poor quality sites, such as content mills and link farms, down and give more weight to sites that produce quality content.

This is carried out by making changes to how Google’s...

The most popular CMS out there, WordPress has a ton of great features; probably the best of which is its extensibility.

Taking advantage of that Lizatom Shortcodes provides literally thousands of shortcodes and countless shortcode combinations, to give you a simple, easy to implement solution for improving your site’s design.

Consequently,...

With every new revision of CSS, a plethora of new, exciting attributes come to light;  one of which being the understated display: flex approach.

The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).

In...

The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control.

Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for.

Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind...

I’m thrilled to officially announce that CodeVisually.com has been recently acquired by Webdesigner Depot and is now part of our growing family of sites.

If you don’t know the site yet, Code Visually offers a simple way to discover the latest web development resources and tools out there. We cover CSS, Javascript, HTML, PHP, frameworks, browser extensions, web apps and tools, CMS templates, CMSes, wireframing tools and a lot more.

The site has been online since 2011 and was created by Paul Andrew, the webmaster of the popular blog Speckyboy.com, and has been gaining tremendous popularity among web developers ever since. Developers visit it daily to read about all the latest tools and resources.

We’ve talked about ‘Contact’ pages. We’ve talked about the ‘About’ page. You know what to put on these pages because, hopefully, you’ve thought long and hard about it. And you know exactly what to put on the inside pages, because you have your content for those as well. You think you’ve got it all covered, right?

Think again! You have the opportunity to design and make use of your 404 error page. And quite frankly, you’re not a cool kid if you don’t have a super cool 404 page. Why do we go...

There’s an expression in advertising that goes “I know that 80% of my advertising isn’t working. I just don’t know which 80%”. The same logic applies to all forms of design, including web design. If only we knew which part of our page content, layouts and workflows were not working as well as they should, wouldn’t that be amazing?

It would seem like a godsend to know what works when it comes to user experience design, to have confirmed in harsh quantifiable data which of two layouts, elements, or routes is the optimum and this is the promise of A/B testing. It is a powerful tool, but it is not a panacea and over-reliance on it can not only blunt your...