Collection of Tools & Tips to Help Your Web Development Work
Experienced web developers found always know a few tricks to make their work faster, better and easier. This way making their projects more efficient and generating more revenue in shorter period of time.
In the following I will present you few tips and tricks and will suggest couple of tools you can use as a web developer. Hopefully these will help you to enhance quality and professionalism in your work and make your life easier. Here there are:
- Two of the best online image editors are LunaPic and Pixlr, you can use both of them to crop, write text, copy, paste, create multiple images, put multiple effects and much more. You can use this website to create images for your website from scratch without needing to install or buy Adobe Photoshop or other similar image editor or suite of software.
- You can also check for errors your website using multiple W3C Validation Services such as the CSS one that checks cascading style sheets and XHTML documents with style sheets by URL, file upload or direct input having various options such as profile, warnings, medium and vendor extensions; the Markup one is checking HTML and XHTML markup of web documents having different options like character encoding, document type, list messages sequentially or group error messages by type, verbose output, show source, show outline, validate error pages, clean up markup with HTM-tidy and more.
- You can also find useful scripts at Codepen which is a playground for the front end web where you can copy scripts such as CSS Calculator, Abstract Hallway, and Range Slider with Feedback, Buttons, and Logos. You may enter your own script using HTML, CSS, and JS while you can live preview the result and additional settings are available such as HTML preprocessor, classes and much more. When you want to copy a script from here you should copy the HTML, the CSS and the JS scripts else they won’t work alone.
- You can found other nice designs such as 5 simple lists or menus, each menu being written in HTML and CSS and they are the following: HelvetiList, Thumbnail List, Standard Thumbnail Grid, Horizontal Menu and Big Numbers Ordered List. The entire code is available to copy, but you need to put them in the proper file so the CSS at CSS, the HTML at HTML and the JS at JS.
- Also regarding lists, sometimes you may have a bug where your text is taking up more than one line and the solution for this bug is to add at your CSS code: white-space: nowrap;. You should see that the spaces are removed and also there aren’t additional problems.
- For web development tutorials you should check the WordPress Tuts and Net Tuts where you can find video tutorials such as how to slice a PSD file and to convert it to a theme, and even free scripts, themes, and other important resources. There are available Tutorials, Courses, and Ideas.
- To see how responsive your website is, you should use Matt Kersley’s online responsive tester where you can see different device width like 240, 320, 480, 768 and 1024. Another welcomed responsive online test is ResponsiveTest where you can test your website for different devices from Apple phone, BlackBerry, Samsung, HTC, LG; tablets from Apple, Amazon, Asus, HP, Microsoft, Barnes and Noble, Samsung, Sony, Notebooks and other devices and producers.
- Sometimes you found a beautiful font but you cannot download it and use it for your website. With Fount, you can identify any web font by adding it at bookmark going to a site and then just press on the font you want to identify.
- A nice trick is to set a custom 404 error page by editing the .htaccess file and adding the line
ErrorDocument 404 /404.htmlNext step is to create a PHP or HTML 404 page and to start to create it using your desired design and functionality.
- To create some nice tabs you can use the jQuery EasyTabs plugin where a demo is available and where you found out that the script is compatible with Chrome, Safari, Firefox, Opera and Internet explorer. Additional demos have Twitter Bootstrap and jQuery UI Themeroller themes
- Toolbar.js is a script made in jQuery that creates tooltip style toolbars available and having features such as straightforward implementation with simple options, set of CSS buttons, icons, responsiveness, buttons, and animations.
- When you need to see the host of a website you should use W3bin where you just enter the domain name and you get the hosting company and other important details such as title, description, tags, IP owner, server location, server geo-location, domain IP, website favicon, binary IP, domain TLD, website load speed, Google Analytics ID, IP hostname and even stats regarding visitors.
- To check the page rank of a website you should use the Check Page Rank available by inserting a website and then pressing the check domain button – this tool might not be as useful anymore because Google has stopped refreshing PageRank, so the result will not be very accurate.
- One of the best tips and tricks are given by Firefox and chrome extensions that let you save a seen color, empty cache, live modify a code, measure the width and the height of an element or a browser-based FTP client.
- If you want to find out what WordPress theme is used by a certain website made in WordPress, you can use WTS where you can also find some installed plugins, but if the theme is custom you won’t find it. Once the tool detects your theme, you will receive the name of the author, a description and a link to the theme.
At the end, I can only suggest to use the internet for your advantage. Try to find tools, scripts and tricks to make your work more efficient. Saving few minutes on every task you do, can end up having more free time you can spend with your family or friends. Would also recommend joining developer communities such as forums and groups where people share their experience and help each other.
I really hope that this short collection of tools made your web development work easier. Let me know your thoughts in the comment section below.