Archive for the ‘Web Development’ Category

Make HTML code WordPress friendly with HTMLtoWordPress

Did you get confused after reading the title as to why one would need to make such a conversion at all? We were too. But as we thought about it and explored the HTML to WordPress tool, we were not only pleasantly surprised but also thoroughly convinced that the conversion might actually be a good idea. Think about it: creating websites in HTML is always easier. However, for it to be monitored and maintained by someone who is not a developer, it is easier to do so in WordPress. WordPress is fairly intuitive, and easy enough to be taught to someone who comes from a non-technical background.

Of course, people have been transforming HTML code to WordPress files since forever. However, before the introduction of tools like HtmlToWordPress, the conversion had always been messier. All files had to be organized correctly and referred to during the conversion. Images and media always took tedious efforts in the conversion. Moreover, you couldn’t dream of attempting to do any of this unless you ate, lived, and breathed coding. Conversion from HTML to WordPress was a strict no-no for those who didn’t have a sound technical background.

But now doing so is a matter of a few clicks. Let us show you how.

Switch from HTML to WordPress easily

While coding in HTML is easier, the main benefit provided by WordPress is its Content Management System. If you have clients with unique requirements for their sites, you can fulfill their requirements by creating web-pages in HTML and then hand the pages over to them as WordPress PHP files so that they can maintain the site with ease. WordPress will give them access to plug-ins and other SEO tools. Once you convert your HTML site to WordPress, you have all of the following advantages and more:

  • Easier maintenance
  • Plug-in functionality
  • Social media integration
  • Easier Updates

Here’s how HtmlToWordPress can help you extract these advantages:

  • Upload HTML files and pick a theme; leave the rest to the tool. No coding required
  • Free Live Preview of how your website will look with the theme you picked once conversion is complete
  • Compatible with any HTML based website and any HTML editor / framework
  • Automatic content and image editing capability through Simple Live Editor
  • Ton of tools and frameworks supported
  • Time Saving since it takes only a couple of minutes
  • No learning curve involved

This technique of transforming usual HTML pages into a fully functioning WordPress website is not just time-friendly but also pocket-friendly. Programmers would probably charge you hundreds of dollars for this and also take up a lot of your time. It really is an obvious choice.

This is how the tool works

The actual conversion process of your HTML pages to a WordPress site has never been simpler. Visit the tool’s homepage and you’ll see an area where you can drag-and-drop the zipped folder containing your HTML pages. That’s all there is to it. The encouraging message of getting to “see a live preview in 15 seconds or less” is more than convincing to at least give the application a try.

We tried uploading a small dummy website to the tool and here were the good and bad points we faced:

  • Our zipped folder contained 4 html pages, 1 CSS file, 1 JavaScript file, and a folder containing about 30 images. It took the tool under 8 seconds to analyze the folder which was pretty decent.
  • Our home page file wasn’t named index.html (that’s the default name for most HTML based websites) and the tool wasn’t happy about it. It displayed an error message saying we should rename our home page file to index.html (with a lowercase “i”) and then try the upload again. This was a bit strange since the name of the home page file shouldn’t ideally be a show-stopper, but we complied. Although that did involve a couple of iterations to match the case and change every occurrence of the file name in our code.

Once our files were converted we could see a live preview of our website inside the tool’s editor. It is worth mentioning here that the preview doesn’t add any glitter to your files. The live preview will show you a very basic website if that’s what your HTML files contain. So don’t expect anything flashy if you haven’t coded for it.

The top right corner of the editor holds a “Download Theme” button with which you can download the WordPress files created after conversion. This is also where you’ll be required to pay for tool usage, so you’ll be directed to the shopping cart.

Pros and Cons

The pros are quite straightforward:

  • Any HTML framework and editor works.
  • Images, style sheets are all referenced correctly.
  • Both content and media can be edited directly from the Live Editor.
  • Free preview after the conversion and before checking out your cart.

The cons should also be clear from the description above:

  • The dependency on the home page file’s name (index.html)
  • Quite a basic WordPress theme with no options to choose any other theme
  • The maximum file size supported is only 100 MB
  • Converting an HTML website into a WordPress one was never this easy: htmltowordpress.io/ @HTML2WP_app via @supermonitoring

    Tweet this

Final Words

For us, the deal of converting an entire HTML website to a WordPress one at $4.90 is too good to be true. Perhaps the creators might increase the price once it becomes popular, but for now we are hoping to milk the opportunity and get as many sites converted. The pricing is great, the FAQ is detained, and the interface is more or less self-explanatory. With a few acceptable glitches, this is one of the few apps in the market that allow such a conversion.

Bootply – Drag & Drop Bootstrap Editor

The world is going gadget crazy. From buying groceries to designing projects to making travel bookings, everything can be done with a few taps on your mobile device or tablet. No wonder web-apps and websites are “the thing”. But as users of web-apps and websites, do we pay attention to how intricately and closely they’re built? Do we ponder on how many hours of work, research, monitoring, and testing goes into building the perfect website or web-app that you and I can use to make our lives simpler each day? Not really.

Well, application developers really toil to build those sleek, responsive, marvels of technology that we call “apps” and are happy to use. How great it would be if someone did something really nice for those application developers? Something that would ease their workload and simplify the whole application building process? Actually, that’s exactly what the makers of BootPly have done. They’ve transformed the way web-apps are built by utilizing one of the most popular frontend frameworks, Bootstrap.

Sweet, isn’t it!

BootPly – The fun Bootstrap editor and builder

