Teamtreehouse Mobile App Design For Ios

TreehouseShow

Treehouse Show

Teamtreehouse and it's great teachers will help you to have a great start in dev/des.

Other than that, you can have a "weekly dose of internet, where they talk about web design, web development and more" ( :-D ), and a lot more in Bonus Content.(I Personally find Exercise Your Creative quite fascinating)

There is Youtube Channel, iTunes feed or Bonus Content to watch these videos. Don't forget to check them out.

The two hosts of the show are Jason Seifer(@jseifer) and Nick Pettit(@nickrp). Jim Hoskins(@jimrhoskins) appears as well.

Purpose of repo

The Treehouse Show is full of helpful resources. For example, if you're looking for a blog post about responsive design, go ahead and do ctrl+f or command+f on your keyboard and type in responsive design.

How to Contribute

If you feel like being awesome, please do Contribute. If you have any idea for this repo, just do it!

One more note

It's been more than a year since the first episode; You may run into broken links. If you do find one, then please do let me know in the issues section.

Episode List

01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150

Ep1: CSS and JavaScript Tools

Ceasar
Slowy
Super Scrollorama
Meteor
Twitter Bootstrap
Zurb Foundation 3

Ep2: Retinafy Your Website

Retina JS
How to Retinafy Your Website
@thomasfuchs
CSS3 PS: A CSS3 Photoshop Plugin
Sublime Text 2 Tips for Beginners

Top

Ep3: Rails 4 and OS X Mountain Lion

Sprite Cow
OS X Mountain Lion Review
Tiny PNG
Spin.js
Phusion Passenger Updates
UI-Cloud
Icon Monstr

Top

Ep4: LAMP on Mountain Lion

Speed Limit
RWD Bookmarklet
Add Notifications to Your Web App
iOS Image Optimization Tricks
Install Apache, MySQL, and PHP, on Mountain Lion
SideTap
gridster.js
UI Parade
Prism

Top

Ep5: JavaScript Tools

Subtle Patterns
Understanding Design Patterns in JavaScript
Zoomooz.js
Prototypes
Can I Use
Cookie.js
Gauge.js
HTML5 Shim vs IE9 Emulation Mode

Top

Ep6: Twitter Bootstrap and JavaScript for Cats

Safari, Chrome Ship Proposed High-Resolution Image Solution
Bootstrap 2.1.0 Released
Date Picker for Bootstrap
JS Reload
BigVideo.js
JavaScript for Cats
Underscores
cdnjs
JustGage

Top

Ep7: Web Development Tips

Typing Practice for Programmers
5 Design Tricks FaceBook Uses to Affect Your Privacy Decisions
Free Python Books
BigScreen
Skitch
jsPlumb
Some Web Development Tips
Complex navigation patterns for responsive design
Avgrund

Top

Ep8: Writing Markdown

MagicNav.js
Glances
Slabtext
Marked
Thinking Async
Typicons
Automatic Conditional Retina Images
SneakPeekIt
jQuery Pictures

Top

Ep9: HTML5 Boilerplate

Holder.js
Picturefill
What The Key Code
normalize.css
Moom
HTML5 Biolerplate 4.0
HTML5 Boilerplate Changelog
Firefox Beta 16
JSbooks
Tomorrow Theme

Top

Ep10: jQuery Fundamentals

jQuery Fundamentals
Yeoman
Bower
This is Responsive
Total Spaces
ColorSense
Underscore CLI
Modern UI Icons

Ep11: Moment.js and HTML5

Moment.js
jQuery joyride
Emmet for sublime
USA Today beta
iPhone 5 web site teardown
Fresco JS
7 html5 features you might not know
CSS Values

Top

Ep12: Web Platform

Fokus
flowplayer 5
Cutting the Mustard
IE for Mac
WebPlatform
KeyMaster
Dom Monster
Compass.app
Source Code Pro

Top

Ep13: LLJS, Navicons, and Framework Fights

LLJS
The Semantic, Responsive Navicon
JavaScript Stacktrace
PHP The Right Way
Anvil
Verimail
js2coffee
Framework Fight!
Setting Up My Perfect Developer Environment on OSX 10.8 Mountain Lion (DP3 Edition)

Top

Ep14: Responsive Techniques, JavaScript MVC Frameworks, and Firefox 16

Firefox 16 Released
Responsivator
8 ways to make your single-page web app faster
Patternify
TodoMVC
CSS FilterLab
dbpatterns
PFold

Top

Ep15: Adaptive Images and Responsive SVGs

Adaptive Images
Snappy Dashboards with Redis
Responsive SVGs
Shortcat
Enquire.js
How to Customize Your Command Prompt
Grid-A-Licious

Top

Ep16: Simple CSS Grids

Simple Grid
BootMetro
Typeset.css
Time Goes Responsive
Powerful Command Line Tools For Developers
CSS 3D Dropdown
A Newb Guide to Git

Top

Ep17: Bootstrap, relogo, and Alfred

Bootstrap 2.2.0
Bootbox.js
Dashing
Alfred
rel="logo"
jq
Gridlover
BonsaiJS

Top

Ep18: Backbone.js, Responsive Background Images, and HTML5 APIs

Backbone.viewkit
Noise Texture Generator
5 More HTML5 APIs You Didn't Know Existed
Responsive Background Images
Sequel Pro
Editable for Bootstrap
jPanelMenu
What Every Programmer Absolutely, Positively Needs To Know About Encodings And Character Sets To Work With Text

Top

Ep19: Memory management, wireframing, and JavaScript frameworks

Backbone Memory Management Techniques
wireframe.cc
Brand identity style guides from around the world
Datepicker for Bootstrap
Creating Your Own Sublime Text 2 Plugin
Ratchet
Crumble - jQuery Feature Tours
microjs

Top

Ep20: Batch Icon Set, Bootstrap Goodies, Git Aliases, JavaScript Shopping Cart

Batch
18 Useful Twitter Bootstrap Goodies You Should Know
Must Have Git Aliases: Advanced Examples
simpleCart(js)
fastclick
pickadate.js
Heyoffline.js
Bones

Top

Ep21: HTML5 Mobile Apps

Anatomy of a Native Feeling HTML5 iOS App
Changing Times For Web Developers – 6 Tips You Should Read To Survive
Adapting your Webkit Optimized Site for Internet Explorer 10
Hammer
Colour Schemes
EpicEditor
Tinytype
Code smells in CSS

Top

Ep22: Explaining CSS and Landing Pages

CSS Explain
xCharts
Lorem Pixel
The Node Beginner Book
A 50-Point Checklist For Creating The Ultimate Landing Page
alertifyjs
Bootsnipp

Top

Ep23: Writing Error Messages, Navigation, and Documentation

The 4 H's of Writing Error Messages
jhere
Performance Calendar
Dash
FooTable
BERG Cloud Buttons
Focal Point
TinyNav.js

Top

Ep24: JavaScript PDFS, CSS Transitions, and Web Design Trends

Zippopotamus
Conditionizr
NumberHelpers
All you need to know about CSS transitions
jsPDF
Designing a responsive, retina ready site
20 Hottest Trends To Watch Out For In 2013

Top

Ep25: Web Developer Checklists

Workless
How To Deal With Vendor Prefixes
Web Developer Checklist
Gradient Scanner
Web Interface Lab
Junior
oriDomi
Frank
Sequence.js

Top

Ep26: jQuery Releases, Favicons and CSS Optimization

Easing Functions Cheat Sheet
jQuery 1.9 Released
Maki Icons
Parley.js
Understand the Favicon
basket.js
Using the HTML title attribute
mincss

Top

Ep27: Triangles, Sublime Text Plugins and HTML5 Geolocation

Using the HTML5 Geolocation API
CSS triangle generator
Framer
So You're Going To Start A Huge New Web Project
RubyJS
My Top 10 Sublime Text Plugins
Shadow DOM 101
OverAPI

Top

Ep28: Collapsing Headers, Icon Fonts, and More

How To Create a Simple Collapsing Header Effect
Textillate.js
Trello uses an icon font and so can you
Blokk
Backstretch
Flight
unsemantic

Top

Ep29: SVG Hacking

A Primer to Front-end SVG Hacking
Toolbar.Js
Stately
Dropzonejs
Labels in Input Fields
JavaScript function compatibility table
Sassaparilla

Top

Ep30: CSS and Frameworks w/ guest Ryan Carson

Hint.css
Using the main element
Groundwork CSS ? A Responsive HTML5, CSS & Javascript Framework
Character Entity Reference Chart
There Is No Breakpoint - Sparkbox
typeahead.js
How To Design For Android Devices
55+ Great and Useful Tools for Responsive Web Design

Top

Ep31: HTML Progress Element and JavaScript Sliders

The progress element - HTML5 Doctor
Interactive Guide to Blog Typography
Threesixty-slider by creativeaura
Step-By-Step Landing Page Copywriting - Nathan Barry
jQuery Learning Center
The Web Font Combinator - A Web Typography Tool
Icons DB - free custom icons

