amitabhaghosh197
12/31/2015 - 1:32 PM

Usefull links

Usefull links

webfont_htacces.md
content_copyfile_download
  • Rendered
  • Source
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# allow access from all domains for webfonts
# alternatively you could only whitelist
#   your subdomains like "sub.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

# webfont mime types
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff              woff

# webfonts and svg:
<IfModule mod_deflate.c>
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

Reff:

  1. https://gist.github.com/WheresAlice/843983
  2. https://github.com/fontello/fontello/wiki/How-to-setup-server-to-serve-fonts
usefull-links.md
content_copyfile_download
  • Rendered
  • Source

###Fit image :

http://www.jqueryscript.net/other/jQuery-Plugin-To-Make-Images-Fit-Into-Any-Container-Fit-Image.html

###Jquery Image resige:

  1. http://www.jqueryscript.net/tags.php?/Resize/

  2. http://www.jqueryscript.net/other/jQuery-Plugin-To-Resize-Crop-Image-To-Fit-Any-Wrapper-Fill-Box.html p ###Mosaic grid:

  3. https://github.com/kombai/freewall

  4. https://github.com/sapegin/jquery.mosaicflow

###Grid jQuery Plugins

http://www.jqueryscript.net/tags.php?/grid/

###Image CSS:

  1. http://stackoverflow.com/questions/12308022/center-dynamic-height-width-image-to-fixed-height-width-div

###Custom Scrollbar:

  1. https://github.com/malihu/malihu-custom-scrollbar-plugin
  2. https://github.com/inuyaksa/jquery.nicescroll

###SVG for all :

  1. https://github.com/jonathantneal/svg4everybody
  2. https://css-tricks.com/scale-svg/
  3. https://developer.mozilla.org/en/docs/Web/SVG/Element/use
  4. https://css-tricks.com/svg-use-external-source/

###Background Image fix another style:gu

  1. http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size

###Media Querries :

  1. https://github.com/amitabhaghosh197/css3-media-queries-boilerplate/blob/master/media_queries.css

  2. http://www.paulund.co.uk/boilerplate-css-media-queries

  3. DEvice Pixel Ratio : https://bjango.com/articles/min-device-pixel-ratio/

###Image jQuery:

  1. https://davidwalsh.name/get-image-dimensions

  2. http://stackoverflow.com/questions/9527945/find-largest-image

  3. http://codereview.stackexchange.com/questions/65311/check-image-dimensions-calculate-aspect-ratio-set-image-dimensions-resize

  4. http://stackoverflow.com/questions/29304695/jquery-to-find-img-size-and-set-to-div-css-height-and-width

  5. https://www.google.co.in/?gfe_rd=cr&ei=_4yUVseNLuzA8geFpaZI&gws_rd=ssl#q=get+image+size+of+each+image+in+jquery+of+same+parent+class

###jQuery each click:

  1. http://stackoverflow.com/questions/18966222/jquery-each-and-attaching-click-event
  2. http://www.sitepoint.com/jquery-each-function-examples/?utm_source=javascriptweekly&utm_medium=email

###Scroll:

  1. http://projects.lukehaas.me/scrollify/#home

  2. http://alvarotrigo.com/multiScroll/#first

###Mordenizr:

  1. http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/

  2. http://stackoverflow.com/questions/7808585/modernizr-testing

  3. http://www.html5rocks.cvom/en/tutorials/speed/html5/#toc-css3-translate

###Retina:

  1. http://www.sitepoint.com/css-techniques-for-retina-displays/

  2. http://www.hongkiat.com/blog/css-retina-display/

  3. http://stackoverflow.com/questions/15080663/is-there-an-extension-of-twitter-bootstrap-for-retina-display

  4. https://css-tricks.com/snippets/css/retina-display-media-query/

  5. http://graphicdesign.stackexchange.com/questions/33780/dpi-ppi-resolution-for-product-zoom-images