For those of you who are new to the word “Bootstrap”, it is a free and open-source frontend web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Although Bootstrap is gaining immense popularity owing to its features, there is a slight learning curve attached to it and beginners might find it a tad uphill.

But BootPly is what makes working with Bootstrap fun. It lets you play around with Bootstrap while allowing developers to leverage their code repository, snippets, examples, and templates. The platform offers Bootstrap developers a drag-and-drop visual editor which they can use to rapidly design and build web-apps. Moreover, it is integrated with other popular Bootstrap plugins, micro-libraries and frameworks like FontAwesome, Bootstrap Select, Angular JS, Isotope, Google Maps, and others.

Some of the best features of BootPly are:

  • Facilitates hand-coding with a JavaScript HTML and CSS editor
  • Includes a visual drag-and-drop interface builder for rapid prototyping
  • Gives access to 1000’s of Bootstrap examples, free themes, templates and layouts
  • Provides a searchable and shareable code repository
  • Enables you to mingle with a reputation-based collaborative community

There’s nothing flashy about BootPly and that’s one of its strongest points. It’s simple, to-the-point, and efficient.

Using BootPly

There are a number of entry points into BootPly. We’ll give you a sneak peak into each one of them. Land on the tool’s homepage and you’ll find the following clickable options:

  • Hand-coding
  • Drag-and-drop
  • Play Now
  • A button at the bottom called “Get Started with BootPly Now”
  • A link at the top to “Boot Bundle”

Hand-coding, Play Now, and “Get Started” redirect you to the same page – a screen with multiple panels to start coding. There are dedicated panels for JavaScript and CSS and one for the main code. You’ll find a preview panel at the bottom and helpful links in the left sidebar. Start writing code using the options to use Base CSS, Components, Icons, etc through various drop-downs. Once your code is ready, you can execute it using the “Run” button in the file menu. The result of the execution will be displayed within the Preview panel. You can also “Save” your code temporarily using the save button in the file menu but to save the script for good, you’ll need to Register.

To register, click on the “Login” button on the top-right corner of the screen. Provide required details and sign up. The tool doesn’t ask for any credit information at signing up time. At any point of time if you feel the working panels are too small to code comfortably, you can switch your viewing mode to ‘Full Screen’ using a button for the purpose given just below the CSS panel. Similarly, to view things as they would appear on a mobile / handheld, use the appropriate ‘Smartphone / Mobile device preview’ button.

You can code, execute, test, delete, re-code, correct, and repeat everything numerous times with BootPly. No strings attached. That’s why it’s called the Bootstrap playground. However, once your final code is ready and you wish to save it to your machine through a convenient “Download” button given below the CSS panel, you’ll need to purchase an Upgraded subscription of the tool.

Another important aspect to take note of is that to simply code, execute, and test you don’t need to login. However, to use BootPly’s drag-and-drop visual editor, you do. So in effect, to see the real power of the tool you must register.

  • Drag & drop #Bootstrap components with @BootPly bootply.com/ via @supermonitoring

    Tweet this

The Ups and Downs

Needless to say, there are several plus points with the tool. And honestly, it was quite hard for us to find a fault with it. As a matter of fact, it makes app development using Bootstrap so much fun that even if there was a con, we’d probably ignore it.

Final Words

We loved BootPly! If you’re a web designer who invests hours of their time into application and website development, you should definitely check it out. You’ll be able to use most of the tool’s features for free which makes it all the more awesome.

Code, Test & Learn with JSFiddle

Ever heard of the term “Code Playground”? If you like software programming, have an insatiable need to learn, keep monitoring the web for code editors, and like to play with code snippets, that shouldn’t be a new term for you. A “Code playground” is a website, application, or tool that lets you practice and learn by offering a space to write and test code. Think of it like a calculator – you punch in an equation and can view the result instantly to verify your own calculation and make corrections if wrong. Now apply the same concept to an online code editor that lets you type in code, save it, execute it, and also view the results.

There are a number of online tools that let you test your code and improve it to hone your programming skills. Herein, we’re focusing on one of them that lets you do all this and much more. We’re talking about JSFiddle, one of the most popular code playgrounds available online today.

jsfiddle

JSFiddle – the fun online code editor

JSFiddle is a name most JavaScript developers recognize. It lets coders work on applications, review code snippets, share code snippets, collaborate and do more. And don’t go by its name; the tool lets you work with JavaScript, HTML, CSS, as well as any combination of these three web technologies. Create your code snippets in these languages in their respective dedicated windows and hit the “Run” button to see what your work results in, in the “Result” window. That’s how simple it all is.

JSFiddle is often credited as being one of the first online code editors or “code playgrounds” that created an example which many others followed. Here’s an overview of the tool’s main features:

  • The tool includes separate, adjustable sections called “panels” for CSS, HTML, and JS, and also an execution panel
  • If you log into the tool, you can debug your code snippets called “fiddles” remotely
  • It executes your fiddles based on an inbuilt collection of frameworks
  • Lets you collaborate in real-time with tracing
  • Allows you to update / publish your fiddles privately or publicly
  • Enables referencing to files from within your fiddles by adding them
  • Allows you to invite team members to join your session and see you work. They can also give their inputs via a live chat
  • The tool also includes a code beautifier that indents and aligns everything
  • All code is color coordinated and the panel gives syntax error feedback on missing closing tags and misplaced elements

Additionally, users can create their profiles in the tool and can save and publish their fiddles with their profile names. All collaborators are also given profile names and images to add a little “fun” factor.

