Modern trends and webapps have dramatically changed the way web developers can build. Obviously you need some type of IDE to code new files and save them for deployment. But what about just testing your code snippets? There are more tools available now than ever before!
In this article I want to outline 10 interesting web apps for testing your code online. All of these apps require an Internet connection, and some of the more advanced editors offer pro plans to upgrade your account features. But most of these tools will surely come in handy when you’re scrambling to debug a block of JavaScript or PHP.
Top 10 Free Source Code Editors – Reviewed
With professional code editor like Dreamweaver, Coda, Textmate and others, its no surprise that more and more people... Read more
Codepad
Originally created by Steven Hazel, Codepad is a unique web app where you can share code syntax across the Web. Instead of just debugging, Codepad allows you to copy/paste important bits of code to share online.
The output screen displays any error messages associated with your code. The left-hand menu radio buttons allow you to change the parsing language from C/C++, Perl, PHP, Python, Ruby, and tons more. I would argue Codepad is really for software engineers who need to collaborate and debug their more confusing programs.
JSBin
In a similar fashion as above, jsbin is a simple JavaScript debugging console. Their pitch involves a collaborative effort where you can share a private link with other developers and write together in real time.
Their interface may be a bit confusing to newcomers. The developers have setup some online tutorials which you can read through if interested. Basically you can select between any number of JS libraries – jQuery, JQuery UI, jQM, Prototype, MooTools, there are dozens to choose from.
As you’re coding different elements the drafts will autosave. You have the ability to download your final product or keep the source code saved online. Their system is much more advanced for exporting and keeping your code as a bare template.
jsFiddle
Anybody who has browsed through Stack Overflow must know about jsFiddle. Their interface is a whole lot difference compared to JSBin, along with support for more complex functions.
Right away you can signup for a free account and start saving your code samples online. jsFiddle offers a short URL which you can share around the Web via Twitter, Facebook, even Stack. But notice you do not need an account to start coding. It’s just a handy feature to keep everything organized.
jsFiddle also supports the inclusion of libraries such as Prototype and jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
CodePen
CodePen is more like a social media for Web developer than just a code playground. Not only that we can see people share codes in HTML, CSS, and JavaScript, which is called a Pen, but we can also give a “Like” to the Pen, add comment, curate a collection of Pen, create a post, and follow the challenge to level up our Web development skill.
CodeSandbox
Codesandbox is a fully-featured JavaScript playground. Aside of runnin a Vanilla JavaScript code or a framework like React.js, Vue.js and Svelte, you can also run a working Node.js application. It means that you can define the Node.js depenencies within the package.json file. Codesandbox will automatically download depencies from NPM. It also provides access to te a web-based Terminal so you can run any NPM scripts right from the browser.
See the Explore page to find cool things built in CodeSandbox.
WebMaker
WebMaker is a code playground for HTML, CSS, JavaScript as well as Pre-processor like Sass, LESS, and JSX. WebMaker will automatically compile these pre-processors syntax for the browser to render the code properly. You can use in the browser or install the extension in Chrome so you can still play with code while offline. When you’re done experimenting with your code, allows you to save your work locally, download the files, or share it in CodePen.
CSSDesk
Moving from the world of scripting into stylesheet language, we have CSSDesk. You’ve got a similar setup like all the rest, with your source code on the left and final webpage render on the right. This webapp is great for building small webpage templates and testing the longer CSS3 properties with gradients and box shadows.
This app also allows you to download source code as files to your computer. It can be a solid replacement in situations where you’re working on a laptop without any IDE software. Or additionally, you can generate a short URL link to share online. Then other developers may come in and edit what you’ve already created – definitely an interesting solution!
IDEOne
IDE One is another tool based around deep programming and software development. Their online editor supports syntax highlighting for some very prominent languages. These include Objective-C, Java, C#, VB.NET, SQL and dozens more.
What’s so great about their app is how you can quickly debug many different programming languages from the same page. You can also store this source code via a unique URL to share around the Web. However I do feel that their layout is very cluttered with ads and other content, it makes using their website difficult. It would be really cool to see the option of including alternate code libraries, such as Cocoa Touch for iPhone app development.
JSLint
The self proclaimed JavaScript Code Quality Tool has to be JSLint. Their website is a bit strange, yet the code editor works exactly as you would expect.
You might find the options to be very confusing if you haven’t used their framework before. It’s possible to work with open source code such as Node.js if you have the skillset. But much of the source code doesn’t even support syntax highlighting, a big letdown when you have so many other options to choose from. I would check out JSLint if you have the time, but it may not become your go-to online JavaScript debugger.
SQL Fiddle
We saw earlier the power of a web application like jsFiddle. Now we can see SQL Fiddle which works in the same way, except for SQL database syntax. I have yet to find another alternative for testing database code and this is by far my favorite choice.
All of the output data from your SQL code will appear in a table beneath the editors. You can write some code to implement new data on the right and generate a schema on the left. This database schema is SQL code you can save to export your current database and re-install everything on a new server.
If you aren’t familiar with databases or SQL language then this app won’t be much assistance. But even for developers who are new yet interested in learning SQL, this is brilliant! Check out one of their basic code examples so you can get an idea of how the app works.
Final Thoughts
With more computers connected online, it’s getting easier for developers to work together and collaborate in the browser. We’re seeing more and more technologies shift from local applications, and who knows how far this trend will go?
I hope this collection of code testing tools can get you thinking about the modern development environment. It’s so easy to quickly put together an HTML/CSS web project and within minutes have a small demo preview. Remember these are only tools to help guide you along the path to constructing your final product. If you have any suggestions or questions about the article feel free to share your thoughts in the discussion area below.
The post 10 Websites to Test Your Codes Online appeared first on Hongkiat.
https://goo.gl/hYDEHJ
No comments:
Post a Comment