Webdev Brain

As webdeveloper I see daily tons of good resources and want to share them with the community.

I tried them to categorize and give them a structure.

###Type of Content

• Concept - General view on how to design and create things
• Standard - A defined standard for a technologie
• Knowhow - Specific Knowhow about a specific topic
• Learning - Here you can learn something about general concepts or technologies
• API - API Description of a technology / standard or whatever

##Index

• Must See
• Software Design
• Clean Code
• Standards / Specification
• Services
• Great Resources
• eBooks
• Blogs
• Tools
• Frameworks
• Boilerplate
• Articles
• Browser Plugins
• Email Newsletter
• Security
• Learn with Games and Challenges

##Must See ###Video

• EN Inventing on Principle by Bret Victor
• EN The Future of Programming by Bret Victor
• EN Stop Drawing Dead Fish by Bret Victor
• EN CQRS and Event Sourcing by Greg Young
• EN Systems that Run Forever Self-heal and Scale by Joe Armstrong
• EN Micro-Service Architecture by Fred George
• EN Introduction to NoSQL by Martin Fowler
• EN Architecture the Lost Years by Robert Martin
• EN The Art of Simplicity by Venkat Subramaniam
• DE Rewrites überleben

###Slides

• Your Code Sucks - Letz fix it
• The Landscape Of Front-end Development Automation
• Cool like Frontend Developer - Grunt, RequireJs, Bower and other Tools
• Functional Programming - gr8 code transformation example from oo style (imperative) to functional style (declarative)

##Software Design ###PHP

• Practical PHP Testing Patterns - Concept - by Giorgio Sironi
• Practical PHP Patterns - Concept - by Giorgio Sironi
• Practical PHP Refactoring - Concept - by Giorgio Sironi
• Create your own Framework on top of the Symfony2 Components - Learning - by Fabien Potencier
• Chaplin - Concept - A Sample Application Architecture Using Backbone.js

###Javascript

• Design Patterns in Javascript - Concept - based on head first design patterns book
• Backbone.js Fundamentals - complete run down of backbone.js applications including modular design, AMD, how to solve routing problems
• Essential JavaScript Design Patterns For Beginners - free eBook by Addy Osmani
• Large Scale Javascript Application Architecture - Concept - design & javascript patterns, jQuery, MVC, build large and scalable apps - Slides by Addy Osmani
• Javascript Design Patterns - by joe zimjs
• Javascript Pattern Collection - by shichuan
• SOLID Javascript - by Derek Greer
• Designing Better Javascript API's - Concept - by Rodney Rehm

###Software Patterns General

• Sourcemaking - Concept - Design Patterns and Refactoring - Collection and explanations of patterns, anti patterns, refactoring, uml
• Scalable and modular architecture for css - Concept - Best practices on how to design proper css
• 12 factor app - Concept - A methodology for building software-as-a-service apps

##Clean Code

• Front End Development Guidelines
• Idiomatic.js - Principles of Writing Consistent, Idiomatic JavaScript
• Javascript Garden - Best Practises for Javascript Programming
• HTML5 Semantics and Good Coding Practices
• Code Style Guide - ThinkUp's Code Style Guides for HTML / CSS / Javascript / PHP / Smarty
• Code Style Guide by Google - Google's HTML/CSS STyle Guide
• HTML/CSS Code Style Guide by @mdo

##Standards / Specifications

• PHP Standards - Description of PHP Standards, well known as PSR-0, PSR-1, ...
• Semantic Versioning
• Keep a Changelog - not a real standard, but helpful to write changelogs
• JSON Schema - json schema standard explained
• JSON API - a specification for building APIs in JSON

##Services

• Swagger - Framework for API Specification (specify your API with yml)
• Apiary - Framework for API Specification (specify your API with yml)
• Mashape - API Services
• Kong - Secure and Manage your Microservices + APIs behind Kong as infrastructure layer
• Zapier - Service to connect different apps together

##Great Resources