Working of the tool

As already pointed out, the tool is very simple to work with. It doesn’t require you to have any prior experience of HTML, CSS or JavaScript, though it is good to have some before you begin.

Go to jsfiddle.net and you shall see the main screen divided into 5 sections – left hand panel that lists down some options, 3 sections dedicated to HTML, CSS, and JavaScript respectively, and a results section. There will also be a main menu that includes various buttons to manage your code once you start writing. If you wish to work with a particular library from any of these languages, you can click on the settings icon and the top right corner of each language’s panel and select the library you need. Once all of this is done, you can begin creating your fiddles.

Click inside each panel to initiate the cursor and start writing. Once all your code has been written (in one or two or all panels) hit the “Run” button from the main menu to view the results in the Results panel. You can click on the “Tidy” button to align everything in its right place and choose specific settings that you wish to work with by clicking on the “Settings” button in the top right corner of the screen.

jsfiddle1

To invite team members and start collaborating, click on the “Collaborate” button from the main menu. You should see a pop-up explaining how you can send your session’s link to your team. Also, a column with some options should appear when your collaboration session starts. These options include profile editing, adding members, a microphone to activate voice chat, and a message icon to start a live chat. To save your fiddles, you’ll need to create an account with JSFiddle and sign into it. Signing up is quite straightforward and should take only a couple of seconds.

Pros VS Cons

Now comes the time for weighing out JSFiddle’s positives against its negatives.

Positives include:

  • Online code editing along with collaboration feature
  • Easy publishing of fiddles, both privately and publicly
  • Creating dummy AJAX requests with the tool is very easy
  • The tool is totally free of cost

You can also have a quick look at the tool features to know more about its pros.

Negatives include:

  • Some users who’ve worked with other online code editors can argue that the tool isn’t quick enough is displaying results
  • There’s no way to find out who has forked your fiddle
  • If you wish to work with only one or two of the technologies, there’s no way to hide the remaining panels.
  • Create and Execute HTML + CSS + JavaScript live within one tool: @jsfiddle jsfiddle.net/ via @supermonitoring

    Tweet this

Bottom Line

JSFiddle is honestly is a good place to practice and hone your programming skills. You don’t need to install anything, you don’t need to pay anything, and you don’t need to learn anything before starting. There are only few tools which let you do all these.

Find code snippets easily with SearchCode

Software programmers and hackers often need working code snippets to either get better at what they do, or to test their programs. GitHub, Bitbucket, Google Code, Sourceforge, etc. are some popular websites that let users create and index large databases of working code. Software engineers keep monitoring these websites for sample codes or projects that can help them analyze and understand programming problems better.

searchcode

But knowing the exact portal where you can find the specific code snippet you’re looking for can be tricky. For example, if a programmer wishes to refer to the code for a working computer card game (say, solitaire), how can he find it out directly without switching from one code search engine to another and accessing various code samples? Through SearchCode!

SearchCode – The source code search genie!

SearchCode is an indexed and searchable source code repository that lets you search for working code snippets, examples of functions, API’s and libraries over 90 languages across 10+ sources. It searches code from multiple repositories like GitHub, Bitbucket, Google Code, and others and displays the results with the relevant lines highlighted. All you need to do is provide it a query with the exact lines of code (LOC) that you’re looking for, and the tool will do the rest. That way, you not only get to experience the power of various code repositories at one place, but also get to save time since you have the exact lines of code that you want highlighted on your screen. Cool, eh?

The biggest challenge web crawlers face while searching for code examples is special characters. Most indexers don’t index special characters; also, they can often take up a lot of time. SearchCode overcomes both these issues by letting you search for code by function / method name, constant / variable names, operations, security flaws, usage, and also by special characters much faster that other source code search engines.

A few of the most noticeable features of SearchCode include:

  • It uses Sphinx to conduct code searches
  • Most information is presented in such a way that you shouldn’t need to click through, but can if required
  • Searches can be filtered down to a specific source or identified language using different refinement options
  • It is an open source tool and thus, is completely free of cost

How the tool works

To start using SearchCode visit the tool’s homepage and you’ll see a search box in the middle of the screen. If you know the exact LOC to be searched, type it in the search box and hit ‘Search’. Alternatively, you can also type in the name of a function / method (say, Palindrome) and hit ‘Search’.

The next screen will display all results for the LOC or method you’ve searched for with the specific words in the search query highlighted. The results will include programs written in different languages (like C++, Prolog, Haskell, D, C, Java, Python, etc) and from different repositories. You can filter the search results by source repository as well as programming language through checkbox options in the left hand panel of the screen. Once you have your desired filters select, hit the green button that says ‘Apply’ and your results will be narrowed down. From the results, you can pick the code snippet that appeals the most to you and use it to suit your purpose.

You can also try SearchCode out through sample filters that you can find if you scroll the homepage down a little. Click on a filter to access its related results instantly. You can also use SearchCode’s API in your application to automate your code search. Moreover, the tool offers premium features through ‘SearchCode server’, a paid plan that lets you download the tool and install on your own server so that you can have powerful code search in your own cloud.

searchcode1

Free VS Paid Plan

SearchCode can be used in 3 ways:

  • Community Edition – Completely free, but you cannot change the look-and-feel of the results and you don’t get any support
  • Full Version without Support – $99 for the full edition with all the goodies but no support
  • Server Edition – $699 for the premium version with support for 2 years, free upgrades during this period and the option to make your own feature requests
  • Find working code snippets, examples, functions, and APIs with a click, try searchcode.com/ via @supermonitoring

    Tweet this

