Category Archives: Front-end

All CSS Combinator Selectors

A useful CSS tip for selecting nested elements

This a handful table that shows how to combinator selectors works.

According to the w3schools, a combinator

“is something that explains the relationship between the selectors”

There are four combinators:

descendant selector which is represented by a space
child selector, with > signal
adjacent sibling selector, a + signal
general sibling selector, a ~ signal

Above, some examples

Consider the following HTML structure

<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>

The descendant selector (white space) selects all elements that are descendant of a specified element. So, the next code will paint the three <p> elements inside the div with the yellow color, including the one inside the <section> element.

div p {
  background-color: yellow;
}

The child selector ( > ) selects all elements that are children of a specified element. So, the next code will paint the pair of <p> elements inside the div with the yellow color. But not the <p> inside the <section> because this element is not a child, but a descendant.

div > p {
  background-color: yellow;
}

The adjacent sibling selector ( + ) selects an element that is directly after another specific element. So, the next code will paint only the 4th <p> element, since it is the only directly after a <div>.

div + p {
  background-color: yellow;
}

The general sibling selector ( ~ ) selects all elements that are next siblings of a specified element. So, the next code will paint the last pair of <p> elements.

div ~ p {
  background-color: yellow;
}

CSS is intriguing technology with many cool features that can be applied to enhance a great variety of UI/UX proposes. And is very funny to learn.

I recommend the Advanced CSS and Sass course by Jonas Schmedtmann at Udemy.

Have fun.

Styled Components FlatList ReactNative CSS problem

Something happens when a FlatList decorated with Styled Components update your data: the CSS of the Content disappears.

Bellow the original code and then the fix.

The CSS:

import styled from 'styled-components/native';

import DefaultButton from '~/components/Button';

export const Container = styled.View`

flex: 1;

background: #fff;

border-radius: 4px;

margin-bottom: 10px;

export const Image = styled.Image`

width: auto;

height: 200;

border-top-left-radius: 4px;

border-top-right-radius: 4px;

export const Content = styled.View`

flex: 1;

padding: 15px;

export const Title = styled.Text`

color: #333;

font-size: 16px;

font-weight: bold;

margin: 10px 0;

export const Info = styled.Text`

color: #ccc;

font-size: 12px;

margin: 6px 0 6px 15px;

export const Button = styled(DefaultButton)`

margin-top: 10px;

The FlatList:

return (

<Background>

<Container>

<MeetupList

data={subscriptions}

keyExtractor={item=>String(item.id)}

renderItem={({item}) => (

<Meetup

data={item.meetup}

onHandle={() =>handleCancel(item.id)}

buttonText="Cancelar inscrição"

/>

)}

/>

</Container>

</Background>

);

The fix is set the Content flex-shrink to auto in the Content styled component.

export const Content = styled.View`

flex: 1 auto;

padding: 15px;

Admin-lte height bug (fixed)

Admin-Lte template

Hop!

Desenvolvendo um Web App para a Divisão de Homicídios de Niterói São Gonçalo (DH-NSG) utilizando React e o template do Admin-lte vinha enfrentando um bug na visualização da página. O conteúdo era carregado apenas até a metade da página.

Depois de ter desistido por um tempo de corrigi-lo, descobri hoje um workaround em css que corrige este bug.

Segue:

.wrapper {

/*min-height: 100%;

position: relative;

overflow: hidden;*/

width: 100%;

min-height: 100%;

height: auto !important;

position: absolute;

}

Depois de tentar algumas snippets este funcionou e com isso espero ajudar. Até…

React Native keyboard over InputText

During creating a form in React Native I faced a issue with the android keyboard. It override the text field, so I could not see what is the enter of the field.

So I found the solution, actually, three. I adopted the first one, just changing the View by KeyboardAvoidingView component.

Here is the complete solution.

Very cool and useful.

Axios Network Error

Android error image.

Trying to figure out what the hell was going on with a axios get request, I discover by axios – npm documentation a better or more complete way tho handle with error.

This is how:

axios.get(‘/user/12345‘)
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log(‘Error‘, error.message);
    }
    console.log(error.config);
  });

If we log just the error, it will display just the Network Error message on log.

By the way the error was this one: “_response”: “java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.”,

I was trying to access a https local server. I resolved by change the protocol of the req to http.

Hope I can help!

Javascript is awesome

Javascript logo.

I’m very excited about studying Javascript on the mission of expand my knowledges at front-end. The principal goal is use Javascript at my Java back-end projects.

So, two things I really liked on javascript so far is:

template string;
spread operator.

The first concept lets a array be used as params of methods, on a very easy and functional way.

The second one helps on format messages that uses dynamics values, as variables. We can just reference the value inside a string pattern, marked with the ` character.

See the example…

Continue reading →