• makeawesomeweb - link list with preview of the best web development tools
• JsGoodies - daily links of interesting web tools
• move the web forward - resources, tips for web development - initiative by paul irish, addy osmani and a lot of other respected people in the web developer scene
• Mobile Web Best Practises - link list of good resources for mobile web development
• Awesome PHP Libraries
• Superhero.js - Collection of the best ressources for Javascript
• JavascriptOO - Collection of the best ressources for Javascript
• Nodecloud - Collection of the best node.js ressources
• nerdi - Collection of useful webdesign and development utilites
• Frontend Dev Bookmarks - Huge list of awesome bookmarks for frontend development
• Webplatform Docs - Community-driven site that aims to become a comprehensive and authoritative source for web developer documentation
• DevDocs - Searchable Documentation for HTML5/CSS/JS/HTTP/...
• Feed the Bot - Great articles about Webpage optimisation like Speed/Mobile/SEO

##eBooks

• JsBooks - free eBooks for javascript
• Node.js for Beginner - node.js for beginner
• proGit
• The Little Book on Coffescript
• Regex eBook German
• Eloquentjavascript - free eBook by Marijn Haverbeke
• DIVE INTO HTML5 - free eBook by Mark Pilgrim
• Building iPhone Apps with HTML, CSS, and JavaScript - free eBook by Jonathan Stark
• Javascript Bibliography - free eBook by editors of Safary books online
• OOP mit Javascript - free eBook by Peter Kropff- german
• HTML5 Handbuch - free eBook by Stefan Münz - german
• leanpub - create you own eBook
• Learn Regex The Hard Way - 54 Lessons with exercises about Regex
• Security Engineering

##Blogs ###Symfony2

• Blog by Matthias Noback
• Blog by Richard Miller
• Blog by Lukas Smith

##Tools

###Software Analysis / Design

• YUML - UML diagrams
• Gliffy - UML diagrams
• Websequence Diagrams - Sequence diagrams
• Creately - Sequence + Class diagrams

###Editors

• jsbin - Javscript Editor in Browser
• jsfiddle - Javascript Editor in Browser
• cloud9ide - Collaborative Browser IDE for Development

###CSS3

• CSS3 Maker - CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.
• CSS3 Generator
• CSS3 Clickchart

###Graphics / Design

• Typecast - to create visual and semantic designs live and share the results
• Responsify - Create online a responsive grid and download the template
• Fontsquirrel - Handpicket free fonts, also with a @font-face generator
• Pixlr - Pixlr is a free online photo editor. Edit, adjust and filter your images.
• Pencil - Opensource Online GUI Prototyping Tool
• SpriteCow - helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css
• ResponsivePx - Online tool which helps to find exact pixel sizes for responsive webdesign

###Performance

• Webpagetest - Checks a website and analyzes performance issues
• GTMetrix - Checks different pages based on yslow and other tools and creates a report with suggestions
• Pingdom - Checks a website and analyzes performance issues
• Google Page Insights - Analyze the page and get tips how to improve the performance
• Loads In - Online Test of Webpage Load time
• Webwait - Very small tool to test website responses and compare with different websites
• YSlow for chrome - YSlow Browser Plugin
• YSlow for firefox - YSlow Browser Plugin
• Article Performance
• Yahoo Guideline - Knowhow
• DOM Monster - bookmarklet, which analyzes the DOM and give you tips how to improve

###Others

• DevNullSmtp - Devnull SMTP server - a dummy email server for testing purposes
• regex101 - Regex Service
• NGrok - share your localhost with the internet
• .htaccess tester
• Screenr - make online screencasts for free
• Sound and Movie Loops
• Templatr - Create online a webside template
• TuttiJs - Test Javascript on different browsers simultaneously
• Ci Testling - Test Javascript on every commit
• h5bp-docs - website generator out of markdown files
• real time web technologie guide - list of tools for real time communication
• jsdo it - javascript live code sharing / editing
• hurl - do curl like requests online
• puhpet - Vagrantfile Generator with simple GUI for Web Development
• rove - Vagrantfile Generator with simple GUI
• List of HTML5 Cross Browser Polyfills

##Frameworks

###jQuery

• jQuery Perfomance Improvement Tips - Knowhow
• jQuery Essentials - Learning
• Learn jQuery in 30 Days - Learning
• Appendto - Learning - jQuery and Javascript screencasts to learn jQuery and Javascript
• The 50 most useful plugins in 2011

##Boilerplate

• HTML5 Boilerplate
• HTML5 Mobile Boilerplate
• HTML5 Reset
• jQuery Plugin Boilerplate
• Twitter Bootstrap
• Twitter Bootstrap Themes
• jQuery Boilerplate
• MEAN Boilerplate - MEAN is a boilerplate that provides a nice starting point for MongoDB, Node.js, Express, and AngularJS based applications.

