SlideShare a Scribd company logo
1 of 40
Download to read offline
A jQuery Plugin
for Radical Web
Typography
  @davatron5000 || daverupert.com
  http://github.com/davatron5000/lettering.js
I work at Paravel.



      http://paravelinc.com
I host the
ATX Web
Show.
http://atxwebshow.com && @atxwebshow
WTF is             ?
 A jQuery Plugin
 for Radical Web
   Typography
WTF is             ?
  A glorified
<span> injector!
Ye olde history of
Lettering.js
         I am of the opinion that
         reading a handwritten
         scroll is far superior to the
         soul-less books being put
         forth by Gutenberg’s
         infernal machine!
Web
Font
Explosion
Of

  va si on                                        The
In         ES
 LO GA ZIN
B




  http://www.smashingmagazine.com/the-death-of-the-blog-post/
LOST WORLD’S FAIRS



                                 WHO?


   http://lostworldsfairs.com/
Lettering js
Lettering js
Lettering js
OUR OBJECTIVES

✓Show off IE9s support of WOFF
✓Fonts provided by Typekit
✓Maintainable HTML/CSS
   So we wrote
How Lettering.js
     works:
Start with normal HTML

<!doctype html>
<html>
<body>
  <h1 id="fancy_title">Some Title</h1>
</body>
</html>
Sprinkle in some Javascript

<!doctype html>
<html>
<body>
  <h1 id="fancy_title">Some Title</h1>

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/jquery.lettering.min.js"></script>

  <script>
    $(document).ready(function() {
      $("#fancy_title").lettering();
    });
  </script>

</body>
</html>
BOOM! Letter control!

<h1 id="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>
Then style with plain ol’ CSS

