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: http://cristian-radulescu.ro/github-demos/react_demo-avengers/index.html.

The code: https://github.com/cristianradulescu/react_demo-avengers.

Screenshots:

react_demo_avengers_list_page react_demo_avengers_show_page

Pretty print JavaScript with Google Chrome

The built-in Developer Tools from Google Chrome allows formatting of an inline (minified) JavaScript code to a human readable format.

To format the JavaScript code, fire up the Developer Tools, go to the “Scripts” section and select the desired script. Then press the “Pretty print” button (marked with curly brackets) from the bottom of the Developer Tools. The JavaScript code is now presented in a human readable format.

If the “Pretty print” button is enabled it will affect all scripts which are opened in the Developer Tools’ “Script” tab.

Remove spaces from an input field with JavaScript

This is a small snippet to remove the spaces from an input field using JavaScript. It can be useful when you want a value without spaces, or when you want to replace the spaces from the input field with other characters.

The JavaScript code:

The input field:

The spaces will be stripped from the input field in real-time, as the user types.