###Best way to image load jquery for all browsers

  1. http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached

  2. http://mikefowler.me/2014/04/22/cached-images-load-event/

Product Gallery:

  1. https://codyhouse.co/category/ux-patterns/

###Writing Plugin: lo

  1. https://jqueryboilerplate.com/

  2. http://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/

  3. https://john-dugan.com/jquery-plugin-boilerplate-explained/

  4. http://stackoverflow.com/questions/7149239/writing-jquery-plugins-using-classes-and-prototypes

  5. https://www.smashingmagazine.com/2011/10/essential-jquery-plugin-patterns/

  6. https://github.com/jquery-boilerplate/jquery-patterns

jquery.fn.extend

  1. https://api.jquery.com/jquery.fn.extend/

  2. http://stackoverflow.com/questions/13140292/what-does-prototype-mean-here-in-the-jquery-source-code

  3. http://www.w3schools.com/js/js_object_prototypes.asp

###Self executing annonymous functions :

  1. http://briancrescimanno.com/how-self-executing-anonymous-functions-work/

  2. http://stackoverflow.com/questions/4472528/javascript-jquery-closure-function-syntax

  3. http://stackoverflow.com/questions/1634268/explain-javascripts-encapsulated-anonymous-function-syntax/

  4. http://benalman.com/news/2010/11/immediately-invoked-function-expression/

###Difference between clientside and serverside :

  1. http://programmers.stackexchange.com/questions/171203/what-are-the-differences-between-server-side-and-client-side-programming

  2. http://stackoverflow.com/questions/15270648/client-side-scripting-and-server-side-scripting-languages

  3. https://www.upwork.com/hiring/development/how-scripting-languages-work/

###The HTML DOM Element Object

  1. http://www.w3schools.com/jsremenf/dom_obj_all.asp

Javascript modular Pattern:

  1. http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

  2. https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Print Styles:

  1. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

Gradient striped

  1. http://lea.verou.me/css3patterns/#diagonal-stripes
  2. https://dev.opera.com/articles/css3-linear-gradients/

###Best Icons

  1. http://www.cssauthor.com/line-icon-fonts/

Sticky Sidebars

  1. https://github.com/WeCodePixels/theia-sticky-sidebar

  2. http://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html

  3. https://github.com/mojotech/stickymojo

Window Scroll Top

  1. http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

  2. https://css-tricks.com/scrollfollow-sidebar/

###Bootstrap Tooltip

  1. http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click/9875490#9875490

  2. http://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working

###Ajax call on tootips

$(document).ajaxComplete(function() {
  $("#example").popover();
});

link:http://stackoverflow.com/questions/22277300/bootstrap-popover-not-working-when-loaded-with-ajax

Popover append to other sections

  1. https://github.com/twbs/bootstrap/issues/5889

ScrollTo with smooth scroll jQuery plugin + offset

  1. https://gist.github.com/anandkumar/11318494

Masonary like CSS only

  1. http://designshack.net/articles/css/masonry/

  2. http://codepen.io/AdamBlum/pen/fwrnE

  3. http://salvattore.com/

  4. https://jsfiddle.net/gabrieleromanato/tQANc/

https://github.com/rnmp/salvattore

Hexagon CSS

  1. http://themewinter.com/html/bizcraft/multipage/

  2. http://csshexagon.com/

  3. https://jtauber.github.io/articles/css-hexagon.html

Hero Sliders

  1. https://codyhouse.co/gem/hero-slider/

  2. http://www.jqueryscript.net/slider/Full-Width-jQuery-Image-Carousel-Plugin-foucs-js.html

Material design jQuery

  1. http://iamisti.github.io/mdDataTable/

Html Themes

  1. http://templated.co/

  2. http://startbootstrap.com/template-categories/all/

Smooth animated scroll

  1. http://plugins.compzets.com/animatescroll/
  2. https://github.com/fatlinesofcode/jquery.smoothwheel

