Password Strength Meter – Javascript

meter

This past week I’ve been working on a javascript script that should be able to identify the most common bad habits of password typing, and I did it because most of the password strength scripts did not fit my expectations.

When developing a form to setup the user’s password it’s always a big spend of effort worrying about how I should warn the user about the weakness points of it’s password.

So I made a research and among many password strength sites I have found the passwordmeter.com which have a great set of items checked on the algoritm. Unfortunately the website does not provide a tool to add it in our web projects, so I decided to to make a script based on it.

The idea was to make a resource which can be easily add to web projects, so I’de choose Javascript and JQuery as the base of the project.

The finished script provides more than 15 verification items on password safety and can be fount at my github account free of charge.

 

Advertisements

New Skype On Linux – 8.5.76

A few time ago the skype app has changed (a lot) it’s layout and the way that it expresses to the user, with new icons, gifs and other new stuff.

The new layout is not a big difference for me, and don’t encouraged me to install it, but recently, microsoft sent me an email saying that after 4th September the old skype version will not work anymore, so, I give it a try.

Fortunately this time linux received early the last update from this new version. It is still even not a “beta” version, it is a “preview” version, but it worked surprisingly perfect for chatting, voice and video calls. I feel that this version is better than the last one “beta”.

My linux distribution is the Elementary OS and it worked very well, despite some comments on forums that it may crash sometimes on other distros.

Until now this version seems to be very stable, but I still didn’t find the option to change my status, maybe it’s not used anymore. 😦

I cannot found the download link at the official skype site, instead of that I found it at microsoft forum which have the packages in RPM or DEB formats.

Remember to uninstall the old version before installing this one.

types of coders – clean code

On all these years (about 20) working with many developers, with different styles of coding and different languages, I saw people doing some strange and funny things, also some bad and good practices.

beyhond-comprehension

After a lot of time dealing with these kind of developers I had the chance to read a very nice book called Clean Code which have many suggestions about how to write a clean and readable code with contribution of some great names of the development history like: Bjarne Stroustrup, inventor of C++, Kent Beck’s author of Implementation Patterns, Grady Booch, author of Object Oriented Analysis and Design with Applications, Dave Thomas, founder of OTI, godfather of the Eclipse strategy, and others.

clean-code

After reading that book I always keep an eye on my code to keep it as clean as possible, and also, I remember all that weird codes from the past that I would like to list below:

  • The never grows developer:
    • When we start learning how to develop, we always have some sample code like x = y + 1 or i++, but these are only samples for the beginers and does not mean that the developer should continue to use x, y and i as constant and variable names.
    • Also, the never grows developer, always try to use the same functions and procedures to solve modern problems which probably already have a function or some kind of library to do that;
  • The no indent developer:
    • This comer from the newbies developer which does not have indentation on code, believe it still happens, specially these days with script languages where everyone tries to put everything in just one line;
  • The no comments developer:
    • This one never puts a comment in the code, even if the code looks like:
      function calculate (p, y, v) {
      return ((p+y*v)^3 ? true : 0);
      }
  • The comment all developer:
    • This one is also so bad as the no comments developer:
      function save (userName) { // functionsave the user name
      var name = userName; // get the user name paramenter
      saveToDatabaseFunction(name); // save the name on database
      result true; // always return true after saving
      }
  • The no-name vars:
    • This kind of developer likes to solve the problem without worrying about who will come after him/her:
      test = array();
      x = (s>0 ? s : 1);
      for (i=0; i++; i<=x){
      test[i] = x*2;
      }
      test ? x ? i?
  • The all-in-one file developer:
    • This one does not worry about the classes names or the structure of the project, this developer only creates a file called functions or util and add code and functions and classes there.
  • The economic developer:
    • This one still thinks that our computers have only just 640K of memory or that our internet bandwidth is about 9600bps. This developer usually tries to do all in just one line:

      if (getContentFromForm() + (X[j]+X[i]) * (Y[j]-Y[i]) > 0 ? (Xj Yj - Xi Yi) + (Xi Yj - Xj Yi) : Xj Yj - Xj Yi + Xi Yj - Xi Yi)){ result (Y[j]-Y[i]); }

Many strange things came and I believe that many more will come. Until there I keep reading and practicing to do the best that I can.

Do your best also, maybe we will read our code.

A Very Simple API 

development-api

There comes a time in the life of a developer where he/she is forced to deal with an API, be a desktop or a web developer, in some time it will be necessary.

hot-head

Also, maybe, the developer will need to create it’s own API and then is where the things get a little bit difficult. There is a lot of concerns, discussions and suggestions around API standards but none of them are still the definitive right way to build an API, so as always each developer builds the code as it wants.

For me, everytime that I need to deal with a webservice, I study a lot, check the new standards look at the client needs and make the best effort to make the most light and precise services that the client wants. But thats the hard way, the easy way should be, to unpack a generic API code adjust some settings and start to delivery services… Should be like this.

