2016-09-28

Writing code, although being intensely fun (if you like that kind of thing and I do!), can also be a tricky business. Confusing error messages, code that seems to be working one minute but stops the next, Architecture that’s not suitable for the job it’s been designed for… all of these are common problems in the land of web dev and as a website owner, I’m sure you’ve come across at least one of these problems. So where can you turn when things go wrong? Luckily, as always, the internet has the answer.

This is a list of ten useful sites pertaining to web development. Some offer a fantastic community to help you out with queries whereas some will save you time with manual and mundane tasks.

So next time you’re staring at an error message that may as well be written in some alien language, trying to figure out how to save time on some boring task or even trying to debug why that plugin just isn’t working, take a look at these sites before you throw in the towel!



1: StackOverflow

I’m going to start off with the obvious ones. StackOverflow.com is a question and answer site for wed dev related topics. It’s also an absolute lifesaver for people trying to achieve something with web dev. 95% of the issues you will encounter will have already been asked and solved on Stack Overflow and the chances of one day becoming so great that you won’t need it is very slim. This industry changes constantly, meaning that which is correct today could be wrong or improved upon tomorrow with some new release or tech. Sites like this allow people to share their experiences and solve problems as a community.

Before asking a question on stackOverflow, make sure you have read the manual / docs for the tech you are trying to use, or be fully prepared to be met with cries of ‘RTFM‘. Also, make sure to search for the answer to your question before asking it as repeat questions without prior research are frowned upon. This also means you should be sure you have attempted to fix your own problem. The community won’t do your computer science homework for you but will help where it is obvious that you are trying to help yourself.

Be polite, provide good information with your question and be sure to mark the answer which solved your issue as ‘correct’.



2: Postman Plugin for Chrome

This isn’t strictly a site (although they do have a site) but the Postman plugin for Google Chrome is absolutely outstanding when debugging API calls.

The point and click interface allows you to enter a URL, specify your request type and some params and then call the endpoint. This is very handy for testing and parsing responses and allows you to play around without constantly needing to change code, save and rerun your app.

Once you have a working call that you are happy with, you can even generate the code in your preferred language for use in your app.

I can’t recommend Postman enough for working with API’s. It’s saved me hours of work in the years I’ve been using it.



3: The Manual (php.net in my case)

As pointed out earlier, not reading the manual can lead to not only annoyance when asking questions that would have been answered if you had, but it makes you feel a bit silly too. I don’t like feeling silly, so the PHP manual has pretty much become a bible to me.

You may not code in PHP and that’s fine – your language will have it’s own manual. You might code in something like C#, in which case your manual would be the msdn library.

Jquery and Javascript also have their own manuals, as does WordPress, and just about every other framework or language ever.

4: The Mailchimp Email CSS Inliner

If you’ve ever played around with CSS and HTML inside of emails, you’ll know that each email client can be different in the way it handles the task (and if you didn’t, you do now). Some (Gmail included) strip away the <head> tags, <style> tags or even both, insisting that the CSS in your email must be inline.

Now this isn’t a massive job for any new templates you build. It takes a bit longer to add inline CSS to each element you want to style but it’s not the end of the world. But what if you already have your email templates, complete with CSS inside of <style> tags? Do you have to go through manually and update each one? Thanks to MailChimp, no you do not.

MailChimps CSS Inliner Tool is awesome. It allows you to paste your HTML template, complete with <style> tags into it and out the other sides comes an Email client friendly version, complete with your inline CSS.

You don’t need to have a MailChimp account to use the tool but they are an awesome email provider and definitely worth considering if you’re in the market for one.

4: The Crontab helpers and Crontab Generator

Okay, I cheated. This is two sites but as they both pertain to Cron jobs, I’ll treat them as one.

Ever scheduled a Cron job? Ever scheduled multiple Cron jobs? Ever schedule so many Cron jobs that you forgot exactly what is running at what time, and all you have is a confusing line of numbers, slashes and asterisks to remind you? No? Just me then…

If you’re not familiar with Cron Jobs, a Cron job is a task which runs on the server at a given time. Scheduling these cron’s is done via a selection of numbers, slashes and asterisks, representing the months of the year, the days of the month, the hours of the day and the minutes of the hour. A typical cron schedule will look something like this: 5 4 * *

That exact syntax would result in the cron running at 5 minutes past 4am, everyday. As you can see, the syntax can be confusing once you start putting together some more complicated Cron schedules.

