DEV Community: Fanny

Planning and designing projects effectively

Fanny — Thu, 19 Nov 2020 16:11:18 +0000

As a way of saving this for a personal consultation, avoiding frequent mistakes and helping people who are not used to exercising the project planning and management muscle, I've decided to write this post. This year, I related to many teams that did not have a programming background, because of that I was the owner and responsible for directing many projects, so I decided to write some of the lessons I learned from experiences I had. These lessons helped me to come up with better ideas, set better the project schedule and consequently succeed in implementing them.

When we have a team of engineers, these project planning responsibilities fall on product managers, product owners and so on, our job is to implement and have insights on how to make the process better. But in any case, having a good plan is essential for good engineering and good design, especially when you are dealing with complex or large projects.

Writing a document

So you had an idea started writing a document you shared with your colleagues, but you didn't get the feedback you expected, because your document might not highlight what you wanted or the way you wanted it?

You ask yourself, what is useful to have in a document so that you can convince and draw the reader's attention to the most important points? And you don't know what to do... I hope to answer this question for you like amazing people answered it for me

Goals

People need to have a clear view of what you intend to do, do it at the top of the document, so they will have this in top of mind while reading your entire text.

You also want to make it clear what things within that scope you want to cover, that is, it is useful to limit and explicitly write down what the project does not propose to do, it is probably also interesting to explain the reasons for not covering these other things.

Problem

It is important to demonstrate which problems you want to solve, so that people understand how relevant and urgent this problem is. It may be interesting to use some metrics or analyze what your team priorities are at that moment. Make it clear if what you intend to do will solve all or part of the problem.

Design

You don't want to go too far in discussing the solution design. It is useful to provide high-level design, so that it helps you and the people who will work on the project, you should stop writing when you feel that the details you are providing will not make it easier for you to build your solution.

Be extremely open to hearing feedback on this part (as well as the others), also make it clear what options you have considered and why you have not followed them. This avoids repetition of discussions and will likely cause you to focus on the feedbacks you need most.

Risks

While there are things that are beyond our control, it is important that you list and try to find out what can go wrong. After all, if the project is a success, the team wins. Take some time to reduce the chances of failure.
From time to time, double check to make sure your assumptions are still valid. Ask your partners for help. And have an alternative, if things don't go well.

Finally? After writing and discussing, stop thinking about risks or failures. Focus on solving your problem.

Milestones

Milestones are very important for people to understand how things are going or how long they will take. So write a series of milestones for the job, so they'll understand it easily.

Estimative

The estimate is certainly difficult to get right; many projects do not work for that.In most cases it is useful to talk to someone who has done something even remotely similar. Tell them what you are going to do and ask for their impression.

People

Record who were the people you requested feedback from and validated your idea. This is useful if you are stuck or want to align if you are heading in the right direction. Also list what that person does will probably be interesting for you to remember when and why you need them.

Certainly planning and defining a document like this requires hard work, probably it will be difficult to get it right the first few times, but as you train, get more practice and help as things will work out better. I hope I have been useful in some way.

Dear, Code Reviewer

Fanny — Mon, 25 May 2020 14:37:15 +0000

Recently, a friend started to discuss with me about some approaches used when developers review his code. He seemed angry about some comments so I decided to do this post, expressing my opinion about things that he said and I frequently see and read in blogs.

The trampoline

So, you are developing a feature, you put your code for review, the reviewer made some comments, you complete the suggestions, the reviewers accepted your changes (The LOOKS GOOD moment) and you push your code. But ... let's talk about the real world.

You develop your feature, and you're very excited.. you place your code for review, the review started ... The reviewers made some comments and suggestions some trivial and others not so easy neither clear. You started to implement the suggestions, ask for clarification and talk about why you didn't made some things. Your updates are good but looking to your new code, there are some things that the reviewers found that they don’t like about your first code. You again made the suggested changes, but new problems are found and this cycle repeats ...

The big problem here is that in each iteration, new problems are addressed, causing an infinite loop in the review, and you might be thinking: "Ok, sometimes the code needs to be improved, it's impossible to avoid those things" although there are a million of reasons for this happens, I think that some common factors to this happen is when the team does not have good guidelines and patterns to review the code or when the comments made by the reviewers are so complicated to understand, and the author cannot achieve the goal.

The whole process needs to be clear for both sides, in the mind of the reviewer needs to be clear the list of things that are required to finish the task, and for the author what things he needs to do, to complete the task.

The nitpick comments

