Forem: Fabio Rosado

Command Line Tricks

Fabio Rosado — Wed, 18 Nov 2020 21:32:22 +0000

Working with the command line can be fun. But the more you use the command line, the more you realise that you end up repeating commands over and over again in your workflow.

Luckily there are some easy to remember commands that will help you cut time when repeating commands.

History - Using reverse-i-search

Reverse-i-search will search through the whole history to match a command that contains what you typed. You will need to activate reverse-i-search by pressing the keys CTRL+R, your prompt will switch to (reverse-i-search):

With reverse-i-search activated, you can type the beginning of a command and the last one that was run will be matched. If you want to cycle through all matches you just need to press CTRL+R again.

If you know that you are going to use a command a lot you can write the command like this:

<command> #tag

Then all you need is run the reverse-i-search and search for #, your command will be matched straight away. Since the # indicates a start of a comment the terminal will simply ignore the text #tag.

Examples

History:

  1  git pull origin master #pull-origin-master
  2  git status
  3  git stash
  4  git pull origin master
  5  git stash apply
  6  git add file
  7  git commit -m "Added file"
  8  git rebase -i HEAD~2
  9  git push

Start reverse-i-search and type git:

(reverse-i-search)`git': git push

Git push was the last command typed so that's the first match that reverse-i-search returns.

Now let's use the tag trick to run the first command in our history. Let's reverse-i-search for #

(reverse-i-search)`#': git pull origin master #pull-origin-master

History - Using !

If you run the command history you can see a long list with all the commands that you have typed in the command line. To re-run a command you can do one of these two ways:

Type: !<number of the command>
Type !<first letters of command>

For you to use the number of the command you probably would have to run history, then get the number and type !<number of the command>, in some cases this will take even longer than typing the command again.

But since you know which command you want to run, you can simply type !<first letters of command> and those first letters will be matched to a command. This little trick can save you some precious time.

Examples

History:

  1 ls
  2 cd
  3 cd documents/
  4 mkdir folder
  5 rmdir folder
  6 ls

Let's run the last command in our history again by typing !!

user ~/documents > !!
ls
folder

As you can see the terminal will print the command before running it, this is to help you in case something happens that you weren't expecting.

Now let's try to run the second command in our history by using the number reference.

user ~/documents > !2
cd
user ~ >

The cd command was run and you should be in your home directory now.

Let's say you want to create a folder with the same name in your home directory you can do:

user ~ > !mk
mkdir folder
user ~ > ls
folder

Autocomplete

Typing long commands can take a while, luckily your terminal can autocomplete commands for you, all you need to do is start typing a few letters and press the TAB key and the command will be auto-completed.

If you forgot how do you type a command, but you know the first letter, you can type the first letter and press the TAB key twice, a long list of all available commands will appear and you can use that to help you.

Examples

Let's look for a command that starts with the letter K:

user ~ > K <TAB><TAB>
kadmin.local     kextfind         keytool          klist            kswitch
kcc              kextload         kill             kramdown         ktutil

As you can see any command that starts with the letter K will be returned.

I hope you find this helpful, let me know if there are more useful commands that I should add to this list!

This article was first published on my personal site on 7th of July

Hide your API Keys with Netlify Functions

Fabio Rosado — Fri, 16 Aug 2019 10:00:46 +0000

In March I published a tutorial on how to handle form submissions in Gatsby and using Airtable as your backend. I was pretty convinced that by hiding your API keys with process.env they would be hidden away from view.

The tutorials and the blog posts that I read, all said that your keys would be hidden if you just used process.env. In a way that is true and if you inspect the code on your browser the keys will be hidden.

Then Fran Caballero commented on my blog, saying that the keys would be shown in the network tab after you made the request. This happens because Airtable expects you to pass your API Key as a parameter in the header of your request.

As a reminder, the code from the tutorial looks like this:

 handleSubmit = e => {
 const fields = {"fields": {"Name": this.state.name, "Notes": this.state.notes}}
 fetch("<https://api.airtable.com/v0/><account id>/<table name>", {
 method: "POST",
 headers: {"Authorization": `Bearer ${process.env.AIRTABLE_API}`,
 "Content-Type": "application/json"},
 body: JSON.stringify(fields)
 })
 .then(() => alert("Form Sent!"))
 .catch(error => alert(error))

 e.preventDefault();
 }

As you can see, the API key is being passed in the headers and when a request is made the headers are exposed through the network tab. That means, everyone can see the API Key.

I needed a solution to keep the API keys hidden.

Netlify functions to the rescue!

Most of my sites are being served by Netlify and Netlify functions looked like the solution for this problem.

Netlify functions are nothing more, nothing less than functions run on the server. So the API keys should remain hidden from prying eyes.

A great thing about Netlify functions is that you can use 125k calls and 100minutes for free in a month per site.

Setting up functions for your Netlify site is pretty easy. All you need to do is create a folder, in the root of your project, inside this folder, you will put your functions. Then tell Netlify where to find this folder.

I like to put all the things related to Netlify inside a folder called .netlify. Inside that .netlify folder I just created another folder called functions.

Now all I needed to do was to tell Netlify where my functions were. To do this, all you need to do is login into your Netlify account, choose the site that will be using the functions and then press the functions tab. In this tab, you just need to write the path of your folder.

In my case, I just wrote .netlify/functions. Then you can push new changes or redeploy your site and Netlify will find the folder automatically - you will get an email saying that you are now using functions on your site.

Netlify functions rules