Mosaic photo

  1. http://stylehatch.github.io/photoset-grid/

jQuery Parallax

  1. http://www.jqueryscript.net/animation/jQuery-Amazing-Scrolling-Presentation-Plugin-scrolldeck.html

  2. http://www.jqueryscript.net/demo/jQuery-Amazing-Scrolling-Presentation-Plugin-scrolldeck/

  3. http://www.jqueryscript.net/animation/Minimal-Full-Window-Page-Scrolling-Plugin-With-jQuery-naiveScroll.html

  4. http://www.jqueryscript.net/animation/Easy-Peasy-Parallax-Effect-with-jQuery-CSS.html

  5. http://pixelcog.github.io/parallax.js/

  6. http://www.jqueryscript.net/plus/search.php?keyword=parallax&searchtype=titlekeyword&channeltype=0&orderby=&kwtype=0&pagesize=10&typeid=0&TotalResult=106&PageNo=6

  7. http://www.jqueryscript.net/tags.php?/one%20page%20scrolling/

  8. http://www.jqueryscript.net/animation/Animate-Elements-In-When-They-Come-Into-View-jQuery-CSS3-Animate-It-Plugin.html

  9. http://impress.github.io/impress.js/

  10. http://www.jqueryrain.com/demo/jquery-side-panel-menu/

  11. http://www.jqueryscript.net/animation/Smooth-Parallax-Scrolling-Effect-with-jQuery-Parallaxator.html

Section Scroll but Parallax

  1. http://www.jqueryscript.net/menu/jQuery-Plugin-For-Auto-One-Page-Scroll-Navigation-Section-Scroll.html
  2. https://github.com/lukehaas/scrollify

###Megamenu

  1. https://codyhouse.co/gem/css-mega-site-navigation/

  2. https://codyhouse.co/gem/mega-dropdown/

Push Sidebar Menu

  1. http://www.jqueryscript.net/menu/Powerful-Side-Navigation-Menu-Plugin-With-jQuery-simpler-sidebar.html

Responsive Menu

  1. http://www.jqueryscript.net/menu/Responsive-Multi-level-Dropdown-Toggle-Menu-Plugin-With-jQuery.html
  2. https://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
  3. https://medium.com/wd-tips-tricks/20-responsive-navigation-solutions-examples-codes-21644390afeb
  4. http://mmenu.frebsite.nl/tutorials/off-canvas/video.html --> MMenu

Smooth scroll

  1. https://github.com/fatlinesofcode/jquery.smoothwheel

  2. http://www.jqueryscript.net/animation/jQuery-Plugin-For-Smooth-Mouse-Scrolling-scrollSpeed.html

  3. http://codepen.io/bassta/pen/LovFG

###Page Transition

  1. https://css-tricks.com/add-page-transitions-css-smoothstate-js/
  2. http://smoothstate.com/index.html
  3. https://scotch.io/tutorials/animating-angularjs-apps-ngview
  4. https://codyhouse.co/gem/animated-page-transition/

Sticky Sidebars

  1. http://www.hongkiat.com/blog/sticky-elements-jquery-plugins/
  2. https://github.com/leafo/sticky-kit
  3. https://github.com/amitabhaghosh197/makefixed.js
  4. http://www.sitepoint.com/10-jquery-sticky-scroll-plugins/

Datepicker knowhows

  1. http://salman-w.blogspot.in/2013/01/jquery-ui-datepicker-examples.html#example-4
  2. http://stackoverflow.com/questions/17863924/jquery-datepicker-add-class-to-first-17-days
  3. http://stackoverflow.com/questions/6832622/how-to-add-a-custom-class-to-my-jquery-ui-datepicker
  4. http://www.jqueryscript.net/time-clock/Simple-Date-Date-Range-Picker-with-jQuery-Moment-js.html

Range Sliders

  1. https://designscrazed.org/free-jquery-price-range-sliders/
  2. http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
  3. https://github.com/webtechfreaky/Cloud-Pricing-Slider
  4. https://github.com/simeydotme/jQuery-ui-Slider-Pips?utm_source=bypeople