crazyHarry

There are some nice tutorials and tools on internet about building an API, like with laravel and with apigility, but almost all have some framework dependencies and then I though in something more simple, just with the basic stuff, why not?

 

Considering all that, and on all the effort spend on every new webservice, I decided to make a very simple API pack with the basics to make a webservice to work, so here is what I tried to covered:

  • Auto detect XML-RPC or REST request;
  • Standard formated XML or JSON automatically (depending of the request);
  • Automatic deal with errors and/or warnings (saving in a log);
  • Resources to return standard field answers on requests;
  • Code injection protection;
  • Method request control and run according to the operation method request (POST, GET, PUT, DELETE, OPTIONS, PATCH);
  • Versioning control;
  • URL friendly following at least level 2 maturity level;
  • Start point to build my own custom webservice methods;

It’s not easy to cover all the resources of an API and still keep the code simple and dependencies free but I tried. In the end the result was very good but still have some work to do.

The code is avalibale on my github account and it’s free to use and to contribute. Note that this is not the “state of art” and any kind of contribution will be welcome.

The very simple API pack worked just fine and  can be used on every new project with just a few lines of set up on an specific settings file. Also, the use is very simple:

  1. Extend the main class AbstractService:
    class MyServiceName extends \classes\AbstractService
  2. Initialize the service with the needed settings:

    public function execute()
    {
    $this->initialize(['allowedMethods'=>[AMT_GET, AMT_POST, AMT_OPTIONS],
    'answerType'=>AST_AUTO]);
    }
  3. Add the code on the respective method and call the answer method:

    public function onPost()
    {
    //... your code here
    $this->answer([
    'message' => 'Here are the fields that the API received',
    'fields' => $this->getFields()
    ]);
    }
  4. Call the API from the browser:
    http://your-server-path/v1/MyServiceName

… and voilà!

vsapi-sample-answer
Sample JSON answer using AJAX on vsapi

Also, an error message:

vsapi-sample-error-answer
JSON error answer using AJAX on vsapi

And, a XML answer:

vsapi-xml-answer
XML answer using PHP on vsapi

PhoneGap Starter Kit

When I started to use the PhoneGap service to build mobile apps I had some dificulties on about where to begin or what should I use to get a very good looking app, even a simple “hello world” app was a bit difficult to do, so, here I will present a pack that I did with the basic stuff to start building a mobile app on PhoneGap.

cordova-phonegap-build

As covered in another post of mine, the PhoneGap is a handy tool that allow web developers to develop native mobile apps just using HTML, CSS and Javascript, for more details about the PhoneGap tool, take a look on that introduction.

The PhoneGap Starter Kit, as I like to call, is a pack with the very basic stuff to start a simple app throuh PhoneGap. This pack includes:

  1. Basic standard folder structure
  2. Index file ready to start
    • includes correct declaration of headers, script files, style files, meta tags
  3. File configuration to compile the app
    • icons, title, description, author
  4. Sample declaration of a plugin
    • needed to access native device resources (battery plugin in this case)
  5. Third party pop-up lib, bootbox
    • with bootbox is possible to add theme to the pop-ups instead of only using the native OS pop-up
    • Switch button style (to be more like device native)
  6. Bootstrap
    • Brings ease to start enviroment
    • Is resposive
    • Theme support
    • Accept many JS plugins
  7. Elements mods
    • Samples checkbox and selectbox modifications to looks like native device
  8. Dropdown Menu
    • Also responsive
  9. Custom Theme
    • Provided by Bootswatch just to show how to setup the theme

 

 

With this very basic kit is possible to compile a simple app on PhoneGap and start it nativelly on and Android, iOS or Windows Phone device.

Also, bellow are some additional links that can help on development:

  • Bootsnip: Many sample codes (forms, layouts, components)
  • Bootswatch: Theme gallery for bootstrap
  • Plugins: Plugins to interact with device resources
  • Cordova: Main lib of the PhoneGap

Mobile Development Using Javascript HTML5 and CSS3

Actually is hard to think in any new service without creating a mobile app, be a sales store, a social resource, any delivery service or even a game, all want to be present on mobiles.

Until some years ago, the ability to make a mobile app was just limited to those who knows C, C#, Java or yet other proprietary language, but than, comes the Adobe PhoneGap tools who give to all web developers the chance to build a native app using web coding knowledge.

build-diagram

The PhoneGap Service is free for building open-source apps through the github account, or in case of private projects the price depends of the plan. On free account the user can have at least one private project.

wms-framework-sample

The PhoneGap uses the Apache Cordova lib and a web based rendering engine to make possible to run the HTML, CSS and Javascript content. The tools provided also includes a lot of plugins that makes possible the comunication to native resources of mobile devices like: giroscope, camera, contacts, files and all that native stuff without worring about the coding language, just add the plugin and code in javascript.

phonegap-architecture