Netlify functions let you deploy AWS functions without the need to have an AWS account. At the moment you can write your functions using Javascript or Go.

Your javascript function will need to export a handler and should look like this:

 exports.handler = function(event, context, callback) {
 // your server-side functionality
 }

When you call a function the handler will get an event object that will look similar to this:

 {
 "path": "Path parameter",
 "httpMethod": "Incoming request's method name"
 "headers": {Incoming request headers}
 "queryStringParameters": {query string parameters }
 "body": "A JSON string of the request payload."
 "isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encode"
 }

So when you call your netlify function, the headers, method and path that you add will be available to you by writing event.path, event.headers and event.method.

Finally, the callback will be what your Netlify function will return when you run it. This is where you handle success/failure and any response that you might need.

Creating a server-side function for airtable

I'm going to use the example above on how to handle form submissions and send them to airtable.

First, create a file inside your netlify functions folder called airtable.js.

Now you need mix the handler format and the fetch request shown above. The function will look like this:

exports.handler = async (event, context, callback) => {
  const pass = (body) => {callback(null, {statusCode: 200, body: JSON.stringify(body)})}

  try {
    let response = await fetch("https://api.airtable.com/v0/<account id>/<table name>", 
  {
   method: event.httpMethod,
   headers: {
     "Authorization": `Bearer ${process.env.AIRTABLE_API}`, 
     "Content-Type": "application/json"
  },
   body: event.body
  })
   let data = await response.json()
   await pass(data)
 } catch(err) {
     let error = {
       statusCode: err.statusCode || 500,
       body: JSON.stringify({error: err.message})
 }
  await pass(error)
 }
}

Notice that I am using process.env to get the Airtable API Key. Netlify will get the key automatically from the environmental variables since they are living server-side.

Connecting your form to the Netlify function

Now that we have our function, all that is left to do is to connect our form to the netlify function. Netlify makes it pretty easy for us to do this, all you need to do is use the path of your function on the fetch request.

Let's say that our form is located on the component called Notes and its full path is your-awesome-site/src/components/Notes.js we need to change our form to this:

handleSubmit = e => {
  const fields = {
    "fields": {
      "Name": this.state.name, 
      "Notes": this.state.notes
      }
     }
    fetch("../../.netlify/functions/airtable", {
    method: "POST",
    body: JSON.stringify(fields)
    })
    .then(() => alert("Form Sent!"))
    .catch(error => alert(error))

    e.preventDefault();
 }

Notice that we are fetching the Netlify function airtable from the root folder. Also, we took the headers param from the request since we are using it on the server-side function.

So this fetch request will just call the netlify function and pass the form fields into the server-side function and that server-side function is the one calling the Airtable API.

This is all you need to do to hide your API keys and use Netlify functions. If you want to log things from your Netlify function you can use console.log and this log will be available within your function screen inside your Netlify account - from the functions tab.

Handle form submission in Gatsby with Airtable

Fabio Rosado — Fri, 22 Mar 2019 14:25:21 +0000

I am currently building Find Communities Today, a place where you can find communities online. I wanted to allow users to submit their favourite community so I added a page with a form that users could fill out and submit.

Initially, I was using an <iframe> with the form created by Airtable, but the page would take ages to load so I decided to try and make a form myself and sent it to Airtable.

What will you need

Airtable Account - This is my referal link.
Netlify Account - I'm using environmental variables with Netlify
Gatsby - Gatsby handles environmental variables automatically.
.env folder - I am going to mention environmental variables

This example will be quite simple. Find Communities Today is being served by Netlify directly from a private repo of GitHub. I am already using Netlify forms for people to report problems with the details of a community, so I didn't want to use Netlify to handle this form.

Also, Airtable is pretty awesome when you need to see the data in a logical way. Since I had created the base in my Airtable, I decided to keep using it to handle the submission of the communities.

Setting up Airtable

Sign up to Airtable if you haven't done so and then log in. There are a lot of templates that you can use, but we will start with a brand new one.

Press the button + Add a Base and from the dropdown menu choose start from scratch, choose a name and press Enter. Airtable will create a spreadsheet with three columns

Name
Notes
Attachments

Fill the first row with some random text and then on the bottom right corner look for the yellow icon with three dots. Click it and choose API Documentation

Then scroll down until you are on the Create record. On the right, you can see the curl call. This will help when we build the API call when submitting the form.

Finally, you will need your API key. Go to your Airtable Account and click on Generate API key, click the input field so you can see the key and copy it.

Setting up the site

If you have never used Gatsby I'd recommend that you read the great tutorial on the official Gatsby site.

Install Gatsby Cli with the command

npm install --global gatsby-cli

Then run this command to create a new site and change directory into the new folder.

gatsby new gatsby-site && cd gatsby-site

Finally, open the folder on your favourite code editor and run the following command to get your site running.

gatsby develop

Create an Environmental Variable

If you are using Netlify, you can just head over to Build & Deploy tab and scroll down until you find the "Build environment variables", make sure your environmental variable starts with GATSBY_<name> so you can store your API key on a variable with the name GATSBY_AIRTABLE for example.

If you just want to test this with Gatsby on your development version, you can just create the file .env.development on the root of your project and then add the API key from airtable like this: AIRTABLE_API=<your API key here>.

Then, when you want to use your API key all you need to do is type process.env.AIRTABLE_API and Gatsby will automatically translate that into your API key.

Build the form

Let's finally build the form. Create a new page on your pages folder, call it contact and add the following code to the page.

import React from "react"

class Contact extends React.component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  handleSubmit = e => {
    console.log(this.state);