Weighing it Out

SearchCode actually proves to be a powerhouse tool for programmers and hackers alike. It offers sample code, working examples, projects, all the push and help a quick learner needs to reach the stars. Come to think of it, the tool’s doesn’t have a downside to it. That is if you’re using its community edition. The paid versions do offer extended functionality and support, but then, are they really worth it when you have repositories like GitHub, Bitbucket, and the lot out there? People working in time critical projects who value each second would definitely say ‘Yes’; others, probably no.

CanIUse – Test Browser Compatibility with Web Technologies

Problem:

You’ve built an awesome web portal using HTML5 and some cool CSS features. You’re sure the portal will look amazing on Chrome. However, you’re wondering if the code will work on Safari or not. For that matter, you don’t even know if the code will work on a few old versions of Firefox or Microsoft’s Internet Explorer or not. What do you think should be done?

Solution:

You need cross browser testing for your web portal; meaning that, you need to run your code on different web browsers and various versions of them to find out the compatibility percentage of your portal. Only once you’re sure the portal will work perfectly on at least 95% of the web browsers should you think about launching it.

So do you have the necessary setup? Do know what all combinations of browsers and versions you need to perform the testing? Have you prepared a list of parameters on which to compare the test results?

Ok, relax. Don’t get all panicky. We keep monitoring the web for tools that offer solutions to different problems and as always, we have just the right tool to get you through this challenging task. Introducing – CanIUse.

caniuse

CanIUse – Online Browser Compatibility Testing Tool

CanIUse lets you conduct compatibility tests by providing up-to-date browser support tables. These tables can be used to check for support of front-end web technologies on desktop and mobile web browsers. The tool is targeted at web designers and developers whose major work revolves around creating cross-platform web portals and applications. It lets users check if an HTML or CSS feature works correctly on a particular version of a particular browser or not. It helps in giving designers a clear picture of how their designs would look on a particular environment and thus lets them create the perfect code.

Here are some striking pointers about CanIUse:

  • The support data used on CanIUse is free to use under the CC BY 4.0 license.
  • The raw support data is available on GitHub and is updated regularly.
  • CanIUse shows browser support for features that are likely to be eventually implemented by the majority of browsers.
  • Most information for the tool comes directly from the latest developer / preview / nightly builds.
  • A feature is regarded as “supported” if it is found to be usable in most cases.

With easy to remember color schemes marking positive or negative results, CanIUse.com is one browser testing tool that is actually quite handy and easy to use.

Here’s how to work with CanIUse

A little heads up – On visiting the tool’s homepage you might feel a little lost for a couple of seconds. You won’t find a tour or guide that shows how to use the tool which might be somewhat intimidating for new users. But trust us, once you do get the hang of it, you’ll understand everything the screen shows. Okay, let’s get to business now!

On the homepage you’ll find a large orange box on the top-middle of the screen that says “Can I Use ____”? The blank space is where you’re supposed to enter a web technology name that you wish to test browser support for. For example, punch in “HTML 5” in the blank space and you’ll be shown a result page with a table of different browsers and their various versions and support information regarding HTML 5. You’ll easily be able to make out which browsers support HTML 5 and which don’t. Everything will be color coded and the description of which color depicts what will be available on the bottom-right corner of the screen.

To customize any setting, for instance, a particular geographical location that you wish to narrow down the testing for (ex. a particular country or region) click on the “Settings” label next to “Can I Use ____”? Just below the support table you’ll find 4 helpful links about the information displayed:

  • Notes: Additional information about any specific browser version that might be experiencing temporary or minor issues
  • Known Issues: Bugs
  • Resources: Where the information has been collected from
  • Feedback: User comments or suggestions

You can check detailed support information if you hover the mouse cursor over any cell of the table; the working of the tool is pretty simple really.

caniuse1

Pros VS Cons

CanIUse is quite a useful browser testing tool and has lots of pros associated with it:

  • Performs browser compatibility tests within a couple of seconds
  • The support tables in the tool’s database are updated with the latest builds
  • The tool is completely free to use

However, to be honest, there are a few cons too:

  • There’s not much to it as far as functionality is concerned
  • The look-and-feel of the tool isn’t very appealing
  • The absence of a tour or guide leads to confusion on the user’s part
  • Check your code’s compatibility with different browsers and versions for free with caniuse.com/ via @supermonitoring

    Tweet this

Verdict

Overall, the tool is not that great in terms of making a difference. However, it isn’t bad for a free tool as well. If all you want is information, it’s good. If you’re looking for more features and probably a little help now and then (maybe a forum or Help section) you should try some other tools.

Track & Fix Errors before they cause damage, with Rollbar

Nothing steals the thunder from good applications like bugs and errors. That’s why, when they’re still under development, every effort is made to find out and fix hidden bugs and unexpected errors. But it is easier said than done. While creating working code is one thing, fixing bugs, errors and exceptions is another thing entirely. Rigorous peer reviews and layers of checking are conducted to detect errors and fix them before an application is released. Quite often, this error tracking takes up more time than the actual code writing, making it one of the most difficult phases of application development.

What if there was a quicker, simpler way to complete this phase and move your focus onto the other aspects? A way that lets you make sure your users don’t find anything wrong with the application once it is released to them?

rollbar

Intrigued? Good; because in this discussion we’re introducing a tool that makes error tracking one of the smoothest phases of application development. Meet – Rollbar.

Rollbar – Detect and fix errors before your users

