DEV Community: Iván Roldán Lusich

Solving 1 random codewars challenge in Typescript per day - Day 1

Iván Roldán Lusich — Fri, 25 Dec 2020 23:32:49 +0000

Today's challenge (direct link):

Write simple .camelCase method (camel_case function in PHP, CamelCase in C# or camelCase in Java) for strings. All words must have their first letter capitalized without spaces.

For instance:

camelCase("hello case"); // => "HelloCase"
camelCase("camel case word"); // => "CamelCaseWord"

My Solution:

export function camelCase(str: string): string {
  const splitStr = str.split(' ');

  return splitStr.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
}

Well, this was a really simple one. Just split the original string at every space and then map over that array capitalizing every word.

Hopefully, we'll get a harder one next time. Have a nice day!

Solving 1 random codewars challenge in Typescript per day - Day 0

Iván Roldán Lusich — Thu, 24 Dec 2020 03:25:43 +0000

Today's challenge (direct link):

You are given two arrays a1 and a2 of strings. Each string is composed with letters from a to z. Let x be any string in the first array and y be any string in the second array.

Find max(abs(length(x) − length(y)))

If a1 and/or a2 are empty return -1 in each language except in Haskell (F#) where you will return Nothing (None).

Example

a1 = ["hoqq", "bbllkw", "oox", "ejjuyyy", "plmiis", "xxxzgpsssa", "xxwwkktt", "znnnnfqknaz", "qqquuhii", "dvvvwz"]
a2 = ["cccooommaaqqoxii", "gggqaffhhh", "tttoowwwmmww"]
mxdiflg(a1, a2) --> 13

My solution

This is the original solution I came up with:

export class G964 {

    public static mxdiflg = (a1:string[], a2:string[]) => {
        if(a1.length === 0 || a2.length === 0) return -1;

        let a1Long = -1, a1Short = 900, a2Long = -1,a2Short = 900;

        a1.forEach((str) => {
          const strLen = str.length;
          if(strLen > a1Long){
            a1Long = strLen;
          }

          if(strLen < a1Short){
            a1Short = strLen;
          }
        })

        a2.forEach((str) => {
            const strLen = str.length;
            if(strLen > a2Long){
              a2Long = strLen;
            }

            if(strLen < a2Short){
              a2Short = strLen;
            }
          })

        const a1a2res = a1Long - a2Short;
        const a2a1res = a2Long - a1Short;

        if(a1a2res - a2a1res > a2a1res - a1a2res){
          return a1a2res
        } else {
          return a2a1res;
        }

    }
}

As you can see, it's really verbose, but it's solving the problem. I'm going to refactor it to something better (I hope), and then I'll explain the code.

Refactor

export class G964 {

    public static mxdiflg = (a1:string[], a2:string[]) => {
        if(a1.length === 0 || a2.length === 0) return -1;

        const a1Long = Math.max(...a1.map(str => str.length));
        const a1Short = Math.min(...a1.map(str => str.length));
        const a2Long = Math.max(...a2.map(str => str.length));
        const a2Short = Math.min(...a2.map(str => str.length));

        const a1a2res = a1Long - a2Short;
        const a2a1res = a2Long - a1Short;

        if(a1a2res - a2a1res > a2a1res - a1a2res){
          return a1a2res
        } else {
          return a2a1res;
        }

    }
}

That's my refactored code, it's much concise and works just as well. I could try and make it even shorter, but I think that would take away readability and that's not something I'm a fan of.

All in all, the solution to this Kata wasn't that hard, I calculated the longest word in each array doing

const a1Long = Math.max(...a1.map(str => str.length));

which transforms the array of strings to an array containing the length of said strings, and then with Math.max() I take the maximum value of that array.

Pretty much the exact same process for calculating the minimum length, but this time using Math.min().

After that, I check which of the two maximum distances between the sets is bigger, and return it as a result.

And that is it! First day completed!.
I haven't done much on sites like codewars, but I really hope they get harder as time goes by, I love challenges!

See you tomorrow with another kata solved, Thanks for reading!.

Add FULL dev.to posts to your personal site using React.

Iván Roldán Lusich — Wed, 23 Dec 2020 18:25:22 +0000

I was recently creating my personal website and came to the conclusion that I wanted to add my dev.to posts there too.

After googling a bit I found out this great post by Carl-W, where he demonstrates how to fetch all the post from a single user.

But I wanted to go a bit further and display the full post on my personal website, instead of redirecting everyone to this site.
After checking dev.to public API I found out that you can get the full post by doing a GET request to ('https://dev.to/api/articles/articleId').

The code:

Get post function:

// src/helpers/getPost.ts  


export const getPost = async (articleId) => {
   const URL = 'https://dev.to/api/articles/';

   try{
    const res = await fetch(URL + articleId);
    return await res.json();
   } catch (e){
    console.log('There has been an error fetching the post: ', error);
    /*
     You should handle your errors better than this, but this is just an example and I won't bother. I might do another post on how to handle errors later
    */
   }
}

Displaying the full post on your site:

Because I don't want to use DangerouslySetInnerHTML because it involves security issues if you don't sanitize the HTML properly and some other stuff, I'll be displaying my posts in markdown, and for that, I'm going to be using react-markdown.

You install it by calling

yarn add react-markdown

or

npm i react-markdown

The use that I'm going to give to this library is very simple, but it's a really powerful tool, and you should check out their full documentation(if you haven't yet. Already linked this above).

I also installed remark-gfm plugin to add a bit more functionalities as indicated here.

Now, to the part that everyone wants to see, the code:

//  /src/component/post.js
import {getPost} from '../helpers/getPost';
import ReactMarkdown from 'react-markdown';
import gfm from "remark-gfm";

//I'm getting the id in another component, but it shouldn't be too //hard, whether you are using CRA or something like nextjs/gatsby.
const Post = ({id}) => {
    const [postInfo, setPostInfo] = useState();

    useEffect(() =>{
      const getAndSetPostInfo = async () => {
          setPostinfo(await getPost(id));
      };

      getAndSetPostInfo();
    },[]);

    if(!postInfo) return null;

    const { title, body, createdAt } = postInfo;

    return {
      <div className={'container'}>
      <div className={'createdAt'}>{createdAt}</div>
      <div className={'title__conainer'}>
        <h1 className={'title'}>{title}</h1>
      </div>
      <div className={'body__container'}>
        <ReactMarkdown className={'markdown__container'} plugins={[gfm]}>
          {body}
        </ReactMarkdown>
      </div>
    </div>
    }    

}

And that's pretty much it! You'll have to add styles to in order to make it look nice, here's the scss code that makes mine look like this:

Relevant scss (The one that styles the markdown):

.markdown__container {
  line-height: 1.6em;
  font-size: 18px;

  h2 {
    font-size: 24px;
    margin-bottom: 35px;
  }

  p {
    width: 100%;
    margin-bottom: 20px;
    img {
      display: block;
      margin: auto;
      width: 100%;

      @include mquery(600) {
        width: 80%;
      }

      @include mquery(800) {
        width: auto;
      }
    }

    a {
      text-decoration: underline;
    }
  }

  pre {
    margin-bottom: 20px;
    width: 100%;
  }

  code {
    background-color: $main-color;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    display: block;
    overflow-x: auto;
  }
}

There's one little caveat though, at the moment I haven't yet figured out how to make the # for heading functionality from markdown to work with this component. So I'm currently using ===== and ----- for headings, but that way only allows for h1 and h2 tags. I'll look for a fix and update this post later.

And that is it! I hope someone finds this useful! Thanks for reading!

How To Setup A NodeJS Server With Typescript

Iván Roldán Lusich — Tue, 22 Dec 2020 20:22:25 +0000

Why NodeJS?

If you are here, I assume that you are at least familiar with NodeJS, but if you want to jump into both Typescript and NodeJS at a time, I’ll explain briefly what NodeJS is. It’s a Javascript runtime for the backend, which means that you can write Javascript (or in our case, Typescript) in both our frontend and our backend, which makes the transition between coding in one to the other really easy. And, just to name one of its advantages, thanks to the V8 engine, which makes it really fast.

But now, to the real question: Why Typescript?

In case you don’t know, Typescript is statically-typed Javascript. And one might think that this isn’t a good idea, because typing statically required declaring types in your variables, functions, defining interfaces, and a lot of time-consuming stuff.

But I don’t see it that way, by defining your types in your code, you are setting yourself up for fewer errors and headaches since you don’t even need to run your code to realize that you’re are passing the wrong type of variable to your function.

For example:

You can see how we are indicating that the function ‘subtract’ takes to numbers as arguments. And typescript indicates the developer that something is wrong with your function call by showing a red underline, if you hover over it you’ll see something like this:

Indicating that the subtract function returns a number, which can’t be assigned to subtractResult since we declared it as a string.

In the line before that, you can see how we can call the function with incorrect types in its arguments either.

Although in this example it doesn’t seem as important, when you have bigger programs with a lot of functions and types, getting rid of small headaches related to types of variables saves a lot of time.

And that’s why we are going to be setting up a NodeJS/Express server with Typescript today. Let’s get started.

Setting up the environment

I’m going to be using Yarn during this tutorial, but I’ll also add NPM commands, however, feel free to use any package manager you want to.

Let's first call yarn or npm init --y to stark working on our project.

Now, we’ll install all the packages we need to get started.

We are going to be needing typescript and express, for obvious reasons. We are also going to need express-session to handle our sessions. Let’s go ahead and install those for now.

yarn add typescript express express-session

npm i typescript express express-session — save

One little caveat that you have to take into account when using typescript, is that external packages need to have typings, this is normally not a problem since most packages have them, but some not installed by default. If the one you are trying to use doesn’t have typings by default, you should try doing:

yarn add -D @types/nameOfPackage 

npm i -D @types/nameOfPackage

An example of this is the node, express, and express-session libraries, we need to install typings for it if we want to work with typescript. Let’s do it by running

yarn add -D @types/node @types/express @types/express-session 

npm i -D @types/node @types/express @types/express-session

Creating the server

Because I’m going to be using this exact project to do more tutorials in the future, I’m going to get a proper folder structure. Create a new folder called ‘src’, and inside of it, a file called index.ts, this is going to be the entry point of our application.

Don’t forget, since this is typescript, we can take advantage of ES6 imports, which I like a lot more than the ones you normally use on NodeJS.

Let’s start by writing a very basic server:

Line 1: We are importing express from our just installed express package.

Line 3: We are initializing the express framework and storing it into the ‘app’ constant.

Line 5: process.env.PORT is going to check your environmental variables to see if there’s a PORT defined in there, if there isn’t, it’ll default to 5000.

Line 7: We use the listen function, already included with the Express framework, that expects the port number that the application will be using as a first parameter. It also accepts a second optional parameter, which we are using to log into the console that our app is listening in the desired port.

Running the server

To run the server in our development environment, we are going to use the ts-node package. It comes included as a dependency in ts-node-dev, so we proceed by installing it.

yarn add -D ts-node-dev  

npm i --only=dev ts-node-dev

Now, we head over to our package.json file that was automatically created when you installed these packages, and under the ‘scripts’ tag, we must define one to start our server.

We are almost ready to start, but we first need to create a tsconfig.json file, this will tell ts-node how strict to be, as well as how to compile the code. Since we are using ES6 imports, we need to set it as a target. This is my current Typescript configuration, but feel free to use the one you find most comfortable:

Most of the options explain their functionality with their name, but you can check out available options here.

We are now officially ready to start our server. Run

yarn start

npm run start

Your server should now be up and running.

A little bit more setup before sessions

Now that our server is running, let’s add some session handling with the help of our previously installed module express-session. We need to create a cookie-secret for our session, and it can’t be available to anyone because that would create a security risk on our application. Let’s go ahead and create some files to handle our keys.

In our source directory, create a config folder, and inside of that, we are going to create three files: ‘dev.ts’, ‘prod.ts’, and ‘keys.ts’. Your directory should look like this:

Now, on ‘dev.ts’, we’ll add the following code:

Now, on ‘prod.ts’:

And finally, on ‘keys.ts’:

The first two files are pretty straight forward, we just define an object with our cookie-secret and export it, if it’s in production you’ll have it declared as an environmental variable so it can’t be accessed by any intruder.

‘keys.ts’, however, is more involved.

Line 1 and 2: We import our objects from the ‘dev.ts’ and ‘prod.ts’.

Line 4 to 6: We create an interface that defines what our keys function is going to return. This ensures that the keys function will return an object that contains a key named ‘cookieSecret’, which value is a string.

Line 8 to 14: We export a function that returns our production keys if we are in a production environment, or our development keys otherwise.

Now it’s time to add sessions to our application.

Handling sessions with express-session

This is the code after adding sessions to our application:

Line 2: We import express-session to a constant called ‘session’.

Line 3: We import our just created ‘keys’ function from its directory.

Line 7: Destructure ‘cookieSecret’ from our ‘keys’ function.

Line 9 to 19: Using the built-in ‘use’ function in express, we declare a session object with some configuration. In which we include our cookieSecret constant as the session secret. You can check more about express-session configuration in the official documentation.

And that concludes this tutorial! I uploaded the final code to a Github repository to make your life easier.
It’s the first time I’ve ever done this, so feel free to criticize me or tell me how I can improve.