Wednesday, November 2, 2011
jARV.US SPOTLIGHT                              Chris Alfano & Ryon Coleman                                 @themightychris...
OverviewWednesday, November 2, 2011
Overview                   SENCHA TOUCH               EXTJS 4                   Eagles Draft 2011              Jarv.us    ...
Philadelphia Eagles Draft 2011Wednesday, November 2, 2011
Insta-style       <!DOCTYPE html>       <html lang="en">       <head>       ! <style>body{background-color:#033}</style>  ...
Stretchy backgrounds           body {           ! background: url(../img/backgroundLogo.jpg)                  no-repeat ce...
On-the-fly CSS & JS minifier       <link rel="stylesheet" type="text/css"          href="css/eagles-init.css+eagles-sencha...
<link rel="stylesheet"   href="css/eagles-init.css?debug=1"       type="text/css">       <link rel="stylesheet"   href="cs...
,startAutoRefresh: function() {       ! this.autoRefreshInterval = setInterval(       ! ! Ext.createDelegate(this.picksSto...
Challenges       Lessons LearnedWednesday, November 2, 2011
Challenges       Learn Sencha Touch and SASS theming :)       Lessons LearnedWednesday, November 2, 2011
Challenges       Learn Sencha Touch and SASS theming :)       Get and display live updates       Lessons LearnedWednesday,...
Challenges       Learn Sencha Touch and SASS theming :)       Get and display live updates       Adapt static images to di...
Challenges       Learn Sencha Touch and SASS theming :)       Get and display live updates       Adapt static images to di...
Challenges       Learn Sencha Touch and SASS theming :)       Get and display live updates       Adapt static images to di...
Challenges       Learn Sencha Touch and SASS theming :)       Get and display live updates       Adapt static images to di...
Wednesday, November 2, 2011
Barcode scanning       ,onScanPress: function() {       ! if(window.device) {       ! ! window.plugins.barcodeScanner.scan...
StackPanel viewport       CR.views.viewport.loadCard({       ! xtype: aboutpanel       ! ,prevCard: this       },{       !...
DOM destruction       this.on(beforeactivate, function() {       !   this.setLoading(true);!       }, this, {delay: 10}); ...
.x-list-item {       ! .product {       ! ! -webkit-box-align: stretch;       ! ! -webkit-box-orient: horizontal;       ! ...
Challenges       Lessons LearnedWednesday, November 2, 2011
Challenges       Access native APIs for barcode scanner       Lessons LearnedWednesday, November 2, 2011
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Lessons LearnedWednesd...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Challenges       Access native APIs for barcode scanner       Locked grid for comparison view       Complex history tracki...
Wednesday, November 2, 2011
Make it pop!       @mixin background-gradient($bg-color, $type: $base-gradient) {       ...           } @else if $type == ...
Challenges       Lessons LearnedWednesday, November 2, 2011
Challenges       Random access thumbnail gallery       Lessons LearnedWednesday, November 2, 2011
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Lessons LearnedWednesday, November 2...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Lessons ...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Challenges       Random access thumbnail gallery       Third-party SOAP backend       Custom gradient types       Form sty...
Wednesday, November 2, 2011
Challenges       Lessons LearnedWednesday, November 2, 2011
Challenges       Performance on a HEAVY page full of images       Lessons LearnedWednesday, November 2, 2011
Challenges       Performance on a HEAVY page full of images       Make an animated dataview appear & init quickly       Le...
Challenges       Performance on a HEAVY page full of images       Make an animated dataview appear & init quickly       Le...
Challenges       Performance on a HEAVY page full of images       Make an animated dataview appear & init quickly       Le...
Challenges       Performance on a HEAVY page full of images       Make an animated dataview appear & init quickly       Le...
Wednesday, November 2, 2011
Challenges       Lessons LearnedWednesday, November 2, 2011
Challenges       Realtime node.js integration       Lessons LearnedWednesday, November 2, 2011
Challenges       Realtime node.js integration       Make page render immediately, then update with latest info       Lesso...
Challenges       Realtime node.js integration       Make page render immediately, then update with latest info       Lesso...
Challenges       Realtime node.js integration       Make page render immediately, then update with latest info       Lesso...
Wednesday, November 2, 2011
Use iconCls for buttons       .x-btn-icon {       ! background-position: center center;       ! background-repeat: no-repe...
Toolset & WorkflowWednesday, November 2, 2011
Toolset & Workflow                              Emergence framework                                 TotalTerminal         ...
DOs and DON’TsWednesday, November 2, 2011
Wrangling Dependencies                              DO   DON’TWednesday, November 2, 2011
Wrangling Dependencies                              DO         DON’T           Define requirements as close             to ...
Wrangling Dependencies                              DO         DON’T           Define requirements as close             to ...
Wrangling Dependencies                              DO                  DON’T           Define requirements as close   Defin...
Wrangling Dependencies                              DO                   DON’T           Define requirements as close   Defi...
Custom Builds                              DO         DO!Wednesday, November 2, 2011
Custom Builds                              DO            DO!          Load your whole site on ext-          core.js (sans ...
Custom Builds                              DO            DO!          Load your whole site on ext-          core.js (sans ...
Custom Builds                              DO                        DO!          Load your whole site on ext-      Create...
Custom Builds                              DO                        DO!          Load your whole site on ext-      Create...
Page Loading                              DO         DON’TWednesday, November 2, 2011
Page Loading                              DO          DON’T            Create a minimal CSS file to               load first...
Page Loading                              DO          DON’T            Create a minimal CSS file to               load first...
Page Loading                              DO                    DON’T            Create a minimal CSS file to   Load all of...
Working with SASS                              DO     DON’TWednesday, November 2, 2011
Working with SASS                              DO            DON’T         Explore Ext’s default .scss filesWednesday, Nove...
Working with SASS                              DO            DON’T         Explore Ext’s default .scss files           Enjo...
Working with SASS                              DO            DON’T         Explore Ext’s default .scss files           Enjo...
Working with SASS                              DO            DON’T         Explore Ext’s default .scss files           Enjo...
Working with SASS                              DO                    DON’T         Explore Ext’s default .scss files   Go t...
Working with SASS                              DO                      DON’T         Explore Ext’s default .scss files    G...
Working with SASS                              DO                      DON’T         Explore Ext’s default .scss files    G...
Working with SASS                              DO                      DON’T         Explore Ext’s default .scss files    G...
tHANK YOU!                              Chris Alfano & Ryon Coleman                                 @themightychris @ryon5...
Upcoming SlideShare
Loading in...5
×

Community Code: Jarvus Innovations

1,690

Published on

Chris started programming in high school to support his gaming habits, and co-founded Jarv.us Innovations after dropping out of business school so he could keep playing. He started using ExtJS at version 2 to build administration backends for websites, so when Sencha Touch was released that experience enabled him to quickly train and tool his web development team for building cross-platform mobile apps using the skills they’d already tuned. In addition to leading development at Jarv.us, Chris is the architect of the open-source Emergence platform and helps the Science Leadership Academy apply technology to building the ultimate School 2.0.

Ryon has practiced HTML and CSS ever since since elementary school, when his father brought home a photocopy of an HTML2 tutorial and set him up with a text editor and Netscape to tinker. He is a passionate follower of the latest markup and styling techniques, so designing Sencha Touch applications seemed like a natural fit. At Jarvus, a company started by some high school friends, he has had the opportunity to work with some high-profile clients, working their well-known brands into SASS and HTML5.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,690
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Community Code: Jarvus Innovations

  1. 1. Wednesday, November 2, 2011
  2. 2. jARV.US SPOTLIGHT Chris Alfano & Ryon Coleman @themightychris @ryon55Wednesday, November 2, 2011
  3. 3. OverviewWednesday, November 2, 2011
  4. 4. Overview SENCHA TOUCH EXTJS 4 Eagles Draft 2011 Jarv.us Consumer Reports DynamicWear Christie’s GoLive.TVWednesday, November 2, 2011
  5. 5. Philadelphia Eagles Draft 2011Wednesday, November 2, 2011
  6. 6. Insta-style <!DOCTYPE html> <html lang="en"> <head> ! <style>body{background-color:#033}</style> ! <link rel="stylesheet" href="css/eagles-init.css+eagles- sencha.css+eagles-fonts.css+eagles-overrides.css" type="text/ css"> ! <!-- ... --> </head> <body></body> </html>Wednesday, November 2, 2011
  7. 7. Stretchy backgrounds body { ! background: url(../img/backgroundLogo.jpg) no-repeat center center #033; ! -webkit-background-size: cover; } /* OR */ .storeCard { ! background: url(../img/storeCard.jpg) no-repeat center top; ! -webkit-background-size: contain; }Wednesday, November 2, 2011
  8. 8. On-the-fly CSS & JS minifier <link rel="stylesheet" type="text/css" href="css/eagles-init.css+eagles-sencha.css+eagles-fonts.css +eagles-overrides.css" /> <link rel="stylesheet" href="css/eagles2x.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" /> <script type="text/javascript" src="js/sencha-touch.js+app.js +views/*+models/TwitterProxy.js+models/*"></script>Wednesday, November 2, 2011
  9. 9. <link rel="stylesheet" href="css/eagles-init.css?debug=1" type="text/css"> <link rel="stylesheet" href="css/eagles-sencha.css?debug=1" type="text/css"> <link rel="stylesheet" href="css/eagles-fonts.css?debug=1" type="text/css"> <link rel="stylesheet" href="css/eagles-overrides.css?debug=1" type="text/css"> <link rel="stylesheet" href="css/eagles2x.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" /> <script type="text/javascript" src="js/sencha-touch.js? debug=1"></script> <script type="text/javascript" src="js/app.js?debug=1"></ script> <script type="text/javascript" src="js/views/AppViewport.js? debug=1"></script> <script type="text/javascript" src="js/views/ArticleCard.js? debug=1"></script> <script type="text/javascript" src="js/views/DraftCard.js? debug=1"></script> <script type="text/javascript" src="js/views/LandingCard.js?Wednesday, November 2, 2011
  10. 10. ,startAutoRefresh: function() { ! this.autoRefreshInterval = setInterval( ! ! Ext.createDelegate(this.picksStore.load, this.picksStore) ! ! ,this.autoRefreshSeconds * 1000 ! ); } ,onPicksLoaded: function(store, records, success){!! ! if(this.isVisible() && this.liveDraft.isVisible()) ! ! this.seenPicks = records.length; ! else ! ! this.updateUnseen(records.length); } ,onDraftCardActivated: function() { ! this.markSeen(); }     ,markSeen: function() { ! this.seenPicks = this.picksStore.getCount(); ! this.updateUnseen(this.seenPicks); }Wednesday, November 2, 2011
  11. 11. Challenges Lessons LearnedWednesday, November 2, 2011
  12. 12. Challenges Learn Sencha Touch and SASS theming :) Lessons LearnedWednesday, November 2, 2011
  13. 13. Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Lessons LearnedWednesday, November 2, 2011
  14. 14. Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons LearnedWednesday, November 2, 2011
  15. 15. Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with itWednesday, November 2, 2011
  16. 16. Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with it Establish clear parameters for post-launch contentWednesday, November 2, 2011
  17. 17. Challenges Learn Sencha Touch and SASS theming :) Get and display live updates Adapt static images to different screen ratios Lessons Learned Destroy DOM when you’re done with it Establish clear parameters for post-launch content -webkit-background-sizeWednesday, November 2, 2011
  18. 18. Wednesday, November 2, 2011
  19. 19. Barcode scanning ,onScanPress: function() { ! if(window.device) { ! ! window.plugins.barcodeScanner.scan( ! ! ! Ext.createDelegate(this.onBarcodeSuccess, this) ! ! ! ,Ext.createDelegate(this.onBarcodeFailure, this) ! ! ); ! } else { ! ! alert(barcode scanning is currently only available in native builds); ! } } ,onBarcodeSuccess: function(upc) { ! CR.views.viewport.executeBarcodeSearch(upc); }Wednesday, November 2, 2011
  20. 20. StackPanel viewport CR.views.viewport.loadCard({ ! xtype: aboutpanel ! ,prevCard: this },{ ! // optional animation controls ! animate: slide ! ,direction: left ! ,reverse: false ! ,cover: false ! ,reveal: false ! ! // optional stack management ! ,clearStack: false // true to erase history stack ! ,clearAfter: false // pass a panel instance to clear any forward history }); https://github.com/JarvusInnovations/Jarvus.mobile.StackPanelWednesday, November 2, 2011
  21. 21. DOM destruction this.on(beforeactivate, function() { ! this.setLoading(true);! }, this, {delay: 10}); this.on(activate, function() { ! if(this.loaded) { ! ! this.setLoading(false); ! ! this.list.refresh(); // redraw existing store contents ! } else { ! ! this.list.store.load({ ! ! ! scope: this ! ! ! ,callback: function() { ! ! ! ! this.setLoading(false); ! ! ! } ! ! }); ! } }, this); this.on(beforedeactivate, function() { ! this.list.update(); }, this);Wednesday, November 2, 2011
  22. 22. .x-list-item { ! .product { ! ! -webkit-box-align: stretch; ! ! -webkit-box-orient: horizontal; ! ! display: -webkit-box; ! ! overflow: hidden; ! ! ! ! & > div { -webkit-transition: -webkit-transform 250ms; } ! ! ! .delete-button-ct { ! ! ! -webkit-box-align: center; ! ! ! display: -webkit-box; ! ! ! margin-right: -85px; ! ! ! width: 85px; ! ! ! ! ! ! .x-button { -webkit-box-flex: 1; } ! ! } ! } ! ! &.confirm-delete .product > * { -webkit-transform: translate3d(-85px, 0, 0) } }Wednesday, November 2, 2011
  23. 23. Challenges Lessons LearnedWednesday, November 2, 2011
  24. 24. Challenges Access native APIs for barcode scanner Lessons LearnedWednesday, November 2, 2011
  25. 25. Challenges Access native APIs for barcode scanner Locked grid for comparison view Lessons LearnedWednesday, November 2, 2011
  26. 26. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Lessons LearnedWednesday, November 2, 2011
  27. 27. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Lessons LearnedWednesday, November 2, 2011
  28. 28. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons LearnedWednesday, November 2, 2011
  29. 29. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanelWednesday, November 2, 2011
  30. 30. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanel Wrap card layout for historyWednesday, November 2, 2011
  31. 31. Challenges Access native APIs for barcode scanner Locked grid for comparison view Complex history tracking Aggregation of disparate data sources in a single view Animated swipe-to-delete Lessons Learned Don’t use tabpanel Wrap card layout for history -webkit-box and -webkit-transform3dWednesday, November 2, 2011
  32. 32. Wednesday, November 2, 2011
  33. 33. Make it pop! @mixin background-gradient($bg-color, $type: $base-gradient) { ... } @else if $type == supergloss { @include background-image( linear-gradient(color_stops( lighten($bg-color, 40%), lighten($bg-color, 15%) 50%, $bg-color 51%, lighten($bg-color, 5%) )) ); } ... @include sencha-button-ui(action, darken($christies-red, 10%), supergloss);Wednesday, November 2, 2011
  34. 34. Challenges Lessons LearnedWednesday, November 2, 2011
  35. 35. Challenges Random access thumbnail gallery Lessons LearnedWednesday, November 2, 2011
  36. 36. Challenges Random access thumbnail gallery Third-party SOAP backend Lessons LearnedWednesday, November 2, 2011
  37. 37. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Lessons LearnedWednesday, November 2, 2011
  38. 38. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Lessons LearnedWednesday, November 2, 2011
  39. 39. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel Lessons LearnedWednesday, November 2, 2011
  40. 40. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons LearnedWednesday, November 2, 2011
  41. 41. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is renderedWednesday, November 2, 2011
  42. 42. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is rendered Override mixinsWednesday, November 2, 2011
  43. 43. Challenges Random access thumbnail gallery Third-party SOAP backend Custom gradient types Form styling Zoomable image carousel (https://github.com/JarvusInnovations/Jarvus.mobile.PinchCarousel) Lessons Learned Defer loading data until after screen is rendered Override mixins Reusable list tpls and box layoutWednesday, November 2, 2011
  44. 44. Wednesday, November 2, 2011
  45. 45. Challenges Lessons LearnedWednesday, November 2, 2011
  46. 46. Challenges Performance on a HEAVY page full of images Lessons LearnedWednesday, November 2, 2011
  47. 47. Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons LearnedWednesday, November 2, 2011
  48. 48. Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupesWednesday, November 2, 2011
  49. 49. Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupes “Stunt double” hackWednesday, November 2, 2011
  50. 50. Challenges Performance on a HEAVY page full of images Make an animated dataview appear & init quickly Lessons Learned Stack JS builds to minimize load times, avoid dupes “Stunt double” hack Lazy loading via data- attributesWednesday, November 2, 2011
  51. 51. Wednesday, November 2, 2011
  52. 52. Challenges Lessons LearnedWednesday, November 2, 2011
  53. 53. Challenges Realtime node.js integration Lessons LearnedWednesday, November 2, 2011
  54. 54. Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons LearnedWednesday, November 2, 2011
  55. 55. Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons Learned Socket.IO is fun!Wednesday, November 2, 2011
  56. 56. Challenges Realtime node.js integration Make page render immediately, then update with latest info Lessons Learned Socket.IO is fun! Old-school progressive enhancement = good practiceWednesday, November 2, 2011
  57. 57. Wednesday, November 2, 2011
  58. 58. Use iconCls for buttons .x-btn-icon { ! background-position: center center; ! background-repeat: no-repeat; ! &.shirts! { background-image: url(/img/icons/nav/shirts.png); } ! &.orders! { background-image: url(/img/icons/nav/orders.png); } ! &.settings! { background-image: url(/img/icons/nav/settings.png); } }Wednesday, November 2, 2011
  59. 59. Toolset & WorkflowWednesday, November 2, 2011
  60. 60. Toolset & Workflow Emergence framework TotalTerminal Dropbox CodaWednesday, November 2, 2011
  61. 61. DOs and DON’TsWednesday, November 2, 2011
  62. 62. Wrangling Dependencies DO DON’TWednesday, November 2, 2011
  63. 63. Wrangling Dependencies DO DON’T Define requirements as close to their use as possibleWednesday, November 2, 2011
  64. 64. Wrangling Dependencies DO DON’T Define requirements as close to their use as possible Use Ext.create for all object instantiationWednesday, November 2, 2011
  65. 65. Wrangling Dependencies DO DON’T Define requirements as close Define requirements as close to their use as possible to their use as possible Use Ext.create for all object instantiationWednesday, November 2, 2011
  66. 66. Wrangling Dependencies DO DON’T Define requirements as close Define requirements as close to their use as possible to their use as possible Use Ext.create for all object Use Ext.create for all object instantiation instantiationWednesday, November 2, 2011
  67. 67. Custom Builds DO DO!Wednesday, November 2, 2011
  68. 68. Custom Builds DO DO! Load your whole site on ext- core.js (sans manifest) for the auto-build scriptWednesday, November 2, 2011
  69. 69. Custom Builds DO DO! Load your whole site on ext- core.js (sans manifest) for the auto-build script Separate your classes from Ext classes into different buildsWednesday, November 2, 2011
  70. 70. Custom Builds DO DO! Load your whole site on ext- Create builds on top of ext.js core.js (sans manifest) for the at milestones to reduce load auto-build script times Separate your classes from Ext classes into different buildsWednesday, November 2, 2011
  71. 71. Custom Builds DO DO! Load your whole site on ext- Create builds on top of ext.js core.js (sans manifest) for the at milestones to reduce load auto-build script times Separate your classes from Ext Mix compiled and static classes into different builds loading during development for quick iteratoinWednesday, November 2, 2011
  72. 72. Page Loading DO DON’TWednesday, November 2, 2011
  73. 73. Page Loading DO DON’T Create a minimal CSS file to load first—show that something is happeningWednesday, November 2, 2011
  74. 74. Page Loading DO DON’T Create a minimal CSS file to load first—show that something is happening Load modernizr and any font loaders in the <head>Wednesday, November 2, 2011
  75. 75. Page Loading DO DON’T Create a minimal CSS file to Load all of your JavaScript in load first—show that the <head> something is happening Load modernizr and any font loaders in the <head>Wednesday, November 2, 2011
  76. 76. Working with SASS DO DON’TWednesday, November 2, 2011
  77. 77. Working with SASS DO DON’T Explore Ext’s default .scss filesWednesday, November 2, 2011
  78. 78. Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nestingWednesday, November 2, 2011
  79. 79. Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation!Wednesday, November 2, 2011
  80. 80. Working with SASS DO DON’T Explore Ext’s default .scss files Enjoy mixins, variables, color functions, nesting Be OCD about indentation! Use Compass for CSS3 and tricky techniquesWednesday, November 2, 2011
  81. 81. Working with SASS DO DON’T Explore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color functions, nesting Be OCD about indentation! Use Compass for CSS3 and tricky techniquesWednesday, November 2, 2011
  82. 82. Working with SASS DO DON’T Explore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Use Compass for CSS3 and tricky techniquesWednesday, November 2, 2011
  83. 83. Working with SASS DO DON’T Explore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Overdo it with ‘ui’ configs when regular classes will do Use Compass for CSS3 and tricky techniquesWednesday, November 2, 2011
  84. 84. Working with SASS DO DON’T Explore Ext’s default .scss files Go too crazy with nesting Enjoy mixins, variables, color Battle defaults; instead work functions, nesting with the variables provided Be OCD about indentation! Overdo it with ‘ui’ configs when regular classes will do Use Compass for CSS3 and tricky techniques Be afraid to line-by-line itWednesday, November 2, 2011
  85. 85. tHANK YOU! Chris Alfano & Ryon Coleman @themightychris @ryon55Wednesday, November 2, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×