DEV Community: Carlos Felix

What I'm learning with live coding

Carlos Felix — Fri, 28 Aug 2020 01:38:11 +0000

Hello everyone 👩🏻‍💻 👨🏻‍💻,
It has been a week since I started doing live coding at Facebook where I learn Elixir. I started this as an experiment, doing something new is always challenging.
I've already done two live streams.

I recommend everyone to do it at least one time in life. In my case I picked up a programming language that I've never used before and started learning it in front of everyone.
It's teaching me some great lessons, I've figured out that the path of learning can't be minutely planned, and you don't have to be ashamed to fail. Sometimes things work out and sometimes not.

It's also a great exercise to feel more encouraged to express yourself and on the other hand you can be helping people too. 😃

I Published today a React Component on NPM

Carlos Felix — Tue, 18 Aug 2020 18:53:45 +0000

👨‍💻Source code available on github

Hi everyone, today I published my first NPM package, it's called react-basic-json and it's a JSON viewer React Component.
This component receives a json to generate a Treeview. You can pass the data property as a javascript object like this:

import { BasicJSON } from 'react-basic-json'
const json = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969,
    message: {
        mid: 'mid.1457764197618:41d102a3e1ae206a38',
        seq: 73
    }
};
<BasicJSON data={json}/>

or you can pass a string representing a JSON as the data property:

const json ='{"make":"Ford","model":"Mustang","year":1969,"message":{"mid":"mid.1457764197618:41d102a3e1ae206a38","seq":73}}'
<BasicJSON data={json}/>

You can install via NPM:

npm install react-basic-json

Interested in the code? See the repository bellow:

carlosfrodrigues / react-basic-json

A basic JSON viewer made with React

...and the npm package page is https://www.npmjs.com/package/react-basic-json

I'd like to say that building a react component is a great experience that I recommend for everyone interest in React. It's a challenge that makes you feel good when you finish it.
Thank You!

Silkscreen - generate fullpage with markdown

Carlos Felix — Tue, 11 Aug 2020 13:07:59 +0000

I built in Haskell a tool to generate FullPage HTML Slides from Markdown files. I made this project to practice Haskell, you can check the github repository:

carlosfrodrigues / silkscreen

Generate FullPage HTML slides with Markdown

Any suggestions and collaborations are welcome.

Say hello to ReasonReact - building a lyrics search web app

Carlos Felix — Fri, 07 Aug 2020 17:11:07 +0000

👨‍💻Source code available on github

Why ReasonReact?

ReasonML is a new syntax and toolchain for Ocaml created by Jordan Walke, a software engineer at Facebook, who also created React.
It give us the OCaml's typesystem with a similar javascript syntax.
With ReasonReact, we can actually write Reason code that compiles to idiomatic ReactJS.

Creating a new project

We're going to build a lyrics search web app using the lyrics.ovh API

First, with the npm installed in your machine, execute:

npm install --global bs-platform
bsb -init lyrics-finder -theme react-hooks
npm start
# in a new tab
npm run server

It will generate a template example code, let's delete all the components that are rendered on the index.re. Inside src create the folder LyricsFinder with the file LyricsFinder.re,
On index.re let's render only this new component :

ReactDOMRe.render(
  <LyricsFinder />,
  makeContainer("Lyrics Finder"),
);

Working on a ReasonReact component

We will start working on the LyricsFinder.re file
So, let's declare the type lyrics in the best oCaml-like way:

type lyrics =
  | NotLoadedLyrics
  | ErrorFetchingLyrics
  | LoadedLyrics(string);

Now it's time to make the react component, all you need is use the @react.component decorator and create the
make function.
Inside our component, let's use React Hooks to set the state of our application. We will define the lyrics, artistName and songName:

[@react.component]
let make = () => {
  let (lyrics, setLyrics) = React.useState(() => NotLoadedLyrics);
  let(artistName, setArtistName) = React.useState(() => "");
  let(songName, setSongName) = React.useState(() => "");
}

We must write our Reason JSX (it's a little bit different from the regular JSX) inside the make function, so we create a form with field for the artistName and the songName and a submit button:

  <div>
  <form onSubmit>
  <input type_="text" id="artist" placeholder   ="artist" name="artist"value=artistName onChange={
    e => {
      setArtistName(ReactEvent.Form.target(e)##value);
    }
  } />
  <input type_="text" id="song" placeholder ="song" name="song"value=songName onChange={
    e => {
      setSongName(ReactEvent.Form.target(e)##value);
    }
  } />
  <button type_="submit"> {React.string("submit")} </button>
  </form>
  </div>

As we can see above the onChange function for the inputs change the state of the artistName and songName. What we have to do now is create a function for the submit button, we will need the fetch function, Bucklescript, wich transpile code from Ocaml to Javascript, can help us giving the external fetch function from javascript:

[@bs.val] external fetch: string => Js.Promise.t('a) = "fetch";

So let's create the onSubmit function. This function returns the unit type, in Ocaml it's used to represent the type of expressions that are evaluated for a side-effect only.

  let onSubmit = (e: ReactEvent.Form.t): unit => {
    ReactEvent.Form.preventDefault(e);
    Js.Promise.(
      fetch("https://api.lyrics.ovh/v1/" ++ artistName ++ "/" ++ songName)
      |> then_(response => response##json())
      |> then_(jsonResponse => {
          if(jsonResponse##hasOwnProperty("lyrics")){
          setLyrics(_previousState => LoadedLyrics(jsonResponse##lyrics));
          }else{
            setLyrics(_previousState => ErrorFetchingLyrics);
          }
          Js.Promise.resolve();

      })
      |> catch(_err => {
          setLyrics(_previousState => ErrorFetchingLyrics);
           Js.Promise.resolve();
      })
      |> ignore
    );
  };

As we can see, with the onSubmit function the lyrics will receive the value according to the fetch response.
We will use the pattern matching on lyrics to give the result, on the reason JSX part:

  {switch (lyrics) {
    | NotLoadedLyrics => React.string("Search for a song")
    | ErrorFetchingLyrics => React.string("Error Loading Lyrics!")
    | LoadedLyrics(lyricsText) =>
    Js.String.split("\n", lyricsText)
    ->Belt.Array.map((lyricLine) => {
      <div><label>{React.string(lyricLine)}</label></div>;

    })
    ->React.array
  }}

So we finished creating the app! Hope you enjoyed this tutorial, feel free to download the code on github: