Best‎ > ‎

Web Developer Code


AWS and GCP optimization

Used by Allen to optimize all our cloud services.

>>>>
We already quite optimized on our cloud bills and any more offering aren't really going to save us more than what we have already, we know the areas that needs to be optimized, its just AWS don't have those optimizations yet

Besides in order for these external website to work with AWS, they requires a lot of data to be stored on cloudwatch (since they need the visibility). Which by itself can be several hundreds per month already.
<<<<

We use Cloudflare instead of Amazon's Cloudwatch


Animations

https://greensock.com/ The standard for modern web animation, has PixiJS plugin

WebGL rain


Web hosts

Used by Zeeshan's team member Zohaib Khan


Tools

By Google

Build anything in components

Build software collaboratively from anywhere in the world, on any device, without spending a second on setup
Sherwin created a quiz for our devs (first fork it) https://replit.com/@SherwinJet/Promise-exercise#index.js
Repl hosts and serves your app (you do not need any server of your own) https://replit.com/site/hosting
Instant IDE (code from your browser) https://replit.com/site/ide

Tableau
https://www.tableau.com to embed analytics using Firebase

Vert.x
Eclipse Vert.x™ Reactive applications on the JVM
Recommended by Francis West, a CTO


UI frameworks

CSS framework recommended by Zeeshan's team member Zohaib Khan
Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Faizaan and Nisarg Patel like it


PRPL


Testing tools

Katalon has a great feature set in the free tier, as recommended by Petrick
The paid tier is for the desktop app


Jamstack is fast

Pages can also be pre-built into a fully static site and served from a CDN using Jamstack.


How to build web apps correctly


We should “use the platform” (modern features built into the language) instead of frameworks and build tools that keep getting replaced every few years.

“React renders your UI and responds to events” was how it was introduced. Not: “React is a way to transform and execute all your logic in a hierarchy of declarative markup”, as it has devolved into in many cases.


Use the platform

The future: use the platform

The concept of Web Components promises a future where web applications are built without frameworks. Instead of frameworks, developers could stick to ‘vanilla’ JavaScript and use the Web API’s made available by the browser.


React intentionally hides the platform because they feel they created a "better way".


Why not React?

“React’s difficulties with using web components stems from its attempt to hide the DOM from developers,” said Fagnani, “especially things like the difference between attributes, properties and events. Those are simply three separate things in the DOM, but in React developers don’t have the expressive power to use them directly.”



Web components

Web Components is an umbrella term for several native technologies (Custom Elements, Shadow DOM and HTML templates) that let us bundle the markup and dynamic behaviour of an element into a reusable piece of code, on a high level no different to the React or Vue component. As of May 2021, All the Ways to Make a Web Component lists 55 variants of a hypothetical <my-counter> component for comparison across bundle size, coding style and performance. Native web components, of course, stand out because they have no external dependencies (and, consequently, an unmatched tiny bundle size).


Stack rank of web component libraries


Typescript

Nice Javascript vs. Typescript toggle to see both

todo: create a tool that clearly shows the diff between two text blogs, like github does between to code versions


Lit


Intro: How to make a custom HTML tag that works everywhere and in all frameworks


PWA apps

Make a simple offline page, and a service worker to serve the offline page and cache some critical CSS and JavaScript

Can open (and save!) local files on your hard drive

All features and APIs


Electron

Build native Windows and Mac apps using embedded Chromium (Discord, Github Desktop and Slack use it)



Code in the cloud

Used by Angular 14 https://angular.io/start
It is recommended by Angular as a fast way to code in the cloud without the pain of maintaining a local dev environment. Looks cool to me!

Vite is built by the creator of Vue and can dramatically improve the performance of coding many languages during development, and reduce the feedback loop time which is ordinarily incurred with Webpack.

Vite alternative


Polymer is dead?

The Polymer library is in maintenance mode. For new development, we recommend Lit https://lit.dev/

Two good articles:


NFL and Mastercard uses them for speeding up sites (like cached XML) focused on Java


To review



Useful

fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL

Used by


Impressive outsource shops

2022-04-27 Pramesh (owner) introduced to George by Dimple in WhatsApp


The best web development technologies today, collected in one place.

Code formatting


Build single-page apps, without building an API


What we use for Freedom!


Your AI pair programmer
With GitHub Copilot, get suggestions for whole lines or entire functions right inside your editor.
Trained on billions of lines of public code, GitHub Copilot puts the knowledge you need at your fingertips, saving you time and helping you stay focused.

5 Underrated resources to learn Git and Github

Six Ways ToSix Ways To Drastically Boost Your Productivity As A Node developer Drastically Boost Your Productivity As A Node developer


Ruby on Rails 101

Search for the heading "Starting Ruby on Rails: What I Wish I Knew" at https://betterexplained.com/articles/series/webdev/

Rewritten from Java and Scala to Node https://en.wikipedia.org/wiki/Etherpad


WebRTC is supported by the following browsers:

Desktop PC

Microsoft Edge 12+[24]
Google Chrome 28+
Mozilla Firefox 22+[25]
Safari 11+[26]
Opera 18+[27]
Vivaldi 1.9+

Android

Google Chrome 28+ (enabled by default since 29)
Mozilla Firefox 24+[28]
Opera Mobile 12+

Chrome OS
Firefox OS
BlackBerry 10
iOS - MobileSafari/WebKit (iOS 11+)
Tizen 3.0



100% iframe showing another site

<html><head>
<style type="text/css">

html, body {
    height: 100%;
    margin: 0;
}
iframe {
    display: block;
    background: #000;
    border: none;
    width: 100%;
    height: 100%;
}
</style>
</head><body>
<iframe src="https://coronux.com/approved/?password=wedemboiz" />

</body></html>


PWAs (Progressive Web Apps)

A PWA is a website that is:

- Responsive: runs well in any resolution
- Offline: Service Workers let them run without an Internet connection
- Mobile app-like interactions: Push notifications, install to home screen, all possible in a web browser without the hassle of an app store
- Always up-to-date: No "click to see or install the latest version"
- Always https: Served via TLS (a Service Worker requirement) to prevent snooping
- SEO: Identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them
- Zero-install: All you need is a web link to share

Basically, a PWA is any website that took all the right vitamins!

PWAs actually benchmark faster than native mobile apps today, and the only times native apps are faster is with complex graphics.


PRPL pattern

PRPL strives to optimize for:

  • Minimum time-to-interactive
    • Especially on first use (regardless of entry point)
    • Especially on real-world mobile devices
  • Maximum caching efficiency, especially over time as updates are released
  • Simplicity of development and deployment


HTTP/2 server push allows the server to preemptively send resources to the browser.

The server returns the HTML file, and pushes the stylesheet at the same time.
The browser starts parsing the HTML. By the time it encounters the <link rel="stylesheet">, the stylesheet is already in the cache.

HTTP/2 server push eliminates a single HTTP request-response.

HTTP/2 Push needs to be utilized with care, as it forces data to the browser, even if the file is already in the browser’s local cache or bandwidth is already saturated. If done wrong, performance can suffer. <link rel="preload"> might be a good alternative to allow the browser to make smart decisions about the prioritization of these requests.


The future of web development



This is Polymer's Shop e-commerce demo, a best-in-class example of using the PRPL pattern to granularly serve resources. It achieves interactivity for each route incredibly quickly on real-world mobile devices!


Web Components and the Shadow DOM are the future of web development.

No CSS clashing, no Javascript name collisions, no unexpected nodes in the DOM, true encapsulated HTML components like the native <video> and <select>

Gmail went from 47 nested DIVs (old way of building web apps) to much fewer and more manageable Custom Elements. See https://codeburst.io/6-reasons-you-should-use-native-web-components-b45e18e069c2

Links from that article:


Read "Web standards + metadata = unprecedented productivity"

