New technologies fly by like the wind–and yes, sometimes geeks are also philosophical. Continued technology evolutions are common, frequently seeing new technologies come to aid of existing ones. That’s what we call polyglotism. So why look only at Java?
Check out TimelineJS for creating beautiful timelines
In a presentation, you’ll probably notice that it’s often useful to display a timeline with various dates and times. If you do it with some PowerPoint-like applications, it can be a pain in your @$$. If you’re in a web context (no no no, not your JavaEE one!), I cannot recommend TimelineJS enough. It’s free and can be embedded in your website (or SlideshowFX presentation). All configuration is done in JSON and you can insert images, tweets, videos from YouTube as well as many other cool stuff. The final result will totally impress your audience.
Try Highcharts for graphics that aren’t just for managers
Charts quickly give your audience a quick overview and understanding about numbers. PowerPoint allows you to easily create beautiful one and for web, I love Highcharts. It has so many options and chart types that you will certainly be able to find whatever you need to fit your chart requirements. What I really like is that they are fully customizable and interactive: you can click on them, hide and show series, zoom in and out, which PowerPoint won’t be able to enable! Again configuration is done using JSON.
JointJS and RaphaelJS for making diagrams cool
Diagrams with shapes are really useful too, but it can be a pain to draw some in web pages. JointJS tries to help you with that. Indeed the library is based on RaphaelJS and allows you to integrate diagrams into your pages. The learning curve is a bit high, but after you get used to it, your diagram elements moved, linked, embedded and so on. Everything is customizable, like links between elements, shapes and so on. Some extensions are available for dealing with UML, so you have no excuses to create geeky diagrams in your HTML.
Use JS Sequence Diagram and JUMLY for diagramming sequences
I don’t know if it’s the software architect in me, but I really love hand-writing diagram sequences. It is much more personal. Sequences allow you to describe workflows visually, but I also use them to easily illustrate a conversation between individuals. And for this I’ve found JS sequence diagram, which defines a really simple syntax for creating diagrams. And you have two main style: hand-drawn and simple. So you can embed it in your pages with little effort.
If you have to do much more professional-like sequences, you can try JUMLY, which allows you to customize all elements. But I prefer the syntax of JS sequence diagram: JUMLY is “whitespace intolerant” which can easily bring a lot of complexity in reading and writing the syntax. Again, once you’re used to this, it becomes simple.
Try SweetAlert for, well, sweeter alerts…
This one is very visually satisfying. When you’re doing web pages, you often use alert(…) in order to warn the user. But you will agree with me when I say that these are kind of ugly and old school looking things. So I discovered a really nice replacement, which is called SweetAlert and allows to show beautiful alerts that are fully customizable and centered on the screen. The integration is really easy and a cool result is produced.
Use HighlightJS for showing off your beautiful code
PowerPoint-like tools are not dev friendly, right? Why? Because when you want to show some code, you just have plain text … with no colors! So you always have to color it yourself (such 80s wow). In a web environment, you can use highlight.js to let you insert code in your pages and color it for you. Plenty of languages are supported (even the ones you even don’t know they exist) so you should be able to find everything you’re looking for.
Check out Ace for the live coder in you
Not all devs are created equal–some of us are geeks, and some of us are non-geek developers. Regardless, we all code, right? So why not try live coding or integrating an editor into your web page or app? Well, if you find a use case for this, then you’ll need a good editor. I found out about Ace, part of the powerful, web-based Cloud9 IDE, which you can integrate into your own pages to bring a lot of the features you’ll find on any desktop IDE. So if you need something like that feel free to get, integrate and enjoy it.
Try TagCanvas and D3 for interactive tag clouds
Go on a tour with Intro.js
Imagine you’re a powerful geek that wants to demonstrate how to develop in JavaFX. You want to make it step by step, but in PowerPoint, how do you do that? (Hint: slide after slide) Well, even my grandma would find this to antiquated. You’re in web apps, so do it that way. I’ve found Intro.js that allows you to make beautiful tours of your app. Start with that, next do this and finally the awesomeness is this little box. It’s really very interactive and you will amaze your readers/audience.
Polyglotism is pretty much here to stay, so you can be all hardcore and refuse to learn about heavily-embraced technologies, standards and languages if you want to, but at your own risk. I hope this short overview of these 12 tools was useful to you, and please let me know your thoughts in the comments below or by tweeting @twasyl. Happy coding!