Basically, to get started, the developer just need to make or have an Adobe Id and subscribe to the PhoneGap Enviroment. After that the developer can download the desktop tools to build, compile and test the developed apps. Also, instead of download any software, it’s possible to code a native web app and upload a zip file to the PhoneGap Enviroment just to compile.

The online PhoneGap Compiler is fast, accepts to compile with your developer key and also gives a QRCode to download teh compiled app to test.

The PhoneGap compiler actually can build apps for Android, iOS and Windows Phone, which is very handy.

 

Developing for Elementary OS – Setup and Compiling

Weekends are a great time to enjoy doing what you like to do, ins’t it? I like to code and read and learn new technologies, experience new computer languages, so past weekend I did something that I was planning to do a long time, try to code something to Elementary OS.

Why the Elementary OS? Well, first of all, I like to try new tech stuff, in second, the Elementary OS makes me feel good to use, a strange feeling, different from using another linux distro. I don’t know, I think I’m in love for it…. ok, let’s stop with this bullshit and back to develop.

elementarylogo

Basically, the Elementary OS is over GTK 3 and uses Vala as main language (or not a language) to develop it’s applications. The Elementary “Getting Starter” section for developers already conduces you through very detailed steps to build your first app and to get involved with this magic enviroment.

In the end you get a very nice hello world simple app and a few resources. It’s a very nice experience to see your work running natively.

hello-world-vala-elementary-os

But I found that the steps are too much detailed, not that it’s bad but sometimes I would like to do it more quickly as I already know many of these basic stuff. Also, in sometimes I felt a little lost, so in the end, I decided to make a simple to-do list of the summary of how to setup a new enviroment to a new project, check it out:

  1. sudo apt install elementary-sdk
    It will install all dependencies to compile your app.
    Just need to do this step at the first time, don’t need it on your second project.
  2. create your project folder and sub-folders:
    ./project
    ./project/src
    ./project/build
    ./project/data
    ./project/po
  3. create the main project file:
    ./project/project-main-file.vala
  4. Add sample content on your .vala file:
    int main (string[] args) {
       Gtk.init (ref args);
       var window = new Gtk.Window ();
       window.title = "Hello World!";
       window.set_border_width (12);
       window.set_position (Gtk.WindowPosition.CENTER);
       window.set_default_size (350, 70);
       window.destroy.connect (Gtk.main_quit);
       var button_hello = new Gtk.Button.with_label ("Click me!");
    
       button_hello.clicked.connect (() => {
       button_hello.label = "Hello World!";
       button_hello.set_sensitive (false);
     });
     
     window.add (button_hello);
     window.show_all ();
     Gtk.main ();
     return 0;
    }
  5. create the CMakeLists file:
    ./project/CMakeLists.txt
  6. Add the basic content on the./project/CMakeLists.txt, copy it from:
    https://elementary.io/pt_BR/docs/code/getting-started#the-build-system
  7. Change the following content on the ./project/CMakeLists.txt to fit your project:
    should be on line: 39 ===> # files we want to compile
  8. Change the following content on the ./project/CMakeLists.txt to define your executable file name:
    should be on line: 17 ===> set (EXEC_NAME “com.github.yourusername.yourrepositoryname”))
  9. Add translation information to the ./project/CMakeLists.txt, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#Adding-Translations
    (step 2)
  10. Create the translation CMake file file:
    ./project/po/CMakeLists.txt
  11. Add content to the translation file ./project/po/CMakeLists.txt, from:
    https://elementary.io/pt_BR/docs/code/getting-started#Adding-Translations
    (step 3)
  12. Create the base for your shortcut app file:
    ./project/data/com.github.yourusername.yourrepositoryname.desktop
  13. Add content on .desktop file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#the-desktop-file
  14. Create the App Center File information, on:
    ./project/date/com.github.yourusername.yourrepositoryname.appdata.xml
  15. Add content on .appdata.xml file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#appdata
  16. Create your author’s file info, on:
    ./project/AUTHORS
  17. Add content on ./project/AUTHORS file, copy from:
    https://elementary.io/pt_BR/docs/code/getting-started#legal-stuff
  18. creating cmake information, run on ./project/build:
    cmake -DCMAKE_INSTALL_PREFIX=/usr ../
  19. creating the translations, run on ./project/build:
    make pot
  20. compiling your project, run on ./project/build:
    make
  21. finally run your compiled project:
    ./project/build/executable-filename-defined-on-cmakelists

 

Also, I want to share some useful links that I found it may help you to save some time:

The ValaDoc Reference: The references for all commands and functions that you will need to make a Vala app.

The Vala Tutorials: A lot of tutorial codes, file manipulations, fields, components and more.

Elementary OS sample libs: A preview of the Elementary OS lib components

Elementary OS widgets: The native OS components to use on the apps

GTK3 Icons reference: May be you need this

The DoodleSpark reference to Elementary OS Icons