Curated Web Component libraries

Web component ui libraries

YouTube was rebuilt using Polymer and Web Components.

Polymer and Angular work well together.

Or, custom Web Components and Angular: https://vaadin.com/tutorials/using-web-components-in-angular


Thanks to the Custom Elements spec which is implemented in modern browsers, web developers can create their own HTML tags, improve and customize the existing HTML tags, or build reusable components that can be used in vanilla JavaScript or in other libraries or frameworks like Angular, React or Vue etc.

Custom Elements is a part of web components and it simply provides a native and standards-based way to build reusable components using vanilla JavaScript, HTML and CSS.



Angular elements are Angular components packaged as custom elements (also called Web Components).

(We are working on custom elements that can be used by web apps built on other frameworks. A minimal, self-contained version of the Angular framework will be injected as a service to support the component's change-detection and data-binding functionality. For more about the direction of development, check out this video presentation.)



Questions:

Isn't this a standards-compliant www.meteor.com?

Is it faster than Meteor at scale?


Web Components are now natively supported (including Shadow DOM)


Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (75 and onwards) supports it too; the old Edge didn't.


Shadow DOM is not new — browsers have used it for a long time to encapsulate the inner structure of an element, like the <video> element. All you see in the DOM is the <video> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec lets you edit the shadow DOM of your own custom elements.


Helpful links:




Polymer


If you use Web Components already, you'll be happy to hear that they're now natively supported in Chrome, Safari and Firefox. Edge support is coming soon, and polyfills are only needed for legacy browser versions.

Can mix and match with Salesforce Lightning Web Components, Ionic's Stencil, SkateJS or the Polymer library

The Polymer library is our original web components library.

For new projects, start with our next-generation web components library, LitElement. LitElement is a smaller, lighter successor to the Polymer library.



Decorators are a proposed standard currently available in TypeScript or Babel.

LitElement also supports a vanilla JavaScript method of declaring reactive properties:


lit-html lets you write HTML templates in JavaScript, then efficiently render and re-render those templates together with data to create and update DOM.


lit-html is extremely fast. It uses fast platform features like HTML <template> elements with native cloning.

Unlike VDOM libraries, lit-html only ever updates the parts of templates that actually change - it doesn’t re-render the entire view.


For existing Polymer apps, we recommend upgrading to version 3.0 of the Polymer library.


Also for new projects, start with the PWA starter kit, a next-generation Progressive Web App template that uses LitElement and Redux.



We'll be revamping our toolbox for building apps and relaunching it as PWA Starter Kit.

If you've followed the last two Polymer Summits or engaged with us online, you'll know that we've become strong proponents of unidirectional data flow and centralized state management for applications. PWA Starter Kit will provide out-of-the-box support for this model, incorporating the popular Redux library, integrating it simply and cleanly with a web components view layer based on LitElement, and making it easy to factor your Redux code for efficient loading via the PRPL pattern.

PWA Starter Kit will also feature updated samples, templates, and an all-new set of docs. Like LitElement, PWA Starter Kit is still in development, but it's available to try out today and rapidly firming into shape.

Source: https://www.polymer-project.org/blog/2018-05-02-roadmap-update


Toplists

The 10 Most Popular Open Source Front-End Web UI Kits


Uikit

Filter

Animation

Countdown

Lightbox

Error page

Cool animated "outer space" background with connecting lines when randomized dots come close to each other

Adminer





Kubernetes


Google Cloud uses it for everything


Swagger

API documentation generator and tester



NestJS


NodeJS framework
A progressive Node.js framework for building efficient, reliable and scalable server-side applications.


PWA is the future of mobile apps



They perform better than native apps

Unexplored





CSS Frameworks


free, open source CSS framework based on Flexbox and used by more than 200,000 developers.

utility-first CSS framework for rapidly building custom designs.

IDE


Code in your browser
Recommended by Angular here: https://next.angular.io/start

Performance


Google Lighthouse
Open-source, automated tool for improving the quality of web pages.



Manage your app state with Redux




Angular



Angular Versioning and Releases

Angular Ivy (better compiler and renderer, and drop-in i.e. backwards-compatible)

Angular 9 - what's new

VueJS

Vue3


Roadmap
https://github.com/vuejs/vue/projects/6


ES6

Browser support



tells you what HTML, CSS and JavaScript features the user’s browser has to offer.


Svelte compiler


Svelte is a compiler instead of a client-side framework that generates everything server-side for much faster front-end performance (no virtual dom).


Cache


Validating cached responses with ETags

TL;DR

The server uses the ETag HTTP header to communicate a validation token.

The validation token enables efficient resource update checks: no data is transferred if the resource has not changed.


Cache-Control

TL;DR

Each resource can define its caching policy via the Cache-Control HTTP header.
Cache-Control directives control who can cache the response, under which conditions, and for how long.


Fast websites

How to Build the Fastest Website in the World

PWA (Progressive Web App) cache assets on the device. After the first visit, a PWA works without a network connection, and because the HTML/JS/CSS is coming for a local cache, it makes for the fastest possible page load times.

Use PouchDB to store state in a PWA when offline

Service Workers

Amp project

"Promises" are better than event listeners in certain cases, and Promises are natively supported in Javascript in modern browsers:


Setting up dev environment in Windows 10



1. Confirm you have the latest Windows 10

Windows + R then winver
Should be at least version 1709

Or, Start - About - Settings - "About your PC" - scroll down to Windows specifications


2. Install Windows Subsystem for Linux

Start - Windows features - "Turn Windows features on or off" - 

Check "Windows Subsystem for Linux"


3. Install Visual Studio Code (free and open source, integrated Git, debugging and extensions)



4. Install Ubuntu from Microsoft Store



5. Install Docker for Windows



Mobile dev


Target multiple platforms with one code base

Vue.js native

iOS native
use Scala language

Gamedev

PixiJS

Konva.js HTML5 2D canvas library

Phaser


Love2d
Ben aka Langotriel uses for all his games (windows, mac, linux, tablet, console)


Itch
Biggest tiny indie game marketplace, free to publish, with Windows client

Steam is the next step up (now accepts everything, 100 new games a day release on Steam)


GOG
Witcher 3 developer made Good Old Games


Most important


How is https://discordapp.com so blazingly fast? Looking at the network traffic, it appears to be using regular HTTP requests from cloudflare+nginx and a cdn

Why is it so hard to find the fastest hosting option for websites?

If you want a globally-fast website, where should it be hosted?


Most impressive


Unity and Unreal competitor


Inferno
Some dev shops prefer it over React, Angular and Vuejs


vuejs vs react vs angular


Angular 4.2 now available


Angular resources
So many, well-organized


Angular IDE
Most-recommended by Angular team at https://angular.io/resources


Firebase
Built on Google Cloud


Unpkg
Fast, global content delivery network for everything on npm. Use it to quickly and easily load files using a simple URL like: https://unpkg.com/[email protected]/file


Modern mobile and browser realtime webapps
Build a WhatsApp clone with Angular, Ionic 2 and Meteor


Apollo is Angular + GraphQL
Flexible, production ready GraphQL client, also for React


Javascript framework benchmarks


Savvy
Train your employees, cheaper than classes per person


Angular animations


Outsourcing freelancers
Claims: Hire the top 3% of freelance designers


CSS


Responsive site templates

Example


Best info

Why React?


Best tools

Webstorm Javascript IDE

Symfony 3.1
Brian recommends over Laravel (Symfony has worse documentation, but faster with long-term support)

Dart, Angular 2, Polymer together!

Google Closure
Javascript optimizer, templating system for web components and more

Sketch
designers use instead of Photoshop, generates CSS for developers, XSplit recommends

Prototyping tool that makes static images clickable, XSplit recommends

GraphQL
Replace REST APIs for optimizing bandwidth on mobile, removing what is not needed on mobile, but is needed on desktop browsers, XSplit recommends
GraphQL does not use versions like REST does, it only what you need

Falcor
Competes with GraphQL, made by Netflix

Grunt is a JavaScript task runner that has a robust ecosystem of add-ons focused around building modern web applications. We can include tools such as integrated testing, minification, linting (for PHP, JS, and CSS), image optimisation and more.

Gulp
Grunt competitor

Grunt vs. Gulp - which is better?
Answer: Gulp is better in most cases

Mithril
Super-fast client-side MVC framework, see the benchmarks

Mercury
Another super-fast MVC framework like Mithril

Webpack
Clear explanation with demos showing how Webpack adds value https://blog.madewithlove.be/post/webpack-your-bags/

VueJS

Elixir
Dynamic, functional language designed for building scalable and maintainable applications.


Cool

In-place editing

Powerful group chat, open source

Lots of useful tools


Top community platforms

Muut is the quickest and lightest forum and commenting platform designed around user experience. Unlimited traffic and users, for free.


RiotJS - by Muut

Compare with others: www.riotjs.com/compare


Localization / Translation


Transifex

Crowd-sourced translation tool for any website, free for open source projects

Used by www.semantic-ui.com (click the language option in top-right corner to see it)




UI - Material design



Top 10 Material Design Frameworks for Modern UX/UI Design

MaterializeCSS (requires jQuery)


Kickstart (no jQuery)


Semantic UI
Cool demo showing all UI elements!


webix
Has complex elements like a spreadsheet


QA and testing


Cucumber

Back-end testing


Karma

Front-end testing


Feedback

Can give feedback on specific parts of the page


SSL

Free SSL!


CMS


Respond CMS

Simpla

Web game engines

Excellent review of top 10 HTML5 JavaScript 3d game engines and frameworks

Another review

Especially recommended by Michael Rangstrup for making a game like Elvenar,  for the backend Cassandra or similar for speed.

Recommended by Michael Rangstrup for making a game like Elvenar

Complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio

Create 3D HTML5 and WebGL games that will amaze

World's most advanced HTML5 multiplayer game engine

Unlike other engines that throw in Socket.io or another networking library and call it “multiplayer”, Isogenic Engine provides the most advanced networking and realtime multiplayer functionality available in any HTML 5 game engine. The system is based on entity streaming and includes powerful simulation options and client-side entity interpolation from delta updates. The system was inspired by Valve’s Source Engine multiplayer system

Demos that work

Shaders and ray tracing


Games that work!

Tanx

Plane game

Minecraft prototype!

Top web training

Free with millions of students

Top Chrome extension tools

Boilerplate for Chrome extensions


Top Web Technologies

Docker

Akka

SonarQube
Continuous integration, improve code quality, open source free edition, pay edition with support

Laravel
Amazon Web Services uses this framework

R - statistics language

D3 - Data-driven visualizations using standards

scikit - Machine learning in Python

React JS by Facebook - like Angular by Google

Big data

Test browser compatibility

Browser usage stats

Docs

Meteor

Blaze
UI library for Meteor

React vs. Blaze
Good comparison with code

JSHint
Static code analysis, reports syntax errors, implicit type conversions, leaking variables, and more

ESLint


Angular


Bootswatch - Free Bootstrap themes

Foundation 4
Faster than bootstrap - uses native CSS instead of Javascript parsing by Bootstrap

jQuery

Codrops - cool UI examples

CMS - WordPress

Forum - Xenforo

CDN - CloudFlare

Webhost - Vexxhost

Domain registrar - Hexonet

Source control - Github

Affiliate dashboard - HasOffers

Video library - YouTube

Social - Google+

Lungo
Christian uses it

Symfony 2
A micro-framework (according to Ninz) great for mobile devices
Drupal 8 chose Symfony 2 - www.symfony.com/blog/symfony2-meets-drupal-8 - Drupal 7 did not use Symfony
Why PHPBB4 will use Symfony 2 - wiki.phpbb.com/PhpBB4/RFC/Symfony_2

20 Things I Learned


jQuery Tools

jQuery++

PHP

PHP-Unit - unit-testing framework

Yii
A bad, slow framework (according to Ninz) that uses too many calls for simple functions


CodeIgniter

MySQL

TokuDB - high-performance MySQL database engine, faster than InnoDB and MyISAM

MongoDB

Redis

MemSQL

Smartfox
Massive multiplayer platform

Chatroll

FlowPlayer
Free video player with FlowPlayer logo - commercial version replaces FlowPlayer logo with your own

Railo
Used by Zoomin.tv

Great Sites

Enroll
Take quick tests to help make the web a better place for everyone. Help companies decide which logo is better, clarify content or simply complete tasks on a web site or app to ensure the interaction makes sense. Anyone can do it!

Mobile

Open source backend services for game developers

Better Sources


InWebdeveloper

Addy Osmani
World-renowned HTML5 expert shares his expertise openly

MDN (Mozilla Developer Network)

Server-side articles

Audio

DancerJS

CDN-Hosted Files

CloudFlare hosts all libraries

Google hosts only the most popular libraries

Better Community Tools

Chat or take photos with your webcam
Insanely better than Logitech's own Windows software

Better Realtime Platforms

Hydna
2012.11.27 Demos did not work for me

Better Template Engines

Jade

Smarty

Better Javascript Tools

Flip book - turn pages ($99 for 5 domains)

Full screen

Better Frameworks

Twig (template framework)

Silex

PHP dependency manager (like npm for Node)

MontageJS
Cool webapps like Scratchpad and Paparazzi


Better Dashboards

http://www.bettercloud.com - see FlashPanel, a Google Apps dashboard far better than the one Google built

Better Chrome Extensions

Scratchpad
Take notes, syncs with Google Docs

Better Tools

Flash to HTML5 conversion
http://uxebu.com - click PixelPlant

What a Web UI Developer Needs to Know


Localize 20 Things I Learned

Get www.20thingsilearned.com to run on a local web server

See

It is built to run in the Google App Engine environment.



Amazing Demos

3D menu
Hover over left side

3D terrain
Interactive realtime-generated in Javascript - click and drag to move camera

WebGL water

500 demos
Home - http://www.chromeexperiments.com - really cool!


20 Things I Learned

20 things I learned the web (super ajax, chrome changes url without # or server call!)

Utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines. The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.

Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web! We hope to open-source the code in the coming months and will post an update when we do. Stay tuned.



Fonts

Noto is Google’s font family that aims to support all the world’s languages

320+ Hand-Crafted Apple iOS7 Icons

Font icon picker

Cool ideas

3D angled image strip that is coming out of the page (see right sidebar)

UI standalone


Cover Flow

ImageFlow

ContentFlow

MooFlow
Better animation (acceleration / deceleration feels more natural)


UI platforms

BonsaiJS
A graphics library in Javascript
Demos - http://demos.bonsaijs.org - not impressive

Bootstrap, by Twitter

Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions

Google Calendar for Teams

See team's schedules

Project management

All Google APIs

A web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results

Google Dart

Have you heard of Google Dart, Google's better-than-Javascript language?

See

Read this excellent FAQ

After reading the FAQ, my only question is: Why continue building Go, another Google language?

MapReduce

Google invented MapReduce to process large data sets
Apache Hadoop http://en.wikipedia.org/wiki/Apache_Hadoop is the most popular open source implementation

Goo.gl

http://goo.gl is the world's fastest redirect service (3 times faster than bitly), but beware your links may be disabled if misidentified as spam.

eg
http://goo.gl/cIO4m was disabled and it just redirects to a Google Search link - Here it is re-created using bitly http://tgn.ly/SKkriB

Google App Engine


George on GAE (Google App Engine notes)

Amazon EC2


Deployment

Chef
Create custom servers (Apache vs. Node, and so) and deploy to Amazon or private servers

Comparisons

Redis can insert 200,000 entries a second
MongoDB is schema-less
Both Redis and MongoDB shard easily (load balance into 10 servers as you need to scale)

SQL databases like MySQL with schemas are more difficult to scale

Charting
ChartJS - www.chartjs.org

For YouTube Analytics, Amol chose MySQL (simple schema, native ORM in Rails, will solve scale issues as they arrise) and Google charts

Platforms

Deployd API platform
Build APIs for web and mobile apps in minutes instead of days. No boilerplate, no configuration. Works right out of the box and is a new way of building data-driven backends for web apps. Deployd is a resource server, not a library, that can be infinitely customized by adding resources.

MODx vs. WordPress

George's opinion: Try WordPress first, and only if it cannot do what you need, try something else like MODx, Drupal or Joomla. MODx is better-designed but needs a dedicated development team, WordPress is far more popular and faster to develop

WordPress vs. Drupal vs. Joomla
Bottom line:

WordPress is the easiest to use, fastest to develop, and best community support (gorgeous themes, awesome plugins)
Drupal is best for developers with a lot of time to code and has the ugliest themes
Joomla tries to be the best of both worlds, but fails
MODx tries to be the best of both worlds, but does not have enough community support yet (it may in the future)

Core OSS

Angular
by Google

Angular educational videos

Linked on Angular website

Peerbind
Realtime for free

Meteor
A new technologies for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.

OwnCloud
Create your own cloud (open source, install locally)

Unitas Global
Create your own private cloud (commercial)


Socket.io
A Node.js project that makes WebSockets and realtime webapps possible in all browsers and mobile devices. Enhances WebSockets with built-in multiplexing, horizontal scalability and automatic JSON encoding/decoding


Boilerplate for nodejs using an express and socket.io backend and coffeescript backbone with bootstrap frontend

Boilerplate for node express backbone

Boilerplate for node express backgone mongoose socket

Groundwork
Good base with CSS reset code, designed to be extensible for any project

Flatiron node.js framework

TodoMVC framework

Openfire realtime framework

jQuery++
Extends jQuery 1.7+ in very useful ways

Zepto.js
10 times smaller than jQuery with most of its features - designed for mobile apps where size matters

Miso Dataset - Best graphing toolkit

Underscore
Utility-belt library JavaScript library - it's the tie to go along with jQuery's tux and Backbone.js's suspenders

RequireJS
JavaScript file and module loader

LessCSS

doT
fastest + concise javascript template engine for nodejs and browsers

CoffeeKup
Closest the Haml for node

CoffeeScript
A clean language that compiles into JavaScript

JavaScript-to-CoffeeScript and vice-versa

RailwayJS
Railway is the Node.js MVC framework based on ExpressJS and fully ExpressJS-compatible. Build web applications like Ruby On Rails.

Uses JugglingDB for a single API for many databases

TowerJS
May be better than RailwayJS - see the comparison on stackoverflow

SocketStream
Great for single-page realtime webapps, bad for CMS that need many URLs for SEO

Vert.x
Effortless asynchronous application development for the modern web and enterprise

ExpressJS
High performance, high class web development for Node.js

MongoDB
Scalable, high-performance, open source NoSQL database written in C++

Little MongoDB book

MongooseJS
Javascript library that makes working with MongoDB easy

eg

Couchbase = CouchOne + MemBase
MemBase powers Zynga, now the companies merged to form couchbase

Firebase
Scalable real-time backend for web apps

Faye
Simple publish-subscribe messaging for Node and Ruby, based on the Bayeux protocol

NowJS
Simple hosted API for quickly, easily and securely adding realtime bi-directional functionality via WebSockets to web and mobile apps

Geckoboard
Dashboard for showing data (read-only)

A CSS3 extension that adds nested rules, variables, mixins and selector inheritance

Another one that may be better: http://www.newaeonweb.com.br/responsiveaeon/

Jasmine

QUnit

Tablecloth
Theme and sort tables

DataTables
View your database

DataTables Editor
Easily edit rows in a clean form popup window

DataTables Toolbar (export as CSV PDF Excel)

DataTables Fixed Header (header always visible when scrolling down)

DataTables Fixed Columns (freeze left column(s) so always visible when scrolling right)

DataTables ColReorder (drag-and-drop to re-order columns)

DataTables ColVis (show/hide columns)
RabbitMQ
Robust messaging

ØMQ
Messaging simpler than RabbitMQ

Mobile Tools

EaselJS
Part of CreativeJS package, supported by Adobe

Sidetap

Great Tools

DNS


Single sign-on

Uptime monitoring

IxEdit
On-the-fly interaction design tool for the web

Kiss Metrics
Handles *realtime* reporting with millions of records
"Track every single interaction a person has with your business. You won’t just be looking at aggregate data. Go back and look at each person’s interaction history no matter where it happens, web, mobile, social, desktop and even offline."

.htaccess ultimate guide with examples

.htaccess password generator

Continuous integration

Live Chat, customer support, help desk

eCommerce

Cloud9 IDE
Write, run, and debug your code with our powerful and flexible cloud IDE. Collaborate on your projects publicly, or keep them private

Cloud9 history and why node

htaccess builder

File sync - free and open source and the best one!

Sprite generator


Beautify, Pretty Print Code

JS Nice
de-obfuscator with variable renaming and type inference

Pretty Diff

JS Beautifier

HTML Tidy

Potential - To Try

Javascript Package Manager for Front-End Developers

Luvit
Asynchronous I/O for Lua

Industry Examples

Where these technologies are used in industry today (or see the complete list):

LinkedIn
Our entire mobile software stack is completely built in Node.js. One reason was scale. The second is Node showed us huge performance gains. 
- Kiran Prasad, Director of Engineering, Mobile

Microsoft
Node.js gives Azure users the first end-to-end JavaScript experience for the development of a whole new class of real-time applications. 
"We are delivering new and improved experiences for popular OSS technologies such as Node.js, MongoDB, Hadoop, Solr and Memcached on Windows Azure."
- Claudio Caldato, Principal Program Manager, Interoperability Strategy

Ebay
Node’s evented I/O model freed us from worrying about locking and concurrency issues that are common with multithreaded async I/O. 
- Subbu Allamarju, Principal Member of Technical Staff

Yahoo
Node.js is the execution core of Manhattan. Allowing developers to build one code base using one language – that is the nirvana for developers. 
- Renaud Waldura, Sr. Product Manger, Cocktail

Woopra
Realtime Google Analytics-like dashboard built in HTML5 and WebSockets
(Previously written in Java which they scrapped in favor HTML5 and WebSockets)

Word2
Global Scrabble game built in Node.js

More examples

Full NodeJS, MongoDB, Javascript architecture example

To Try

Terrific Composer - build HTML, CSS UI front-ends more quickly

Database visualization

More OSS

Cappucino

Archipel
Real-time webapps using XMPP (previously known as Jabber)

Capistrano
Deploy your web application

Apache Cassandra
nosql database written in java

More Tools

Awe.sm
Analytics for social media

Flow
Simple and free way to figure out where your users go and when they leave, all in real-time.

Mixpanel
Custom analytics - Actions speak louder than page views. The most advanced analytics platform ever for mobile and the web.

Gearman
Gearman provides a generic application framework to farm out work to other machines or processes that are better suited to do the work. It allows you to do work in parallel, to load balance processing, and to call functions between languages.

PhantomJS
Full web stack, no browser - Headless WebKit with JavaScript API, fast and native support DOM, CSS, JSON, Canvas, and SVG

Stack Overflow clone (open source PHP/MySQL)

URL Shorteners

Comparison

Realtime stats

Conclusion:
http://goo.gl is the fastest and most reliable

Goo.gl API

Node.js

Build Massive Apps - Faster, Better, Cheaper

Notes

Built on top of V8, Google's open-source Javascript engine used in Google Chrome

Node is Javascript instead of PHP on the server-side, so client and server code is written in the same language

Node is a set of libraries that add networking and 100% event-driven, non-blocking IO to build realtime webapps
eg: operations like reading a file do not block server threads and return instantly, and call a callback function when the operation completes

New pattern: keep state not in the database but in closures running in Node.js

Node.js streamlines the development process, you write less code, it works perfectly with JSON and you lose all that context switching.

Companies using node.js


Getting Started with Node.JS, Express and CouchDB
Using the microframework, Express, which handles HTTP requests in Sinatra-esque fashion for Node.js and the HAML-esque Jade template engine. We will use CouchDB for our database and the Cradle plugin to have it work with Node.

Frameworks

Modular, simple-to-use and fast web framework for Node.js, similar to web frameworks like Merb, Rails, Pylons, or Django

Modules

Hosting


Best documentation

HTML5 Please
Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Codeschool
Costs $25 / mo

Best practices


MVC (model-view-controller) does not apply to nodejs - RVP (resource-view-presenter) does

Best demos

All the links in this "Best of Javascript in 2011" year-in-review
Music visualization
Interactive - move your mouse

Charting and reports (just click "Where did my tax dollars go?")

Best templating


Pseudoscript
http://pseudoscript.com (written by George - website does not work at this time)

Promising development tools (untested)

Akshell

Best design tools

Hotgloo
Create interactive wireframes of websites

Clickdummy
Upload pages, create click regions to link them together, everyone can comment

Mockingbird
Create wireframes of websites (maybe interactive?)

Creately
Create diagrams collaboratively

Diagramly
Create diagrams

Best admin tools

eXtplorer
Webapp file manager

Best database tools

ReclineJS
Handles large datasets in the browser
Demo: http://explorer.datahub.io - Click "Load Data" and upload any-size CSV file to see how it handles 100,000+ rows



NextDB on Amazon EC2
Hosted relational database system for developers (not free) for RAD with APIs for JavaScript HTML5, Android, Java and REST

SQL Designer - Schema editor - webapp

DBVisualizer

Backup databases and websites ($20) 
http://codecanyon.net/item/advanced-backup-system/88574 

Backup your MySQL database
http://www.webappers.com/2010/02/06/how-to-create-bulletproof-backups-for-mysql/ 

Hadoop

Best cloud hosting

Google App Engine

OpenLogic

Sent message when Live Chat wasn't available:
I just watched Rod Cope, CTO & Founder of OpenLogic, present how they built CloudSwing. We are starting to develop a realtime YouTube analytics and reporting engine. I hope you can help me decide whether OpenLogic is the right platform.

Best game tools


Javascript notes

Douglas Crockford is Yahoo!'s JavaScript architect

HTML5 notes

HTML5 also provides new tools to bring the web closer to a desktop experience such as:

Native geo-location support
Providers can now incorporate localization features for a more customized user experience

Built-in offline storage
Designed for larger quantities of data than cookies, it allows storage and retrieval of data without using precious bandwidth

Web workers
Think background threads for the browser which can be used for accessing local storage or processing mathematical equations without blocking user interactions


Backbone.js notes

Built by Jeremy Ashkenas (who also built CoffeeScript)
Super light-weight library to create easy to maintain front-ends
Works with any backend and JavaScript library


Compares Backbone.js to other MVC frameworks

Cappucino notes

Never write HTML, CSS or Javascript or worry about cross-browser issues
Instead, write in Objective-J (essentially Javascript 2) which abstracts everything away
Objective-J runs everything client-side and is built in Javascript (no Ruby or special server-side components)


Sproutcore notes

Requires Ruby

Comparison to Cappucino: http://cappuccino.org/learn

Google Maps API v3 notes


Best introductions

How to use Backbone.js, best practices with examples suitable for first-timers

Simple introduction to Backbone.js for first-timers


Simple MySQL backbone.js app

Backbone.js + PHP (with Silex microframework) + MySQL
Todo webapp rewritten to use MySQL instead of local storage




Unsolved problems

Database tool

HTML5 AJAX webapp to easily view, edit and report (group by) any MySQL database

SQLyog is the best, but Windows-based
monoql looks promising, but alpha with many missing features
wwwsqldesigner creates schemas, but nothing else
phpmyadmin has a terrible, unfriendly UI
Google Spreadsheets has all the necessary functionality, but no security (anyone can change any data)

Why has no one built this tool?


Workflow tool

Simple way to create custom workflow apps
eg: replace http://tgn.tv/partners, http://tgn.tv/join, http://tgn.tv/contract, and the supporting spreadsheets into a single webapp


SSO (single sign-on)

WordPress
XenForo
Drupal
... any other popular platform


Wiki

MediaWiki
Wiki modules for WordPress, Drupal and so on


CRM

Track all your users, recruits and leads

SugarCRM
SalesForce
Zoho CRM
... and so on


E-commerce

How to sell stuff online

Amazon Web Store
Magento
... myriad of PHP-based open-source e-commerce projects


Billing

How to track all your cash, expenses and income
eg: ad-buys, different ad networks, user subscriptions, livestream revenue, youtube revenue, commissions, salaries


Reporting

Dashboard with fast, realtime reports
Like YouTube Analytics and Woopra


Universal framework

Why must there be so many competing frameworks?

Symfony 2
Ruby on Rails 3 (see their glowing release notes)
Django
CommonJS
... many client-side frameworks like Backbone.js, Node.js, Ember.js, Knockout.js

Can't we all use one universal framework?


Spam

Humans can see spam so quickly, why is it so hard to detect spam?

eg: All the "ralph lauren" users on http://tgn.tv who create groups and blogs spamming where to buy illegal knock-offs

Tools to try

MonoQL
Webapp MySQL admin and query tool

Aptana Studio
Professional, open source development tool for the open web

Symfony 2
Open source PHP MVC web framework

MongoDB
Scalable, high-performance, open source NoSQL database written in C++

Mono
.NET open source, cross-platform framework
Best development platforms
Google App Engine
Supports Go, the Google-created open-source C-like language

Best website components

Chats



Web toolbars

Best HTML5 applications

Recess
RESTful PHP framework

Tonic
RESTful PHP framework

Frapi
RESTful PHP framework

Slim
RESTful micro PHP framework inspired by Sinatra

Fat-free
RESTful micro PHP framework

Discover design tips to improve your website




Clean, simple Todo manager


Very pretty file index to replace the default file viewer

Best info

URL design

HTML5 on Facebook

Browser dominance over time

How Browsers Work

Best cool plugins

Image effect hardware accelerated with WebGL
Demo: http://evanw.github.com/glfx.js/demo/ Best effect: Tilt Shift, Swirl, Bulge / Pinch, Perspective, Vignette, Zoom Blur

Scroll down for the demo

Best effects

Images

Best performance tools

Losslessly reduce image sizes

GT Metrix runs Google Page Speed and Yahoo YSlow

Google Page Speed

Yahoo YSlow

Best mobile tools

Titanium
Looks great, but has missing elements like "how to create a view from your data" and "cache your data from the server"
Amol had to build his own: https://github.com/aflatune/Alloy

Convert any website into a mobile site

Phone Gap

Review of mobile tools

Agility.js
Simpler alternative to backbone.js - MVC Javascript library

Batman.js
Rich single-page browser applications

HTML from JSON
http://beebole.com/pure/ <-- With great time tracking webapp showing off the product

CSS with variables and functions

CSS online editor

Minify or pretty-up Javascript code

JAIL - Load images on demand


Jpeg Mini

Fluid Grid

Restful search engine

Authentication

Convert website to mobile with one script

Cube

Physics engine

Javascript code editor

HTML5 by Google

Controller Library

Sprite3D

JavascriptMVC

Opa

HTML5 with backwards compatibility

UI rapid development

StropheJS

Music in JS (thin Flash container)


Wakanda



JS Fiddle

Ender

The Wall

HTML5 animation

Spine

csonv.js

Sugar



oData
New API protocol released by Microsoft, along with the launch of their new site on the  Mar16 2010. It is a RESTful standard, which adds a lot of its own goods to the table.

HTML 5 Video Cuepoints

Video JS

BoxJS
Combine .js files into one minified file and a modular loading system

BoxCSS
Combine .css files into one minified file and a modular loading system

Howto

Symfony

Fuel

Google visualization API

jQuery templates

Javascript 3D engine

Best slideshow with 22 effects

Best other successful websites use

Impressive portfolio

Recommended by Tom Gilliland

CSS Frameworks


Google Docs

George: Works! Easy to edit a Google Spreadsheet using PHP

Single-page website


Pitch decks


Page flip


Google+ buttons


HTML5 video voting


CSS preprocessor


Web security scanner


Sound

Boombox

Log file monitor


Mobile web gallery


Google analytics


Maps


Fonts


Scalable fonts


Money

Add recurring billing to your site in 5 minutes.

Forms


Visual sitemap


Realtime comments!


Autocomplete


Animation toolkits


Sliders

Content slider with awesome effects!

Login

Single line login

Accessibility


Dummy images

Like dummy text, but for images

CSS Stack layouts


Notifications


Fonts

What font is that?

Background patterns

Create your own
Tom recommends


QR codes


Image Map


Debugging

SHow which elements listen to what events

Widgets


Scrolling

contextual pagination, infinite scrolling

Watermarks


Credit card


Forms




Visible if

Statistics


HTML5 docs



HTML5 frameworks

Perkins

List

Baseline CSS

CSS grid system

Mobile

CSS3

HTML5 demos



HTML5 Canvas API

oCanvas

OOP library (with IE support!)


HTML5 video

YouTube example!

Recemmended by Akamai


Awesome "blow up the video"

Video editor

HTML5 mobile

Boilerplate

HTML5 games




HTML5 game engines

List of most HTML5 game engines

Yingwu likes the best ($2,000 to license)

Good, but not mature

Worse than impactjs

Not evaluated

Not evaluated

Acquired by Disney but not good

Zynga bought the best one (don't remember the name)

Yingwu wants to create isometric 2D HTML5 engine for mobile phones

RSS


JQuery UI themes


Templates


Docs


Scrum

Collaborative Online Scrum Tool Using Websockets and Node.js: Scrumblr

Javascript

Quirky parts of Javascript

CSS3

Cool hover effects

Photoshop-like web-based CSS3 generator

CSS3 generator

Text warp

iFrame Auto-height


Charts (not by Google!)




Subway map in HTML


CSS 3D ribbon


Scrolling

Infinite, sticky to top, show only when scroll into view

Text messages


Templates

Magic jQuery

Google Charts


IP info


Select box


Project management and issue tracking

PHP, free and open source!

Captcha

Drag slider (like unlock an iPad) - bots cannot do drag-and-drop!

Tables

Excel-style fixed heading row with scrolling!

Local storage and requests


HTML5 video


Comparison is HTML5 video player solutions





Encoding HTML5

MediaFront
Supports YouTube and others!

HTML5 Video & Media JavaScript Library










Useful HTML5 apps




Unforget it!

Moodr

Time tracker (with a stopwatch!)


HTML5 Games!

SPA (Single page application)


PHP5 utility belt


HTML5 boilerplate initializer


See

And

And

CSS3 for IE!


jQuery animations


Games!


Top-level menu that never scrolls off

Titles pops in as you scroll down!

Resume


Graph visualization


Web framework

Node.js

SEO

Merging wpmu.org and wpmudev.org into one


TODO list


Feedback

Used by Microsoft!

S4

S4 is a general-purpose, distributed, scalable, partially fault-tolerant, pluggable platform that allows programmers to easily develop applications for processing continuous unbounded streams of data.

Create your Animated GIF!


Create your own academic site


Protect against external linking to your images

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?YourSite\.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ - [F]


Standalone Asynchronous Javascript call

/*@[email protected]*/ // enable IE-specific conditional compilation

/*@if (4 < @_jscript_version)
function ps_listenFor(o, sEvent, fListener) { o.attachEvent('on' + sEvent, fListener); }
function ps_listenFor(o, sEvent, fListener) { o.addEventListener(sEvent, fListener, false); }

if ('undefined' === typeof XMLHttpRequest)
{
XMLHttpRequest =
function()
{
try { return new ActiveXObject('Msxml2.XMLHTTP.6.0') } catch(e) {}
try { return new ActiveXObject('Msxml2.XMLHTTP.3.0') } catch(e) {}
try { return new ActiveXObject('Msxml2.XMLHTTP') } catch(e) {}
try { return new ActiveXObject('Microsoft.XMLHTTP') } catch(e) {}
throw new Error('This browser does not support XMLHttpRequest.');
};
}

ps_listenFor(window, 'load', function() { var http = new XMLHttpRequest(); http.open('get', 'http://example.com/index.php'); http.send(null); });

Cookies

function setGobalCookie(cookieName, cookieValue, expireDays)
{
if (!expireDays) expireDays = 365;
var dateExpires = new Date(new Date().getTime() + expireDays * 1000 * 60 * 60 * 24);
document.cookie = cookieName + '=' + escape(cookieValue) + ';path=/;expires=' + dateExpires.toUTCString();
}

function getCookie(cookieName)
{
if (0 < document.cookie.length)
{
var c_end, c_start = document.cookie.indexOf(cookieName + '=');

if (-1 < c_start)
{
c_start = c_start + cookieName.length + 1;
c_end = document.cookie.indexOf(';', c_start);
if (-1 === c_end) c_end = document.cookie.length;

return unescape( document.cookie.substring(c_start, c_end) );
}
}

return '';
}

Best

Color picker

Top 10 Javascript functions

Syntax highlight

Head.js

Is it better than jQuewy?

CSS sprites

Best sprite generator


More sprite generators


CSS framework

Base64 URIs in stylesheets

Link building tips
http://www.greepit.com/2010/11/most-effective-link-building-strategies-for-blogs/


jQuery deep linking

Include only scripts you need

AJAX Crawling

Enable gzip

XCache

Memcached

WordPress cache

Analyze site performance
Google Webmaster Tools > Labs > Site performance > "Page speed suggestions

jQuery 1.4.3 offline learning

SizzleJS (part of jQuery 1.4.x)

Editor's picks of web resources

CSS3 animations without Flash!

CSS framework roundup


Collections of the best Javascript tools

Cached commons

HTML 5


3D Tetris in a torus

Cool

Wirify - bookmarklet to convert any webpage into a wireframe!

3D Christmas tree (best in Chrome, very slow in Firefox, doesn't work in IE)
http://www.webappers.com/2010/12/24/how-to-create-the-1kb-3d-christmas-tree/

Please wait

No images or CSS!

Dialog

jDialog

How to


Mobile

Javascript framework for mobile devices

jQuery lite for mobile
http://www.webappers.com/2010/11/25/js-framework-for-mobile-with-jquery-compatible-syntax/

Ads

Asynchronous ad loader

Dates

Date format extension

Yesterday

<script language="javascript"> 
<!-- 
var months = new Array( "January", 
"February", 
"March", 
"April", 
"May", 
"June", 
"July", 
"August", 
"September", 
"October", 
"November", 
"December" ); 
var today = new Date(); 
// 1 day = 1 * 24 hours = 24 hours 
// 24 hours = 24 * 60 min = 1440 min 
// 1440 min = 1440 * 60 sec = 86400 sec 
// 86400 sec = 86400 * 1000 ms = 86400000 ms 
// subtract 1 day, aka 86400000ms, from today's date 
var Yesterday = new Date( today.getTime() - 86400000 ); 
YesterdayMon = months[ Yesterday.getMonth() ]; 
YesterdayYear = Yesterday.getFullYear(); 
YesterdayDate = Yesterday.getDate(); 
document.write(YesterdayMon + " " + YesterdayDate + ", " + YesterdayYear); 
--> 
</script>


404

Custom 404 page checks for broken links before taking user away


Animation

Timeglider

Mashi: Timeline-driven animation toolkit


Boilerplate

Start all web projects with

See also


Change text-indent:-999pm to -999em (see comments on page)

Add WebM to the .htaccess file:
AddType video/webm webm

Possibly change font to "sans-serif" to default Arial on Windows, Helvetica on Mac (test this to confirm)

nginx config
voodootikigod got a head start on that: http://news.ycombinator.com/item?id=1592954
I'll be incorporating it soon.


Calendar

Google Calendar in jQuery


Chat

Realtime chat in your website


Other chats

Charts

HTML5 canvas
http://www.greepit.com/2010/10/powerful-javascript-canvas-graphing-library-canvasxpress/

Flot

Streaming data

HTML graphic like Google Finance



Color pickers

Random color picker

Gradients

Picker and manipulator (eg: remove red, 10% brighter, add 20 to all colors)



eCommerce

ecwid


Speech bubbles


Demo


HTML 5

Canvas tool

Design tools

Photoshop-like guides (Firefox addon)

Effects

Fly off page

Flash

Flash background

Layout

Fluid 1280px-wide that degrades all the way down to mobile

Email template

100 free HTML email templates in PSD

Frameworks

ExpressJS

Scripty2

Impressive demos

Highlight


Feedback

Opineo

Feedback form
http://www.webappers.com/2010/11/29/quick-feedback-form-powered-by-php-jquery/

Forms


Form framework!


Awesome interactive labels

Form builder

Consistent forms

HTML5 forms

Validate forms


Multiselect

Formstack (free and pay models)

Formboss (pay)

Validate forms

Style forms

UI

Machform ($39)

Stylize form elements

PHP Form Builder


Globalization

Localize currency, time, etc.

Language localization


Hit counters

Chartbeat - Realtime analytics



iPad

Support swipes


Illustrator

AI to HTML5 canvas


Images

Parallax scrolling

Heatmap

Shine effect

Slider

Add image notes

Image panning

Thumbnail panning

Image cropping

Drag in thumbnail scrolls big image

Image processing in Javascript


Maps

Make your own map!

Europe hover and click!

Click and drag, like Google Maps

Show local areas on your website

Google Maps in a free Javascript library


Menu

Nice clean menu!

Follow your mouse
Interesting idea, but annoying. Maybe if showed up when the mouse approached different areas that need a menu?

Single-page navigation

Mac OSX

Background animation

Persistent menu while scrolling


Mouse

Hover interface


Music

VexFlow


Prevent 3rd parties from linking to your images

htaccess


Shopping cart

UltraCart
www.theperegrine.com uses it and integrates with www.wefulfillit.com

TomatoCart


Slider

Typical sliders and even image slideshows and magnifiers


Snow



A/B Split testing

Max AB
http://www.greepit.com/2011/01/perform-ab-testing-within-wordpress-with-max-ab/


Sound
HTML5 music and audio library

SoundManager 2


Tables

DataTables
Awesome jQuery and jQuery UI table extension

RegExp table sort


Text

Syntax highlighter

Realtime text validation


Tooltips

Stylized tooltips, but no off-screen check (if tooltip is near top of browser, it isn't visible)


Uploader

Best file uploader

Ajax file upload with progress bar

YUI 2 Uploader


Video

YouTube playlists

Custom HTML 5 video player


Visualization

Simile

Timeline

as WordPress extension

George Bush popularity


Widget

How to build a web widget



File managers

Ajaxplorer

Free, thumbnails, plays music and flash videos, shows PDFs, active development


Extplorer

Free, good


Mollify

Free, nice website


jQuery file tree

One list box for folders and files

Upload

Drag-and-drop upload with image preview

Multiple file upload, with drag-and-drop in Firefox 3.5+

Ajax image upload
See a thumbnail of the image you just selected

Ajax file upload

Chrome Extensions

Featured Google Chrome extensions

Anti-Spam


Detect Malware

Google Webmaster Tools can detect and report malware on your site

See

Click on a site | Diagnostics | Malware

Recommends following these guidelines
http://www.stopbadware.org/home/security

PHP


ob_start();

(your page)

$buffer = ob_get_contents();
ob_end_clean();
$buffer = preg_replace('@<iframe[^>]+src\s*=\s*"?http://65.111.174.78[^>]+>\s*(?:</iframe>|</ifram>|</ifra>|</ifr>|</if>|)@', '', $buffer);
echo $buffer;

Tooltips

Image-free tooltips

Notify

Themed notifications

Growl-like notifications

Themes

jQuery UI theme switcher

How to add your own themes to the theme switcher

jQuery UI themeroller

jQuery UI theme switcher

General CSS stylesheet switcher

Fonts

Typography

Google Font API

Tools

See all web server requests

Capture all web server requests to a file to send to your debugging buddy to diagnose

Canvas

Using HTML <canvas> element

Web Coding Standards

Isobar Code Standards & Front-End Development Best Practices

Realtime collaboration

http://www.webappers.com/2010/04/16/pusher-allows-your-users-to-collaborate-in-realtime/

Useful

CodeCanyon has really useful scripts for cheap ($20-ish)
http://www.webappers.com/2010/04/23/20-really-useful-scripts-components-on-codecanyon/

User Interface

Confirmation box

Face Detection


Firefox Extensions


Lists

Submit your website to
http://www.webappers.com/2010/04/22/submit-your-website-to-almost-all-css-galleries/

Education

School management

Use Git

Git is used by the Linux development team and many other large projects

phpBB switched from Subversion to Git for the same reasons everyone should

Use XAMPP

Don't install Apache yourself (unless you are an expert)

Save time and use a prepackaged web server distribution that includes PHP, MySQL and tools.

XAMPP

Static Cache

Converts a dynamic site to a static site for $x time (from 1 second to indefinitely)

JP Cache

Old JP Cache
Used by Aion WH

QuickCache

PHP Cache

Install a PHP op-code cacher like XCache or e-Accelerator or APC

XCache

eAccelerator

See

Resource Monitor

Track your CPU, memory and HD usage

Munin

IP Blacklist

Is your web server IP blacklisted?

Check

CSS

Bootstrap, from Twitter

Elastic CSS framework

Blueprint CSS framework

Minify

Minify Javascript and CSS

Controls

43 essential controls for web applications

Country picker with auto-complete

Table column filter

Detect browser

PHP

Cross-subdomain ajax calls

set header: access-control-allow-origin
(does not work in ie)

json

jsonp

Headers

Replace http-equiv and custom PHP header calls with htaccess

Website monitors

Pingdom
One free URL per account and 20 free SMS alerts

Performance

Visual chart of each file and how long it takes to load

When building websites

gzip

Bigger click zones


Pretty-printers


XML pretty printer and validator

Hosting

Google App engine

Amazon CloudFront is a web service for content delivery 

How to setup and use Amazon’s S3 and CloudFront services to decrease website load time and measure performance improvements

Frameworks

RestfulX framework for Adobe Flex and AIR

HTML5 game framework for touchscreens

Game developer framework in Javascript

Django
The Web framework for perfectionists with deadlines

Pinax
Platform for rapidly developing websites

CakePHP
CakePHP enables PHP users at all levels to rapidly develop robust web applications

Symfony
Chosen by phpbb4

CMS

Drupal is an open source content management platform.

Joomla is an open source content management system.


Social Graph

Web pages into social graph
http://www.webappers.com/2010/04/27/open-graph-protocol-integrates-webpages-into-social-graph/

Icons

CSS3 icons

Social media icons in vector
http://www.webappers.com/2010/01/30/a-free-set-of-social-media-icons-in-vector-format/

General icons in vector
http://www.webappers.com/2010/01/28/31-shiny-realistic-icons-free-for-download/

Security

Protect your email addresses
http://www.webappers.com/2010/02/02/protect-your-email-address-with-php-hide_email/

Tools

15 free online tools for web developers

20 useful and nicely designed web applications

Simpler Excel spreadsheet

Tooltips

TinyTips

Tabs

Ajax tabs with fade transitions

Overlapping tabs

CSS3 tabs

Text

Expanding code box

Lists

Lists to columns

Menus

Unique bubbles

Info grid

Chasing menu highlight

Mac-like drop-down menus

Auto-scroll solution for long drop-down menus

Mega drop-down menus

Charts

Gantt charts
http://www.webappers.com/2010/04/28/dhtmlxgantt-allows-you-to-create-dynamic-gantt-chart/

XML

Parse XML files with jQuery

CSS


Video

Open source media player
http://www.webappers.com/2010/04/30/open-source-media-player-in-jquery-html5/

HTML 5 video player no Flash and supports full-screen
http://www.webappers.com/2010/02/01/sublime-video-a-html-5-video-player/

ToobPlayer
Custom YouTube player

JW FLV Player

Animation

Shuffle

Password

iPhone-like password field that shows the last character in plain text as you type

Time


Weather


Date/Time

Time picker

Icons

OSX dock


Zoom



Gorgeous magnifier

Realtime hover zoom

Realtime magnifying glass

Commercial realtime magnifying glass

Lightbox

http://www.webappers.com/2010/05/28/lightbox_me-a-really-simple-lightboxing-for-programmer/

Images


Pixelate images showing HTML5 imageData abilities

Rounded corners on images

Image annotations

Fancy animated thumbnails

Transparent image captions

YoxView

PrettyPhoto
Lightbox that supports images, flash and other media

Copy parts of a large image

Fullsize

Show image when hover over text

Backgrounds

CSS3 backgrounds

Best galleries

Awesome effects

Resizes based on browser width!

Smooth gallery

CSS3 pop-out on hover gallery

Circle-slider gallery
http://www.greepit.com/2010/11/lightweight-jquery-circular-slider-carousel-plugin-tiny-circleslider/

Full-screen horizontal-scrolling gallery

Unique galleries

Pieces come together

Galleries

SlidesJS

Slider

Accordian

Nice light slider

Full-screen jQuery gallery

Full-screen jQuery gallery

GalleryView

Cross-fade between images with auto-scrolling thumbnail strip

Cloud Zoom
http://www.webappers.com/2010/05/27/cloud-zoom-image-zoom-jquery-plugin-with-more-features/

Full-page wall gallery

Micro gallery
http://www.webappers.com/2010/04/26/micro-image-gallery-jquery-plugin/

Image slider with 9 unique transition effects

Photodesk jQuery + CSS3

Slideshow with text overlays

Image transition effects

Image slider

Polaroids
GalleryView
http://spaceforaname.com/galleryview
http://spaceforaname.com/gallery-light.html
Options
Discussions
Demos

Nice fade-in effect

http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
http://gadgetinspiration.com/blog/wp-content/uploads/jquery%20sliders/index.html

Slider with progress bar

Slider

Photo Grid

Buttons without Images

Beautiful CSS3 buttons

Like github.org
http://www.webappers.com/2010/05/31/how-to-create-github-style-buttons-with-css-javascript/

Recreates Google's imageless buttons

CSS3 buttons
http://www.webappers.com/2010/04/14/how-to-create-a-realistic-looking-button-with-css3/

Compress Images


Faster Pages with Fewer Web Requests and Smaller Files


For WordPress

Old version

Goal
Minify our web code

Use
Single most important speed improvement tool for all our web pages

Maps

Google maps API 3 guide
http://www.webappers.com/2010/10/13/how-to-styled-maps-using-google-maps-api-version-3/

Google Maps API

Sitemap


Goal
Organize sitemap by drag-and-drop

Use
Reorganize a wiki



Goal
See a website's sitemap

Use
User preview, business plan

SWFAddress

Web 2.0 AJAX + Flash urls



Translate

Translatethis button


Goal
Support many languages

Use
Germans, Koreans, etc. visiting our sites

HTML text shapes


Goal
Wrap HTML text around any shape

Use
Artistic pages

Database


Goal
Edit MySQL in a browser, better than phpmyadmin

Use
Editing tabular data, like restructuring urls and confirming redirects

Image Editor


Goal
Allow users to edit images

Use

Profile aggregator


Favicon Editor


Goal
Quickly create favicons

Use
Every website that doesn't have a favicon

Favicon Convertor



Page Measuring Stick


Goal
Measure web page elements

Use
Show ruler, grid, measure distances, all in a bookmarklet (great developer tool)

Bookmarklets

Create a jQuery bookmarklet

Flash


Goal
Create cool flash websites

Use
Prototype, landing pages

Statistics


Goal
Learn everything about a website, collected from 30 different sources

Use
Find our competitors, pad our business plan

Web Code Editor


Goal
Edit Javascript, CSS, HTML, PHP, ... in a browser

Use
For developers

PHP Functions

function endsWith($haystack, $needle) { return strrpos($haystack, $needle, 0) === strlen($haystack) - strlen($needle) - 1; }
function startsWith($haystack, $needle) { return strpos($haystack, $needle, 0) === 0; }

gzip.php

<?php
substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') ? ob_start('ob_gzhandler') : ob_start(); // enable gzip

$file = $_SERVER['QUERY_STRING'];

if (endsWith($file, '.js')) header('Content-Type: text/javascript');
else if (endsWith($file, '.css')) header('Content-Type: text/css');

readFile($file);

function endsWith($haystack, $needle) { return strrpos($haystack, $needle) === strlen($haystack) - strlen($needle); }
?>


Download


Download box with file info before actual download
http://www.webappers.com/2010/11/17/more-informative-user-friendly-download-experience/


Download the first file in the previous folder

<?php

 $files = array();
 $dir = opendir('../');
 while(($file = readdir($dir)) !== false)
 {
  if($file !== '.' && $file !== '..' && !is_dir('../' . $file))
  {
    $files[] = $file;
    break;
  }
 }
 closedir($dir);

$name = $files[0];
$file = '../' . $files[0];
$size = filesize($file);
$type = 'application/octet-stream';

header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private",false);
header("Content-Type: $type");
header("Content-Disposition: attachment; filename=\"".$name."\";");
header("Content-Transfer-Encoding: binary");
header("Content-Length: ".$size);
readfile($file);

?>

String to Ascii

function stringToAscii($s)
{
$out = array();

foreach (str_split($s) as $ch)
{
$out[] = $ch . ' ' . ord($ch);
}

return $out;
}

Photoshop

Photoshop brushes

Best examples

Forms
(New User Signup)

Game Developers


ImportXML XPaths

Social Blade - daily youtube views
=mid(importxml(concat("http://socialblade.com/youtube/user/",B2),"/html/body/div/div/div[8]/div[2]/table/tr[34]/td[3]/font[1]"), 2, 99)
=mid(importxml(concat("http://socialblade.com/youtube/user/",regexextract(C[1],"\w+(?:\?.*|)$")),"//table[1]/tr[last()]/td[3]/font[1]"),2,1000)

Google Spreadsheet Common Functions

Extract Twitch username
=lower(mid(C[2],iferror(find("/",C[2],8),0)+1,99))

Comments