Instalando e configurando o OpenWith do Sublime Text

Quem é apaixonado como eu pelo IDE “Sublime Text 3” que atualmente está na sua versão 3.3059 provavelmente passa pelo problema de implementar tão preciosa “Side Bar Enhancements” que facilita muito a vida do Desenvolvedor seja que especialidade for. Isso devido ao fato de adicionar várias funcionalidades com o botão direito do mouse sendo clicado sobre o arquivo entre outras preciosidades como editar Browsers para abrir as páginas editadas com apenas uma tecla como no caso da famosa “F12”.

Muitos desenvolvedores nem sequer migram para a nova versão por causa disso mas seus problemas acabaram….Para resolver isso basta ir na URL do GitHub abaixo:

https://github.com/titoBouzout/SideBarEnhancements/tree/st3

Baixa o pacote no formato ZIP e instala ele na sua pasta de usuário do programa…

C:\Users\SEU_USUARIO\AppData\Roaming\Sublime Text 3\Packages

ou então abra ela indo no menu  “Preferences” -> “Browser Package”  para abrir a sua pasta no seu micro e basta colar a pasta descompactada nesta pasta. Reinicie seu Sublime Text 3 e pronto, já estará funcionando.

Para facilitar sua vida deixo aqui abaixo meu próprio arquivo de configuração compartilhado bastando copiar e colar no arquivo apropriado para que seu Sublime Text possa abrir páginas que você está trabalhando no Browser clicando em F12.

Bom, se vc não sabe chegar nesta arquivo, clique com o botão direito em cima do arquivo na Side Bar do Sublime, clique em “Open With” -> “Edit Applications” e quando abrir o arquivo cole o conteúdo abaixo nele  e mande salvar, dai é só usar o comando F12 (no meu caso tá configurado pro Chrome como default).

Você também poderá obter maiores informações em :
https://sublime.wbond.net/packages/SideBarEnhancements
Bom proveito!

Code abaixo:

[{
    “id”: “side-bar-files-open-with”,
    “children”: [

        //application 1
        {
            “caption”: “Photoshop”,
            “id”: “side-bar-files-open-with-photoshop”,

            “command”: “side_bar_files_open_with”,
            “args”: {
                “paths”: [],
                “application”: “Adobe Photoshop CS5.app”, // OSX
                “extensions”: “psd|png|jpg|jpeg” //any file with these extensions
            },
            “open_automatically”: false // will close the view/tab and launch the application
        },

        //GOOGLE CHROME
        {
            “caption”: “Chrome”,
            “id”: “side-bar-files-open-with-chrome”,

            “command”: “side_bar_files_open_with”,
            “args”: {
                “paths”: [],
                “application”: “C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe”,
                “extensions”: “.*” //any file with extension
            },
            “open_automatically”: false // will close the view/tab and launch the application
        },

        //separator
        {
            “caption”: “-“
        },

        //FIREFOX
        {
            “caption”: “Firefox”,
            “id”: “side-bar-files-open-with-firefox”,

            “command”: “side_bar_files_open_with”,
            “args”: {
                “paths”: [],
                “application”: “C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe”, // WINNT
                “extensions”: “” //open all even folders
            },
            “open_automatically”: false // will close the view/tab and launch the application
        },

        //separator
        {
            “caption”: “IE”,
            “id”: “side-bar-files-open-with-InternetExplorer”,

            “command”: “side_bar_files_open_with”,
            “args”: {
                “paths”: [],
                “application”: “C:\\Program Files\\Internet Explorer\\iexplore.exe”, // WINNT
                “extensions”: “” //open all even folders
            },
            “open_automatically”: false // will close the view/tab and launch the application
        }
    ]
}]

Publicidade

Personalize seu Inspetor de Elementos do Navegador Google Chrome.

Se você é como eu apaixonado no Navegador Google Chrome (atualmente está na versão 32.0.1700.76m, de Janeiro de 2013) e como eu gosta de personalizar tudo que é possível, uma característica forte de profissionais que trabalham com Desenvolvimento Front-end como eu(sim, Webdesginer não existe mais, a não ser que você não seja formado ainda), então vai gostar desta dica.

Você pode, assim como criar ou aplicar um Tema ao Navegador, também fazer ou criar um Tema para o Inspetor de elementos do Chrome. Sim, ele permite. Como poderá ver abaixo, na imagem que capturei de meu micro meu inspetor personalizado. Para quem ainda não usa o Inspetor de elementos do Chrome basta clicar F12 ao usar o navegador num site qualquer, ou clicar com o botão direito do mouse sobre um site qualquer e escolhendo a opção “Inspecionar de elemento”, a última opção da barra de opções do botão direito. Ele serve para desenvolvedores como eu, que inspecionam códigos em funcionamento e nos auxiliam no desenvolvimento de códigos em que se está trabalhando ou entender códigos de outros sites que se tem o desejo de conhecer. Ele é extremamente útil e diga-se de passagem que na última versão atualizada do navegador ficou melhor ainda. Abaixo a imagem de minha tela com o meu tema escohido:

