Posts Tagged ‘CSS’

Build, Tweak, & Play with CSS Animations on Animista

One of the most essential parts of web development is finding the right look-and-feel for what you’re building. When working on a project, web designers experiment with tons of themes, customizations, animations, and other aspects to find exactly what they or their clients like. And CSS plays a major role in such web designing. Typically, web designing with CSS involves putting in the code, watching how it turns out on the website, tweaking the code a bit, then again watching the results, and so on. It’s an iterative process involving considerable time and effort. And for someone who’s new to CSS, the whole thing can turn into a nightmare since he’d have to research to find the exact lines of code that can result in the effect he want.

Although it’s a part of the job, it is natural for designers to feel exhausted and frankly, annoyed with it after some time. But that’s just how the process goes. There isn’t really anything anyone can do about it right?

Well, not actually! With Animista, a lot can be done to ease CSS based web designing; actually to the point of making it click-based. Want to know how?

Animista – the wonder tool for creating and testing CSS on the fly!

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and save only the ones you actually wish to use. It’s like a supermarket for CSS animations. You visit, you tweak and play around, you consider options, and you pick the stuff you like. The online tool contains a considerable amount of animations that have been organized in a meaningful and accessible way so that they can be easily reused on different projects. What started off as a small personal project for a web designer, has shaped into this online playground which contains a collection of pre-made animations that can be tested with various options like easing, delay, duration and others. Once a user is satisfied with his selections, all he needs to do is save the code for the animation and he’s done. The work which would have taken hours to research, build, and test, squeezed into the work of minutes – that’s Animista for you!

Here are the best features of the tool at a glance:

  • Generates CSS animation code at the click of a button
  • Contains pre-designed motions like slides, transforms, swings, shade dump animations, and more
  • Supports exporting generated code
  • HTML5 FileSystem API based downloads supported in Chrome browser

Now, let’s start playing!

This is how it rolls

The tool’s homepage is a bit confusing to be honest, but you can view that as a sign of uniqueness too. When you visit the page, all you can see in the name of the tool and a ‘Try Me’ button next to it. That’s it! No scroll-bars, no menus, no footers, nothing. For a moment you start wondering if the page has loaded properly or are some elements still pending. Once you’ve figured out that you need to click on ‘Try Me’ to proceed, you’ll land up on the tool’s dashboard. And everything will instantly become clear.

Here’s the working of the tool explained step-wise:

  • Instead of the black box in the center of the screen, select an object which gets affected by animations. For this click on the drop-down named “select object” in the Options section on the left (try the card (hor-flip) 3D object)
  • Browse through animation options displayed within circles on the top and play with various options like easing, delay, duration etc. You should be able to see how they affect the animation on the spot
  • You can change animation attributes through the Options section of the left. Everything will show results instantly
  • When you see something you like just hit the ‘heart’ icon on the upper-right corner of the animation panel. Once you do this, several options will become available on the top-right corner of the screen.
  • Rinse and repeat until you are happy with your picks. You can see your favorites at any time by hitting the “Funnel” button or click the “Trash” button to start from scratch.
  • When you are ready, head to download screen by clicking the ‘Download’ button or download link in main navigation. If you use Chrome browser, hit the download button and check your download folder. If everything went well the ‘animista.css’ file should be there.
  • Alternatively, you can generate the code for the animation by clicking on the “curly braces” icon on the upper-right corner of the animation panel. When you see the code, simply copy it and paste it into your favorite code editor.

What we like and what needs to be improved

Needless to say, a tool that offers such flexibility, variety of options, and ease-of-use and is also free is a clear cut winner. However, Animista does have a lot to improve on. This includes direct download support for browsers other than Chrome, more object options, and a brief explanation of what the different options on the left exactly do (it’s mostly try and find out for beginners right now).

  • Build, Tweak, & Play with CSS Animations on animista.net/ @cssanimista via @supermonitoring

    Tweet this

Verdict

We like Animista, and so do a lot of designers across the globe. A few more enhancements and sometime later this tool could be one of the simplest-yet-most-useful tools out there.

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?

  • Browse Categories

  • Follow us



  • Super Monitoring

    Superhero-powered monitoring of website or web application availability & performance


    Try it our for free

    or learn more