sexta-feira, 21 de novembro de 2014

Saiba qual a melhor distribuição do Linux para o seu computador/ notebook.








Existem muitas versões ou falando corretamente distribuições do Linux no mercado. Devido a esta grande variedade é muito comum as pessoas não saberem qual é a melhor para o seu caso ou para seu computador ou notebook. Se você for pesquisar na internet verá que existem horas infinitas de discussões sobre o assunto em sites, blogs e fóruns.  É gigantesca a quantidade de material pra leitura no assunto, sempre recheada de opiniões pessoais e tendenciosas pois quem gosta de uma determinada distribuição na maior parte dos casos defende fervorosamente a mesma de forma que no final sempre fica a dúvida.


Eu por exemplo gosto bastante do Ubuntu, mas existe muitas outras e pra você não ficar na dúvida existe um site com um questionário bastante imparcial que com meia dúzia de perguntas lhe ajuda a escolher a melhor distribuição para o seu caso. Com isso você não fica perdendo tempo procurando por ai esta informação preciosa na hora de decidir usar o linux em seu computador.
Não precisa ter conhecimento técnico nenhum para responder o questionário que nem sequer vai pedir a configuração de seu micro. Basta acessar o link abaixo e responder as perguntas e escolher a desejada, muito simples.
Até a próxima! :)

quarta-feira, 12 de novembro de 2014

Reveal in Sidebar Sublime Text - Linkando arquivo editado na Sidebar do Sublime text

Quando estamos trabalhando com uma arvore de projetos em nossos editores de código onde os arquivos possuem ramificação muito extensas ferramentas e plugins que produzem a função "Reveal in the Sidebar" ou traduzindo toscamente " mostrar este arquivo na barra lateral" é extremamente útil de forma a não termos de ficar localizando o arquivo em questão na estrutura de pastas da Sidebar geralmente localizada do lado
esquedo da maior parte dos IDE´s de desenvolvimento que temos hoje. 

Os únicos IDE´s que possuem essa função default que me lembro são o Eclipse e o WebStorm. Mas neste post vou mostrar uma solução para o Sublime Text que 
fará com que você usufrua desta facilidade. 

O Sublime text desde sua versão 2 já possui essa função nativa mas não de forma automática, você precisa clicar com o botão direito com o arquivo em questão aberto
em sua área de edição e clicar no opção "Reveal in the Sidebar" e ele lhe mostrará (imagem abaixo).



Outra solução mas pra quem gosta de códigos, é ir em "Preferênces -> Key Bindins - User" e inserir o seguinte código abaixo:
[
    { "keys": ["ctrl+shift+r"], "command": "reveal_in_side_bar"}
]



Com este código, ao clicar a as teclas conjugadas CTRL+SHIFT+R apenas uma vez você habilita esta função, podendo ver o arquivo em questão sendo destacado na Sidebar. 

Mas a solução para os mais preguiçosos mesmo é um plugin. Na verdade existem dois que vou deixar o URL aqui mas o que mais gostei sem sombra de dúvidas foi o 

Com ele sem compplicação nenhuma tudo funciona de forma automática como default, instalou e ele começa a funcionar imediatamente sem necessidade de 
reiniciar nem ficar fazendo nenhuma configuração e funciona maravilhosamente bem e muito rápidamente. Esse é o meu predileto que indico. 

