Posts Tagged ‘HTML’

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.

Write in Markdown hassle-freely with StackEdit

The modern world recognizes the power of words. With Internet being transformed into an information hub, more and more people hook onto it to monitor all sorts of stuff ranging from food to technology to travel and leisure. In such a setting, one of the best ways to make oneself useful is by being a part of the community that makes such valuable information available. Writers and bloggers are an enormous part of this community. And this post is about a tool that is bound to make the work of bloggers and writers easy. We’re talking about StackEdit here and trying to find out how much water this online in-browser editor holds.

StackEdit – In Browser Editor for Smart Writers

When you hear the name StackEdit, it hardly strikes you as an online writing tool with awesome features that can simplify the work of bloggers and writers to a great extent. But that’s exactly what it is. StackEdit is an in-browser Markdown editor that promises to deliver an unrivalled writing experience. It lets you create articles and blog posts that you can publish on a number of social platforms simultaneously. And if you’re thinking there’s nothing great about it, wait till you hear about all the controls it offers you.

The tool encompasses almost the range of capabilities packed into NotePad++ or WordPad or other offline popular writing tools. Of course it isn’t as diverse as Microsoft Word, but as far as blogging or posting articles is concerned, it lets you achieve everything you need. Powered by What-You-See-Is-What-You-Get controls, the editor helps you visualize the final rendering of your documents before you actually post them online. What’s more, you can integrate StackEdit with Google Drive and Dropbox to save your documents directly to the cloud.

Additional highlights of the tool include:

  • “Scroll Sync” extension to bind the editors’ scrollbars so that you can keep a constant eye on the output’s final look while writing
  • Built-in “Spell checker” to carry out multilingual spelling checks and display suggestions for correction
  • Various customizable options available to personalize writing settings and create personal extensions
  • Allows direct upload of documents to Blogger, GitHub, Tumblr, WordPress, etc
  • Documents can be uploaded in Markdown format, HTML, or using Underscore template engine
  • Facilitates collaboration on common documents, automatically merges modifications from multiple collaborators
  • Supports insertion of inline comments and discussions like Word or Google Docs
  • Includes an offline mode that allows you to write on the move just like a desktop application

With advanced capabilities of inserting mathematical expressions into documents and creating UML diagrams using simple syntax, StackEdit is quickly becoming one of the most popular in-browser writing editors of all time.

Here’s how to use StackEdit

Visit the tool’s homepage and click on “Start writing now!” in the top menu. This will redirect you to a screen divided into 2 panels – left one for editing and right one to preview the output. The preview window is toggle-able and you can close it if distracts you while writing. By default you’ll see some text displayed in the editor. It is dummy text that you can delete but we’ll advise against it since going through it can give you helpful pointers about the tool’s syntax.

The syntax of the tool resembles HTML with tags specifying text attributes, for example, to insert icons tags are used. Catching the other shortcuts is simple too. We quickly made out that to make some text bold we had to enclose it within asterix pairs (**text**) and marking some text as headings (H3) required prefixing it with the same number of hash signs (###). Similarly, figuring out the trick behind inserting bullet lists and keyboard button images was easy.

We recommend that you read the full dummy text displayed in the editor to know about StackEdit’s features in detail. If you do need to delete the text, copy-past it elsewhere and then go ahead. This could save many of your potential work hours that you might have to spend in the future to find out precious shortcuts about the tool (like how to insert a table of contents or create UML diagrams using text syntax).

In addition to the text you’ll find a host of other editing options in the file menu including Bold, Italics, Hyperlink, Code-Sample, Image, etc. Simply click on any of them to insert the respective tags in the text and you’ll be good to go. In the same menu you’ll find undo-redo buttons as well as a button that allows you to insert comments into the documents you create.

On the left-most corner of the file menu you’ll find a hash button which reveals additional options like import / export document, share, publish, convert to Markdown, etc. It will also give you access to account settings. Lastly, on the right-most corner of the file menu, a folder button will allow you to create new document, delete an existing document, as well as manage your documents.

Plus VS Minus

We were actually quite impressed by StackEdit. The tool was so simple, yet so brilliant. It gave us access to all options needed to create perfect looking documents and upload them to various social platforms easily. Moreover, it included a bunch of editing options and features at par with popular offline editors like Word.

But, there were also a few drawbacks we noticed, the biggest one being the absence of a ‘Save’ button. The documents were stored only in the browser’s local storage. There was no option to create an account wherein you could perhaps save the documents you create. So in case the browser crashed, we could lose all our text and changes. Another one was that although once connected to the tool’s site, you can get disconnected and work offline, to initially establish a session you need an Internet connection. This contradicts the tool’s claim to support offline working.

  • Brilliant in-browser Markdown editor for writers / bloggers – @stackedit stackedit.io/ via @supermonitoring

    Tweet this

Final Verdict

StackEdit is actually a great tool, though with a few limitations. But then considering it doesn’t need you to pay even a single penny, not having to sign up could be counted as a benefit if the makers can provide a way to save documents.

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.

Give your source code a makeover with Code Beautify

Anything that’s pretty grabs attention. That applies to people, places, things and almost everything else under the sun. But there’s one group of individuals who often forget this rule and go about their work as usual. This group includes the most talented computer programmers around the world. Though these gifted minds produce some very intricate codes, the code itself is often quite messy. Improper indentation, lack of comments and putting off the deletion of unused and repetitive code can over time lend disadvantages like redundancy, unnecessarily large file sizes and difficulty in tracing the code. That’s the reason many companies employ code quality checkers or set up software for the purpose. Getting flagged by such checkers though isn’t a big deal job security wise, but it could be embarrassing.

If you’re among such a group of coders who wish to clean-up your messy code but don’t have the time or patience to go about it manually, you should definitely try out Code Beautify, the online tool to decorate your code.

codebeautify

CodeBeautify – The beautician for your source code

The name of the tool gives away its purpose but Code Beautify is more than just a code decorator. Code Beautify is an online tool aimed at not only beautifying, but also validating, minifying and analyzing source code in myriad programming languages. The tool offers a powerful online script editor thus enabling users to minify, validate, decorate and even convert their source code into various programming languages. The script editor can be used to compile and execute the code as well and that makes Code Beautify a complete package in itself.

Users who register with this brilliant and simple tool get a profile where they can save their experimental projects and code snippets for more brainstorming later. No size limit on the input, output or source code and standard UTF-8 encoding make this tool quite worthy for those who wish to put it to good use. And what does all of this cost you? Not even a single penny! Yes it’s absolutely free. So why waste time and energy going the manual way. Automate the makeover of your source code with Code Beautify today!

codebeautify14

This is how it rolls

On visiting the website you’ll find all the languages supported by the tool displayed within big boxes. It actually makes it quite easy to find the preferred language since the font and setting of the words is so in-your-face! On clicking on a language name you’re redirected to a page with an editor on the left hand side and an output window on the right hand side. Just start typing your code in the editor and click on any of the following buttons to perform the desired actions:

  • Load URL – To load the source code from the mentioned URL
  • Browse – To open a source code file directly from your system, for example, if you’ve selected HTML as your language, this option will let you select an html file from your system.
  • Beautify – To make your source code attractive. If you’re typing directly into the editor, the source code will be automatically beautified.
  • Minify – This option removes extra spaces, blank lines, tab spaces etc from the code.
  • Run – Shows the output of the code.
  • Download – Downloads the source code to your machine.

You can also choose to load a sample code to test the effects of each button. The editor also allows you to clear all code, copy the code or even go full screen.

Additional Features

In addition to this basic working, there are quite a few additional features offered by this interesting tool. Once you’re satisfied with your work, you can choose to save it to your profile through a “Save and Share” button on the top right corner of the screen. Plus on scrolling down the editor page, a short description of that particular language’s editor, tool features and related links are also displayed.

codebeautify2

Other additional features include the option to track your system’s IP, see the recent links you’ve visited, language converters, unit converters (as in volume, length, weight etc), card validators, number system converters and more. It’s like so much has been packed at one space and all of it for free!

Pros Vs Cons

The good side of Code Beautify is its simplicity. No distractions, straight to the point! Secondly, the option to run the code and see the output gives this tool an edge over other conventional code enhancing tools which are very limited in their functionality. The third and biggest plus point of this tool is its wide language support. JSON, XML, HTML, JavaScript, CSS, C#, SQL, RSS, YAML; in short, there’ll hardly be any latest programming language you’ll not find here. And of course, lastly, it’s a free tool with no strings attached!

The downside is also very easily distinguishable. There is so much packed in this tool that it becomes quite unnecessary and unrelated. For example, in a tool to beauty source code, there actually shouldn’t be a link to track the user’s IP (which by the way also shows the local news of the user’s area) or an option to see the recently visited links. Okay the converters could be justified since they are sometimes needed while programming, but even to use them a user needs to visit different links on the tool’s website. For that he first needs to save his current work, then go to the said converter, then come back. Frankly, who has the time for that! A user can instead simply open another tab in his browser and do the calculations elsewhere. In short, a lot of unnecessary functionality has been stuffed into the tool which gives the impression that the makers probably wanted to show that they can do other things too. A better idea would have been to make separate tools for all the different things they intended to offer.

  • Beautify, validate, minify and analyze your source code for free with @Codebeautify codebeautify.org/ via @supermonitoring

    Tweet this

Wrapping it up

All in all, Code Beautify is a tool which has the capability to become a popular platform for programmers, but that can be possible only if the unneeded extra things are removed from it. Code Beautify makers, are you listening?

Reviews of Web Tools for Web People

  • Sleep well, webmaster...
  • Get notified of new reviews


  • Follow us


  • Browse Categories


  • Sleep well, webmaster...

    check customer browser