├── LICENSE ├── README.md ├── build-tools.md ├── caching.md ├── git.md ├── html-and-css.md ├── http.md ├── javascript.md ├── local-development-environment.md ├── php.md ├── uncategorized.md ├── web-hosts.md ├── web-servers.md └── wordpress.md /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Web Developer Resources 2 | = 3 | 4 | A super lightweight introduction to web technologies, and table of contents to top-notch 5 | resources on the internet for web developers. 6 | 7 | [Local development environment](local-development-environment.md) 8 | 9 | [Caching](caching.md) 10 | 11 | [Web servers](web-servers.md) 12 | 13 | [Web hosts](web-hosts.md) 14 | 15 | [HTTP](http.md) 16 | 17 | [HTML & CSS](html-and-css.md) 18 | 19 | [Javascript](javascript.md) 20 | 21 | [PHP](php.md) 22 | 23 | [Build tools](build-tools.md) 24 | 25 | [git](git.md) 26 | 27 | [WordPress](wordpress.md) 28 | 29 | [Uncategorized Notes](uncategorized.md) 30 | 31 | ## Contributing 32 | 33 | Contributions welcome. Open up an issue and describe what you'd like to add. 34 | 35 | ## Licensing 36 | 37 | This repository is licensed under the [WTFPL](LICENSE). -------------------------------------------------------------------------------- /build-tools.md: -------------------------------------------------------------------------------- 1 | Build Tools 2 | = 3 | 4 | Build tools run automated processes which are too mundane for humans to be tasked with. 5 | 6 | ## Articles 7 | 8 | [Grunt for People Who Think Things Like Grunt are Weird and Hard](http://24ways.org/2013/grunt-is-not-weird-and-hard/) by Chris Coyier. 9 | 10 | ## Build Tools 11 | 12 | [Grunt.js](http://gruntjs.com/) 13 | 14 | [Gulp.js](http://gulpjs.com/) 15 | 16 | [Broccoli.js](https://github.com/broccolijs/broccoli) -------------------------------------------------------------------------------- /caching.md: -------------------------------------------------------------------------------- 1 | Caching 2 | = 3 | 4 | Caching is intelligent laziness. The work from previously performed tasks should be reused anywhere it can be. A browser shouldn't download a CSS file that hasn't changed since the last page load, and an application shouldn't requery a database if the value hasn't changed since the last time it checked. 5 | 6 | See [HTTP > Caching](http.md#caching), [Web Server > Caching](web-servers.md#caching), and [PHP > Caching](php.md#caching). -------------------------------------------------------------------------------- /git.md: -------------------------------------------------------------------------------- 1 | ## Git 2 | 3 | [Pro Git](http://git-scm.com/book) A comprehensive, free online book. 4 | 5 | ### Educational Games 6 | 7 | [Learn Git branching](http://pcottle.github.io/learnGitBranching/) A learning game with visual commit history. 8 | 9 | [trygit](https://try.github.io/levels/1/challenges/1) by Github. A learning game. 10 | 11 | ### Tricks 12 | 13 | By default, pull request branches are not sync'd to your local repository copy. [You can configure git globally to fetch pull requests](https://gist.github.com/piscisaureus/3342247#comment-430273). -------------------------------------------------------------------------------- /html-and-css.md: -------------------------------------------------------------------------------- 1 | HTML & CSS 2 | = 3 | 4 | ## Specifications 5 | 6 | The [WHATWG](http://www.whatwg.org/specs/web-apps/current-work/multipage/) creates the [HTML living standard](http://www.whatwg.org/specs/web-apps/current-work/multipage/), defining how browsers should implement HTML. 7 | 8 | The [W3 CSS working group](http://www.w3.org/Style/CSS/members) creates the CSS specification, defining how browsers should implement CSS. The latest ready-for-production specification is [Snapshot 2010](http://www.w3.org/TR/css-2010/). 9 | 10 | ## User Agent Stylesheets 11 | 12 | Browsers come with stylesheets that load on every page: [Firefox](http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css), [Webkit (Safari)](http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css), [Chromium](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/html.css). 13 | 14 | ## Articles 15 | 16 | [How Browsers Work](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) How browser rendering engines work: HTML parsers, DOM and render tree construction, layout and painting. 17 | 18 | Responsive images are coming to browsers soon with the `` element, `srcset` and `sizes` attribute. [Picturefill](http://scottjehl.github.io/picturefill/) is a polyfill so you can use this functionality in browsers that don't yet support them. 19 | 20 | Use [Protocol relative URLs](http://www.paulirish.com/2010/the-protocol-relative-url/). 21 | 22 | [* { box-sizing: border-box } FTW](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) 23 | 24 | [Block Formatting Contexts](http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/) 25 | 26 | [The Z-Index CSS Property: A Comprehensive Look](http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/) 27 | 28 | [Create sprites with Instant Sprite](http://instantsprite.com/) 29 | 30 | [Breaking up with Sass and using PostCSS as a CSS pre-processor](http://benfrain.com/breaking-up-with-sass-postcss/) 31 | 32 | ## CSS Methodologies 33 | 34 | CSS methodologies provide structural guidelines for organizing CSS. See [OOCSS](http://oocss.org/), [SMACSS](http://smacss.com/) and [BEM](http://bem.info/method/definitions/). Here's an [everyman's description of all three](http://justinmarsan.com/css-methodology-and-frameworks/). 35 | 36 | [BEM 101](https://css-tricks.com/bem-101/) 37 | 38 | ## Libraries 39 | 40 | [Normalize.css](http://necolas.github.io/normalize.css/) makes browsers render all elements more consistently and in line with modern standards. 41 | 42 | [Reset CSS](http://meyerweb.com/eric/tools/css/reset/) 43 | 44 | [HTML5 Boilerplate](http://html5boilerplate.com/), a lean HTML template of best-practices with plenty of documentation. 45 | 46 | ## Frameworks 47 | 48 | [Bootstrap](http://getbootstrap.com/) 49 | 50 | [Pure](http://purecss.io/) 51 | 52 | ## Resources 53 | 54 | [Can I use](http://caniuse.com/) Browser support information for HTML/CSS properties/features. 55 | 56 | ## Blogs 57 | 58 | [CSS tricks](http://css-tricks.com) A blog about CSS. 59 | -------------------------------------------------------------------------------- /http.md: -------------------------------------------------------------------------------- 1 | HTTP 2 | = 3 | 4 | Hypertext Transfer Protocol (HTTP) is the communication method for transferring data on the web. It is defined by the [http://www.ietf.org/](Internet Engineering Task Force), and the most recent spec is defined by RFCs [7230](https://tools.ietf.org/html/rfc7230), [7231](https://tools.ietf.org/html/rfc7231), [7232](https://tools.ietf.org/html/rfc7232), [7233](https://tools.ietf.org/html/rfc7233), [7234](https://tools.ietf.org/html/rfc7234), and [7235](https://tools.ietf.org/html/rfc7235). 5 | 6 | ## Caching 7 | 8 | Anything interacting with a web server (e.g. browsers and CDNs) does so via HTTP. HTTP response headers should be set to employ a caching strategy. See [HTTP Caching](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching) for an introduction to these techniques. -------------------------------------------------------------------------------- /javascript.md: -------------------------------------------------------------------------------- 1 | Javascript 2 | = 3 | 4 | Javascript is the programming language commonly used for client-side (in browser) functionality. [ECMA International](http://www.ecma-international.org/default.htm) defines the ECMAScript standard (synonymous with Javascript), the most widely supported among browsers being [ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm). 5 | 6 | [Javascript Design Patterns](https://github.com/addyosmani/essential-js-design-patterns) by Addy Osmani 7 | 8 | "JavaScript has certain characteristics that make it very different than other dynamic languages, namely that it has no concept of threads. Its model of concurrency is completely based around events. This makes it rather different than other general purpose dynamic programming languages like Ruby and Python. At least for certain classes of problems, I’ve found JavaScript to be much easier to program in—for example when writing an IRC server." - Ryan Dahl[1](http://dailyjs.com/2010/08/10/ryan-dahl-interview/) 9 | 10 | ## MVC/MVV/MV* 11 | 12 | Model-View-Controller (and the plethora of related concepts) aim to create a pragmatic software architecture in Javascript applications. 13 | 14 | [TodoMVC](http://todomvc.com/) is an example application built with different MV* frameworks to introduce their respective internals. 15 | 16 | [Backbone Fundamentals](https://github.com/addyosmani/backbone-fundamentals) by Addy Osmani covers MV* historically as well as practically. 17 | 18 | [React](https://facebook.github.io/react/index.html) is a view library. It introduced the concept of the virtual DOM — keeping track of the view's DOM and when changes are to be made to the view, only the atomic DOM manipulation methods are triggered on the existing elements, not a full re-render. See also [Flux](https://facebook.github.io/flux/) and [Relay/GraphQL](https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html). 19 | 20 | ## Templating Engines 21 | 22 | When rendering HTML via Javascript, a templating engine can be used to separate logic and markup. [Mustache](http://mustache.github.io/) is a great cross-language template engine. 23 | 24 | ## Libraries 25 | 26 | [jQuery](http://jquery.com/) Cross-browser DOM manipulation, event handling, animation, and Ajax. 27 | 28 | [D3](http://d3js.org/) Data-based DOM manipulation. [Three little circles](http://bost.ocks.org/mike/circles/) 29 | 30 | [Modernizr](http://modernizr.com/) HTML and CSS feature detection library. 31 | 32 | [ScrollMagic](http://janpaepke.github.io/ScrollMagic/) Scroll interaction jQuery plugin. 33 | 34 | [Select2](http://ivaynberg.github.io/select2/) Select box replacement jQuery plugin. 35 | 36 | ## Other links 37 | 38 | [Must watch JavaScript talks](https://github.com/bolshchikov/js-must-watch) 39 | 40 | [The Origin of JavaScript with Brendan Eich](http://www.stitcher.com/podcast/ruby-rogues/javascript-jabber/e/124-jsj-the-origin-of-javascript-with-brendan-eich-35282918) 41 | -------------------------------------------------------------------------------- /local-development-environment.md: -------------------------------------------------------------------------------- 1 | Local Development Environment 2 | = 3 | 4 | Live-editing files on a server is not cool. You should work on projects in a controlled, sandboxed environment on your computer. 5 | 6 | Use [MAMP](http://www.mamp.info/en/) for a quick boot, minimal configuration web server with MySQL, Apache and PHP. Good for beginners. 7 | 8 | Use [Vagrant](https://www.vagrantup.com/) to create a virtual machine which are replicable (easy to share with a development team) and infinitely customizable. 9 | 10 | [How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu](https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu) Cool walkthrough if you'd like to walk through manual installation of these via command line. -------------------------------------------------------------------------------- /php.md: -------------------------------------------------------------------------------- 1 | PHP 2 | = 3 | 4 | [PHP](http://php.net/) is a server-side scripting language. 5 | 6 | [Running PHP as an Apache module vs CGI vs FastCGI](http://blog.layershift.com/which-php-mode-apache-vs-cgi-vs-fastcgi/) 7 | 8 | ## Caching 9 | 10 | Memcached can be used as a peristent, cached key-value data store. 11 | 12 | [How to install and use Memcached on Ubuntu 12.04](https://www.digitalocean.com/community/tutorials/how-to-install-and-use-memcache-on-ubuntu-12-04) 13 | 14 | [PHP The Right Way, Object Caching](http://www.phptherightway.com/#object_caching) 15 | 16 | ## Debugging 17 | 18 | [XDebug](http://xdebug.org/) is an extension which provides debugging information, profiling capabilities, interactive script debugging with a debugger front-end, and code coverage analysis. 19 | 20 | ## PECL and PEAR 21 | 22 | [PECL](http://pecl.php.net/) is a PHP extension repository, with extensions written in C that can be loaded into PHP to provide additional functionality. 23 | 24 | [PEAR](http://pear.php.net/) is a PHP library repository, with libraries written in PHP that can be loaded in your application. 25 | 26 | A package manager for PECL and PEAR extensions is [available for the command line](http://pear.php.net/manual/en/installation.getting.php). -------------------------------------------------------------------------------- /uncategorized.md: -------------------------------------------------------------------------------- 1 | Uncategorized 2 | = 3 | 4 | [Imperative vs Declarative Programming](http://latentflip.com/imperative-vs-declarative/) 5 | 6 | A *package management system* automates the process of installing, upgrading, configuring, 7 | and removing software packages. There are package managers for operating systems (apt-get 8 | for Ubuntu, brew for Mac) as well as for programming languages (Composer forPHP, npm for Node), 9 | even applications (Package Control for Sublime Text). 10 | 11 | [New Relic](http://newrelic.com/) Application monitoring service. 12 | 13 | [RegExr](http://www.regexr.com/) A Regular Expression tester. 14 | 15 | [Grunticon](https://github.com/filamentgroup/grunticon) Takes icons and background images and generates CSS classes with cross-browser support. 16 | 17 | [Don't use icon fonts, use SVG](http://css-tricks.com/icon-fonts-vs-svg/) 18 | 19 | [Google Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/) 20 | 21 | Code should be deployed to environments in an automated manner. [Dandelion](https://github.com/scttnlsn/dandelion) is a simple deployment tool. 22 | 23 | ### Chome Dev Tools 24 | 25 | [Redefine Javascript functions as they are executing](https://www.youtube.com/watch?v=WQZio5DlSXM). 26 | 27 | [Employ Progressive Enhancement](http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/) 28 | 29 | [Use Web Workers for expensive Javascript tasks](http://www.html5rocks.com/en/tutorials/workers/basics/) 30 | 31 | [The SQL Entity-Attribute-Value pattern is an antipattern](http://mikesmithers.wordpress.com/2013/12/22/the-anti-pattern-eavil-database-design/) 32 | 33 | [The Jargon File](http://www.catb.org/jargon/html/) 34 | 35 | [Horizontal Inheritance](http://radar.oreilly.com/2014/01/horizontal-reuse-an-alternative-to-inheritance.html) 36 | 37 | [Composition over Inheritance](http://en.wikipedia.org/wiki/Composition_over_inheritance) 38 | 39 | [Retronauts Episode 91: A Tengen Family Reunion](http://www.1up.com/flat/Retronauts/R041610.mp3) a conversation with NES programmers. 40 | 41 | [Page.js](https://visionmedia.github.io/page.js/), a micro client-side router inspired by Express. -------------------------------------------------------------------------------- /web-hosts.md: -------------------------------------------------------------------------------- 1 | Web hosts 2 | = 3 | 4 | A web host provides the space on the internet to serve a website. 5 | 6 | [Digital Ocean](http://www.digitalocean.com) provides root access to a Linux distribution. -------------------------------------------------------------------------------- /web-servers.md: -------------------------------------------------------------------------------- 1 | Web servers 2 | = 3 | 4 | A web server refers to either the hardware (computer) or software (application) that helps deliver web content. 5 | 6 | [Apache](http://httpd.apache.org/) 7 | 8 | * [apachectl](http://httpd.apache.org/docs/2.2/programs/apachectl.html) a command line tool for controlling Apache. 9 | * [a2enmod/a2dismod](http://man.he.net/man8/a2enmod) a command line tool for enabling and disabling Apache2 modules. 10 | 11 | ## Caching / Optimizing 12 | 13 | A web server is responsible for and should be configured to set HTTP cache headers (see [HTTP > Caching](http.md#caching)) appropriately. 14 | 15 | A *web accelerator* serves as a front for your web server, speeding up delivery by various techniques including full-page caching and gzipping responses. [Varnish](https://www.varnish-cache.org/) is a popular, open source example. 16 | 17 | ## Uncategorized 18 | 19 | [Loab Balancing FAQ](http://www.doesconsulting.com/faq.shtml) 20 | -------------------------------------------------------------------------------- /wordpress.md: -------------------------------------------------------------------------------- 1 | WordPress 2 | = 3 | 4 | [WordPress](http://wordpress.org/) is an open source, PHP-based content management system for the web, developed by the [WordPress core community](http://make.wordpress.org/core/). 5 | 6 | Get [latest major version](http://wordpress.org/download/), or clone the git mirror of alpha development: git://develop.git.wordpress.org. 7 | 8 | ## Caching 9 | 10 | [WordPress + Memcached](http://scotty-t.com/2012/01/20/wordpress-memcached/) An overview of caching in WordPress. 11 | 12 | [Evan Solomon's "Fast WordPress"](http://evansolomon.me/notes/faster-wordpress-multisite-nginx-batcache/) 13 | 14 | See also [Web Servers > Caching](web-servers.md#caching), [HTTP > Caching](http.md#caching) and [PHP > Caching](php.md#caching). 15 | 16 | [WordPress Memcached Object cache](https://wordpress.org/plugins/memcached/) Use the WordPress object cache API with Memcached. 17 | 18 | ## Debugging 19 | 20 | [Debug Bar](https://wordpress.org/plugins/debug-bar/) Add a debug menu to the admin bar that shows query, cache and other helpful debugging info. 21 | 22 | [Debug Bar Console](https://wordpress.org/plugins/debug-bar-console/) Add a PHP/MySQL console to the debug bar. 23 | 24 | [Query Monitor](https://wordpress.org/plugins/query-monitor/) Adds debug output including: all DB queries, all hooks and their callbacks, PHP errors, constants, WP_Http requests. 25 | 26 | [Rewrite Rules Inspector](https://wordpress.org/plugins/rewrite-rules-inspector/) 27 | 28 | [Demo Data Creator](https://wordpress.org/plugins/demo-data-creator/) 29 | 30 | [WPDB Migrate Pro](https://deliciousbrains.com/wp-migrate-db-pro/) Sync DB content between WordPress installs. Requires a paid license. 31 | 32 | ## Libraries 33 | 34 | Standalone libraries that can be included with plugins or themes. 35 | 36 | [Posts 2 Posts](https://github.com/scribu/wp-posts-to-posts/) Create relationships between posts, pages, custom post types, and users. 37 | 38 | [Custom Metaboxes and Fields](https://github.com/WebDevStudios/Custom-Metaboxes-and-Fields-for-WordPress) Create admin UI for post metadata. 39 | 40 | ## Plugins 41 | 42 | [Memcached Object Cache](https://wordpress.org/plugins/memcached/) Use Memcached as an object cache. Requires Memcached, see 1. 43 | 44 | [Mercator](https://github.com/humanmade/Mercator) Multisite domain mapping for the modern era (requires 3.9+). A sequel-plugin to [WPMU Domain Mapping](http://wordpress.org/plugins/wordpress-mu-domain-mapping/). 45 | 46 | [Require Login](https://github.com/manovotny/wordpress-require-login) Limit front-end access to logged in users. 47 | 48 | [Gravity Forms](http://www.gravityforms.com/) offers UI for administrators to create forms with ease and output them on the front-end. Requires a paid license. Not easily extensible in some regards, and development takes place in a closed community. 49 | 50 | [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/) 51 | 52 | ## Uncategorized 53 | 54 | WordPress' development philosophies were inspired by [Havoc Pennington's writings](http://ometer.com/writing.html) 55 | 56 | ## Footnotes 57 | 58 | * 1 Memcached is not available in common shared environments or the core PHP install, as it is a PECL extension. For installation, see ["How to install and use Memcached on Ubuntu 12.04"](php.md) 59 | --------------------------------------------------------------------------------