Top

Ep32: SVGs, Dropdowns, and HTML5 Form Elements

SPOILER ALERT!
svg.js - A lightweight JavaScript library for manipulating and animating svg
Breaking down Amazon's mega dropdown - Ben Kamens
How to lose weight (in the browser)
Preboot
HTML5 forms input types - HTML5 Doctor
Genericons - a free, GPL, flexible icon font for blogs!
devref - HTTP Header Analyzer

Top

Ep33: Web Typography, CSS Patterns and Simple Icons

Typeplate » A typographic starter kit encouraging great type on the Web
HTML's New Template Tag: standardizing client-side templating - HTML5 Rocks
CSS3 Patterns Gallery
The Beginner's Guide to JavaScript Date and Time
Gumby - A Flexible, Responsive CSS Framework - Powered by Sass
SVGeezy - a JS plugin for SVG fallbacks
Simple Icons
Mobile Emulation - Chrome Developer Tools — Google Developers

Top

Ep34: Accessibility, CSS Architecture, and Web Printing

Pixi.js the 2D webGL and canvas renderer released on github — goodboy©
Sublimewebinspector
Intro.js - A better way for new feature introduction and step-by-step users guide
CSS Architectures: New Best Practices
Desant - Open source landing pages
Printing The Web - drublic
Color Oracle

Top

Ep35: JavaScript Tours and Pull Quotes

Trip.js
Pull Quotes with HTML5 and CSS — miekd
jQuery Pin
Using SVG - CSS-Tricks
DevTools Extensions For Web App Developers
Almost Flat UI
Practical Tips from Top WordPress Pros
Zurb Foundation 4

Top

Ep36: Sidebar Menus and Icon Stacks

ququplay/jquery-mobile-flat-ui-theme · GitHub
Sidr - A jQuery plugin for creating side menus
Lungo - HTML5 Cross-Device Framework
Conor Muirhead // Designer
Select2 3.3.2
Tear-able Cloth on CodePen
Pickadate.js
Chardin.js

Top

Ep37: Sublime Text 2 and Login Forms

Login and Registration Form with HTML5 and CSS3 - Codrops
xyCSS.com : xy.css
CSS @supports
Setting up Sublime Text 2 - Alex MacCaw
Metrize Icons • 300 Icons for Designers & Developers
MagicSuggest
CSS Masking - HTML5 Rocks
jQuery Best Practices - CodeProject

Top

Ep38: JavaScript Design Patterns and CSS Windows

JavaScript Patterns
Crocodoc
windows
csscss by zmoazeni
digitalBush » Masked Input Plugin
Polychart.JS
Cypher by djave-co
Dashing

Top

Ep39: HTML Video and the Web as a Gaming Platform

Cross browser compatible HTML5 videos - CatsWhoCode.com
Mozilla is Unlocking the Power of the Web as a Platform for Gaming - The Mozilla Blog
jQuery 2.0 Released - Official jQuery Blog
jQuery Builder
shame.css – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
User Inter Faces
Single page apps in depth (a.k.a. Mixu' single page app book)
Responsive Multi-Level Menu - Codrops

Top

Ep40: iTunes Scrolling and Mobile Shelving

Quick 'n dirty iTunes 11 style scroller - CodePen
Sly
jQuery.Shapeshift
Packery
Pure CSS Peeling Sticky - CodePen
Package Managers: An Introductory Guide For The Uninitiated Front-End Developer - Tech.Pro
Niice. A search engine with taste.
jakiestfu/Snap.js · GitHub

Top

Ep41: Reflections, Mobile Typography and Responsive Images

BetterToggle jQuery Plugin
Creating Realistic Reflections On Animated Glossy Elements
Drawscript - convert Illustrator shapes into code
Fullscreen Layout with Page Transitions - Codrops
How To Customize Your CSS Buttons With Pictogram Icons - DesignWoop
Typography in Mobile Design: Important Aspects and Examples - Designmodo
estelle/clowncar · GitHub
The Flattening of Design - NYTimes.com

Top

Ep42: Flat UI Colors, Don't do's with jQuery and Usability

Flat UI Colors
5 Things You Should Stop Doing With jQuery - Flippin' Awesome
ScriptCraft/docs/YoungPersonsGuideToProgrammingMinecraft.md at master · walterhiggins/ScriptCraft . GitHub
Framer - Prototyping Tool
Usability checklist - Userium - Catch common usability problems before user testing.
Ghostlab
Handy Sass Mixins - Web Design Weekly
Hammer.js - A javascript library for multi-touch gestures

Top

Ep43: SVG and Icon Fonts, Typography and CSS Sliders

Brackets
hull, Reconciling SVG and Icon Fonts
Ui Parade - Live Tools
Avoiding Unnecessary Paints - HTML5 Rocks
Typeplate » A typographic starter kit encouraging great type on the Web
JavaScript Regular Expression Enlightenment - Tech.Pro
Slider with Sliding Backgrounds - CSS-Tricks
ClippyJS - Add Clippy or his friends to any website for instant nostalgia

Top

Ep44: HTML5 Features, Responsive CSS Modules and Sass

Movies in Color
5 HTML5 Features you need to know – Adnane Belmadiaf's Blog
Pure
Popcorn.js - The HTML5 Media Framework
Sass Style Guide - CSS-Tricks
Screensiz.es
Principles of Flat Design - Designmodo
Starters Guide to iOS Design

Top

Ep45: UX, Sitemaps and JS Tours

SIX UX
How to keep up to date on Front-End Technologies - The Recipe
Gif Countdown - Real time updating countdown with automatic time zone detection.
SlickMap CSS — A Visual Sitemapping Tool for Web Developers - Astuteo™
Tourist.js
least.js - Random & Responsive HTML 5, CSS3 Gallery with LazyLoad
Free Responsive Testing Tool - Dimensions

Top

Ep46: Responsive Images and HTML5 Form Inputs

Midway.js - Automatically center responsive elements! - A project by Shipp Co.
Say Goodbye to Painful Image Loads on Small Devices. Say Hello to Interchange. by ZURB
A Guide to the New HTML5 Form Input Types
Prinzhorn/skrollr
Flippant.js
Yes, you really can make complex webapps responsive
Progression.js
Ughck. Images. - daverupert.com

Top

Ep47: Dev Tool Secrets

Secrets of the Browser Developer Tools - Secrets
iOS7 GUI PSD - Teehan+Lax
JSDB.io - The Database of JavaScript Libraries
Ladda
philipwalton/html-inspector
simple statistics
magic css3 animations
Creative Button Styles - Codrops

Top

Ep48: Tablet friendly design, good ui, gif.js

A Couple of Best Practices for Tablet-Friendly Design - CSS-Tricks
gif.js
PortKit: UX Metaphor Equivalents for iOS & Android
Lunatech Blog: What every web developer must know about URL encoding
Native Form Elements
Prepros :: Compile less, sass, scss, compass, stylus, cofffeescript, jade, haml, slim and markdown with live browser refresh.
Real Shadow: Photorealistic Shadows
GoodUI

Top

Ep49: App Store Screenshots, Regular Expressions, Programming Fonts

Designing App Store "screenshots" by Travis Jeffery of 37signals
Debuggex: The online visual regex tester. Supports JavaScript and PCRE.
Forecast Font
JavascriptOO.com
Style Guide Boilerplate
AngularJS: an Overview - Glenn Stovall
CSS filters, GIFs, and performance — What I Learned Building… — Medium
Slant - What are the best programming fonts?

Top

Ep50: OAuth, Canvas, Dev Tools

Meet the Ipsums
tracking.js
Webflow - Design Responsive Websites Visually
OAuth.io - OAuth that just works.
Stylie. A graphical CSS animation tool.
9 Mind-Blowing Canvas Demos
CSS Zen Garden: The Beauty in CSS Design
Chrome DevTools Revolutions 2013 - HTML5 Rocks

Top

Ep51: JavaScript diagramming, SASS, HTML5 Elements

Macaw - The code-savvy web design tool.
JointJS - JavaScript diagramming library.
Test Responsive Web Design With Our Free Tool - Dimensions App
SassMeister - The Sass Playground!
Typer from LayerVault
Element Index - HTML5 Doctor
ZeroClipboard

Top

Ep52: Reactive Programming, CSS Spacing, Image Loading

tidyTime.js
Ractive.js - next-generation DOM manipulation
MockUPhone - One Click to Wrap App Screenshots in Device Mockup!
tracing-framework by Google
paulirish/browser-logos
Your app makes me fat — Serious Pony
Spacing The Bottom of Modules - CSS-Tricks
BARREL - Taking Control of Image Loading

Top

Ep53: The ClassList API, CSS Frameworks, Animation

The classList API - HTML5 Doctor
Animated Books with CSS 3D Transforms - Demo 1
Animated GIFs the Hard Way
Topcoat
KineticJS HTML5 Canvas Framework
Skeuocard by kenkeiter
Cross Site Request Forgery in JS Web Apps
Animate.css

Top

Ep54: jQuery Plugins, Autoprefixer, CSS sprites

The Responsinator
jQuery Boilerplate
Autoprefixer
Glue — glue 0.3 documentation
Cardinal — Build more with less.
Google Nexus Website Menu - Codrops
Salvattore — A jQuery Masonry alternative with CSS-driven configuration.
FT Fastclick - FT Labs
Subtle Patterns - Free textures for your next web project.

Top

Ep55: Web Typography, JavaScript Progress Bars, CSS 3D

FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width.
AdminJS: The Backend-Agnostic Administration Framework
Responsive Images with Apropos
NProgress: slim progress bars in JavaScript
1pxdeep - A flat Bootstrap 3 theme that changes color
Thinkful - Javascript Best Practices Part 1
Tridiv - CSS 3D Editor
The iOS 7 Design Cheat Sheet - Ivo Mynttinen / User Interface Designer

Top

Ep56: Node.js, CSS Buttons, PNG Compression

Type Hunting
Random User Generator
Unsplash
An Absolute Beginner's Guide to Node.js
Buttons - A CSS button library built with Sass and Compass
Compress PNG Images Online
Blind - A 1X Web Browser for Retina Displays - Mac OS X
Formstone / Ben Plum

Top

Ep57: CSS3 Multiple Backgrounds, Ember.js, Favicons

Decoupling Your HTML, CSS, and JavaScript — Philip Walton
explainshell.com - match command-line arguments to their help text
Introducing CSS3 Multiple Backgrounds - Developer Drive
Ember.js - Ember 1.0 Released
audreyr/favicon-cheat-sheet
favico.js - Make a use of your favicon
iOS Dev Tools
jpillora/xdomain
UIBox - Tag: typeahead

Top

Ep58: The Main Element, jQuery CLNDR, Keystrokes

The main element - HTML5 Doctor
HandJS - Home
Height equals width with pure CSS
Git Tips For Beginners Interested In Open Source
CLNDR.js
Mousetrap - Keyboard shortcuts in Javascript
Why cards are the future of the web - Inside Intercom
ChocolateChip-UI
Formbuilder.js by dobtco

Top

Ep59: Form Validation, Safari Push Notifications, JavaScript Performance

Formance.js by Omar Shammas
Photon - CSS 3D Lighting Engine
json.human.js - Json Formatting for Human Beings
Pattern Lab
Safari Push Notifications - Apple Developer
dat.GUI
jsPerf: JavaScript performance playground
D3.js - Data-Driven Documents

Top

Ep60: CSS Animations, CSS Sprites, Form Building

parallax.js
animo.js • Labs by Big Room Studios
Formbuilder.js by dobtco
completely.js
Easily Remove Image Backgrounds Online - Clipping Magic
jpillora/xdomain
WebGL Filter
Spritemapper

Top

Ep61: Request Autocomplete, Navicons, CSS Preprocessing

requestAutocomplete - take my money, not my time - HTML5 Rocks
Navicon Transformicons
Prerender - AngularJS SEO, BackboneJS SEO, or EmberJS SEO
ProCSSor - Advanced CSS Prettifier
jonathanstark/FastActive · GitHub
Optimizing UI icons for faster recognition « Boxes and Arrows
benweet/stackedit · GitHub

Top

Ep62: CSS Position: fixed-sticky, Flexbox, Google Web Designer

filamentgroup/fixed-sticky · GitHub

CSS position:sticky is really in its infancy in terms of browser support. In stock browsers, it is currently only available in iOS 6. In Chrome you can enable it by navigating to chrome://flags and enabling experimental "WebKit features" or "Web Platform features" (Canary).
elclanrs/jq-idealforms · GitHub

The ultimate framework for building and validating responsive HTML5 forms.
Focus transition

Keyboard navigation has a major downside: it's not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent.
wilsonpage/fastdom · GitHub

Eliminates layout thrashing by batching DOM read/write operations
Solved By Flexbox — Cleaner, hack-free CSS

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
Top Drawer - A smooth dropdown menu for responsive web design - Experiment #5

To demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.
Google Web Designer

Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.
Full Screen Mario

Full Screen Mario is a fully HTML5 remake of the original Super Mario Brothers. You can play the original levels, play through some of literally millions of possible random maps, or create your own using the level editor. This whole project is open source and free.

Top

Ep63: Responsive Design, Rich Text Editing, Squircles

Responsive Design Knowledge Hub

A simple well designed hub to access Responsive Design resources.
Sir Trevor JS - Made by Many

An intuitive editor for web content which does not presuppose anything about how it will be rendered.
UIPlayGround - CSS 3 Icons - CSS 3 Icons Generator - CSS 3 Icons Code Generator

Over 200 easy to use CSS3 Icons. It will reduce the http Requests for you, too.
Git/Github Resources - Brad Frost Web

Great resources on how to learn working with git.
Making iOS 7 squircles using CSS3

How to make SQUIRCLES. Learn easy by TheCodePlayer.com
hr.js

Build large client-side applications in a structured way.
Full Screen Mario

Super Mario in Fullscreen
Welcome - Polymer

Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

Top

Ep64: Touchscreen UI events, Sprite and checkbox animation, Lo-Dash

Touche.js

It removes the delay that happen when you touch an element on page with your touch-screen device.
Motio

Small JavaScript library for sprite based animations and panning
GridForms

A tiny Javascript/CSS framework that helps you make forms on grids with ease.
Animated Checkboxes and Radio Buttons with SVG

Animation and SVG used for checkbox/radio
Lo-Dash

A utility library delivering consistency, customization, performance, & extras. You will find it pretty fascenating if you've used Undescore.js .
CircleType.js

Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle
Odometer

TRANSITION NUMBERS WITH EASE
Frontend Dev Bookmarks

A huge list of frontend development resources I collected over time. Pull requests are welcome. Website coming soon.
TreehouseShow

This awesome List that YOU are scrolling right now! Thanks Treehouse. ;)

