DEV Community: Raul

How to use i18n tags inside a computed prop in Vue

Raul — Fri, 26 May 2023 11:51:36 +0000

Lately I've been thinking about how every action as a developer either helps or affects how accessible the world is to others. Specially as devs, since our job is a lot about connecting people.

One great tool for inclusion is the i18n package helping us develop multi language apps with minimum effort.

This package will add dynamic translations to our app but what if we want to make it even more dynamic? What if we want to add a computed property that is based on text and have that value be translated dynamically?

Take a reservations app for example. You want to confirm to the user the status of their reservation. That is going to take a computed property that finds the status and displays the correspondent text to the user.

Assuming you already have an app started and you want to add this functionality to a component. First step, we create an array inside data() to contain the different id's and descriptions we are going to use.

data() {
    return {
      booking: {},
      statuses: [
        {
          id: 1,
          name: 'Confirmed',
          description: 'Your reservation is confirmed',
        },
        {
          id: 2,
          name: 'Past',
          description: 'This is an old reservation',
        },
        {
          id: 3,
          name: 'Canceled',
          description: 'Your reservation has been canceled',
        },
      ],
    }
  },

Now we need our logic, to match the reservation's status and choose which message to display. For this project I used Apollo GraphQL, so the query is just a simple request to the backend for a status id. I don't want to focus on the backend stuff now, so let's just say we either get a status 1, 2 or 3 on the response.

That said, we need to match the status with the id we're given and display the description.

  computed: {
    status() {
      return this.statuses.find(
        (status) =>
          status.id === this.booking.booking_status.id // we compare the info contained in statuses with the booking id we get from the backend.
      )
    },
  },

Great! Now it's time to take it a step further, and make this message available in other languages. The fun thing is, the syntax inside a computed property changes a bit when interpolating the value to display. Inside data it is not necessary to use {{ }} syntax, you can just do: this.$t("message").

So, first we change what we have in data() to reach the values in the i18n tabs so we can have translations.

data() {
    return {
      booking: {},
      statuses: [
        {
          id: 1,
          name: 'Confirmed',
          description: this.$t('confirmed'),
        },
        {
          id: 2,
          name: 'Past',
          description: this.$t('past'),
        },
        {
          id: 3,
          name: 'Canceled',
          description: this.$t('canceled'),
        },
      ],
    }
  },

Next we create the actual tag to contain the info we want to display in other languages.

<i18n>
{
  "en": {
    "confirmed": "Your reservation is confirmed.",
    "past": "This is an old reservation.",
    "canceled": "Your reservation is canceled."
  },
  "es": {
    "confirmed": "Su reserva esta confirmada.",
    "past": "Esta es una reserva pasada.",
    "canceled": "Su reserva ha sido cancelada."
  }
}
</i18n>

Awesome! Now all we need to do is show that to the user.

<p>
  {{ status.description }}
</p>

Now we're talking! 🎉
The message will display based on the status of the reservation, and that will give the user a better idea of how things are going, in whatever language we choose to add.

This is just a super simple version of what can be done. Hope you find it useful and that it helps you reach new audiences!

Recommended course >> vue school i18n

Having fun with useScroll in VueJS

Raul — Fri, 28 Oct 2022 14:10:40 +0000

There's an amazing collection of composition utilities called VueUse and if you don't know about it make sure to check it out because there's a ton of cool stuff there that will make your every day developing a lot simpler.

We will be covering a few fun use cases for the useScroll utility and how that can, with very few lines of code, achieve some cool reactive effects in our layouts.

To get started, just run npm i @vueuse/core on the terminal and make sure you import import { useScroll } from '@vueuse/core' into the component you're going to be listening for scroll events.

In this example I'm also using 'ref' so you would need to import import { ref } from 'vue'; as well as to instantiate an element in the script with that 'ref'. Looking like this:

<script setup>
import { ref } from 'vue';
import { useScroll } from '@vueuse/core';

const el = ref(null);
const scroll = useScroll(el);
</script>

Cool! We have assigned a ref to an element and we will be listening for all the scrolls on it. Now we need to reference that in the template so our users can actually scroll over it.