I don't know if you passed through for this situation, but usually, if your code has four spaces instead of two or if you don't have a blank line at the end of the file you'll receive: NIT: {comment}

What do you think about this? These tasks seem things easily replaced for an automated checker like Prettier and Eslint. If my team pass-through for this situation, may I should ask myself, Do we have good style guidelines? and Are we providing some automated solution?

The divergent reviews

Continuing the previous reasoning, if my team doesn't have good style guidelines and a more methodic method to review, probably different reviewers will have different opinions if all the team doesn't know what the priorities, or the best practices, how do they can reach consensus?

Without time, bro

Sometimes you see yourself leaving the review for a time that you can look well and your mind is in the right place. Maybe the review is large or the architecture is complex or is it a breaking change, right?

Right, but nobody wants to be blocked, if the code is not in production, what the value it has?

Of course, there are many reasons to cause this, but if you are an author try to split your features into small pieces, and when you open the review make sure the purpose is really clear. And if you are a reviewer ensure that you have a piece of your time to review code.

Reposting, because the previous had few errors

Don't overabstract the things

Fanny — Mon, 13 Apr 2020 23:08:19 +0000

What if I? should we move this? should we recreate this component?

...

A few days ago, I started to build some components to a large app, and I didn't can avoid a whirl of thoughts, about what is the better approach to build my components, or what is the better way to improve the existents and why not reuse the old ones?

But I forgot one thing, we ALWAYS need a starter point.

So, my coworker said something like:

"Slow down, Fanny. We don't need overabstract the things."

The painful abstraction

Each abstraction adds benefits and costs. When we don't have a deep knowledge about the things, probably we'll pay a cost using an approach for a problem that don't exists, we cannot enjoy properly of the benefits. And this is essential to use abstractions effectively.

I was passing for a problem that is very common among developers: The premature abstraction.

Being premature

Some people talked with me about premature things, but I didn't have a complete understand about. But here's what I found in this situation, you are premature, when you add abstractions in your code, before you really understand the problem, and the possible scenarios.

My point is not say that abstract things is bad, on the contrary, but if I would follow this direction, probably I would leave the things hard to maintain, or unwieldly.

The goal of have an abstraction is to provide an easy way to use things, or fix bugs, and even thought understand the code without the need to look for specific details of implementations.

So, I'll leave here my advice: Sometimes the best thing that you need to do, is delay your abstraction, and start with a simple approach, after this, you probably will gain a better idea of what you need.

HackerNews - The cost of abstraction
Minimal Surface API
The Wet Codebase

React's weaknesses

Fanny — Sat, 29 Feb 2020 12:35:45 +0000

In the last years, React has placed a lot of effort in improve many of it apis to be more easier and friendly to new comers. This happened with hooks, for example one of the motivations was because using classes components is so confused and complex for beginners, beyond the fact that until this point react had problems with reuse stateful logic. Although this exists, one really topic controversial and commented is about the state management in React, and the resistance generated in many developers to learn or use redux, because it is necessary to change a lot of files, and know many abstractions, yeah, we have the <Context> alternative, but do you think that this API is enough to complex things or global state management? or is it better to resort to redux?

My point is that I miss a more structured solution on this topic in React, Last days I was reading reddit and one of the maintaners of redux, it argued that with the library we would be able to have consistent architectural patterns, debugging capabilities and etc. And I agree with him, probably using the Context API and hooks, we'll suffering a lit bit to achieve these things.

Lessons taked while i'm riding my bike

Fanny — Sat, 08 Feb 2020 00:07:46 +0000

Usually i try to cover some topic related to programming that I'm studying, but today i'll talk about a habit that i really enjoy: riding a bike, and the benefits that i figure out while i'm enjoying my daily walk.

For me riding a bike it's not just to sit and move my legs, it's a moment that i can reflect about the things that I planned for my day, and some things that i passed on the week, and is also about focus on the way that i'll cycling.

So, let's deep dive on my lessons.

You're are on the control

When you ride a bike, you're in the control, you need to concentrate your mind in the activity, to don't fall, not lost your target, your direction. And in our life it's not different, if you aims to achieve something you need to put your focus and effort in that, and don't allow that the other things blocks you, or distance you from your goal.

One step at time

It's important have a step at time, make baby steps for the things, start of the basics and it goes progressively increasing your rhythmic.

Try to skip the obstacles

When you're riding, sometimes you have obstacles, but if you like your backside(haha), and you want to keep your bike whole, you need to avoid the obstacles, when is possible. In the life, it's not different, you need to develop the ability to ignore some things for make possible a progress in other areas.