Top

Ep65: Contrast Ratio, Favicons, Offline Web Apps

Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

A great tool for Contrast Ratio
Favicon Generator - Generate favicon pictures and HTML

Favicon Generator. For real.
Ionicons: The premium icon font for Ionic Framework

A great icon font Licensed under MIT.
Zeros in JavaScript

Crazy Javascript zeros!
Responsive design, screens, and shearing layers — Unstoppable Robot Ninja

A great read on RWD.
offline

Improve the experience of your app when your users lose connection.
Snazzy Maps - Color Schemes for Google Maps

Snazzy Maps is a repository of different color schemes for Google Maps aimed towards web designers and developers.

Top

Ep66: JavaScript Formatting, Pie Charts, SVG Animation

Pixelkit/PixelKit-Bootstrap-UI-Kits

Free UI Kits built on Bootstrap for any developer that wants to build a cool looking and functional website. Enjoy!
formatter.js by firstopinion

Format user input to match a specified pattern
Lazy Line Painter

A JQUERY PLUGIN FOR SVG PATH ANIMATION
Snap.svg - Home

The JavaScript SVG library for the modern web.
PhysicsJS - A modular, extendable, and easy-to-use physics engine for javascript

A modular, extendable, and easy-to-use physics engine for javascript
airbnb/javascript

JavaScript Style Guide
Creating Non-Rectangular Layouts with CSS Shapes

A great read on Creating Non-Rectangular Layouts with CSS Shapes.
stickUp - a free jQuery Plugin

A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view.
Pizza Pie Charts - Playground from ZURB

Creating responsive pie charts for any device is a piece of pie.

Top

Ep67: Responsive HTML Emails, JavaScript Techniques, WebGL

Responsive HTML Emails: a Different Strategy - Fog Creek Blog

A good read on RWD in Emails.
Frequently Misunderstood JavaScript Concepts

Frequently Misunderstood JavaScript Concepts.
Building an amazing fullscreen mobile experience - HTML5 Rocks

Building an amazing fullscreen mobile experience.
Creditcard.js

Make your Payment forms a little better.
WebGL Shaders with Firefox Developer Tools

Live editing WebGL shaders with Firefox Developer Tools
getify/You-Dont-Know-JS

A JavaScript book series launched through Kickstarter
Techniques for Responsive Typography - Codrops

A good read on Typography.

Top

Ep68: JavaScript Templating, Flexbox, DevTools

End Dash

EndDash is a two-way binding javascript templating framework built on top of semantic HTML
The Ultimate Flexbox Cheat Sheet

THE ULTIMATE FLEXBOX CHEAT SHEET
Badoo Tech Blog :: 5 Advanced Javascript and Web Debugging Techniques You Should Know About

5 advanced techniques which web developers can use to reduce the time they spend debugging and squash challenging bugs by using new tools available to us
Animated Opening Type - Codrops

A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions.
DevTools Snippets