###RUP

• UPEDU - "Lightweight" RUP
• RUP Templates - Templates and some examples of RUP

##Articles / Slides / Video

Performance

• Design for Performance
• Page Speed: How Soon Will Visitors See Your Content? - Excellent article with a lot of good links
• Fluent 2014, "Keynote With Paul Irish" - improvements of webpageloadtime
• High Performance Websites with Steve Souders
• Webpage Performance Optimisation - Part 1
• Webpage Performance Optimisation - Part 2

HTTP

• HTTP Headers for Dummies - Knowhow
• Why Every Webdeveloper Should Read the HTTP Specification - Knowhow

HTML5

• Polyfill the HTML5 Gaps - Knowhow, Slides

jQuery

• Building Stateful jQuery Plugins (Widgets) - Knowhow

CSS3

• CSS Position Einmaleins - german
• The 30 CSS Selectors You Must Memorize - Knowhow

Websockets

• Websocket Basics - Concept

NodeJS

• An advanced Example of NodeJS, Express.js (mvc), EJS (templating) and socket.io (sockets) which really works - Knowhow - German

Slides

• Fabien Potencier - Look Beyond PHP

Music

• Multiplayer Online Musice Instrument

##Browser Plugins ###Chrome

• Web Developer - The Web Developer extension adds various web developer tools to a browser
• Ripple - Emulator for different Environments like tablet and mobile
• Edit this Cookie - Cookie modifier for chrome
• JSON View - Get beautified JSON Responses

###Firefox

• FireBug - The most popular and powerful web development tool
• FirePHP - FirePHP enables you to log to your Firebug Console using a simple PHP method call.
• FirePath - tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors
• Web Developer - The Web Developer extension adds various web developer tools to a browser
• HttpFox - monitors incoming and outgoing HTTP traffic
• YSlow - YSlow analyzes web pages and suggests ways to improve their performance
• User Agent Switcher - Switch the user agent of a browser
• PHP Developer Toolbar - With this addon you can search functions quickly for the official function description directly into your browser
• Modify Headers - Modify all possible header in a browser
• easy XDebug - Plugin for Debugging with XDebug
• Unplug - Download embedded web videos
• Video Download Helper - Download embedded web videos

##Email Newsletter

• javascriptweekly
• html5weekly
• web-design-weekly
• statuscode - weekly email for programmers
• phpweekly - weekly email for php developers
• gamedev-js-weekly
• dbweekly
• nodeweekly
• rubyweekly
• mobileweekly

Security

###OWASP

• Open Web Application Security Project
• OWASP Top 10 Tools and Tactics
• Webscarab - framework for analysing applications that communicate using the HTTP and HTTPS protocols
• Webgoat - is a deliberately insecure EE web application maintained by OWASP designed to teach web application security lessons

###Security General

• ExploitDB - Vulnerability reports, security articles, tutorials and more.
• SecTools - The top security tools

###XSS - Cross Site Scripting / Security Testing Websides

• Eine Einführung in XSS
• About Security
• SQLi Detection
• Skipfish
• Google Gruyere
• W3af - Web Application Attack and Audit Framework
• DomXssScanner - DOMXSS Scanner is an online tool to scan source code for DOM based XSS vulnerabilities

###PHP Security

• PHPSecInfo
• Sicherheitslöcher in PHP Scripten finden
• SecurityScanner

###Virus / Scanning

• UnmqwkParasites - Online malwarecheck to a webside

Learn with Games and Challenges

• Hackerrank - A lot of programming challenges, where you can compete against others
• Codewars - A lot of Katas/Dojos/Challenges with Badges
• Coderbyte - Learning - Put your programming skills to the test
• Regex Golf - Write Regex and get as much as possible points
• Regex Crossword - Solve Crosswords with writing regex
• MySQL Game - Fight against others in a real mysql db with db queries
• Dungeons and Developers - An RPG-style talent tree for web developers
• Code Combat - Learn javascript programming with a real game, where you have to code the moves to win the battle

Learning

• Codecademy - Learn step by step different languages online
• Playterm - Educational Linux Shell Replays
• AppendTo - free javascript/jquery video lessons
• Nodeschool.io - Interactive Node Workshops
• Stackoverflow recommended list of dev books
• Perfschool - Interactive Performance Workshop