Para isso, temos duas possibilidades de aplicar o tema, ou alteramos diretamente nos seus códigos linha a linha conforme desejamos ou podemos fazer o download de um tema feito por outro usuário desenvolvedor via site de download de temas de inspetores indicado abaixo, basta escolher um tema e fazer o download dele no GITHUB como arquivo ZIP:

http://devthemez.com/

Independente de sua escolha, vamos trabalhar apenas com um arquivo CSS para personalizar o Inspetor de elementos.  E o nome dele é “Custom.css”.

Se usa o Windows 7, o caminho de acesso a este arquivo será :

C:\Users\SEU_USUARIO\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

Se usa o Windows 8 seu caminho de acesso será:

C:\Users\SEU_USUARIO\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

Acessando você já verá na pasta o arquivo   “Custom.css” em questão. Caso queira mudar na mão basta abrir o mesmo e começar a analisar a alterar. No caso não acho que tenha necessidade disso pois o Site indicado em questão já possui milhares de temas para os mais variados gostos. Para usar depois de escolher e baixar o arquivo ZIP do tema escolhido ou apenas o  “Custom.css” na descrição individual do GitHub, substitua o mesmo pelo original. Somente deverá permanecer fechado seu navegador Chrome durante este processo, depois de substituir basta abrir o Chrome novamente e estará pronto e aparecendo.

Não se preocupe com o original, caso queira restaurar o original basta deletar o arquivo desta pasta com o Chrome fechado e depois abrí-lo novamente, ele reinstala sozinho seu inspetor default.

Espero que gostem de mais esta frescurinha….mas que para alguns muda a rotina e o tédio das interfaces…diverte este trabalho de nossa profissão que já é tão divertido!

Abraço Galera…

RESETANDO CONFIGURAÇÃO PADRÃO DO FIREWORKS SEM PERDER SUAS PREFERÊNCIAS.

Outros profissionais podem criticar mas se tem um programa gráfico que faço uso em quase 100% das vezes em minha rotina de trabalho é o Fireworks. Criado originalmente pela Macromedia em 1994, o Fireworks é um excelente se não o melhor ( em minha opinião ) programa gráfico para trabalhar com imagens no desenvolvimento de Sites.  A Adobe, após comprar o conjunto de programas da Macromedia (Fireworks, Dreamweaver, Flash,etc.)  melhorou ainda mais este programa, adicionando a ele ferramentas de sucesso e “engines” do Photoshop, deixando o Fireworks com uma qualidade e ferramentas tão boas quanto o Photoshop, fazendo com que o profissional de Web Design tivesse uma ferramenta ainda mais eficaz.

Quando trabalhamos com ele é normal criamos nossas preferências, principalmente no Layout de trabalho dele, adicionando botões no painel direito, etc.

No entanto é comum nestas mudanças de configurações padrões do Fireworks acabarmos fazendo algumas besteira como inidicar pastas de plugins de forma errada ou outra coisa e com isso o programa ou fica muito lento na abertura, ou no funcionamento, ou simplesmente não abre mesmo, travando na tela ao ser acionado.

Para resolver estes problemas muitas pessoas recorrem ao famoso CTRL+SHIT+execução do programa, o que reseta o mesmo, mas ai…ao abrir vc se depara com uma péssima conclusão. A de que perdeu toda a sua personalização da área de trabalho (leiaute) do Programa…

Para resolver isso é fácil, independente de windows 7 ou windows 8 ou XP (desculpem os usuários de MAC mas não sei onde se encontra esta pasta, não curto micros de arquitetura fechada, portanto nem olho pra eles).

Se seu Fireworks não está abrindo depois daquelas alterações de configurações faça o seguinte:

1- Mantenha o Fireworks fechado.

2- Vá em :
C:\Users\seu_usuário\AppData\Roaming\Adobe

3- Dentro desta pasta você encontrará a pasta do “Fireworks”, chamada “Fireworks CS6” ou CS5 ou a versão que vc tiver. Renomeie ela para o nome que quiser.

4- Abra o Fireworks, e desta vez ele abrirá normalmente, na velocidade normal dele. Com isso, ele criará novamente esta pasta com as configurações padrões dele e estrutura de pastas normal.

5- Você vai reparar, como dito anteriormente que o Fireworks abriu zerado, sem nenhuma personalização que você tinha feito anteriormente. Para resolver isso, volte na pasta antiga que você renomeou e entre nela.