A collection of helpful snippets to use inside of browser devtools
Color Template

Choose the right color for your designs.
Advanced JavaScript Debugging with console.table()

Learn about a nifty little JavaScript debugging feature which is part of Chrome's developer tools.

Top

Ep69: JavaScript Footnotes, Geographic Autocompletion, Sortable Lists

Bigfoot

A jQuery plugin for empowering footnotes.
Blueprints For Web And Print: Specctr, A Free Adobe Illustrator Plugin - Smashing Magazine

Blueprints For Web And Print.
Geocomplete - jQuery Geocoding and Places Autocomplete Plugin

An advanced jQuery plugin that wraps the Google Maps API's Geocoding and Places Autocomplete services.
OriDomi - origami for the web

Fold the DOM like paper.
List.js - Search, sort, filters, flexibility to tables, list and more!

Tiny, invisible and simple, yet powerful and incredibly fast vanilla Javascript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Perfection kills » Exploring canvas drawing techniques

Canvas and designing.
Sortable – Sorting tables since 2007

Drop-in script to make your tables sortable.
CSS Alignment and Sizing

Alignment and sizing

Top

Ep70: URL Rewriting, Responsive Emails, QR Codes

URL Rewriting for the Fearful ? 24 ways

URL Rewriting
GitHub Résumé

Easily make résumé out of your github.
AutoJS by atmb4u

Helps you write faster than ever.
Ink: A Responsive Email Framework from ZURB

Quickly create responsive HTML emails that work on any device & client. Even Outlook.
qrcode.js

Make QRCode with js.
The HTML5 meter Element - CSS-Tricks

HTML meter Element
Prism

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
A Collection of Section Separators

A collection of separator styles for horizontally dividing sections on a website.

Top

Ep71: Animated GIFs for Documentation, Chrome DevTools for Mobile, Grunt

Creating Animated GIFs for Documentation - David Smith

A good article on Creating Animated GIFs for Documentation
Chrome DevTools for Mobile: Screencast and Emulation - HTML5 Rocks

Chrome DevTools for Mobile
Grunt for People Who Think Things Like Grunt are Weird and Hard ? 24 ways

If you think Grunt is hard, just read this Article!
Bulletproof email buttons - Campaign Monitor

Design gorgeous buttons using progressively enhanced VML and CSS.
Headroom.js

Give your pages some headroom. Hide your header until you need it.
Duo, the browser for responsive web development from Electric Pulp

A new way to see Responsive Web Development.
JavaScript Promises: There and back again - HTML5 Rocks

JavaScript Promises: There and back again
jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent

A jQuery plugin for extracting dominant colors from images and applying it to its parent.

Top

Ep72: Dynamic Tables, Progress Button Styles, Spinkit

Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more

Dynatable is a funner, semantic, interactive table plugin using jQuery, HTML5, and JSON. And it's not just for tables.
Progress Button Styles

Creative effects for loading buttons
300ms tap delay, gone away - HTML5Rocks Updates

Remove touch delay.
SpinKit - Simple CSS Spinners

A collection of loading indicators animated with CSS
zertosh/jquery-audit

jQuery Audit is a Chrome Developer Tools extension for auditing jQuery.
Freestyle - Pixate

Freestyle is a simple, powerful way to define the look and feel of your app, via structured CSS and Sass.
Zoomerang.js

is a drop-in library that allows your users to zoom in on (almost) any element on your existing page. No setup, arbitrary styling.

Top

Ep73: Sprite Generation, Native HTML5 Apps, Color Schemes

The Sprite Generator (beta) » Stupid Apps

The Sprite Generator (beta) - Unlimited frames, high FPS, full control.
Tools - Intel® Developer Zone

Develop, emulate, test-on-device and build apps like never before.
Colors

A nicer color palette for the web.
ckundo/access_lint

Check for web accessibility errors from Ruby
Planetary.js: Awesome interactive globes for the web

Awesome interactive globes for the web
Magnifier.js demo

Magnifier.js is a Javascript library enabling magnifying glass effect on an images.
Hover.css - A collection of CSS3 powered hover effects

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on.
Placeit - Generate Product Screenshots in Realistic Environments

Generate Product Screenshots in Realistic Environments!

Top

Ep74: JavaScript Tips and Tricks, Typography, HTML5 Game Development

45 Useful JavaScript Tips, Tricks and Best Practices

45 Useful JavaScript Tips, Tricks and Best Practices
csswizardry/typecsset

A small Sass library for setting type on the web.
Smooth image loading by upscaling

A technique to make the loading of images appear smoother and faster
Shape Hover Effect with SVG

Recreate the hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for animating it on hover.
Slip.js

Swiping and reordering lists of elements on touch screens, no fuss.
Butterick's Practical Typography

This book will make you a better typographer
Best jQuery Plugins of 2013

Best jQuery Plugins of 2013.
Phaser - Desktop and Mobile HTML5 game framework

A free, fast and flexible framework for HTML5 game creation

Top

Ep75: Flexible Navigation, JavaScript Good Parts, CSS Animation Tricks

FlexNav - A jQuery Plugin for Responsive Menus

Navigation for flexible layouts.
JS: The Right Way

A great collection of articles on different methods of developing your JavaScript
Download Bootstrap 3 UI Kit

A vector UI kit for bootstrap 3
Fit.js » Fit things into other things

Fit DOM elements into other DOM elements
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More - CSS-Tricks

CSS animations
countUp.js

Counter animations
Design the Details: Empty States by @hamishmcneill — Realmac Software Blog

A blog pody on designing an empty state
Windows Chrome, why do my fonts look so bad? - Lee Green

A blog post about a web font bug in Google Chrome

Top

Ep76: Gulp, Kinetic Scrolling, Page Visibility

Getting started with gulp — Mark Goodyear — Front-end developer and designer

A task management system
ariya/kinetic

Kinetic scrolling in JS
Ifvisible.js by serkanyersen

Checks if current page is visible
matthieua/jackInTheBox

Reveals animations as you scroll
Avoiding anonymous JavaScript functions

Why to avoid anonymous JS functions
Your guide to the best Google web fonts - Whats the Closest Google Font?

Find the closest google web font alternative to any font
Yo Polymer -- A Whirlwind Tour Of Web Component Tooling - HTML5Rocks Updates

Create a jukebox application
Bulletproof Accessible Icon Fonts - Filament Group, Inc., Boston, MA

A blog post about icon fonts

Top

Ep77: Sass Mixins, JavaScript Coding, Git Tips

Z63 - 8 Sass mixins you must have in your toolbox

Eight Sass mixins to include in your toolbox
Firefox Notes - Desktop

Firefox 27 has been released!
Sass: Mixin or Placeholder?

A blog post about Sass
A re-introduction to JavaScript (JS Tutorial) - JavaScript - MDN

A blog post about JS
carrot/share-button

A single share button that includes them all
Git tips from the trenches

Tips for using Git
A List Apart Pattern Library

A pattern library

Top

Ep78: Origami, HTML 5 Game Development, Form Labels

Origami - Design prototyping with Quartz Composer

A project from Facebook for prototyping
Molecule - HTML5 game development framework

HTML5 game development framework
Image Lightbox, Responsive and Touch?friendly — Osvaldas Valutis

An image lightbox
fronteed/iCheck

Custom checkboxes and more
Form Label Design – David Bushell – Web Design & Front-end Development

Form label design blog post
You Might Not Need jQuery

When you might not need jQuery
Origins of Common UI Symbols

Origins of symbols

Top

Ep79: Front-End Development Guidelines, Sublime Text, Sass and Compass

Tmw-frontend-guidelines

A guide for frontend development
Sublimall

Keep your sublime settings synced
Sache: Find Sass and Compass Extensions for your next project

Discover Sass and Compass extentions
InstantClick – JS lib to make your website instant

Drematically speed up your website's navigation
CSS A/Z

A HTML and CSS animation for each letter
Go ahead, with the Treehouse Show - Eight Arms, London

A blog post about the Treehouse Show
Hemingway

Makes your writting bold and clear
Mozilla localForge

Improves the offline experiance of your web application

Top

Ep80: Sandboxed iFrames, Progress Element, Responsive Screenshots

Play safely in sandboxed IFrames - HTML5 Rocks

Set your iframe's permissions
angular translate - i18n for your Angular apps, made easy.

Translate your apps
Liquidapsive (Liqui-dap-sive)

Static vs Liquid vs Responsive vs Adaptive
sindresorhus/pageres

Generate sceenshots
Progress.js - Themeable progress bar library

A progress indication
Dug.js — A JSONP to HTML Script — Rog.ie

JSONP to HTML
Grid

A Simple guide to responsive design
Snugug/north

Design and development standards to align and guide your project

Top

Ep81: Outdated UX Patterns, Learn Angular JS, Lazy Ads

jimbojsb/launchrocket

Start and stop services installed with homebrew
raphaelcruzeiro/jquery-notebook