Rollbar lets you prevent production issues before they begin. With an easy setup and instant meaningful results, this is one tool you’ll be glad to have on your side. It lets you analyze, diagnose and fix errors by going down to their root cause. Powered by full-stack error tracking, Rollbar has all the traits to be an integral and reliable part of your application monitoring.

Here’s what makes Rollbar worth your time:

  • It collects a lot of context data, including detailed stack traces, request parameters, URL, environment, and affected users, etc to quickly pinpoint what’s broken and why.
  • It lets you review error trends by occurrence, browser, deployment, OS, location, user, host and get a deeper understanding of your errors and exceptions.
  • Rollbar smartly creates error groups and automatically organizes application errors by their root cause. It even lets you customize your grouping rules to reduce noise and see what’s really happening in your code.
  • It works with all major languages and frameworks like JavaScript, Python, Ruby, WordPress, Drupal, Android, iOS and more.
  • You can setup notifications for email and services you already use in your workflow. Moreover, you can select to only get notified about the errors you care about.

Additionally, Rollbar allows you to send in notifications of your code deployment to get a 360 degree view of the entire deployment history for each environment and how deploys affect error rates. And above all, the tool’s proprietary language Rollbar Query Language (RQL) provides you with a rich querying interface similar to SQL.

rollbar1

How does it work?

To start using Rollbar you need to sign up. Every account is entitled to a 14 day free trial without providing any credit card information. You can sign up using your GitHub credentials or simply provide your email address to get started. Thereafter you’re asked for basic credentials and 5 minutes later, you’re in the game!

Once your account is created, you’re redirected to a setup page where you can setup the information for the project you wish to track errors for. Enter the following information to proceed:

  • Project Name
  • Primary Language / Framework (you can select different languages / frameworks for frontend, backend and mobile environments)

Next, your application will be assigned a server-side access token and you’ll be given detailed instructions to setup Rollbar at your end using the language / framework you selected in the previous step. Once the installation is complete, you can move to your application’s Rollbar Dashboard. The Dashboard is linked to your application through code that you’ll be directed to execute during setup. And once the link is established, your application will start sending data to Rollbar automatically.

As soon as Rollbar starts receiving data from your application, you can start seeing its magic. Errors will start being grouped, constant alerts and notifications will be sent to you and all kinds of reports will become available. If you wish to change any setting at any time, helpful options are easily available within the tool’s interface.

In addition to error tracking, Rollbar also lets you setup Deploy Tracking. Just click on ‘Deploys’ from the main menu to access this feature. You can also use RQL to run arbitrary queries on the data you send to Rollbar through a prompt built into the tool’s online platform. If you need guidance at any step, ‘Rollbar Docs’ are available with a click on the upper right hand corner of the interface.

If you’re still confused, take a ‘Live Demo’ of the tool to sort things out.

rollbar2

Pros VS Cons

It all boils down to this – the comparison of the good against the bad. While the pros are easy to spot: automated error tracking, team collaboration, multi-platform integration, deployment tracking, instant reports, constant alerts and more, the cons are a little more subtle.

If you’re using Rollbar for personal projects, you can opt for a free account which entitles you to capture 5000 events per month for unlimited users, projects, and deploys. With 30 days data retention and unlimited rate limits, this account is good for individuals and for project prototypes. However, larger organizations with growing teams and high-volume products will have to fish out sums ranging from $29 – $249 per month. While some might find the price worth it, for others, it might be a little too pricey.

In addition to the price aspect, many users could find the Rollbar Dashboard a little daunting since the tool has a slight learning curve associated with it.

  • Hassle-free automated error tracking for your application – @rollbar rollbar.com/ via @supermonitoring

    Tweet this

Verdict

Good tool aimed at a great purpose; however, suitable for a specific audience only. Try it out before you take a decision to invest in it.

DevDocs – a slick API documentation browser

No matter how talented or gifted a developer is, at some point and for some tasks, he might need a little help, if not from a peer then from an online source. Any technology expert can vouch for the fact that unless you have photographic memory (literally) you simply cannot remember each and every library, syntax or API related to a particular programming language at any given point of time. Thus, each tech-guru keeps monitoring the Internet to find out and keep handy some really useful websites or online tools that he can access as and when needed to come up with a perfectly working code snippet.

devdocs

However, at max you can remember a handful of dedicated websites or URLs. What if there could be a way for a whole bunch of code development related documents to be present at one place for easy access? Moreover, what if this library (of sorts) could be customized on choice and updated with the latest changes? If you’re a programmer, you’re probably quite intrigued about what it is we’re getting at. Well, we’re talking about none other than DevDocs – the online super interface that combines multiple API documentations in a fast, organized and searchable manner.

DevDocs – a programmer’s heaven!

And we mean that! The guys behind DevDocs modestly call it an API documentation browser when it actually is a lot more than that. It is in fact, a hub for quick-access reference manuals of just about every popular programming language and library that is used to create frond-ends. It specifically lists all APIs of these languages with their official documentation in such a manner that makes using the tool seem like child’s play. There is no learning curve required for using the tool; you can read through it or search for a particular API just like you would with an e-book. Remember the help and guide that are installed on your computer when you install a programming language’s editor? Imagine the guide of every front-end language you know combined into one omnipresent online tool – yep! That’s DevDocs for you.

The awesomeness of the tool doesn’t end there. The languages whose manuals are present have an arrow displayed before their name on which you can click to expand the manual contents. The most interesting part is that as any other tool, there might be a few languages whose reference manuals you might not find on first access (meaning they’re disabled by default). But before you say ‘aha!’ let us tell you that the tool allows you to instantly download the manual for those languages from various online sources with a few clicks.

