Friday, September 25, 2015

5 Best Free Alternatives To Microsoft Visio

1. LucidChart

LucidChart
If you are looking for a web based alternative to Microsoft Visio, LucidChart is the perfect choice. It provides a drag and drop web interface to draw any kind of diagram. LucidChart gives you an option to build your diagrams in collaboration with your team. Multiple people will be able to work with the same diagram making it the perfect choice for small teams. One of the great features of LucidChart is that it can export or import Microsoft Visio vdx files very easily in your LucidChart account. One thing that is missing in LucidChart is the built in categorization of different shapes for different areas like networking, engineering etc. You don’t need to signup for an account on LucidChart. You just have to open the site and start drawing.

2. OpenOffice/LibreOffice Draw

LibreOffice Draw
OpenOffice Draw and LibreOffice Draw are two separate software but since their usage and functionality is very similar, I would mention them together. These are the closest and the biggest open source competitors ofMicrosoft Visio. Draw is an all purpose drawing, diagramming and charting tool. The feature that I love in Draw is the grouping feature. You can easily group different objects together and then do different actions on the group like moving the group, connecting with other groups etc. In addition to other formats (XML format is the default), you can also export your diagrams as SWF Flash files.

3. Dia

Dia
Dia is an open source software very similar to Microsoft Visio. When you start it for the first time, you will see that the user interface resembles with Visio a lot. The feature set of dia is also very similar to Visio. You can create UML diagrams, flowcharts, network processes and architectures, entity relationship diagrams etc. easily with Dia. The default file format for any file created with Dia is .dia but there are a lot of file formats that you can export your diagram including Microsoft Visio vdx format.

4. Diagramly

Diagramly
Diagramly is another web based diagramming and mind mapping software. It has a very responsive and easy to use interface with the tools on the left hand column and the drawing on the right hand column. You don’t need to signup for an account to use Diagramly. You can just visit Diagramly and start working on your diagram or mind map. When finished, save the diagram in an XML file locally on your computer. If you need to edit the diagram again, just visit Diagramly again and open your locally saved file for further editing.

5. Pencil Project

PencilProject
Pencil Project is an Open Source alternative to Microsoft Visio which is actively maintained by the development community. Their goal for Pencil Project is to make it a tool to make diagramming as easy as possible and usable for everyone from a newbie to an expert. It is very similar to other desktop based tool with a distinction that it can be installed as a Firefox extension so that you can easily create your diagrams while browsing the Internet.
I hope you will find these free alternatives to Microsoft Visio very useful and I would like to have your thought on how much these free software have been able to replace Visio in your work?
Source: https://www.maketecheasier.com/5-best-free-alternatives-to-microsoft-visio/ 

Friday, September 18, 2015

Getting Started With Javascript Debugger in Chrome

When getting started with js, one of the first debugging techniques you learn is console.log to see what’s going on. For a variety of reasons, this behaviour sticks. It’s time to level up my friends! There is a better way - the Chrome Javascript debugger.

Here is a gentle introduction to the js debugger, and an example of some neat things you can do with it.
Based on a true story, but I’ve simplified things in this case :)
Below is the script we will be debugging. The problem in this case is clear (the extra \n in value). We’ll go through the steps you would use to find this problem with the debugger. You can load this script and follow along: http://meeech.amihod.com/debug.html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//Pretend this value returned from a remote source
var value = "hang\n";

setInterval(function(){
    switch(value) {
      case 'hang':
        document.body.innerHTML = "Hang in there!";
        break;
      case 'up':
        document.body.innerHTML = "Up";
        break;
      default:
        document.body.innerHTML = "No good!";
    }
},1000);
Pretend value is actually coming from a remote source. You inspect the response and don’t notice the carriage return.
We’re expecting that our script will show “Hang in there!”, but instead, we keep seeing “No good!”.
  • Open your Developer Tools (View > Developer > Developer Tools)
  • Click on the Source tab. Here is where you can find all the scripts running on a page. [The sidebar might not be showing- make it show by clicking on the arrow]. Select the debug.html page.
  • You should now see something like this:
  • First thing we want to do is see what the switch statement thinks its value is. Let’s go ahead, and add a breakpoint. To add a breakpoint, click on the line number - in this case, line 6. The blue mark is showing a breakpoint. Even if you reload the page, the breakpoint will remain.
  • The script will now pause when it hits the breakpoint - you now see a red mark.
  • Right-click on value, and select “Add to Watch”
  • Over on the right in Watch Expressions, you now see value. And you can clearly see the carriage return symbol that’s part of value.
And we’ve found our problem. But that’s not all! While we’re here, let’s just make sure our switch statement works, given the right input. We can change what’s inside valuewithout reloading the script.
  • Right-click on value and select “Evaluate in Console”.A console should open
  • Inside the console type value='hang'. Then, start the script running again by click on the Play button over on the right.You should now see “Hang in there!” on the page, and the script will pause again at the breakpoint. This time, put value='up' and click the Play button again.
This only scratches the surface of what you can do in the debugger - click around the panels on the right. Hopefully this will help you get started using it.
Source: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/