You have your time

We humans, have a habit to compare ourselves with the others, and it's difficult to us understand that each person have your rhythmic, your conditions and your history, when i'm riding, i see people driving in different velocities, and i learned that it's ok, many people will pass in front of me.

Make stops

For you don't make tired, you need to have moments of relaxing, when you is in a transit you is obligate to stop sometimes to allows that the cars pass, and this is very cool because you have a time to reenergise yourself.

And that's it, do you have any lesson that you learned with a bike too? Please, share with me! <3

The beauty of Functional Programming

Fanny — Thu, 26 Dec 2019 21:00:24 +0000

There are many ways to make a program, probably you already made your program like a serie of commands, this is what we called of "imperative programming" or maybe you do your program keeping things in objects and interacting with them sending messages back and forward, this is "object oriented programming", but today i'll talk about Functional Programming, like the others mentionated, functional programming is a coding style, this is not about put or not ; or put {} after or below the expressions, but it's how we can instruct the program to make the things, in a technical way this is a "programming paradigm". So why you should care about this?

Fun Fun Functions ✨

When we talk about the world of functional programming, everything are functions. And the concept is too similar the math concept, when we study at school, the teacher says something like:

A function is a special relationship between values: Each of its input values gives back exactly one output value

from mathisfun

This definition is really important because give us the basis of our programs, called pure functions, pure functions are functions that only depends of its inputs, they don't look for anything else outside of your world, expect the arguments that you passed through, and only returns the output, they don't affect oher part of world. For example, see these functions, you can say what's wrong with the first?

First version ❌


let age = 19

function getMyAge() {
  console.log(`I'm ${age} years old.`)
}

getMyAge(age)
age = 20
getMyAge(age)

Second Version ✅

function getMyAge(age) {
  return `I'm ${age} years old.`
}

getMyAge(19)
getMyAge(20)

In the first case, the function is looking for a variable outside of your scope, changing the world of some way, in this case the output, the ideal is only return the value and if as you noticed, if we call the function, with same argument(even there's no argument), we get it a different value. In a pure function this is not happen.
Now, you have a basic idea of good things provided by functional programming, but we have more, check it out below our abilities 💪.

Side Effects 🌊

A side effect is any interaction with our outside world that occurs during the calculations, that don't happen using pure functions, and our code, can be more predictale, because our results only depends its inputs, if we know what the function looks like, and which inputs it receives, you can predict the result..

Mutability 🐺

Mutability is about things changeable, here in func. programming the mutability is discouranged. When we have immutable data, its state cannot change after you created, if you need change something, you need create a new value.

Mutable example

function changeFirstElem(array) {
  array[0] = 'Lose yourself to dance'
}

const daftPunkPopSongs = ['Instant Crush', 'Get Lucky', 'One More Time']
changeFirstElem(daftPunkPopSongs)

Immutable example

function changeFirstElem(array) {
  const modifiedArray = ['Lose yourself to dance', ...array]
  return modifiedArray
}

const daftPunkPopSongs = ['Instant Crush', 'Get Lucky', 'One More Time']
const modifiedArray = changeFirstElem(daftPunkPopSongs)

This is awesome, because we make the things more safer, its harder do introduce bugs in our code, also means that is easier to test/debug our code. It's because the one thing that we need to know is about the output, follow the params, and if the output is wrong, we're sure that the problem is our function and not because a random interaction.

Recursion 🥞

Recursion is a technique, in that we can solve a problem in small pieces, this help us to avoid some side effects when we use interactions.

function myCount(int i) {
  if(i >= 10) return 0
  else return i + myCount(i+1)
}
myCount(1);

For me, the recursion makes a code more declarative, more readable and cleaner, although in many scenarios i prefer using iterative way.

The super heroes of Functional Programming 🧚‍♀️

Beyond the recursion, we have tree functions that help us to manipulate the data they are map-filter-reducer. In JS, functions also treated as values, since that, we can pass it a parameter to other functions.

Map, given a collection of data, you can pass a function to transform each item.

const numbers = [1, 2, 3];
const doubles = numbers.map(num => num * 2) //[2, 4, 6]

Filter receives a collection of data, and you can pass a conditional function that returns a subset of collection.

const numbers = [1, 2, 3];
const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3]

And finally, Reduce, given a collection of data you can reduce to a single value.

const numbers = [1, 2, 3];
const mySum = numbers.reduce((accumulator, num) => accumulator + num) //6

Conclusion 💃