WYSIWYG editor
Tether – Marrying elements for life

Marrying elements for life
Outdated UX patterns and alternatives

Alternatives to UX patterns
How to Learn AngularJS - Your AngularJS Sherpa - ng-newsletter

An introduction to AngularJS
Why you should move that button 3px to the left - Google Ventures

Why you should perfect the details
madgex/lazy-ads

Responsive design for your ads
CSS Shake

CSS animations

Top

Ep82: Web Font Generators, ECMAScript 6 Features, Accessibility

Web Font Generator for Mac OSX - FontPrep

Generate web fonts
Code Guide by @mdo

A guide for well written code
Free mobile and web prototyping for designers - Marvel

Prototype websites, web applications, etc...
lukehoban/es6features

Features of JS 6
Accessibility and Building a web for everyone because sometimes it's not all about us

Why accessibility is important
Promise Anti-patterns

A blog post about promise anti-patterns
GraphicBurger - Tasty PSD & other resources made with care for each pixel. Free for both personal & commercial use. Have a bite!

Awesome resources
nanobar.js

Progress bar

Top

Ep83: Web Icons, Webshims, jQuery Coding Standards

Iconic

SVG Icon set with support for CSS customisation
First Time User Experiences

Tumblr blog on empty states
Webshim

Use HTML5 across browsers
Wirefy

A simple frontend framework for prototyping
jQuery Coding Standards and Best Practices

jQuery best practices
Random User Generator - FREE Photoshop Extension

Generate users for designing interfaces in photoshop
ScrollMagic - Demo

Parrallax scrolling
The Gamepad API ? Mozilla Hacks – the Web developer blog

A gamepad API

Top

Ep84: CSS Frameworks, Facebook Predictions API, Development Techniques

Bootstrap Foundation Five

A new CSS framework based on bootstrap and foundation
Facebook Predictions API

Make predictions on what a user will do next

Top

Ep85: Flexbox - CSS and Sass Style Guides - HTML Frameworks

Flexbox in the Real World

How to use flexbox in the best case scenario
My Current CSS and Sass Styleguide

A CSS and SASS styleguide
x-gif

A gif tag with awesome features
MixItUp

Filter & Sort Jquery plugin
Bootflat

A flat theme for bootstrap
Getting started with Grunticon - The Iconfinder Blog

A blog post on getting started with Grunticon
uberVU/grid

Drag and drop library for two-dimensional, resizable and responsive lists
Framework7 - Full Featured HTML Framework For Building iOS7 Apps

Full Featured HTML Framework For Building iOS Apps

Top

Ep86: Really Good Emails - Credit Card Detection - Epic Editor

Really Good Emails - The Best Email Designs in the Universe (that came into my inbox)

The Best Email Designs in the Universe
Error Handling in Nodejs - Developer Center - Joyent

Error Handling in Nodejs
Refills

Prepackaged patterns and components
How to correctly detect credit card type

How to correctly detect credit card type
Font-To-Width

Fit text to a specific width
Speaking JavaScript

Free JavaScript e-book
EpicEditor

An embeddable JavaScript Markdown editor
Debugging Asynchronous JavaScript with Chrome DevTools - HTML5 Rocks

Debugging Asynchronous JavaScript with Chrome DevTools

Top

Ep87: Creating Style Guides - Writing Interface Copy - Ratchet

Creating Style Guides · An A List Apart Article

How to make style guides
From Google Ventures: 5 Rules For Writing Great Interface Copy - Co.Design - business + design

5 rules for writing great interface copy
Ratchet

Front end mobile framework
elementTransitions.js

A wrapper around the code provided by a codrops article. Their code has been modified to allow more than one animatable element per page
Magic Animations CSS3

CSS animations framework
tiimgreen/github-cheat-sheet

Github cheat sheet
John Resig - Write Code Every Day

A blog post about writing code every day
vis.js - a dynamic, browser-based visualization library

A dynamic, browser-based visualization library

Top

Ep88: Gulp - Sketch 3 - Bud

gulp.js - the streaming build system

A streaming build system
What is new in Sketch 3 — Medium

New features in Sketch 3
azer/bud

Another build system...
qrohlf/trianglify

JavaScript library for making lowpoly backgrounds
sindresorhus/multiline

Multiline strings in JavaScript
How to Use steps() in CSS Animations - Designmodo

How to use steps() in CSS animations
PACE — Automatic page load progress bars

An automatic page load progress bar
Pesticide - Kill Your CSS Layout Bugs

Faster CSS layout debugging

Top

Ep89: Typography - Sidebars - Style Guides

typebase.css: The starting point for good typography on the web

A minimal and customisable typography stylesheet
timuric/Content-generator-sketch-plugin

A Sketch app plugin for generating dummy data such as avatars, names, photos, geo data etc
Slidebars

A jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website
felixge/node-style-guide

A guide for styling your node.js / JavaScript code
Improve the payment experience with animations — Medium

A blog post about improving the payment experience
The PourOver Book · PourOver

A library for simple, fast filtering and sorting of large collections
CSS Vocabulary

Terms for parts of CSS
Fluidbox (v1.3) - CodePen

Simple and responsive lightbox

Top

Ep90: Voodoo - Responsive Tables - JavaScript Graphs

Voodoo - A Next Generation Internet

Easily mix 2D and 3D content together on the same page.
Responsive tables

A solution for responsive tables with complex data
Isomer -- an isometric graphics library for HTML5 canvas

An isometric graphics library for HTML5 canvas
Dygraphs

Javascript charting library
Labelmask - Brad Frost Web

Blog post about labelmask
Seven JavaScript Quirks I Wish I'd Known About - Telerik Developer Network

Common quirks in JavaScript
Flexplorer

Explore how different flexbox properties work and interact with different elements

Top

Ep91: Path Animation - Sidebar Transitions - Icons

Advanced animation path » legomushroom

Advanced animation paths with svg
Velocity.js

A drop in replacement for jQuery's .animate function with better performance
Sidebar Transitions

Transition effects for off-canvas sidebars
Feather: 130 Free Icons by Cole Bemis

A growing library of simple icons
Open Iconic, a free and open icon set

Iconic (a robust icon set) is now open source!
Home — Google Web Fundamentals

Best practices when making websites
Eight Bit Color Picker

Color picker widget with no dependencies
NYTimes/ice

A plugin for editable content

Top

Ep92: Morphing Buttons - Rangeslider - Declarative Animations

sandropaganotti/pull-and-zoom

A library that zooms the header while a user pulls the body of a mobile page
Morphing Buttons Concept - Codrops

Inspiration for revealing content by morphing buttons
rangeslider.js

A simple jQuery polyfill for the range slider for the HTML5 range slider element
WTF, forms?

Friendlier HTML form controls with a little CSS magic,
Quill - An Open Source Rich Text Editor with an API

A rich text editor built for the modern web
Realistic terrain in 130 lines

Realistic terrain in 130 lines
AniJS, Declarative handling library for CSS animations

A Library to Raise your Web Design without Coding

Bezier Curves and Type Design: A Tutorial - Learn - Scannerlicker!

                                      A tutorial on how bezier curves work

Top

Ep93: Parallax - StyleStats - Uncss

Parallax Done Right — Medium

Tips for implementing parallax scrolling
Picturefill

A JavaScript polyfill from the responsive images community group
StyleStats - Useful tool to collect CSS statistics

Statistics about stylesheets
Luis Abreu: Why and How to avoid Hamburger Menus

The issues with hamburger menus and the alternatives
uncss: Find Unused CSS

Checks if you have any CSS that you're not using
leemunroe/grunt-email-design

A Grunt workflow for designing and testing HTML email templates with SCSS

Top

Ep94:Web Design Manual - Script-Injected - Flow.js

Web Design Field Manual

Web design resources
Script-injected "async scripts" considered harmful - igvita.com

Script-injected "async scripts" considered harmful
The Scroll Up Bar - The Usability Post

A blog post talking about the scroll up bar design pattern
Angular file upload - flow.js

JavaScript library that allows you to have multiple simultaneous, stable and resumable uploads via the HTML5 file API
Compressor.io - optimize and compress your images and photos

Compress and optimize images with up to 90% file size reduction
A Hacker's Guide to Git - Wildly Inaccurate

A thorough git tutorial

Top

Ep95: App js - LoopBack - SVGO

App.js - Mobile webapps made easy

A lightweight JavaScript UI library for creating mobile webapps that behave like native apps
svg/svgo-gui

A node webkit based GUI for SVGO
LoopBack

API server powered by Node JS
Single Element CSS Spinners

Single Element CSS Spinners
JavaScript Memory Profiling - Google Chrome

A blog post about JavaScript memory profiling
Skippr. A jQuery plugin for creating tasteful slideshows.

A lightweight fast slideshow plugin for jQuery

Top

Ep96: jQuery Plugins - Progress Bars - HTTP API Design

Selectize.js

A hybrid of a textbox and select box
pullpush - jQuery and JavaScript plugins and libraries