<template>
  <div class="scroll-box" ref="el">
    “It is a period of civil war. Rebel spaceships, striking from a hidden base,
    have won their first victory against the evil Galactic Empire. During the
    battle, Rebel spies managed to steal secret plans to the Empire’s ultimate
    weapon, the DEATH STAR, and space station with enough power to destroy an
    entire planet. Pursued by the Empire’s sinister agents, Princess Leia races
    home aboard her starship, custodian of the stolen plans that can save her
    people and restore freedom to the galaxy….”
  </div>
  <div>{{ scroll }}</div>
</template>

As you can see, we are using that same ref to link it together and inside that element, we have placed a long text (Star Wars opening Crawl) that will overflow the container and enable it's ability to be scrollable. For this, we will also need to use CSS to set a max height, or height to that container and to also enable for overflow: scroll;. It will look like the following:

<style scoped>
.scroll-box {
  color: white;
  background-color: black;
  height: 150px;
  width: 100%;
  overflow: scroll;
  position: relative;
}
</style>

With that, we have enough to get started on the magic!

Here's the fun part, useScroll returns for us an object that we can play with and do all our creativity allows us to. The object will look like the following:

{ "x": 0, "y": 0, "isScrolling": false, "arrivedState": { "left": true, "right": true, "top": true, "bottom": false }, "directions": { "left": false, "right": false, "top": false, "bottom": false } }

And you can actually go ahead and print it on the screen, to see what I'm talking about.

<div>{{ scroll }}</div>

So now you kind of get the idea of where this is going.

Let's say we want to perform a certain action whenever our user has reached the end of the scroll, something like showing or hiding something. We can use the "arrivedState" property of our use scroll and listen for it when it reaches "bottom" (when bottom = true).

So we can add conditional render to the element we want to add and link that to our useScroll object, as follows:

<p v-show="scroll.arrivedState.bottom">you have reached the bottom!</p>

I also added a simple button to be able to click on it and reset the whole flow without having to reload the page. It's not the fanciest but does the job for this example.

Feel free to check out the whole code example on Stackblitz!

Imagine also that you would like to add some animation or to display something while the user is performing the scroll, to give it some sense of dynamism. You can also listen for the "isScrolling" attribute of the useScroll object and link that to trigger the animation! Or you can listen for a given point in the "y" axis and fire events or display different content based on it.

The possibilities are only limited by what we can imagine :) since the technical part is now super simple!

Hope you enjoyed this, since it's the first of a series regarding this wonderful VueUse library.

React Native for Web Apps

Raul — Wed, 26 Oct 2022 15:03:09 +0000

Wouldn't it be cool if we could just write an app once? In stead of having to create a native version for mobile and then develop a whole new codebase for a Web App? Wouldn't it be much more time/cost effective?

React Native is a full JavaScript framework and one of the cool things it does is that it translates the React Native tags into Native tags, to Kotlin/Java in the case of Android and to Swift/ObjC in the case of IOS.

So in the case of adding a View tag it would translate to ViewGroup in Kotlin or UIView in the case of Swift. And we don't have to worry about all that, RN just does it for us.

So following this logic, we should just have a package that translates the native modules into html elements compiled on the browser and that way we can just create the build for web, using the same code we use to deploy the Native version for Google Play or App Store.

That package is react-native-web

And you can also learn a lot more about it here

If you're thinking this is crazy or kind of a long shot, let me tell you several names in the industry (big names) use this same package to build their web apps from their actual React Native codebase.

With this package we can create a new build for the web that we can deploy to AWS amplify or Firebase hosting or whatever host you like. It would be a full web build you can deploy. :)

So we're covered! We have IOS, Android and Desktop and we only had to code it once.

Unless you're making something super intricate or specific in your app, this should cover most simple projects or MVP's.

Let's take a look into more detail on how all this is done, step by step:

You will fist need several dependencies to run the React Native CLI. (Node, watchman, cocoapods, react-native)
And also x-code which is super heavy and takes a bit to download form the official apple link.

Make sure Node version is 14 or above.

You can get more details on alternative setups here.

Then, you can choose to start the project with just React Native or we can use Expo which would simplify the build process for us whenever we are exporting for web.

As any react project, node package execute:

npx react-native init MyAwesomeProject

As Expo project:

npm install --global expo-cli && npx create-expo-app MyAwesomeProject

As you would expect this will create the basic template and folder structure for you to start working on your project.

Then to start the project npx react-native start or npx expo start

This will start the metro bundler and pull up our project on the emulator.