Now if you’re wondering what happens to those manuals if you don’t have an Internet connection – well, DevDocs has a solution for that too. It gives you the option to download the documentation for any language onto your system and use it in ‘Offline’ mode. Could it gain any more points in user-friendliness?

How to use the tool

As mentioned earlier, there is practically no learning curve involved and you can verify that by visiting the tool’s website. As soon as you land there, you’ll see different front-end programming languages listed in a tree-view manner in the left hand side of the screen. Click on the arrow adjacent to the language name to expand its contents. Then click on any item to view its associated material on the right hand side.

By default, you’ll be able to view the manuals for 5 – 6 most used languages with the others listed under a ‘DISABLED’ marker. To view the documentation for any language that’s disabled, ‘Enable’ it first. For this you can either click on the enable link that flashes on hovering over the language name or go to ‘Select Documentation’ setting at the bottom of the left hand panel. Then select the language and version you wish to enable and see the associated content downloaded into the tool within seconds.

Convenient options on the upper right corner of the screen allow you to:

  • Offline: download manuals to your computer to refer offline
  • About: find out who created the tool, about the associated licenses, about plugins and extensions and answers to frequently asked questions
  • News: browse notifications about new documentations added to the tool
  • Tips: view the guide to using the tool

The tool is open source and it invites users to submit their ideas, any bugs they find and their suggestions to improve the code. It’s hosted on GitHub and can be deployed easily to run or host user versions.

devdocs1

Pros VS Cons

You mean more benefits that the obvious ones mentioned above? Actually, there are a few worth mentioning:

  • The DevDocs interface is highly responsive, powered by Fuzzy search algorithms that makes searching for keywords in documentations superfast
  • The tool is fully optimized for mobile devices
  • You can install the tool as any other search engine (like Google or Bing) since it supports OpenSearch
  • A number of easy keyboard shortcuts make working with the tool very simple

Trying to find faults in a tool that’s as helpful and as simple-to-the-point-of-cuteness is just wrong. Its open source so free, it combines so many documentations at one place, is self-updating and is easy to use. There’s simply nothing wrong with it.

  • Reference manuals for 50+ front-end languages within one simple tool: devdocs.io/ @DevDocs via @supermonitoring

    Tweet this

Concluding Lines

If you haven’t used it yet or don’t plan to use it, at least cast a cursory glance at it. You won’t be able to move over it if you even remotely have anything to do with coding.

Discover what makes popular websites tick with BuiltWith

Ever wondered how companies build just perfect websites that catch the user eye instantly? What are the right widgets or tools that you should be using within your website to reap maximum benefits? If you specialize in developing / selling a particular technology, who should your prospective buyers be? If you’ve always wanted the answers to those questions, this is your lucky article!

builtwith

BuiltWith – Find out popular technologies used by popular websites

BuiltWith works on a simple principle of letting users know which technologies or applications are used where. Key-in the name of a technology, for example, Magento or the name of an application, for example, Google analytics, and BuiltWith turns up a list of all popular websites where the searched technology or application is used.

To understand this better, take this scenario for instance. I aim to build an online portal to sell home décor stuff. I know what kind of website I need and what widgets or applications I want to embed in my portal. Needless to say, shopping carts would form an essential part of the portal. But it would be better if I could find out the best ways to use shopping carts in an online portal, or how my competitors are using them. So I search for the keyword “shopping carts” in BuiltWith and what I get in a list of all top websites using shopping carts and the software companies offering/building shopping carts for online portals. I can also cross reference my search results to gain plenty of other insights into the online selling tactics and much more.

Another way of looking at it is, suppose you have a software company that builds widgets for different purposes. You wish to find prospective buyers for your products. So, search for the term widgets on BuiltWith and find out all top websites that use widgets. Then use those results to map out Internet technology trends and plan out your approach. BuiltWith can strengthen you to know your prospects’ platform before you talk to them and improve your conversions with validated market adoption.

To cut a long story short, BuiltWith is an online tool that helps you identify key market segment opportunities, gives you insight into where you can increase your technology penetration across the web, and lets you quickly and easily discover the sites that are a good fit for your application / tool / widget.

This is how it rolls

Visit builtwith.com to find a search box right in the middle of the screen. Punch in the name of a technology of an application (basically a keyword) and hit “Lookup”. You’ll be redirected to a page with the search results sorted by the most popular websites using that technology or application. Moreover, beneath each search result, you’ll see a category link.

Technology Usage Statistics

This is the category under which that particular search result exists in BuiltWith’s database. Clicking on any such category link will take you to a page that displays a colored pie-chart showing the statistics for websites using the technology category you clicked. For example, if you clicked on Advertising, you’ll see a page with Advertising Usage Statistics and so on. You can choose to customize the chart’s scope corresponding to number of users by convenient links given on the right.

builtwith1

Keyword Lists

If however, you do not wish to view the category usage statistics, click on any individual search result to view details about it in the form of charts and reports. Apart from this, you can choose to view the list of all keywords in BuiltWith’s database. This could help you to quickly identify more appropriate areas that you wish to comb out.

View Trends

