tag:blogger.com,1999:blog-22443485629346949292024-03-13T19:33:46.659-07:00Thiago LúcioThiago Lúcio, Desenvolvedor Front-end e Webdesigner. Idéias, Tutoriais e contribuições.Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.comBlogger21125tag:blogger.com,1999:blog-2244348562934694929.post-20901874305338419592020-12-18T07:55:00.010-08:002020-12-18T08:06:12.193-08:00O que eu aprendi no ano de 2020 como Dev e Pessoa.<p style="text-align: center;"></p><a href="https://static.quizur.com/i/b/588cdc82e5c101.95932556588cdc82cc37f9.90496030.jpg" style="margin-left: 1em; margin-right: 1em; text-align: justify;"><img border="0" data-original-height="480" data-original-width="640" src="https://static.quizur.com/i/b/588cdc82e5c101.95932556588cdc82cc37f9.90496030.jpg" /></a><br /><br /><span style="text-align: justify;"> </span><br /><strong style="text-align: justify;">Sim.</strong><span style="text-align: justify;"> </span><strong style="text-align: justify;">Não</strong><span style="text-align: justify;"> existe uma segunda personalidade em mim que se transforma em um Profissional e quando acaba o trabalho se torna o eu pessoal. Isso é loucura pra mim e se chama "Dupla Personalidade". Mas vamos lá. Este texto não será um texto técnico como na maior parte das vezes então se está interessado só nisso acho que vai perder o seu tempo. É uma reflexão pessoal (e opinião também).</span><br /><h4 style="text-align: justify;">O que aprendi com o ano de 2020 como Desenvolvedor:</h4><p style="text-align: left;">Que a demanda alucinada do mercado de TI é uma ilusão (pois os novatos não tem vez).<br /><br />Que só existe Dev nível Sênior pra cima.<br /><br />Que a Síndrome do Impostor é a melhor amiga e maior inimiga do Dev.<br /><br />Que Flatpaks são muito melhores que Snaps.<br /><br />Que as línguagens e frameworks e suas modinhas prevalecem sobre o valor do produto.<br /><br />Que cursos gratuitos de Desenvolvimento são uma armadilha.<br /><br />Que o que era velho é novo e o que é novo será velho.<br /><br />Que trabalhar remoto é muito mais produtivo e que se você não tomar cuidado nunca irá parar de trabalhar.<br /><br />Que os recrutadores do segmento de TI estão atormentados na procura por profissionais e as empresas estão se aproveitando deles. Os profissionais também. <br /><br />Que o "home office" pode ou será muito mais confortável e bem equipado que sua mesa na empresa (mesmo que seja com o tempo).<br /><br />Que ter Cachorros é mais importante pra você do que para o Cachorro.<br />Trabalhar em casa pode fortalecer ainda mais seu casamento.<br />Que não preciso mais de uma IDE parruda, talvez nem mesmo uma IDE para trabalhar.<br /><br />Que a palavra "inovação" e "disruptivo" são uma obsessão e ambas estão sendo usadas da mesma forma e muito mal usada assim como a palavra "urgente" e quando tudo é urgente, nada é urgente. Poucas são as pessoas que conhecem bem estas palavras e conforme o tempo vai passando as distâncias para se ser disruptivo e inovador estão ficando cada vez mais curtas entre o que já existe e o que é considerado "inovador".<br /><br />Tempo é sem dúvida a coisa mais importante do mundo. Agora também é a moeda mais valiosa que existe e isso vai ser cada vez mais importante.<br /><br />Que não existe o segmento de Front-end e Back-end. Só existe Full-stack porque as descrições das vagas agora possuem um "Diferencial" que você deve entender como "Fundamental" ou "Imprescindível". E se você é um Front-end tem de saber desenvolver API's, configurar as aplicações na AWS, manjar de Docker, Heroku, Kubernetes, Testes automatizados, Testes unitários, PostGress, mySQL, PHP, e ter noções de paradigmas de arquitetura e tem de saber deixar uma aplicação rodando no ar em produção depois de configurar o ambiente Dev e homologação fazendo deploy e build com semaphore e Jenkins. Não esqueça também de fazer toda documentação pra compôr aquela "Colcha de retalhos" no final do projeto (Confluence). Tudo dentro da mais impressionante performance declaradas nos Sistemas Ágeis.<br /><br />Se você for Back-end, o seu "Diferencial (ah!)" é saber implementar styled Components, TalwindCSS, Less, Sass, CSS, fazer protótipos no Figma e editar algumas imagens no Photoshop ou no Gimp(porque vc usa linux), também saber todo o restante descrito antes no Front-end e mais um pouco.</p><h2 style="text-align: left;"><br /><span style="text-align: justify;">O que acredito para 2021 (...em diante)</span></h2><p></p>
<!--/wp:list--><figure class="wp-block-image size-large" style="text-align: justify;"><img alt="" src="https://phaedrusrides.files.wordpress.com/2013/04/jim_carrey_me_myself__irene_003.jpg" /></figure>
<!--/wp:paragraph-->
<!--wp:heading {"level":3}-->
<!--/wp:heading-->
<!--wp:image {"sizeSlug":"large"}-->
<!--/wp:image-->
<!--wp:list-->
<ul style="text-align: left;"><li><strong style="text-align: justify;">O modelo Home office será o modelo de TI:</strong></li></ul>
<!--/wp:list-->
<!--wp:paragraph-->
<p style="text-align: left;"><span style="text-align: justify;">Salvo algumas funções específicas, o modelo de "Home Office" será o modelo padrão. Por mais força que se faça para contrariar a razão, tanto pelas empresas ortodoxas quanto por profissionais que não gostam do modelo de "Home Office", na minha humilde opinião vai ser o padrão para TI, mais ainda Desenvolvedores.<br /></span><span style="text-align: justify;">As empresas que insistirem nisso perderá para outras empresas toda sua força Sênior (salvo os que gostam do modelo tradicional) para outras empresas. Inclusive pagando mais neste processo, porque o fato de trabalhar em casa não justifica pagar menos pelo profissional até memso porque sinceramente hoje, no início do processo ele trabalha mais do que no escritório até esse processo de trabalho em casa se tornar mais maduro, isso ocorre naturalmente só que de forma mais agradável. Mas o modelo de trabalho em casa é melhor em vários sentidos e depois de experimentar coisas melhores, voltar para as piores sem uma necessidade realmente relevante não tem mais como. Não tem como lutar contra fatos.</span></p><p style="text-align: left;"><span style="text-align: justify;"><br /></span><span style="text-align: justify;">Não preciso entrar em detalhes porque todos ai já devem saber os benefícios. Mas a maior produtividade é um fato e não adianta colocar a culpa nas crianças, porque se em algum caso elas estão atrapalhando o trabalho é por culpa dos responsáveis que não sabem administrar isso direito (ainda) ou por conta do fato de não estarmos tendo Aulas nas Escolas. Porque, quando os Pais trabalhavam nas empresas, onde as crianças ficavam?</span></p><p style="text-align: left;"><span style="text-align: justify;"><br /></span><span style="text-align: justify;">Eu fiz um calculo por baixo este ano e com certeza no modelo Home office meu tempo ganho com produtividade aumentou em 40% fácil. É realmente impressionante como perde-se tempo fazendo coisas banais como ir ao trabalho. E não somente o tempo de ida e volta mas o tempo que você leva para "aquecer" e estar realmente produzindo. Estou falando de chegar no escritório, tomar o cafezinho, conversas preliminares até sentar e estar realmente produzindo. O Rito matinal para produtividade se tornou algo particular e pessoal e isso acelera tudo, o ambiente, os equipamentos que você escolhe pra você e a empresa não tem como fazer isso personalizado e faz toda diferença também. Outra questão é as interrupções que são menos frequêntes e com hora marcada geralmente. São vários fatores mas nem vou entrar em detalhe aqui porque hoje não é mais novidade pra ninguém. Apenas vou dizer que o cuidado com a organização do tempo, estudo e evolução são duplamente necessários, neste ponto é fácil se perder mas o fato de ter de cuidar disso faz com que você se torne um profissional melhor.</span></p><p style="text-align: left;"><span style="text-align: justify;"><br /></span><span style="text-align: justify;">Outro fator importante é que remotamente percebi um interesse maior entre os profissionais de desenvolvimento em entender o negócio do projeto onde trabalham e não somente sentar pra codar. Alguns vão argumentar que no ambiente de trabalho as pessoas interagem mais. Eu concordo até certo ponto. Nas empresas onde trabalhei os desenvolvedores ficavam o tempo todo com fones de ouvido, tentando e lutando para se concentrar no que estavam fazendo. A maior parte não gostava de ser interrompido de forma pessoal e a maioria pedia para mesmo estando a 4 metros de distância dele mandasse mensagem pela ferramenta oficial da empresa, como o slack ou whats, etc. Na maior parte das vezes também não respondiam na hora, porque não olhavam nos seus talkers com frequência, sabiam que se fosse urgente, alguém iria lá na sua mesa lhe "incomodar". Agora, remotamente todos respondem mais rapidamente porque ficam de olho nos talkers e além de justificar esse comportamento, agora é feito com mais eficiência e velocidade.</span></p><p style="text-align: left;"><span style="text-align: justify;"><br /></span><span style="text-align: justify;">O fato de estarmos isolados também nos está fazendo ser mais interativos e resilientes, não somente com nosso time mas com outros projetos, as comunidades. O aprendizado também está sendo feito com maior qualidade porque com menos interrupções, mesmo demorando mais por não termos ali pessoas do lado pra perguntar, fazemos isso com mais concentração, com mais cuidado e qualidade e com isso aprendemos de forma mais sólida, errando menos e quando metendo a mão na massa fazendo com mais qualidade nosso trabalho.<br /></span><span style="text-align: justify;">Então, você pode não concordar comigo mas aposto minhas fichas nisso. As empresas também ganham em vários fatores. Entregas no prazo, menos custos com mobiliários, economia enorme com água e luz entre vários outros fatores. Com isso temos inclusive uma expansão no conceito de trabalho presencial. O Coworking pode se tornar uma prática muito mais saudável que uma empresa. A empresa pode abrir mão de um ambiente corporativo e contratar mensalmente um espaço no Coworking e com isso não somente disponibilizar um espaço para trabalho presencial para seus times mas também fazer com que seu time conviva com times de outras empresas, expandindo o networking, conectando pessoas e idéias, criando parcerias possíveis entre muitos outros fatores.</span></p><p style="text-align: justify;">O mundo está mudando. De toda tristesa que surgiu com o Corona Vírus, muitas coisas boas virão na minha visão. O Ser-humano tem essa característica, ele evolui muito mais na desgraça que na alegria. Somos seres naturalmente acomodados, atribulações são o que move nossa espécia pro caminho certo ou melhor.</p><p style="text-align: justify;"><br /></p>
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:list-->
<ul style="text-align: left;"><li><strong style="text-align: justify;">O dinheiro físico vai começar seu caminho de extinção:</strong></li></ul>
<!--/wp:list-->
<!--wp:paragraph-->
<p style="text-align: left;"><span style="text-align: justify;">Tirando o processo de injeção de grana na economia usada pelos Bancos Centrais que também faz parte dessa mudança e tem enorme interesse, nosso processo de uso de dinheiro impresso já perdeu o sentido. Apenas nossa resiliência mantém ele funcionando mas ele vai acabar. Não posso afirmar que será em 2021, mas muito provavelmente esse processo vai iniciar com mais força esse ano. Para os Governos o custo é quase zerado com relação a criação de dinheiro, o controle é muito maior. Transações eletrônicas não tem como esconder em 95% dos casos. Portanto o recebimento de tributos é muito mais eficiente, incluindo Imposto de Renda, etc. É um movimento natural que acho que não tem jeito.<br /></span><span style="text-align: justify;">Se você acha que eu estou falando besteira basta pesquisar no Youtube rapidamente vai ver milhares de vídeos por ai. Vou até deixar um bem relevante e curto de 2017 do influente José Gomes Ferreira.</span></p><iframe allowfullscreen="" class="BLOG_video_class" height="388" src="https://www.youtube.com/embed/PQV8xQnQ-Dg" width="465" youtube-src-id="PQV8xQnQ-Dg"></iframe><br /><br /><figure class="wp-block-embed is-type-rich is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio" style="text-align: left;"><div class="wp-block-embed__wrapper" style="text-align: justify;"><br /></div></figure>
<!--/wp:paragraph-->
<!--wp:embed {"url":"https://www.youtube.com/watch?v=PQV8xQnQ-Dg","type":"rich","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"}-->
<!--/wp:embed-->
<!--wp:list-->
<ul style="text-align: left;"><li><strong style="text-align: justify;">A profissão de Programador vai acabar então comece a se preparar para isso:</strong></li></ul>
<!--/wp:list-->
<!--wp:paragraph-->
<span style="text-align: justify;">Na minha visão o programador somente existe porque as inteligências artificiais não conseguem trabalhar direito com abstrações. Mas com a evolução cada vez maior das tecnologias em Ciência de Dados e IOT, a convergência entre estes pontos além de ser ascendente vai transformar o programador de hoje em algo obsoleto. Os frameworks vão inflar, as complexidades vão aumentar e as Inteligências artificias e suas tecnologias vão se disseminar no mercado de forma vertiginosa e em breve elas farão os programas, elas irão programar baseadas em parâmetros e também nos cruzamentos de dados chegando as suas próprias conclusões até o ponto que elas por conta própria criaram aplicativos, sistemas porque perceberam antes de nós a necessidade dele. As novas necessidades surgiram e boom, uma solução nova será criada para atender isso. Você vai achar isso normal. Como olhar as horas porque quer saber que horas são.</span><br /><span style="text-align: justify;">Como desenvolvedor deve-se começar a investir nesse entendimento agora, para que você possa fazer sua transformação de forma fluida, leve e principalmente, a tempo porque ele agora anda muito mais rápido, não é mais ditado por nós como sociedade e sim pela velocidade da tecnologia e ela é muito mais veloz do que podemos imaginar porque ela duplica sua velocidade conforme vai se evoluindo, então aceita que esta profissão é assim, que a Síndrome do impostor é sua amiga e toca ficha.</span><div><div style="text-align: justify;"><br /></div><strong style="text-align: justify;">A Pandemia talvez nos tenha salvado à longo prazo</strong><span style="text-align: justify;">:</span></div><div><div style="text-align: justify;"><br /></div><p style="text-align: left;"><span style="text-align: justify;">A imprensa em geral fica romantizando as relações humanas e como as pessoas querem voltar a normalidade. Mas o que eu ando vendo não é isso. O que eu ando vendo é um mundo dando uma freiada e as pessoas gostando disso.<br /></span><span style="text-align: justify;">Menos de muita coisa ruim da superpopulação e da loucura desenfreada do consumismo. E isso pra mim é um fato. O cosumismo diminuiu. Se tornou mais saudável. Muita coisa ruim aconteceu, com os negócios e com a economia mas a longo prazo, na minha opinião, nosso formato de consumo, não se sustenta. Não passaríamos pelo "grande filtro" do "Paradoxo de Fermi" se continuássemos assim. No cenário onde vamos consumir todos os recursos que existirem no nosso ambiente até que sejamos extintos. O que eu acho é que a Pandemia iniciou o freio desse pensamento nas pessoas, pelo menos em grande parte delas, pararam pra refletir sobre isso em suas vidas e isso vai se refletir no nosso futuro. Isso tudo é uma viagem sem drogas, mas se você deixar de lado e pensar nisso com seriedade alguma parte de você vai concordar com essa possibilidade. Eu acho que 2021 vai ser pra mim, um ano onde muitas dessas reflexões vão começar a fazer parte de nosso comportamento, dos negócios e do consumo como um todo. Eu tenho essa esperança.</span></p><p style="text-align: left;"><strong style="text-align: justify;">Disclaimer</strong><span style="text-align: justify;">:</span></p><p style="text-align: left;"></p><div style="text-align: justify;">Não estou aqui escrevendo pra agradar a todos. Essa é uma visão ainda não completamente formulada na minha mente. Tudo é muito dinâmico hoje mas o início desse pensamento veio à minha mente e queria escrever essas reflexões antes de virar o ano né. Não fique bravo comigo se tiver outra opinião, isso realmente é muito chato. Gaste seu tempo refletindo porque você fica zangado com opiniões diferentes da sua se for esse o caso. Vai ganhar muito mais com isso.</div><p></p>
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<!--/wp:paragraph-->
<!--wp:paragraph-->
<p></p>
<!--/wp:paragraph--></div>Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-61774409897388991902020-06-07T14:55:00.002-07:002020-06-07T14:56:56.925-07:00Map, Filter e Reduce: Explicando de forma Simples. <p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Eu sempre vejo o pessoal se perguntando quando usar map, reduce ou filter então mesmo tendo muita coisa por aí falando sobre resolví criar este post explicando da forma mais simples possível e quem sabe ajudar você(s) nisso e ainda fixar melhor o conceito.</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">É importante reforçar que existem:<br />“Arrays, representados por []”<br />“Objetos ou listas, representados por {}”</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Basicamente…</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">MAP</span> : Corre/ pega/ mapeia cada um dos elementos do array e te retorna aplicando uma determinada regra um novo Array sempre com o mesmo tamanho.</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">No exemplo abaixo eu estou pegando cada um dos elementos do Array Inicial e multiplicando cada elemento dele por 2.</p><figure class="wp-block-image size-large" style="background-color: white; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 1em;"><img alt="" class="wp-image-304" data-attachment-id="304" data-comments-opened="1" data-image-description="" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="map-image-1" data-large-file="https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png?w=550" data-medium-file="https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png?w=300" data-orig-file="https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png" data-orig-size="550,400" data-permalink="https://thiagolucioweb.wordpress.com/map-image-1/" sizes="(max-width: 550px) 100vw, 550px" src="https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png?w=550" srcset="https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png 550w, https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png?w=150 150w, https://thiagolucioweb.files.wordpress.com/2020/06/map-image-1.png?w=300 300w" style="height: auto; max-width: 100%; vertical-align: middle;" /></figure><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Codificando ficaria:</p><pre class="wp-block-code" style="background: rgb(245, 245, 245); border: 0px; font-family: "courier 10 pitch", courier, monospace; font-size: 19px; line-height: 1.78947; margin-bottom: 34px; margin-top: 0px; max-width: 100%; outline: 0px; overflow: auto; padding: 34px; vertical-align: baseline;"><code style="border: 0px; font-family: monaco, consolas, "andale mono", "dejavu sans mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 1.78947; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">const array = [2,4,5,10,8,1];
function dobro(num) {
return num * 2
}
const novoArray = array.map(dobro);
console.log(novoArray);
// o retorno deverá ser [ 4, 8, 10, 20, 16, 2 ]</code></pre><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">FILTER</span>: Basicamente corre os elementos de um array implementando as regras para lhe gerar outro Array com os resultados desta filtragem. Este array não necessáriamente precisa ser do mesmo tamanho.</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">No exemplo abaixo o filtro é aplicado em um Array, selecionando aqueles elementos que são maiores ou iguais a 5. Com isso temos os retornos “true” somente para 3 posições do Arrray, a 2, 3 e 4.</p><figure class="wp-block-image size-large" style="background-color: white; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 1em;"><img alt="" class="wp-image-307" data-attachment-id="307" data-comments-opened="1" data-image-description="" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="filter-image" data-large-file="https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png?w=550" data-medium-file="https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png?w=300" data-orig-file="https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png" data-orig-size="550,400" data-permalink="https://thiagolucioweb.wordpress.com/filter-image/" sizes="(max-width: 550px) 100vw, 550px" src="https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png?w=550" srcset="https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png 550w, https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png?w=150 150w, https://thiagolucioweb.files.wordpress.com/2020/06/filter-image.png?w=300 300w" style="height: auto; max-width: 100%; vertical-align: middle;" /><figcaption style="margin-bottom: 1em; margin-top: 0.5em;">Literalmente um filtro.</figcaption></figure><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Codificando, ficaria:</p><pre class="wp-block-code" style="background: rgb(245, 245, 245); border: 0px; font-family: "courier 10 pitch", courier, monospace; font-size: 19px; line-height: 1.78947; margin-bottom: 34px; margin-top: 0px; max-width: 100%; outline: 0px; overflow: auto; padding: 34px; vertical-align: baseline;"><code style="border: 0px; font-family: monaco, consolas, "andale mono", "dejavu sans mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 1.78947; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">const array = [2,4,5,10,8,1];
function regraDoFiltro(num) {
return num >= 5
}
const novoArray = array.filter(regraDoFiltro);
console.log(novoArray);
// resultado esperado 5,10,8</code></pre><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-style: inherit; font-weight: 700; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">REDUCE</span>: Vai correr os elementos de um Array os somando. Para isso ele usa dois parâmetros. Um acumulador e o próximo elemento do Array.</p><div style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="syntaxhighlighter plain" id="highlighter_634514" style="border: 0px; font-family: inherit; font-size: 1em; font-style: inherit; font-weight: inherit; margin: 1em 0px; outline: 0px; overflow: auto hidden; padding: 0px; position: relative; vertical-align: baseline; width: 696px;"><table border="0" cellpadding="0" cellspacing="0" style="background: none; border-radius: 0px; border-spacing: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; table-layout: auto; top: auto; vertical-align: baseline; width: 696px;"><tbody style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><tr style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><td class="gutter" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; color: #afafaf; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-bottom-color: initial !important; border-bottom-style: initial !important; border-bottom-width: 0px; border-image: initial !important; border-left-color: initial !important; border-left-style: initial !important; border-left-width: 0px; border-radius: 0px; border-right: 3px solid rgb(108, 226, 108); border-top-color: initial !important; border-top-style: initial !important; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px 0.5em 0px 1em; position: static; right: auto; text-align: right; top: auto; vertical-align: baseline; white-space: pre; width: auto;">1</div></td><td class="code" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: 644px;"><div class="container" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: relative; right: auto; top: auto; vertical-align: baseline; width: auto;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; float: none; font-size: 1em; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px 1em; position: static; right: auto; top: auto; vertical-align: baseline; white-space: pre; width: auto;"><code class="plain plain" style="background: none; border-radius: 0px; border: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; direction: ltr; display: inline; float: none; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; height: auto; left: auto; line-height: 1.1em; margin: 0px; outline: 0px; overflow: visible; padding: 0px; position: static; right: auto; top: auto; vertical-align: baseline; width: auto;">(acumulador, elemento) </code></div></div></td></tr></tbody></table></div></div><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Esse acumulador poderá ser um array ou objeto ou string ou número ou qualquer coisa que você queira colocar pra esse acumulador. O Elemento será cada um dos elementos do Array que está sendo aplicado o reduce.</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Se não existir um valor inicial ele utilizará os dois primeiros elementos do Array para inicializar as operações de reduce.</p><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">No exemplo abaixo bastante simples, faço um reduce em cima de um Array onde inicializo o valor do acumulador com “0”. Ele vai efetuando a soma de todos os elementos do array junto ao acumulador.</p><figure class="wp-block-image size-large" style="background-color: white; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 1em;"><img alt="" class="wp-image-322" data-attachment-id="322" data-comments-opened="1" data-image-description="" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="reduce-image" data-large-file="https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png?w=515" data-medium-file="https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png?w=300" data-orig-file="https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png" data-orig-size="515,474" data-permalink="https://thiagolucioweb.wordpress.com/reduce-image/" sizes="(max-width: 515px) 100vw, 515px" src="https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png?w=515" srcset="https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png 515w, https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png?w=150 150w, https://thiagolucioweb.files.wordpress.com/2020/06/reduce-image.png?w=300 300w" style="height: auto; max-width: 100%; vertical-align: middle;" /></figure><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Neste caso acredito que o código puro mesmo deixe mais fácil entender…</p><pre class="wp-block-code" style="background: rgb(245, 245, 245); border: 0px; font-family: "courier 10 pitch", courier, monospace; font-size: 19px; line-height: 1.78947; margin-bottom: 34px; margin-top: 0px; max-width: 100%; outline: 0px; overflow: auto; padding: 34px; vertical-align: baseline;"><code style="border: 0px; font-family: monaco, consolas, "andale mono", "dejavu sans mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 1.78947; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre class="wp-block-code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.78947; margin-bottom: 34px; margin-top: 0px; max-width: 100%; outline: 0px; overflow: auto; padding: 34px; vertical-align: baseline;"><code style="border: 0px; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: 1.78947; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">const array = [2,4,5,10,8,1];
// a = acumulador e b = elemento
a = 0;
function somar(a,b) {
return a + b
}
const novoArray = array.reduce(somar)
console.log(novoArray);
// resultado esperado 30</code></pre><pre class="wp-block-code" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 0px; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.78947; margin-bottom: 34px; margin-top: 0px; max-width: 100%; outline: 0px; overflow: auto; padding: 34px; vertical-align: baseline;"><br /></pre></code></pre><p style="background-color: white; border: 0px; font-family: georgia, times, "times new roman", serif; font-size: 23px; margin: 0px 0px 34px; outline: 0px; padding: 0px; vertical-align: baseline;">Boa Quarentena pra todos, fiquem bem!<br /></p>Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-54222166375254762912019-10-01T15:41:00.001-07:002019-10-01T15:41:31.363-07:00Instalando OpenJDK 8 no Ubuntu 19.10 e Superior ( Install OpenJDK 8 on Ubuntu 19.10 )<div class="separator" style="clear: both; text-align: center;">
<a href="https://thiagolucioweb.files.wordpress.com/2019/10/java-8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="232" data-original-width="217" src="https://thiagolucioweb.files.wordpress.com/2019/10/java-8.jpg" /></a></div>
<br />
<br />
Para você que está com a nova versão do Ubuntu 19.10 e começou a instalar programas e viu que o antigo método de instalação do Java 8 não está funcionando então essa dica aqui é pra você. Agora as coisas são um pouco diferentes e vc terá de instalar o pacote JDK8 de outra forma. Eu não sei você mas a maior partes das aplicações que trabalho dão problemas com qualquer versão do JDK maior que 8. Vamos lá, rapidinho...<br />
<br />
sudo add-apt-repository ppa:openjdk-r/ppa<br />
sudo apt-get update<br />
sudo apt-get install openjdk-8-jdk<br />
<br />
Pronto. Agora o JDK 8 já está instalado em sua máquina.<br />
<br />
Para conferir rode no terminal...<br />
<br />
java -version<br />
<br />
Deverá retornar ...<br />
<br />
openjdk version "1.8.0_232-ea"<br />
OpenJDK Runtime Environment (build 1.8.0_232-ea-8u232-b04-0ubuntu6-b04)<br />
OpenJDK 64-Bit Server VM (build 25.232-b04, mixed mode<br />
Espero ter ajudado!<br />
<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-55025634103497361452017-03-04T14:51:00.004-08:002017-03-04T14:51:30.886-08:00Alterando teclas de Atalho no Editor de códigos ATOM Já tem um bom tempo que publiquei um post sobre o Editor Atom, dicas legais pra quem tá começando (se ainda não viu veja aqui... <a href="https://thiagolucioweb.wordpress.com/2015/06/21/dicas-fundamentais-para-atom-editor-snippets-extensoes-temas-personalizacao/">https://thiagolucioweb.wordpress.com/2015/06/21/dicas-fundamentais-para-atom-editor-snippets-extensoes-temas-personalizacao/</a>).<br />
<br />
<div style="text-align: justify;">
De lá pra cá o Editor mudou muito, e melhorou muito mesmo. Hoje temos no Atom um Editor (quase IDE) mais robusto, mais rápido e muito mais personalizável. As atualizações são muitos mais constantes que antes com muito mais pessoas na comunidade de contribuição ativas e com isso o ATOM tem ganhado cada vez mais espaço no mercado de Editores de Código. Fico muito feliz como membro ativo do ATOM quando vejo algum amigo da área usando e ele brilhando na tela da máquina de alguém. A concorrência continua acirrada, VSCode, Sublime Text, Brackets mas mesmo assim ainda acho o ATOM um grande Editor, mais livre pra usar e personalizar. Isso pra mim é fundamental, poder personalizar o máximo possível a ferramenta de trabalho do dia a dia. O pessoal do núcleo de desenvolvimento do ATOM no Github tá realmente de parabéns, fazendo um excelente trabalho.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bom, mas deixando os elogios de lado. Estou postando hoje um pedido de um leitor, o Andreas que sugeriu postar sobre como mudar as teclas de atalho no Editor. Coisa que segundo ele mesmo falou ser muito fácil no Sublime Text. Mas no ATOM não é diferente, ouso dizer que é ainda mais fácil nele. Mas vamos direto ver como isso pode ser feito.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O ATOM, possui em suas configurações (settings) um arquivo onde mostra todos os atalhos do Editor, não somente os nativos mas também os atalhos referentes aos plugins (packages) que você instalou nele.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Após entrar em "Settings"(menu superior(linux) -> Edit -> Preferences/ (windows) File -> Preferences), escolha a opção "keybindings", na sidebar esquerda do menu Settings. Veja a imagem abaixo:</div>
<div style="text-align: justify;">
<a href="https://thiagolucioweb.files.wordpress.com/2017/03/keybindings.jpg"><img alt="keybindings" class="aligncenter wp-image-254 size-large" height="472" src="https://thiagolucioweb.files.wordpress.com/2017/03/keybindings.jpg?w=696" width="696" /></a></div>
<div style="text-align: justify;">
Nesta "página" existe a lista com todas as teclas de atalho do ATOM para todas as funções, nativas ou plugins dele onde, na primeira coluna você possui o atalho, na segunda coluna você possui o comando que é executado com esta tecla de atalho. Na terceira coluna você possui a descrição da funcionalidade ou package a que se refere o comando e o atalho. A quarta coluna é referente ao seletor do atalho, é através dele que o comando é acionado e identificado no editor. A lista é grande então pra ajudar existe um campo de pesquisa para facilitar a busca pela ação desejada.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vou seguir com o processo de mudança, para que possam saber como é o procedimento passo a passo. Vou escolher um package que tenho instalado no ATOM, se chama "open in browser". Basicamente ele permite que ou clicando com o botão direito do mouse sobre o arquivo desejado ou usando uma tecla de atalho, você abra o arquivo desejado em seu browser default do sistema. No Sublime text por exemplo uso essa mesma ferramenta através da tecla F12. Vou efetuar essa alteração...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
No campo de pesquisa digitei o nome... (nem precisou ser completo):</div>
<div style="text-align: justify;">
<a href="https://thiagolucioweb.files.wordpress.com/2017/03/pesq-open-browser.jpg"><img alt="pesq-open-browser" class="aligncenter wp-image-255 size-full" height="300" src="https://thiagolucioweb.files.wordpress.com/2017/03/pesq-open-browser.jpg" width="1300" /></a></div>
<div style="text-align: justify;">
Ele já me retornou a listagem dele. Repare que ele já consta duas ocorrências. Na verdade isso ocorre porque a segunda que é a destacada porque é das duas a que está ativa já consta a alteração que vou mostrar para vocês. Se eu ainda não a tivesse feito, apareceria somente a original que é a da primeira linha. Após feita as alterações que vou mostrar aqui, esta segunda linha mostrada na imagem acima vai passar a constar também (ou caso prefira outra tecla de atalho vai aparecer ela na primeira coluna).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se você observar mais detalhadamente a imagem acima vai ver a mensagem logo abaixo do título "Keybindings" a mensagem "Você pode subscrever estas teclas de atalho copiando e colando as mesmas no seu arquivo de mapa de teclado" (só que em inglês). Bastaria clicar no trecho em azul para ser levado para o arquivo onde vamos aplicar as alterações. Mas você pode acessar ele diretamente indo no menu superior:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Windows - > File -> Keymap</div>
<div style="text-align: justify;">
Linux -> Edit -> Keymap</div>
<div style="text-align: justify;">
MacOS - > (sei não irmão..rsrsrs)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Uma vez o Arquivo aberto, você vai poder ver que já existe um pequeno tutorial mostrando como alterar ou adicionar novas configurações de atalho. Leia com atenção que já dá pra entender facilmente mas ... no nosso exemplo, vamos mudar então o "open in browser"</div>
<div style="text-align: justify;">
Ao final dos comentários você adiciona a seguinte linha:</div>
<br />
<pre>'atom-text-editor':
'f12':'open-in-browser:open'</pre>
<pre>
</pre>
Explicando o comando acima:<br />
<br />
<pre>'atom-text-editor': //Ele é o seletor onde o atalho deverá ser aplicado ( a quarta coluna, lembra?).</pre>
<pre>'f12':'open-in-browser:open' //Estamos atribuindo a tecla f12 : ao comando open-in-browser</pre>
<br />
Salve as alterações e nem precisa reiniciar o editor, já está funcionando as alterações!<br />
<br />
Este mesmo procedimento, seguindo estes mesmos passos também serve para outros atalhos, tanto do core do editor quanto de outros plugins que você tenha instalado.<br />
<br />
Você pode obter mais informações sobre keymaps nos endereços abaixo, ai pode ir mais à fundo nisso:<br />
<br />
https://atom.io/docs/latest/using-atom-basic-customization#customizing-key-bindings<br />
https://atom.io/docs/latest/behind-atom-keymaps-in-depth<br />
<br />
<br />
<br />
Grande abraço!Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-60966790503543398502017-01-22T07:55:00.000-08:002017-01-22T07:55:55.288-08:00<div style="text-align: center;">
<a href="https://thiagolucioweb.files.wordpress.com/2017/01/neofetch-trademark.jpg"><img alt="neofetch-trademark" class="aligncenter size-medium wp-image-230" height="190" src="https://thiagolucioweb.files.wordpress.com/2017/01/neofetch-trademark.jpg?w=300" width="300" /></a></div>
<div style="text-align: justify;">
Muitas pessoas já devem ter ouvido falar o Screenfetch, que incrementa o terminal do Linux com informações do sistema e a logo trademark dele, geralmente chamado de trademark bench system por além de mostrar a logo do sistema também informa os dados do sistema. O mais famoso é o Screenfetch, inclusive já fiz um post sobre ele anteriormente<br />
<br />
(<a href="https://thiagolucioweb.wordpress.com/2016/04/03/screenfetch-seu-terminal-linux-incrementado-com-logo-da-distro/">https://thiagolucioweb.wordpress.com/2016/04/03/screenfetch-seu-terminal-linux-incrementado-com-logo-da-distro/</a>).<br />
<br /></div>
<div style="text-align: justify;">
Agora trago outro concorrente que tem se demonstrado bastante eficiente e com desempenho melhor, mais personalizável e mais bonito (porque não). Então sem mais delongas, como instalamos esta foforização no nosso sistema Linux. Primeiro você tem de baixar o programa e instalar. Existem duas formas pra isso.</div>
<div style="text-align: justify;">
Baixar por linha de comando repo no Terminal do seu Linux (Ubuntu e Mint):</div>
<br />
<pre>$ sudo add-apt-repository ppa:dawidd0811/neofetch
$ sudo apt-get update
$ sudo apt-get install neofetch</pre>
Linha de Comando se o seu Sistema for Apenas Debian:<br />
<pre>$ sudo add-apt-repository ppa:dawidd0811/neofetch
$ sudo apt-get update
$ sudo apt-get install neofetch
</pre>
Caso você prefira pode baixar o arquivo .deb diretamente no repositorio PPA:<br />
<br />
<a href="https://launchpad.net/ubuntu/+archive/primary/+files/neofetch_2.0.2-1_all.deb">https://launchpad.net/ubuntu/+archive/primary/+files/neofetch_2.0.2-1_all.deb</a><br />
<br />
Neste momento do post a versão final é a do link acima mas no futuro você pode ter de pegar uma nova, então segue o link home dos pacotes:<br />
<br />
<a href="https://launchpad.net/ubuntu/+source/neofetch">https://launchpad.net/ubuntu/+source/neofetch</a><br />
<br />
Depois de instalar, você deve executar o neofetch pela primeira vez para verificar se ele está funcionando ou não. Abra seu terminal e digite: "Neofetch"<br />
<br />
Depois de executar neofetch , pela primeira vez, ele irá criar um arquivo de configuração com todas as opções e configurações: "$HOME/.config/neofetch/config"<br />
<br />
Pronto. Agora ele está funcionando!<br />
<br />
Sempre que quiser que ele funcione, basta digitar o comando "neofetch".<br />
<br />
<br />
<br />
::::: AGORA VEM O PLUS ::::::<br />
<br />
Coloque ele default pra aparecer no terminal toda vez que você o abrir. Para isso, abra o seu arquivo de configuração do "bash" na sua pasta HOME de usuário "pasta pessoal" Use o gedit (bloco de notas do linux) para isso. Digite:<br />
<pre>sudo gedit ~ /.config/neofetch/config</pre>
No última linha adicione este comando abaixo e salve o arquivo:<br />
<pre>if [ -f ~/.config/neofetch/config ]; then neofetch; fi</pre>
Desta forma, toda vez que você abrir o terminal ele será executado aparecendo no topo.<br />
<br />
<br />
<br />
::: Mais informações para quem tem interesse ::::<br />
<br />
O arquivo de configuração permite que você através da função printinfo () altere as informações do sistema que você deseja imprimir no terminal. Você pode digitar novas linhas de informação, modificar a linha de informações, excluir determinadas linhas e também ajustar o script usando o código bash para gerenciar as informações a serem impressas.<br />
<pre>#! / Usr / bin / env bash
# Vim: fdm = marcador
#
# Neofetch config file
# Https://github.com/dylanaraps/neofetch
# Acelerar script não usando unicode
Export LC_ALL = C
Exportação LANG = C
# Info Options {{{
# Info
# Veja esta página wiki para mais informações:
# Https://github.com/dylanaraps/neofetch/wiki/Customizing-Info
Printinfo () {
Título da informação
Sublinhado de informação
Info modelo "modelo"
Info "OS" distro
Info "Kernel" kernel
Info "Uptime" uptime
Pacotes "Pacotes" de info
Info shell "shell"
Resolução "Resolução"
Info "DE" de
Informação "WM" wm
Info "Tema do WM" wmtheme
Info Tema tema
Ícones "Ícones" de informação
Termo "Terminal"
Info "Fonte do Terminal" termfont
Info CPU CPU
Info "GPU" gpu
Info Memória "memória"
# Info "Uso da CPU" cpu_usage
# Info Disco "disco"
# Info Bateria "bateria"
# Info Fonte "fonte"
# Info Canção "Canção"
# Info "Local IP" localip
# Info "Public IP" publicip
# Info Usuários "Usuários"
# Info "Aniversário" aniversário
Informação linebreak
Cols de informação
Informação linebreak
}
-benzóico.
</pre>
Para verificar todas as opções de configuração, execute o comando "Neofetch --help"<br />
<br />
Depois de alterar o que deseja, aconselho efetuar o teste para ver se está tudo certinho... para isso digite "Neofetch --test"<br />
<br />
Para ativar a logo do sistema, por exemplo, você poderá usar o comando "Neofetch --ascii".<br />
<br />
Caso queira saber mais sobre ele, basta acessar o site do desenvolvedor, que na verdade é repositório do Github.<br />
<br />
<a href="https://github.com/dylanaraps/neofetch/wiki/Installation">https://github.com/dylanaraps/neofetch/wiki/Installation</a><br />
<br />
É isso ai pessoal!<br />
<br />
Espero que gostem.<br />
<br />
Até<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-60845796167088613362016-12-23T16:04:00.002-08:002016-12-23T16:04:31.012-08:00<div style="text-align: center;">
<img class="aligncenter" height="480" src="https://thiagolucioweb.files.wordpress.com/2016/12/cc07f-windows10-ubuntu.png" width="920" /></div>
Então.<br />
<br />
Final de ano, correria mas queria compartilhar este problema que passei com a instalação do Terminal do Linux no Windows 10.<br />
<br />
A Instalação é fácil. Se você tiver a atualização de pacote de aniversário do windows ou uma mais recente funciona rapidamente.<br />
<br />
1 - Vá em Iniciar e depois Configurações<br />
<br />
<img alt="" class="alignnone size-medium" height="294" src="https://s2.glbimg.com/tCF0xNeMz7Uw-8RJ6dBj1cTMjdI=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-1.png" width="695" /><br />
<br />
2 - Atualizações de segurança...<br />
<br />
<img alt="" class="alignnone size-medium" height="388" src="https://s2.glbimg.com/AlBOw1sTbX1DTIsx8MmXXjpHjio=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-2.png" width="695" /><br />
<br />
3- Habilita a opção para desenvolvedores do windows 10<br />
<br />
<img alt="" class="alignnone size-medium" height="379" src="https://s2.glbimg.com/e0wHshrQZQ194B8V8iuDlxWSadE=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-3.png" width="695" /><br />
<br />
4 - Depois através do iniciar pesquise pelo "Ativar ou desativar recursos do windows"<br />
<br />
<img alt="" class="alignnone size-medium" height="281" src="https://s2.glbimg.com/zLJ8nRgkGkQHD46AGrBgqxjQVko=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-5.png" width="695" /><br />
<br />
5 - Depois seleciona o windows subsystem pra linux<br />
<br />
<img alt="" class="alignnone size-medium" height="379" src="https://s2.glbimg.com/27E1WH3E257-8s8qTmCf_jas-kE=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-5-6.png" width="695" /><br />
<br />
O Windows vai instalar pra você as atualizações pra que possa usar o Bash...Digite bash no Iniciar do Windows....<br />
<br />
<img alt="" class="alignnone size-medium" height="355" src="https://s2.glbimg.com/PQHsCl8aTHqe1hDchlC7EHJmm2w=/695x0/s.glbimg.com/po/tt2/f/original/2016/04/18/como-instalar-e-usar-o-bash-shell-linux-no-windows-10-8.png" width="695" /><br />
<br />
<br />
<br />
Agora é que vem (ou não) o problema. Se correr tudo bem, Ele abrirá o prompt e pedirá as informações pra instalação deste bash. Caso contrário (como foi o meu caso) O Prompt abre e fecha muito rapidamente não fazendo nada no seu PC. Neste caso, você deve abrir uma janela do Console do Windows (digite "cmd" no Iniciar e mande rodar) e digitar "bash", e ai ele mostrará o erro.<br />
<br />
"Configurações do console incompativeis. para usar esse recurso, o console herdado deve ser desabilitado"<br />
<br />
Obs: este foi o erro apontado para mim. Se aparecer outro pra você me manda uma mensagem que podemos tentar solucionar juntos.<br />
<br />
Mas seguindo para resolver este erro é fácil ....<br />
<br />
1 Abra o cmd (tecla windows, digite cmd e aperte enter)<br />
2 na barra de título dê um clique com o botão direito do mouse<br />
3 vá em propriedades, aba opções<br />
4 Desmarque a opçao "Usar console herdado (requer reinicialização)<br />
<br />
Feito isso, tecla de atalho do windows e digite bash tecle enter e siga as instruções de instalação, feito isso vai funcionar.<br />
<br />
<br />
<br />
É isso ai...Um bom Natal e Feliz Ano Novo pra todos os leitores!<br />
<br />
E Obrigado pela força, compartilhamento, comentários, críticas e tudo mais...Vocês são demais!<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-38688052654173193292016-07-03T15:36:00.002-07:002016-07-08T03:13:00.321-07:00Ícones personalizados na Sidebar Default Sublime Text<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-cox5zhssNyg/V3mTV7aWhMI/AAAAAAAAC1Q/LCFScPn_Kkc0bEJYCAhay7QlnLwroZQcQCLcB/s1600/sidebar-sublime.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://4.bp.blogspot.com/-cox5zhssNyg/V3mTV7aWhMI/AAAAAAAAC1Q/LCFScPn_Kkc0bEJYCAhay7QlnLwroZQcQCLcB/s640/sidebar-sublime.jpg" width="232" /></a></div>
<br />
A muito tempo sem colocar nada de post resolvi vir postar alguma coisa pequena.<br />
<br />
Pra quem usa o Sublime, experimenta os inúmeros temas mas sempre acaba voltando<br />
pro Tema original porque no final ele é mesmo o mais bacana de todos os temas<br />
que existem ai vai uma pequena alteração mais muito legal no Tema Original dele.<br />
<br />
O tema original tem como único problema pra mim a "Treview" original ou "sidebar" como<br />
muitos chamam (inclusive no programa). Quando se trata de projetos e estamos mexendo com<br />
ela fica muito ruim identificar os milhares de documentos referentes ao projeto. Existe<br />
uma solução de UI pra isso que já é usada em muitos outros programas (IDE's, no caso) que<br />
é iconizar os inúmeros arquivos por tipos (.php, .html, .png, .css, etc).<br />
<br />
Com isso, fica mais fácil identificar os arquivos dentro das pastas e sub-pastas do<br />
projeto em que está trabalhando (e por que não projeto(s) aninhados).<br />
<br />
A dica aqui é simples. O arquivo zipado em anexo (<a href="http://www.thiagolucio.com.br/downloads/Theme%20-%20Default.zip" target="_blank">clique aqui para download</a>) contém um pacote de ícones que eu mesmo<br />
criei mantendo o mesmo estilo original do sublime dos poucos ícones que ele tem. Com<br />
isso você deve apenas descompactar a pasta dentro da sua "Browse Package" de usuário.<br />
<br />
O tema original do Sublime, assim como qualquer tema que você instala possui um padrão<br />
de pastas que podem ser subscritas se você colocar no local certo e com isso obter o<br />
resultado desejado. Existem arquivos padrões com nomes padrões e nesta pasta que<br />
estou anexando zipada pra você eles já estão com os devidos nomes aplicados.<br />
<br />
A notícias é que esta pasta, dependendo da instalação do Sublime pode mudar de endereço.<br />
<br />
Algumas ficam dentro da pasta "packages" e outras simplesmente ficam soltas, dentro da pasta<br />
"Browse packages" mesmo do Usuário.<br />
<br />
Para fazer isso, basta ir no menu superior em "Preferences..." -> "Browse Packages" (por isso<br />
chamo a pasta com esse nome, por referência). Então você pode começar tentando diretamente<br />
nesta pasta, se não funcionar 'e' se tiver dentro dela outra pasta chamada simplesmente "packages", você pode (se não funcionar), jogar dentro dela depois.<br />
<br />
1 - Crie uma pasta nova chamada "Theme - Default" e pegue os arquivos dentro da pasta descompactada e cole todos lá dentro (ou descompacte o arquivo compactado daqui da matéria diretamente dentro dela).<br />
<br />
2 - Abra seu Sublime text que já vai estar funcionando.<br />
<br />
Lembre-se, se não funcionar tente recortar esta pasta e colar dentro da pasta "packages" (se existir) e ai vai funcionar.<br />
<br />
<br />
Conhecimento Adicional :)<br />
<br />
<br />
O Sublime possui ainda uma forma de estilizar a Sidebar do tema original. Pra mim bastou pouca<br />
coisa pra ficar satisfeito. As vezes tenho dificuldade de ler os arquivos por causa do espaçamento original e o tamanho das letras usadas nele. Então bastou mexer um pouquinho no afastamento entre linhas e aumentar um pouco o tamanho da fonte pra poder deixar do jeito que me agradasse. Então é o seguinte.<br />
<br />
No mesmo menu superior - "Preferences..." -> "Browse Packages" do seu Sublime, ao abrir a pasta entre na pasta "User". Dentro dela, se não existir, crie um arquivo chamado "Default.sublime-theme" (caso existe abra ele com um editor de texto ou editor de código como o próprio sublime text por exemplo).<br />
<br />
Se ele existir, repare nos códigos que ali existem. Vai perceber um padrão (porque não vou te ensinar a programar aqui né...). De qualquer forma, no meu pessoal deixei apenas...<br />
<br />
[<br />
//Sidebar Label<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"class": "sidebar_label",<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"color": [9, 9, 9],<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"font.size": 12.5<br />
},<br />
// Sidebar container<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"class": "sidebar_container",<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"layer0.opacity": 1,<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"content_margin": [0,0,0,0]<br />
},<br />
// Sidebar tree || entries<br />
{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"class": "sidebar_tree",<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"indent_offset": 12.5,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"indent": 15,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"row_padding": [6,6],<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"layer0.opacity": 1.0,<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>"indent_top_level": true<br />
},<br />
]<br />
<br />
Se reparar vai ver que estou tratando de forma separada cada padrão de funcionamento da sidebar. Primeiro tratei a label, depois tratei o container (contenedor da sidebar e seu conteúdo) e depois os detalhes da Tree-view. Os comandos são basicamente declarar o local a ser implementado as alterações logo abaixo...<br />
<br />
- declaro a class que vai ser afetada (classe css de estilo): "class": "sidebar_label",<br />
- declaro qual item da classe deve ser alterado e o valor : "font.size": 12.5<br />
<br />
<br />
Para conhecer melhor estes códigos e como eles trabalham no Sublime Text, basta pesquisar pela internet um pouco mais. Uma dica legal é você instalar um tema (SETI_UI por exemplo) e inspecionar este mesmo arquivo de configuração e ver como ele declara o arquivo e como ele funciona. Indico este tema porque é de um dos desenvolvedores do Sublime Text mesmo que criou, então é um bom tema pra estudar e conhecer melhor o Sublime.<br />
<br />
Pra quem como eu gosta do Tema Default mas gostaria de fazer os "acertos detalhados das arestas" vai gostar de estudar um pouco sobre isso, o pouco que se estuda trás grande satisfação na hora de usar o programa.<br />
<br />
É isso ai pessoal, espero ter ajudado com a foforização do seu Sublime.<br />
Vlw !<br />
<br />
<br />
<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-62015624460107274092016-04-10T18:32:00.001-07:002016-04-10T18:39:14.579-07:00Instalando e configurando JAVA no seu Linux<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.ubuntudicas.com.br/wp-content/uploads/2015/11/java-oracle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.ubuntudicas.com.br/wp-content/uploads/2015/11/java-oracle.png" height="162" width="320" /></a></div>
<div style="text-align: justify;">
Todo mundo que desenvolve precisa, seja pra rodar máquina virtual ou pra acessar seu banco ou outra necessidade essencial o JAVA está presente como a propaganda mesmo fala em milhões de dispositivos pelo mundo. Para os desenvolvedores em especial ainda é muito importante ter o JAVA instalado e configurado na sua máquina. No Linux, mais especificamente no Ubuntu e suas distros tem milhares de posts falando em como instalar (incluindo este né...) o bendito na sua máquina. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Me deparei com este problema aqui, não porque não tinha mas porque não estava corretamente configurado. Então aproveitando a problemática resolvi fazer minhas consultas pra solucionar o problema. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Praticamente em todos os posts a repositório é sempre o mesmo, o PPA. Então resolvi ir direto na fonte e pesquisar pois lá tem a informação de como instalar passo a passo. Geralmente as pessoas vão em posts como este para poder saber como fazer isso, então vou ser o mais reto possível nisso passando a informação da forma PPA de instalar que deve ser a mais correta, certo?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Primeiro se desejar fazer o mesmo segue o link do PPA para isso:</div>
<div style="text-align: justify;">
<a href="http://www.webupd8.org/2012/09/install-oracle-java-8-in-ubuntu-via-ppa.html%C2%A0" target="_blank">http://www.webupd8.org/2012/09/install-oracle-java-8-in-ubuntu-via-ppa.html </a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas para os mais preguiçosos segue os comandos abaixo, ele é pra instalação e configuração do mesmo. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vai ter usar o terminal (Digita ai as teclas em conjunto...CTRL+SHIFT+T) pra abrir seu amigo:</div>
<div style="text-align: justify;">
<br /></div>
<pre class="linux-code" style="background: url("lincode2.gif") 0px 0px no-repeat scroll rgb(248, 236, 236); border-color: rgb(155, 5, 5); border-style: solid; border-width: 1px 1px 1px 20px; font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 22.4px; margin: 10px; max-height: 500px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; z-index: 10000;"><code>sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer</code></pre>
<div style="text-align: justify;">
A primeira linha baixa e instala e configura o repositório PPA do Java na sua máquina. A segunda atualiza a sourcelist de atualizações do seu linux e a terceira instala efetivamente o JAVA na versão 8 que é a última agora. Demora mesmo mas ele vai mostrando o progresso da instalação passo a passo. </div>
<div style="text-align: justify;">
Quando acabar...verifica se a instalação está OK...digitando no terminal :</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
java -version</div>
<div style="text-align: justify;">
e digite também ...</div>
<div style="text-align: justify;">
javac -version</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se ele informar que o comando não foi reconhecido (o que era o meu caso) então você vai ter de configurar as variáveis de ambiente. Tem o jeito manual pra quem gosta...digitando linhas de comando direto pra gravação das paths e tem o jeito automatizado, que o JAVA possui dentro dele como script pra fazer isso pra você...Vamos primeiro a mais fácil, automatizada. </div>
<div style="text-align: justify;">
<br /></div>
<pre class="linux-code" style="background: url("lincode2.gif") 0px 0px no-repeat scroll rgb(248, 236, 236); border-color: rgb(155, 5, 5); border-style: solid; border-width: 1px 1px 1px 20px; font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 22.4px; margin: 10px; max-height: 500px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; z-index: 10000;"><code>sudo apt-get install oracle-java8-set-default</code></pre>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Com este comando você configura as suas variáveis de ambiente. Repita os comandos anteriores java -version e javac -version para se assegurar. Então, se der tudo certo pode partir pro abraço. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas caso não funcione, ai vamos pra configuração mais complicadinha...a pros teimosos...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Primeiro configura a variável JAVA_HOME:</div>
<pre style="background: rgb(238, 238, 238) !important; border: 1px solid rgb(221, 221, 221) !important; color: #333333; font-size: 14px; margin-bottom: 20px !important; margin-top: 20px !important; overflow: auto; padding: 20px !important;">export JAVA_HOME=/opt/jdk1.8.0_66</pre>
<div style="text-align: justify;">
Depois a Variável JRE_HOME:</div>
<pre style="background: rgb(238, 238, 238) !important; border: 1px solid rgb(221, 221, 221) !important; color: #333333; font-size: 14px; margin-bottom: 20px !important; margin-top: 20px !important; overflow: auto; padding: 20px !important;">export JRE_HOME=/opt/jdk1.8.0_66/jre</pre>
<div style="text-align: justify;">
E finalmente a variável PATH:</div>
<pre style="background: rgb(238, 238, 238) !important; border: 1px solid rgb(221, 221, 221) !important; color: #333333; font-size: 14px; margin-bottom: 20px !important; margin-top: 20px !important; overflow: auto; padding: 20px !important;">export PATH=$PATH:/opt/jdk1.8.0_66/bin:/opt/jdk1.8.0_66/jre/bin</pre>
<div>
Depois disso, você tenta de novo, deve funcionar agora...o java -version e o javac -version</div>
<div>
<br /></div>
<div>
Espero ter ajudado....pra mim funfou ;)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-18731344481704446002016-04-10T11:43:00.001-07:002016-04-10T11:43:25.290-07:00Conheça o Gerador de Templates em Branco para Wordpress Online<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/--KIK2c20Bqw/VwqV0ah0UfI/AAAAAAAACes/ovR9tj-6yack_6AtpZzWLWFiR3_PtTDvw/s1600/telaSiteGerador.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://4.bp.blogspot.com/--KIK2c20Bqw/VwqV0ah0UfI/AAAAAAAACes/ovR9tj-6yack_6AtpZzWLWFiR3_PtTDvw/s320/telaSiteGerador.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Se você desenvolve Sites para clientes particulares como eu, o famoso Freela-man, com certeza já utilizou a plataforma CMS para desenvolver estes Sites. Quando o assunto é criar Sites para clientes que precisam gerenciar conteúdo e não querem depender dos desenvolvedores o CMS é uma alternativa quase certa, poupa tempo, já te dá a interface necessária para administrar via back-end o front dos Sites. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Os que mais utilizo são o Wordpress e o Joomla. Particularmente acho o Joomla mais Profissional, sua interface Administrativa é bem mais intuitiva e a nível de UI mais bem elaborada que o Wordpress que possui um painel de controle confuso e plugins que se comportam da forma mais diferente possível. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Em compensação de um tempo pra cá o Joomla tem se tornado uma ferramenta mais difícil de se trabalhar, encontrar bons plugins gratuitos e extensões que não exijam um nível maior de conhecimento para se desenvolver com ele. Isso é, tem se tornado uma ferramenta mais chata de se desenvolver. Ainda prefiro ele, mesmo com as dificuldades que ando observando pelos motivos ditos anteriormente. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
No entanto, o Wordpress se difundiu muito mais entre os leigos e a internet, as pessoas preferem ele pois tem mais plugins, mais templates e mais opções. Como as pessoas comuns não ficam fazendo nada além de geralmente fazer posts, então o Wordpress é o líder do Segmento. Ele também é mais fácil de se Desenvolver, possui estrutura fragmentada (ou particionada) e além de milhares de materiais na internet de consulta, é o campeão de gente comum, não desenvolvedor. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Se você é como eu e odeia ter de ficar pegando templates para Wordpress na Internet e ficar horas tentando entender como ele funciona e desvendando como alterar o template para se adequar aos desejos de seus clientes e geralmente ou prefere recorrer aos "builders" de Wordpress ou Frameworks para criar seus templates do zero, ou ainda ficar bastante tempo criando na mão mesmo existe uma ferramenta na internet muito boa que pode lhe ser uma "mão na roda" na hora de iniciar um novo projeto WP. E ele se chama <span style="font-size: large;"><b><a href="http://underscores.me/" target="_blank">Underscores</a> </b></span>(http://underscores.me/).</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Basicamente, o que ele faz é criar uma estrutura em branco de template para Wordpress, você entra no Site, digita o nome do template (ou do projeto) para dar um nome ao template e faz o download dele clicando no botão ao lado do campo que digitou o nome (generate).</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Depois é instalar normalmente no seu Wordpress como um template qualquer. Ele vem em branco. Analisando a estrutura dele você vai ver que ele é bem comum, fácil de entender sua estrutura dando bastante liberdade e com alguns layouts já criados dentro dele referentes a posicionamento de menu entre outros (sidebar, footer, search, error404, etc). Vale bastante à pena fuçar nem que seja pra conhecer ou estudar como ele funciona, sempre acrescenta.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Ele também vem com uma estrutura básica de css e html que você pode implementar o framework que desejar como bootstrap ou material design ou outra desejada...ele já vem com o mínimo para que você possa detectar o que vai aonde. </div>
<div class="separator" style="clear: both; text-align: justify;">
Vai lá e confere, vale à pena.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-5754087717846708382016-04-03T17:17:00.003-07:002016-04-03T17:17:57.679-07:00ScreenFetch – Seu terminal Linux incrementado com Logo da Distro<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://thiagolucioweb.files.wordpress.com/2016/04/captura-de-tela_2016-04-03_18-03-50.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://thiagolucioweb.files.wordpress.com/2016/04/captura-de-tela_2016-04-03_18-03-50.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Depois de ficar bastante tempo sem escrever nada porque ferreiro de casa, espeto de pau. Principalmente na nossa área pra quem trabalha com Tecnologia é complicado ter tempo pra ficar dedicando a alimentar Blog, atualizar o próprio site, estas coisas…afinal estamos sempre com clientes pra atender, trabalhos pra fazer, estudo pra por em dia, compromissos acadêmicos e outros que acabam com nosso tempo, resolvi escrever esse post que é pequeno mas pra quem, como eu, curte incrementar suas distros linux (e tudo que tem dentro delas) pode ser bem legal. Mas chega de papo furado…</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Quem usa muito o terminal do Linux e tá a fim de dar uma cara legal nela e ainda de plus ter as informações do sistema com facilidade existe um pequeno (pequeno mesmo) aplicativo pra Bash que se chama ScreenFecth. Ele faz basicamente é informar pra você via terminal as informações do seu sistema e coloca a logo que representa sua distro desenhada em ASCII no seu terminal.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Tem muito artigo ensinando a instalar via linha de comando mas muitos são chatos e complicados pra quem não é usuário avançado do Linux. Então resolvi fazer este post ensinando de forma muito fácil, usando um arquivo “.DEB” atualizado sempre na última versão a instalar baixando ele direto do PPA atualizado e instalando via instalador gráfico do Ubuntu ( ou distros baseadas nele).</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Primeiro passo, é baixar a versão do ScreenFetch atualizada no link PPA dele, o arquivo .DEB. Para isso entre no link abaixo:</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<a href="https://launchpad.net/~djcj/+archive/ubuntu/screenfetch/+packages">https://launchpad.net/~djcj/+archive/ubuntu/screenfetch/+packages</a></div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
OBS: Lembrando que são pras distros Ubuntu incluindo ele mesmo. Eu particularmente gosto mais do pacote criado pela “vivid” pois é um pacote para sistemas 64 bits enquanto o “Trusty” e o “precise” usam pacotes 32bits, então se sua distro for 64 bits baixe o “Vivid” que é a primeira opção de download.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://thiagolucioweb.files.wordpress.com/2016/04/pacotex64-screenfetch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://thiagolucioweb.files.wordpress.com/2016/04/pacotex64-screenfetch.png" width="320" /></a></div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Baixe o pacote “.deb” para o seu micro e depois simplesmente clique nele pra começar a fazer a instalação direto pelo instalador de programas visual do seu Linux.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Uma vez instalado, abra seu terminal e digite “screenfetch” para executar o programa e ele mostrar na tela do seu terminal a imagem com os dados da sua distro.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://thiagolucioweb.files.wordpress.com/2016/04/imagem-terminal-screenfetch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://thiagolucioweb.files.wordpress.com/2016/04/imagem-terminal-screenfetch.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
No meu caso estou usando no meu Notebook mais antigo a distro Mint então a logo que aparece é a dele, se o seu for Ubuntu por exemplo, vai aparecer a logo do Ubuntu, sempre a referente a sua distro, isso é automático. Também irá aparecer os dados do seu micro e do S.O e estas informações são sempre úteis.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Existem vários outros comandos mostrando estas informações em outros formatos (screenfetch -v, screenfetch -e, screenfetch -V, screenfetch -n, etc…) Para ver todas as variações digite “screenfetch -h”.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Depois disso fica a pergunta quase sempre que é “Como eu faço pra colocar default no meu terminal toda vez que eu abrir ele para que mostre o screenfetch com a logo?”</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Isso é fácil (de certa forma é…). Basta você ir no seu arquivo de configuração do terminal, o arquivo “.bashrc” no seu diretório home e editar ele, pode ser até mesmo no gedit por exemplo e adicionar (colar) na última linha o seguinte comando:</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
if [ -f /usr/bin/screenfetch ]; then screenfetch; fi</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Salve seu arquivo editado e reinicie seu terminal e quando abrir novamente voalá…ele executará toda vez que abrí-lo.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Para facilitar, caso desejem segue ai em anexo meu próprio arquivo .bashrc para download, dai é só salvar (não se esquece de fazer backup do seu caso não goste do visual do meu) na sua pasta home do linux. <a href="http://www.thiagolucio.com.br/downloads/bashrc.zip" style="border-bottom-color: rgba(0, 0, 0, 0.2); border-bottom-style: solid; border-width: 0px 0px 1px; color: black; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.2s ease-out; vertical-align: baseline;">CLIQUE AQUI</a></div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Espero que tenham gostado…Dúvida é só colocar nos comentários que SEMPRE respondo.</div>
<div class="separator" style="clear: both; text-align: justify;">
</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="wpcnt" id="wordads-preview-parent" style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 0; margin: 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<div class="wpa" style="border: 0px; display: inline-block !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 100%; outline: 0px; padding: 0px; position: relative; text-align: left; transform: translate3d(0px, 0px, 0px); vertical-align: baseline;">
</div>
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: black; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 34px; margin: 0px 0px 34px; orphans: auto; outline: 0px; padding: 0px; text-align: justify; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: 1; word-spacing: 0px;">
Abraços.</div>
<div style="background-color: white; border: 0px; font-family: Georgia, Times, 'Times New Roman', serif; font-size: 23px; line-height: 34px; margin-bottom: 34px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<br /></div>
<div style="text-align: center;">
<br /></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com2tag:blogger.com,1999:blog-2244348562934694929.post-629130825945175582015-07-10T13:34:00.002-07:002015-07-10T13:37:08.930-07:00Microsoft saindo do padrão de suas prograndas...Resolvi compartilhar com vocês esta propaganda da Microsoft. Ela realmente mostra a mudança no pensamento da empresa e já conseguimos ver um pouco da personalidade do novo CEO nas publicidades. <br />
<div style="clear: both; text-align: center;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/NDwL5qSCkqU/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/NDwL5qSCkqU?feature=player_embedded" width="320"></iframe></div><br />
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com1tag:blogger.com,1999:blog-2244348562934694929.post-12469293096990504712015-06-21T14:13:00.000-07:002015-06-21T14:13:13.704-07:00DICAS FUNDAMENTAIS PARA ATOM EDITOR - Snippets, Extensões, Temas, personalização...<div class="separator" style="clear: both; text-align: justify;">
<a href="http://1.bp.blogspot.com/-27qzlMqIfeI/VYcQE4XLE0I/AAAAAAAAB7I/om0rm6geRas/s1600/SNIPPETSaTOM01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="http://1.bp.blogspot.com/-27qzlMqIfeI/VYcQE4XLE0I/AAAAAAAAB7I/om0rm6geRas/s640/SNIPPETSaTOM01.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Atom é o Editor de Códigos criado pela comunidade do GITHUB. Em um <a href="http://thiagolucioblog.blogspot.com.br/2015/06/atom-do-github-baita-editor.html">post anterior</a> falo sobre ele e você pode ler pra saber mais. Mas se você já conhece ele (ou ainda não conhece) aqui vão algumas dicas pessoais de como melhorar este Editor de Códigos tão bacana. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>1- Baixe e instale a versão Zipada,</b> a versão executável, além de se instalar em um lugar bastante estranho (pelo menos no windows) também tem o péssimo hábito de não fazer instalação limpa, deixando versões anteriores e outras pastas e arquivos se acumulando em seu computador então o melhor mesmo é baixar a zipada e descompactar diretamente na raiz do seu Sistema. </div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://4.bp.blogspot.com/-MXDG1NlqoAE/VYcV-krUrsI/AAAAAAAAB7U/dX0MMzFN_Vc/s1600/versaoAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="374" src="http://4.bp.blogspot.com/-MXDG1NlqoAE/VYcV-krUrsI/AAAAAAAAB7U/dX0MMzFN_Vc/s640/versaoAtom.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>2 - Proxy - Se você usa já é melhor configurar de cara:</b></div>
<div style="text-align: justify;">
Isso foi uma coisa que apanhei bastante na empresa onde trabalho. Configurar o Proxy no Atom pode tomar bastante tempo pesquisando e configurando mesmo. Ele não possui opção manual pra você configurar e vai ter de ser na mão com código mesmo. O Atom cria uma pasta de perfil de usuário dentro da sua pasta de perfil de usuário (no caso falo do windows) chamada ".atom". Esta pasta possui alguns arquivos onde ele salva suas preferências, extensões, arquivo de estilos e snippets. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Dentro desta pasta é necessário adicionar dois arquivos configurando o Proxy. Dentro desta pasta você deverá criar um arquivo (se ele não instalar por conta própria) chamado ".apmrc" e dentro dele declarar as configurações de proxy de sua rede, neste formato.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>http-proxy=http://usuario:senha@proxy.dominio.com:3128</b></div>
<div style="text-align: justify;">
<b>https-proxy=http://usuario:senha@proxy.dominio.com:3128</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
OU</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>http-proxy=http://usuario:senha@IP DO PROXY:3128</b></div>
<div style="text-align: justify;">
<b>https-proxy=http://usuario:senha@IP DO PROXY:3128</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>proxy=http://usuario:senha@proxy.dominio.com:3128</b></div>
<div style="text-align: justify;">
<b>proxy=http://usuario:senha@IP DO PROXY:3128</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
****Também coloque as regras gerais de acesso dos pacotes igual abaixo:***</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>registry=http://registry.npmjs.org/</b></div>
<div style="text-align: justify;">
<b>strict-ssl=false</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Obs: Vale à pena lembrar que seu proxy pode ter a porta no final do endereço onde eu coloquei 3128 com outro número, isso é, outro endereço da porta. No caso mais comum é esse 3128 mesmo. No meu caso coloquei todas as linhas digitadas pra não me incomodar qual nomenclatura seria aceita, indico fazer o mesmo. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Em alguns casos é necessário também criar um arquivo dentro desta mesma pasta chamado ".npmrc" e apenas copie estas linhas e cole nele também e salve os dois dentro da pasta ".atom" dentro do seu perfil de usuário do windows ou seu sistema. Por exemplo, no meu caso é </div>
<div style="text-align: justify;">
"C:\Users\Thiago\.atom"</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Com isso seu ATOM passará a aceitar o proxy para atualizar, instalar extensões, e se comunicar com a rede externa na web.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>3- Instale e configure uma fonte de texto do editor leve</b>. A original dele já serve mas eu particularmente prefiro e fonte "Ubuntu Mono" da familia Ubuntu. Ela é leve, perfeita pra codificar e faz toda diferença quando temos milhares de linhas de código. Mas a do Atom Nativa também é boa. </div>
<div style="text-align: justify;">
Você pode baixar gratuitamente ela em (<a href="http://font.ubuntu.com/">http://font.ubuntu.com/</a>). Instale em seu PC e depois vá em seu Atom no menu superior em Files > Settings e configure a fonte. Deixo a minha imagem abaixo:</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://4.bp.blogspot.com/-RqICCikug2I/VYcXR7hTsZI/AAAAAAAAB7g/GncdNMaf0l0/s1600/fonteAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="http://4.bp.blogspot.com/-RqICCikug2I/VYcXR7hTsZI/AAAAAAAAB7g/GncdNMaf0l0/s640/fonteAtom.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
4 - Crie seus próprios Snippets dentro das suas necessidades. </div>
<div style="text-align: justify;">
Quem inventou a possibilidade de criar Snippets nos Editores é uma pessoa muito inteligente. Você poder fazer seus próprios códigos e usar eles onde quiser, isso é muito útil pois só o desenvolvedor sabe do que precisa. Então já aconselho de cara a você criar os seus próprios snippets. É fácil no Atom. Você deverá ir em Files > Open your Snippets.</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://3.bp.blogspot.com/-LBDI6imsKjM/VYcY19G21bI/AAAAAAAAB7s/Ixza8LBQEyo/s1600/SNIPPETS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://3.bp.blogspot.com/-LBDI6imsKjM/VYcY19G21bI/AAAAAAAAB7s/Ixza8LBQEyo/s400/SNIPPETS.jpg" width="190" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ao abrir o arquivo, você vai perceber que existe uma série de comentário comentados falando em como criar um snippet. Existe um de exemplo lá que é igual ao abaixo:</div>
<div style="text-align: justify;">
'.source.coffee':</div>
<div style="text-align: justify;">
'Console log':</div>
<div style="text-align: justify;">
'prefix': 'log'</div>
<div style="text-align: justify;">
'body': 'console.log $1'</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O que acontece é que ao abrir um documento novo, digitando a palavra "log" e digitando a tecla "TAB" ele irá inserir um bloco de código pré-definido na última linha ali, a "body". O uso da variável $1 ali é pra indicar para o Atom onde termina o seu código a ser inserido, mas não é obrigatório. Você pode criar vários outros até sem mesmo colocar estes caracteres. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Na internet tem um vasto campo de consulta sobre como fazer Snippets pra Atom mas pra facilitar sua vida, deixo aqui o meu Snippets pessoal que utilizo no atom e assim você poderá perceber como é feito e fazer você mesmo, não precisa ser programador pra isso. Só uma dica, para inserir Snippets HTML nele é necessário color o '*': antes de começar a declarar seus snippets HTML. Isso porque colocando este asterisco você declara ele genericamente e assim não dá problema. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para baixar meu Snippets pessoal que possui Snippets de estrutura HTML, HTML5 para responsividade, Bootstrap, Icon Awesome, Jquery e outros, clique no link abaixo. Você deverá salvar e substituir pelo seu já existente que está na pasta ".atom" na raiz do seu Sistema como falado na dica anterior. </div>
<div style="text-align: justify;">
Meu Snippet - <a href="https://github.com/thiagolucio/atom-misc-files/blob/master/snippets.cson">https://github.com/thiagolucio/atom-misc-files/blob/master/snippets.cson</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
5 - Estilize seu Atom:</div>
<div style="text-align: justify;">
Você pode estilizar seu Atom. A versão atual é muito bonita e por isso quase não mudo nada nela. Apenas mudei por exemplo algumas pequenas cores, definição de tamanho de fontes da árvore de arquivos, e fontes dos menus, e a cor de fundo do editor porque quando bate luz na tela ou em ambientes muito iluminados a cor de fundo mais clara faz pouco contraste com as cores das fontes. Também deixo aqui a minha pra você poder baixar, se quiser e ela também se encontra no mesmo lugar das dicas anteriores, na pasta ".atom" dentro do seu perfil de usuário do seu sistema. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para acessar, basta ir em Files > Open your Stylesheet</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://4.bp.blogspot.com/-ZfWUwMXJAYQ/VYcb9i64RCI/AAAAAAAAB74/kACqrMtL0yc/s1600/estilosAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-ZfWUwMXJAYQ/VYcb9i64RCI/AAAAAAAAB74/kACqrMtL0yc/s320/estilosAtom.jpg" width="183" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Você pode personalizar tudo que desejar no seu ATOM. Para isso basta inspecionar o editor com um inspetor de códigos igual o do chrome navegador. Você ativa ele indo no menu superior.. View > Developer > Toogle Developer Tools.</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://1.bp.blogspot.com/-OC_idj-1fEY/VYccvqFy5XI/AAAAAAAAB8A/h81fGTnpw5U/s1600/inspetorMenu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="http://1.bp.blogspot.com/-OC_idj-1fEY/VYccvqFy5XI/AAAAAAAAB8A/h81fGTnpw5U/s400/inspetorMenu.jpg" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ai você inspeciona o que deseja, pega o nome da classe CSS dela dentro do editor e coloca no seu arquivo Stylesheet mudando cores ou outra coisa que desejar, salva e é subscrito sobre a classe original, fazendo parte do seu Editor. Quando a versão é atualizada não se perde porque ele fica na sua pasta de personalização do Atom.</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://1.bp.blogspot.com/-fMyOqHlW_8I/VYcdTIAfoxI/AAAAAAAAB8I/l424tPIsrxk/s1600/inspecionandoAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="http://1.bp.blogspot.com/-fMyOqHlW_8I/VYcdTIAfoxI/AAAAAAAAB8I/l424tPIsrxk/s640/inspecionandoAtom.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Meu Arquivo de Estilos - <a href="https://github.com/thiagolucio/atom-misc-files/blob/master/styles.less">https://github.com/thiagolucio/atom-misc-files/blob/master/styles.less</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<b></b><br />
<div style="text-align: justify;">
<b><b><span style="font-size: large;">6 - Dicas de Extensões ou Packages como é chamado pela comunidade. </span></b><b><span style="font-size: large;">Para inserir pacotes vá em Files > Settings</span></b></b></div>
<br />
<b></b><br />
<div style="text-align: justify;">
<b><b><span style="font-size: large;"><br /></span></b></b></div>
<br />
<div style="text-align: justify;">
<b></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-BSLK173Dkl8/VYcjsL5n6SI/AAAAAAAAB9I/E2LfPQxmBrs/s1600/installsettinds.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-BSLK173Dkl8/VYcjsL5n6SI/AAAAAAAAB9I/E2LfPQxmBrs/s320/installsettinds.jpg" width="220" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<a href="http://1.bp.blogspot.com/-rjffeRZU06Q/VYceslavyyI/AAAAAAAAB8c/E9xPWSAbOhk/s1600/minimapV.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: justify;"><img border="0" height="320" src="http://1.bp.blogspot.com/-rjffeRZU06Q/VYceslavyyI/AAAAAAAAB8c/E9xPWSAbOhk/s320/minimapV.jpg" width="98" /></a></div>
<div style="text-align: justify;">
<b>Atom Minimap :</b> Como no Sublime Text, o Atom possui um Minimap pra adicionar no editor, ele funciona muito bem e possui um design legal. Rápido também e pode ser instalado digitando no campo de pesquisa Minimap. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://2.bp.blogspot.com/-D-kDeyl7K-I/VYceTs84CgI/AAAAAAAAB8U/q7XSw47DosY/s1600/minimap.jpg" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="72" src="http://2.bp.blogspot.com/-D-kDeyl7K-I/VYceTs84CgI/AAAAAAAAB8U/q7XSw47DosY/s400/minimap.jpg" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Seu endereço no Github é: <a href="https://github.com/atom-minimap/minimap">https://github.com/atom-minimap/minimap</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Tool-bar:</b> </div>
<div style="text-align: justify;">
Pacote muito legal criado pelo Suda (<a href="https://github.com/suda/tool-bar">https://github.com/suda/tool-bar</a>) que cria uma barra lateral (você pode colocar em qualquer lado do editor que quiser, esquerdo, direito, em cima ou em baixo) com ícones de atalhos de funções dos menus ou que você mesmo crie. Basta digitar "tool-bar" no "install" do Settings do Atom. Ele não aparecerá sozinho, você precisará baixar mais um pacote que irá inserir pra você os icones na barra e mostrá-la....logo abaixo explico.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://4.bp.blogspot.com/-BvZtRBkFbyo/VYcf-OGRyOI/AAAAAAAAB8o/j9ODB-L4tds/s1600/toolbar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://4.bp.blogspot.com/-BvZtRBkFbyo/VYcf-OGRyOI/AAAAAAAAB8o/j9ODB-L4tds/s400/toolbar.jpg" width="391" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Tool-bar-iconshortcuts :</b></div>
<div style="text-align: justify;">
Já aproveito pra indicar a minha própria extensão que trabalha com o Toolbar e vai deixar seu ATOM com a Toolbar igual a da imagem acima ai. Para baixar você deverá ir no meu GITHUB do Pacote que criei e baixar a última versão lá zipada e colar dentro da pasta ".atom/packages", que é a pasta como citado anteriormente onde ficam guardados seus arquivos personalizados. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para baixar, segue o link : <a href="https://github.com/thiagolucio/toolbar-iconshortcuts">https://github.com/thiagolucio/toolbar-iconshortcuts</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Obs</b>: Caso queira, você pode baixar diretamente o tool-bar-main do SUDO também via Settings do ATOM. Ele também vai adicionar os ícones como explicado e também vão acionar a sua toolbar mas no caso possui menos ícones que pra mim deixam a desejar por isso criei meu próprio pacote pra toolbar. </div>
<div style="text-align: justify;">
De qualquer forma basta digitar os nomes mostrados na imagem abaixo em seu menu "install" </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="http://3.bp.blogspot.com/-YTQENc_Uzx8/VYch4CTrp6I/AAAAAAAAB80/jSYUHaDJjMA/s1600/toolbarComplete.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="http://3.bp.blogspot.com/-YTQENc_Uzx8/VYch4CTrp6I/AAAAAAAAB80/jSYUHaDJjMA/s400/toolbarComplete.jpg" width="400" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O atalho Github dele é : <a href="https://atom.io/packages/tool-bar-main">https://atom.io/packages/tool-bar-main</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Atom Beautify:</b> Com ele você pode identar ou formatar seus códigos CSS, JS, HTML e quase todas as linguagens suportadas pelo ATOM. Ele é parecido com o Beautify do Sublime Text, tem o mesmo papel de deixar o código bonito visualmente pra poder trabalhar. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-2Yu4HAgWg04/VYcjcnXb3EI/AAAAAAAAB9A/pwrHMG4-SRw/s1600/atombeautify.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="144" src="http://1.bp.blogspot.com/-2Yu4HAgWg04/VYcjcnXb3EI/AAAAAAAAB9A/pwrHMG4-SRw/s640/atombeautify.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Atom Synced Sidebar:</b> É como a Sidebar Enhancement do Sublime Text. Ela acrescenta várias funcionalidades a barra de arvore de arquivos do lado esquerdo dos editores de código. </div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-dVbPkgL5D7Y/VYcknEcdYnI/AAAAAAAAB9U/C3gXkuehSvM/s1600/syncesidebar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="http://1.bp.blogspot.com/-dVbPkgL5D7Y/VYcknEcdYnI/AAAAAAAAB9U/C3gXkuehSvM/s640/syncesidebar.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-nBBk4BcCEgM/VYckt2LOsuI/AAAAAAAAB9c/MYNZsC065jo/s1600/synced.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://2.bp.blogspot.com/-nBBk4BcCEgM/VYckt2LOsuI/AAAAAAAAB9c/MYNZsC065jo/s640/synced.jpg" width="232" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Color Picker: Adiciona a funcionalidade de escolher a cor desejada em seu código através de uma tooltip de cores onde você escolhe como num editor de cores. Você escolhe, digita enter e ele insere a cor desejada. Também converte as cores de RGB e RGBA, etc. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Ik71If-WoGU/VYclaixm-XI/AAAAAAAAB9k/uxPZNbgSdc4/s1600/colorpicker.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="http://1.bp.blogspot.com/-Ik71If-WoGU/VYclaixm-XI/AAAAAAAAB9k/uxPZNbgSdc4/s640/colorpicker.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-D5J2gO85NfI/VYclfelyyXI/AAAAAAAAB9s/RmcxWd9g0lM/s1600/colorpickermodel.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="289" src="http://4.bp.blogspot.com/-D5J2gO85NfI/VYclfelyyXI/AAAAAAAAB9s/RmcxWd9g0lM/s320/colorpickermodel.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>Webbox-Color:</b> Ele adiciona ao lado do código da cor a cor dela. Complicado de explicar mas fácil de entender ao visualizar. É realmente muito útil. O legal deste pacote é que ao contrário da maioria ele adiciona depois do código a cor no formato de bolinha e ele não afeta nem atrapalha de ver com clareza o código da cor como na maioria mas você se gostar da cor sobre o código basta ir nos settings da extensão e habilitar a função "Fill Color as Background". </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-YRPrbvvYdOQ/VYcmlxcbJHI/AAAAAAAAB94/_8zVDW0uRIs/s1600/webbox-color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="138" src="http://1.bp.blogspot.com/-YRPrbvvYdOQ/VYcmlxcbJHI/AAAAAAAAB94/_8zVDW0uRIs/s640/webbox-color.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-VFPvKL2l4U0/VYcmrHEFu2I/AAAAAAAAB-A/K_1qnwivBIg/s1600/colorescss.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="97" src="http://3.bp.blogspot.com/-VFPvKL2l4U0/VYcmrHEFu2I/AAAAAAAAB-A/K_1qnwivBIg/s400/colorescss.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">Abaixo deixo outros pacotes que também são muito bons e uso. Sempre a mesma forma de instalar. Basta ver a descrição na própria imagem em questão abaixo do nome do pacote.</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-UYPYBeKtJiU/VYcnhuGF3ZI/AAAAAAAAB-I/GpVrVhyiUrQ/s1600/variados01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="http://1.bp.blogspot.com/-UYPYBeKtJiU/VYcnhuGF3ZI/AAAAAAAAB-I/GpVrVhyiUrQ/s640/variados01.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-RPCc8HhimQQ/VYcn7XAW_AI/AAAAAAAAB-Q/t6KU6zcxItk/s1600/variados02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="http://1.bp.blogspot.com/-RPCc8HhimQQ/VYcn7XAW_AI/AAAAAAAAB-Q/t6KU6zcxItk/s640/variados02.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GKBTeHkAhyU/VYcoC302UCI/AAAAAAAAB-Y/ClIx2nmGCMg/s1600/variados03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="http://3.bp.blogspot.com/-GKBTeHkAhyU/VYcoC302UCI/AAAAAAAAB-Y/ClIx2nmGCMg/s640/variados03.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-DFn8DMZQyNc/VYcoIaJoo2I/AAAAAAAAB-g/hVmYihwzwkg/s1600/variados04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="http://1.bp.blogspot.com/-DFn8DMZQyNc/VYcoIaJoo2I/AAAAAAAAB-g/hVmYihwzwkg/s640/variados04.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Por fim, os Temas...Bom Temas nem preciso falar. A versão default dele é linda, não precisa de mais nada. Mas se você quer ver algo diferente...Bom, tem a opção no settings "Themes", olhando lá você vai encontrar outros temas pra implementar. Mas realmente, nas minha andanças a Original dele é a mais bonita. Se você não gostou do tema de cores dos códigos e quer mudar ou gostar por exemplo do Monokai igual ao original do Sublime, você pode baixar o tema do editor chamado "Monokai" mas realmente não aconselho. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Espero que tenham gostado...das dicas ai...qualquer coisa malha ai...ou comenta. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com36tag:blogger.com,1999:blog-2244348562934694929.post-78196719762520108072015-06-21T12:18:00.003-07:002015-06-21T12:23:50.660-07:00SUBLIME TEXT, ATOM, BRACKETS, NOTEPAD++. Análise rápida...<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-WfLD-jyjazY/VYcOgQlKZzI/AAAAAAAAB68/p2njMhz_nEA/s1600/editores.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="http://2.bp.blogspot.com/-WfLD-jyjazY/VYcOgQlKZzI/AAAAAAAAB68/p2njMhz_nEA/s320/editores.jpg" width="320" /></a></div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nos dias de hoje temos muitas opções de editores de código gratuitos. Eu particularmente me amarro em Editores, gosto muito de codificar, pra mim que sou da velha guarda, trabalhar com os Editores de código de hoje é como jogar Play Station pra nova geração, pura diversão. Por isso eu tenho praticamente todos instalados em meu PC, mesmo que use ele raramente. Conhecer e dominar seus recursos pra mim é uma diversão. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Obviamente como qualquer pessoa tenho meus favoritos, mesmo gostando de codificar com todos. Os grandes IDEs como Eclipse, NetBeans, etc, também tenho instalado mas no meu dia a dia não necessito muito destas ferramentas maiores, só quando trabalho em projetos grandes, geralmente na empresa e por isso não vou falar deles aqui. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Neste Post vou falar dos meus 3 editores prediletos. Sublime Text, Atom e Brackets. Vai ser uma análise bem sucinta e não vou entrar em detalhes mas as diferenças entre eles. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>Sublime Text:</b></span></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Mu9B7kYtBkM/VYcLg-dGTlI/AAAAAAAAB6M/1TWgJK2xpys/s1600/SublimeText.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="http://4.bp.blogspot.com/-Mu9B7kYtBkM/VYcLg-dGTlI/AAAAAAAAB6M/1TWgJK2xpys/s400/SublimeText.jpg" width="400" /></a></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Esse é meu preferido, tanto que tenho uma licença dele na versão 3 e levo comigo uma versão portable onde vou (trabalho, casa, etc). Ele é meu porto seguro. O Sublime text é feito em C++ que começou como uma extensão do VIM (outro editor antigo) e que passou a ter uma identidade própria. Hoje é um dos grandes Editores famoso entre os Webdesigners principalmente mas já se tornou um IDE para programadores.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Rapidez:</b> </div>
<div style="text-align: justify;">
O Sublime Text é muito rápido. Mesmo enchendo ele de extensões, plugins, temas, etc, ele continua estável e leve, seu desempenho não muda. Sua estabilidade e pouco tamanho assim como consumo de memória no PC ao ser executado faz dele uma verdadeira máquina de editar códigos. Você consegue navegar entre as linhas de códigos na mesma velocidade que pressiona a tecla.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Visual claro e bom pra nossa retina:</b> </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-uTrdRYOjrx8/VYcL037b2zI/AAAAAAAAB6U/vRgTwLtU0ig/s1600/closedCode.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="526" src="http://2.bp.blogspot.com/-uTrdRYOjrx8/VYcL037b2zI/AAAAAAAAB6U/vRgTwLtU0ig/s640/closedCode.jpg" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Seu visual foi uma revolução gráfica em editores de código. Os olhos agradecem ao ficar horas programando nele pois a sua interface deixa tudo muito claro para a retina humana. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Suporte farto na Web, muita consulta clara pra pesquisar e conhecer a ferramenta:</b></div>
<div style="text-align: justify;">
O Sublime possui além do Site oficial, muitos videos no Youtube, comentários em comunidades e Foruns, isso faz toda diferença quando você está querendo procurar aquela informação que tanto precisa, como fazer snippets, como configurar o proxy, qual extensão é melhor para isso ou aquilo. O Package Control (<a href="https://packagecontrol.io/">https://packagecontrol.io/</a>) facilita sua vida de uma forma muito prática quando o assunto é procurar extensões, temas, etc... e instalar as mesmas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Configurando com código, tudo fica mais estável:</b> </div>
<div style="text-align: justify;">
Configurar o Sublime Text com códigos é uma coisa fácil, como disse antes material na web não falta mesmo que você não saiba programar é tranquilo, basta querer de verdade que você faz. Este fato faz com que o que você configura não se perca e seja mais estável.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Seus Arquivos de configuração, extensões, snippets, etc...em um único lugar separado da pasta do programa quando instalado e junto quando o programa é portable:</b></div>
<div style="text-align: justify;">
Tudo muito bem feito. Quando você instala o Sublime no seu micro ele cria uma pasta dentro da pasta de seu perfil de usuário do sistema contendo todos os arquivos de preferências que você criou pra ele. Desde Snippets até as extensões e temas instalados, tudo fica ali, nada se perde até mesmo se você desinstalar o programa ou instalar uma nova versão. Quando você possui a versão portable, ele coloca dentro da pasta packages do programa e quando você atualiza ele nada se perde pois esta pasta é ignorada na atualização.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Menu Superior > Preferences > Browse Packages</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>As extensões realmente funcionam:</b></div>
<div style="text-align: justify;">
As extensões do Sublime realmente funcionam, elas não causam travamento nem reiniciando o programa quando você está usando elas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Suporte e maior parte das linguagens de codificação:</b></div>
<div style="text-align: justify;">
Possui um suporte a praticamente todas as linguagens de programação e isso se reflete no auto-complete bem como a coloração das tags facilitando identificar os códigos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Continuidade garantida, é pago:</b></div>
<div style="text-align: justify;">
Essa garantia de que você vai ter o programa e que vai ter suporte não é dos maiores argumentos pois hoje em dia, os programas gratuitos possuem comunidade que sustentam esta continuidade por paixão, que é uma grande força. Mas o poder de um software comercial fazem com que a coisa se torne realmente obrigatória e mais garantida. Isso faz com que aquele momento de vida da pessoa que não está com tempo de atualizar o melhorar a ferramenta afete o contínuo aprimoramento dela.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Obs:</b> A única desvantagem se é que se pode ser justo com os outros editores é que ele é pago e a licença não é das mais baratas, comprei a minha por 70 doletas...220 reais na época, mas achei muito bem gasto. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>ATOM:</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-kgx0bGsZIvM/VYcMZ0x5I2I/AAAAAAAAB6g/PMVGhaV1lSQ/s1600/Atom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="http://1.bp.blogspot.com/-kgx0bGsZIvM/VYcMZ0x5I2I/AAAAAAAAB6g/PMVGhaV1lSQ/s640/Atom.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
Começou inspirado no Sublime Text mas hoje possui identidade própria. Pra conhecer ele e um pouco da história dele basta ver meu <a href="http://thiagolucioblog.blogspot.com.br/2015/06/atom-do-github-baita-editor.html">post mais antigo</a> que falo sobre este Editor. Sem palavras, hoje é o bicho e possui uma comunidade apaixonada assim como eu por ele que com certeza já o transformou no principal concorrente do Sublime Text, deve superá-lo e na minha opinião é um forte candidato a ameaçar (por que não) as grandes IDE´s do mercado no futuro. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Gratuito e de código aberto:</b></div>
<div style="text-align: justify;">
É sustentado por uma comunidade cada dia mais e mais apaixonada por ele, seu código aberto faz toda diferença e por ser muito bem estruturado permite que até pessoas que não entendem de programação possam contribuir com a ferramenta. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Criado pelo GITHUB, já é grande coisa né:</b></div>
<div style="text-align: justify;">
Com certeza ter sido iniciado pela comunidade do GITHUB é um peso enorme, sua integração com ele bem como com o GIT, seu padrinho é outra grande vantagem deste editor. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Visual inovador, muita liberdade na hora de personalizar:</b></div>
<div style="text-align: justify;">
Excepcional. O Atom permite que você personalize completamente tudo nele. Sem nenhuma exceção, seu código aberto juntamente com o inspetor de códigos dentro dele faz com que você possa transformar o Atom como bem entender. Isso é realmente fantástico. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Infinidade de extensões que crescem vertiginosamente a uma velocidade absurda muito à frente de qualquer outro editor no mundo:</b></div>
<div style="text-align: justify;">
Isso mesmo. A comunidade deste Editor é tão grande mas tão grande que podemos encontrar hoje em dia extensões que não existem em outros editores e não somente isso. Fazer estas extensões não é uma tarefa difícil com código aberto. Sabendo um pouco de Json, ou coffescript e css você consegue facilmente fazer um "package" pro Atom. Eu mesmo tenho um que criei...(<a href="https://github.com/thiagolucio/toolbar-iconshortcuts">https://github.com/thiagolucio/toolbar-iconshortcuts</a>)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Configuração, e instalação de pacotes e temas, etc. Tudo em interface gráfica:</b></div>
<div style="text-align: justify;">
Mesmo tendo de configurar algumas coisas via codificação o Atom possui uma interface para gerenciar pacotes ( extensões, temas, etc) e versões dele. Também possui acesso via interface pra configurar a fonte do editor, tamanho da mesma, entre as possibilidades visuais dele. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Suporte e uma boa gama de linguagens:</b></div>
<div style="text-align: justify;">
O Editor possui um suporte a uma grande gama de linguagens de programação e com isso fica mais fácil programar. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Arquivos de preferências, configurações e extensões separados:</b></div>
<div style="text-align: justify;">
Parecido com o Sublime text o ATOM possui uma pasta criada em seu perfil de usuário onde coloca todas as extensões que você instalou, seus arquivos de personalização como Snippets e preferências. Ao instalar uma nova versão isso não se perde. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">As Desvantagens:</span></b></div>
<div style="text-align: justify;">
Bom, é complicado. Isso é um reflexo de ser desenvolvido por comunidade onde muitas pessoas produzem tudo a uma velocidade grande, não existe hierarquia de produção e a coisa pode descambar um pouco sendo complicado controlar tanta produtividade e pessoas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
A melhor frase pra isso seria...ATOM é pra quem sabe e não pra quem quer. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Instabilidade:</b></div>
<div style="text-align: justify;">
O Atom não é uma ferramenta instável. Trava com uma certa facilidade dependendo do arquivo que estamos tentando abrir, em momentos em que estamos programando, ou quando tentamos executar uma extensão ou sobre o código. Realmente não é incomum estarmos trabalhando com ele e simplesmente parar tudo nele, depois de um tempo aparecer aquela janela branca informando que parou. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Muito dependente de APM e NPM, complicações para os usuários comuns:</b></div>
<div style="text-align: justify;">
O Atom usa muito o APM (Atom package Manager) e NodeJS módules e NPM pra trabalhar e com isso quando precisamos configurar um Proxy por exemplo, é uma verdadeira odisséia, demorada e cheia de erros que virá pela frente, no final você consegue mas muita gente desiste por isso. Dá trabalho e você comerá muita tela de CMD e Bash até terminar e conseguir o que quer. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Bugs constantes na instalação de Pacotes:</b></div>
<div style="text-align: justify;">
Muitos pacotes por depender do GITHUB e por depender das pessoas que os desenvolvem vivem dando problemas, principalmente de dependências e ai entra de novo o Bash e o NPM pra ir lá na pasta e baixar as dependências diretamente nelas, ver as mensagens de erros e muitas vezes fazer o download manualmente e isso é realmente um saco. Perde-se muiiiito tempo com isso. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Toda hora sai uma versão nova:</b></div>
<div style="text-align: justify;">
É quase como patrulhar ou monitorar seu filho ou cachorro, praticamente toda semana temos uma ou mais atualização de versão. As vezes estamos atualizando um pacote e descobrimos que saiu uma versão nova ou instalamos uma versão ontem e hoje já tem outra. Isso é bom porque quer dizer que estão sempre melhorando e corriguindo a ferramenta mas é ruim pela necessidade de ficar sempre de olho nisso, as vezes tendo de parar o projeto que estamos trabalhando pra poder atualizar. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Versão executável do instalador do windows muito sujo:</b></div>
<div style="text-align: justify;">
O Instalador executável do windows deixa tudo muito sujo. Você instala uma versão nova no seu PC e ele guarda uma ou duas versões anteriores sem deletar as pastas e com isso acaba por ter um arquivo grande sem necessidade. As dependências e extensões já baixam uma grande quantidade de arquivos e isso tudo é ruim também. O melhor mesmo é instalar a versão zipada na raiz do seu PC, você deleta a velha e baixa a nova zip e descompacta diretamente na sua raiz do S.O e com isso elimina o problema da sujeirada. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Obs:</b></div>
<div style="text-align: justify;">
Apesar de ter vários pontos negativos o ATOM vale demais à pena usar e instalar no seu PC. Mais ainda codificar, realmente pra quem gosta como eu de editores é um prazer enorme começar a mexer numa ferramenta no status que o ATOM está hoje em dia. Os desafios da ferramente, passar pelas dificuldades e conhecer e dominar ela é muito legal. Vale bastante à pena porque é uma ferramenta cada dia mais excepcional. Ainda acho que vai virar a minha predileta.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-size: large;">BRACKETS:</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-QlZkYTihfYk/VYcNQADcmAI/AAAAAAAAB6o/Lwp_A1vjbac/s1600/Brackets.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="348" src="http://3.bp.blogspot.com/-QlZkYTihfYk/VYcNQADcmAI/AAAAAAAAB6o/Lwp_A1vjbac/s640/Brackets.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Criado pela Adobe na sua proposta de possuir um Editor de Códigos sem fins lucrativos e de código aberto o Brackets possui uma comunidade considerável. Muitas pessoas como eu já o usa e também é promissor. Pelo menos é o que parece mas não dá pra afirmar. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Brackets possui boa interface gráfica e a cada dia melhora mais e mais sua usabilidade. Pode-se configurar as proriedades básicas como tema, cores, fontes via tela gráfica como o ATOM, é uma ferramenta bastante estável e também possui muitas extensões. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Possui algumas características nativas muito legais como mostrar a cor do código de cores quandose coloca o mouse sobre ela via tooltip e o auto-complete é eficiente. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O visual é parecido com o sublime text mesmo mas também possui identidade visual própria agora. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Possui uma gama boa de extensões e plugins também de fácil visualização, comunidade ativa mesmo que não muito grande. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
É leve quando não se coloca muitas extensões mas dependendo de quantas tiver instalado ele pesa, demora a carregar e a digitação fica bastante lenta e irritante. Algumas extensões também podem provocar o travamento do programa, sendo necessário até mesmo removê-las dele. Muitas extensões ficam deprecadas não sendo possível mais usá-las. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ele também não possui muita documentação para auxiliar no conhecer o programa, tem de peneirar muito mesmo e perder bastante tempo pesquisando sobre o que deseja. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O proxy é bastante complicado de se configurar e se baseia bastante em baixar as extensões manualmente ou arrastá-las no formato zip em seu micro e soltá-las dentro do gerenciador de pacotes do programa ou simplesmente colocar a URL do github e mandar baixar mas muitas vezes também não funciona. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Suporte e poucas linguagens, se resumindo mais a Editor voltado para Webdesigners. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
De todos os programas de editores mesmo sendo muito legal na minha opinião é o mais fraco e o que menos tem a tendência de virar uma IDE no futuro. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Gosto dele, como já disse sou apaixonado por editores e ele não é diferente mas não é meu preferido.</div>
<div style="text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>NOTEPAD ++</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cz9DOfZw6ag/VYcNcI9HjqI/AAAAAAAAB6w/slWH8UqkYok/s1600/notepad%252B%252B.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="350" src="http://2.bp.blogspot.com/-cz9DOfZw6ag/VYcNcI9HjqI/AAAAAAAAB6w/slWH8UqkYok/s640/notepad%252B%252B.jpg" width="640" /></a></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b><br /></b></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Gosto bastante dele, nem tem muito o que dizer. Auto-complete animal, suporte e milhares de linguagens, criado e sustentado pela empresa que o criou é fiel a ser gratuito, leve demais, cheio de recursos, configurável com telas gráficas e bastante focado. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Uma ferramenta fenomenal e é item obrigatório no micro de qualquer codificador, mesmo os menos ativos, quebra galho oficial da raça. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas infelizmente o mundo mudou e o design UX e UI também...Sua tela no melhor estilo Windows 98 já foi né, bateu na porta...Se mudarem isso vai renascer das cinzas....</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Mas não tem nem o que falar mal dele nem bem, é conhecido demais, só qualidades tirando a interface. Não desinstalo da minha máquina nem ferrando e também é um porto seguro pra mim quando o assunto é precisar de algo rápido.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Espero que tenham gostado, idéias são bem vindas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Futuramente estarei fazendo posts mais específico sobre Editores.</div>
<div style="text-align: justify;">
Inté.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com2tag:blogger.com,1999:blog-2244348562934694929.post-50028514098473809512015-06-13T16:35:00.000-07:002015-06-13T16:35:17.574-07:00ATOM do GITHUB, Baita Editor.<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ivMn8CnpX7A/VXyoF4cHxuI/AAAAAAAAB2c/CrbDPuTqC54/s1600/ATOM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://2.bp.blogspot.com/-ivMn8CnpX7A/VXyoF4cHxuI/AAAAAAAAB2c/CrbDPuTqC54/s640/ATOM.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
O Github, (<a href="https://github.com/">https://github.com/</a>)uma comunidade de armazenamento de projetos Open Source criou um Editor de códigos em 2014 inicialmente com apenas 3 desenvolvedores, hoje conta com oficialmente com 25 mas não oficialmente com milhares. </div>
<br />
O nome dado ao Editor foi ATOM (https://atom.io/). E o que começou se baseando no Famoso e consagrado Sublime Text, hoje possui identidade própria, pegando as melhores idéias do ST3 e adicionando características ainda melhores e mais bem boladas e hoje pelo menos comigo já concorre empatado com minha produtividade e uso diário em desenvolvimento.<br />
<br />
Além de estar tão eficiente (ou mais) que o Sublime Text, o ATOM é completamente gratuito, com plugins e extensões atualizadas diariamente e a possibilidade de ser completamente personalizável pelo usuário.<br />
<br />
O Editor que inicialmente possuia versões apenas para Mac, posteriormente criou versões para Linux e finalmente para Windows.<br />
<br />
Sou usuário Windows e o Atom roda excelentemente em minha máquina(s). Hoje na versão 0.208.0 ele possui uma interface com identidade própria e muito agradável de se trabalhar no melhor estilo FLAT UI.<br />
<br />
Instale a versão Zipada no Windows, "Atom.zip":<br />
Mesmo já existindo uma versão Windows do Atom, não aconselho a instalar a mesma. O melhor mesmo é você baixar o arquivo zipado do atom e descompactar na raiz do seu computador. Não se preocupe, toda vez que sai uma versão nova ele avisa e você vai lá e baixa de novo e descompacta novamente na raiz do seu PC.<br />
<br />
A instalação usando o instalador automático no windows cria muita sujeira no seu PC, deixando versões anteriores instaladas e deixando a pasta do programa enorme sem necessidade. O Arquivo ZIP permite uma instalação limpa sem coisas desnecessárias, seu micro agradece.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-VkL77w0GvPs/VXy36mLuVUI/AAAAAAAAB38/8FtkTdF0Kbw/s1600/releaseAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="454" src="http://1.bp.blogspot.com/-VkL77w0GvPs/VXy36mLuVUI/AAAAAAAAB38/8FtkTdF0Kbw/s640/releaseAtom.jpg" width="640" /></a></div>
<br />
<br />
<br />
O Editor possui uma excelente performance editando JavaScript, e não perde em nada também com CSS, HTML e outras linguagens. A única linguagem que na minha opinião ainda pode ficar melhor é o PHP mas já tá muito bom na versão atual. O tema do editor é excelente, uma conjugação de cores muito boa, dá pra trabalhar horas sem irritar a vista e você acha os trechos de código desejados muito facilmente.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-f4k_wL1s5L8/VXy4khghEqI/AAAAAAAAB4E/IA5HXedLJf0/s1600/edicaoAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="408" src="http://2.bp.blogspot.com/-f4k_wL1s5L8/VXy4khghEqI/AAAAAAAAB4E/IA5HXedLJf0/s640/edicaoAtom.jpg" width="640" /></a></div>
<br />
<br />
Ele possui o mesmo sistema de navegação de arquivos e de execução de comandos do Sublime Text, usando as teclas CTRL+SHIFT+P ( mesmas teclas proporcionais nos outros SO´s) e digite ou pesquise todos os comandos do editor em questão.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-B1a_fkveWZc/VXy5QbCMADI/AAAAAAAAB4M/Zwhh99AipCw/s1600/atomCommands.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://2.bp.blogspot.com/-B1a_fkveWZc/VXy5QbCMADI/AAAAAAAAB4M/Zwhh99AipCw/s640/atomCommands.jpg" width="640" /></a></div>
<br />
Com o comando CTRL+P, você navega em todos os arquivos do projeto. Para busca de arquivos, o conhecido CTRL+F e CTRL+ALT+F para busca e substituição na pasta do projeto é similar a todos os outros editores.<br />
<br />
FACILIDADE NA GERENCIAMENTO DO ATOM...<br />
<br />
Ao contrário do Sublime Text, o Atom possui uma interface para as configurações básicas, como escolher a fonte do editor, instalar e atualizar plugins e extensões assim como gerenciar as opções das mesmas. Bastando ir no menu superior ( File > Settings) para que a página se abra no campo do editor. Com ela você pode instalar novas extensões procurando-as pelo nome ou nome que sugira a função desejada na extensão. Também pode definir em settings o tamanho e nome da fonte do editor desejada. Também é possível verificar extensões que necessitem de atualização bem como o sistema.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Phb6pZh35tI/VXy6cFM6v0I/AAAAAAAAB4U/_vvVjlvDkgU/s1600/settingsatom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://1.bp.blogspot.com/-Phb6pZh35tI/VXy6cFM6v0I/AAAAAAAAB4U/_vvVjlvDkgU/s640/settingsatom.jpg" width="640" /></a></div>
<br />
<br />
Você também poderá mudar o tema tanto da aparência do programa quando do editor especificamente falando, as cores das letras do codificador. Você consegue fazer tudo isso apenas clicando em botões e com isso eles fizeram um baita melhoramento para aqueles que não manjam de codificação como no caso do sublime text.<br />
<br />
O Atom também permite total personalização de sua interface entre outros itens do editor. Agora entramos um pouco no mundo dos códigos, então se você não quer saber disso pode parar a leitura. Mas não desista lhe aconselho porque é bem fácil.<br />
<br />
Ele no menu File > .... possui várias opções onde você poderá personalizar o navegador.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-dP2ye6ihNgg/VXy7fTJFM-I/AAAAAAAAB4k/MDC_8ONhAv8/s1600/optAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="568" src="http://3.bp.blogspot.com/-dP2ye6ihNgg/VXy7fTJFM-I/AAAAAAAAB4k/MDC_8ONhAv8/s640/optAtom.jpg" width="640" /></a></div>
<br />
<br />
Open your config - permite que você determine parâmetros ou critérios de funcionamento dos elementos, plugins e comportamentos do editor.<br />
<br />
Open your Keymap - permite que você crie comandos de teclado para os plugins e extensões do editor ou mudar as existente para outras conjugações que sejam do seu agrado.<br />
<br />
Open Your Snippets - permite que você crie Snippett personalizado para seu editor, existem um texto comentado explicando como se faz um Snippet e você não precisa saber programar pra poder fazer atalhos que lhe ajudem a inserir trilhas de códigos desejadas ou outros.<br />
<br />
Open Your Stylesheet - permite que você edite o arquivo css que contém a personalização do editor, alterando cores, fontes e tudo mais do editor, você pode personalizar tudo nele, muito legal.<br />
<br />
Se não sabe o que personalizar ou o nome você pode usar o inspetor igual o existente no google crome e inspecionar os locais desejados do editor pra poder saber quais são as classes que quer mudar. Indo em View > Developper > Toggle Dev Tools (veja imagem abaixo)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-wpUMRKti1W4/VXy88NwVv3I/AAAAAAAAB4w/dk2pSV4uqCY/s1600/developer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="428" src="http://3.bp.blogspot.com/-wpUMRKti1W4/VXy88NwVv3I/AAAAAAAAB4w/dk2pSV4uqCY/s640/developer.jpg" width="640" /></a></div>
<br />
Você habilita o inspetor e analisa tudo dentro do editor.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-J7iz9hfN_TI/VXy9aXA_anI/AAAAAAAAB44/6fR2Gl30cq8/s1600/inspetorAtom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://2.bp.blogspot.com/-J7iz9hfN_TI/VXy9aXA_anI/AAAAAAAAB44/6fR2Gl30cq8/s640/inspetorAtom.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Daí é fácil, você copia a propriedade CSS desejada, cola no arquivo CSS do editor e edita os estilos desejados. </div>
<div class="separator" style="clear: both; text-align: justify;">
Particularmente falando não vejo necessidade de editar nada, tudo é muito bonito e com a gama enorme de temas e temas de edição do Atom você acaba achando algo que goste muito sem fazer força e ficar perdendo tempo com isso. Os temas padrões são demais. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Você vai reparar que ele não tem um Minimap como no Sublime Text mas basta ir lá no instalador do settings dele e baixar o Minimap. Mas as extensões e plugins vou falar em um próximo post. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Vai fuçando o editor, baixa e instala que vale muito à pena. </div>
<div class="separator" style="clear: both; text-align: justify;">
Espero que tenham gostado. </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com6tag:blogger.com,1999:blog-2244348562934694929.post-23488099100127041142014-11-21T16:06:00.004-08:002015-06-13T15:15:41.499-07:00Saiba qual a melhor distribuição do Linux para o seu computador/ notebook.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-tsM8PWbwpyQ/VXyrhaJUPdI/AAAAAAAAB3A/4c7TfhVv56I/s1600/Linux-Is-the-Only-Way-to-Protect-Against-Possible-Malware-Through-Sound-Attacks-405566-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://4.bp.blogspot.com/-tsM8PWbwpyQ/VXyrhaJUPdI/AAAAAAAAB3A/4c7TfhVv56I/s320/Linux-Is-the-Only-Way-to-Protect-Against-Possible-Malware-Through-Sound-Attacks-405566-3.jpg" width="320" /></a></div>
<br />
<br />
<br />
<header class="entry-header" style="box-sizing: border-box; color: #656e7f; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px;"><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h1 class="entry-title" style="border: 0px; box-sizing: border-box; clear: both; color: #f45145; font-family: 'PT Serif', Georgia, Times, serif; font-size: 47px; font-style: inherit; font-weight: inherit; line-height: 1.14894em; margin: 27px 0px; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<span style="color: #656e7f; font-family: inherit; font-size: 18px; font-style: inherit; font-weight: inherit; line-height: 27px;"><br /></span></h1>
<h1 class="entry-title" style="border: 0px; box-sizing: border-box; clear: both; color: #f45145; font-family: 'PT Serif', Georgia, Times, serif; font-size: 47px; font-style: inherit; font-weight: inherit; line-height: 1.14894em; margin: 27px 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<span style="color: #656e7f; font-family: inherit; font-size: 18px; font-style: inherit; font-weight: inherit; line-height: 27px;">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.</span></h1>
</header><br />
<div class="entry-content" style="border: 0px; box-sizing: border-box; color: #656e7f; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 27px; margin: 27px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 27px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
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.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 27px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
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.</div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 27px; outline: 0px; padding: 0px; vertical-align: baseline;">
<a href="http://www.zegeniestudios.net/ldc/" style="-webkit-transition: all 0.2s ease-in-out; border: 0px; box-sizing: border-box; color: #f45145; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; transition: all 0.2s ease-in-out; vertical-align: baseline;" target="_parent" title="Questionário pra escolher o linux certo pra vc!">http://www.zegeniestudios.net/ldc/</a></div>
<div style="border: 0px; box-sizing: border-box; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 27px; outline: 0px; padding: 0px; vertical-align: baseline;">
Até a próxima! <span class="wp-smiley wp-emoji wp-emoji-smile" style="border: 0px; box-sizing: border-box; display: inline-block !important; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; min-height: 1.2em; outline: 0px; overflow: hidden; padding: 0px; position: relative !important; text-indent: 9999px; vertical-align: bottom; white-space: nowrap; width: 1.35em;" title=":)">:)</span></div>
</div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-3074952292089846802014-11-12T14:57:00.002-08:002015-06-13T15:12:49.213-07:00Reveal in Sidebar Sublime Text - Linkando arquivo editado na Sidebar do Sublime text<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">Quando estamos trabalhando com uma arvore de projetos em nossos editores de código onde os arquivos possuem ramificação muito extensas </span><span style="font-family: 'Trebuchet MS', sans-serif;">ferramentas e plugins que produzem a função "Reveal in the Sidebar" ou traduzindo toscamente " mostrar este arquivo na barra lateral" </span><span style="font-family: 'Trebuchet MS', sans-serif;">é 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</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">esquedo da maior parte dos IDE´s de desenvolvimento que temos hoje. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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 </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">fará com que você usufrua desta facilidade. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">em sua área de edição e clicar no opção "Reveal in the Sidebar" e ele lhe mostrará (imagem abaixo).</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-YS8Y97SiWtM/VXypvGGLxYI/AAAAAAAAB2k/C15YqoSWBL4/s1600/revealsidebar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://3.bp.blogspot.com/-YS8Y97SiWtM/VXypvGGLxYI/AAAAAAAAB2k/C15YqoSWBL4/s640/revealsidebar.jpg" width="640" /></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">Outra solução mas pra quem gosta de códigos, é ir em "Preferênces -> Key Bindins - User" e inserir o seguinte código abaixo:</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">[</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"> { "keys": ["ctrl+shift+r"], "command": "reveal_in_side_bar"}</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">]</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-_wJyVvgS4SU/VXyqLYYXc6I/AAAAAAAAB2s/Pu9rWffv9Qw/s1600/keybindins.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="http://1.bp.blogspot.com/-_wJyVvgS4SU/VXyqLYYXc6I/AAAAAAAAB2s/Pu9rWffv9Qw/s640/keybindins.jpg" width="640" /></a></div>
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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 </span><span style="font-family: 'Trebuchet MS', sans-serif;">na Sidebar. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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 </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">SyncedSideBar (<a href="https://sublime.wbond.net/packages/SyncedSideBar" target="_blank">https://sublime.wbond.net/packages/SyncedSideBar</a>)</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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 </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">reiniciar nem ficar fazendo nenhuma configuração e funciona maravilhosamente bem e muito rápidamente. Esse é o meu predileto que indico. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">O Segundo que nem cheguei a testar mas sei que precisa ativar é o Focus File on Sidebar (<a href="https://sublime.wbond.net/packages/Focus%20File%20on%20Sidebar" target="_blank">https://sublime.wbond.net/packages/Focus%20File%20on%20Sidebar</a>)</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">Mas ai você tem de instalar pra testar você mesmo. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">Lembrando que pra instalar qualquer um dos dois basta no Editor Sublime Text, digitar as teclas CTRL+SHIFT+P e digitar "Install"</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">Quando a caixa de texto abrir na parte supoerior digite "SyncedSideBar" e ele aparecendo na primeira opção clique nele e se instalará sozinho. </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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</span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">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 </span></div>
<div style="text-align: justify;">
<span style="font-family: Trebuchet MS, sans-serif;">na minha opinião é o melhor que existe (sem competir com o Eclipse e Netbeans é claro). </span></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-23844006147530072392014-08-23T13:49:00.003-07:002015-06-13T15:17:42.366-07:00Como 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....<br />
<br />
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!<br />
<br />
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 (<a href="http://www.jetbrains.com/webstorm/">http://www.jetbrains.com/webstorm/</a>).<br />
<br />
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.<br />
http://ideacolorthemes.org/themes/<br />
<br />
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.<br />
<br />
1-Baixe o tema desejado do link:<br />
http://ideacolorthemes.org/themes/<br />
http://ideacolorthemes.org/home/<br />
<br />
<br />
2-Depois descompacte o arquivo ".JAR" pois este arquivo é para o Webstorm PHP.<br />
Dentro da pasta criada pega o arquivo ."XML" dentro da pasta "colors"<br />
<br />
3-Vá para o seu perfil de usuário do windows e cole o arquivo ".XML" em questão dentro da pasta:<br />
C:\Users\USUARIO\.WebStorm8\config\colors<br />
<br />
Depois faça a busca dentro do seu WebStorm de duas formas:<br />
<br />
A) File > Settings > Editor > Colors & Font<br />
<br />
B)Clicando CTRL+SHIFT+A e digite "Colors & Font" para lhe mostrar esta opção.<br />
<br />
Escolha o tema desejado que colou na pasta.<br />
<br />
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:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-FSXKZENTAjs/VXyr8boV9AI/AAAAAAAAB3I/QcQbSt9EzoU/s1600/webstorm.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://2.bp.blogspot.com/-FSXKZENTAjs/VXyr8boV9AI/AAAAAAAAB3I/QcQbSt9EzoU/s640/webstorm.jpg" width="640" /></a></div>
<br />
<br />
Outras dicas:<br />
<br />
Caixa de pesquisa:<br />
<br />
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.<br />
<br />
<br />
Teclas de atalho:<br />
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.<br />
<br />
Minimap:<br />
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 é<br />
<br />
File -> Setting<br />
<br />
na caixa de diálogo, digite na pesquisa "plugins", na parte de baixo da janela clique em "Browse repositories"<br />
o nome do plugin é "Code Glance". Depois de instalar reinicie e pronto está do lado direito como na imagem acima.<br />
<br />
Conclusão.<br />
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.<br />
<br />
<a href="https://www.youtube.com/watch?v=xIxDar8CbJA&index=8&list=PLQ176FUIyIUb0zTe7k4ZKkhMsR-slKu3w">https://www.youtube.com/watch?v=xIxDar8CbJA&index=8&list=PLQ176FUIyIUb0zTe7k4ZKkhMsR-slKu3w</a><br />
<br />
<br />
<a href="https://laracasts.com/series/how-to-be-awesome-in-phpstorm/episodes/24">https://laracasts.com/series/how-to-be-awesome-in-phpstorm/episodes/24</a><br />
<br />
Espero que tenham gostado :)<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com4tag:blogger.com,1999:blog-2244348562934694929.post-47430089783350191202014-01-18T13:34:00.002-08:002015-06-13T15:20:12.978-07:00Instalando e configurando o OpenWith do Sublime TextQuem é 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".<br />
<br />
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:<br />
<br />
<a href="https://github.com/titoBouzout/SideBarEnhancements/tree/st3">https://github.com/titoBouzout/SideBarEnhancements/tree/st3</a><br />
<br />
Baixa o pacote no formato ZIP e instala ele na sua pasta de usuário do programa...<br />
<br />
C:\Users\SEU_USUARIO\AppData\Roaming\Sublime Text 3\Packages<br />
<br />
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.<br />
<br />
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.<br />
<br />
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).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Sumc9motAiA/VXyskm_ry2I/AAAAAAAAB3Q/J5824-gymHs/s1600/sideopenwith.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://3.bp.blogspot.com/-Sumc9motAiA/VXyskm_ry2I/AAAAAAAAB3Q/J5824-gymHs/s640/sideopenwith.jpg" width="640" /></a></div>
<br />
<br />
Você também poderá obter maiores informações em :<br />
<a href="https://sublime.wbond.net/packages/SideBarEnhancements">https://sublime.wbond.net/packages/SideBarEnhancements</a><br />
Bom proveito!<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Code abaixo:<br />
<br />
[{<br />
"id": "side-bar-files-open-with",<br />
"children": [<br />
<br />
//application 1<br />
{<br />
"caption": "Photoshop",<br />
"id": "side-bar-files-open-with-photoshop",<br />
<br />
"command": "side_bar_files_open_with",<br />
"args": {<br />
"paths": [],<br />
"application": "Adobe Photoshop CS5.app", // OSX<br />
"extensions": "psd|png|jpg|jpeg" //any file with these extensions<br />
},<br />
"open_automatically": false // will close the view/tab and launch the application<br />
},<br />
<br />
//GOOGLE CHROME<br />
{<br />
"caption": "Chrome",<br />
"id": "side-bar-files-open-with-chrome",<br />
<br />
"command": "side_bar_files_open_with",<br />
"args": {<br />
"paths": [],<br />
"application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",<br />
"extensions": ".*" //any file with extension<br />
},<br />
"open_automatically": false // will close the view/tab and launch the application<br />
},<br />
<br />
//separator<br />
{<br />
"caption": "-"<br />
},<br />
<br />
//FIREFOX<br />
{<br />
"caption": "Firefox",<br />
"id": "side-bar-files-open-with-firefox",<br />
<br />
"command": "side_bar_files_open_with",<br />
"args": {<br />
"paths": [],<br />
"application": "C:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe", // WINNT<br />
"extensions": "" //open all even folders<br />
},<br />
"open_automatically": false // will close the view/tab and launch the application<br />
},<br />
<br />
//separator<br />
{<br />
"caption": "IE",<br />
"id": "side-bar-files-open-with-InternetExplorer",<br />
<br />
"command": "side_bar_files_open_with",<br />
"args": {<br />
"paths": [],<br />
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe", // WINNT<br />
"extensions": "" //open all even folders<br />
},<br />
"open_automatically": false // will close the view/tab and launch the application<br />
}<br />
]<br />
}]<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com4tag:blogger.com,1999:blog-2244348562934694929.post-90611381204841573672014-01-18T08:18:00.002-08:002015-06-13T15:23:08.250-07:00Personalize 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. <br />
<br />
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:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-oNz0Cv8BcwE/VXytNr9MBSI/AAAAAAAAB3c/JhBA4mFkuBI/s1600/inpsetor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://4.bp.blogspot.com/-oNz0Cv8BcwE/VXytNr9MBSI/AAAAAAAAB3c/JhBA4mFkuBI/s640/inpsetor.jpg" width="640" /></a></div>
<br />
<br />
<br />
<div style="text-align: justify;">
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:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://devthemez.com/">http://devthemez.com/</a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Independente de sua escolha, vamos trabalhar apenas com um arquivo CSS para personalizar o Inspetor de elementos. E o nome dele é "Custom.css".</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se usa o Windows 7, o caminho de acesso a este arquivo será :</div>
<div style="text-align: justify;">
C:\Users\SEU_USUARIO\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Se usa o Windows 8 seu caminho de acesso será:</div>
<div style="text-align: justify;">
C:\Users\SEU_USUARIO\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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!</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Abraço Galera...</div>
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0tag:blogger.com,1999:blog-2244348562934694929.post-57554671960003004802013-02-17T07:15:00.002-08:002015-06-13T15:25:38.194-07:00RESETANDO CONFIGURAÇÃO PADRÃO DO FIREWORKS SEM PERDER SUAS PREFERÊNCIAS.<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fYecQm7MM48/VXyt2_6JMSI/AAAAAAAAB3k/SzPzokKYs0E/s1600/Adobe_Fireworks_CS6_Icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-fYecQm7MM48/VXyt2_6JMSI/AAAAAAAAB3k/SzPzokKYs0E/s320/Adobe_Fireworks_CS6_Icon.png" width="320" /></a></div>
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.<br />
<br />
Quando trabalhamos com ele é normal criamos nossas preferências, principalmente no Layout de trabalho dele, adicionando botões no painel direito, etc.<br />
<br />
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.<br />
<br />
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...<br />
<br />
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).<br />
<br />
Se seu Fireworks não está abrindo depois daquelas alterações de configurações faça o seguinte:<br />
<br />
1- Mantenha o Fireworks fechado.<br />
<br />
2- Vá em :<br />
C:\Users\seu_usuário\AppData\Roaming\Adobe<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
6- Abra a pasta "Commands", o caminho completo é (C:\Users\seu_usuário\AppData\Roaming\Adobe\Fireworks CS6\Commands)<br />
<br />
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....<br />
<br />
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.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
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...<br />
<a href="http://helpx.adobe.com/fireworks/kb/restore-preferences-fireworks-cs5.html">http://helpx.adobe.com/fireworks/kb/restore-preferences-fireworks-cs5.html</a><br />
<br />
Espero ter ajudado, até o próximo post....<br />
<br />
<br />
<br />
<br />Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com3tag:blogger.com,1999:blog-2244348562934694929.post-62478394229918322412012-12-22T12:23:00.002-08:002015-06-13T15:28:02.445-07:00SAIBA QUAL O MELHOR NAVEGADOR "NO SEU MICRO" LITERALMENTE.<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-JFkKp3eZe4A/VXyuZegvLpI/AAAAAAAAB3s/wQmMjIeGBz8/s1600/peacekeeper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="http://3.bp.blogspot.com/-JFkKp3eZe4A/VXyuZegvLpI/AAAAAAAAB3s/wQmMjIeGBz8/s640/peacekeeper.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Site é <a href="http://peacekeeper.futuremark.com/">http://peacekeeper.futuremark.com/</a></div>
Thiago Lucio Bittencourthttp://www.blogger.com/profile/14992454891897855960noreply@blogger.com0