Ok, now let's make it web!

We need to add the dependencies npm install react-dom react-native-web

Cool, so after the installation we can pull up the project and we should see it in both mobile and web versions if we decide to go to the browser and type the localhost port, we should see the web version of our app.

In that web version, you might want to go ahead and inspect the page just to find out that it's no longer React Native elements, they're actually html in the browser now. The views got compiled into html.

Alright, how do we extract all this into a build so we can host it on our server?

Easiest way I know would be with Expo:

expo build:web

This will generate the new build in a root level folder and that content we can host wherever we like on the web!

For the traditional version we should follow the docs advice and install a few plugins for optimization first:

npm install --save-dev babel-plugin-react-native-web

This Babel plugin is recommended for the build.

Next, we would need to alias our react-native into react-native-web so babel-plugin-module-resolver is required.

npm install --save-dev babel-plugin-module-resolver

This will all be configured from our webpack config file, so go ahead and add the following to your babel.config.js file:

npm install --save-dev babel-plugin-module-resolver

All good so far, now for our web version we will need to create two entry files living at root path. index.html and index.web.js.

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React Native on the Web!</title>
    <meta content="initial-scale=1,width=device-width" name="viewport" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <style>
      /* These styles make the body full-height */
      html,
      body,
      #root {
        height: 100%;
      }
      /* These styles disable body scrolling if you are using <ScrollView> */
      body {
        overflow: hidden;
      }
      /* These styles make the root element flex and column wise filling */
      #root {
        display: flex;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <div id="react-native-web-app"></div>
    <script type="text/javascript" src="/bundle.web.js"></script>
  </body>
</html>

Notice the script name src="/bundle.web.js", We'll be using this file name while configuring webpack.

/index.web.js
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

AppRegistry.runApplication(appName, {
  rootTag: document.getElementById('react-native-web-app'),
});

If you look at the file above, you might notice that on the third line import App from './src/components/App'; I'm importing an App component, which is different from our standard output for our React Native App. This is because, we will need a differential output for this build to happen, otherwise we would get an error because of the imports we are using that are not part of the RN public API.

For example:

import {
 Colors,
 Header,
 ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

As stated by Nicolas Gallagher via this discussion.

"First, we should not be loading any of the RN package on web, especially not parts that aren't part of the public API . Second, as mentioned in the inline comments of the config web/webpack.config.js, we need to explicitly list everything in node_modules that needs compiling."

So this is basically why we create a different file, to reference as output. And that file would not have the imports or would not be referencing any of the library components we used for our Mobile version. This will have to be resolved in a 'web' way for this one.

Great! We got ahead of that issue and back in track for our export.

Next, we'll need dive into Compiling and Bundling using Webpack for bundling and Babel for transpiling along with babel-loader.

npm install --save-dev babel-loader url-loader webpack webpack-cli webpack-dev-server

npm install --save-dev babel-plugin-react-native-web

Cool, now let's create a /web/webpack.config.js file and start configuring webpack using the official docs with a small twist to add jsx support ;).

webpack.config.js:

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.(js)|(jsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: [
        'react-native-web',
        [
          'module-resolver',
          {
            alias: {
              '^react-native$': 'react-native-web',
            },
          },
        ],
      ],
    },
  },
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.web.js'),
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist'),
  },

  // ...the rest of your config

  module: {
    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web',
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js', '.jsx'],
  },
};

We are ALMOST there!

Just need to setup which scripts we'll be using to actually run this on the web. So let's take a look at /package.json:

{
  "scripts": {
    "web": "webpack serve -d source-map --mode development --config \"./web/webpack.config.js\" --inline --color --hot",
    "build:web": "webpack --mode production --config \"./web/webpack.config.js\" --hot"
  }
}

After adding the correct scripts we should be able to run npm run web on the command line and get our app to run!

You might want to navigate to port http://localhost:8080 to see your webapp running.

Conclusion:
As you might have noticed, the Expo path is waaaay simpler and get's a lot done for you. If you want to dive into the regular RN way, I really hope this guide serves a purpose for that matter.

I would recommend using the tools available to make it simple, as stated on the official docs:

"If you are interested in making a multi-platform app it is strongly recommended that you use Expo (or learn from the source code for the Web integration). Expo includes web support and takes care of all the configuration work required."