I'm beginning on the study of functional programming, and these things motivates me to start and keep seeing many resources, obviously, functional programming has weakness, but now that's not the point. If you need other resources i'll left some below, enjoy and have-fun!

Books

Hackernoon - Understanding Functional Programming
Professor Frisby's Mostly Adequate Guide to Functional Programming
Functional JavaScript Mini Book by Jichao Ouyang
Pragmatic Function Javascript online book

Talks

Anjana Vankil - Functional Programming: What? Why? How?One of my favourites
Anjana Vankil - Immutable data structures for functional JS
Fun Fun Function Series

My Data Visualization Resources

Fanny — Wed, 18 Dec 2019 12:55:44 +0000

Last months, i decided to go deep to learn a little bit about data viz, more specifically about charts. In almost everything that i do, i have inspirations, today i want to share my resources about the principles and how to make good charts. I have used or gone through each of these personally.

fanny / data-vis

My collection of resources and other useful information for my personal studies of data visualization

Data Visualization 📊

My collection of resources and other useful information for my personal studies of data visualization

Content 📝

Miscellaneous 🃏

Visual Encoding 👀

Design Systems

Blogs 💻

React Libraries ⚛️

Recharts Based on d3
Uber datavis
Victory
Nivo
VX

Creative Coding Inspirations 🎨

Courses 🎓

Pluralsight - Data Visualization: Best Practices $$

Books 📖

Storytelling with data

…

View on GitHub

Usando Scrapy para obter metadados das músicas dos Parcels através do Genius

Fanny — Sat, 31 Aug 2019 21:55:01 +0000

Você já quis obter dados de um serviço que não disponibiliza uma API? Se você faz Computação na UFCG, provavelmente já escutou alguém falando do bot de matrícula. Já perguntou como ele funciona? Pois bem, no post de hoje você aprenderá como é possível fazer essas coisinhas e poderá usar sua criatividade para brincar e explorar ainda mais.

Mr. Robot

Um web crawler pode ser definido como um script ou programa que é utilizado para acessar um website, extrair conteúdo e descobrir páginas relacionadas ao mesmo, repetindo o processo até que não existam mais páginas a ser pesquisadas.
Eles são muito importantes, pois as engines de busca os utilizam para retornar resultados eficientes; devido a isso, frequentemente, algumas pessoas se referem a eles como bots da internet. De uma forma superficial, você pode pensar no crawler como um carinha que faz requisições para as páginas que ele encontra e, à medida que percorre essas páginas, faz o parse do seu HTML.

Pré-Requisitos

Para conseguir reproduzir o que faremos nesse tutorial você precisará ter o Python 3 configurado. Uma alternativa é usar o virtualenv, que possibilita a criação de um ambiente de desenvolvimento isolado.

Além do Python 3, faremos uso do Scrapy, um framework que possui as ferramentas necessárias para extrair dados de websites, processar os que você queira e armazená-los na estrutura de seu interesse. Apesar de ser possível construir um crawler usando módulos fornecidos pelo próprio Python, à medida que o seu projeto cresce, pode se tornar complicado gerenciar a execução do seu robôzinho, por isso faremos uso desse framework. Entretanto, caso você tenha interesse em conhecer outras alternativas, deixarei links nas referências.

Para instalá-lo, utilize o índice de pacotes do Python(PyPI), através do seguinte comando:

pip install Scrapy

Feito isso, podemos dar início à nossa implementação.

Além das letras

Se você usa o Spotify, já viu que vez ou outra em algumas músicas são exibidas as letras e algumas informações interessantes que são extraídas do Genius. Motivada em obter essas informações de uma banda que eu conheci recentemente, chamada Parcels (inclusive, fica aqui a sugestão: se você gosta de Daft Punk, provavelmente vai curtir a música deles), decidi construir esse crawler.

A primeira coisa que um crawler precisa é de um ponto inicial, também chamado de seed, que será usado para iniciar a extração dos conteúdos. No nosso caso, esse ponto será a página da banda no Genius (essa aqui).

Uma vez que temos isso, podemos iniciar a construção do nosso robôzinho. Crie um arquivo python chamado genius.py, que possui o seguinte conteúdo:

import scrapy

class GeniusSpider(scrapy.Spider):
    name = "genius"
    start_urls = ['https://genius.com/artists/Parcels']