(BROKEN) A curated library of quality, well maintained jQuery and plain JS plugins and libraries
NumberProgressBar

Progress bar inspired by daimajia
interagent/http-api-design

HTTP API design guide extracted from work on the Heroku Platform API
Profound Grid - A grid system for fixed and fluid layouts

A responsive grid system for fixed and fluid layouts. Built in SCSS
demosthenes.info -- Slash Page Load Times With CSS Font Subsetting

A blog post about slashing page load times with css font subsetting

Top

Ep97: Data-binding Techniques - CSS Techniques - Zepto.js

Data-binding Revolutions with Object.observe() - HTML5 Rocks

A blog post about a new (as of May 20th, 2014) part of JavaScript that lets you watch objects for changes
icholy/ttygif

Convert terminal recordings to animated gifs
Let's Make a Bubble Map

How to make a bubble map with D3.js and TopoJSON
Single Responsibility - Drew Barontini

The principles of OOP in CSS
Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

A small, jQuery-compatible jQuery replacement
David Walsh on Redesigning with Sass - CSS-Tricks

A blog post about redesigning with SASS

Top

Ep98: Dev.Opera — Getting to know CSS Blend Modes

Dev.Opera — Getting to know CSS Blend Modes

Blend modes (like in Photoshop) in CSS
Stella.js

A jQuery plugin for parallax scrolling
Adaptive Placeholders - The Circle Blog

Placeholders that adapt into labels
Hide your header on scroll - Headroom.js

A lightweight JavaScript widget that hides the header until you scroll up again
Inspiration for Article Intro Effects - Codrops

Blog post header transitions
Landing Proxy.app

A proxy for verifying and watching HTTP requests

Top

Ep99: Inline Anchor Styles - Steady Scrolling - Web Speech API

Inline Anchor Styles

Styles and effects for links
Steady.js

Performance scrolling with media queries
voice-elements

Web components for text to speech, and speech to text
JS NICE: Statistical renaming, Type inference and Deobfuscation

Un-minify JavaScript
Sketch Tutorial_01 — Medium

How to use Sketch
jquery.matchHeight.js - a more robust equal heights plugin for jquery

Makes selected elements equal in height

Top

Ep100: CSS will-change Property - HTML5 Forms - Vertical Align

Dev.Opera — Everything You Need to Know About the CSS will-change Property

Blog post about the will-change CSS property
HTML5 Forms: JavaScript and the Constraint Validation API

A blog post about HTML5 form validation
Bounce.js

Easily create CSS animations
Z63 - Vertical align anything with just 3 lines of CSS - zerosixthree

A solution to vertical alignment
dc.js - Dimensional Charting Javascript Library

A javascript charting library
A Couple of Use Cases for Calc() - CSS-Tricks

Calculation in css

Top

Ep101: CSS will-change Property - HTML5 Forms - Vertical Align

Share: The Icon No One Agrees On - BOLD by Pixelapse

Blog post about all the different share icons
TTLabs/EvaporateJS

A JavaScript library for directly uploading files to Amazon S3 from your webpage
Web Starter Kit

Boilerplate & Tooling for Multi-Device development
Read JavaScript Allongé - Leanpub

A book about JavaScript
What Every Frontend Developer Should Know About Webpage Rendering — Frontend Babel

A blog post about webpage rendering
Odyssey.js

A simple way for journalists, designers, and creators to weave interactive stories

Top

Ep102: UI Kits - Internet Explorer Development Tools - Fast.js

rafaelconde/ios8-ui-kit

And extended and updated to iOS 8 UI Kit for Sketch
Announcing Internet Explorer Developer Channel - IEBlog

Developer version of IE, similar to Google Chrome Canary and Firefox nightly
Ideas for Subtle Hover Effects - Codrops

Inspiration for subtle hover effects
codemix/fast.js

Small JavaScript library that replaces some of JavaScript's built in functions with faster versions
Headstart

An easy to use automated front end setup
Epoch by Fastly

A real-time charting library for building visualizations

Top

Ep103: Human JavaScript - Interactive Graphs - Sidecomments

Introduction - Human JavaScript

An ebook about writting good JavaScript that can be read by humans
The Simpsons in CSS

The Simpsons characters made with HTML and CSS
Rickshaw: A JavaScript toolkit for creating interactive time-series graphs

A library for creating interactive time series graphs
Find Guidelines - The fastest way to brand assets.

Quickly find brand guidelines
Side Comments - Medium.com style commenting

JavaScript to give your site Medium.com style side comments

Top

Ep104: Pixels - Web Components - The Hamburger Menu

Aerotwist - Pixels are expensive

Article about how pixels get onto your users' screens
Why Web Components Aren't Ready for Production... Yet -Telerik Developer Network

Why Web Components aren't ready for production
The origin of the hamburger icon

A video showing where the hamburger icon came from
Papa Parse

Powerful CSV parser for Javascript
molly.is/saying

A blog post about the problem with avatars

Top

Ep105: SVG Backgrounds - Breach - FastShell

PatternBolt

A selection of SVG pattern backgrouns packed in a single CSS or SCSS file
DomFlags - devtools extension to create keyboard shortcuts to DOM elements

Keyboard shortcuts to DOM elements
Breach - A browser for the HTML5 era

A modular, hackable, and open source browser
FastShell: HTML5, Sass and JavaScript boilerplate for Gulp

Fast front-end boilerplate and workflows
The "Just In Time" Theory of User Behavior

Why you should present information as the user needs it rather than just giving a manual

Top

Ep106: Responsive Logos - Waves - Pagekit

Responsive Logos

Responsive design applied to logos
Waves

Add material design inspired click and hover effects to buttons
Page Kit

A modern CMS to create and share
DevDocs

Quickly find documentation
Dev.Opera — Responsive Images: Use Cases and Documented Code Snippets to Get You Started

A blog post about the picture element

Top

Ep107: Reading jQuery Source Code - HTML 5 Video Captions - Flexbox

18 Surprises From Reading jQuery's Source Code - Quick Left Boulder Colorado

18 surprising facts about jQuery
Can I use... Support tables for HTML5, CSS3, etc

Browser support tables for different things
Adding captions and subtitles to HTML5 video

How to add captions and subtitles to HTML5 video
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback — Osvaldas Valutis

How to use CSS's flexbox to set equal height
Please JS

Javascript to randomly generate colours

Top

Ep108: Practical Typography - Date Pickers - Form Builders

Butterick's Practical Typography

A guide to practical typography
Shoelace - Visual Bootstrap 3 Grid Builder

Visual bootstrap builder
Creating distraction-free reading experiences — azumbrunnen

How to make distraction-free reading experiences
Rome

Dependency free, opt-in UI, customisable date (and time) picker
Pure CSS One Div Weather Animated Icons - CodePen

Weather icon animations made using CSS and one div per icon

Top

Ep109: CSS Triggers - Fireshell - Responsive Design

The Web Manifest specification - HTML5 Doctor

Article from html5doctor.com about the web manifest specification
CSS Triggers...

A site which tells you whether a CSS filter will cause a layout, paint, or composite change to help you improve page performance
FireShell

Fiercely quick front-end boilerplate and workflows, HTML5, Grunt, Sass.
How we make RWD sites load fast as heck - Filament Group, Inc., Boston, MA

An article outlining "observations and approaches to delivering sites for speed and broader access"
way.js

a simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore

Top

Ep110: Chrome Dev Tools - heatmap.js - Device Mockups

Tell Chrome Developer Tools to use a dark theme - howchoo

Dark theme for Google Chrome's developer tools
Heatmap.js - Dynamic Heatmaps for the Web

lightweight, easy to use JavaScript library to help you visualize your three dimensional data
HTML5 device mockups

HTML5 mockups of popular devices
Comprehensive Beginner's Guide to AngularJS - AntJanus

Beginner's guide to AngularJS
Enduring CSS: writing style sheets for rapidly changing, long-lived projects - Author and responsive web developer Ben Frain

How to structure CSS that's going to be used on a large scale

Top

Ep111: DPI - Responsive Charts - Media Queries

Designer's Guide to DPI

Introduction to DPI and PPI
Charlist - Simple reponsive

Responsive JavaScript charts
7 Habits of Highly Effective Media Queries - Brad Frost Web

Considerations for writing high-quality media queries
Victor.js - 2D Vectors for JavaScript

JavaScript 2D vector maths library for Node.js and the browser
Pure CSS parallax scrolling websites - Keith Clark

Article demonstrating "how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website"

Top

Ep112: DPI - Responsive Charts - Media Queries

Favicons, Touch Icons, Tile Icons, etc. What All Do You Need? - CSS-Tricks

Quiz about favicons, touch icons, tile icons, etc.
jonom/jquery-focuspoint · GitHub

Dynamically crop images to fill available space without cutting out the image's subject for 'responsive cropping'
Making SVGs Responsive with CSS - Codrops