Feel free to build for ANY platform!

Hope you enjoyed the extensive article :)

react-native-web docs
Multi-Platform-React-Native
Setup - react-native-web
React Native for Web without Expo - by shivams136

Creating Themes for super fast development! In both Vue and React

Raul — Fri, 22 Apr 2022 12:32:43 +0000

For the past year I have been part of a wonderful team who taught me how to get fast and get awesome! This article is dedicated to this team, Zaelot, for helping me grow and propel my coding to the next level!!!

One thing that really helps me scale and develop faster is making a few decisions up front, that could be for example, creating a theme for the project to grow from. This will help us deliver a more consistent product and also to create something that's going to have a low maintenance cost in the future, in case things change.

So let's see what that means in code. I'm going to use first a Vue example and then a React example, to show that this is not even related to the framework itself, but with a mindset of setting things up to be great from the start. Even the smallest project has to feel that way while developing, because otherwise, why bother?

So every time I hear we need to build a project super super fast, that translates to me as "we are going to use Vue for this". And most of the time, that also includes Tailwind, because they just pair for speed.

We do the classic:

yarn create nuxt-app <project-name>

This time I'm choosing Tailwind to be installed upon initialization, so once the process is complete we should be all set.

I first remove all the unnecessary boilerplate and should be left with an index.vue file looking like this:

<template>

</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

Then inside the empty template we can start creating whatever we want to see. Now I'm just making a simple landing page to prove the point of how easy it is to change and maintain a color theme.

So here's the code for the awesome landing page using the companies colors and branding: github repo

And here's the deployed sample

As you can see is mostly just a logo centered on the screen with the addition of scroll event listeners to trigger the scroll behavior. And with a Theme!

We now add our style and brand identity creating a tailwind.config.js file.

module.exports = {
    theme: {
      fontFamily: {
        // Here we add the font we want.
        sans: ['Inter'],
      },
      extend: {
        fontFamily: {
          sans: ['Inter', 'sans-serif'],
        },
        colors: {
          // Then all the default colors are overwritten
          // So you can set up your own palette!
          yellow: {
            DEFAULT: '#FDD00E',
            50: '#??????',
            100: '#??????',
            200: '#??????',
            300: '#??????',
            400: '#??????',
            500: '#FDD00E',
            600: '#??????',
            700: '#??????',
            800: '#??????',
            900: '#??????',
          },
          indigo: {
            DEFAULT: '#??????',
            ...
          },
        },
      },
    },
  }

Let's say we completely change the brand color and now for the font and every background I need to change the color we are using. With this setup, it takes only a second to do so since it's centralized in one single file. Or the font, or whatever you can setup for the styling.

Then on the code, just simply call bg-yellow-500 and we would be using a background with our own customized yellow 500.

So no matter how much the app grows you'll always be able to reach every piece of the style from there if you stick to it. You can completely change the palette from there, no hassle.

Let's say I change the main color to #732B80 and the typography to yellow-400 and boom! Just took a second to get this >>

This kind of small decisions make a big difference when working in a team that constantly pushes itself to become more efficient and more kind to each other in terms of maintainability.

Also if you're looking for inspiration or are having a hard time finding a color palette, check out adobe color

On the other hand, we can totally achieve the same goal using my other most favorite tool in the world, React!

This is the React way -->

This same thing can be done with React super easy.

As usual:

npx create-react-app my-app

Let's say we really mean this time for our app to go big, so lot's of components are going to share the theme. I like to create a folder named global and there I add a theme.js or fonts.js or whatever the file is about.

Then inside the file you would export the constants you mean to use, them being 'colors', 'spacing', 'TwoColumnLayout' or whatever you mean to use there. Let me give you an example:


export const colors = {
  primary: {
    regular: '#BB2020',
    dark: '#06111C',
    darker: '#121317',
    hover: '#BEC7C7',
    focus: '#FFEB4D',
    selected: '#D4762C',
    disabled: '#F99546'
  },
  secondary: {
    regular: '#FFFFF4',
    dark: '#7E8054',
    darker: '#7F807A',
    hover: '#CCCCC3',
    focus: '#52A2A2',
    selected: '#44B4B4',
    disabled: '#5FD8D8'
  }
}

export const spacing = {
  one: '8px',
  two: '16px',
  three: '24px',
  four: '32px',
  five: '40px',
  fiveAndAHalf: '44px',
  six: '48px',
  ...
  fifteen: '120px'
}

