How cheat sheets can make your life as a software developer easier.

Memorizing everything you might need is not always a good and possible idea. You cannot remember everything for sure. You might a few commands and syntax but for everything else you will have to google at some point of time. Googling can also be hectic as you might not find exactly what you are looking for. So, its better to bookmark some really useful site like Oh My Cheatsheet. You can find things you need only click away. It really speeds up you work.

Oh My Cheat sheet

Best place find hints of most popular programming and Markup languages you know. We have cheat sheet for HTML, CSS, Javascript, Ruby, Python, Font Awesome, Material Design Icons. All the nut-bolts related to these languages are found here.


HTML 5 Logo

HTML (HyperText Markup Language)

The most basic building block of the Web. It defines the meaning and structure of web content.We can compare HTML with the Skeleton system of our body.


 GOTO CHEATSHEET


CSS 3 Logo

Cascading Style Sheets

CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScriptWe can compare CSS with the Muscular and De system of our body.


 GOTO CHEATSHEET


jQuery Logo

jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of May 2019, jQuery is used by 73% of the 10 million most popular websites.


 GOTO CHEATSHEET


Ruby Logo

Ruby

Ruby is an interpreted, high-level, general-purpose programming language. It was designed and developed in the mid-1990s by Yukihiro “Matz” Matsumoto in Japan. Ruby is dynamically typed and uses garbage collection.


 GOTO CHEATSHEET 

TRY RUBY NOW IN CODE EDITOR


Font Awesome Logo

Font Awesome

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with Bootstrap, and later was incorporated into the BootstrapCDN. Font Awesome has a 38% market share among those websites which use third-party Font Scripts on their platform, ranking it second place after Google Fonts.


 GOTO CHEATSHEET


Material Design Logo

Material icons

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.


 GOTO CHEATSHEET


ES6 Logo

ECMA Script 6

ECMAScript is a scripting-language specification standardized by Ecma International. It was created to standardize JavaScript to help foster multiple independent implementations. JavaScript has remained the most widely used implementation of ECMAScript since the standard was first published, with other implementations including JScript and ActionScript.


 GOTO CHEATSHEET


Oh My ZSH Logo

Oh My ZSH

A delightful community-driven (with 1500+ contributors) framework for managing your zsh configuration. Includes 200+ optional plugins (rails, git, OSX, hub, capistrano, brew, ant, php, python, etc), over 140 themes to spice up your morning, and an auto-update tool so that makes it easy to keep up with the latest updates from the community.


 GOTO CHEATSHEET

jQuery Validation : Special Features Document

Order of the rules definition matters

# in CoffeeScript
"user[password_confirmation]":
  required: true
  equalTo: $('#user_password')
  minlength: 8
  maxlength: 16

and this behave different

# in CoffeeScript
"user[password_confirmation]":
  required: true
  minlength: 8
  maxlength: 16
  equalTo: $('#user_password')

the former one validates the password length at last, whereas later one validates integrity.

Highlight / Unhighlight

Can highlight fields and unhighlight when field is valid.

# in CoffeeScript
highlight: (element) ->
  $(element).closest('.form-group').addClass 'has-signup-error'
  return
unhighlight: (element) ->
  $(element).closest('.form-group').removeClass 'has-signup-error'
  return

 

# in CoffeeScript
# Trigger validation when focus is lost from the field
$(".new_user input, .new_user select").focusout (element) ->
  $el = $(this)
  if !$el.is('select') and element.value == '' and element.defaultValue == ''
    # for untouched text fields, don't validate on blur
    return
  $el.valid()
  return

 

you can also customize the regex to validate email fields

$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
};

See https://jqueryvalidation.org/jQuery.validator.methods/

 

Validation of hidden fields

This feature will be useful specially for checkbox. You usually decorate your checkboxes and radios using CSS and hide the original input field. By default jQuery Validation skips validation of hidden items.

You can use the :not() selector combined with :hidden to activate validation for specific hidden items:

ignore: ":hidden:not(.my_item)"

Example:

$('.edit_vehicle_owner').validate({
  ignore: ":hidden:not(#vehicle_owner_agreed_to_terms_and_condition)",
  
  rules: {
    "vehicle_owner[first_name]": {
      required: true
    },
    "vehicle_owner[agreed_to_terms_and_condition]": {
      required: true,
    }
});

JavaScript : jQuery : Best way to add Event Handlers makes debuging easy

I work on Rails project with 20+ javascript files. I even have implement the Javascript/script response using the js.erb template. Also, I am using jQuery instead of the vanillaJs to code easily. These days I figured out that in developer mode in browsers its impossible to find the actual event handler function by pointing at any node element. It was awesomely easy when there was no jQuery or any other library. Continue reading

Browser support for HTTP request methods like PUT/DELETE/PATCH

HTML forms (up to HTML version 4 and XHTML 1) only support GET and POST as HTTP request methods. A workaround for this is to tunnel other methods through POST by using a hidden form field which is read by the server and the request dispatched accordingly.

However, GET, POST, PUT and DELETE are supported by the implementations of XMLHttpRequest (i.e. AJAX calls) in all the major web browsers (IE, Firefox, Safari, Chrome, Opera).

Sources:

http://stackoverflow.com/questions/165779/are-the-put-delete-head-etc-methods-available-in-most-web-browsers

Ruby On Rails: ClientSideValidation : validation message persists after you change value programaticallyils

You use Rails4ClientSideValidation gem to validate you forms.
 

Problem:

When you programatically change the values of the required fields or any fields with some sort of validation such as ’email’ or ‘phone_number’, the validation message does not disappear.
Continue reading

jQuery DataTables : Ruby On Rails : Sorting of date/time column in any format : Type based sorting

//cdn.datatables.net/plug-ins/1.10.7/sorting/datetime-moment.js

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.numericComma.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable( {
            "columnDefs": [
                { "type": "numeric-comma", targets: 3 }
            ]
        } );
    } );
</script>
$.fn.dataTable.moment( '%B %e, %Y' ); // Format I used for date
$targetTable.dataTable({ /* Disable initial sort */
 "aaSorting": [],
 "order": [],
 "aoColumnDefs": [
   {
   'bSortable': false,
   'aTargets': ['action']
    }, 
   {
   "type": "datetime-moment", //use moment.js to calulate and sort date col
   targets: ['created-on', 'last-sent-on', 'date-applied']
   }
 ],
 'iDisplayLength': 10
});
<table id="bench-applicants-table">
 <thead>
 <tr>
 <th><%= t(:id) %></th>
 <th><%= t(:name) %></th>
 <th><%= t(:job_applied) %></th>
 <th><%= t(:status) %></th>
 <th><%= t(:number_of_email_sent) %></th>
 <th class="last-sent-on"><%= t(:last_sent_on) %></th>
 <th class="action"><%= t(:action) %></th>
 </tr>
 </thead>

similarly,
<th class="created-on"><%= t(:created_on) %></th>

Source: http://datatables.net/plug-ins/sorting/datetime-moment

http://datatables.net/plug-ins/sorting/