#fancy_title{
  font-weight: normal;
  text-transform: uppercase;
  font-family: 'FranchiseRegular';
  font-size: 160px;
  color: #c44032;
  text-shadow: #863027 -4px 4px 0;
}
.char2, .char9 {color: #e36b23; text-shadow:    #9b4d1f   -4px   4px   0}
.char3, .char8 {color: #e6c92e; text-shadow:    #9c8b26   -4px   4px   0}
.char4, .char6 {color: #5da028; text-shadow:    #427021   -4px   4px   0}
.char7          {color: #4584be; text-shadow:   #2f597f   -4px   4px   0}
How about words?

<p id="word_split">Don't break my heart.</p>

<script>
$(document).ready(function() {
  $("#word_split").lettering('words');
});
</script>
It does words too!

<p id="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>
Does it break lines?

<p id="line_split">Are you<br/> ready to<br/> RUMmMmMMBBLE!</p>

<script>
$(document).ready(function() {
  $("#line_split").lettering('lines');
});
</script>
PSSsSSH! Get outta my face!

<p id="line_split">
  <span class="line1">Are you</span>
  <span class="line2">ready to</span>
  <span class="line3">RUMmMmMMBBLE!</span>
</p>
/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var
a=t.text().split(splitter),inject='';if(a.length){$(a).each
(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item
+'</span>'+after});t.empty().append(inject)}}var methods=
{init:function(){return this.each(function(){injector($
(this),'','char','')})},words:function(){return this.each(function
(){injector($(this),' ','word',' ')})},lines:function(){return
this.each(function(){var
r="eefec303079ad17405c889e092e105b0";injector($(this).children
("br").replaceWith(r).end(),r,'line','')})}};
$.fn.lettering=function(method){if(method&&methods[method]){return
methods[method].apply(this,[].slice.call(arguments,1))}else if
(method==='letters'||!method){return methods.init.apply(this,
[].slice.call(arguments,0))}$.error('Method '+method+' does not
exist on jQuery.lettering');return this}})(jQuery);
is tiny.
Only 38 lines of code.
Wow! That’s so tiny. You could almost give a
        line-by-line walkthrough
Line-by-line
Walkthrough
the outline
    (function($){
2     function injector(t, splitter, klass, after) {
        // Injects <span> tags
      }

1     var methods = {
         init : function() {
        // Splits up letters
         },
         words : function() {
        // Splits up words
         },

         lines : function() {
       // Splits up lines
         }
      };
3     $.fn.lettering = function( method ) {
         // Method calling logic
      };
    })(jQuery);
the `letters` and `words` methods

var methods = {
  init : function() {

       return this.each(function() {
         injector($(this), '', 'char', '');
       });

  },

  words : function() {

       return this.each(function() {
         injector($(this), ' ', 'word', ' ');
       });

  },
the `lines` method


     lines : function() {

         return this.each(function() {
           var r = "eefec303079ad17405c889e092e105b0";
           // Because it's hard to split a <br/> tag consistently across browsers,
           // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash
           // (of the word "split"). If you're trying to use this plugin on that
           // md5 hash string, it will fail because you're being ridiculous.
           injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
         });

     }
};
the <span> injector



function injector(t, splitter, klass, after) {
  var a = t.text().split(splitter), inject = '';
  if (a.length) {
    $(a).each(function(i, item) {
      inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
    });
    t.empty().append(inject);
  }
}
.lettering()


  $.fn.lettering = function( method ) {
     // Method calling logic
     if ( method && methods[method] ) {
       return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
     } else if ( method === 'letters' || ! method ) {
       return methods.init.apply( this, [].slice.call( arguments, 0 ) ); //
always pass an array
     }
     $.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
     return this;
  };
in the wild...
http://trentwalton.com/2011/01/26/you-are-what-you-eat/
http://pronounce.yaronschoen.com/
http://designingmonsters.com/
Text




http://css-tricks.com/animated-knockout-letters/
http://www.jessbrown.me/doritos/
http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/
http://typekit.com/holiday2010
http://yearinreview.twitter.com/powerful-tweets/
Questions/Comments?




  @davatron5000 || daverupert.com
  http://github.com/davatron5000/lettering.js

More Related Content

What's hot

Plugin jQuery, Design Patterns
Plugin jQuery, Design PatternsPlugin jQuery, Design Patterns
Plugin jQuery, Design PatternsRobert Casanova
 
Beautiful PHP CLI Scripts
Beautiful PHP CLI ScriptsBeautiful PHP CLI Scripts
Beautiful PHP CLI ScriptsJesse Donat
 
Make your own wp cli command in 10min
Make your own wp cli command in 10minMake your own wp cli command in 10min
Make your own wp cli command in 10minIvelina Dimova
 
Getfilestruct zbksh(1)
Getfilestruct zbksh(1)Getfilestruct zbksh(1)
Getfilestruct zbksh(1)Ben Pope
 
NYPHP March 2009 Presentation
NYPHP March 2009 PresentationNYPHP March 2009 Presentation
NYPHP March 2009 Presentationbrian_dailey
 
Learning Perl 6
Learning Perl 6 Learning Perl 6
Learning Perl 6 brian d foy
 
Achieving Parsing Sanity In Erlang
Achieving Parsing Sanity In ErlangAchieving Parsing Sanity In Erlang
Achieving Parsing Sanity In ErlangSean Cribbs
 
Learning Perl 6 (NPW 2007)
Learning Perl 6 (NPW 2007)Learning Perl 6 (NPW 2007)
Learning Perl 6 (NPW 2007)brian d foy
 
Business Rules with Brick
Business Rules with BrickBusiness Rules with Brick
Business Rules with Brickbrian d foy
 
Code Generation in PHP - PHPConf 2015
Code Generation in PHP - PHPConf 2015Code Generation in PHP - PHPConf 2015
Code Generation in PHP - PHPConf 2015Lin Yo-An
 
Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)brian d foy
 
Evolving Software with Moose
Evolving Software with MooseEvolving Software with Moose
Evolving Software with MooseDave Cross
 
Best Practices in Plugin Development (WordCamp Seattle)
Best Practices in Plugin Development (WordCamp Seattle)Best Practices in Plugin Development (WordCamp Seattle)
Best Practices in Plugin Development (WordCamp Seattle)andrewnacin
 
Text in search queries with examples in Perl 6
Text in search queries with examples in Perl 6Text in search queries with examples in Perl 6
Text in search queries with examples in Perl 6Andrew Shitov
 

What's hot (20)

Plugin jQuery, Design Patterns
Plugin jQuery, Design PatternsPlugin jQuery, Design Patterns
Plugin jQuery, Design Patterns
 
Prototype js
Prototype jsPrototype js
Prototype js
 
Dsl
DslDsl
Dsl
 
Beautiful PHP CLI Scripts
Beautiful PHP CLI ScriptsBeautiful PHP CLI Scripts
Beautiful PHP CLI Scripts
 
Make your own wp cli command in 10min
Make your own wp cli command in 10minMake your own wp cli command in 10min
Make your own wp cli command in 10min
 
Fantom and Tales
Fantom and TalesFantom and Tales
Fantom and Tales
 
Getfilestruct zbksh(1)
Getfilestruct zbksh(1)Getfilestruct zbksh(1)
Getfilestruct zbksh(1)
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
NYPHP March 2009 Presentation
NYPHP March 2009 PresentationNYPHP March 2009 Presentation
NYPHP March 2009 Presentation
 
Learning Perl 6
Learning Perl 6 Learning Perl 6
Learning Perl 6
 
Achieving Parsing Sanity In Erlang
Achieving Parsing Sanity In ErlangAchieving Parsing Sanity In Erlang
Achieving Parsing Sanity In Erlang
 
Learning Perl 6 (NPW 2007)
Learning Perl 6 (NPW 2007)Learning Perl 6 (NPW 2007)
Learning Perl 6 (NPW 2007)
 
Business Rules with Brick
Business Rules with BrickBusiness Rules with Brick
Business Rules with Brick
 
Code Generation in PHP - PHPConf 2015
Code Generation in PHP - PHPConf 2015Code Generation in PHP - PHPConf 2015
Code Generation in PHP - PHPConf 2015
 
Perl6 grammars
Perl6 grammarsPerl6 grammars
Perl6 grammars
 
Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)Benchmarking Perl (Chicago UniForum 2006)
Benchmarking Perl (Chicago UniForum 2006)
 
Evolving Software with Moose
Evolving Software with MooseEvolving Software with Moose
Evolving Software with Moose
 
Modern Perl
Modern PerlModern Perl
Modern Perl
 
Best Practices in Plugin Development (WordCamp Seattle)
Best Practices in Plugin Development (WordCamp Seattle)Best Practices in Plugin Development (WordCamp Seattle)
Best Practices in Plugin Development (WordCamp Seattle)
 
Text in search queries with examples in Perl 6
Text in search queries with examples in Perl 6Text in search queries with examples in Perl 6
Text in search queries with examples in Perl 6
 

Viewers also liked

Modelli regole e tecnologie per l'azienda collaborativa
Modelli regole e tecnologie per l'azienda collaborativaModelli regole e tecnologie per l'azienda collaborativa
Modelli regole e tecnologie per l'azienda collaborativaNetConsultingMilano
 
Webkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The AwesomeWebkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The Awesomedavatron5000
 
La Catedral: Catálogo de actividades | Marzo 2012
La Catedral: Catálogo de actividades | Marzo 2012La Catedral: Catálogo de actividades | Marzo 2012
La Catedral: Catálogo de actividades | Marzo 2012La Catedral Innova
 
La Catedral: Catálogo de actividades | Febrero 2012
La Catedral: Catálogo de actividades | Febrero 2012La Catedral: Catálogo de actividades | Febrero 2012
La Catedral: Catálogo de actividades | Febrero 2012La Catedral Innova
 
Ciball folleto actividades enero
Ciball   folleto actividades eneroCiball   folleto actividades enero
Ciball folleto actividades eneroLa Catedral Innova
 
Ciball folleto actividades noviembre
Ciball   folleto actividades noviembreCiball   folleto actividades noviembre
Ciball folleto actividades noviembreLa Catedral Innova
 

Viewers also liked (8)

Capo ii
Capo iiCapo ii
Capo ii
 
Modelli regole e tecnologie per l'azienda collaborativa
Modelli regole e tecnologie per l'azienda collaborativaModelli regole e tecnologie per l'azienda collaborativa
Modelli regole e tecnologie per l'azienda collaborativa
 
Webkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The AwesomeWebkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The Awesome
 
La Catedral: Catálogo de actividades | Marzo 2012
La Catedral: Catálogo de actividades | Marzo 2012La Catedral: Catálogo de actividades | Marzo 2012
La Catedral: Catálogo de actividades | Marzo 2012
 
La Catedral: Catálogo de actividades | Febrero 2012
La Catedral: Catálogo de actividades | Febrero 2012La Catedral: Catálogo de actividades | Febrero 2012
La Catedral: Catálogo de actividades | Febrero 2012
 
Ciball folleto actividades enero
Ciball   folleto actividades eneroCiball   folleto actividades enero
Ciball folleto actividades enero
 
Cloudcomputing
CloudcomputingCloudcomputing
Cloudcomputing
 
Ciball folleto actividades noviembre
Ciball   folleto actividades noviembreCiball   folleto actividades noviembre
Ciball folleto actividades noviembre
 

Similar to Lettering js

Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescriptDavid Furber
 
Making JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachablePamela Fox
 
Dealing with Legacy Perl Code - Peter Scott
Dealing with Legacy Perl Code - Peter ScottDealing with Legacy Perl Code - Peter Scott
Dealing with Legacy Perl Code - Peter ScottO'Reilly Media
 
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering College
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering CollegeString handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering College
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering CollegeDhivyaa C.R
 
Introduction To Groovy 2005
Introduction To Groovy 2005Introduction To Groovy 2005
Introduction To Groovy 2005Tugdual Grall
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsBG Java EE Course
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous MerbMatt Todd
 
PHP Basics and Demo HackU
PHP Basics and Demo HackUPHP Basics and Demo HackU
PHP Basics and Demo HackUAnshu Prateek
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼Sukjoon Kim
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Introzhang tao
 
Internet Technology and its Applications
Internet Technology and its ApplicationsInternet Technology and its Applications
Internet Technology and its Applicationsamichoksi
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015qmmr
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceSteve Souders
 
How Xslate Works
How Xslate WorksHow Xslate Works
How Xslate WorksGoro Fuji
 
EmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua LawrenceEmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua LawrenceJoshua Lawrence
 

Similar to Lettering js (20)

Real life-coffeescript
Real life-coffeescriptReal life-coffeescript
Real life-coffeescript
 
Making JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More Approachable
 
Dealing with Legacy Perl Code - Peter Scott
Dealing with Legacy Perl Code - Peter ScottDealing with Legacy Perl Code - Peter Scott
Dealing with Legacy Perl Code - Peter Scott
 
Jquery 1
Jquery 1Jquery 1
Jquery 1
 
Einführung in TypeScript
Einführung in TypeScriptEinführung in TypeScript
Einführung in TypeScript
 
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering College
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering CollegeString handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering College
String handling and arrays by Dr.C.R.Dhivyaa Kongu Engineering College
 
UNIT II (7).pptx
UNIT II (7).pptxUNIT II (7).pptx
UNIT II (7).pptx
 
UNIT II (7).pptx
UNIT II (7).pptxUNIT II (7).pptx
UNIT II (7).pptx
 
Introduction To Groovy 2005
Introduction To Groovy 2005Introduction To Groovy 2005
Introduction To Groovy 2005
 
JavaScript and jQuery Fundamentals
JavaScript and jQuery FundamentalsJavaScript and jQuery Fundamentals
JavaScript and jQuery Fundamentals
 
Adventurous Merb
Adventurous MerbAdventurous Merb
Adventurous Merb
 
Broadleaf Presents Thymeleaf
Broadleaf Presents ThymeleafBroadleaf Presents Thymeleaf
Broadleaf Presents Thymeleaf
 
PHP Basics and Demo HackU
PHP Basics and Demo HackUPHP Basics and Demo HackU
PHP Basics and Demo HackU
 
JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼
 
Ruby on Rails Intro
Ruby on Rails IntroRuby on Rails Intro
Ruby on Rails Intro
 
Internet Technology and its Applications
Internet Technology and its ApplicationsInternet Technology and its Applications
Internet Technology and its Applications
 
ECMAScript2015
ECMAScript2015ECMAScript2015
ECMAScript2015
 
Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
 
How Xslate Works
How Xslate WorksHow Xslate Works
How Xslate Works
 
EmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua LawrenceEmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
EmberConf 2021 - Crossfile Codemodding with Joshua Lawrence
 

Recently uploaded

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 

Recently uploaded (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 

Lettering js

  • 1. A jQuery Plugin for Radical Web Typography @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js
  • 2. I work at Paravel. http://paravelinc.com
  • 3. I host the ATX Web Show. http://atxwebshow.com && @atxwebshow
  • 4. WTF is ? A jQuery Plugin for Radical Web Typography
  • 5. WTF is ? A glorified <span> injector!
  • 6. Ye olde history of Lettering.js I am of the opinion that reading a handwritten scroll is far superior to the soul-less books being put forth by Gutenberg’s infernal machine!
  • 8. Of va si on The In ES LO GA ZIN B http://www.smashingmagazine.com/the-death-of-the-blog-post/
  • 9. LOST WORLD’S FAIRS WHO? http://lostworldsfairs.com/
  • 13. OUR OBJECTIVES ✓Show off IE9s support of WOFF ✓Fonts provided by Typekit ✓Maintainable HTML/CSS So we wrote
  • 15. Start with normal HTML <!doctype html> <html> <body> <h1 id="fancy_title">Some Title</h1> </body> </html>
  • 16. Sprinkle in some Javascript <!doctype html> <html> <body> <h1 id="fancy_title">Some Title</h1> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.lettering.min.js"></script> <script> $(document).ready(function() { $("#fancy_title").lettering(); }); </script> </body> </html>
  • 17. BOOM! Letter control! <h1 id="fancy_title"> <span class="char1">S</span> <span class="char2">o</span> <span class="char3">m</span> <span class="char4">e</span> <span class="char5"></span> <span class="char6">T</span> <span class="char7">i</span> <span class="char8">t</span> <span class="char9">l</span> <span class="char10">e</span> </h1>
  • 18. Then style with plain ol’ CSS #fancy_title{ font-weight: normal; text-transform: uppercase; font-family: 'FranchiseRegular'; font-size: 160px; color: #c44032; text-shadow: #863027 -4px 4px 0; } .char2, .char9 {color: #e36b23; text-shadow: #9b4d1f -4px 4px 0} .char3, .char8 {color: #e6c92e; text-shadow: #9c8b26 -4px 4px 0} .char4, .char6 {color: #5da028; text-shadow: #427021 -4px 4px 0} .char7 {color: #4584be; text-shadow: #2f597f -4px 4px 0}
  • 19. How about words? <p id="word_split">Don't break my heart.</p> <script> $(document).ready(function() { $("#word_split").lettering('words'); }); </script>
  • 20. It does words too! <p id="word_split"> <span class="word1">Don't</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span> </p>
  • 21. Does it break lines? <p id="line_split">Are you<br/> ready to<br/> RUMmMmMMBBLE!</p> <script> $(document).ready(function() { $("#line_split").lettering('lines'); }); </script>
  • 22. PSSsSSH! Get outta my face! <p id="line_split"> <span class="line1">Are you</span> <span class="line2">ready to</span> <span class="line3">RUMmMmMMBBLE!</span> </p>
  • 23. /* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */ (function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each (function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item +'</span>'+after});t.empty().append(inject)}}var methods= {init:function(){return this.each(function(){injector($ (this),'','char','')})},words:function(){return this.each(function (){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children ("br").replaceWith(r).end(),r,'line','')})}}; $.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if (method==='letters'||!method){return methods.init.apply(this, [].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);
  • 24. is tiny. Only 38 lines of code. Wow! That’s so tiny. You could almost give a line-by-line walkthrough
  • 26. the outline (function($){ 2 function injector(t, splitter, klass, after) { // Injects <span> tags } 1 var methods = { init : function() { // Splits up letters }, words : function() { // Splits up words }, lines : function() { // Splits up lines } }; 3 $.fn.lettering = function( method ) { // Method calling logic }; })(jQuery);
  • 27. the `letters` and `words` methods var methods = { init : function() { return this.each(function() { injector($(this), '', 'char', ''); }); }, words : function() { return this.each(function() { injector($(this), ' ', 'word', ' '); }); },
  • 28. the `lines` method lines : function() { return this.each(function() { var r = "eefec303079ad17405c889e092e105b0"; // Because it's hard to split a <br/> tag consistently across browsers, // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash // (of the word "split"). If you're trying to use this plugin on that // md5 hash string, it will fail because you're being ridiculous. injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); }); } };
  • 29. the <span> injector function injector(t, splitter, klass, after) { var a = t.text().split(splitter), inject = ''; if (a.length) { $(a).each(function(i, item) { inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after; }); t.empty().append(inject); } }
  • 30. .lettering() $.fn.lettering = function( method ) { // Method calling logic if ( method && methods[method] ) { return methods[ method ].apply( this, [].slice.call( arguments, 1 )); } else if ( method === 'letters' || ! method ) { return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array } $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); return this; };
  • 40. Questions/Comments? @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n