Luckily, you can use http://crontab-generator.org/ to generate the syntax for you. You can even pass in the path to the code you wish to execute and the site will generate the whole crontab entry for you!

If you’re trying to figure out what times your cron’s are currently running at, simply take the schedule syntax and paste it into http://crontab.guru for an instant explanation of the schedule.

To learn more about running CronJobs on Ubuntu, click here.

5: Down For Everybody or Just Me? (or the simpler to type http://www.isup.me/)

Have you ever been happily browsing the internet and then suddenly boom, you’re hit with a page that just loads and loads and loads? You pull up Google or Facebook and everything seems fine but this one site just won’t load. It leaves you wondering “is this just me or is everyone that is trying to get to this site getting the same?”

Well now, you can find out!

http://www.downforeveryoneorjustme.com/ allows you to enter a URL and find out exactly that. It won’t tell you what the problem is but it will confirm that either yes, it is just you or not, it isn’t.

This can help you to determine your next course of action. If it’s not just you, you can read the next entry in this list to find out what to do. If it is just you however, it may be worth trying an alternate browser or disabling any plugins that you may have activated since visiting the page last.

6: The Status Page (usually status.sitename.com)

So you’ve confirmed that the site you are trying to access is indeed down. Fantastic, but when will it be back? Why is it down? It’s at this time that the status page comes into play.

Most companies that offer online services have one (yes, we do have one in development and hope to release this to you in the next few weeks) and they provide an insight into what issues may be occurring on the site.

These pages are usually updated frequently with further information regarding the status of the fix and often contain some form of visual representation of the sites status, usually via graphs showing response times and the like.

7: Down-Detector

Down detector is another site that can help out with finding out more information regarding why your favorite site might be down. Down-detector provides a good amount of information regarding the status of many of the large online service providers.

It displays graphs for each service, showing the uptime for the site over the last several hours, a live outage map and even a ‘top 10 sites for being down’ feature.

I use down-detector a lot as it also allows for user reporting. A site may be up in 90% of the world but down for the UK. This site allows you to identify areas affected by an outage and filters the tweets of the company your are viewing in order to bring you the latest news on the status of the service.

It’s a fantastic site for monitoring the bigger online providers.

8 – Bootstrap

Have you ever heard of Bootstrap? Have you ever used it? I can bet you have, even if you didn’t know about it! Bootstrap is used in many places nowadays and provides a fast way to start building a responsive website. It comes with a pre-built theme, which allows you to get a responsive site which looks awesome, up and running in no time at all.

It was created by the guys over at Twitter (just one of many fantastic bits of Software these guys have done) and is extremely well documented and user friendly.

Using Bootstrap is very easy. It’s main concept is that each page is divided into a grid – This ensures that content lines up correctly and shrinks and expands based on screen size. It requires Jquery to run and you can host the Bootstrap CSS files either locally or via a CDN.

Bootstrap is one of the first things I install when starting a new project.

9: Font Awesome

Coming in next to Bootstrap, and as an accompanist to the fantastic Glyphicon library is Font Awesome. Font Awesome takes these icons to the next level, providing for free, around 6.

Installing is again, very simple. Just a few CSS sheets and a few Font files and you’re good to go! Using the icons available in Font Awesome can really enhance the look and feel of your site.

Be aware however that some ad-blockers may block the icons when using the “Remove Social Media Buttons” functionality, so be sure to test your site (which you were going to do anyway, right?).

10: Pixabay

If you’ve ever been looking for a certain image for your site, you’ll know that most are protected by copyright law and cannot simply be copied over to your site without the purchase of a licence or a backlink to credit the creator.

This is okay in some instances but if you’re trying to maintain a professional look to your site, having backlinks everywhere can make it look amature.

Pixabay is a collection of images which are available for use, free from the hassle of licences. All images on Pixabay can be used without any form of crediting (though you can buy the creator a coffee using Paypal, which is only polite if you’re using a substantial amount of their images).

The signup is quick and easy and can be completed via Facebook. Images are high quality and can be downloaded in a variety of sizes. I use Pixabay a lot when trying to fill my site with attractive images.

To Conclude…

That rounds up my selection of 10 useful online resources. I hope it helps you to save time and effort when creating your website and you find it useful.

Do you know about any useful sites that I haven’t listed? What are they and what are they for? I’m super eager to hear about any solutions you may have that I may not. Feel free to let me know in the comments.

After all, sharing is caring!

The post Ten Time Saving WebDev Sites Everyone with a Website Should Know About appeared first on MoreNiche.

Show more