Animated Stripes on Bootstrap Buttons

Bootstrap has many classes that allow us, developers, to make and customize the components into awesome forms, but in my opinion, one of the most nice things that I can easily add in my forms is the animated stripes on background buttons, giving that nice effect of “loading” thing:

animated stripes background

This effect is not native on the bootstrap 4, but it can be add with the following code:

.btn-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.btn-striped.animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  -moz-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

With these two css classes you don’t need to worry about other properties like hover, disabled and focused because the stripes works on background and over the alpha channel of the native colors of bootstrap 4.

To use the classes, just declare it to your css file (or section) and add it to your button or link as this:

<a href="#" class="btn btn-warning btn-striped">Not Animated</a>
<a href="#" class="btn btn-success btn-striped animated">Animated</a>
Advertisements

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.

 

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.