Then you can go to your component and import your style to be able to use it locally.

import { colors, spacing } from '@global/theme'

Then, I like to use styled components, so we are also going to be exporting constants like StyledAlerts in the case we're creating an alert component for example:

export const StyledAlert = styled.div`
    padding: ${spacing.one};
    color: ${colors.secondary.regular};
    min-height: ${spacing.seven};
`

So you can just interpolate using ${spacing.one} to access the exported constants from the theme file.

This will help you create a more scalable, consistent, easier to maintain and fast built UI.

Ok, that was a lot! Let's recap.

So no matter the framework you use, you can create a theme for styling guides and to centralize all style related code. That way it's easier to maintain and to access it while developing new features.

Also it helps you stay style-consistent and organized when it comes to code architecture.

Now enough nerd talk. Let's go build stuff!

Check out the React docs

Check out the Vue docs

Simple SEO setup for a Nuxt App

Raul — Wed, 23 Mar 2022 19:20:00 +0000

It's all fun and games until someone tries to google our site and they just can't find it anywhere because we forgot to take care of SEO!

No matter how cool our site looks and all the features we added, it's no good if search engines can't find it. It won't look cool when shared in social networks if you don't handle the Social Card... so let's dive right in on how to make our site look good on social media.

Lucky for us! Our ancestors of code created a framework (Nuxt) that follows a few conventions and makes it super easy and fast for devs to take care of this feature. Let's say we start with our typical default nuxt app. In my case I will use as example an app I built for a past article Vue Astro

If you started the project using Nuxt, you should have a file nuxt.config.js where you can find the following:

 head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
],

So here is where we would add the meta tags to let the engines learn more about our site. In the case of Facebook for example, you would use the Open Graph protocol to inform the engine with the correspondent tags.

Let's add them!

As the docs specify: 'The Open Graph protocol enables any web page to become a rich object in a social graph.'

This means we will be dealing with an Object and their properties.

og:type

This tag describes the type of the object, in our case, a website.

{ hid: 'og-type', property: 'og:type', content: 'website' },

og:title

This will be the title of the object.

{ hid: 'og-title', property: 'og:title', content: 'Vue Astro' },

og:description

Allows you to add a description to the object.

  {
    hid: 'og-desc',
    property: 'og:description',
    content: 'Get your horoscope for today!'
  },

og:image

If you want to attract clicks an image will help immensely.

  {
    hid: 'og-image',
    property: 'og:image',
    content: 'LINK TO YOUR IMAGE DIRECTORY'
  },

og:image:alt

You don't want to be the guy who forgets to put an alt text to the image :)

  {
    hid: 'og-image-alt',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },

og:url

Where you would direct visitors clicking your Social Card.

  {
    hid: 'og-url',
    property: 'og:url',
    content: 'https://vue-astro.netlify.app/'
  },

We should now have a file looking like this:

