February 2020

  The simplest react app in 100 lines of code
February 2   |   React

The following code allow us to understand the way we can built a simple react app

Read the comments in the code
<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>React JS Search Results</title>
  <!-- Add React and Babel References -->
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>

    <!-- Every React app must have what’s known as an entry point. 
    The entry point is an HTML element where we insert our React application into the page. -->
    <div id="root">

    <!-- Our Script must have type="text/babel" for Babel to work-->
    <script type="text/babel"> //React code will go here
      // Babel converts this code that looks like HTML into valid JavaScript (JSX: JavaScript XML)
      // The functions in react must be Capitalize to differentiate from normal javascript functions
      // React Functions became Components
      // The Component must return JSX code between parenthesis function ComponentName() { return ( ...JSX Code ... ) }
      // Every React Component must return either JSX elements or other React components.

      /* PROPS (Passing data to the components)
        We can pass data to the function components using attributes and it is passed to the Link function as an argument
        <Link attributeName="value" />

        React collects and organizes the data passed to a given component as a single object.
        The name for data passed to a component, such as title, is props.
        All prop values exist within the function component itself on a props object.

          Make and array of objects and pass down the link components through props.
          Since this is a common pattern in React, it has its own method .map() that works with JSX
          (don't confuse with JS it's similar but Reacts works only for JXS)

      const linkData = [
          title: "React - A JavaScript Library for Building User Interfaces",
          url: "",
          shortUrl: "",
          excerpt: "React makes it painless to create interactive UIs."
          title: "Jorge Anaya's Blog",
          url: "",
          shortUrl: "",
          excerpt: "Personal insights about coding and life"
          title: "Google",
          url: "",
          shortUrl: "",
          excerpt: "When everything fails then Google is your friend, GoogleIt!"

      function Link(props) {
        // We use {} curly braces to insert or interpolate dynamic values wherever we need.
        return (
            <a href="{props.url}">{props.title}</a>
            <div> {props.excerpt}
      // Since React components can return other React components, we can make an App Component
      // The entire JSX expression is surrounded by curly braces
      // JSX allows us to insert any valid JavaScript expression between curly braces.
      function App() {
        return (
            { (link) {
              return (
                  key={link.url} // Each child in a list should have a unique "key" prop
                  excerpt={link.excerpt} />
              ); // return end, function, map() & expression end */
      ReactDOM.render(<App />, document.getElementById('root'))



February 2019

  Find elements inside NodeList using jQuery
February 3   |   Js

Using jquery.find() we can find by element or selector. This is a use case where we have a variable with a NodeList object.



// Get a list of elements and initialize with another function

// Combine with each(Integer index, Element element) to explore its content.
\$(items).find(".collapse-card").each( (i,e) => console.log(e));


  Responsive Image using the fluid-image trick
February 3   |   Css

To achieve a responsive behavior in a web site requires working with several HTML elements, images are one of the most requested. The are several techniques, the most simple one and with 99% backward compatibility (I'm looking to you IE 🤦‍♂️ ) is called Fluid Image, of course is not intended to solve all the problems, but it is a simple fix that works great most of the time.

 Fluid image


img {
max-width: 100%;
height: auto;