Web Development Hub

hamburgers

Useful Tools

A collection of essential tools created for web developers

Stack Overflow
Stack Overflow - Web Development Hub - Useful Tools

Stack Overflow is a simple question and answer site. If you have any questions or issues with your code you can submit a question on Stack Overflow, typically you will get an answer very quickly from the many knowledgably people who are signed up. This certainly doesn’t just cover web development programs, it covers just about every aspect of computer programming. When you receive an answer which is helpful and well explained you can vote up or conversely you can vote down. Users can start earning badges and votes to award those who are helpful to the community.

This site is very similar to Yahoo Answers but with a particular focus on programming so the format may look familiar to many people. With around 4 million users you can always expect a speedy answer for those times you may become stuck.

Nibbler
Nibbler - Web Development Hub - Useful Tools

Want to see how your websites ranks on all aspects? By putting in your URL and clicking 'test' this tool analyses everything from users experience to marketing and then marking the quality of your code. It will also aim to point you in the right direction where it feels there may be issues to improve the quality and SEO of your site. This would be ideal when launching your website and looking for ways to fine tune the site to perfect it and make it as successful as possible.

This can be very to you because it also measures your site on aspects some people may overlook. This includes checking how mobile friendly the site is, how fresh the content is which is valuable to SEO, quantifying the amount of incoming links you may have and seeing how popular you are within the social media community. A 'pro version' can be purchased which will test a site for 40 more different aspects and this also compiles comprehensive reports to put all this useful data into one place.

Pingdom
Pingdom - Web Development Hub - Useful Tools

Pingdom cleverly calculates websites for their uptime, downtime and the quality of the sites performance. This will show a breakdown on how long each file took to load. The tool goes in to a great amount of detail of all areas of the loading page. This can be used to try and optimize the website further and pinpoint areas which may require rethinking. A websites performance and uptime is incredibly important if SEO matters to you, so this can be used in the case you may want to improve your sites SEO. Some of the biggest websites in the world like Twitter and Facebook have used Pingdom in efforts to make their respective sites more efficient.

All these features come at a monthly cost but could become invaluable if you have a website with potential as this could allow it to get to the next level. The main benefit to choosing Pingdom is it will mean you will be the first to know about any issue with you site/server as they will alert you to make you aware. This means you will be able to rectify any issue in a more productive and proactive manner, rather than trying to rectify issues when it becomes too late.

Liveweave
Liveweave - Web Development Hub - Useful Tools

The benefit of liveweave as a code editor is the fact that you can invite anyone to your project and you can then work together, this might be especially useful if you become stuck with something and require help. Other features include a handy Lorem Ipsum generator to save you time navigating to another website to input fake text into the editor and a color picker to easily choose the colors you would like to use. A great feature is the fact that once you have completed the work within Liveweave’s editors you can then create and download the contents as a HTML file at the click of a button.

'Live mode' can be switched on and off meaning the visual representation of what your coding will automatically update while typing, in some cases it may be easier to switch this off so this is a handy feature. As coding seems to be heading towards dark theme to improve a user’s readability this can also be changed to a light theme depending on your preferences. To ensure you are coding in the most efficient way there are four different default layouts to pick from to suit different situations and each window is very easily resizable.

Wappalyzer
Wappalyzer - Web Development Hub - Useful Tools

Wappalyszer is a browser add-on which you can use on Firefox, Chrome an Opera. When a website loads you can click on the app and it will display exactly what technologies/plug-ins are used on that website. It searches for content management systems, web servers, JavaScript frameworks, analytical tools and many more things. From the list it will produce it will then allow you to click one of the technologies it uses and takes you to their website. Wappalyzer has a comprehensive list of around 850 technologies so the chances of anything being missed when putting a site to the test is unlikely. Wappalyzer homepage quantifies all the technologies and puts it into a table to show everyone the most used technologies out there.

Once downloaded the icon sits within the browser to make use of this whenever the user may want to. Recent updates now mean not only can you find out what technologies and working behind the scenes on a website but now it also detects which version of the technology is being used.

Button Maker
Button Maker - Web Development Hub - Useful Tools

CSS-Tricks is an incredibly popular website, this is just one of many useful tools for developers to make use of. This is a simple button maker. Design your button the way you want it using the sliders and once you have your desired button you can click to reveal the code, you can then use this in your own project. This also includes the styles for the hover and the active states so the button will be interactive. There are also three fonts to choose from but of course you can use whatever font you want once you have the code.

The sliders they provide make the buttons very easily customizable along with the color picker which means making the button you want is very easy. The button doesn’t just has to be a standard colour, it will allow you to create gradient colours.

Feditor
Feditor - Web Development Hub - Useful Tools

This is a very clever online code editor. What's great about this one is from the top bar you can search for templates and other stuff. Getting started with jQuery or bootstrap links for example becomes effortless to allow you to start coding these faster. It’s also brilliant how you can very easily move the windows about to suit your style of coding.

One of the best features is the ability to load any websites URL into the tool, this will produce how the website looks like as well as separating the HTML, CSS and JavaScript into the editor so you can have a play around.

What's My Browser Size?
What's my browser size? - Web Development Hub - Useful Tools

What’s My Browser Size displays the amount of available space within the browser simply by just loading the URL. This can help towards designing a website and you can set the canvas size of your design software to mimic the available space value.

Then also may come in handy when finding out sizes for different devices whether it's phones, tablets or computers. By creating a design if you set the width to the same figure of the available width within the browser you can then simply insert that image into a HTML file to see how the design would look in a browser, this is a common trick amongst developers.