export default {
  ssr: false,
  head: {
    title: 'vue-astro',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Get your horoscope for today!' },
      { name: 'format-detection', content: 'telephone=no' },
      { hid: 'og-type', property: 'og:type', content: 'website' },
      { hid: 'og-title', property: 'og:title', content: 'Vue Astro' },
      { hid: 'og-desc', property: 'og:description', content: 'Get your horoscope for today!' },
      { hid: 'og-image', property: 'og:image', content: 'https://media4.giphy.com/media/' },
  {
    hid: 'og-image',
    property: 'og:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  },
      { hid: 'og-url', property: 'og:url', content: 'https://vue-astro.netlify.app/' },
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
}...

Awesome! Now you can go check your Social Card here.

This will give you an idea of how your Social Card will look like when shared.

Now, Open Graph does not cover all social networks so we can also implement Twitters Card as well. Which is also super easy.

We use the twitter:card

  {
    hid: 'twitter:card',
    content: 'Vue Astro. Get your horoscope for today!'
  },

or twitter:site

  { 
    hid: 'twitter:site', 
    content: 'YOUR TWITTER HANDLE HERE' 
  },

You can also add atl text to twitter card

  {
    hid: 'twitter:image:alt',
    content: 'An image of the great pyramids with a cosmic flashing background'
  }

You can learn all about Twitter on their docs!

They also have a resource to check how your twitter card will look like called Card Validator.

As well as Linkedin's Post Inspector or your can have an all in one approach at metatags.io.

Great! So now we look good on Twitter, Facebook, WhatsApp... this is a great start for our site on social media and it wasn't all that hard.

Now it's time to go share that beautiful content you have been working on!

How to Setup Nuxt SEO by Özkan Yanikbas

How to Setup your Social Card by Josh Deltener

How to define OG alt text and why it might not matter by Stefan Judis

Open Graph Meta Tags by Michal Pecanek

Check out the Vue Astro Repo for further reference.

Setting up a Vuex Store with Nuxt

Raul — Wed, 16 Feb 2022 19:34:48 +0000

There's a lot to learn out there about Flux, Vuex, Nuxt, Vue, a framework of a framework, and so on. My idea here is to keep it as simple as possible. I really encourage you to go and read the docs for all that's out there so you can deep dive into them. The docs for all these libraries are super well written and easy going (in comparison to most software documentation).

So back to our project, I had the idea to build a Horoscope App, using Vue and Vuex for pretty much everything that contains state within the app. So I figured once the user claims their sign, we would make the API call and then get a prediction/reading for the user.

For this purpose I'm going to use this awesome API:

https://github.com/sameerkumar18/aztro

Ok, so let's start the project with:

yarn create nuxt-app <YOUR PROJECT NAME>

Check out Nuxt docs

Then, after the project's boilerplate is created, we jump into our store folder and add touch store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
// Here we import everything that is exported
// from the below directory, allowing us to create the store
import * as app from './modules/app/index'

Vue.use (Vuex)

export default () => new Vuex.Store({
    modules: {
        app
    }
})

Then we create a new directory inside the store so we can give life to our app module inside of it:

mkdir store/modules

mkdir store/modules/app

touch store/modules/app/index.js

Inside the newly created index.js file, we add:

// We import axios since we'll need it
// to make the api calls later on.
import axios from 'axios'

// We make namespaced true so that we
// can call the modules like: app/mutations
export const namespaced = true

// We export all pieces of the store as constants
// that we will import on the index file we saw previously
export const state = {
    sign: null,
    today: []
}

export const mutations = {
    SET_TODAY(state, value) {
        state.today = value
    },
    SET_SIGN(state, value) {
        state.sign = value
    }
}

Then for the most important part. We create the action that's going to fetch the given horoscope. We will send a post request to the endpoint, interpolating the user's selected sign we got from the store and making the api call. Then with the response we commit the mutation to have our horoscope reading saved in the store and accessible for all the app.

export const actions = {
    GET_TODAY({ commit }) {
        axios.post(`https://aztro.sameerkumar.website/?sign=${state.sign}&day=today`)
        .then(response => {
            commit('SET_TODAY', response.data)
        })
    }
}

With that last piece added to the app module, we can go back to the template to handle how we are going to connect all the pieces to the user.

We will have to create a select menu, for the user to select their sign from.

          <select
            id="sign"
            v-model="selected"
            name="sign"
            class="mt-12 block w-full py-2 text-base border-gray-300 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm rounded-md"
          >
            <option disabled value="">Please select your sign</option>
            <option>Aries</option>
            <option>Taurus</option>
            <option>Gemini</option>
            <option>Cancer</option>
            <option>Leo</option>
            <option>Virgo</option>
            <option>Libra</option>
            <option>Scorpio</option>
            <option>Sagittarius</option>
            <option>Capricorn</option>
            <option>Aquarius</option>
            <option>Pisces</option>
          </select>

on the Data

  data() {
    return {
      selected: ''
    }
  },

Using the v-model directive we connect the selected data to the user's selected value. That way we can watch that property and use it to connect it to the store.

  watch: {
    selected() {
      this.$store.commit('app/SET_SIGN', this.selected)
    }
  },

We also need to use the helper mapState and the spread operator to connect the global store values to our component, making them available for our use.

import { mapState } from 'vuex'

  computed: {
    ...mapState(
      'app',
      ['sign',
      'today']
    )
  },

So if we now go to the Vuex console on the browser we can see that the selection commits a mutation to the store, with the payload of the sign selected.

We can display that if we want by:

<p>Your sign is: {{ this.sign }}</p>

We now need a button, to trigger the api call once the sign is selected and retrieve us with the horoscope we came looking for.
For that matter I also created a boolean value, that is going to create some conditional rendering on the UI and make the whole thing have some sense.

On the data we add isReading property:

  data() {
    return {
      selected: '',
      isReading: false
    }
  },

and we add the getToday method and the reset method:

  methods: {
    getToday() {
      this.$store.dispatch('app/GET_TODAY')
      this.isReading = true
    },
    reset() {
      this.isReading = false
    }
  }

Then under the select menu we add this to the template:

        <p v-if="!this.isReading" class="fadeIn pt-12 text-xl font-semibold text-white">Your sign is: {{ this.sign }}</p>

        <button
          type="button"
          v-if="!this.isReading"
          v-on:click="getToday"
          class="mt-12 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
        >
          ☆ Get Today's Horoscope ☆
        </button>

        <div v-if="this.isReading" >
          <p class="fadeIn pt-12 text-xl font-semibold text-white">{{ this.sign }} Date Ranges: {{ this.today.date_range }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Date: {{ this.today.current_date }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Mood for {{ this.sign }}: {{ this.today.mood }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Color for {{ this.sign }}: {{ this.today.color }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Lucky Number for {{ this.sign }}: {{ this.today.lucky_number }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Lucky Time: {{ this.today.lucky_time }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Sign Compatibility: {{ this.today.compatibility }}</p>
          <p class="fadeIn pt-12 text-xl font-semibold text-white">Today's Reading for {{ this.sign }}: {{ this.today.description }}</p>
        </div>

        <button
          type="button"
          v-if="this.isReading"
          v-on:click="reset"
          class="mt-12 inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
        >
          ☽ ☆ Ask Another Sign ☆ ☾
        </button>

The result you can check out below:

Check out Vue Astro sample deployed version

You land on the page

You select the sign and click

You can select another sign, that would loop without actually refreshing the page, it would just re render what's already there.

Then you can call the api again and get a new horoscope reading.

Hope you enjoyed the simple setup. Now it's time to make your next project more scalable!

Check out the Vuex docs

Check out the Flux docs

Check out the Repo for Vue Astro

Vue simple slider with Tailwind

Raul — Wed, 19 May 2021 13:46:00 +0000

I was recently encouraged to learn Vue by a coworker and whenever I learn something new a fresh set of app ideas and mini projects strike my mind as part of the fuel that pushes me into the: "how can this be done in ...? mindset.

Fortunately that led me to a very common situation for front end developers nowadays: Carrousels/sliders. We are so used to scrolling and sliding on the screen that it is almost mandatory to have that at some point on your ui.

So, how can this be done with Vue and Tailwind? Here's a super simple version of that using: Slick-carousel

I started the app using Nuxt, an intuitive framework for creating Vue applications. As simple as:


 create nuxt-app <project-name>

I called it slider-love ♥

On the index.vue I deleted everything except for one div I left as container class, looking like this:



<template>
  <div class="container">

  </div>
</template>

<script>
export default {}
</script>

Then I would add Tailwind to the project yarn add tailwindcss so I can use tailwind classes for a super simple and fast first build.

We are then going to have 3 components, a Header a Slider and a Footer components. Only because we are front end devs and we just cant help to have an app not look good :)

Here's a glimpse at Header.vue



<template>
    <div class="pl-12 pt-12 bg-white h-32 md:flex md:items-center md:justify-between">
    <div class="flex-1 min-w-0">
        <h2 class="text-2xl font-bold text-center leading-7 text-gray-900 sm:text-3xl sm:truncate">
        Welcome to Vue Slider Love!
        </h2>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
        <button type="button" class="ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        ♥
        </button>
    </div>
    </div>
</template>

Footer.vue looks more complex but it really does nothing too fancy other than being a container for the 'logo' and giving some closure to the page.



<template>
    <footer class="bg-white" aria-labelledby="footerHeading">
    <h2 id="footerHeading" class="sr-only">Footer</h2>
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
        <div class="xl:grid xl:grid-cols-3 xl:gap-8">
        <div class="space-y-8 xl:col-span-1">
            <img class="h-10" src="../assets/sliderLogo.png" alt="Company name">
            <p class="text-gray-500 text-base">
            Creating a slider for fun and educational purposes using Vue Js & Tailwind
            </p>
        </div>
       </div>
    </div>
    </footer>
</template>

And finally the Slider! The fun part. We have a template rendering several <div> inside of it. Each div get's a random color for their background and a correspondent text naming that color.



<template>
    <div>
        <VueSlickCarousel v-bind="settings">
        <div class="h-80 bg-red-600 text-white text-center text-4xl font-semibold p-36">Red</div>
        <div class="h-80 bg-yellow-400 text-white text-center text-4xl font-semibold p-36">Yellow</div>
        <div class="h-80 bg-green-400 text-white text-center text-4xl font-semibold p-36">Green</div>
        <div class="h-80 bg-blue-600 text-white text-center text-4xl font-semibold p-36">Blue</div>
        </VueSlickCarousel>
    </div>
</template>

Then we import VueSlickCarousel and the css library we are going to need to make the carousel look good.



  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

and we export our component default after naming it, declaring the VueSlickCarousel component and adding the settings we need to style it using the library we just imported.

We end up with a Slider.vue that looks like this:



<template>
    <div>
        <VueSlickCarousel v-bind="settings">
        <div class="h-80 bg-red-600 text-white text-center text-4xl font-semibold p-36">Red</div>
        <div class="h-80 bg-yellow-400 text-white text-center text-4xl font-semibold p-36">Yellow</div>
        <div class="h-80 bg-green-400 text-white text-center text-4xl font-semibold p-36">Green</div>
        <div class="h-80 bg-blue-600 text-white text-center text-4xl font-semibold p-36">Blue</div>
        </VueSlickCarousel>
    </div>
</template>

<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

  export default {
    name: 'Slider',
    components: { VueSlickCarousel },
  data() {
    return {
      settings: {
        dots: true,
        infinite: true,
        rows: 1,
        initialSlide: 2,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        swipeToSlide: true,
        arrows: true,
      },
    }
  },
}
</script>

And that's it! You can now run yarn dev and navigate to local host port to see something like this:

Hope you like a simple slider! You now know how to use it so fill it with the content you want the to show the world!!

Feel free to check out the repo >> Slider-Love

Self.new

Raul — Thu, 11 Feb 2021 21:10:38 +0000

I wanted to start the blog telling a bit about how I got here.

A few years back I decided to reinvent myself and the tool used for it was none other than code...

My grandfather was a carpenter and he had a saying: “no job is impossible if you’re using the right tool.”

He didn’t know a thing about computers but he definitely gave me my first lesson about programming.

My passion for coding began when I realized how it could affect life and the way we live it. How it can transform our everyday reality.

What can be more fun and productive than having a tool that operates on great ideas, builds a system around it and leaves an open door for others to contribute? That sounds a lot like a world I would like to be a part of!

I realized that my happiness will never be full unless shared, that my ideas will never be perfect unless they are collectively put to test. There’s only so much we can do as individuals. Our reach, our resources, our points of view will always be limited if we keep them to ourselves. Our real power comes from our collective strength.

And so it happens with code, because only when several files and lines of code are put to work together is that real magic can happen. So I discovered I wanted to contribute. It’s the right tool to improve ideas and to improve ourselves. That’s what I’m all about.

Meet your heroes!

Raul — Thu, 11 Feb 2021 19:12:57 +0000

Millions of times I’ve heard (and I'm sure you have too) “never meet your heroes”

And, like every time someone tells me not to do something, that is exactly what I do.

Because you are too, if you’re in this world of code, a rebel of some sort. We like things our way, we like to code to shape things and we like to experience things other than being told, not to.

So back to heroes, I tried to reach out to some of the people that have become heroes to me while I was learning to code. People I would take as reference, people I’ve learned from and who have been to me a great example of who I wanted to become in the end. I wanted to meet them, not to be disappointed but to let them know they are my heroes. I tried to reach out to people who recorded live lectures that I’ve found helpful, live project builds that have been inspiring and that I’ve used as guidance to build my own projects. People who have designed cool stuff that I use.

That is a great thing to do and I don’t see myself stopping at any point. The world has enough heroes, we just need more people to let them know how great they are! To encourage them!

Be a hero to your hero, be brave to reach out to someone you don’t even know and let them know how much their work has influenced you, show appreciation! Close that circle and you’ll be amazed by how your heroes become your peers and many who where overestimated will drop their masks unveiling they where never real heroes.