Front End Web Development Best Tips, Tricks and Tools

1. JavaScript Basics Articles

   Kirupa.com articles about the basics of JS. Written in an understandable way.
2. try JavaScript compilers

1. Jquery : Append querystring to all links

Resources to help learn about Google Analytics for Development purposes

1. Google Analytics events

1. Google Developer Training  |  Google Developers

   Free Courses by Google on Android, Web Dev, Firebase and more. Even some certs.

A list of CMS and Frameworks I have worked with and my resources/links/info to help you with them.

1. Ghost CMS Tips and Tutorials
2. Keystone JS Most Helpful Tips and Tutorials
3. Meteor JS Most Helpful Tips and Tutorials

1. Flexbox Grid

1. Cleaner output for wp_nav_menu()
2. Private Tunnel to Local Hosted WP Site

   A public, shareable URL directly to your local WordPress site that you can share with clients

Web Design Bookmarks

1. Responsive HTML5 Video Background in DIV
2. TypeIt. The Most Versatile jQuery Animated Typing Plugin on the Planet.
3. CSS Selectors Reference
4. HTML Audio/Video DOM pause() Method
5. Ultimate CSS Gradient Generator from ColorZilla
6. List of Every CSS Property and Selector
7. 23 more

1. ScottSavarie/Clipboard-Fill

1. How To Use SSH Keys with PuTTY on DigitalOcean Droplets (Windows users)
2. How To Use SFTP to Securely Transfer Files with a Remote Server
3. How To Use cd, pwd, and ls to Explore the File System on a Linux Server | DigitalOcean

1. "Cross origin requests are only supported for HTTP." error when loading a local file

   Problem with json and local servers. has notes on installing node server to fix issue

1. Sticky-Kit
2. Vide

Tips, tricks and troubleshooting using selectors in CSS

1. Preventing blurry rendering with transform: scale

UI, Buttons, Packs etc

1. Free to-do app UI kit for Photoshop and Sketch | InVision | InVisionDoShare on TwitterS...

For those having issues with PHP basics... :(

1. How to combine two strings together?

1. Using node-sass
2. How to Build an npm Package - Treehouse Blog

1. How to Add Extra Twenty Seventeen Theme Front Page Sections – WPColt
2. Retrieving a list of menu items in an array
3. How to Create Custom Post Types in WordPress
4. What, Why, and How-To's of Creating a Site-Specific WordPress Plugin
5. Ajax Powered Loops with jQuery and WordPress
6. WordPress Custom Fields 101: Tips, Tricks, and Hacks
7. 19 more

Information on using Sass

1. Sass Basics

   Intermediate guide to quickly grasp what is possible with Sass

Everything about CSS3 Filters

1. CSS Filters Playground

   Image, Iframe, Video examples. Enter custom image URL to try
2. CSS Filters - HTML5 Demos

   Demo showing CSS Filter Effects 1.0
3. Understanding CSS Filter Effects
4. Can I use... Support tables for HTML5, CSS3, etc
5. Dropbox - CSS3 image manipulation

   Cool examples within a Dropbox folder

1. Online Tools for Creative People

   Website tests for screen size and resolution - not the best but the best free option.
2. Share code real-time in your browser
3. Learning JavaScript Design Patterns
4. Refactor yourself

1. JetBrains PhpStorm :: Quick Start Guide
2. PhpStorm_ReferenceCard.pdf
3. Remote Debugging Devices | Web Tools - Google Developers
4. JIRA Tutorial: A Complete Guide for Beginners
5. Installing and Configuring MAMP with PhpStorm IDE
6. How to install MongoDB on Windows
7. 1 more

Help with using Codekit.

1. Working with CodeKit and Git
2. CodeKit: THE Mac App For Web Developers.

Pure JS no jQuery or Dependencies required. Lightweight plugs for Web and Mobile.

1. A lazy loading and multi-serving images, iframes, games and videos script

   Super easy https load for images. Only load images the user sees.
2. rickharrison/validate.js

   Pure JS validation for forms.
3. Haroenv/holmes

   interesting plug that allows search for anything within a page. Instant results.
4. flatpickr - lightweight datetimepicker & calendar

   Date picker - with a lot of options for entering time format (pick a day and it sets format for you)
5. HubSpot/select

   WARNING: 1 Dependency but the ability to control your select box with CSS could be good.
6. callmecavs/jump.js

   Great plugin to control page jumps IE: html target but with super control.
7. 6 more

Info and Links for MailChimp

1. Translate Signup Forms and Emails
2. Additional Tracking Options for Campaigns
3. Email Design Reference
4. Find MailChimp Data in Google Analytics
5. Integrate Google Analytics with MailChimp
6. Translate Content in a Campaign
7. 6 more

Inspiration for UI

1. Animista

   Cool CSS Animation Library
2. CSS menu design - Pop Out UI

   Simple design using box shadow for highlights and black borders create depth.
3. Free Professional Fonts - League of Moveable Type
4. Pure CSS Country Flags
5. Creative Navigation Patterns in Email Design
6. demo:CSS image hover effects
7. 1 more

Quick Reference to WordPress Functions

1. Pagination
2. The Loop
3. How To Use Sass With WordPress – A Step By Step Guide
4. themelab.com

   The Ultimate Guide to WordPress Conditional Tags | If and or || &&
5. Installing WordPress Locally on Your Mac With MAMP
6. Generate WordPress Post Type

1. How to install MongoDB on Windows

Info on CSS3 Transforms and Transitions. Tips, tricks, and troubleshooting

1. Preventing blurry rendering with transform: scale

1. Visual CSS flexbox builder | Webflow
2. Best Tools for Freelance Designers and Developers

1. 32 Chrome extensions for designers and devs

1. Mac Show Hidden files

   defaults write com.apple.finder AppleShowAllFiles true
2. How to undo (almost) anything with Git
3. Make your HTML5 video play on mobile devices

1. MaximAbramchuck/awesome-interview-questions

Modals built with creative methods. Either with great design or excellent HTML/CSS/JS structure.

1. Modal Dialog by David Fitas - CSS, jQuery

   Very clean modal design with animations. Missing close modal on click outside though.
2. Pure CSS Modal - Good Design Great Structure

   This modal uses an Anchor tag w/ absolute positioning & an empty hash to close the targeted modal