6- Abra a pasta “Commands”, o caminho completo é (C:\Users\seu_usuário\AppData\Roaming\Adobe\Fireworks CS6\Commands)

7 – Dentro desta pasta você vai encontrar uma pasta chamada, “Workspace Layouts”. É dentro dela que se encontra seus espaço de trabalho personalizados com os nomes que você criou….

Copie esta pasta toda para a mesma pasta nova criada pelo Fireworks, inicie o programa e estarão lá novamente, bastando clicar na área de trabalho personalizada pra selecioná-lo novamente. Abaixo deixo a imagem do meu pra quem não souber onde se encontra poder entender…No meu caso crio com meu nome os espaços de trabalho, mas vocês podem dar o nome que quiserem.

Quem tiver a fim de conhecer as fontes originais de pesquisa do que estou falando podem visitar o link abaixo e se aprofundar no assunto…
http://helpx.adobe.com/fireworks/kb/restore-preferences-fireworks-cs5.html

Espero ter ajudado, até o próximo post….

SAIBA QUAL O MELHOR NAVEGADOR "NO SEU MICRO" LITERALMENTE.

Você sabe qual o melhor navegador para o seu micro? Estou falando deste micro ai mesmo, o seu de casa, o seu equipamento. Acredito que a maior parte do mundo já saiba da existência do nome “Navegadores” e que não existe somente o famigerado “Internet Explorer”, e que de todos ele é o pior. Existem vários outros como Google Chrome, Safari, Firefox, Firefox Nitghly, Opera, etc.

O que você provavelmente não sabe é que apesar de podermos avaliar os navegadores de forma genérica em relação ao seu desempenho, tendo idéias dos melhores, o ideal mesmo é saibamos qual o melhor navegador para o nosso computador pois o melhor navegador do mercado pode não funcionar como o esperado no seu micro.

Pensando nisso a Futuremark, empresa especializada nesse segmento desenvolveu um Site para avaliar o desempenho do seu navegador de forma real, no micro onde está instalado e desta forma você, através de benchmarks confiáveis poderá saber qual o melhor navegador para usar no seu micro baseado no desempenho durante sua navegação.

Não tenha medo de clicar, o botão é bem o escancarado no Site. Basta abrir o Site com o Navegador que deseja efetuar o teste e pronto, clique em “Test Your Browser GO” e acompanhe os testes feitos e aguarde o resultado.

O Site é http://peacekeeper.futuremark.com/

Você usa CSS Seletores? Não? Pois deveria.

Apesar de estarmos a pleno vapor com o CSS3 ainda existem profissionais que não utilizam toda a capacidade dos CSS Seletores existentes nas versões anteriores, mais antigas do CSS.

Trabalhando a pouco tempo atrás criando um Tema para Primefaces 5.0 a partir do ShowCase dele  no meu trabalho fui obrigado a rever alguns CSS Seletores que não trabalhava a algum tempo e divido agora com vocês estes pequenos grande amigos do Desenvolvedor Front-End ou Web Designer como preferirem chamar.

O Seletor  “*” – Asterisco.

O seletor * (asterisco) é possivelmente o mais conhecido da lista, mas isto não quer dizer que ele seja usado com a frequência que merece. Empregado isoladamente, ele pode especificar um estilo geral que abrange todos os elementos da página, ideal para resetar propriedades ou estabelecer padrões, como a fonte em uso no site.

Exemplo:

* {
margin: 0;
padding: 0;
font-family: helvetica, arial, sans-serif;
font-size: 16px;
}

 

A + B

Este seletor é chamado de seletor adjacente e o que ele faz é aplicar o estilo ao elemento B que vem imediatamente depois do elemento A. Por exemplo, se você deseja selecionar o primeiro parágrafo após um título…

h2 + p {
font-weight: bold;
}

 E o resultado seria:

<h2>Título</h2>
<strong><p>Este parágrafo fica em negrito.</p></strong>
<p>O seletor não se aplica ao segundo parágrafo.</p>

 

A > B

Este seletor aplica o estilo somente aos filhos diretos de A, ao contrário do mais famoso A B, que seleciona todos os níveis de filhos de A. Este seletor é recomendado quando você deseja criar um estilo apenas para o primeiro nível dos filhos de um determinado elemento.
Por exemplo, se você não deseja selecionar os elementos da sublista de uma lista principal, você deve empregar:
ul > li {
font-weight: bold;
}

E o resultado seria:

<ul>
<li><strong>Item em negrito</strong>
<ul>
<li>Item da sublista</li>
<li>Item da sublista</li>
<li>Item da sublista</li>
</ul>
</li>
<li><strong>Item em negrito</strong></li>
<li><strong>Item em negrito</strong></li>
</ul>

