frontendbr/forum

:beer: Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para o GitHub Discussions

Fórum

🍺 Portando discussões feitas em grupos para o GitHub.

Disclaimer: As opiniões aqui publicadas são de inteira responsabilidade de seus autores e não refletem, necessariamente, o posicionamento da organização.

---

---

Propósito

Uma conversa no Twitter foi o gatilho que precisávamos.

Alguns posts em grupos de front-end em redes sociais geram debates legais que poderiam ser disponibilizados em local melhor estruturado para tal. A busca do Facebook em grupos, por exemplo, tem vários problemas. Discussões épicas foram perdidas, e pessoas que ingressam agora nos grupos não tem mais acesso a esses posts.

A ideia desse repositório é portar ou iniciar essas discussões no GitHub. Estando no GitHub, fica mais fácil procurar respostas a perguntas já respondidas por esses grupos.

O objetivo é unificar todas as discussões em um só local, e o GitHub foi o escolhido para isso.

Em 2017, depois de tantas conquistas (empregos, conhecimento e networking) e elogios (por parte do TechLead do GitHub), nos tornamos a comunidade oficial do evento InterCon do iMasters.

Vantagens do GitHub

• Espaço usado por quase todos os desenvolvedores
• É uma rede social
• A busca funciona muito bem
• Escalável
• Organizável

Ajude e seja lembrado!

Toda vez que alguém faz uma pergunta e sua resposta é marcada como correta, você ganha um ponto e pode aparecer no ranking das pessoas que mais ajudam.

Além disso, seu perfil no GitHub também irá mostrar quantas discussões você já respondeu!

Diretrizes e Boas Práticas

Antes de criar uma pergunta/discussão você deve atentar para as seguintes diretrizes:

Pesquise

Uma habilidade essencial para os desenvolvedores é saber fazer boas pesquisas. Muitas das dúvidas de iniciantes podem ser respondidas com pesquisas simples, portanto antes de postar sua dúvida certifique-se de que fez as pesquisas necessárias e traga para dentro da pergunta/discussão os dados que encontrou e os dados que não encontrou sobre o assunto.

Pesquise no fórum

1. Utilize a função de busca no topo desse repositório (certifique-se de não estar em um fork)

2. Pesquise assuntos próximos, talvez sua dúvida possa ter sido respondida em alguma pergunta/discussão parecida

Pesquise na internet

1. Caso sua dúvida seja sobre uma linguagem ou ferramenta específica, busque sua dúvida na documentação oficial dessa linguagem/ferramenta

2. Caso o item acima não resolva, utilize preferêncialmente o Google

3. Tente pesquisar em inglês, nem que pra isso precise recorrer ao Google Translate

4. Dê preferência para resultados de documentações oficiais e fóruns especializados, exemplo:

• Mozilla Developer Network (MDN)
• StackOverflow

Outros pontos

• Escreva o português de forma correta e bem pontuado.
• Evite sair do escopo inicial da pergunta/discussão. Caso necessário, crie uma nova pergunta/discussão e mencione a pergunta/discussão.
• Se precisar de ajuda em um código, forneça trechos, Gists, e lembre-se, ninguém tem a obrigação de resolver seu problema.
• Não seja um monólogo que só fala de si. Interaja com as respostas, cite pessoas, gere uma discussão saudável e construtiva. Afinal, quanto mais informações, mais rico nosso ambiente será e ajudará mais pessoas.

Quando criar uma Pergunta/Discussão?

Dúvidas

Concentre suas perguntas em problemas reais. Inclua detalhes sobre o que você tentou e exatamente o que você está tentando fazer.

O ideal é que antes de criar uma dúvida você tente resolver o problema sozinho, na grande maioria das vezes uma breve busca no Google pode te ajudar a encontrar uma solução.

Pergunte sobre:

• Como resolver um determinado problema ex: Como alterar a cor de fundo de uma div com CSS.
• Como executar uma determinada tarefa ex: Como consumir um webservice REST com JavaScript.
• Como otimizar um trecho de código ex: Como percorrer todas as propriedades de um objeto rapidamente.

Lembre-se de pesquisar bastante antes de abrir uma pergunta/discussão, existem boas chances da sua dúvida já ter sido respondida e estar documentada pela internet.

Discussões

Discussões são sempre bem-vindas, ao formular uma discussão, tente ser o mais direto possível sobre o que você pretende abordar, se necessário abra mais de uma thread, uma para cada assunto.

Ferramentas

Descobriu uma ferramenta, framework ou qualquer outro recurso que possa ajudar os membros do grupo? Não hesite em compartilhar conosco estamos ansiosos pela sua dica. Existe uma categoria só para dicas assim.

Geral

Caso seu post não se encaixe em nenhuma das categorias acima, não tem problema. Desde que ele trate sobre Front-End estaremos dispostos a discutir e ajudar. E você pode abrir com a categoria discussão.

Sua pergunta foi respondida?

Se alguém respondeu sua pergunta corretamente, não deixe de marcar a resposta como respondida. Isso ajuda a filtrar as perguntas, além de dar um ponto para o colega que te ajudou e incentivar que as pessoas se ajudem mais e mais.

Como criar sua Pergunta/Discussão?

Na aba Discussions basta clicar no botão New discussion, na próxima página, basta escolher entre as 4 diferentes categorias.

• Perguntas e Respostas: Pergunte e ajude a comunidade! =D
• Discussão: Proponha discussões ou reflexões sobre assuntos relacionados a profissão.
• Dicas: Compartilhe dicas e links interessantes que você achou.
• Mostre seu trabalho: Divulgue seu trabalho, peça feedback e compartilhe sua experiência.

Após selecionar a categoria, basta adicionar um título bem detalhado e caprichar no texto. Lembre-se de seguir os passos corretos ao criar uma pergunta/discussão.

Trechos de código

Para facilitar a visualização de quem vai ler sua pergunta/discussão, coloque seu código no Codepen (recomendadíssimo) ou no Gist. Assim quem for te ajudar conseguirá ver seu código em funcionamento, facilitando as dicas.

Código de Conduta

Como qualquer grupo de discussões, existem algumas regras que devem ser seguidas para proporcionar uma melhor experiência à todos.

• Respeite para ser respeitado. Não escreva algo que possa ofender alguém. Reflita se o texto não é agressivo/mal educado antes de enviar.
• Mantenha as críticas nas idéias e não nas pessoas.
• Não será permitido qualquer tipo de assédio ou discriminação relacionados a características ou escolhas pessoais, bem como bullying, sexismo, racismo ou qualquer outro tipo de ação que possa proporcionar constrangimento aos outros participantes.

Comporte-se profissionalmente. Os participantes que violarem tais regras serão convidados a se retirar ou banidos dada a gravidade de suas ações.

Linguagem

Todas as issues devem ser abertas e respondidas em pt-br.

Perguntas frequentes

Várias dúvidas e perguntas de como iniciar a carreira e por onde começar a estudar, nossa sugestão é que você inicie lendo essas issues e logo depois abra uma nova com suas dúvidas:

Técnicas e metodologias

• #229 Livros
• #480 Como funciona o processo de Code Review onde vocês trabalham?

HTML

• #38 Referências sobre HTML e um monte de conhecimento sobre o que é uma linguagem de marcação e de transporte

JavaScript

• #90 Paradigmas de programação com JavaScript
• #270 Roadmap sobre por onde ir no JavaScript

Como receber atualizações do Fórum

Você pode receber atualizações do Fórum no seu email ou via notificações do GitHub, basta clicar em Watch, em seguida, basta ir em Custom e marcar a opção de Discussions.

Extra

No Slack Frontend Brasil tem o canal #forum que está integrado com o GitHub, desta forma, você sempre saberá quando alguém postou uma nova issue.

Entre e participe!

Badge	Link	Participar
	Frontend Brasil	Participar

Apoiadores e Parceiros

Licença

MIT © FrontendBR

Repositórios da Front-End Brasil

• Fórum
• Eventos
• Vagas
• Me Contrata
• Compra e Venda
• Doe um Livro
• Poste Mais!
• Open Source
• Sugestões

forum's Issues

Sobre as dependencias do npm

Fala pessoal, beleza?

De fato comecei a utilizar o NPM para gerenciar todas as dependências do projeto, inclusive as que ficavam por conta do bower. Como discutimos nessa issue #17

Porém surgiu uma questão, estruturei um novo tomando de base o do @willianjusten e no package.json, adicionei * para baixar sempre a ultima versão.

Essa é uma abordagem correta ou tem outra solução mais adequada?

Alguém sabe aonde tem projetos Open Sources para serem colaborados?

Bom dia a todos, sou iniciante em Front end vi que tem muitos ninjas aqui, algum de vocês sabem aonde pode colaborar com projetos Open muitas vagas de emprego pedem para ter um portfólio ou algo do gênero.

Repositório para iniciantes treinarem

Fala galera, iniciei um projeto para a galera iniciante ter como praticarem o que estão estudando.

Se chama CT (Centro de Treinamento), basta a pessoa se envolver em um grupo e praticar em algum projetinho ou montarem um grupo de estudos.

A intenção é fazer o pessoal praticar, usar mais o Git/GitHub e ainda fazerem bons amigos. 😄

https://github.com/training-center/sobre

Job para SP: Frontend/Webmaster para projeto pontual para as olimpíadas

estou repassando uma vaga que recebi, caso tenham interesse em saber mais, liguem: 11 3044-7633.

a pessoa irá atuar em Alphaville de segunda à sexta, horário comercial até o mês de julho.

Web Service e PHP

Olá pessoal do Git-Hub, sou novo tanto na programação como no fórum e uma empresa me pediu
para que eu fizesse um "Login" mais com Web service, eles tem o web service já , é só eu fazer a integração, mais galera não tenho noção de como fazer.

Como posso fazer a conexão dos mesmo ? Alguem porfavor me ajuda! Grato!

Redirect no GH Pages

Fala pessoal.

Resolvi usar o Harp para desenvolver meu novo site e estou razoavelmente avançado.

Porém, atualmente uso uma estrutura de /blog/ano/post e para adaptar o Harp vai ser um pouco trabalhoso. Sendo assim agora vou mudar para /blog/post.

Até ai nenhum problema, mas... estou utilizando o GH Pages como servidor, e não consigo encontrar nada que me ajude a fazer redirect dos links antigos. Sem o redirect vai ser foda, já que tem um monte de post meu compartilhado por ai.

Alguém consegue me dar um help?

[GULP] Minificar JS com ES6 sem passar por compiladores

Pessoal,
Como estão fazendo para minificar código JS com ES2015 SEM passar pelo Babel ou outro compilador?
Não está rolando nem com gulp-minify e nem com gulp-uglify. Eles não conseguem fazer o parse.

Design responsivo: Quais e quantos breakpoints utilizar?

Peguei um projeto ontem que tinha 14 breakpoints (isso mesmo, 14 😮). Sinceramente, eu fiquei me perguntando se realmente valia apena "quebrar" tanto um layout assim. Eu utilizo 6 tipos de resoluções e acho o suficiente. Queria saber a opinião de vocês sobre.

Slack da FrontEnd Brasil

Como faz pra ser convidado?

Como não sou fã do facebook, último lugar que olho é lá e assim para assuntos técnicos tenho transferido ou sido transferido para grupos no slack, e não vi aqui no github forma alguma de acessar ou ser convidado.

Ajuda com Datatable

Ola senhores, eu possuo uma tabela criada utilizando a biblioteca datatable do jQuery, porém eu carrego um numero x de linhas enquanto na verdade existe um numero y, por exemplo, tenho um total de 100 linhas, mas só exibo 85, lembrando que faço o carregamento dos dados via ajax(método do datatable) , gostaria de saber como carrego os outros 15 itens, chamando novamente meu ajax.

segue o código utilizado:

dt = $("#tblabels").DataTable( {
        "dom": "<'row'<'col-sm-6'f><'col-sm-6 no-padding'B>><'row'<'col-sm-12 no-padding'tr>><'row'<'col-sm-12'i>>",
        "processing": true,
        "serverSide": true,
        "buttons": [{
            "className": "btn btn-sm btn-success",
            "text": "<i class=\"fa fa-fw fa-plus\"></i> New",
            "action": function(e, dt, node, config) {
                var $inp     = $(".form-validate").find("input");
                var $txtarea = $(".form-validate").find("textarea");
                $inp.val("");
                $txtarea.val("");
                $(".translate textarea").val("");

                if($inp.is(":disabled")){
                    $inp.prop("disabled", false);
                }

                $("#btn-remove-label").prop("disabled", true);
            }
        }],
        "ajax": "/api/studio/modules/" + moduleId + "/labels",
        "scrollY": document.body.offsetHeight - 180,
        "scroller": true,
    });

O retorno disto é...

  Showing 73 to 81 of 81 entries (filtered from 137 total entries)

Iniciando com front-End

Pessoal, bom dia, sou um desenvolvedor java back-end e estou comecando na vida do front, vou comecar a brincar com React e estou totalmente perdido alguem sobre como comecar em questao de arquietetura, no back hj eu utilizado gradle para gerenciar minhas dependencias, no front pensei em usar o bower, porem para usar o bower preciso instalar o node, ate ai bele, instalei o node, depois o bower, e agora eu consigo adicionar minhas dependencias pelo bower, porem a minha duvida e a seguinte, existe uma estrutura "padrao"(melhores praticas) para se trabalhar no front? apos add as pendencias no bower, como eu comeco? crio um arquivo .js e adiciono os requires (require('react'), reaquire('react-router; ) e etc apenas nesse arquivo? ou somente nos arquivos que eu vou utilizar determinado componente? outra coisa como eu rodo a minha aplicacao? preciso criar o diretorio dentro de um servidor (tomcat por exemplo)? apos eu terminar o desenvolvimento como coloco em producao? (no gradle eu mando um gradle war, ele gera o war) e no front? como mimifico os arquivos? alguem pode me indicar um tutorial ou dar um help?

Obrigado

Treeview recursivo

Olá caros colegas do Frontendbr, venho até vocês pedir ajuda, ainda sou novo no mundo da programação, sinto que minha logica ainda não esta afiada, então venho até vocês pedir ajuda para uma tatarinha. Tenho que desenvolver uma treeview recursiva, ou seja. estou recebendo um Objeto que contem o seguinte formato.

{
  "fields": [1,2],
  "groups": [{
      "fields": [1,2],
      "groups": [{
          "fields": [1,2],
          "groups": [
            ... 
          ]
      }]
  }]
};

Em fim, este objeto pode conter varios groups, eu precisava transformar isso em uma treeview sem o uso de frameworks e deve ser recursivo.

agradeço a ajuda e espero que tenha ficado claro, obrigado!

Sobre o Angular 2

Fala galera recebi email da codeschool sobre o curso de deles de angular2 que foi lançado hoje rs, dei olhada nos slides do curso e gostei do que vi sobre o angular2.

E vocês que estão achando do angular2 ?

Carreira Front End

Galera, quero fazer um compilado sobre Carreira Front End nesse repositório.

1 - Primeiro preciso identificar quais os requisitos (técnicos) para os diferentes níveis:

• Júnior
• Pleno
• Sênior

É sempre complicado falar de carreira Front End devido a diversidade relacionada com Design e Desenvolvimento de Software (o tal do Engineer). Quero tentar colocar por essa separação também.

2 - Em seguida vou adicionar as diferentes formas de contratação:

• CLT
• PJ
• Outra que tiver

3 - Depois vou listar alguns sites de Jobs na área.

Gostaria de saber a opinião de vocês quanto a esses assuntos para enriquecer o conteúdo que vou listar no repositório.
Quem puder compartilhar alguns links de apoio para tal, eu fico mais que contente pela ajuda!

Google Forms + Ajax

Eu queria fazer um formulário que quando submetido os dados fossem enviados para um formulário do google forms por ajax. Já pesquisei na documentação e no próprio google e não achei nada. Eu quero fazer sem usar o iframe do forms e também sem backend.

Se alguém puder me ajudar.

Botões com `cursor: pointer;` x Acessibilidade

Fala pessoal.

Rolou uma discussão por aqui sobre aplicar cursor pointer em todos os botões:

[type="button"],
[type="reset"],
[type="submit"]
[role="button"] {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

O Normalize tinha isso, porem foi removido depois desse comentário:

Web browsers are fairly consistent:

• Buttons are cursor: default;
• Links are cursor: pointer.

The concept for links is that they take you to a different URL. The hand cursor (pointer) indicates that. Buttons don't take you to a different URL (with the notable exception of form submit buttons, though this is less true with scripted or HTML5-validated forms), and thus don't have this style.

Specification

pointer: The cursor is a pointer that indicates a link.

http://www.w3.org/TR/CSS21/ui.html#cursor-props
http://dev.w3.org/csswg/css-ui/#cursor

comentário: necolas/normalize.css#371 (comment)

Gostaria da opinião de vocês. Alguém algum dia NÃO precisou de cursor pointer em um botão?

Sobre Performance

Lendo o artigo a faster ft.com me bateu uma curiosidade:

• O que vocês andam fazendo para otimizar o desempenho?

Além dos ótimos tópicos abordados no projeto Browser Diet
quais práticas mais, podem ser úteis no dia-a-dia.

Sugestão: Que tal a criação de um Gitter para o Repositório?

O que vc acham de um gitter para o repositório? acredito que evitaria o pessoal flooda as issues com coisas menos importantes, pois ao meu ver, este repo tem o objetivo de manter as discussões em um nível mais sério e profissional e se começarem a floodar isso ae, a coisa vai por água abaixo, além de manter um contato mais próximo entre todos os dev's envolvidos. Um contato em tempo real é algo bem legal de se adicionar e como estamos fazendo uso extensivo do Github, o gitter seria uma ótima, e se o pessoal começar a perguntar muita coisa técnica por lá é só conscientizar eles falando: "Cara, isso dá uma boa discussão, vc já viu se tem alguma Issue aberta la? abre uma issue e vamos discutir isso".

O vocês que acham?

Nomeclatura de classes

Para vocês, qual seria a melhor forma de nomear classes?

<header class="header">
    ...
    <h1 class="header-title"><h1>
    <h2 class="header-description"></h2>
    ...
</header>

ou

<header class="header">
    ...
    <h1 class="title"><h1>
    <h2 class="description"></h2>
    ...
</header>

Sugestão: Repositório com Agenda de Eventos

Rola um repositório com datas de eventos, meetups, hackatons?

Campos * Formulário

Olá Pessoal , preciso validar um formulário PHP ou HTML mas estou com alguns problemas.

1. Tenho o formulário bonitinho, más dentro de "Value" tenho "nome" -> Value="nome"
2. Como faço para deixar o campo obrigatório com o valor lá dentro ?
3. Pois como tem um valor lá (obviou) não fica obrigatório.

FEMUG-SP #32 - Meetup de front-end em São Paulo sobre 'RAIL Performance Model'

No dia 19/05, quinta-feira, vai acontecer o FEMUG-SP _#_32 na Caelum a partir das 20h, perto do metrô Vila Mariana.

Nesta edição o @sergiolopes falará sobre RAIL Performance Model. O limite é de 60 pessoas, então corra para garantir sua vaga!

Mais informações em https://sp.femug.com/t/femug-sp-32-caelum/6991.

Abração e vejo vocês lá! 😉

NPM exibindo mensagem de warn 'deprecated [email protected]' ;(

Quando instalo as depências pro Gulp, tá rolando mensagem de warn 'deprecated [email protected]'.

npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please o graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please o graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please o graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!

Fiz algumas pesquisas, mas ainda não consegui entender o por que e como remover essas mensagens e principalmente se elas interferem no funcionamento das tasks.

Acontece o mesmo aí com vcs?

Pesquisa rápida sobre o mercado a uns tempos atrás

Galera, poderiam me ajudar respondendo esse formzinho safadão rapidinho? ;D

https://t.co/M9fhdcizzJ

Oq faz esse código do Rupture?

Eu estava dando uma olhada no código do rupture, e não entendi bem direitinho o que esse código faz https://github.com/jescalan/rupture/blob/master/index.js

Deve ser alguma coisa boba mas alguém me explica?

Funções como Valores ou Notação por Declaração?

Oi gente, venho do Java e estou querendo me aprofundar bem no JS. Comecei a estudar mas ainda estou no começo mesmo.

Minha dúvida é sobre funções, estou lendo o Eloquent JavaScript e vi que há duas formas de declaramos uma função: Como valores ou por declaração. O que os devs usam mais nos projetos?

Qual a diferença do OnePage para o Paralax?

Qual é a diferença?

Captcha Obrigatório

Opa Pessoal rapidinho aqui , gostaria de saber se é possível o seguinte.

Tenho um formulário de contato ,com o Captcha do Google.
Se a pessoa tentar enviar os dados sem preencher o Captcha* do Google, na mesma página ele acusar erro de formulário não preenchido. ?

Pois , com código que tenho , ele manda para outra página dizendo que não foi preenchido.

Sites com Múltiplos Idiomas

Fala galera,

Gostaria de saber qual ferramenta/maneira vocês utilizam para criar sites Multi-Línguas?

Terá FrontIn Ceará?

Hey guys! Alguém sabe me informar se terá o evento FrontIn no Ceará, Fortaleza? Ou qualquer outro evento de Front?

Ferramenta para extrair os elementos de um arquivo .PSD

Fala tchurminha, sussa :D

Gostaria de saber de vocês, se estão usando algum tipo de ferramenta para extrair os elementos do layout, ver tamanho de font, cor, salvar uma imagem e as parada toda de um um arquivo .PSD, que não seja o proprio photoshop. Algo mais pratico.

Eu estava usando aquele assets.adobe.com, mas a Adobe rancou fora essa semana a opção de extrair.

Enfim, conhecem alguma alternativa pra fazer algo do tipo? :) Bjos ;*

Mixins ou @extend?

Acabei de ler um artigo da csswizardry chamado Mixins Better for Performance.

O autor mostra que por incrível que pareça, um CSS que não usa @extend e sim mixins, é menor na versão final (com gzip) do que um CSS que usa @extend.

Eu realmente não fazia ideia disso. Obviamente, na versão minificada, o CSS com @extend vai ser bem menor, então sempre usei bastante o @extend para não duplicar blocos de código igual.

Mas ainda não estou totalmente decidido. O que pensam sobre isso?

Segmentos dentro do front-end

Lembram do final dos anos 90 que o webdesigner era o menino do computador que fazia do layout até o servidor? Pois é, os tempos mudaram e hoje temos diversos segmentos dentro do desenvolvimento web, um deles, o Front-end.

Só que tenho visto algumas vagas na gringa intituladas "Front-end Designer" e outras "Front-end engineer". Acho que já da pra saber onde quero chegar.

Será que teremos o cara do HTML/CSS que implementa a UI/UX e o motion e um cara do JavaScript que implementa as interações de forma separada numa equipe?

Bower x NPM [Dúvida]

Pessoal para instalar pacotes de desenvolvimento FrontEnd vale a pena usar o Bower ou o NPM?

Precisamos falar sobre o Code In The Dark

Na sexta feira ocorreu a primeira edição do Code In The Dark Brasil, seguindo o modelo do homônimo gringo. Não tenho dúvidas de que o evento tenha sido um sucesso para todos os participantes.

O tema era relevante, em um local que talvez seja o sonho de muito desenvolvedor conhecer, com o pessoal influente da área que talvez muitos não tiveram chance de conhecer e somente acompanham pela internet. Uma oportunidade ótima de interagir com essa galera e de troca colocar os conhecimentos à prova, mesmo que somente acompanhando da torcida.

Mas para alguns, isso não foi realidade. Talvez não todos tenham ficado sabendo, mas rolou uma certa confusão com o e-mail do eventick que todos receberam antes, que dizia que a presença estava confirmada:

Na verdade, esse era um e-mail de pré-confirmação, porém muitos (e quando digo muitos aqui, digo em torno de 40 pessoas, que, considerando o tamanho do evento, é uma parcela considerável), assim como eu, não ficaram sabendo disso até serem barrados na portaria do prédio do Google, sem entender nada. O que aconteceu na verdade foi que rolou um sorteio dos participantes devido à alta procura pelo evento. Até aí, nenhum problema, nada mais justo que fazer um sorteio para democratizar o acesso ao evento (salvo casos de pessoas que os próprios organizadores convidaram por conta, não vem ao caso aqui quão justo ou não isso é). Quem recebeu o segundo e-mail avisando que foi sorteado, ok, porque pôde perceber que o primeiro e-mail de nada valia e como estava sorteado, poderia ir tranquilamente. Agora o problema é: quem não recebeu o segundo e-mail, não recebeu mais nada e, a não ser que acompanhasse o facebook do evento, saberia que não estava na verdade sorteado.

Teve gente que saiu mais cedo do trabalho. Teve gente que além disso faltou na faculdade. Teve gente que comprou passagem de avião, reservou um hotel em sampa, tudo pra participar do evento. Imagina o tamanho da frustração, desespero e raiva que isso pode ter gerado nas pessoas que passaram por isso. Ao descobrir o ocorrido, pedi para amigos meus que tinham entrado, para pedirem um posicionamento dos organizadores. Os mesmos não desceram para dar uma satisfação pelo período de duas horas (!!!) para os que estavam frustrados lá embaixo, somente mandaram informações. Para mim pelo menos, o evento acabou ali e, frustrado, avisei pessoas que estavam a caminho para confirmarem os e-mails e voltarem pra casa, coisa que eu fiz também.

Um dos organizadores, segundo se pode ver pelos comentários na própria página do facebook, desceu após essas duas horas e afirmou que "não tinha que se explicar de nada". Mesmo colocando pra dentro grande parte da galera que insistiu até o último minuto que teriam que entrar, não foi legal o que rolou.
Não teve nenhum tipo de pedido de desculpas público, não teve nada. Foi simplesmente abafado e ficou por isso mesmo.

Pensem que nem todos estavam curtindo a página do facebook do evento, ou seguindo no twitter, ou tinha algum dos organizadores do evento entre os amigos nas redes sociais, ou se inscreveu em algum RSS, ou assinaram algum serviço de notificação por sms, ou o que seja, e puderam acompanhar todas as notícias. Os inscritos chegam ao site através das mais diversas maneiras e seu único canal de comunicação é o e-mail que recebem ao se inscreverem e, possivelmente (possivelmente mesmo), o site, que podem voltar a acessar depois para confirmar programação/local.

Se as pessoas compareceram ao evento por engano, quem errou não foram elas e sim os organizadores que falharam ao comunicar de forma clara, e pelos canais de comunicação corretos, se elas deveriam comparecer ou não. Se a sua única forma de notificações com os participantes é o facebook, deixe isso claro como água. Tenha cuidado com as plataformas que utilizam para o evento, conheçam-a de antemão, para evitar problemas bobos como o ocorrido.

Na minha humilde opinião, faltou planejamento, compreensão, humildade e, principalmente, empatia, como faltou empatia.
Ao organizar um evento, se coloque no lugar dos participantes, pensem em problemas que os mesmos podem encontrar e tente evitá-los, afinal, o evento é feito justamente para os participantes, não? Qual era o custo e complexidade de reforçar a questão do sorteio por e-mail? Ou ao menos enviar um e-mail para os não sorteados?

Não venho por meio desse issue tentar causar polêmica, pelo contrário, quero só que quem for organizar um evento daqui pra frente, possa se conscientizar das causas de se fazer um evento e focar totalmente nos participantes (e não-participantes, quando houverem).

Por favor, peço que entendam o ponto de vista de quem ficou de fora, frustrado. Pensem em todo o planejamento que rolou para poder atender ao evento. Pensem nos sentimentos que se passam ao descobrir que na verdade aquilo que era dado como certo à semanas, na verdade foi um engano seu.

Obrigado.

(PS: pensei em postar no frontendbr/eventos porém acho que lá é mais pra divulgação, então postei aqui, mas posso portar pra outro lugar se estiver errado.)

Teste de integração v2.134210

Design Responsivo

Galera atualmente como vocês estão trabalhando com imagens responsivas ?

Estão utilizando o <picture> srcset sizes ? ou estão utilizando alguma library JS ?

Abraços.

Como profissionalizar sendo freelancer

Fala galera! Alguém aqui é freelancer?! Bom, eu moro em uma cidade pequena onde não tem muita oportunidade, sei que o certo seria sair e tentar a vida em uma cidade maior, mas por alguns fatores ainda não sai nessa aventura, então, estou no caminho de profissionalizar sendo freelancer, alguém tem dicas, ideias, comentários, qualquer coisa que agregue ?

Duvidas @media_query

Tenho meus style.css que estou estudando ( do livro Web designer responsivo: Paginas adaptáveis para todos os dispositivos ),

Obs: Nas ultimas linhas eu tenho alguns @media mais nenhum funciona

* {
        margin: 0;
        padding: 0;
        }



        html {
        font-family: Arial, Helvetica, sans-serif;
        }

        img,iframe,object,embed,video {
            height: auto;
            max-width: 100%;
        }





        .container {
        margin: 0 auto;
        width: 67.5%; /* +/- 960 */
        }

            h1 {
            font-size: 2em; /* 32 / 16 */
            }

            .brief {
                        margin: 1% 0; /* 5 / 593 */
            }

            .content {
             background-color: red;

             margin: 1.5625% 0;  /* 15 / 960 */
            }

                .content-main {
                float: left;
                width: 61.7708%; /* 593 (.content-main ) / 960 (container) */
                }

                    .hero {
                    margin: 4.2158% 0; /* 25 / 593 */
                    }

                        .brief {
                        margin: 1% 0; /* 5 / 593 */
                        }

                    .last-contents {
                    font-size: .75em; /* 12 / 16 */
                    }

                        .last-content-call {
                        float: left;
                        margin: 2.5295% 2.5295% 2.5295% 0; /* 15 / 593 (.content_main) */
                        width: 47.2175%;/* 280  593 */
                        }

                            .last-content-call .secondary-title {
                            margin-bottom: 0;
                            }

                            .last-content-call .brief {
                            margin: 1.7857%; /* 5 / 280 */)
                            }

                .content-sidebar {
                background-color:#F0F0F0;
                float: right;
                padding: 1.0416%; /* 10 / 960 */
                width: 33.5416%;  /* 322 / 960 */)
                }

                    .main-nav ul {
                    list-style-type: none;
                    }

                        .main-nav li {
                        background-color: #F9F9F9;
                        float: left;
                        margin: 4.6583%; /* 15 / 322 (.content-sidebar) */
                        outline: 1% solid #DEDEDE;
                        text-align: center;
                        width: 40.3726%; /* 130 / 322 */
                        }

                            .main-nav a {
                            display: block;
                            padding: 7.6923%; /* 10 / 130 */
                            text-decoration: none;
                            }

            .main-footer {
            background-color: #F0F0F0;
            clear: both;
            float: left;
            font-size: .75em /* 12  / 16 */;
            margin: 1.5625% 0; /* 15 / 960 */
            padding: 1.5625%; /* 15 / 960 */
            text-align: center;
            width: 100%;
            }



             @medial all and (max-width: 640px){
                .content-main{
                    float :nome;
                    }

                .content-sidebar {
                    float: nome;
                }
             }  


             @media all and (max-width: 320px) {
                .main-nav li {
                    float: nome;
                    width: auto;
                }
             }



             @media all (max-width: 640px) {
                .content-main {
                    float: nome;
                }


                .last-content-call {
                    float: nome;
                    width: auto;
                }

                .content-sidebar {
                    float: nome;
                }
             }

SMACSS, BEM, ITCSS e OOCSS qual estilo usar?

Ultimamente eu tenho estudado sobre CSS eficiente, estou lendo o livro da casa do código e tenho ficado muito na dúvida de qual desses estilos adotar, qual o melhor jeito de escrever e organizar os arquivos. E ai pessoal, o que vocês tem usado?

Internet Explorer a saga continua...

Acabei de encontrar um problema no IE10 meus amigos, isso mesmo "10", quando se coloca

background-color: transparent 

em uma ancora (tag A), o mesmo perde toda a àrea de clique, como se nem estivesse ali, resolvi adicionar qualquer cor mais opacidade:

background-color: black 
opacity: 0 

Vocês com certeza se encontraram em várias situações com esse nosso amigo, compartilhe aqui os problemas que encontraram e sua solução o/ @fdaciuk @vitorbritto @lfeh

Problemas com position fixed

Pessoal, boa tarde!
Estou com um problema parece ser relativamente simples e bobo, mas já estou quebrando a cabeça com isso e não acho uma solução, vou tentar descrever e desculpas se por acaso não souber me expressar.

A questão é a seguinte, tenho dois elementos na página content e sidebar que preciso fixar eles quando chegar a determinada altura da página. Isso foi relativamente simples e funciona, porém está quebrando o meu layout, segue print que ilustra a situação.

Nessa primeira imagem mostra os elementos content e side antes de receberem a class que com position: fixed

Nessa segunda imagem mostra os elementos content e side após de receberem a class que com position: fixed

Após receberem a classe eles perdem o tamanho, estou usando o LostCSS para o grid.

Web Service

Prezado Senhores...

Á alguns dias atrás postei uma dúvida sobre Web-Service. foi bem sucedida e resolvida.
porem,agora preciso fazer uma conexão via Web-Service Mobile e não sei como vou faze-lo.

Recebi um PDF novamente, porem agora é mobile; Como posso fazer está conexão ,e como
executarei isso em um app ?

Ps* Galera, sei que estou dando um pouco de trabalho ,más quem nunca foi assim?!.

Segue o PDF ->
integracao_mobile.pdf

@airesvsg

Agradeço desde já . Att Lucas.

Como começar um projeto web corretamente?

Bom dia colegas do Frontbr, venho até você para entender de uma vez, qual é a forma correta de iniciar um projeto web, seja um site ou um app, dês da criação dos diretórios até as primeiras linhas de HTML, CSS, JS, etc, quais framewoks utilizar no inicio do projeto, como começar o versionamento.
Sempre fico em duvida de qual é a maneira correta para iniciar um projeto e as vezes fico com a sensação de que comecei tudo errado.

Sobre tipografia

Fala pessoal,

Como sabem, utilizo o Rucksack para me dar uma força com tipografia responsiva, e hoje li um artigo ótimo da Smashing Magazine sobre o assunto.

Então resolvi abrir uma discussão sobre tipografias, que é uma parte bem delicada do projeto.

Deixo um arquivo de core com as variaveis e mixins bases, onde chamo em vários locais do projeto e utilizo uma class .content para trabalhar com a ideia de textos.

Como costumam trabalhar tipografias?

Demora com jekyll-build

Estou acompanhando as Issues e já vi um muitos ninjas aqui, gostaria de ajuda quem puder...

Iniciei um projeto com Jekyll e Gulp, configurei o ambiente utilizando algumas task básicas e resolvi testar o browser-sync, que me deu um pouco de trabalho mas no final deu certo, porém percebi que quando faço qualquer modificação no SASS ou JS as alterações são feitas imediatamente, nos dispositivos conectados, porém quando faço alteração nos arquivos HTML o Gulp chama a task de build do Jekyll e demora cerca de 5 a 7 minutos pra gerar o build e atualizar as páginas. :'(

Gostaria de saber se alguém já usou dessa forma e se tem outra maneira de criar o build do HTML e fazer o reload das páginas sem tanta demora.

Caso contrário vou abortar esse browser-sync :(

Segue meu gulpfile.js

https://github.com/evertontatu/static-portfolio/blob/master/gulpfile.js

abc

Browserify ou Webpack?

Trazendo uma pergunta que rolou no Front-end Brasil, porém gostaria de mais discussão sobre esse assunto. Qual vocês usam e por que?

Sobre o GraphQL

O que o pessoal de front-end acha do GraphQL?
Interessante essa abordagem de trazer uma query language pro client-side?
Ruim? Trará uma sobrecarga pras respondibilidades no front-end?
Ou é interessante ter esse controle e flexibilidade sobre a estrutura de dados no lado da UI?

React - Guia do Iniciate (PT-BR)

React - Guia do Iniciate (PT-BR)
Aprenda React de forma fácil e progressiva, compreendendo cada detalhe da biblioteca a cada exemplo apresentado.

Gostei desse livro, é uma abordagem bem "Hello World" para quem quer entrar no mundo do React.

https://leanpub.com/react-guia-do-iniciate