O Segundo que nem cheguei a testar mas sei que precisa ativar é o Focus File on Sidebar (https://sublime.wbond.net/packages/Focus%20File%20on%20Sidebar)
Mas ai você tem de instalar pra testar você mesmo. 

Lembrando que pra instalar qualquer um dos dois basta no Editor Sublime Text, digitar as teclas CTRL+SHIFT+P e digitar "Install"
Quando a caixa de texto abrir na parte supoerior digite "SyncedSideBar" e ele aparecendo na primeira opção clique nele e se instalará sozinho. 

Obviamente você tem de ter o PackageControl no seu sublime text, sem ele nenhum plugin vai ser instalado. Não sabe o que é? Então neste caso deixo por sua conta
estudar um pouco sobre o editor pois vale à pena e vou estar lhe prestando um serviço melhor do que lhe dando tudo de bandeja...Vale à pena conhecer esse IDE que 
na minha opinião é o melhor que existe (sem competir com o Eclipse e Netbeans é claro). 

sábado, 23 de agosto de 2014

Como Colocar novos temas no WebStorm, o melhor editor de Textos JavaScript (e na minha opinião Angular JS) do mundo.

A pouco tempo comecei a me dedicar mais no estudo da Linguagem do Java Script. Tudo por causa do Angular JS, novo Framework criado por dois funcionários do Google Misko Hevery e Adams Abrons que em  2009 durante 3 semanas e com 1500 linhas de código, conseguiram perder uma aposta com seu chefe que conseguiriam em 2 semanas (grande derrota heim, o que uma semana a mais não faz, rsrsr) conseguiu transformar o JS em uma ferramenta que com certeza está revolucionando o uso do Java Script no mercado e no mundo de TI. Hoje o projeto é mantido pelo Google e como (quase) tudo que o Google põe a mão tá decolando. Mas depois desta curiosidade vamos ao que interessa....

Bom, desde que comecei sempre ouvi falar do WebStorm pra lá e pra cá..Pesquisando descobri que ele é de longe cotado como o melhor IDE JS do mundo. Como estou fazendo um Curso de Angular JS com o Rodrigo Branas, um fera da área e ele mesmo usava, resolvi dar uma chance pra ele e conhecer, deixando os amados Sublime Text e Brackets Sprint de lado. E não é que a ferramenta é boa mesmo!

Usando ele por dois dias achei muito boa as suas funcionalidades pra JS e ele possui integração nativa com o Angular que estão me deixando "de queixo caído", facilitando e viciando minha iniciação no AngularJS. Não deu outro, com uma semana lá fui eu desembolsando uma grana pra comprar sua última versão que neste momento está na 8.4. Você pode visitar o Site pra conhecer (http://www.jetbrains.com/webstorm/).

Na documentação oficial não encontrei sobre isso, então fui atrás das não oficiais. Pesquisando fontes alternativas descobri temas para o PHPWebStorm que contém arquivos ".JAR" para download.
http://ideacolorthemes.org/themes/

Depois de escolher o Tema do Sublime Text 3 eu baixei e descompactei o arquivo JAR de forma que criou pastas e dentro da pasta "colors" eu encontrei o esquema de cores do tema no formato .XML e joguei dentro da mesma pasta do meu perfil de usuário (no Windows) com o mesmo nome e ai dentro do WebStorm consegui escolher o esquema de cores dele. Deixo abaixo o passo a passo pra você poder fazer o mesmo.

1-Baixe o tema desejado do link:
http://ideacolorthemes.org/themes/
http://ideacolorthemes.org/home/


2-Depois descompacte o arquivo ".JAR" pois este arquivo é para o Webstorm PHP.
Dentro da pasta criada pega o arquivo ."XML" dentro da pasta "colors"

3-Vá para o seu perfil de usuário do windows e cole o arquivo ".XML" em questão dentro da pasta:
C:\Users\USUARIO\.WebStorm8\config\colors

Depois faça a busca dentro do seu WebStorm de duas formas:

A) File > Settings > Editor > Colors & Font

B)Clicando CTRL+SHIFT+A e digite "Colors & Font" para lhe mostrar esta opção.

Escolha o tema desejado que colou na pasta.

Para deixar a janela do programa escura, indico o tema Darcula, nativo do programa e a interface escolhida pra trabalhar indico a do Microsoft Visual Studio que é muito bonita. Ai ele fica igual abaixo:



Outras dicas:

Caixa de pesquisa:

Você pode acessar várias funcionalidades que deseja, usando as teclas de atalho pra abrir a caixa de diálogo de pesquisa (parecida com o Sublime Text). No Windows, use as teclas CTRL+SHIFT+A para abrir a caixa de diálogo. Digite o que busca no programa como "colors" por exemplo ou "font" e ele lhe mostrará as opções variadas para aquele item. Ele é bem fácil e intuitivo pra usar.


Teclas de atalho:
Você pode criar seus próprios atalhos para as coisas. Por exemplo para mudar o tamanho da fonte que acho bem pequena a default, basta que usando as teclas de atalho para a caixa de pesquisa digite "keymap". Ele vai lhe mostrar as opções para personalisar as teclas de atalho...Eu por exemplo criei a tecla de atalho "SHIFT+" para aumentar a fonte sem conflitos e "SHIFT-" para diminuir. Os Keymaps podem ser de grande ajuda.

Minimap:
Para quem como eu já tá acostumado com o Minimap do lado direito como no Sublime Text ou ATOM ou Brackets também tem como instalar ele no WebStorm. Para isso basta ir no instalador de plugins do programa, isso mesmo ele tem um. Ao invés de usar as teclas de atalho dessa vez indico o caminho padrão que é

File -> Setting

na caixa de diálogo, digite na pesquisa "plugins", na parte de baixo da janela clique em "Browse repositories"
o nome do plugin é "Code Glance". Depois de instalar reinicie e pronto está do lado direito como na imagem acima.

Conclusão.
Ainda estou fuçando mas ainda tem muito que descobrir do programa. Uma coisa com certeza posso afirmar que ele leva o título com louvor, merecido. Não coloco mais coisas pois ainda tem muito que fuçar. Deixo aqui dois links com dicas muito boas sobre ele, tudo em video.

https://www.youtube.com/watch?v=xIxDar8CbJA&index=8&list=PLQ176FUIyIUb0zTe7k4ZKkhMsR-slKu3w


https://laracasts.com/series/how-to-be-awesome-in-phpstorm/episodes/24

Espero que tenham gostado :)






















sábado, 18 de janeiro de 2014

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
        }
    ]
}]


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:


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...