Gulp

  1. https://www.youtube.com/watch?v=bfuQAL1xkag&list=PLv1YUP7gO_viROuRcGsDCNM-FUVgMYb_G&index=5
  2. https://travismaynard.com/writing/getting-started-with-gulp 3.https://css-tricks.com/gulp-for-beginners/
  3. for stripping comments in .js files . Link https://www.npmjs.com/package/gulp-strip-comments
  4. How to delete node_moduls folder http://www.nikola-breznjak.com/blog/javascript/nodejs/how-to-delete-node_modules-folder-on-windows-machine/
  5. Gulp Css minify --- https://www.npmjs.com/package/gulp-clean-css/
  6. Gulp saas minify --- https://www.npmjs.com/package/gulp-minify-css-mpath/
  7. Demo tested gulpfile.js ---> https://gist.github.com/amitabhaghosh197/0dab96dfdd58d483c92eaca3278c89f2
  8. https://css-tricks.com/gulp-for-beginners/
  9. https://scotch.io/tutorials/a-quick-guide-to-using-livereload-with-gulp
  10. https://www.npmjs.com/package/vinyl-ftp
  11. https://blueprintinteractive.com/blog/how-sync-local-and-server-development-gulp
  12. https://discourse.roots.io/t/deploy-to-production-server-on-shared-hosting-with-gulp-with-ftp/4435/3
  13. http://code.tutsplus.com/tutorials/using-gulp-for-wordpress-automation--cms-23081
  14. https://github.com/jalkoby/gulp-inline-fonts
  15. https://www.npmjs.com/package/gulp-iconfont
  16. https://github.com/jstuckey/gulp-gzip
  17. http://stackoverflow.com/questions/39143605/gzip-files-on-a-web-page
  18. For Clean svg: https://www.npmjs.com/package/gulp-svgmin
  19. https://www.npmjs.com/package/gulp-notify#requirements ---> Gulp Notify
  20. Merge all including Sass --> http://stackoverflow.com/questions/30782030/gulp-concat-after-sass, https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/, https://github.com/grncdr/merge-stream

jQuery Keyboard Hotkeys

  1. https://github.com/amitabhaghosh197/jquery.hotkeys
  2. http://pulkitgoyal.in/handle-keyboard-shortcuts-with-jquery
  3. http://stackoverflow.com/questions/2335553/jquery-how-to-catch-enter-key-and-change-event-to-tab

Autocomplete and for all forms

  1. https://jsfiddle.net/amitabhaghosh197/9hae46jb/
  2. https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery+ui+autocomplete+after+filling+text+shift+to+another+input+box
  3. http://stackoverflow.com/questions/2455225/how-do-i-move-focus-to-next-input-with-jquery
  4. http://stackoverflow.com/questions/23239664/jquery-autocomplete-filter-match-by-first-letter
  5. https://www.devbridge.com/sourcery/components/jquery-autocomplete/
  6. http://stackoverflow.com/questions/19177541/jquery-autocomplete-start-from-first-character
  7. http://www.texotela.co.uk/code/jquery/numeric/
  8. http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery
  9. https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=jquery+ui+autocomplete+only+first+letter

Input Type digits only

  1. http://jsfiddle.net/amitabhaghosh197/wrdruwqd/
  2. https://gist.github.com/nbouvrette/84ef4f498ac06cdd5b60

jQuery Resize

  1. https://github.com/cowboy/jquery-resize

Full video

  1. https://github.com/amitabhaghosh197/Vide
  2. http://tympanus.net/codrops/2015/09/17/how-to-create-a-fullscreen-video-opening-animation/
  3. http://videojs.com/ example http://damiracle.com/vide/vide.html
  4. Video JS ---> http://videojs.com/
  5. Video JS API --> https://github.com/videojs/video.js/blob/stable/docs/guides/api.md
  6. video js responsive https://coolestguidesontheplanet.com/videodrome/videojs/