Primeiro, importamos o Scrapy para ter acesso às funcionalidades que esse módulo fornece. Em seguida, criamos um classe chamada GeniusSpider, baseada na Spider do Scrapy; é ela que define quais métodos estamos hábeis a usar, métodos estes que poderão nos auxiliar durante a execução do crawler. Por fim, definimos o nome do spider como genius e o nosso seed como sendo a página dos Parcels.

Diferentemente do que fazemos para executar scripts em Python, usaremos o comando que o próprio Scrapy provê por meio da sua CLI:

scrapy runspider genius

Certo, temos várias letrinhas bonitinhas e outras nem tanto, mas o que tudo isso quer dizer?

O Scrapy carregou e configurou o que precisava para iniciar;
Requisitou a url que definimos no start_urls, e baixou o seu conteúdo;
Repassou esse conteúdo para um método parse. Como não o tínhamos criado, nada aconteceu e ele finalizou a execução.

Extraindo metadados

O próximo passo é definir como o Scrapy deve extrair o conteúdo: fazemos isso definindo o método parse. Nesse passo, é importante que você entenda como estão organizados os elementos da sua página, pois será essencial para transmitir ao crawler quais locais ele deve raspar quando extrair a página.

Analisando a imagem acima, você pode ver que à sua direita existe uma listagem de cards com as músicas populares que, quando clicados, nos levam ao conteúdo que queremos. Dessa forma, esse deve ser o local de onde nosso crawler irá extrair os links.

O Scrapy extrai o conteúdo através de seletores, que são "padrões" ou "modelos" que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento HTML. Para conseguir fazer isso, o Scrapy fornece duas formas: através do Xpath e através de seletores CSS; usaremos os seletores CSS por questão de simplicidade.

Usando o inspetor do meu browser para analisar quais os nós que contêm esse link e então formar o nosso seletor, consegui notar que o elemento que contém essa lista de cards é uma div. Veja no GIF:

<div class="mini_card_grid-song">
  <a href="...">...</a>
</div>

Sendo assim, podemos informar ao Scrapy que ele deve obter algo como:

div.mini_clard_grid-song a::attr(href)

Isso indica que queremos os links que são filhos de um elemento da classe mini_card_grid-song, por isso o . (como em CSS). Além disso, adicionamos esse trecho ::attr(href) depois da tag a, porque se definíssemos o padrão apenas com a tag teríamos todo o nó HTML, e não apenas a url.

Para entender melhor sobre os seletores CSS, veja esse link da documentação.

Assim, podemos construir nosso método:

 def parse(self, response):
        songs_urls = response.css('div.mini_card_grid-song a::attr(href)').getall()
        for song_url in songs_urls:
            yield scrapy.Request(url=song_url, callback=self.parse_lyrics_page)

O método é composto por um parâmetro response, que indica o conteúdo obtido após o crawler ter requisitado nossa url inicial. Feito isso, temos as urls das músicas sendo obtidas a partir do nosso seletor; essa lista de urls que o crawler requisitará é chamada de frontier. É importante ressaltar que usamos o getAll(), porque queremos extrair todos os seletores que casarem com o padrão que passamos, mas às vezes estamos interessados apenas na primeira ocorrência e podemos fazer uso do get(). Uma vez que temos as urls, fazemos as requisições, passando a url e uma callback, que é uma função que será executada após o crawler fazer download da url que passamos.

Ótimo, conseguimos alcançar as páginas das nossas músicas, mas depois que chegamos nelas, o que faremos? Seguimos um processo muito parecido com o anterior, diferindo apenas que, ao invés de tentar extrair links, poderemos extrair as informações desejadas. Do passo anterior, vemos que o método que será executado após ser consultada a página da música é o parse_lyrics_page, então adicione esse trecho ao seu arquivo:


    def parse_lyrics_page(self, response):
        title = response.css('div.song_body-lyrics h2::text').get()
        song_metadata = response.css('div.rich_text_formatting p::text').getall()
        artists = set(response.css('span.metadata_unit-info a::text').getall())
        lyric = response.css('div.lyrics p::text').getall()
        annotations_ids = response.css('a::attr(annotation-fragment)').getall()

        item = {
            'title': title,
            'artists': artists,
            'lyric': lyric,
            'metadata': song_metadata,
            'snippet_lyric': [],
            'annotations': []
        }

        if annotations_ids:
            return self.get_annotations(response, annotations_ids, item)
        else:
            return item

    def get_annotations(self, response, annotations_ids, item):
        for annotation_id in annotations_ids:
            url = urljoin(response.url, annotation_id)
            yield scrapy.Request(
                url=url,
                callback=self.parse_annotation_page,
                meta={'item': item}
)

