First encounter with React JS

This is a small demo made using React and Boostrap. It’s a list page which contains some of the Avengers, with the possibility to reach a show page with details for each character.

The purpose of the demo was to get an opinion on this JavaScript library for user interfaces, since I’m not a big fan of frontend development.

The conclusion:

  • Suitable for simple interfaces;
  • Easy to learn;
  • Possibility  to port the web application to a native iOS or Android application with minimum of effort, using React Native.

The demo:

The code:


react_demo_avengers_list_page react_demo_avengers_show_page

Internet Explorer bug – duplicate characters

One of Internet Explorer versions 6 and 7 bugs, consists in repeating (duplicating) some characters from the end of some elements with the CSS atribute – float.

What’s triggering this bug:

  • Using HTML comments inserted between the elemens with the float attribute.
  • Hidden elements using display: none

Solutions to prevent the duplication of the characters:

Using conditional comments:

<!--[if !IE]> comments here <![endif]-->

Another solution – you can set for the last element with float: left, the right margin at -3px (margin-right: -3px), and -3px for the left margin of the elements with float: right. Also you can set the width of the first div with 3px larger than the width of the last element with float.

Diacritics in web pages

The usage of diacritics in web pages requires Unicode encoding.

In the head section of the page (between <head> and </head>) you need to insert this line:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Here is a list with the corresponding HTML codes of the romanian diacritics :