{"componentChunkName":"component---src-templates-single-template-tsx","path":"/nao-seja-apenas-um-recortador-de-psd","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"<blockquote>\n<p><strong>Nota:</strong> Eu pensei muito antes de escrever esse artigo, sério! Não sou muito bom em passar sermão ou dicas por textos, mas vamos lá...</p>\n</blockquote>\n<h2>Um assunto polêmico</h2>\n<p>Eu tenho um pouco mais de 6 anos de experiência em desenvolvimento web e posso falar que já vi de tudo um pouco nessa área, e esse artigo vai tratar de um assunto um pouco polêmico (como mamilos): <em><strong>O profissional deve saber de outras áreas que não são relacionadas a área dele?</strong></em></p>\n<p><figure class=\"gatsby-resp-image-figure\" style=\"\">\n    <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 956px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.30125523012552%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMEBf/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABnZU3LOEif//EABoQAQACAwEAAAAAAAAAAAAAAAECAwQQERL/2gAIAQEAAQUC8AB2uVYuMDCRr//EABURAQEAAAAAAAAAAAAAAAAAAAEQ/9oACAEDAQE/ASf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAABBAMAAAAAAAAAAAAAAAABAAIQIREyQf/aAAgBAQAGPwLZNNk9yYuf/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAERITFB/9oACAEBAAE/IZmoRJ0+iljowwnvoicXRtp42f/aAAwDAQACAAMAAAAQhP8A/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxAf/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQWFRcf/aAAgBAQABPxAR+DNX2MaE0TZTjRW4qbl8m1d6XyFxLwfsWAC+M//Z'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          srcset=\"/static/e21447ae4e5bb515154a0523ab14b209/bc904/polemico.webp 250w,\n/static/e21447ae4e5bb515154a0523ab14b209/4be29/polemico.webp 500w,\n/static/e21447ae4e5bb515154a0523ab14b209/98c77/polemico.webp 956w\"\n          sizes=\"(max-width: 956px) 100vw, 956px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/e21447ae4e5bb515154a0523ab14b209/0988f/polemico.jpg 250w,\n/static/e21447ae4e5bb515154a0523ab14b209/d1f95/polemico.jpg 500w,\n/static/e21447ae4e5bb515154a0523ab14b209/bd916/polemico.jpg 956w\"\n          sizes=\"(max-width: 956px) 100vw, 956px\"\n          type=\"image/jpeg\"\n        />\n        <img\n          class=\"gatsby-resp-image-image\"\n          src=\"/static/e21447ae4e5bb515154a0523ab14b209/bd916/polemico.jpg\"\n          alt=\"Mamilos polêmico\"\n          title=\"Mamilos polêmico\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n    </span>\n    <figcaption class=\"gatsby-resp-image-figcaption\">Mamilos polêmico</figcaption>\n  </figure></p>\n<blockquote>\n<p><strong>Nota:</strong> Porque eu me referi ao <strong>profissional</strong> e não ao <strong>front-end</strong> no texto acima? Por que, apesar do texto ser focado no mundo front-end, onde estou mais ligado, ele também vale para designers, programadores, marketeiros, UX e afins.</p>\n</blockquote>\n<p>Durante minha trajetória até aqui eu já trabalhei com alguns programadores e designers que discordariam completamente da minha opinião, que é:</p>\n<p><strong><em>Sim, o profissional que trabalha com web deve saber, ou pelo menos entender das áreas a sua volta</em></strong>. Principamente as áreas nas quais sua equipe trabalha e as equipes que ele tem contato dentro da empresa onde trabalha.</p>\n<p>Calma jovem, antes de você vir com pedras nas mãos eu vou começar a defender a minha opinião com os 6 itens logo abaixo.</p>\n<p><figure class=\"gatsby-resp-image-figure\" style=\"\">\n    <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 600px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.33333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwAC/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAASXewJpP/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIRIgADIxL/2gAIAQEAAQUCsBaJx+iLy1j0w//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AVf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAeEAACAQMFAAAAAAAAAAAAAAAAEQECEBIhIjJBcf/aAAgBAQAGPwLjp4Pq2MVI3S0OD//EABsQAQACAwEBAAAAAAAAAAAAAAEAESFBYTGh/9oACAEBAAE/IRzKDaIDqDqoh18hsRb3svQw2ioOHs//2gAMAwEAAgADAAAAEFMP/8QAFhEBAQEAAAAAAAAAAAAAAAAAACFx/9oACAEDAQE/EIw//8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERUf/aAAgBAgEBPxBc4//EAB0QAQEAAgIDAQAAAAAAAAAAAAERADEhQVFhkbH/2gAIAQEAAT8QLsDy5C9syw1NI6+YgsXuR+Yli3CVHjeDSdQBBe+fe8NNNVGf/9k='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          srcset=\"/static/57317ed178a2ffcca9854923ef55d617/bc904/urso.webp 250w,\n/static/57317ed178a2ffcca9854923ef55d617/4be29/urso.webp 500w,\n/static/57317ed178a2ffcca9854923ef55d617/f8b1b/urso.webp 600w\"\n          sizes=\"(max-width: 600px) 100vw, 600px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/57317ed178a2ffcca9854923ef55d617/0988f/urso.jpg 250w,\n/static/57317ed178a2ffcca9854923ef55d617/d1f95/urso.jpg 500w,\n/static/57317ed178a2ffcca9854923ef55d617/2a8be/urso.jpg 600w\"\n          sizes=\"(max-width: 600px) 100vw, 600px\"\n          type=\"image/jpeg\"\n        />\n        <img\n          class=\"gatsby-resp-image-image\"\n          src=\"/static/57317ed178a2ffcca9854923ef55d617/2a8be/urso.jpg\"\n          alt=\"Urso, senta aqui jovem, vamos conversar\"\n          title=\"Urso, senta aqui jovem, vamos conversar\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n    </span>\n    <figcaption class=\"gatsby-resp-image-figcaption\">Urso, senta aqui jovem, vamos conversar</figcaption>\n  </figure></p>\n<h2>1. Você raramente será passado para trás</h2>\n<p>Nessa área tem muito de, como dizia minha mãe: <em>\"Tentar tapar o sol com a peneira!\"</em>.</p>\n<p><img src=\"../../../assets/2015/12/turtles.gif\" alt=\"tartarugas rodando na agua\"></p>\n<p>Sempre tem um que \"acha\" que o jeito dele desenvolver é o certo, mas tá longe de ser, tem aquele \"espertalhão\" que enrola por horas em uma tarefa que ele levaria alguns minutos, e por ai vai.</p>\n<blockquote>\n<p>Eu conheci programador que passava designers para trás em orçamentos só porque eles não tinham noção de quanto tempo ele levaria para desenvolver um sistema.</p>\n</blockquote>\n<p>Entendendo como algumas coisas funcionam você pode cortar o barato desses fanfarrões :)</p>\n<h2>2. Entenda como está sendo feito</h2>\n<p>Não seja aquele programador que chega no horário, bate o ponto e cola o traseiro na cadeira o dia todo. De uma volta pela empresa, vá no departamento de marketing e assista um pouco do processo deles, pergunte como o designer chegou aquela ideia, acompanhe o UX no processo de planejamento do produto. Isso tudo pode trazer vários beneficios, agrega conhecimento a você e aos envolvidos.</p>\n<p><img src=\"../../../assets/2015/12/spok.gif\" alt=\"Spock - Star Trek\"></p>\n<blockquote>\n<p>De uma volta pela empresa, vai te fazer bem!</p>\n</blockquote>\n<h2>3. Não feche os olhos para as novidades</h2>\n<p>Essa vai, com um carinho especial, para programadores back-end, aqueles programadores que ainda tem medo das tags HTML5 e das animações das CSS3.</p>\n<p><img src=\"../../../assets/2015/12/robo.gif\" alt=\"Robo e gatinho\"></p>\n<p>Não seja esse cara. Entenda como as tecnologias novas podem ajudar em um projeto, como o HTML5 pode melhorar, e muito, o SEO de um website, como as animações das CSS3 podem, em alguns casos, até substituir o Javascript, não custa dar uma lida em artigos e tutoriais na internet.</p>\n<h2>4. Não tenha medo de aprender coisas novas</h2>\n<p>Um designer que aprende a programar não quer dizer que a empresa vai passar as tarefas do programador pra ele, quando ele estiver com o tempo livre, e assim vale para o programador ou para o front-end.</p>\n<p><img src=\"../../../assets/2015/12/skate.gif\" alt=\"Aprendendo skate de dedos\"></p>\n<p>Aprender algo novo eleva muito o seu valor, como pessoa e como profissional, e isso ninguém tira de você.</p>\n<p>Não tenha medo de saber como as coisas funcionam em outras áreas, aprenda de verdade, você vai se surpreender com quanta coisa legal tem por ai.</p>\n<h2>5. Não tenha medo que a empresa te explore por saber muitas coisas</h2>\n<p>Eu conversei com uma designer uma vez e ela mencionou aquelas empresas que abrem vagas para designers e exigem que o profissional saiba, HTML, CSS, JS, PHP, Java, Ruby, NodeJS, banco de dados, lavar, passar e cozinhar (mentira, nem é tudo isso eu exagerei um pouco).</p>\n<p>Isso ainda existe e duvido que vá mudar, mas... quanto mais você souber maior o seu valor, concorda?</p>\n<p>Geralmente, nas descrições das vagas, eles pedem um monte de coisas, mas muitas dessas coisas eles querem que o candidato saiba apenas o básico, apenas ter uma noção já basta. Não é que eles vão te contratar como front-end e vão te colocar como programador back-end, ou te contrata como designer e te colocar como desenvolvedor <em>full stack</em>.</p>\n<h2>6. E por último, não seja apenas um recortador de PSD!</h2>\n<p><figure class=\"gatsby-resp-image-figure\" style=\"\">\n    <span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 800px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 75%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAIAAABr+ngCAAAACXBIWXMAAAsSAAALEgHS3X78AAADa0lEQVQozy2SXUxbdRjGn/8BdGg2Ix+bEDQzkRgTyXSSIGyulQx0H5nT4T5MNC7ZhYl3euGFuzEx8cYYESgd5bTU9pzTntJz+nVKu5bSrwy2CtYliqJOuNBsyxDb0m/o31PjxXv5vM/ze94XBRu2BVQcoG7seJBxIC+DLqASREkBTYDGUQ4gM4uKF1RBxYkcjy0rk+MZqOIMhyyPiqoJojyHrAvb8+T+HNIc2VwATWHbj7xC1I1VBRkbKdjxO9u6bt6PmoSyiJy6wo6yapUkpTDJh/Ale/Dy6Mt2qbOWQjaA2iKqC8g6kZ0l1IMNc9v6zH5QCdSFmhdFNzIyimFUb+1d9e/9RDj5mfTO+zPHFMc+mm7cWurI+lCYI7shoga8Y27/caqjHlvFqKmeEVKL426w/afvvo5Hui5+0X3po54r492fmp75IfZEalG/meiii6hcZ6purBrab08eQJZDRvivJy+pRlG4tW8tdfZbofNztoNTOr6Rn7o686ziab9zsy+beCSvNuciRRm/Gh//jW3FzizKMil6mbyfyQWZfJTUlpFPkwnhAB/uuso9PSlq6VpTZRnFG6SSYKoLDXQeG9a2P/5n9oFeB42B3oSqLC2DrsHr2fPBV499OPb2SvIKXcXubUZtbieOWhjUj3/E5k2uuc78/fRz89c0CeORlHBkWXwpwR9ekntd/At2y6Be/94NnyYdOrri6llxHFoSXkuZX4xMDa5bOvMC6hffMLd4RzX86EW36XKEOzarP+E3D0vm82FB47W8JbNayXSWH78QYAdE/QXTxMdJ40BGbK6IqDNTN/nT3vELfzDEnpEmTgVMGpdhaM56Omjtdxpelw2a4IzWZnhXGtMus0+mzT33xBb11FQm6mDHydyztW059vzMdftNI0nrgKLv886cT9peSdqOhrjTUeFkmNXGrYN35ZYNrvUv66N5G8oOoCQiwyOm6/NNvDk/NbjAany6oZjxsGI8p0wfDxi1EctI1HI8rO9VDCOybsQ3eW5l+vmc+tEcqTNnOLIj4j7XGjW8GhrvDeqHY2x/QNfvvzbs0Z8I6w6FpoecukvusVPBqTe2hGY1rGpZL6z+YWIdoCYxOVvj33xTydVYVRq3HI0FT9NusOGBvSknPVTxPpyzNzywNBRFhkpEPfDuLP4FMo7oMVX2RJYAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n        <source\n          srcset=\"/static/087537c93e5e8c8ac6d3536107971aee/bc904/bugginho.webp 250w,\n/static/087537c93e5e8c8ac6d3536107971aee/4be29/bugginho.webp 500w,\n/static/087537c93e5e8c8ac6d3536107971aee/47a22/bugginho.webp 800w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/webp\"\n        />\n        <source\n          srcset=\"/static/087537c93e5e8c8ac6d3536107971aee/43fa5/bugginho.png 250w,\n/static/087537c93e5e8c8ac6d3536107971aee/c6e3d/bugginho.png 500w,\n/static/087537c93e5e8c8ac6d3536107971aee/7842b/bugginho.png 800w\"\n          sizes=\"(max-width: 800px) 100vw, 800px\"\n          type=\"image/png\"\n        />\n        <img\n          class=\"gatsby-resp-image-image\"\n          src=\"/static/087537c93e5e8c8ac6d3536107971aee/7842b/bugginho.png\"\n          alt=\"Bugginho developer, amiguinhos!\"\n          title=\"Bugginho developer, amiguinhos!\"\n          loading=\"lazy\"\n          style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        />\n      </picture>\n    </span>\n    <figcaption class=\"gatsby-resp-image-figcaption\">Bugginho developer, amiguinhos!</figcaption>\n  </figure></p>\n<p>Se você se titula por ai um <strong><em>Front-end engineer</em></strong> e não sabe se virar bem com alguma linguagem de programação, não sabe otimizar a performance de um site, ou não sabe usar o terminal a seu favor, sinto muito te dizer amigo, mas <strong><em>você é apenas um recortador de PSD</em></strong>.</p>\n<p>Ser <strong><em>front-end</em></strong> vai muito além de apenas saber Javascript, você precisa cuidar do seu código, deixar seu JS performático e otimizar as variáveis.</p>\n<p>Ser <strong><em>front-end</em></strong> vai muito além de apenas saber CSS, você precisa saber pré-processadores e usá-los da forma correta otimizando as suas CSS.</p>\n<p>Saber HTML não basta para ser um bom <strong><em>front-end</em></strong>, você precisa entender, nas entrelinhas, o que cada tag tem pra te contar, ler o seu próprio HTML repetidas vezes a procura de uma imagem com um atributo <code class=\"language-text\">alt</code> vazio, saber pelo menos o básico de acessibilidade e de SEO é o mínimo para um bom <strong><em>front-end</em></strong>.</p>\n<p>Saber usar pacotes como <em>gems</em> e <em>npm</em> para automatizar tarefas repetidas, saber usar git, criar e compartilhar coisas no github, tudo isso te faz um bom <strong><em>front-end</em></strong> e aumenta o seu valor como profissional.</p>\n<p>Não deixe que digam que você é <strong><em>\"apenas um fatiador de layout\"</em></strong> e <strong><em>\"diagramador de telas\"</em></strong>, vá além do HTML, CSS e JS padrão de todos os sites, aprenda uma nova linguam de programação (recomendo ruby e python), tenha noção de design, cores e tipografia. Isso tudo vai te ajudar muito em sua carreira como <strong><em>Front-end</em></strong>.</p>\n<h2>Conclusão</h2>\n<p>O mercado necessita de profissionais que interajam e aprendem sobre outras áreas, que não estejam relacionadas apenas com a sua formação. Se você não correr poderá ficar para trás.</p>\n<p>Tem cada vez mais por ai, designers sabendo front-end, front-end sabendo UX e back-end tendo noções de design, não deixe que uma dessas pessoas tome sua vaga no mercado de trabalho.</p>\n<p>/end.</p>","excerpt":"Nota: Eu pensei muito antes de escrever esse artigo, sério! Não sou muito bom em passar sermão ou dicas por textos, mas vamos lá... Um assunto…","timeToRead":4,"frontmatter":{"category":["geral"],"date":"há 11 anos","datePublished":"2015-12-10T00:00:00.000Z","description":"Durante minha trajetória até aqui eu já trabalhei com alguns programadores e designers que discordariam completamente da minha opinião","path":"/nao-seja-apenas-um-recortador-de-psd","tags":["front-end"],"title":"Não seja apenas um recortador de PSD!","image":{"publicURL":"/static/skate-52db76a56997aafe3652a51ea6ad6516.gif","name":"skate"}},"fields":{"readingTime":{"words":1037}}}},"pageContext":{}}}