8 Useful Resources for Front-End Developers

Syazwan Hakim — Thu, 23 May 2013 14:00:53 +0000

As a Front-End Web Developer, I deal with Cascading Style Sheets (CSS) and HTML on a daily basis a lot. Dealing with styling and html structure for cross-browser sites requires a lot of digging and investigating as there are always different several workarounds and techniques while encountering issues. Thankfully, there are always an abundance of online resources me and fellow programmers can turn to.

These are amongst my favourites:

Stack Overflow

Deemed as the Quora for programmers, Stack Overflow is a site based on the concept of crowdsourcing where a user posts a question and will be answered by other users who have the knowledge. Free with no registration, this is the site where I first consult because most of the time, I would find the solutions here.

Smashing Magazine

With several categories such as Design, Mobile, UI/UX and loads more, Smashing Magazine is packed with interesting articles based around web design and development – which is not only useful for experienced designers and developers, but also for newbies and basically anyone who is interested in web development in general.

CSS Tricks

Owned by Chris Coyier, a designer at CodePen, CSS Tricks offer a lot of cutting edge techniques for use throughout the development process.

JS Fiddle

JS Fiddle is an open source javascript editor which offers you a canvas to try new stuff and share with people without the need to upload to your own server. It is good for experimenting, which I highly recommend.

A List Apart

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Like Smashing Magazine, the site provides a lot of good articles regarding web development. I could spend hours and hours here going through every article.

CSS Community

CSS Community is a special community for CSS Designing Discussion on Google+. Among the topics discussed are CSS techniques, tips, tricks and many more. Functioning as a community, the members would also help you if you have any issues regarding CSS.

CSS3 Generator

Instead of writing all CSS3 stuff manually one line after another, which can be time consuming after a while – why not give it a try at CSS3 Generator?

Colorzilla

ColorZilla is a Mozilla extension that assists web developers and graphic designers with color related and other tasks. Pretty handy to speed up the development process.

Have you got your own list and would like to share with us? Feel free to add them in the comments section!

The post 8 Useful Resources for Front-End Developers appeared first on Stampede: the strategic design & technology company.

Super Firefox Extensions

Syazwan Hakim — Wed, 24 Mar 2010 13:13:21 +0000

As web developers, we are often caught in the situation where the things don’t go too well. Working or troubleshooting with normal HTML or table-base HTML takes times. To reduce time spent debugging (which inadvertently means more time spend writing ingenuous codes), I use Firefox extensions that greatly improve my web development experience and in turn, keep my sanity intact. Nope, can’t do without them.

So here’s a list of useful Firefox extensions that I personally vouch for.

Firebug

The must-have extension for web developer across the globe. If I need to choose only one extension, there is no doubt it will be Firebug. With the capability to inspect or edit HTML and CSS, Firebug has saved me countless time troubleshooting codes. Firebug makes it simple to locate an HTML element buried deep inside mountains of sickly green and blue font-colored code. All you need to do is right click to select “Inspect Element” on whatever element you need, be it text, image, border, and so on. Firebug will find that element for you right away, no matter how deep the element was.

Firebug can also help tweak your CSS to perfection. When you click inspect element, you will see HTML tabs in your bottom left and CSS tabs in you bottom right. CSS tabs will tell you everything about the element style. At the CSS tabs, you can edit your CSS and view them right away. Pretty nifty.

Get Firebug extension here…

Page Speed

Released by Google, the tool is used to specifically improve you page load time, though you’ll need Firebug to make this add-on work. It will analyze the performance of a webpage during load time and there are any prevalent CSS errors. It will also recommend redundant elements or styling that can be removed to improve performance without affecting structure or style. While very useful to reduce bandwidth and hosting costs, it is ultimately an effective benchmarking tool that helps you deliver the page faster to your visitor’s devices.

Get Page Speed here…

Web Developer Tools

An awesome solution packing so many useful tools meant for web developer’s use. Take for example the “Outline Tool” – viewing a website structure visually can not get easier than this. I use this option the most because it helps me troubleshoot block positions, especially when it comes to floating elements about with either relative, absolute, static or inherited positioning.

Web Developer Tools is also capable of real-time HTML editing. Gone were the days when editing a webpage means hitting the Dreamweaver deck (or worse, Frontpage), making changes to the code then saving the file before viewing the output on your browser. All you have to do now is to work the edit directly within Firefox, then if satisfied, copy and paste the modification into your web development application. Because the extension comes with options to hide images, css and javascript, we’re now able to test how resilient a web page is without the enriching elements.

Get the Web Developer Tools extension here…

HTML Validator

The HTML Validator tool ensures that your code is semantic and built according to the W3C standards. It will find error in your HTML based on HTML Tidy and OpenSP library originally developed by W3C. Once an error is located, it will be classified into one of these three categories: “error” (the errors that Tidy didnt ), “warnings” ( Tidy can fix automatically ) and “optional” (accessibility warnings ). HTML Validator will also provide you useful information about a particular problem such as the line in your HTML where error occurred, what causes it and steps required to fix and validate the error.

Get the HTML Validator extension here…

The Complete List

For a complete list of Mozilla Firefox extensions, give the good guys a visit on this page. How about you? What’s your favourite Firefox extension of all?

The post Super Firefox Extensions appeared first on Stampede: the strategic design & technology company.

developer tools Archives — Stampede: the strategic design & technology company