Cheatsheets são pequenos guias de referências para desenvolvedores, com dicas e macetes em diversas tecnologias, onde você pode aprender ou tirar dúvidas rapidamente.

• Escritos pelos melhores autores em cada uma das tecnologias;
• Informações confiáveis sobre os grandes temas de desenvolvimento da atualidade;
• Dicas úteis e exemplos de código fonte aberto.
• PDF preparado para impressão.

Dentre as tecnologias, disponíveis você vai encontrar:

• GlassFish Application Server
• IntelliJ IDEA
• Silverlight 2
• Flexible Rails: Flex 3 on Rails 2
• Design Patterns
• jQuery Selectors
• Dependency Injection in EJB 3
• Windows PowerShell
• Spring Configuration
• Getting Started with Eclipse
• Getting Started with Ajax

Fonte: http://www.dzone.com

Voltando a série HowTo, gostaria de dedicar este post ao ótimo artigo que li no excelente site StylizedWeb. Com certeza uma visita mais que recomendada para todos que trabalham com desenvolvimento web, ainda mais se você for a pessoa responsável pelo “FrontEnd – essa é velha” da aplicação.

01. Bordas arredondadas sem imagens

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>

<!– aqui vai o conteúdo –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

02. Lista ordenada estilizada

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

03. Formulários sem tabelas

<form>
<label for=”name”>Name</label>
<input id=”name” name=”name”><br>
<label for=”address”>Address</label>
<input id=”address” name=”address”><br>
<label for=”city”>City</label>
<input id=”city” name=”city”><br>
</form>

label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}

br {
clear: left;
}

04. Citação dupla

blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

05. Texto com efeito gradient

<h1><span></span>CSS Gradient Text</h1>

h1 {
font: bold 330%/100% “Lucida Grande”;
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}

<!–[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
}
</style>
<![endif]–>

06. Centralizar verticalmente usando line-height

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

07. Bordas arredondadas com imagens

<div class=”roundcont”>
<div class=”roundtop”>
<img src=”tl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>

TEXTO

<div class=”roundbottom”>
<img src=”bl.gif” alt=”” width=”15″ height=”15″ class=”corner” style=”display: none” />
</div>
</div>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

08. Múltiplas classes para um elemento

<img src=”image.gif” class=”class1 class2″ alt=”” />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

09. Centralizar horizontalmente

<div id=”container”></div>

#container {
margin:0px auto;
}

10. Letras capitulares

<p class=”introduction”> Este parágrafo tem a classe “introduction”. Se o seu navegador suporta a pseudo-classe “first-letter”, a primeira letra estará em estilo capitular. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

11. Prevenir quebras de linha em links

a{
white-space:nowrap;
}

12. Mostrar barras de rolagem do Firefox, removê-las de áreas de texto no IE

html{
overflow:-moz-scrollbars-vertical;
}

textarea{
overflow:auto;
}

13. Div Centralizada

Para posicionar uma div no centro da tela basta usar este código:

#centro {
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
}

Referência:Most used CSS tricks.

Mais uma vez, o nosso fabuloso Senado Federal ataca, no melhor estilo Jedi!!

Se a nossa grandiosa Vergonha Nacional paga R$ 48.000 por mês para exibir um banner minúsculo no paraiba.com.br, quanto será que eu receberia nesse blog com raríssimas atualizações (mas tráfego semelhante ao referido site) ?

É a ladroagem esta de volta!!

Não entendeu a história? Passa lá no Contraditorium

Já comentamos aqui no blog sobre os tutoriais Ya, que é um site argentino com diversos tutoriais onde você pode testar o que esta aprendendo diretamente na interface do tutorial, facilitando muito o aprendizado.

Pois bem, acabaram de lançar um curso básico da mais famosa biblioteca para trabalhar com Ajax da atualidade, o JQuery. Não deixe de conferir.

Link: http://www.javascriptya.com.ar/jquery/

Fonte: Codigo fuente ya

Veja como é fácil personalizar o splash de abertura de seu Eclipse:

Edite o arquivo chamado splash.bmp.

o Arquivo encontra-se na pasta onde você tem o Eclipse instalado, dentro da sub-pasta plugins e na sub-pasta org.eclipse.platform_x.x.x (onde x.x.x é o número da versão que você esta usando).

Só, não esqueça de manter o mesmo nome do arquivo, e o formato .BMP

Só isso…

Dúvida: Tem como importar um arquivo JavaScript dentro de outro arquivo JavaScript? Como é feito em arquivos .CSS, por exemplo:

Podemos ter várias folhas de estilo: layout.css, tipografia.css, print.css…
E na hora de carregar, chama-se todos esses arquivos em apenas um arquivo, no caso estilos.css.

O codigo da página estilos.css ficaria assim:

@import “layout.css”;
@import “tipografia.css”;
@import “print.css”;

E a chamada na página ficaria assim:

<link rel=”stylesheet” type=”text/css” href=”estilos.css” />

Agora, como fazer isso com arquivos JavaScript?

Bem, da pra fazer assim:

em seu arquivo principal.js você pode importar os outros arquivos, simplesmente colocando assim:

document.write(‘<script type=”text/javascript src=”arquivo.js”></script>’);

Há, da pra fazer em PHP também assim: crie uma pagina php, chamada por exemplo, scripts.php, coloque isso:

1. <?php
2. header(“Content-Type: text/javascript”);
3. include “script1.js”;
4. include “script2.js”;
5. ?>

Ai na pagina que vai chamar, você coloca assim:

1. <script type=“text/javascript” src=“scripts.php”></script>

Também funciona que é uma maravilha…

Em Java, seria algo mais ou menos assim:

1. <%@page contentType=“text/html”%>
   
2. <%@ include file=“script1.js“ %>
   
3. <%@ include file=“script2.js“ %>

Fontes:
http://roadfork.narod.ru/JavaScript.htm
http://www.velocityreviews.com/forums/t155619-import-javascript-like-css.html