Article explaining how to use CSS to make SVGs responsive
Timesheet.js - Open time tables with HTML, JavaScript and CSS …

Develop time sheets with HTML5 and CSS3
CSS Guidelines

High-level advice and guidelines for writing sane, manageable, scalable CSS

Top

Ep113: API Responses - Font Compression - Tab Styles

DataCollection.js

"Manipulate data from API responses with ease"
Dev.Opera — Native Responsive Images

Article about responsive images
Speed Up Your Bootstrap and Font-Awesome Sites Using Font Compression - Zoompf Web Performance

Using apache to compress fonts
Tab Styles Inspiration - Codrops

"A couple of modern and subtle tab styles and effects for your inspiration"
Advanced objects in JavaScript

A thorough blog post explaining how to create objects in javascript

Top

Ep114: Centering in CSS, Responsive Lightboxes, Dynamic Animations

Centering in CSS: A Complete Guide - CSS-Tricks

A guide from Chris Coyier with the aim of making centering in CSS less painful
TURNBOX.js - NOHT CO.,LTD.

A jQuery plugin for rotating cuboid animations
Implulse

(BROKEN)
Strip - A Less Intrusive Responsive Lightbox

A lightbox that only partially covers the page
drawer - blivesta · drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Top

Ep115: Touch Events, Font Downloads, Native Webapps

HotStudio/touchy

A Jquery plugin for handling touch events in mobile devices
Minimising font downloads - JakeArchibald.com

A blog post about how to minimize font downloads
touchSwipe

Another Jquery plugin for touch devices (mainly used for swiping)
iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps - Breaking the Mobile Web

A very long blog post about iOS 8 and iPhone 6
Web Components punch list - The Paciello Group – Your Accessibility Partner

A blog post about web components

Top

Ep116: CSS Shapes, Responsive Images, Angular JS

Getting Started with CSS Shapes: Wrapping content around custom paths - HTML5 Rocks

A blog post about css shapes
SweetAlert

A Javascript project designed to be a replacement for the javascript build-in alert-function
Animating Images With CSS Keyframes - Pencil Scoop - Web Design & Development

A blog post about animating images with css keyframes
AngularJS Tutorial: a comprehensive 10,000 word guide

A AngularJS tutorial
aFarkas/respimage

A responsive images polyfill

Top

Ep117: OS X Apps, Fixed Headers, Arrays

Building OS X Apps with JavaScript by Tyler Gaw

A blog post about buildings osx apps with javascript
csstyle Clean, Simple Styling for the Web

A modern approach for crafting beautifully maintainable stylesheets
zzmp/juliusjs

A speech recognition library for the web
Midnight.js - Switch fixed headers on the fly

A Javascript project that allows you to switch fixed headers on the fly
5 Array Methods That You Should Be Using Now - colintoh.com

A blog post about array methods

Top

Ep118: Page Transitions, Designing for Thumbs, Concise

Concise / Welcome

A front-end framework
How To Add Page Transitions with CSS and smoothState.js - CSS-Tricks

A blog post about about adding page transitions with css and smoothstate.js
How to design for thumbs in the Era of Huge Screens - Scott Hurff

A blog post about how design for thumbs in mobile devices with big screens
Converse.js

A Javascript plugin that allows to add xmpp chat client in a website
Pushy - Off-Canvas Navigation Menu

A responsive off-canvas navigation menu using css transforms and transitions

Top

Ep119: SVG Animations, Charts, Color Palettes

Coolors - The super fast color palettes generator!

A website that generates different color schemes
vivus.js - svg animation

A Javascript plugin for animating svg
9 basic principles of responsive web design

A blog post about responsive web design
MetricsGraphics.js - a library based on D3.js, optimized for visualizing and laying out time-series data

A library based on d3.js for creating charts
Type Genius

A website that helps you find a perfect font combo

Top

Ep120: Web Performance, Material UI, SQL Charts

Perf.Rocks

A website that helps you find resourses about web performance
Material UI - Material Design React Components

A tiny css framework and a set of react components that implement google's material design
gka/chroma.js

A Javascript library for color manipulations
CSS Dig

A chrome extension for analysing css files in the browser
FnordMetric - Framework for building beautiful real-time dashboards

A project that allows you to create charts from sql

Top

Ep121: Multi-Touch Gestures, UI Logic, SVG Animation

interact.js - JavaScript drag and drop, resizing and gestures with inertia and snapping

A Javascript library that supports drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers
Let the Browser Handle Your UI Logic for You - Parse Blog
Purplecoat.js - Simple Labeled Overlays

A Javacript plugin that lets you create overlays on elemeents
ConnorAtherton/walkway

An svg animation library
native_javascript_data_binding

A blog post about native javascript data binding

Top

Ep122: Lazy Image Loading, Underlining Text, Scrolling

aFarkas/lazysizes

A css and javascript library for high performance lazy loader for images
ScrollIt.js

A javascript plugin for scrolling pages
Smarter Link Underlines For Every Website - Eager Blog

A blog post about a css technique for adding link underlines
How To Scroll

A blog post with collection of tips on how to scroll
Furtive CSS

A css micro framework

Top

Ep123: Accessibility, Drag and Drop Interaction, Emojis

Practical ARIA Examples

A blog post about aria examples
Drag and Drop Interaction Ideas - Codrops

A blog about drag and drop interaction ideas
Twitter Emoji (Twemoji)

A open source emoji library made by twitter
Everybody Scrolls.

A blog post about usability best pratices of scrolling
HTML5 accessibility - work in progress November 2014

A blog post about accessibility of all the new html5 attributes across browsers

Top

Ep124: JavaScript Frameworks, Icons, Text on Images

Evil Icons

A svg icon pack
Researching the Performance costs of JavaScript MVC Frameworks - Filament Group, Inc., Boston, MA

A article about performance of popular javascript frameworks
http://css-tricks.com/design-considerations-text-images/

A blog post about design considerations when using text on top of images
The offline cookbook - JakeArchibald.com

A blog post about appcache
Responsive Type With Only CSS — Medium

A article about responsive type

Top

Ep125: Skeleton, AngularJS, The Fold

Skeleton: Responsive CSS Boilerplate

A css framework
JonathanZWhite/AngularJS-Resources

A collection of angularks resources
There is no fold.

A series of "twits" about the fold
Lazy-loading Google Maps — Osvaldas Valutis

A blog post about lazy-loading google maps
Free Icons - Best Icon Packs for Commercial Web Use

A blog post about best free icon packs for commercial web use

Top

Ep126: Font Families, Hamburger Menus, Flux

fontfamily.io

A website about compatibility tables for default local fonts
all this

(BROKEN)
Testing The Hamburger Icon for More Revenue

A article about testing the hamburger icon for more revenue
What is the Flux Application Architecture? — Brigade Engineering — Medium

A article that explains the flux application architecture
UX Project Checklist

Top

Ep127: Time Pickers, Decimals, Text Areas

ClockPicker

A time picker for bootstrap or jquery
MikeMcl/decimal.js

A arbitrary-precision decimal type for javascript
International Telephone Input

A jquery plugin for entering and validating international telephone numbers
Squire

A html5 rich text editor
State of Web Type

(BROKEN)
Poor Man's Styleguide - A frontend styleguide for the pragmatic

A frontend styleguide for the pragmatic

Top

Ep128: Icons, Cheat Sheets, Font Pairing

icono

A css icon set
tiimgreen/github-cheat-sheet

A github cheat sheet
The challenge for web designers in 2015 (or how to cheat at the future)
[Essential JavaScript Links](Essential JavaScript Links)

A collection of essential javascript links
Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

A website that helps you pair google fonts for possible beautiful combinations

Top

Ep129: Field Validation, CSS Reference, Progress Bars

Introducing FieldVal - Multipurpose JavaScript Validation Library

Broken
Matter.js - a 2D rigid body JavaScript physics engine

A 2D javascript physics engine
Mprogress.js

A javascript pluging that creates progress linear bar from google material design
CSS Reference - Codrops

A css reference
vissense/vissense

A utility library for observing visibility changes of dom elements
The Gooey Effect - CSS-Tricks

A blog post about making gooey effect using css and svg filters

Top

Ep130: Flexbox, Javascript Charts, Syntax Highlighting

Experiment: Using Flexbox Today - Chris Wright

A article about using flexbox
Taucharts — Javascript charts with a focus on design and flexibility.

A javascript charts library
CSS Ruler • Explore CSS lengths.

A chart for css ruler
highlight.js

A javascript plugin for syntax fighlighting
shade

A mathematicaly derived gradient explorer

Top

Ep131: Origami, React, Responsive Hero Images

Introducing Origami Live and Origami 2.0 — Medium

A blog post about Origami 2.0
React Tips and Best Practices - ÆFLASH

A article about react tips and best pratices
Responsive Hero Images Cloud Four Blog

A blog post about responsive hero images
Selz/plyr

A html5 media player with custom controls and webvtt captions
Fonts In Use – Type at work in the real world.

A website that shows you what fonts are being used in a website

Top

Ep132: Polygon Art, Colors, Scrolling

Animated Polygon Art - Gray Ghost Visuals Press

A blog post about animated polygon art
jQuery Unveil - A very lightweight plugin to lazy load images

A jquer plugin to lazy load images
It's Only Color

A blog post about color theory
ByNathan/jQuery.scrollSpeed

A jquery plugin for scrolling speed and easing
Design Last - Smashing Magazine

Top

Ep133: Inspiration, JQuery Knobs, Design Principles

Call to Idea - Get inspired
JQuery Knob demo

A jquery plugin for touch, mouse, wheel and keyboard events or Knobs

Design Principles

A website about design principles

openexchangerates/accounting.js

A javascript library for number, money and currency formating

Dropdown Menus with More Forgiving Mouse Movement Paths - CSS-Tricks

A blog post about dropdown menus

Top

Ep134: Reactive Programming, Accessible Colors, Javascript Errors

The introduction to Reative Programing you've been missing

A post about reactive programming

Color Safe - accessible web color combinations

A tool for choosing colors based on the WCAG guidelines

Track Javascript, AngularJS and JQuery errors with Google Analytics

(BROKEN)

colorable

A tool that helps you measure the contrast ratio of your background to text

Dynamically adding text tracks to HTML5 video - Ian Devlin

A blog post about on adding dynamic text tracks to html5 videos

Top

Ep135: BEM, jQuery Plugins, Web Fonts

BEM 101 - CSS-Tricks

A article about BEM
selectivity

A modular and light-weight selection library for jquery and zeptojs
Prism Effect Slider with Canvas - Codrops

A blog post about how to create a prism effect slider with canvas
X-editable :: In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery

A jquery plugin for creating editable elements on a web page
Google Web Fonts Typographic Project

A collection of hand-picked font from google fonts

Top

Ep136: Date Pickers, CSS Refactoring, HTML Audio

Bootstrap Date Paginator - Date Paginator based on Bootstrap Paginator

(BROKEN)
Starting a Refactor with CSS Dig - CSS-Tricks

A article about css dig chrome extention
Kamran Ahmed

A jquery plugin for messaging users
PixelsCommander/HTML-GL

A Graphics Library
audio.js

A javascript library that allows HTML5's tag to be used anywhere.

Top

Ep137: Space.js, Materialize, Living Style Guides

Space.js – HTML-driven narrative 3D-scrolling

A HTML-driven narrative 3D-scrolling
What nobody tells you about "will-change"

A article about "will-change" property on css
Flexbox Cheatsheet

A flexbox cheatsheet
Documentation - Materialize

A responsive front-end framework based google's material design
Living Style Guide Tools In-depth Overview — Medium

A blog post about living style guide

Top

Ep138: Semantic UI, Polyfills, HTML 5 Patterns

Semantic UI

A css framework
github/fetch · GitHub

A jquer plugin for touch, mouse, wheel and keyboard events or knobs
How to Create (Animated) Text Fills - Codrops

(BROKEN)
http://html5pattern.com/

A javascript library for number, money and currency formatting
Basscss

A blog post about dropdown menus

Top

Ep139: jQuery Boilerplate, Sass, Maps

jQuery Boilerplate

A very long post about introdution to reactive programming
SassMe - A Tool for Visualizing SASS Color Functions

A jquer plugin for touch, mouse, wheel and keyboard events or knobs
gitignore.io - Create Useful .gitignore Files For Your Project

(BROKEN)
slick - the last carousel you'll ever need

A javascript library for number, money and currency formatting
jQuery Mapael - Ease the build of pretty data visualizations on dynamic vector maps

A blog post about dropdown menus

Top

Ep140: Photo Gallery Plugins, Admin UI, Font Sizing

PhotoSwipe: Responsive JavaScript Image Gallery

A very long post about introdution to reactive programming
Flakes • An Admin UI & Template Framework

A jquer plugin for touch, mouse, wheel and keyboard events or knobs
Keeping it simple: coding a carousel - Christian Heilmann

(BROKEN)
CSS Font Sizing - bitsofco.de

A javascript library for number, money and currency formatting
Medium.js

A blog post about dropdown menus

Top

Ep141: TinySort, Push Notifications, Responsive Tables

TinySort

Is a small script that sorts HTMLElements
Visual Guide to CSS3 Flexbox: Flexbox Playground
Push Notifications on the Open Web

A tutorial of push notifications
Responsive Tables in Pure CSS - LivingSocial's Technology Blog

A blog post about responsive Tables

Top

Ep142: Vendor Prefixes, Media Queries, JavaScript

Free Mailchimp API Tutorial
postcss/autoprefixer

Parce Css and add vendor prefixes to rules by Can I Use
Clusterize.js

Tiny plugin to display large data sets easily
Making our Media Query Mixins More Flexible

A blog post about media query mixins
A re-introduction to JavaScript (JS tutorial) - JavaScript - MDN

A javascript tutorial
Medium Style Confirm - Bitwiser.in

A medium.com style confirm dialog

Top

Ep143: Data Binding, Nesting, Image Zooms

lowvision.support

Is a website for testing accessibility
jQuerymy

A lightweight jQuery plugin for complex two-way data binding in real time.
Nesting Components

(BROKEN)
fat/zoom.js

Medium's Image Zoom for jQuery
Flickity

Touch, responsive, flickable carousels

Top

Ep144: WebP, Static Maps, Watermarks

Tiff - a visual typeface diff tool.

A type diff tool that visually contrasts the differences between two fonts.
Static Map Maker - a static map API helper
Makerbook - The best free resources for creatives.
watermark.js - watermarks in the browser

A javascript library for adding watermarks to image.
WebPonize - webponize.github.io

(BROKEN)

Top

Ep145: Justice, Carousels, Centering in CSS

okor/justice

Embeddable script for displaying web page performance metrics.
How to make a carousel using only HTML and CSS (no JavaScript required!)

A article about making carousel using only html and css
jsblocks - Better JavaScript MV-ish Framework

From simple user interfaces to complex single-page applications using faster, server-side rendered and easy to learn framework
How to Center in CSS

A tool that helps center things in css.
[ECMAScript 6 compatibility table](ECMAScript 6 compatibility table)

Top

Ep146: Dropdowns, Scrolling, Motion Blur

CSS Mega Dropdown - CodyHouse

A responsive and easy to customise mega-dropdown component.
ReadRemaining.js - How long you'll need to read any text.

Tell your readers how long they'll need to get through all of your gibberish, with this clever jQuery plugin.
Motion Blur Effect with SVG - Codrops

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
ScrollWatch

Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position.
How to vertically center a clipped image with CSS — Jon Rohan

A blog post about how to vertically center a clipped image with css

Top

Ep147: Web Features, Form Design, Color Pickers

sgentle/caniuse-cmd · GitHub

Caniuse command line tool
The 10 Commandments of Good Form Design on the Web – Mono

A article about the 10 commandments of good form design on the web
Tiny Colorpicker: A lightweight cross browser color picker.

Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input
Mobile-Friendly Test

Test how easily a visitor can use your page on a mobile device
lukehoban/es6features

Overview of ECMAScript 6 features

Top

Ep148: Web Design Trends, Sharing Buttons, Flexbox Techniques

7 future web design trends

(BROKEN)
Simple Sharing Buttons Generator by @fourtonfish

Create light-weight, mobile-friendly sharing buttons for Facebook, Twitter, Google+, and other social networks -- it's all completely free
Useful Flexbox Technique: Alignment Shifting Wrapping - CSS-Tricks

A blog post about useful flexbox technique called alignment shifting wrapping
When it comes to delivering the best possible user experience, how fast is fast enough? - SOASTA

A blog post about delivering the best possible user experience
Card Expansion Effect with SVG clipPath - Codrops

A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.

Top

Ep149: Performance Tools, Material Design, Sliders

Performance Tools - CSS-Tricks

A blog post about performance tools
The Making Of "In Pieces"

A article about designing an interactive exhibition with css clip paths
Material Design Lite

A front end framework based on google material design
Blueprint: Zoom Slider - Codrops

A simple content slider with depth-like zoom functionality for a predefined area in each slide.
Summernote - Super Simple WYSIWYG editor on Bootstrap

A wysiwyg editor on Bootstrap

Top

Ep150: CSS Shapes, JavaScript, Font Combinations

Working with Shapes in Web Design - CSS-Tricks

A blog post about working with shapes in web design
purifycss/purifycss · GitHub

A javasript plugin that removes unused CSS
JS: The Right Way

A javascript guide
airbnb/javascript

A javaScript Style Guide
Great Font Combinations You Need to Try - Designmodo

(BROKEN)

Top

Teamtreehouse Mobile App Design For Ios

Source: https://github.com/MHM5000/TreehouseShow

Posted by: reedbetheraine57.blogspot.com