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

HTML, CSS : Beautiful radio and checkboxes

Radio:

There are two ways you can put label on radios

  • Put for="id_of_your_radio" in the label tag
  • Put the radio inside of lable tag; no need of for attribute. It will be implicit
    • <label>
       <input id="sex-other" type="radio" name="sex" value="others" /> Other
      </label>
    • This technique is more cleaner, intuitive and maintainable from my perspective.

Our Target:

The basic idea is: we want to modify the label according to our design demands. But the later technique explained above has label as parent to input tag; CSS has limitation; we cannot select parent on the basis of child. In our case child (input) changes events and need to modify the label.

So going with the former technique

 

See here for More details

https://ws.cuanswers.com/wp-content/uploads/html...html.jpg

What is HTML? Its definition

The HTML stands for HyperText Markup Language.

What is HyperText?

Hypertext is text which contains links to other texts. The term was coined by Ted Nelson around 1965 (see History ).

HyperMedia is a term used for hypertext which is not constrained to be text: it can include graphics, video and sound , for example. Apparently Ted Nelson was the first to use this term too.

Hypertext and HyperMedia are concepts, not products.

What is Markup?

Markup is detailed instructions, usually written on a manuscript to be typeset, concerning style of type and makeup of pages. 

So, HTML is concept of enhancing the visual appearance of the HyperText.

 

Dynamically change HTML tag of elements

/**
 * Author: Shiva Bhusal
 * website: cbabhusal.wordpress.com
 * This function replaces the DOM elements's tag name with you desire
 * Example:
 * replaceElem('header','ram');
 * replaceElem('div.header-one','ram');
 */
function replaceElem(targetId, replaceWith){
 $(targetId).each(function(){
 var attributes = concatHashToString(this.attributes);
 var replacingStartTag = '<' + replaceWith + attributes +'>';
 var replacingEndTag = '</' + replaceWith + '>';
 $(this).replaceWith(replacingStartTag + $(this).html() + replacingEndTag);
 });
}
replaceElem('div','span');
/**
 * This function concats the attributes of old elements
 */
function concatHashToString(hash){
 var emptyStr = '';
 $.each(hash, function(index){
 emptyStr += ' ' + hash[index].name + '="' + hash[index].value + '"';
 });
 return emptyStr;
}
Codepen link : 

What does enctype=’multipart/form-data’ mean in a form

HTML forms provide three methods of encoding.

  • application/x-www-form-urlencoded (the default)
  • multipart/form-data
  • text/plain

The specifics of the formats don’t matter to most developers. The important points are:

When you are writing client-side code, all you need to know is use multipart/form-data when your form includes any <input type="file"> elements.

When you are writing server-side code: Use a prewritten form handling library (e.g. Perl’s CGI->paramor the one exposed by PHP’s $_POST superglobal) and it will take care of the differences for you. Don’t bother trying to parse the raw input received by the server.

IE Only Style sheets

<!–[if !IE 6]><!–>

<link rel=“stylesheet” type=“text/css” media=“screen, projection” href=“REGULAR-STYLESHEET.css” />

<!–<![endif]–>

<!–[if gte IE 7]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”REGULAR-STYLESHEET.css” /> <![endif]–>

<!–[if lte IE 6]>

<link rel=”stylesheet” type=”text/css” media=”screen, projection” href=”http://universal-ie6-css.googlecode.com/files/ie6.0.3.css&#8221; />

<![endif]–>