Muita coisa, né? Mas vamos por partes, como diria Jack.

Para extração das informações básicas como os artistas, a letra, o título e os metadados, não temos nenhuma novidade em relação ao que fizemos na extração dos links, já que só precisamos fornecer o seletor e ele irá obter a informação.

No entanto, as anotações seguem um comportamento diferente. Olhando a página, você verá que os elementos que deveriam conter as informações de anotações das músicas contém apenas um identificador, que redireciona para outra página que abriga o conteúdo delas. Então, o que estamos fazendo é:

Se existem anotações, obtenha seus ids e, para cada id obtido, concatene a nossa url inicial:

urljoin(response.url, annotation_id)

E, em seguida, fazemos uma requisição para cada um deles. Mas espere, essa requisição tem algo que ainda não vimos antes: um parâmetro chamado meta.

O meta é a forma que o Scrapy provê para que consigamos nos comunicar entre uma página e outra. Então, o que estamos querendo dizer é que toda vez que ele consultar as páginas das anotações, leve consigo as informações que já extraímos dessa. Isso será útil para unirmos os dois objetos e retornamos os resultados.

Agora que você está na página de anotações, encontre os seletores das anotações e retorne o resultado, e pronto, você terá feito o crawler. Deve ficar algo como mostrado no trecho abaixo:

    def parse_annotation_page(self, response):
        snippet_lyric = response.css("meta[property='og:title']::attr(content)").getall()
        annotations = response.css("meta[property='og:description']::attr(content)").getall()
        item = response.meta['item']
        item['snippet_lyric'] = snippet_lyric
        item['annotations']= annotations

    return item

Caso não existam anotações, ele já retornará o resultado, que é o objeto com as informações que obtivemos na primeira página. Para salvar o que coletamos em um json, usamos o comando:

scrapy runspider genius -o parcels-lyrics.json

Você terá algo com:

Nota: É possível salvar o dado em outros formatos, como csv, dê uma olhada na documentação.

E é isso, você construiu o crawler! :hoo-ray:

Considerações finais

Até aqui você aprendeu os conceitos básicos para construir um crawler. À medida que seu projeto expandir, você precisará lidar com outras coisas, como politeness policies, porque pense: se fizermos muitas requisições para um site, podemos sobrecarregá-lo e torná-lo indisponível por algum tempo para outros usuários. Leitura de sitemaps também são importantes para garantir que o crawler consiga obter efetivamente certos links que o website acredita ser essenciais, além de várias outras técnicas.

Entretanto, agora que você já sabe o básico, me conta nos comentários alguma ideia que você pensa em construir! E se tiver qualquer dúvida ou sugestão, fique à vontade para adicionar comentários neste post ou trocar uma ideia comigo fora dele (minhas redes sociais estão mapeadas no meu perfil).

E se quiser estar por dentro do que eu tô fazendo e escutando (música é realmente uma das minhas paixões além de Computação), me segue no Spotify ou Last.fm e GitHub.

Referências

Tutoriais

Livros

Obrigada

Muito obrigada pela leitura! Fique atento: em breve, teremos novos artigos de contribuidores do OpenDevUFCG aqui no dev.to. Acompanhe o OpenDevUFCG no Twitter, no Instagram e, claro, no GitHub.

What i've learned contributing for firefox dev tools

Fanny — Sat, 22 Jun 2019 03:18:47 +0000

It's very common when we join in a community, we feel that don't be capable, or that don't have knowledge enough to fix a problem. Mainly, when it is Firefox, that is a gigantic community, i also passed through this, and i will tell you how i got over.

Don't be afraid

Beginning to read and try to understand the project, naturally, there were many snippets that I didn't understand, but there were anothers, that is very similar to my university projects, see this component of dev tools project:



/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";

const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { getAllFilters } = require("devtools/client/webconsole/selectors/filters");
const { getFilteredMessagesCount } = require("devtools/client/webconsole/selectors/messages");
const { getAllUi } = require("devtools/client/webconsole/selectors/ui");
const actions = require("devtools/client/webconsole/actions/index");
const { l10n } = require("devtools/client/webconsole/utils/messages");
const { PluralForm } = require("devtools/shared/plural-form");
const {
  FILTERS,
  FILTERBAR_DISPLAY_MODES,
} = require("../constants");

const FilterButton = require("devtools/client/webconsole/components/FilterButton");
const FilterCheckbox = require("devtools/client/webconsole/components/FilterCheckbox");
const SearchBox = createFactory(require("devtools/client/shared/components/SearchBox"));

