scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.com
  * Dual licensed under the MIT
  * Idea from Scott Gonzalez
  * to use, place attributes on an already-functional anchor pointing to content
    * that should either replace, or insert before or after that anchor
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>

thenbrent

[rules] => Array (
    [category/(.+?)/feed/(feed|rdf|rss|rss2|atom)/?$] => index.php?category_name=$matches[1]&feed=$matches[2]
    [category/(.+?)/(feed|rdf|rss|rss2|atom)/?$] => index.php?category_name=$matches[1]&feed=$matches[2]
    [category/(.+?)/page/?([0-9]{1,})/?$] => index.php?category_name=$matches[1]&paged=$matches[2]
    [category/(.+?)/?$] => index.php?category_name=$matches[1]
    [tag/([^/]+)/feed/(feed|rdf|rss|rss2|atom)/?$] => index.php?tag=$matches[1]&feed=$matches[2]
    [tag/([^/]+)/(feed|rdf|rss|rss2|atom)/?$] => index.php?tag=$matches[1]&feed=$matches[2]
    [tag/([^/]+)/page/?([0-9]{1,})/?$] => index.php?tag=$matches[1]&paged=$matches[2]
    [tag/([^/]+)/?$] => index.php?tag=$matches[1]
    [type/([^/]+)/feed/(feed|rdf|rss|rss2|atom)/?$] => index.php?post_format=$matches[1]&feed=$matches[2]

leostratus

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;

chriscoyier

@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),

dziudek

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', '');

dziudek

/**
 * CSS Loader - bordered dot
 */

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

dypsilon

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.

---

bobholt

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

dziudek

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

p3t3r67x0

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] {