Tomasz Dziuda dziudek

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

This is a work in progress. If I missed something or someone, please let me know!

Best Practices

It's hard to recommend best practices in general without context, but basically, writing clean, readable code with lots of comments, and doing a lot of automated unit testing, followed by an automated build process using ANT or Grunt to concatenate and minify files is a start.

Twitter

I don't focus much on blogs any more. I focus more on Twitter. If the people I follow there recommend something, I'll go read it. Here's the best of my Twitter list, including developers, conferences, and interesting groups. There are other great developers on Twitter, but these tweet mostly about development:

Developers

Ben Alman

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;


	class custom_sub_walker extends Walker_Nav_Menu {

	public function start_lvl( &$output, $depth = 0, $args = array() ) {
	$indent = str_repeat( "\t", $depth );
	$output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
	}

	public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
	$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

	/**
	* CSS Loader - bordered dot
	*/

	#loader {
	animation-name: timer;
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 2px solid #aaa;

	window.addEvent('domready', function() {
	document.getElements('*[placeholder]').each(function(el) {
	if(el.get('value') === '') {
	el.set('value', el.getProperty('placeholder'));
	}

	el.addEvents({
	'focus': function() {
	if(el.get('value') === el.getProperty('placeholder')) {
	el.set('value', '');

	@media only screen and (min-width: 320px) {

	/* Small screen, non-retina */

	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
	only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),

	RewriteEngine on
	RewriteCond %{HTTP_HOST} ^subdomain\.yourdomain\.com
	RewriteRule ^(.*)$ http://www\.yourdomain\.com/subdomain/$1 [L]