loader.lazyRequireGetter(this, "PropTypes", "devtools/client/shared/vendor/react-prop-types");

class FilterBar extends Component {
  static get propTypes() {
    return {
      dispatch: PropTypes.func.isRequired,
      filter: PropTypes.object.isRequired,
      persistLogs: PropTypes.bool.isRequired,
      hidePersistLogsCheckbox: PropTypes.bool.isRequired,
      showContentMessages: PropTypes.bool.isRequired,
      hideShowContentMessagesCheckbox: PropTypes.bool.isRequired,
      filteredMessagesCount: PropTypes.object.isRequired,
      closeButtonVisible: PropTypes.bool,
      closeSplitConsole: PropTypes.func,
      displayMode:
        PropTypes.oneOf([...Object.values(FILTERBAR_DISPLAY_MODES)]).isRequired,
    };
  }

  static get defaultProps() {
    return {
      hidePersistLogsCheckbox: false,
      hideShowContentMessagesCheckbox: true,
    };
  }

  constructor(props) {
    super(props);

    this.onClickMessagesClear = this.onClickMessagesClear.bind(this);
    this.onSearchBoxChange = this.onSearchBoxChange.bind(this);
    this.onChangePersistToggle = this.onChangePersistToggle.bind(this);
    this.onChangeShowContent = this.onChangeShowContent.bind(this);
    this.renderFiltersConfigBar = this.renderFiltersConfigBar.bind(this);

    this.maybeUpdateLayout = this.maybeUpdateLayout.bind(this);
    this.resizeObserver = new ResizeObserver(this.maybeUpdateLayout);
  }

  componentDidMount() {
    this.filterInputMinWidth = 150;
    try {
      const filterInput = this.wrapperNode.querySelector(".devtools-searchbox");
      this.filterInputMinWidth =
        Number(window.getComputedStyle(filterInput)["min-width"].replace("px", ""));
    } catch (e) {
      // If the min-width of the filter input isn't set, or is set in a different unit
      // than px.
      console.error("min-width of the filter input couldn't be retrieved.", e);
    }

    this.maybeUpdateLayout();
    this.resizeObserver.observe(this.wrapperNode);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const {
      filter,
      persistLogs,
      showContentMessages,
      filteredMessagesCount,
      closeButtonVisible,
      displayMode,
    } = this.props;

    if (nextProps.filter !== filter) {
      return true;
    }

    if (nextProps.persistLogs !== persistLogs) {
      return true;
    }

    if (nextProps.showContentMessages !== showContentMessages) {
      return true;
    }

    if (
      JSON.stringify(nextProps.filteredMessagesCount) !==
        JSON.stringify(filteredMessagesCount)
    ) {
      return true;
    }

    if (nextProps.closeButtonVisible != closeButtonVisible) {
      return true;
    }

    if (nextProps.displayMode != displayMode) {
      return true;
    }

    return false;
  }

  componentWillUnmount() {
    this.resizeObserver.disconnect();
  }