In addition to the above mentioned features, there’s another way you can use BuiltWith without an account. Click on the “View Trends” link on the homepage to view usage statistics for the most widely used Web and Internet technologies across the globe. Beneath each technology’s name is the category of work where it applies. For example, “Taboola” is used in the Advertising field, “Mailgun” is used in the Emailing field and so on. The “View Trends” feature can also be used to know about ecommerce trends. The trends in BuiltWith’s database are frequently updated to reflect the latest data and this is achieved through constant monitoring of market trends.

Lead Generation

Probably the most useful feature of the tool is its capability to give you leads in less than 30 seconds. To use this feature you need to sign-up for free. Once you’re through, search for a technology (e.g Magento) or field (e.g Advertising) and find websites using the keyword you searched. Download the lead list to your account, view it, select a prospective customer from it and get all contact information (address, email & phone numbers) about the points of contact in them right in your account. Could it be any easier?

Miscellaneous

Other than the prominent aspects mentioned above, BuitWith can assist you with Market Analysis, Sales Intelligence, Data Coverage, Cyber Risk Auditing, Report Filtering and much more.

builtwith2

The pluses VS the minuses

On the plus side, the tool packs quite a punch. There are many ways in which BuiltWith can help you to gain market intelligence, attract new customers and achieve positive results.

However, on the minus side, this tool is for the pros. Novices in the area could find it confusing and could get lost easily. Plus, it is way beyond the reach of a single professional or a small organization. You will need to shell out quite some money if you wish to gain some real advantage from the tool.

But then, if the money spent on the tool actually yields positive results, it will be counted as an investment.

  • Study Internet technology usage statistics to get ahead of competitors with builtwith.com/ @builtwith via @supermonitoring

    Tweet this

Final Words

All in all, a wonderful tool for those who know how to use it and who have the pocket to afford it! But, every organization should give it a try at least once. There’s something for everyone there.

Get on Git the easy way, with Bitbucket

Most technical organizations or the ones that are involved in core software development make use of some sort of version control system to keep track of work progress by collaborating what has been done so far. Such a system is basically a remote repository from where users “check-out” code, make changes and “check-in” the most recent, working code copy. This cycle continues for the entire duration of the project and such version controlling is usually very effective for distributed teams. It serves as a common platform where team members can share each others’ developments, test and study them and also release executable copies to the client.

One such popularly known and widely used version control system for software development is Git. It is a free and open source distributed system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. And if you’re already using Git or planning to start using it, give it a great head start with Bitbucket.

bitbucket

Bitbucket – the best Git solution for professional teams

Bitbucket is an online platform that facilitates using Git in the easiest manner possible. With an interactive GUI that is as easy as the click-next phenomenon, Bitbucket makes sure you spend more time working and less time tackling Git usage hurdles. Without the refined user interface that Bitbucket has to offer, Git, though just as efficient, is a command line tool that allows you to do just the basics – check-out, modify, and check-in. However, Bitbucket adds a lot more to the whole process by incorporating easy collaboration tools, discussions through inline comments, code review tools and more.

Overcoming the typical Git drawbacks like degraded performance with increased file size, Bitbucket scales massively to give you uninterrupted and smooth access via its Data Center. What’s more the platform offers flexible deployment models for teams of all sizes and needs with the freedom to host it in their cloud or manage it on user servers. A few key things to note about Bitbucket are:

  • Assigning specific branch permissions, you can control user actions thus preventing inadvertent errors. Granular permissions at project and repository level can also be set.
  • Integrates with JIRA effectively by connecting commits and pull requests to JIRA issues directly.
  • Add-ons built with Atlassian Connect for Bitbucket allow you to customize Bitbucket Cloud the way you want.
  • Integrates easily with HipChat, Bamboo, or other systems using webhooks.
  • Enables you to better understand repository changes with unified or side-by-side diffs during code reviews.
  • The platform can show build results from your CI system. A simple pass or fail icon tells you about the health of your code.

bitbucket1

Here’s how it works

To start using Bitbucket, sign up with your basic details. The sign-up is free or paid depending upon the plan you choose:

  • Personal account – Free
  • 5 user team – Free
  • 10 user team – $10 per month
  • 25 user team – $25 per month

Once signed in you can choose to visit a tutorial on Bitbucket or Git or use SourceTree (A free Git & Mercurial client for Windows or Mac). If you wish to directly start using Bitbucket, Create a new repository for your project or Import an existing repository to work upon. After filling in the details for the repository like Name, Description, Programming language etc, your repository will be created.
On the main access page of your repository, you need to sync it with your Git installation on your machine or start from scratch. Thereafter, you have the options to Clone in SourceTree, Create a new Branch, Create a pull request, Compare code versions, Fork etc. All available actions are listed in a vertical fashion in the left hand panel of the window. If you’ve used version control software earlier, understanding Bitbucket usage shouldn’t be an issue.

On the main menu of the window you’ll find options to see a complete overview, pull requests, issues or snippets under Dashboard, create a new team or view already created teams, create or import another repository or see a snippet. At any point of time you can alter repository settings through a convenient Settings button on the bottom left corner of the window.

Overall, using Bitbucket is quite simple.

bitbucket2

Pros VS Cons

Apart from the sheer ease-of-use that it brings, here are major benefits Bitbucket offers:

  • Bitbucket Cloud is free for small teams of 5 users.
  • Unlimited private and public repositories
  • Bitbucket Server gives you secure, fast, enterprise-grade controls, like fine-grained permissions and powerful management features.
  • Quite an affordable tool being free for small teams and $1 per user per month for larger teams of up to 25 members.

