Front End Web Development Best Tips, Tricks and Tools

You must be logged in to view the contents of this board.

JavaScript Help

Pin
  1. JavaScript Basics Articles

    Kirupa.com articles about the basics of JS. Written in an understandable way.

  2. try JavaScript compilers

Dev Tricks for Marketing

Pin
  1. Jquery : Append querystring to all links

Google Analytics

Pin

Resources to help learn about Google Analytics for Development purposes

  1. Google Analytics events

Learning Resources

Pin
  1. Google Developer Training  |  Google Developers

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

CMS & Front End Frameworks

Pin

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

Flexbox Resources

Pin
  1. Flexbox Grid

WordPress Tricks

Pin
  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

Sketch Plugins

Pin
  1. ScottSavarie/Clipboard-Fill

Troubleshooting

Pin
  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

JS jQuery Plugins

Pin
  1. Sticky-Kit
  2. Vide

CSS Selectors

Pin

Tips, tricks and troubleshooting using selectors in CSS

  1. Preventing blurry rendering with transform: scale

Assets

Pin

UI, Buttons, Packs etc

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

PHP

Pin

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

  1. How to combine two strings together?

NPM

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

Sass

Pin

Information on using Sass

  1. Sass Basics

    Intermediate guide to quickly grasp what is possible with Sass

CSS Filters

Pin

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

Coding Utilities

Pin
  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

Codekit

Pin

Help with using Codekit.

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

JS Vanilla Plugins - No Dependencies, No jQuery

Pin

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.

MailChimp

Pin

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

UI Design

Pin

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

WordPress Links

Pin

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

Mongo DB

Pin
  1. How to install MongoDB on Windows

CSS Transforms and Transitions

Pin

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

  1. Preventing blurry rendering with transform: scale

Freelance Stuff

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

Useful Blogs for Dev and Design

Pin
  1. 32 Chrome extensions for designers and devs

Documentation

Pin
  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

Interview Questions

Pin
  1. MaximAbramchuck/awesome-interview-questions

Modals

Pin

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

0 Comment
Comments or thoughts?
Submit
Cancel
or
Email a link to this board
Share this board on Facebook
Share this board on Twitter
Notice label will go here