  /**
   * Update the boolean state that informs where the filter buttons should be rendered.
   * If the filter buttons are rendered inline with the filter input and the filter
   * input width is reduced below a threshold, the filter buttons are rendered on a new
   * row. When the filter buttons are on a separate row and the filter input grows
   * wide enough to display the filter buttons without dropping below the threshold,
   * the filter buttons are rendered inline.
   */
  maybeUpdateLayout() {
    const {
      dispatch,
      displayMode,
    } = this.props;

    const filterInput = this.wrapperNode.querySelector(".devtools-searchbox");
    const {width: filterInputWidth} = filterInput.getBoundingClientRect();

    if (displayMode === FILTERBAR_DISPLAY_MODES.WIDE) {
      if (filterInputWidth <= this.filterInputMinWidth) {
        dispatch(actions.filterBarDisplayModeSet(FILTERBAR_DISPLAY_MODES.NARROW));
      }

      return;
    }

    if (displayMode === FILTERBAR_DISPLAY_MODES.NARROW) {
      const filterButtonsToolbar =
        this.wrapperNode.querySelector(".webconsole-filterbar-secondary");

      const buttonMargin = 5;
      const filterButtonsToolbarWidth = Array.from(filterButtonsToolbar.children).reduce(
        (width, el) => width + el.getBoundingClientRect().width + buttonMargin, 0);

      if (filterInputWidth - this.filterInputMinWidth > filterButtonsToolbarWidth) {
        dispatch(actions.filterBarDisplayModeSet(FILTERBAR_DISPLAY_MODES.WIDE));
      }
    }
  }

So, i thought, "Ok, when i don't understand something in a project that i developed with my university colleagues, i try understand, searching or asking to them, why i dont make the same here?"

Initially, i was very ashamed of asking to someone(who knows me, knows that i very ashamed, fortunately i'm working on this in last days haha), but as i became aware of developer interactions with the community, I saw how much each one is always willing to teach how each thing is done and help you deal with some problem.

And so I started to get involved, I went to download the project and set up, and i had many problems, the majority i got resolve looking the issues reported and resolved by community, but there was one, that i can't remember, that i couldn't. I had to send a message in firefox chat and in few minutes, a developer answered me and i got fix the problem(Thanks to Nicholas Chevobbe)

And it was so that i finally got set up the project in my machine, then, don't be afraid of ask for help, when you feel very lost in a thing, surely, there will be someone willing to help you.

An important part that I forgot to mention is that in order to set things up on my machine, I first read this documentation. And i follow the instructions, it's very complete both explains the configuration and their workflow, code patterns etc

First things first

Once i had set up the project, i was very excited to start developing, after all, i was almost achieving realize my dream of contribute to firefox!!

One more time, i was a little confuse, then what should i do? I asked to the guy who helped me, as i could start to contribute. Who has a little experience with open source, knows that the majority of communities have some issues labeled as "Good First Issue", so what he recommended for me was look two links:

Then, i read one problem, this, I thought, "HERE IS MY FIRST PROBLEM!", I, as well as the mentor, we underestimate the problem, when reopening the discussion, the maintaners realized that it was not so simple, I had to talk to the network team, change some files that are not so intuitive for beginners, which made me look for others problems

The second that i found was this. In short, when we had a link tag, we needed to show an option to copy the link from that tag. Previously, we needed to copy the entire tag and manually extract the link. If you read the topic, I initially understood the problem in a different way, i wanted to use regex, because I did not know it included an html tag. But then a mentor went there and explained what really should be done, and he even suggested a tool to debug and better visualize what I was doing and that starts the next topic.

(As you noticed, i fail many times, but fortunately always there was someone who helped me, so do not be afraid to try !!)

Use tools to your favor & debug

As i said before, the documentation explains very well each module, for example, when i needed modified some thing in console, i went directly in webconsole directory and i tried to find a code relationed with the issue description.

To help me debug the code of the browser, i used the tool quoted earlier, it's very important that you use it, because we are accustomed to do to analyze a web development project looking at the browser console, but what happens if we are developing the browser console?

We can not see through the console, the code of the browser console itself, so we use it, and it is so indispensable in our development.

Also, to complement the documentation studies, I found this link is quite interesting, because it gives an explanation of some internal things of these tools .

Basically I analyzed the code using this browser tool box tool, and looking at the doc along with that link, and sometimes when I did not really find the link of the thing I needed, I would ask someone else, then once again DO NOT FEEL FEAR!!!

Once you've done that, you'll already have the knowledge to submit your first pr (or what they call it, your patch) in the documentation, explain everything right, how you assign it to a reviewer, how to commit. It's worth mentioning that they use a different git system, it's the mercurial one, but it's very similar to the way things are done, so if you know git, you'll be able to unroll.

One of the coolest parts when I submitted my first pr and it was accepted was to be recognized in the chat, I was so happy, so happy that I even took print of that moment:

In addition, almost every week, they post on their blog the update of the week, including the work of contributors, and my name appeared on the page, twice, people, I was very happy !!!!!!!!!!!!!!!!

Week 1
Week 2

So once again, do not be afraid to contribute to the firefox community, I overcame my fear and shame, and I felt very accomplished, and not only that, be sure that you will be very well recognized for your work, the community is very receptive and welcoming, so I leave here my experience and suggestion as an excellent community to contribute.

How to copy props in react dev tools

Fanny — Thu, 16 May 2019 23:25:16 +0000

Today, while I was working on a bug, I found myself needing to copy a props of a React component, so I realized that the react dev tools did not have this functionality, after some searches, i found the solution.

EDIT: react dev tools has a pretty simple solution, thanks to Eugene

Open the ReactDevTools in Browser
Select the component that contains the props, in that you need copy (when you make this, the browser will be create a variable for save the component that you clicked, generally the name is $r)
Open the console, and save the prop in another variable
Use the copy method and "don't worry, be happy! :D" as me.

Cheers! 😗 😗 ❤️