Se você tivesse optado pelo seletor ul li , os itens da sublista também teriam ficado em negrito.

 a[href*=”exemplo”]

Este seletor é uma carta na manga para quando você precisa que um determinado link tenha um estilo diferente dos outros. O seletor irá comparar o valor do atributo HREF com a string entre aspas e verificar se ela está presente antes de aplicar o estilo.
Por exemplo, para gerar um estilo para todos os links de uma página que levam para o Facebook:

a[href*=”facebook”] {
font-weight: bold;
}

E o resultado seria:

<strong><a href=”http://www.facebook.com”>Este link fica em negrito.</a></strong>
<a href=”http://www.google.com”>O seletor não se aplica a este link.</a>

Se você remover o * (asterisco) do seletor, ele irá procurar o valor exato da string na URL do link.

 

A:not(B)

Este seletor adiciona uma exceção ao elemento A. Na prática, o estilo é aplicado a todos os elementos A, exceto aqueles que sejam B. Por exemplo, se você quer selecionar todas as divs de uma página, menos aquela que fica no rodapé, você pode usar:

div:not(.footer) {
font-weight: bold;
}

E o resultado seria:

<strong><div>Esta div fica em negrito.</div>
<div>Esta div fica em negrito.</div>
<strong><div>Esta div fica em negrito.</div>
</strong></strong><div class=”footer”>Esta div não fica em negrito.</div>

 

A:first-child / A:last-child

Estes dois seletores permitem especificar o primeiro e o último filho de um elemento pai, respectivamente. Este seletor pode ser de uma ajuda inestimável para aplicar estilos ao primeiro item de uma lista, para remover margens de itens com float, para especificar bordas de colunas etc.
Por exemplo, para aplicar um estilo ao primeiro e ao último item de uma lista, nós usaríamos:

ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-weight: bold;
}

E o resultado seria:

<ul>
<li><strong>Item em negrito</strong></li>
<li>Item sem negrito</li>
<li>Item sem negrito</li>
<li><strong>Item em negrito</strong></li>
</ul>

A:nth-child(n)

Este seletor é uma variação do anterior, onde você especifica a posição do elemento filho dentro do elemento pai A.
Por exemplo, se você deseja selecionar apenas o terceiro item de uma lista, você pode usar:

ul li:nth-child(3) {
font-weight: bold;
}

E o resultado seria:

<ul>
<li>Item sem negrito</li>
<li>Item sem negrito</li>
<li><strong>Item em negrito</strong></li>
<li>Item sem negrito</li>
</ul>

Nós também podemos usar este seletor para múltiplos daquela posição, aplicando a variável n no final do número. Por exemplo, para selecionar os itens 3, 6, 9 e assim por diante de uma lista, nós usaríamos o seguinte CSS:

ul li:nth-child(3n) {
font-weight: bold;
}

A:nth-last-child(n)

Este seletor é uma variação do anterior, onde a contagem de filhos começa do último.
Por exemplo, se você deseja selecionar apenas o antepenúltimo item de uma lista, você pode usar:

ul li:nth-last-child(3) {
font-weight: bold;
}

A B:nth-of-type(n)

Este seletor pega o conceito de ordem estabelecido pelos seletores anteriores e mescla com tipos de elementos. Usando este seletor, você irá aplicar seu estilo ao elemento B que vem na posição n dentro do elemento A.
Por exemplo, para selecionar o terceiro parágrafo dentro de uma
você usaria:

div p:nth-of-type(3) {
font-weight: bold;
}

E o resultado seria:
<div>
<p>O seletor não se aplica ao primeiro parágrafo.</p>
<p>O seletor não se aplica ao segundo parágrafo.</p>
<strong><p>Este parágrafo fica em negrito.</p>
</strong><p>O seletor não se aplica ao quarto parágrafo.</p>
<div>

a:visited

Este talvez seja o mais antigo de todos os seletores vistos aqui. Tão antigo que já foi muito utilizado no passado e agora está quase completamente esquecido, gerando um problema sério de usabilidade…
Já reparou, ao fazer uma busca no Google, que as páginas que você já visitou aparecem com uma cor diferente? É exatamente isto o que este seletor faz.
Exemplo:

a:visited {
color: blue;
}
Conclusão
Memorizar a função de cada um destes seletores e aplicar a lógica na sua página pode economizar o uso indiscriminado de IDs para todos os lados, permitir a criação de exceções complexas e trazer uma flexibilidade ainda maior ao ainda útil e incompreendido CSS2.

 

fonte:

10 Seletores de CSS Que Você Deveria Usar