As far as drawbacks are concerned, it’s difficult to find any with the tool itself. It has everything you would expect from a version control system and more. Plus, it has a minimum learning curve. The only point at which one can get confused about using it its eventual need – it is just a pretty cover for Git after all. So why would an organization want to pay for something that it can get just as easily for free? Agreed using Bitbucket is easier than command line, however, coders who tackle complex development issues each day would surely not find Git that challenging. So at the end, it’s all about what added worth it brings to your team and organization.

  • Get on #Git the easy way, with @Bitbucket bitbucket.org/ via @supermonitoring

    Tweet this

Final Words

All-in-all, Bitbucket is neater and more diverse than Git. It adds many good to have features to the version control system, and yet, every organization might not find use for it.

Find an API for anything with Mashape

The online world is moving to the cloud. From emails to storage and management, you name it and there’s a portal to take it to the cloud. And if one doesn’t keep up with the flow, one tends to drown out too soon. In the times of the Industrial Revolution, building a product from scratch after gathering requirements, monitoring production and testing quality was a challenging task; equally tedious was the marketer and seller’s job. Things changed when modern machines and techniques arrived. If we map the same trend to modern software development, cloud computing has changed things much the same way.

Today whether large or small, all businesses are going the cloud computing way to develop, test as well as sell software. While people starting afresh might have the edge, old players might need a hand with shifting existing methods to the cloud. It is in such a scenario that the need for a sort of a bridge arises. And cloud APIs serve as that bridge. If you have an application, website or product under development and you need to take it to the cloud, the simplest and ideal way to do it would be to have APIs for everything.

mashape0

The next question would be where to get such cool APIs and how. The answer lies with Mashape.

Mashape – Building the API Economy

Mashape aims to create a revolution in software production by serving as the backbone of the distribution and consumption of data and services through APIs. It can be thought of as an online marketplace where you can buy APIs suiting to your different needs. Mashape makes it easy to distribute, monetize, manage and consume cloud APIs. And where exactly do they get such a huge storehouse of APIs? They’re contributed by a passionate community of developers from all over the world. With public APIs like Twilio, bitcoin and 23andMe under its belt, Mashape is swiftly capturing a large portion of the cloud API online marketplace sector.

mashape1

Mashape plays a unique role of bringing API providers and consumers in sync. As a provider, you can contribute APIs for free or for remuneration. As a consumer you can browse through thousands of APIs for different purposes and buy the ones you want – simple and awesome!

In short – need an API? Get it from Mashape!

This is how it works

If you’re an API consumer, visit Mashape and click on the green button in the center that says “Explore APIs”. You will then be directed to a page that lists all APIs available for consumption. You can customize the APIs you wish to see through the sorting filters Relevant, Recent, Popular and My APIs (for existing customers) or through Price filters All, Free, Premium and Paid. There are numerous categories that define the APIs at the left hand side of the screen and you may choose to browse only a particular category there. But it would be advisable to look through the entire collection of APIs to be absolutely sure of the one you need.

Once you find an API that interests you, click on it and you’ll see a page displaying details about it and instructions for consuming it. In addition to basic formalities like applying for authentication keys etc, here you’ll be asked to sign up if you wish to consume the API.

Once you’ve signed up, the button prompting you to sign up will change to a drop down having the options – ‘Default Application’ and ‘+ Create New Application’. Select the appropriate option and click on Test Endpoint’ to kick off. On clicking this button a push-out menu will appear displaying the API code from Mashape that you can download or copy and use wherever you want.

Mashape also offers you the opportunity to see the number of developers behind the API and number of people following it. Moreover, you can also report the API as broken if it doesn’t work for you. In this aspect, Mashape makes dealing with APIs extremely easy and crystal clear.

mashape2

If you’re an API developer, you can contribute your API by clicking on the “Add your API” button on the main screen. On clicking the button you’ll be directed to a page where you have the option to straightaway import (upload) your API documentation or supply the Base URL if your API is already up and running elsewhere. Accompany that with a cool name for the API and click on the “Add new API” button. That’s it, you’re good to go!

Pros Vs Cons

Mashape is an online tool that comes with many plus points.

  • For starters, if you have a website or portal that you wish to bring at par with other portals, you needn’t look further that Mashape for readymade APIs of some of the most popular supplementing applications (Spotify, ESPN, Bitcoin, BestBuy, Imgur and many more).
  • Consuming APIs is child’s play (literally); all you need to do is sign-up.
  • It is an extremely attractive tool for both API developers and consumers alike.
  • It serves as one of the best online marketplaces for APIs.
  • It’s a boon for API developers where they can showcase their talent and earn popularity or money or both.
  • Online means easy access and omnipresence.
  • It offers features like application monitoring, API analytics and alert, quota and invoice management, and security.

And the biggest advantage of this tool is that you can use it for free for a large number of free APIs. Of course you need to pay for premium APIs but with a collection as huge as Mashape has, if you don’t have your heart set on a particular API, you can easily find a great replacement of a premium API in the free section.

We still have to figure out a con with Mashape! It’s so downright useful that finding a loophole in it is proving to be quite challenging.

  • Need an #API? Get it from @mashape.com! Explore one of the largest marketplaces for cloud APIs mashape.com/ via @supermonitoring

    Tweet this

Final Verdict

Mashape is a win-win tool for people who’re in love with APIs. So if you’ve never checked it out before, do it NOW! There’s literally so much packed in there that you’ll find it to be a world in itself.

Reviews of Web Tools for Web People

  • And who's monitoring your website?
  • Get notified of new reviews


  • Follow us


  • Browse Categories


  • Sleep well, webmaster...

    check customer browser