    e.preventDefault();
  }

  handleChange = e => this.setState({ [e.target.name]: e.target.value})

  render() {
    return() (
      <form>
        <label>
          Name
          <input type="text" name="name" onChange={this.handleChange} />
        </label>
        <label>
          Notes
          <input type="text" name="notes" onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

Head over to http://localhost:8000/contact, you will see the quite ugly form that we have created. Open devtools and then fill the form, you will see that whatever you just typed on the input fields will be logged into the console.

As you can see, our component is keeping track of what is being written to the input fields. We can now call Airtable API and send this to our base.

Submit to Airtable

The API post request will be done in the handleSubmit method. Make sure you are on the Create a record in the API Documentation because you will need to know the URL to send the post request.

handleSubmit = e => {
  const fields = {"fields": {"Name": this.state.name, "Notes": this.state.notes}}
  fetch("https://api.airtable.com/v0/<account id>/<table name>", {
    method: "POST",
    headers: {"Authorization": `Bearer ${process.env.AIRTABLE_API}`,
              "Content-Type": "application/json"},
    body: JSON.stringify(fields)
  })
  .then(() => alert("Form Sent!"))
  .catch(error => alert(error))

  e.preventDefault();
}

Notice that I am using backticks on the Authorization header if you want you can just write it like this: "Bearer " + process.env.AIRTABLE_API". Also, make sure you are passing the environmental variable with the exact name as on your .env.development file.

Full code

So the full working code will look like this

import React from "react"

class Contact extends React.component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  handleSubmit = e => {
    const fields = {"fields": {"Name": this.state.name, "Notes": this.state.notes}}
    fetch("https://api.airtable.com/v0/<account id>/<table name>", {
      method: "POST",
      headers: {"Authorization": `Bearer ${process.env.AIRTABLE_API}`,
                "Content-Type": "application/json"},
      body: JSON.stringify(fields)
    })
    .then(() => alert("Form Sent!"))
    .catch(error => alert(error))

    e.preventDefault();
  }

  handleChange = e => this.setState({ [e.target.name]: e.target.value})

  render() {
    return() (
      <form>
        <label>
          Name
          <input type="text" name="name" onChange={this.handleChange} />
        </label>
        <label>
          Notes
          <input type="text" name="notes" onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

If you are using Netlify don't forget to change the environmental variable to GATSBY_<your env variable name>.

Note that you will need to change the form to use it in production, you probably want to change the input names, the names of the airtable columns and also create a honeypot to avoid bots from spamming your Airtable base. This was meant to be a quick and simple way to use the Airtable API to submit a form.

Note: Your API keys can be seen from within the network tab after a request is made, you can read the next part of the tutorial - Hide API Keys with Netlify Functions - and learn how to hide your keys safely.

An alternative way to log your 100DaysOfCode

Fabio Rosado — Tue, 15 Jan 2019 15:11:46 +0000

This project is meant to be an alternative way to keep track of your 100DaysOfX challenge. It allows you to have your first portfolio - if you wish so, or a place where you can keep track of your progress.

GitHub: https://github.com/FabioRosado/100daysof
Demo: https://100daysof.netlify.com

I tried to think about the things that I would like to have when I was taking the challenge and came up with a few things that got implemented into the project.

A full timeline to view all of the progress
A way to keep track streaks like the GitHub graphic
A way to expand the log to include more things than just thoughts and progress
A place to keep track of the books read through the challenge
A place to separate projects done through the challenge
A place to blog about stuff learned or thoughts
A way to stay motivated through the challenge

Why the project was created

Last year I participated in the #100DaysOfCode and was able to complete it but failed to maintain a streak of 100 days. When working on the challenge I became unhappy with the way we log our progress, mostly because I was using a single markdown file.

Slowly a seed grew in my head and I was able to come up with a concrete idea for a project that could offer a better way to keep track of your progress. I also wanted to help folks that never coded before and decided to get into coding by doing the challenge.

The birth of 100DaysOf

Looking at the things I wanted to implement, it was obvious that a single markdown file wouldn't just cut it. So the idea of creating a site for the project came to mind.

Also, there are a lot of people that start coding by committing to the 100DaysOfCode challenge, so I wanted to give them the possibility to set up and have their own version of the site to show off their progress and to be their first portfolio.

I wanted to release the project on the 1st of January mostly because a lot of people commit to the challenge on this date. So I implemented my own version of a scrum board and filled the backlog with everything that I needed to do and started my sprint.

The project was released after 1.5 week - it helped that I was off and had plenty of time. But a lot of things needed to be improved, also I wanted to add achievements to the site just to add a bit of gamification to the challenge.

A lot of liquid tags - if/elif statements - I created the basic logic for the achievements, afterwards all that was needed to do was create the badges. Adobe XD was a great tool to design both the badges but the whole layout of the site.

What's next

At the moment I am quite happy with the layout and everything that is implemented. The site doesn't look as good as it should on ipads, but mobile seems okay although it could be improved a bit, so any feedback would be valuable!

Would love to have people using the project, but no one is using it at the moment. Hopefully this will change in the future. Finally, I want to add a few more achievements, perhaps some related to coding languages used.

For a week the Python world was a bit broken

Fabio Rosado — Tue, 11 Dec 2018 11:29:48 +0000

If you know a bit of python, you probably know the very popular library requests created by Kenneth Reitz.

You might have noticed that your CI tool (Travis or other) was complaining about something if you use requests directly in your project or rely on another library that uses requests.

By opening the logs of your CI tool, they would show something like this:

Traceback (most recent call last):
  (...)
  raise VersionConflict(dist, req).with_context(dependent_req)
  pkg_resources.ContextualVersionConflict: 
      (idna 2.8 (/home/travis/build/.../.../.tox/py35/lib/python3.5/site-packages),
      Requirement.parse('idna<2.8,>=2.5'), {'requests'})
  (...)

Okay, at first glance there was some issue within requests and idna. So what happened?

The IDNA library

What is this library for?
According to the library readme, this library offers "[s]upport for the Internationalised Domain Names in Applications (IDNA) protocol as specified in RFC 5891 and also provides support for Unicode Technical Standard 46.

What happened?
On the 4th of December, the IDNA library gets an update and a bump of version to 2.8. Since requests were specifying that this library needs to have a version between 2.5 to 2.7 as soon as the library got updated Travis got upset.

An update to requests

A week later, on December the 10th, requests get updated and its version bumped to 2.21.0. With this update, requests accept the new version of the IDNA library.

Travis and other CI tools are now happy once more and you can get your PR merged again.

The fix

Fixing this issue is quite easy. Simply specify the version of idna that requests needs within your project. This will make Travis pull that version of idna and the requirements of requests won't conflict anymore.

On your requirements.txt or any other file you use to manage your dependencies adding the following will fix the failing tests.

idna == 2.7

You can apply this with any conflicting libraries that you might have until things get fixed and you are able to use the most up to date versions.

Conclusion

Does this all mean that the world of Python was indeed broken? Not at all, but if you use requests on your project, then for a week your CI tool wasn't happy(unless you pin the idna version).

In opsdroid we had to wait until requests got updated so we could merge two PRs which itself is not a big deal.

This episode made me realise how important dependencies are within projects and how something can break without being directly your fault or anyone's fault really.

I would love to hear how do you keep track with your dependencies and updates to these dependencies. Do you just merge new updates or do some testing beforehand?

I'd like to thank to @rhymes for showing me how home assistant solved this issue.

Weather App: Using geolocation and Vue

Fabio Rosado — Tue, 04 Sep 2018 17:51:55 +0000

This is a crosspost from my personal blog hope you like it!

In this post, I will be using the same files as my previous tutorial - Creating a weather app: using Vue and Axios - because what I will show you is tightly tied to the previous tutorial.

You might be wondering, why I am writing this post.

The previous tutorial was an introduction to Vue and Axios, but the location was hardcoded in the Vue app. If you want a working weather app you will only be able to get the weather in London and not your city.

Do you need to read the previous tutorial to follow this one?

No. You can just get the needed files and start where we left off. You will also need to get an API key from OpenWeatherMap so you can get the weather information.

Geolocation

HTML5 offers a Geolocation API so you can get the location of a user - in this case, you. Geolocation is also available on 93% of the browsers according to Can I use, which means that most browsers support this function.

When using geolocation you need to know a few things:

The user needs to approve the request to share the location
Geolocation is more accurate for devices with GPS
Geolocation API will only work on secure contexts such as HTTP (some browsers won't ask for the permission and get decline straight away).

Because geolocation is dependent on the user accepting to share the location, we should have a strategy when our app can't get the location.

A final thing worth to mention. I have tried a few ways to make geolocation work with Vue. A lot of them failed, but in the end, I was able to make it work by creating a function to check if geolocation is enabled. If it was, then a new function would be called and we would get the latitude and longitude details.

VueJs

Our VueJs app was left in this state:

let weatherApp = new Vue({
  el: '#app',
  data: {
    currentTemp: '',
    minTemp: '',
    maxTemp:'',
    sunrise: '',
    sunset: '',
    pressure: '',
    humidity: '',
    wind: '',
    overcast: '', 
    icon: ''
  },
  methods: {
    getWeather() {
      let url = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID={Your API Key}";
      axios
        .get(url)
        .then(response => {
          this.currentTemp = response.data.main.temp;
          this.minTemp = response.data.main.temp_min;
          this.maxTemp = response.data.main.temp_max;
          this.pressure = response.data.main.pressure;
          this.humidity = response.data.main.humidity + '%';
          this.wind = response.data.wind.speed + 'm/s';
          this.overcast = response.data.weather[0].description;
          this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
          this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
          this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
      })
      .catch(error => {
        console.log(error);
      });
    },
  },
  beforeMount() {
    this.getWeather();
  },
});

Immediately, we can see that the method getWeather will need to be refactored because the API URL is hardcoded to display the weather in London only. The rest of the function seems to be pretty good since we are just assigning values obtained from the API. If we change the URL bit everything will stay the same.

    getWeather(url) {
      axios
        .get(url)
        .then(response => {
          this.currentTemp = response.data.main.temp;
          this.minTemp = response.data.main.temp_min;
          this.maxTemp = response.data.main.temp_max;
          this.pressure = response.data.main.pressure;
          this.humidity = response.data.main.humidity + '%';
          this.wind = response.data.wind.speed + 'm/s';
          this.overcast = response.data.weather[0].description;
          this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
          this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
          this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
      })
      .catch(error => {
        console.log(error);
      });
    },

The variable URL was deleted and we are simply adding a parameter url to the getWeather function. Now, we can get our hands into creating methods for the geolocation and getting the URL.

First, we will add two constant variables to the top of our main.js file(lines 1 and 2):

const API = 'http://api.openweathermap.org/data/2.5/weather?units=metric'
const KEY = '&APPID={Your API Key Here}'

Now inside the VueJs app we will create two methods:

geolocation()
buildUrl(position)

As I said before, geolocation needs to have a function as a parameter if we want to do something with the latitude and longitude obtained through the browser. The method buildUrl(position) is just that, the position parameter will be used to extract these two things.

Methods for the geolocation

The methods will be quite simple to understand, first, we will call the getCurrentPosition method from the Geolocation API. The two parameters passed are callback functions - one if it was successful(this.buildUrl) and one if an error was returned(this.geoError).

    geolocation() {
      navigator.geolocation.getCurrentPosition(this.buildUrl, this.geoError);
    },
    buildUrl(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;

      this.getWeather(API + '&lat=' + lat + '&lon=' + lon + KEY);
    },
    geoError(error) {
      this.getWeather(API + '&lat=0&lon=0' + KEY);
    }

As you can see the methods are pretty straightforward, we are simply building the API URL depending on how successful it was to get the user location, if not then we will just use 0,0 as location. Bonus points if you figure out where it is.

One final change we need to do to the VueJs app is replacing the method being called on beforeMount(). Instead of calling this.getWeather() we need to call this.geolocation().

Our main.js file will look like this:

const API = 'http://api.openweathermap.org/data/2.5/weather?units=metric'
const KEY = '&APPID=9ef28fe3735a820928decffcf48f5c3f'

let weatherApp = new Vue({
  el: '#app',
  data: {
    currentTemp: '',
    minTemp: '',
    maxTemp:'',
    sunrise: '',
    sunset: '',
    pressure: '',
    humidity: '',
    wind: '',
    overcast: '', 
    icon: '',
    location: ''
  },
  methods: {
    getWeather(url) {
      axios
        .get(url)
        .then(response => {
          this.currentTemp = response.data.main.temp;
          this.minTemp = response.data.main.temp_min;
          this.maxTemp = response.data.main.temp_max;
          this.pressure = response.data.main.pressure;
          this.humidity = response.data.main.humidity + '%';
          this.wind = response.data.wind.speed + 'm/s';
          this.overcast = response.data.weather[0].description;
          this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
          this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,5);
          this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,5);
      })
      .catch(error => {
        console.log(error);
      });
    },
    geolocation() {
      navigator.geolocation.getCurrentPosition(this.buildUrl, this.geoError);
    },
    buildUrl(position) {
      const lat = position.coords.latitude;
      const lon = position.coords.longitude;

      this.getWeather(API + '&lat=' + lat + '&lon=' + lon + KEY);
    },
    geoError(error) {
      this.getWeather(API + '&lat=0&lon=0' + KEY);
    }
  },
  beforeMount() {
    this.geolocation();
  },
});

Conclusion

This is a very brief tutorial on how to use the Geolocation API with VueJs. The reason why I decided to write this tutorial was because I had plenty of issues trying to make it work on my Quote and Weather landing page so hopefully, this will help you in case you are stuck.

Finally, we should probably change the app so it shows the current location in order for our users to know which weather data did they get. I will leave this challenge for you to complete - you might have to fix the CSS a bit as well if you add the location.

Note: You can get the updated main.js file here.

Weather App: Using Vue and Axios

Fabio Rosado — Sat, 25 Aug 2018 17:05:30 +0000

I spent quite some time writing this tutorial, mostly I write blog posts to make sure I learned something properly. This is a cross post from my personal blog, I hope you like the tutorial and I'm eager to have your feedback!

One of the challenges on freecodecamp is to build a weather app. The idea is pretty simple. Get the weather data from the API provided, build a function to convert the temperature from Celsius to Fahrenheit and show the current weather.

In this article, I'm not going to write a walkthrough on how to solve this challenge fully, but this might be a good start, if you have no clue what to do.

What I am going to show you, is how to use Vue and Axios to connect to the OpenWeatherMap Api, get the weather data from a town(London) and display it.

The OpenWeatherMap API

In order for you to connect to the API you need an API Key, otherwise, the server will just reject your connection attempt.

You can get a free API Key by clicking the subscribe button under the Current Weather Data in this page.

The API will return you the data in JSON format, but you will need to provide a few things in order to get it:

The endpoint
The API Key
The units to get the data (Celsius, Fahrenheit) - defaults to imperial
Either the city name, coordinates, zip code or city id

You can check the parameters that the API expects you to pass to get the right JSON data from the documentation page.

In this article, I am declaring metric (Celsius) as the unit and London as the city name. So the API link will look like this:

http://api.openweathermap.org/data/2.5/weather + ?q=London +&?units=metric + &APPID={API KEY}

I have divided the link, so you can see how to add parameters to the API endpoint to get the data that you want.

This is how the API link will look like:

http://api.openweathermap.org/data/2.5/weather?q=London&?units=metric&APPID={API KEY}

If you add your API Key at the end of the link and paste it into your browser, you will get all the data you need. Now, all we have to do, is to get that data into Vue.

Getting the Weather Data with Axios

In Javascript, you can use different tools to get data from an API. In this article, I am using axios. The way you get data from the API doesn't really change much. If you use a different tool you shouldn't have any issues.

To use axios you can either do npm install axios or add the CDN link <script src="https://unpkg.com/axios/dist/axios.min.js"></script> to your page.

In this article I am using axios from the CDN link.

The code that you need to write is pretty straightforward. First, we call axios, then we do a get request from an URL and then we either get a response or catch an error if one is returned.

The code will look like this:

axios
  .get(url)
  .then(response => {
    console.log(response.data);
})
  .catch(error => {
    console.log(error);
});

If you are wondering why we are getting response.data and not just response, the reason for this is simple. The response will not only return the data, but also status code, headers and the type of request made.

Use the openweathermap URL and add another console.log(response); and see what you get when you run the code.

Creating the Vue app

I am not going into depth about VueJs or how to create an app with it. But the very quick basics is that you create an app by triggering the Vue object to a div id.

A Vue app looks like this:

let weather = new Vue ({
  el: "#app",
  data: {

  },
  methods: {

  }
})

The el parameter is the id of the div inside your html. This div id is usually called app but you can name it whatever you wish, just make sure you change el inside the Vue object.

The data parameter contains all the data that you might need for your app, usually, you would create variables here and then use or modify them. This is also where VueJs will try to get the variable names to translate the tags {{name}} in our HTML.

The methods parameter is where you specify all the functions that you might want to call when using the app.

In order to use VueJs you have to install it either with the command, npm install vue or add the CDN link <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> on your page.

I hope this very quick and brief introduction helps you to make sense of things with Vue if you don't know anything about this framework.

Building the Weather App

Now that we have the basic knowledge on how to connect to the OpenWeatherMap API, how to use axios and how to create a Vue app, I will show you how to create the weather app.

HTML & CSS

The HTML for the app will be quite basic. The page will have a background and a centre div with the id="app" that Vue will use. This div will also have a simple background image just to make it look nicer.

So, let's start by creating the HTML code. We will import our css and js files to have a working webpage, we will also import VueJs, axios and the two fonts that we will use in our app.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Weather App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:extra-light|Vast+Shadow" rel="stylesheet">
  </head>

  <body>
    <div id="app">
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>

</html>

Now that all the needed files are imported and the page has a title, we will create the skeleton for our div. In order for your data to be displayed, you will use the format {{ variableName }}, this variableName will be the name used within the Vue data in our Vuejs app.

The HTML will be divided into three parts. The left top part that will show the icon, the current weather and the description of the weather. The right top part which will show the min and max temperatures of the day. Finally, the bottom part where we will display other information such as humidity, pressure, the time of the sunrise/sunset and the wind speed.

The <div id="app"> will look like this:

<div id="app">
  <div id="weather">
    <img src="images/sunny.svg"> {{overcast}}
    <span class="temperature">{{currentTemp}}°</span><br>
    <span id="temp-values">Min {{minTemp}}° <br> Max {{maxTemp}}°</span>
  </div>
  <div id="info">
    <img class="icon" :src=icon> {{sunrise}}
    <img class="icon" src="images/sunset.svg"> {{sunset}}
    <img class="icon" src="images/humidity.svg"> {{humidity}}
    <img class="icon" src="images/pressure.svg"> {{pressure}}
    <img class="icon" src="images/wind.svg"> {{wind}}
  </div>

Now that the skeleton of the page is done, we need to update our main.css file in order to have the page look a little bit better.

Note: The code that I am going to show you here isn't responsive and it's a bit hacky. I'm sure there is a better way to do things, but it will do for the purpose of this tutorial.

main.css File

body {
  background: #3d4869; /* Old browsers */
  background: -moz-linear-gradient(#3d4869, #263048) fixed; /* FF3.6-15 */
  background: -webkit-linear-gradient(#3d4869,#263048) fixed; /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(#3d4869,#263048) fixed; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background-repeat: no-repeat;

  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  text-shadow: 0px 0px 2px #000000;
  color: #ffffff;
}

#app {
  background: url(images/waves.svg) no-repeat;

  width:    520px;
  height:   170px;

  position: absolute;
  top:      35%;
  left:     35%;
}

#weather {
  padding: 15px;
  vertical-align: middle;
}

.temperature {
  font-family: 'Vast Shadow', cursive;
  font-size: 40px;
  vertical-align: top;
  position: absolute;
  left: 80px;
}

#temp-values {
  text-align: right;
  text-justify: distribute;
  display: block;
  position: relative;
  top: -60px;
}

#info {
  padding-left: 20px;
  position: relative;
  top: -20px;
}

.icon {
  position: inherit;
  top: 2px;
  padding-left: 8px;
}

index.html file

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Weather App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:extra-light|Vast+Shadow" rel="stylesheet">
  </head>

  <body>
    <div id="app">
      <div id="weather">
        <img src="images/sunny.svg"> {{overcast}}
        <span class="temperature">{{currentTemp}}°</span><br>
        <span id="temp-values">Min {{minTemp}}° <br> Max {{maxTemp}}°</span>
      </div>
      <div id="info">
        <img class="icon" :src=icon> {{sunrise}}
        <img class="icon" src="images/sunset.svg"> {{sunset}}
        <img class="icon" src="images/humidity.svg"> {{humidity}}
        <img class="icon" src="images/pressure.svg"> {{pressure}}
        <img class="icon" src="images/wind.svg"> {{wind}}
      </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>

If you try to open the page you will notice that the app doesn't look that great at the moment, that's because we don't have Vue doing the heavy lifting for us. Let's go ahead and fix this.

Note: that I'm using SVG files for the weather app background and icons, you can get the files here.

Vue

Vue and axios are already imported through the script tag located in our html code, what means that we are ready to start giving shape to our app.

let weatherApp = new Vue ({
  el: '#app',
  data: {

  },
  methods: {
    getWeather() {
    },
  }
  beforeMount() {
    this.getWeather();
    }
});

The code will be pretty straightforward, we initiate a new Vue app attached to the div with the id app. Inside the Vue app, we declare all the needed variables inside the data object, these variables will be the ones we will use to populate with the information obtained through the API.

Also, we declare a method called getWeather, this is the method that will use axios to get all the information we need from the OpenWeatherMap API.

We want the weather app to show the current weather and other weather information such as:

Minimum temperature for the day
Maximum temperature for the day
Sunset time
Sunrise time
Wind speed
Pressure
Humidity percentage

The API will return all of these details so we don't need to do much. Inside our Vue object, we will declare all the variables that we need to update the tags ({{variableName}}) in our HTML, once we connect to the API and get the needed data.

The data object inside our VueJs will look like this:

data: {
  currentTemp: '',
  minTemp: '',
  maxTemp:'',
  sunrise: '',
  sunset: '',
  pressure: '',
  humidity: '',
  wind: '',
  overcast: '',
  icon: ''
  },

Getting API Data with Axios

The Openweathermap API returns a JSON response that looks like this:

{
    "coord": {
        "lon": -0.13,
        "lat": 51.51
    },
    "weather": [
        {
            "id": 803,
            "main": "Clouds",
            "description": "broken clouds",
            "icon": "04d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 24.82,
        "pressure": 1016,
        "humidity": 51,
        "temp_min": 23,
        "temp_max": 27
    },
    "visibility": 10000,
    "wind": {
        "speed": 8.2,
        "deg": 270
    },
    "clouds": {
        "all": 75
    },
    "dt": 1534695600,
    "sys": {
        "type": 1,
        "id": 5091,
        "message": 0.003,
        "country": "GB",
        "sunrise": 1534654394,
        "sunset": 1534706018
    },
    "id": 2643743,
    "name": "London",
    "cod": 200
}

We are going to use our earlier example of axios to build the getWeather method of our Vue app. This method will look like this:

getWeather() {
  let url = "http://api.openweathermap.org/data/2.5/weather?q=London&?units=metric&APPID={API KEY}";
  axios
    .get(url)
    .then(response => {
          this.currentTemp = response.data.main.temp;
          this.minTemp = response.data.main.temp_min;
          this.maxTemp = response.data.main.temp_max;
          this.pressure = response.data.main.pressure;
          this.humidity = response.data.main.humidity + '%';
          this.wind = response.data.wind.speed + 'm/s';
          this.overcast = response.data.weather[0].description;
          this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
          this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
          this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
  })
  .catch(error => {
    console.log(error);
  })
}

As you can see by the JSON response that we get from the API, the above code is simply assigning each bit of data retrieved from the API to the variables declared in the data object in Vue, this will allow us to use the data everywhere in the app.

Notice that we are adding something to some variables.

In the icon variable we add the path for the images folder, the file name and file extension. When Vue runs it will change the src of the image to whatever the value inside icon is.

For the file name, we will slice the string that we get from the API from the char located on index 0 up to char at index 2 - this is because openweathermap changes the icon name depending on if it is day or night.

The sunrise and sunset times are given in Unix epoch time, so we just convert the time to a human-readable format and then slice the string in order to get only the hours and minutes.

Your main.js file and the Vue app should look like this now:

let weatherApp = new Vue({
  el: '#app',
  data: {
    currentTemp: '',
    minTemp: '',
    maxTemp:'',
    sunrise: '',
    sunset: '',
    pressure: '',
    humidity: '',
    wind: '',
    overcast: '', 
    icon: ''
  },
  methods: {
    getWeather() {
      let url = "http://api.openweathermap.org/data/2.5/weather?q=London&units=metric&APPID={Your API Key}";
      axios
        .get(url)
        .then(response => {
          this.currentTemp = response.data.main.temp;
          this.minTemp = response.data.main.temp_min;
          this.maxTemp = response.data.main.temp_max;
          this.pressure = response.data.main.pressure;
          this.humidity = response.data.main.humidity + '%';
          this.wind = response.data.wind.speed + 'm/s';
          this.overcast = response.data.weather[0].description;
          this.icon = "images/" + response.data.weather[0].icon.slice(0, 2) + ".svg";
          this.sunrise = new Date(response.data.sys.sunrise*1000).toLocaleTimeString("en-GB").slice(0,4);
          this.sunset = new Date(response.data.sys.sunset*1000).toLocaleTimeString("en-GB").slice(0,4);
      })
      .catch(error => {
        console.log(error);
      });
    },
  },
  beforeMount() {
    this.getWeather();
  },
});

Replace {Your API Key} with the API key that you obtained from openweathermap and reload the page, you should see the app with the current weather data now.

Conclusion

This post was rather long, I would like to first thank you for sticking up with it. I hope you learned how to use axios and Vue together to get data from an API. I would like now to ask you if you would like something to be explained more clearly or if you would like me to explain something else.

Finally, what was the first thing you created by using an API?

Agile/Scrum for a self-taught developer?

Fabio Rosado — Thu, 12 Jul 2018 07:33:05 +0000

I have browsing job offers for developers and a lot of those offers ask you to know/be/do Agile. Searching online provides a few articles that give a good idea of what is Agile and how to use it in software development.

I get the idea behind Agile and Scrum, it's a great way to manage a project, delivering incremental features within a certain time. It helps you become more productive and keep your projects tidy because you know exactly what to work on next.

The post The Beginner’s Guide To Scrum And Agile Project Management gives a good insight into Agile and the Scrum framework and how to implement it with Trello. But it assumes you are working as a team.

If you are working alone, how about the need to have a Product Owner and a Scrum Master, surely you can do all of it if the project is managed by you, but then the challenge lies in keeping yourself accountable which can somewhat destroy the whole method if you don't have enough discipline.

In essence, my question about Agile and Scrum is that if you are a self-taught developer, can you claim to know Agile if you follow the methods and the Scrum framework, but don't have any formal training/certification?

Introduction to Vim

Fabio Rosado — Tue, 01 May 2018 09:55:00 +0000

This post was first created for an open source project that I contribute to. The project creator suggested that I should post it in a blog so I have expanded the post a bit and submitted it to my personal blog. I've decided to share it with you, I hope you enjoy it!

Vim, stands for vi improved and is a command line text editor that comes installed with every platform other than windows (unless you install it). It can be hard to figure out how to do things in this editor, this post is meant to give you the basic knowledge of vim and how to do things with it.

Let's start with the basics. How do you open vim?

If you are running Linux or MacOS is most likely that you have vim installed already so you can just open your terminal and run the command vim <filename> to edit that file.

Note: You can only edit files that are within your working directory.

If you are on windows you could download it from vim.org.

Vim Modes

Vim comes with three different modes:

Normal Mode (Default mode)
Insert Mode (Press i key)
Visual Mode (Press v key)

These modes are quite easy to understand and you can see which mode you are in on the bottom left corner of the terminal window.

The normal mode is the default mode and the one activated as soon as you open Vim, you can move around, read the text, copy, insert lines, etc. The only thing you can't do in this mode is editing the text.

Editing text

If you want to edit the text you can just press the i key on your keyboard you can notice that the bottom left corner of the window now shows the text: --INSERT--.

You will now be able to use your terminal as a text editor, you can add, edit and delete text like you would do in any other text editor.

Once you are happy with the changes that you have just made, press the esc key on your keyboard and you will be back to the Normal mode.

Visual Mode

There is nothing much to say about this mode. It allows you to select big chunks of text in order for you to copy or cut. When this mode is active you can read the text: --VISUAL-- in the bottom left corner of the window.

Another thing you can do in the visual mode is to highlight text and then make small changes to the highlighted text such as changing to uppercase or indenting lines.

Vim Commands

Vim is meant to help you do things fairly quickly without the need for a mouse. Everything can be done with a keyboard, so learning some of the Vim commands will be helpful.

Things that you will learn:

how to save a file
how to quit Vim
how to move around
how to see line numbers

Note: Vim has a lot of different commands and combinations, this is just an introduction and you should read other sources if you want to learn how to use Vim properly.

Saving and quitting Vim

Now that you know how to edit a text in Vim, the most important thing you will learn will be how to save your changes and quit. If you press the : key of your keyboard, you will be able to enter commands to Vim.

To save a file all you need to do is type :w and then press enter.

To quit a file and go back to the command line you need to type :q.

Note that if you made changes to the file and didn't save them, Vim won't automatically exit, instead, it will tell you to run the command :q! which basically translates to force quit.

These two commands can be combined into one :wq. This will write the changes to the file and then quit Vim, if you want to be quicker the key combination shift+zz will achieve the same results.

You can also use the command :w <filename> to save a new file with that name - useful if you didn't open a file with vim.

Line numbers

Showing line numbers can be very useful when editing a file. VVim allows you to jump straight into a line if you know its number, so your editing can be done quicker if you know exactly where and what to edit.

To show line numbers you need to run the command :set number, once you press enter, you can see that Vim will show the number of each line.

If you want to jump straight to a line you can type the command :<line number> and the cursor will jump to the beginning of that line.

Moving around

To move around all you need is pressing a few keys to do different things. Moving around doesn't require you to enter the command mode by pressing the : key.

h or arrow left - move the cursor one character to the left
l or arrow right - move the cursor one character to the right
j or arrow down - move the cursor one line down
k or arrow up - move the cursor one line up
0 - move the cursor to the beginning of the line
$ - move the cursor to the end of the line
w - move the cursor one word forward
b - move the cursor one word back
gg - move to the beginning of the file (line 1)
G - move to the end of the line (last line)

This two commands can be used while moving/editing the file:

o - adds an empty line below the cursor, moves the cursor to that line, enters edit mode
O - adds an empty line above the cursor, moves the cursor to that line, enters edit mode

Deleting things

You can delete things by pressing the d key, this will serve as the cut command as well. Vim allows you to combine commands to achieve a porpose, so you can combine the moving around commands with the delete to improve your editing skills.

de - delete from where the cursor is until the end of the current word
dw - delete to next word
d2w - delete two words from cursor
d$ or D - delete to the end of the line from where the cursor is
dd - delete the whole line

Other useful commands

Since we tend to delete the wrong things vim also comes with an undo and redo command that can come in handy in plenty of situations.

u - undo previous command/action
CTRL-u - redo previous command/action
. - repeats last command that modified something (such as 2dd - delete two lines)

You can also make vim search for a term in the whole file with the commands:

:?<term> - searches for that term from the cursor down
:\<term> - searches for that term from the cursor up
n or / - go to the next searched term
N or ? - go to the previous searched term

Conclusion

This concludes the introduction to Vim, hopefully, you found it useful. There is a lot of things that you still need to learn but this should give you the basics to work around in this text editor.

If you would like to know more about Vim, you can run the Vim tutor by running this command on your terminal:

$ Vimtutor

This will open a text file with step-by-step instructions that cover all the basic commands in Vim.

Andrea Benfatti suggested on Twitter that https://vim-adventures.com was good for anyone new to vim. I didn't know about this site before but I checked it out and it does seem a very fun way to practice a lot of the vim commands with this game so do check it out!