Skip to content

Instantly share code, notes, and snippets.

@leobalter

leobalter/jsbin.iGuyixo.css

Created September 24, 2013 22:04
Show Gist options
  • Save leobalter/6691966 to your computer and use it in GitHub Desktop.
Save leobalter/6691966 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.iGuyixo.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Inconsolata:400,700);
body {
max-width: 133vh;
margin: 0 auto;
font-family: "Open Sans", sans-serif;
font-size: 5vh;
line-height: 1.4;
background: #f7f7f7;
}
h1, section {
min-height: 104vh;
padding: 8vh;
}
code, pre {
font-family: Inconsolata, monospace;
font-size: 1.15em;
letter-spacing: normal;
}
h1, h2 {
font-weight: normal;
letter-spacing: -0.04em;
line-height: 100%;
margin: 0;
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
h1 {
font-size: 1.5em;
}
h1 pre.sub {
font-size: 0.66em;
}
h1 p {
font-size: 0.5em;
letter-spacing: -0.04em;
}
h2 {
position: sticky;
top: 0.3em;
font-weight: 300;
font-size: 1.5em;
padding: 0.3em 0.5em;
background: #bada55;
}
p, ul, li, .demo {
margin: 1em 0;
}
a:-moz-any-link {
color: #0095DD;
text-decoration: none;
}
a:hover {
color: #00539F;
text-decoration: underline;
}
blockquote {
font-size: 0.8em;
}
blockquote p {
}
.aRight {
text-align: right;
}
Raw
jsbin.iGuyixo.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Slides 7Masters JS 2013" />
<meta http-equiv="Content-Type" charset="utf-8">
<meta name="author" content="Leo Balter">
<meta name="date" content="2013-09-25">
<title>Sticky Positioning</title>
</head>
<body>
<h1>
JS Idiomatico, Convenções e Polêmicas.
<p>Leo Balter<br>(<code>@leobalter</code>)<br><br>2013-09-25</p>
</h1>
<section>
<h2><code>position:sticky</code></h2>
<div style="text-align: center">
<p><img src="http://coreyford.name/files/position-sticky-presentation/firefox-nightly.png" alt="Nightly" style="height: 40vh"></p>
<p><code>about:config</code></p>
<p><code>layout.css.sticky.enabled</code></p>
</div>
</section>
<section>
<h2>Maior dificuldade da programação</h2>
<blockquote cite="http://martinfowler.com/bliki/TwoHardThings.html">
<p>"There are only two hard things in Computer Science: cache invalidation and naming things."</p>
<p class="quote-attribution">&mdash; Phil Karlton</p>
</blockquote>
</section>
<section>
<h2>Na vida real</h2>
<blockquote cite="http://martinfowler.com/bliki/TwoHardThings.html">
<p>"There are only <strong>two</strong> hard things in Computer Science: cache invalidation, naming things, and <a href="https://en.wikipedia.org/wiki/Off-by-one_error">off-by-one errors</a>". <a href="http://martinfowler.com/bliki/TwoHardThings.html">*</a></p>
</blockquote>
</section>
<section>
<blockquote class="twitter-tweet"><p>you give vars a bad name. <a href="https://twitter.com/search?q=%23bonjoviprogramming&amp;src=hash">#bonjoviprogramming</a></p>&mdash; <a href="https://twitter.com/leobalter/statuses/381842056593018882">@leobalter</a></blockquote>
</section>
<section>
<h2>JavaScript de forma Consistente e Idiomática</h2>
<pre>var foo = "";
var bar = "";
var qux;</pre>
</section>
<section>
<pre>var foo = "",
bar = "",
qux;</pre>
</section>
<section>
<pre>var foo = ""
var bar = ""
var qux</pre>
</section>
<section>
<h2>Código consistente e consciente</h2>
<pre>var foo = ""
bar = ""
qux</pre>
<p><i>bar</i> será tratado como global e <i>qux</i> vai dar erro de referência se for undefined.</p>
</section>
<section>
<h2>Law of code style consistency</h2>
<p>"Todo código em qualquer aplicação deve parecer como se tivesse sido escrito por uma única pessoa, independentemente de quantas pessoas tenham contribuído."</p>
<p>Assim que você assume o estilo de um código ele deve se tornar lei e todos devem seguir o mesmo estilo.</p>
<p>"Argumentos além do estilo são inúteis. Deve haver um guia de estilo, e você deve segui-lo". <i>Rebecca Murphey</i></p>
</section>
<section>
<h2>O que deve ter em um guia de estilo de JS?</h2>
<ul>
<li>Whitespace</li>
<li>Sintaxe bonita</li>
<li>Nomeação de objetos</li>
<li>Comentários</li>
<li>Idiomas</li>
<li>Padrões de projeto</li>
<li>...</li>
</ul>
</section>
<section>
<h2>Whitespace</h2>
<p>Tabs ou espaços?</p>
<p>Identação de quantos espaços?</p>
<p>linebreaks</p>
</section>
<section>
<h2>Sintaxe elegante</h2>
<p>Quem curte o ASI?</p>
<p>Áspas simples ou duplas?</p>
</section>
<section>
<pre>foo([ "alpha", "beta" ]);
foo({
a: "alpha",
b: "beta"
});
foo("bar");
if ( !("foo" in obj) ) {
}</pre>
</section>
<section>
<h2>Nomeação de objetos</h2>
<pre>function q(s) {
return document.querySelectorAll(s);
}</pre>
</section>
<section>
<pre>function query( selector ) {
return document.querySelectorAll( selector );
}</pre>
</section>
<section>
<h2>Comentários</h2>
<pre>// retorna elementos de acordo com o seletor passado
function query( selector ) {
return document.querySelectorAll( selector );
}</pre>
<pre>function query( selector ) {
return document.querySelectorAll( selector ); // retorna elementos de acordo com o seletor passado
}</pre>
</section>
<section>
<h2>Idiomas</h2>
<pre>// renvoie les éléments en fonction de la dernière sélection
function requete( selector ) {
return document.querySelectorAll( selector );
}</pre>
<p>Se você entende Francês e Inglês, parabéns.</p>
</section>
<section>
<h2>Padrões de Projeto - sintaxe</h2>
<pre>(function( global ) {
var Module = (function() {
var data = "secret";
return {
getData: function() {
return data;
},
setData: function( value ) {
return ( data = value );
}
};
})();
global.Module = Module;
})( this );</pre>
</section>
<section>
<h2>Ferramentas</h2>
<p>Qualidade</p>
<ul>
<li><a href="https://github.com/es-analysis/plato">Plato</a></li>
<li><a href="http://jshint.com/">JSHint</a></li>
<li><a href="http://jsperf.com/">JSPerf</a></li>
<li><a href="http://jsbin.com/">JSBin</a></li>
</ul>
<p>Automatização e deploy</p>
<ul>
<li>Grunt</li>
<li>Yeoman</li>
<li>Bower</li>
</ul>
<p>Testes</p>
<ul>
<li>QUnit</li>
<li>Jasmine</li>
<li>Mocha</li>
</ul>
<p><cite><a href="https://github.com/jquery/jquery/blob/master/CONTRIBUTING.md">"Como contribuir com um projeto".</a></cite></p>
</section>
<section>
<h2>Qual o melhor guia de estilos de JS?</h2>
<p>Nenhum.</p>
<p>Não há bala de prata. O melhor estilo é o que a sua equipe melhor se adapta. A flexibilidade do JS deve ser usada ao seu favor.</p>
<p>Não tente estabelecer uma única forma para outros projetos que não são seus. Temos mindset diferentes.</p>
</section>
<section>
<h2>JS Style Guides</h2>
<ul>
<li><a href="https://github.com/rwaldron/idiomatic.js/">Idiomatic.js</a></li>
<li><a href="https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml">Google</a></li>
<li><a href="http://contribute.jquery.org/style-guide/js/">jQuery</a></li>
<li><a href="https://github.com/airbnb/javascript">Airbnb</a></li>
</ul>
<p>Se não quiser seguir algum, crie um pra seu projeto e torne ele mandatório.</p>
</section>
<section>
<h2>Obrigado!</h2>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment