Eventos WordPress

WordCamp Europe Second day recap

The second day of WordCamp Europe I saw some familiar faces that I saw the last day, for example, Kat a Woocommerce employee, she is responsible for documenting the plugins and API inside Woothemes. Andres the guy that works at WPML, Julia a German girl works as a freelancer in Berlin. Theses things make the event easier because I started to know the people and know whom I asked what I need do.

My Task

Now was in the registration; this time was a little hard because, I needed to give many different pieces of information about the event, about the rules, how solved some small problems. But was good to practice my English.

After the registration, I finish my tasks in te second day and at 11 AM I went to Halle E to watch the lectures, the first that I saw was about rest API. I think this is the focus of Automatic in this time, Calypso, Rest API and REACT are present in all lectures about development. If you haven’t studied yet, you need look theses technologies.

When the second day ended, I was so tired but felt everything was good.

After the second day was the after party, I had to meet my friends in another party and just pass to say hello and decided to walk around the city before went to another place and this was the best idea. Wien at night is so beautiful, the architecture, the city centre, the lights everything creates a wonderful atmosphere. The city is incredible. After I was little walking through the city, I meet my Brazilian friend that works in Mailpoet, there we talked about work, life in Europe and remote jobs.

The contributor day

The last day was the contributor day, there were many tracks, that we could contribute to:

  • Community
  • Marketing
  • Theme Review
  • WordPress Core
  • Rest API
  • Translation

There we needed to choose one of these themes, and I decided Theme review was a good experience, in the first part, the Leader developer shows how to review a theme and give many tips. In the second part, we choose a Theme in the repository to review. For me was the first time that I reviewed a theme in the WordPress repository before I didn’t figure out this was so simple.

Last words

In resume work as a volunteer was the best thing that I decided to do in my time in Europe, I knew many people, getting touch with old friends. Was a big opportunity to know the European WordPress Community and was my first and biggest event as crew in Europe. Now I will start looking for another event here in Europe.

Tutoriais Web

Eventos com React

Nesse post iremos ver como trabalhar eventos com react. Se você tem um background JavaScript. Quando trabalhamos com vanilla JavaScript temos várias formas de trabalhar com eventos, adicionando atributos no nosso elemento html, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

<button onclick="doSomething">Clique Aqui</button>
Code language: HTML, XML (xml)

Este método trás muitos problemas, por exemplo, manutenção e gerenciamento de eventos. Outro formato adicionando um listener:

<script> document.getElementById('me').addEventListener('click', function(){ alert('hello') }); </script>
Code language: HTML, XML (xml)

React tem seu próprio gerenciamento de evento por uma série de razoes, por exemplo, um diferente esquema de gerenciamento do DOM o virtualDOM, React tenta deixar o gerenciamento de eventos mais consistente. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() boolean isDefaultPrevented() void stopPropagation() boolean isPropagationStopped() DOMEventTarget target number timeStamp string type
Code language: JavaScript (javascript)

Outra questão importante eventos dentro de React sao passados como propriedade em camelCase onClick, ou onFocus, tambem podemos utilizar stopPropagation() ou preventDefault() como eventos nativos do JavaScript. O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

Antes de trabalhar com eventos precisamos entender é a questão de props e state, no exemplo abaixo quando publiquei este post(2 anos atrás) utilzei createClass formato utilizado com ES5 nessa versao vou utilizar ES6:

class ButtonComponent extends React.Component { constructor(props) { super(props); this.state = {active: true}; } toggle() { this.setState((prevStatus) => ({active: !})); } render () { return <button onClick={() => this.toggle()}> Status:{ + ''} </button>; } } ReactDOM.render( <ButtonComponent />, document.getElementById('events') );
Code language: JavaScript (javascript)

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento nos acionamos quando passamos o render do nosso componente neste caso onClick.

Lembrando todos os exemplos estão no meu github:

Eventos WordPress

Wordcamp Europe first day recap

I finished my first experience as a volunteer in an IT event outside Brazil. Now I can say – It was amazing. Wordcamp Europe was a huge event with more than 1500 people from different nationalities. A crazy thing about Europe, here is easy to find different nationalities anywhere, imagine in a huge event like that. Many different cultures in a short distance if we compare it to Brazil. But sometimes language is not a real problem most of then speak english. It is possible speak with, Polish, German, Dutch, Finnish…

It is time

On Friday at 7:30AM some volunteers were there waiting to the doors open, some of them knew each others, because two days before happened some warm up events. When they opened the doors to us, we got the last instructions to start to work in the event: where the stages were, what our tasks were etc…. At 8:30AM the doors WERE opened for attendants. The same problem about registration happened in any WordCamp around the world, a huge group arrived at the same time and we needed to make the things go quickly. But always before the first lecture the groups were inside the event. This moment reminded of WordCamp São Paulo.

9:30AM I STARTED to WORK: door guard. What I need to do? Things like: Pass instructions about the Stage, informations about the schedule, show the directions to other stages and close the door when the place is full. Easy? A little. It was good because I started to speak a lot, I enjoyed the time to practice my english during two hours, The plan was to stays there only one hour, but the time passed by and I didn’t notice. When I finished I got another task: to organise the vegetarian line to the lunch. And my last task was inside the Swag station.

The lectures

After my work I could watch one lecture about Calypso the new react WordPress API, Matias presented this lecture, I met him in my first WordCamp São Paulo. The second lecture that I saw was with Erica she talked about the duties and challenges of being a “Happiness Engineer”.

The first day was little hard. When I arrived there I was tired because I went to another trip before and started working in sequence, the first day I needed to know many things about the event, many new words, new friends. But I love Wordcamps and this made things easier.

I was a Wordcamp organiser and volunteer in Brazil for a long time and the feeling is the same in another country, the first minutes when the people started to arrive, at the same time I started to think about all the things we need to do the best event, I started to feel the adrenaline to make things work.