Web Code Helpers Coding Blog, Angularjs Tutorials, html5, css, jQuery, Ajax, javascript, html, examples and Demos Web CodeHelpers

MAC Sublime Text IDE Shortcuts / Cheat Sheet


Useful Shortcuts for MAC Sublime text user

General

⌘ + ⇧ + PCommand Palette
⌘ + PGoto Anything
⌘ + RGoto Symbol
⌘ + NNew File
⌘ + SSave File
⌘ + ⇧ + SSave File As
⌘ + ⌥ + SSave All
⌘ + OOpen File
⌘ + WClose File
⌘ + ⇧ + TReopen Closed File
⌘ + ⇧ + NNew Window
⌘ + ⇧ + WClose Window
⌘ + K, ⌘ + BShow Sidebar
⌃ + `Show Console
⌘ + ⌃ + FEnter Full Screen
⌘ + ⌃ + ⇧ + FEnter Distra­ction Free Mode

Search / Replace

⌘ + FFind
⌘ + GFind Next
⌘ + ⇧ + GFind Previous
⌘ + IIncrem­ental Find
⌘ + ⌥ + FReplace
⌘ + ⌥ + EReplace Next
⌘ + ⌥ + GQuick Find (searches for the word under the cursor)
⌘ + ⌃ + GQuick Find All (selects all occurences of the word under the cursor)
⌘ + EUse Selection for Find
⌘ + ⇧ + EUse Selection for Replace
⌘ + ⇧ + FFind in Files (all open files)
F4Next Result (file search results)
⇧ + F4Previous Result (file search results)

Sublime Text 3 Code Editor - IDE


  1. An integrated development environment (IDE) or interactive development environment is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger.

Sublime Text is a Best IDE for  code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.

Download Link for Sublime Text 3 IDE are below

Coding RESTful API Call using Jquery

In this tutorial we are going to discuss about doing a RESTful API call using Jquery with example

Using Jquery Ajax we can do the RESTful API call, We can render the data JSON / XML in the webpage / webapplication

jQuery Ajax function basically performs an asynchronous HTTP request with parameters

  • type is the request method. Possible values can be GETPOSTDELETEPUT, etc. Here we are making a "GET" request.
  • url represents a resource on the web. In our case, we are providing service URL.
  • datatype specifies the type of data returned from server, i.e., xml, text, html, script, json, jsonp.
  • success is the callback function that will be invoked when request gets completed.
  • error is also a callback function that will be called in case of request failure.





The above code will the show the demo how we call the RESTapi using jquery

Success Call back will hold the Success data of response

Error Call back will hold the Error data




AngularJs ChromeExtensions for Development

In the article we like to list out the chrome-extensions which are useful for angularjs development

1. AngularJS Batarang
Description : Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.




2. ng-inspector for AngularJS



Inspector pane for AngularJS apps : ng-inspector is a browser extension that displays an inspector panel showing the AngularJS scope hierarchy in the current page in real time, as well as which controllers or directives are associated with which scope. Hovering over a scope in the inspector will highlight the DOM element that scope is attached to. Clicking on a model will console.log that model's contents. The extension adds a button next to the address bar with the Angular logo that toggles the pane on and off.


AngularJs Based SPA [Single Page Application] with Example


AngularJs Based SPA [Single Page Application] with Example

Users Management Module in  AngularJs Based SPA [Single Page Application]

In this example i used bootstrap CSS ,  AngularJs for SPA and JSON Data

In the current Example , I explained about three Modules

1. Add Users
2. List Users
3. Search Users

Edit and Delete Users will in the Next Tutorial

In the below HTML page(index.html) we need to add bootstrap css and AngularJs Minified Code

Below Code add in the Index Page Body Area
Search:
Full Name Company Name Designation e-Mail edit delete
{{ name }} {{ cname }} {{ designation }} {{ email }}
{{ list.name | uppercase}} {{ list.cname | uppercase}} {{ list.designation | uppercase}} {{ list.email }} edit delete

CSS Page, In this page, we included the boot strap
CSS Code

Javascript [Users Based Controller ] ::



Google Chrome web authoring and debugging tools

Overview

The Chrome Developer Tools (DevTools for short), are a set web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

Note: If you are a web developer and want to get the latest version of DevTools, you should use Google Chrome Canary.

How to access the DevTools

To access the DevTools, open a web page or web app in Google Chrome. Either:

Select the Chrome menu  at the top-right of your browser window, then select Tools > Developer Tools, or
Right-click on any page element and select Inspect Element.
The DevTools window will open at the bottom of your Chrome browser.

There are several useful shortcuts for opening the DevTools:

Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.
For your day-to-day workflow, learning the shortcuts will save you time.

The DevTools window

The DevTools are organised into task-oriented groups in the toolbar at the top of the window. Each toolbar item and corresponding panel let you work with a specific type of page or app information, including DOM elements, resources, and sources.

Overall, there are eight main groups of tools available view Developer Tools: Elements, Resources, Network, Sources, Timeline, Profiles, Storage, Audits, and Console. You can use the Ctrl+[ and Ctrl+] shortcuts to move between panels.

Inspecting the DOM and styles

The Elements panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements. You will often visit the Elements tabs when you need to identify the HTML snippet for some aspect of the page. For example, you may be curious if an image has an HTML id attribute, and what that attribute's value is.



Working with the console

The JavaScript Console provides two primary functions for developers testing web pages and applications:

A place to log diagnostic information using methods provided by the Console API, such as console.log(), or console.profile().
A shell prompt where you can enter commands and interact with the document and the Chrome DevTools. You can evaluate expressions directly in the Console, and can also use the methods provided by the Command Line API, such as $() command for selecting elements, or profile() to start the CPU profiler.


Debugging JavaScript

As the complexity of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently. The Chrome DevTools include a number of useful tools to help make debugging JavaScript less painful.

Improving network performance

The Network panel provides insights into resources that are requested and downloaded over the network in real time. Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.


Audits

The Audit panel can analyze a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness. For further insight, we recommend also installing the PageSpeed extension.

Improving rendering performance

The Timeline panel gives you a complete overview of where time is spent when loading and using your web app or page. All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.


JavaScript & CSS performance

The Profiles panel lets you profile the execution time and memory usage of a web app or page. The Profiles panel includes a few profilers: a CPU profiler, a JavaScript profiler and a Heap profiler. These help you to understand where resources are being spent, and so help you to optimize your code:

The CPU profiler shows where execution time is spent in your page's JavaScript functions.
The Heap profiler shows memory distribution by your page's JavaScript objects and related DOM nodes.
The JavaScript profile shows where execution time is spent in your scripts

Inspecting storage

The Resources panel lets you inspect resources that are loaded in the inspected page. It lets you interact with HTML 5 Database, Local Storage, Cookies, AppCache, etc.

Useful Chrome Extensions for Web Developers

WhatFont - Google Chrome Extension




The easiest way to identify fonts on web pages

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.


What Font Chrome Extension Link

Screen ruler - Google Chrome Extension 



A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.

Get pixel perfect with horizontal and vertical draggable rulers; pixel, picas and type measurements, line height guides and stroke widths. Move ruul with arrow keys, one pixel at a time, and use multiple ruul together. Ruul have 4 different coloured ruul, steel and wooden ruul included.

"Every Web designer or Developer should have One"

Screen ruler Chrome Extension Link 

Screen Capture - Google Chrome Extension




Capture visible content of a tab, a region of a web page, or the whole page as a PNG image. Support horizontal and vertical scroll…

It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image.

You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported.

What set this extension apart are: Super fast when capturing page image, esp. for large pages; Support horizontal scroll for large pages that do not fit in one tab screen horizontally; Intelligently detect floating objects on a page and avoid repeating capture of the same floating objects if whole page capture requires scrolling; Works on Windows, Linux and Mac

Screen Capture Chrome Extension Link 

Image Downloader - Google Chrome Extension


If you need to bulk download images from a web page, with this extension you can: See images that the page contains and links to, Filter or sort them by URL; also supports wildcards and regular expressions, Optionally show only images from links, Select images for download by either using the checkboxes or directly clicking on the image, Dedicated buttons to download or open in new tab individual images, Customize display width, border size, style and color, Hide filters, buttons and notifications you don't need
When you press the "Download" button, all selected images are saved to the default download directory of Chrome. If you don't have one, you will have to manually choose the save location for each image.

Evernote Web Clipper - Google Chrome Extension


RescueTime is a personal-analytics service that helps you understand how you spend your time.
From interests to research, save anything you see online—including text, links and images—into your Evernote account with a single click. With one click, clip part or all of any webpage, including text, images, and links. Collect everything that inspires you online. Have it forever, even if the original goes away.

Evernote Chrome Extension Link 

RescueTime- Google Chrome Extension


RescueTime is a personal-analytics service that helps you understand how you spend your time.RescueTime is a personal-analytics service that helps you understand how you spend time on your computer, smartphone and tablet. There is no manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.

Rescue Time Chrome Extension Link 

Pinterest - Google Chrome Extension


Discover, collect, and share inspiration.Pinterest is a tool to find your inspiration and share it with others. Use it to collect things you love, organize and plan important projects, and more.The official Pinterest extension for Google Chrome adds a button to your browser that lets you pin from any website, quickly and easily

Pintrest Chrome Extension Link 

Web Developer - Google Chrome Extension

Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

Stylebot - Google Chrome Extension


Adapt the web's appearance

Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).
You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.


Alexa Traffic Rank - Google Chrome Extension


The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.Alexa Traffic Rank is Alexa Internet's free extension for Chrome, and is the only extension that includes you in Alexa's traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.
Get quick and easy access to a site's Alexa Traffic Rank and sites linking in. How does this site's traffic compare to other sites on the Web?

Alexa Traffic Rank Chrome Extension Link 

Eye Dropper - Google Chrome Extension

Eye Dropper is open source extension which allows you to pick colors from web pages.Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

Eye Dropper Chrome Extension Link 

Resolution Test - Google Chrome Extension


An extension for developers to test web pages in different screen resolutions.An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here - http://browsersize.googlelabs.com/

Resolution Test Chrome Extension Link

Speed Tracer  - Google Chrome Extension


Get insight into the performance of your web applications.Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by: Javascript parsing and execution, Layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading, Timer fires, XMLHttpRequest callbacks, Painting and more.

Speed Tracer Chrome Extension Link

Firebug Lite - Google Chrome Extension

Firebug Lite for Google Chrome, supported by the Firebug Working Group.Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.For more detailed information, visit:http://getfirebug.com/releases/lite/chrome/

Firebug Lite Chrome Extension Link

Corporate Ipsum- Google Chrome Extension


Generate random corporate double-speak for use as filler text.A lorem ipsum generator with a corporate bent.Generates filler content by the word or paragraph.This is a clone (with permission) of Brian Haslanger's Corporate Ipsum dashboard widget for Google Chrome.Efficiently seize integrated vortals with installed base methodologies. Synergistically orchestrate leveraged data with intuitive action items. Proactively develop tactical services and interoperable networks. Efficiently create enterprise potentialities whereas interoperable e-commerce. Globally fabricate worldwide solutions via principle-centered human capital.
Planned additions: Copy output as HTML, Configurable number of sentences per paragraph.opy-output-as-html, and configurable number of sentences per paragraph.

Corporate Ipsum Chrome Extension Link

Subscribe updates via Email