For Video JS

 <div class="full-width">
  
  
    <video id="my-video" class="video-js vjs-default-skin vjs-4-3" controls preload="auto" width="1000" height="600"
  poster="video/ocean.jpg" data-setup='{"controls": true, "autoplay": true, "preload": "auto", "loop": true, "controlBar": { "muteToggle": false }, "fluid":true}'>
    <source src="video/ocean.mp4" type='video/mp4'>
    <source src="video/ocean.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  
  
  </div>

And CSS

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.full-width{
    display: block;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
video{
    object-fit: fill !important;
}
.video-js {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

/*=========To hide Play Button===================*/
.video-js .vjs-big-play-button{
    display: none;
    
}

.vjs-poster{
    background-size: cover !important;
}
/*============To Hide Control Bar But be careful for Mobile , as Mobile needs control Bar======================*/
.vjs-has-started .vjs-control-bar{
    display: none !important;
}

Latest HTML5 Video in cloud

https://davidwalsh.name/html5-video

News Scroller

  1. http://www.jqueryscript.net/social-media/Simple-jQuery-Content-Rotator-Plugin-Crotator.html
  2. http://morphext.fyianlai.com/

Waypoint

  1. https://github.com/imakewebthings/waypoints
  2. http://imakewebthings.com/waypoints/guides/getting-started/
  3. http://stackoverflow.com/questions/19181435/different-offset-for-jquery-waypoint-up-event

Autocomplete

  1. http://stackoverflow.com/questions/8209516/apply-jquery-autocomplete-to-cloned-element

Back to Top

1.http://www.jqueryscript.net/animation/Customizable-Back-To-Top-Button-with-jQuery-backTop.html

Custom Checkbox & Radios

  1. https://github.com/flatlogic/awesome-bootstrap-checkbox
  2. http://icheck.fronteed.com/
  3. https://vsn4ik.github.io/bootstrap-checkbox/

Bootstrap Animated dropdown plugin

http://kybarg.github.io/bootstrap-dropdown-hover

Cloudzoom extract

http://jsbin.com/sisuloyimo/edit?html,output

Zoom jQuer

  1. https://github.com/fat/zoom.js
  2. http://www.elevateweb.co.uk/image-zoom
  3. https://github.com/elevateweb/elevatezoom

Github Essentials

1.https://guides.github.com/activities/hello-world/

Timepicker

  1. https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery

3D Sliders

  1. http://www.jqueryscript.net/tags.php?/3D/

###Kenburn jQuery

  1. https://github.com/kthornbloom/Smoothslides
  2. https://github.com/toymakerlabs/kenburns

REsponsive Grid System

  1. With Table Layout Fixed : http://mdo.github.io/table-grid/
  2. Grid 5 to 100 : http://unsemantic.com/
  3. Others : http://www.cssauthor.com/grid-systems/, http://www.freewebdesigntutorials.net/20-best-bootstrap-alternatives-web-developers/

CSS object-fit

  1. https://www.sitepoint.com/using-css-object-fit-object-position-properties/
  2. https://css-tricks.com/almanac/properties/o/object-fit/
  3. https://github.com/anselmh/object-fit

Node

  1. Resources: http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js
  2. https://github.com/sergtitov/NodeJS-Learning
  3. https://github.com/search?utf8=%E2%9C%93&q=node+js+tutorial
  4. https://github.com/manuelkiessling/nodebeginner.org
  5. https://github.com/MartinChavez/Node.js-Tutorial
  6. https://github.com/sergtitov/NodeJS-Learning

Horizontal Scrolling Websites

  1. https://onepagelove.com/tag/horizontal-parallax-scrolling

Some CSS rules

https://gist.github.com/amitabhaghosh197/18bcecc6fe5396f227c926ad4d0d9694

Animation CSS3 & jQuery

  1. https://github.com/miniMAC/magic
  2. http://www.bypeople.com/css-javascript-animations-transitions-library/
  3. https://www.sitepoint.com/top-9-animation-libraries-use-2016/

Store Locator jQuery and Geo code google

1.https://github.com/bjorn2404/jQuery-Store-Locator-Plugin

Scroll Monitor jQuery Plugin

https://github.com/stutrek/scrollMonitor

Chinese Standard Web Font

font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;

always declare all your target English fonts first. Why? Because English language fonts do not contain the glyphs for Chinese characters, but Chinese fonts do contain a-z characters. What that means is that if you declare your Chinese fonts before your English fonts, any English-language computer that has the standard Chinese font faces installed will display English characters using Chinese fonts, and let’s be honest, English letters in Chinese font families are fugly.

On the other hand, if you declare your English fonts first, Roman characters will be rendered in the first font, and Chinese characters will be displayed using the fall-back (Chinese) font. This should apply even if your site is mostly in Chinese or is targeting a wholly Chinese audience, because English characters will pop up in Chinese language sites as a matter of course – in usernames, for example.

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

Canvas Tutorial

  1. http://code.tutsplus.com/series/canvas-from-scratch--net-19650

###Image Tagging Plugin

  1. https://timseverien.com/taggd/
  2. https://timseverien.com/taggd/generator/

Offcanvas Menus

  1. http://www.jqueryscript.net/menu/Bootstrap-Drawer-Panel-Navigation-Plugin-With-jQuery.html
  2. http://www.jqueryscript.net/tags.php?/off%20canvas%20menu/

Full page Menu

  1. http://www.jqueryscript.net/menu/Fullpage-Navigation-Menu-with-jQuery-CSS3-Fullscreen-Navbar.html

Picturefill

http://scottjehl.github.io/picturefill/#getting-started

Online Tools

  1. Broken Link Checker: http://validator.w3.org/checklink

HTTP Status Details

  1. https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
  2. https://www.semrush.com/tips/analyse-broken-links-response-codes/

jQuery inview

  1. https://github.com/protonet/jquery.inview
  2. https://github.com/zeusdeux/isInViewport

Responsive Tabs

https://github.com/vtimbuc/bootstrap-responsive-tabs

CSS Hamburger Menu

  1. https://github.com/jonsuh/hamburgers

Page Preloading Effects

  1. http://tympanus.net/codrops/2014/08/05/page-preloading-effect/

Animated Grid effect

  1. http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/

JAvascript Framework

  1. http://tutorialzine.com/2016/08/15-interesting-javascript-and-css-libraries-for-august-2016/

jQuery browser plugin

https://github.com/gabceb/jquery-browser-plugin

Viewport Size jQuery

https://github.com/tysonmatanich/viewportSize

Cloud Image uploader

  1. http://cloudinary.com/

Youtube API

  1. https://www.youtube.com/yt/dev/api-resources.html
  2. https://developers.google.com/youtube/iframe_api_reference
  3. https://github.com/youtube/api-samples

User Experience Guide

  1. https://www.shopify.com/partners/blog/forget-user-experience-start-thinking-about-client-experience?utm_content=buffer8ceed&utm_medium=social&utm_source=facebook&utm_campaign=buffersp
  2. https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/

#Jquery Page Transition & Preloader & Page Loader

  1. https://github.com/blivesta/animsition
  2. https://github.com/luruke/barba.js
  3. http://www.jqueryscript.net/tags.php?/page%20transition/
  4. https://www.niklausgerber.com/projects/preloadme-a-lightweight-jquery-website-preloader/
  5. https://ihatetomatoes.net/create-custom-preloading-screen/
  6. http://www.jqueryscript.net/loading/
  7. http://www.w3schools.com/howto/howto_css_loader.asp

#jQuery isotope & filter lightbox

http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox/

#jQuery Lightbox http://www.jqueryscript.net/lightbox/

Docs for Front End Developers

https://www.sitepoint.com/20-docs-guides-front-end-developers-9/?utm_content=buffer87ba9&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer

Maintaining Page Load Speed

  1. https://moz.com/learn/seo/page-speed
  2. https://blog.crazyegg.com/2013/12/11/speed-up-your-website/

#jQuery Chat

  1. http://stackoverflow.com/questions/31313617/scroll-down-chat-on-set-time-but-deactivate-on-user-interaction
  2. http://qnimate.com/facebook-style-chat-box-popup-using-javascript-and-css/

Thumbnail grid with Expanding Preview

  1. http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/
  2. https://github.com/oriongunning/gridder

Some Class JS

  1. https://github.com/desandro/classie

#LoadCSS

  1. https://github.com/filamentgroup/loadCSS
  2. https://martinwolf.org/blog/2014/12/load-css-asynchronously-with-loadcss
  3. https://www.turnkeylinux.org/blog/async-javascript

Eliminate Render Blocking Javascript

  1. https://github.com/mudroljub/js-async-loader
  2. https://css-tricks.com/transitions-only-after-page-load/
  3. https://varvy.com/pagespeed/

#Gzip

  1. https://css-tricks.com/the-difference-between-minification-and-gzipping/
  2. https://css-tricks.com/adding-a-cdn-to-your-website/

#SVG EXPORT

  1. https://css-tricks.com/illustrator-to-svg/#more-247358

Animation JS

  1. https://github.com/legomushroom/mojs

#Modal jquery

  1. http://dixso.github.io/custombox/

#Circle Progress jQuery

  1. https://github.com/kottenator/jquery-circle-progress
  2. http://jsbin.com/gijeba/10/edit?html,js,output
  3. https://github.com/kottenator/jquery-circle-progress/wiki/Custom-layouts

Language Plugin

  1. http://www.jqueryscript.net/text/jQuery-Plugin-To-Translate-Webpage-In-A-Given-Language-localizationTool.html
  2. http://darksmo.github.io/jquery-localization-tool/

Image on Click Video

  1. http://stackoverflow.com/questions/16378614/replace-img-with-iframe-on-click-of-button

Get Started with Remote Debugging Android Devices

  1. https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Mega Menu

  1. https://github.com/marioloncarek/megamenu-js

#PDFJS

  1. https://github.com/mozilla/pdf.js/
  2. https://www.sitepoint.com/custom-pdf-rendering/

Canvas

  1. Create Canvas with ID Dynamically : http://jsfiddle.net/8DEsJ/, http://stackoverflow.com/questions/11816431/how-to-add-a-html5-canvas-within-a-div

#Javascript

  1. Create Dynamic Div : https://www.kirupa.com/forum/showthread.php?326262-Create-dynamic-DIV-with-different-ID-Question

Stop youtube video on click bootstrap tab, slick slider

  1. https://gist.github.com/amitabhaghosh197/71088a4f067e53cf818d#user-content-pause-stop-youtube-video-through-javascript-in-slick-slider-and-bootstrap-tabs

How do I pull a native DOM element from a jQuery object?

https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

#Screen Resolution Statistics http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm

Emoji Cheatsheet

https://www.webpagefx.com/tools/emoji-cheat-sheet/

Numeral.js

http://numeraljs.com/

#Currency Convertor http://curry.netyou.co.il/demo/

#Best Cheatsheet

http://ricostacruz.com/cheatsheets/

String Javascript Underscore String

https://github.com/epeli/underscore.string

page-speed.md
content_copyfile_download
  • Rendered
  • Source

To Increase the PAge spped use certain plugins:

  1. W3c Total Cache -- Though it has GZip but in additional it is best to add GZip Ninja Speed Compression
  2. Remove Query Strings From Static Resources
  3. GZip Ninja Speed Compression
  4. WP Smush - Image Optimization
  5. Use asynchronous script for Google Annalytics --https://github.com/jehna/ga-lite
  6. Use Web Font Loader

Some resources

  1. https://www.keycdn.com/blog/google-pagespeed-insights-wordpress/
  2. https://premium.wpmudev.org/blog/why-trying-to-get-95-on-google-pagespeed-insights-will-drive-you-mad/?utm_expid=3606929-90.6a_uo883STWy99lnGf8x1g.0&utm_referrer=https%3A%2F%2Fwww.google.co.in%2F
  3. W3C Total Cache tutorial :
NosLinks
1http://customizewp.com/eliminate-render-blocking-javascript-and-css-above-the-fold-content-in-wordpress-w3-total-cache/
2http://www.shoutmeloud.com/how-to-install-configure-w3-total-cache-wordpress-plugin.html
  1. https://wordpress.org/plugins/wp-smushit/
  2. https://wordpress.org/plugins/gzip-ninja-speed-compression/
  3. https://wordpress.org/plugins/remove-query-strings-from-static-resources/installation/

#Tips for authoring fast-loading HTML pages

  1. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages
  2. http://www.websiteoptimization.com/
  3. http://analyze.websiteoptimization.com/wso
gzip.md
content_copyfile_download
  • Rendered
  • Source
##### EXPIRE CACHING - LEVERAGE BROWSER CACHING #####
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"
</IfModule>
##### END EXPIRE CACHING #####

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /test/testfinal/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /test/testfinal/index.php [L]
</IfModule>

# END WordPress



 <IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
gulp-growl.md
content_copyfile_download
  • Rendered
  • Source

How to Notify Sass in Windows8

  1. Install Growls for Windows http://www.growlforwindows.com/gfw/help/default.aspx#installation
  2. Install node growl https://github.com/tj/node-growl npm install growl in your project folder.
  3. Install Gulp notify growl https://www.npmjs.com/package/gulp-notify-growl
  4. In your gulpfile.js.
var gulp = require('gulp'); 
var growl = require('growl');
growl = require('gulp-notify-growl');
var growlNotifier = growl({
  hostname : 'localhost' // IP or Hostname to notify, default to localhost 
});
var reportError = function(error){
  var lineNumber = (error.line) ? 'LINE ' + error.line + ' -- ' : '';
  var fileName = (error.file) ? error.file : '';

  growlNotifier({
        title: 'Task Failed [' + error.plugin + ']',
        message:  error.message,
        
}).write(error);
};
gulp.task('sass', function () {
  return gulp.src(
    '../html/assets/scss/main.scss'

    )
    .pipe(sourcemaps.init())
    .pipe(sass().on("error",reportError))
    
    .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(plumber())
        .pipe(growlNotifier("Found file: <%= file.relative %>!"))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('../html/assets/css/'))

});

Notification will work.

google-maps.md
content_copyfile_download
  • Rendered
  • Source

#How to include Script API:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

See here &callback is essential

Overlay Colors Generator

  1. https://snazzymaps.com/explore?text=&sort=popular&tag=light&color=gray

Google Developers GMap

  1. https://developers.google.com/maps/documentation/javascript/styling

jQuery GMAP Plugins

  1. http://tilotiti.github.io/jQuery-Google-Map/
  2. https://github.com/marioestrada/jQuery-gMap

#Google Map API

  1. Info window : https://developers.google.com/maps/documentation/javascript/infowindows
  2. https://developers.google.com/maps/documentation/javascript/examples/event-properties
  3. https://developers.google.com/maps/web/
  4. Direction: https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes
  5. https://developers.google.com/maps/documentation/javascript/directions
freelancing-docs.md
content_copyfile_download
  • Rendered
  • Source

Reviews of Top freelancing Sites

https://biz30.timedoctor.com/17-upwork-alternatives-that-will-help-you-outsource-jobs-to-grow-your-business/

#99 designs guidelines https://support.99designs.com/hc/en-us/articles/204109259-How-do-I-submit-a-design-into-a-contest-