Resources for learning web design & front-end development:
ONLINE
Design
Nathan Smith nathansmith
😎
nathansmith
/ webkit_animation.css
Created
April 29, 2011 22:05
Force WebKit to use hardware acceleration.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Force WebKit to use hardware acceleration. | |
| */ | |
| .animate_smoothly { | |
| -webkit-transform: translateZ(0); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Heavy-handed way to force IE7 & IE8 to respect :last-child. | |
| // Note: Using jQuery. Adjust to suit your library, etc. | |
| // | |
| // Style via... | |
| // | |
| // element:last-child, | |
| // element.last-child { | |
| // /* Style here */ | |
| // } | |
| // |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // After some brainstorming with coworker Ara Pehlivanian, | |
| // we came up with this monkey-patch for IE10, to help it | |
| // normalize pathname to work like all other browsers. | |
| // | |
| // This forces path to be equal to "/foo/bar" regardless | |
| // of what window.location.pathname actually resolves to: | |
| // | |
| // -- "/foo/bar" = Correct in all other browsers. | |
| // -- "foo/bar" = Incorrect in IE10. |
nathansmith
/ detect_full_screen.html
Created
May 18, 2011 15:42
Detect full-screen mode for desktop browsers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Detect Full-Screen</title> | |
| <style> | |
| * { | |
| font-family: sans-serif; | |
| line-height: 1.5; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Since Lithium is ghetto and wraps its entire | |
| template in a <center> tag, this is how I am | |
| wrestling back some measure of page control. | |
| --> | |
| </center> | |
| <!-- [Your template code here] --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Takes either an array or comma separated | |
| // parameters. Both can be called two ways: | |
| // | |
| // min(1, 2, 3, 4, 5); | |
| // max(1, 2, 3, 4, 5); | |
| // | |
| // OR: | |
| // | |
| // min([1, 2, 3, 4, 5]); | |
| // max([1, 2, 3, 4, 5]); |
nathansmith
/ event_killer.html
Created
May 25, 2011 21:47
JS to kill hard-coded inline event listeners.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Kill Inline Events</title> | |
| <style> | |
| * { | |
| font-family: sans-serif; | |
| line-height: 1.5; |
nathansmith
/ web-design-development-learning-resources.md
Last active
December 7, 2025 13:37
Resources for learning web design & front-end development
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Protect against parseInt being used | |
| // without radix, by defaulting to 10. | |
| // Conditionally check value, in case | |
| // future implementations of parseInt | |
| // provide native base-10 by default. | |
| (function(window) { | |
| var _parseInt = window.parseInt; |
nathansmith
/ background_clip.sass
Created
June 22, 2011 19:25
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .background_clip | |
| // Seriously, why isn't this just the | |
| // freakin' default in all browsers? | |
| +background-clip(padding-box) | |
| // Not sure what this does? Have a looksie... | |
| // http://compass-style.org/examples/compass/css3/background-clip | |
| // Crucial, if you have rounded corners on something with | |
| // both background color and a border. Without, background |