Forem: Rei Allen Ramos

Revamp your profile's color scheme!

Rei Allen Ramos — Thu, 28 May 2020 07:53:21 +0000

Hey awesome devs! 👋 As a side-project, I created this app to seamlessly browse color palettes for your account! If that's not your thing, you can also enter a username and scrape their profile to identify which colors they use.

But why?

From a user point-of-view, I feel the color pickers in the profile settings aren't as intuitive as they can be (not all of us are gifted in color theory 😕). However if you have available hex values then good for you!

From a developer point-of-view, this is a part of my journey in learning Python. The frontend was fairly easily done with VueJS, but on the backend side I got to learn about web scraping with BeautifulSoup4. As a bonus, I also learned how to deploy images in Google Cloud Run 🌈!

Code available here.

Shoutout to Michael from yo@dev.to for responding and pointing me to the right direction when using the DEV logo! 👌

PWA vs a progressive web app: what's the difference?

Rei Allen Ramos — Wed, 13 May 2020 05:46:23 +0000

You know how sometimes the English language can be vague with wording and phrases? This is one of those times. I know that the acronym PWA stands for Progressive Web App but is there a difference when saying

an app is a PWA, and
that a web app is progressive

or none at all? HELP!

How I learned a lot from deploying an app that does nothing

Rei Allen Ramos — Fri, 08 May 2020 07:33:43 +0000

I did it! Frontend, backend, database, deployment. It was all me!

...aaaand it's empty.

Today I want to share my journey on a personal project with a huge disclaimer that it's not exciting nor groundbreaking. My intention was not to please anybody with this project, but what I truly wanted when the idea came to me was just to create a password-free authentication stack then deploy. It's that simple. Or so I thought.

Quick backstory...

Hello! I've been on DEV for just less than a month but I already consider it my new Twitter. Not that my DEV feed is filled with sarcastic comments or witty retorts (which my Twitter unfortunately became), but what I enjoy is the streamlined feed of user-created tutorials intertwined with their own personal stories. Dreading to open Twitter just to quench my thirst for 'social life', DEV quickly transformed from a mere alternative to my go-to medium for online interaction.

As a young developer, it's exciting to dabble in the newest and hippest technologies. Jumping on the ReactJS bandwagon when I was just starting out a little more than 2 years ago, the concept of reactive components and seeing your page automagically update without refreshing was apple to my eyes. About a year after, my radar picked up VueJS. It steadily gained its reputation for having a flatter learning curve than React. Decided to try it out and much to my suprise, Vue components proved to be easily digestible. Without hesitation, I turned my back on React and picked up this young, shining, Vuetiful framework.

Anyway, the app

About a week ago I was laying on my bed getting ready to sleep when the idea came to me: create a template to bootstrap my process and do the heavy lifting every time I want to create a new web app. In other words, a boilerplate. If I do it right, I will effectively skip several forks-in-the-road such as choosing a frontend framework and a corresponding CSS library, what language to code the server in, which database to use, and what authentication method to implement. If I do it wrong, we'll, at least I'll learn.

Action-first mindset

When learning something for the first time, my manager used to say "first, make it work, then understand it later." This mindset is perfect for lazy people like me who digress from crafting attack strategies and making burndown charts. Just do it! What could go wrong! Break things but only just before reaching the point of no return. Break things then fix them.

So I took it upon myself to learn the basic devops workflow. No more procrastinating by reading one tutorial after another.

One of my favorite productivity YouTubers said "...with an action-first mindset, you're going to get burned. But the lessons you get by getting burned are the ones you remember." After several days of getting entrapped by the vicious cycle of installing packages, learning how to use them, breaking a previously installed dependency, and copy-pasting stackoverflow answers, I was able to duct-tape the following technologies together:

	Technologies I learned	notes
Frontend	NuxtJS, Vuetify, Vuex	The trickiest part was binding the port in the host machine's IP. Also, Vuetify is magical 🎆
Backend	ExpressJS, NodeJS	Created public and protected RESTful APIs
Authentication	JWT, OTP	JWT was pretty straight forward: generate a token from a secret + the given email, then saving in the browser storage and/or cookies was automatically handled by Nuxt. Had to use a simple random string generator for the OTP
Database	MongoDB	First time to use MongoDB, let alone a NoSQL db
Caching service	Redis	Storing OTPs for a certain duration
operations	Docker	Learned how to build my app into an image and peform proper tagging. Push it to Docker Hub for later use in a cloud VM
deployment	AWS	Provisioning an AWS Lightsail instance and create a startup script. Also, deploying in GKE incurred about $5 for just one night. True story!

I'll spare you the implementation choices because they're all personal and highly opinionated. What I'm excited to share is that I was able to put everything together! Definitely still a newbie in this industry, but there's not a single strand of doubt in my mind that I leveled up! Sure, if we take a deep dive into the code, it's still rough on the edges. But hey, how many people can say they deployed their code on the public internet? 😉

If you're still reading and want to check it out, visit the app here and the code here. Please be gentle, the VM I provisioned only has 512MB RAM 😆.

What do you think? Did I achieve my goal of creating a password-free authentication? I'd be delighted to hear your thoughts.

Thanks for reading!

How to use HTML Canvas with Vue

Rei Allen Ramos — Fri, 01 May 2020 13:26:23 +0000

HTML 5's Canvas API is an amazing tool for creating graphics on a page. From drawing basic shapes and animation to data visualization and on-the-fly video processing, Canvas API turns your dreams to reality using JavaScript. Let's learn how to integrate it with Vue.

🦄 What we're building 🦄

1. Create a canvas

Start off by creating a canvas in your DOM. Let's add a little CSS to keep the canvas' boundaries visible.



<template>
  <div id="app">
    <h1>Drawing with mousemove event</h1>
    <canvas id="myCanvas" width="560" height="360" />
  </div>
</template>

<style>
#myCanvas {
  border: 1px solid grey;
}
</style>

Instantiate a Vue class and hook it up to you DOM.



new Vue({
  el: '#app'
})

The trick to managing the canvas is by making it accessible to Vue by declaring a state and passing it the canvas' 2d context. We just need to make sure to do this after Vue and DOM have finished initialization. Enter mounted() lifecycle hook.



new Vue({
  el: '#app',
  data: {
    canvas: null,
  },
  mounted() {
    var c = document.getElementById("myCanvas");
    this.canvas = c.getContext('2d');
  }
})

2. Reading mouse coordinates from `mousemove`

Using the mousemove event, we can identify the exact location of the cursor in the screen. Create an event handler called showCoordinates and pass it to the corresponding Vue directive.

The event handler will read the x- and y-coordinates from the MouseEvent interface. Use the properties offsetX and offsetY to take into consideration the (x,y) offset from the edge of the canvas. Make sure not to confuse these with clientX and clientY because they start from the top left corner of the visible screen.



<template>
  <div id="app">
    <span>{{x}}, {{y}}</span>
    <h1>Drawing with mousemove event</h1>
    <canvas id="myCanvas" width="560" height="360" @mousemove="showCoordinates"/>
  </div>
</template>



new Vue({
  // ...
  data: {
    canvas: null,
    x: 0,
    y: 0
  },
  methods: {
    showCoordinates(e) {
      this.x = e.offsetX;
      this.y = e.offsetY;
    }
  },
  // ...
})

3. Draw!

So far, so good. Knowing the exact coordinates of the cursor helps us determine where to draw on the canvas. Let's create a new function to draw a line and rename showCoordinates to draw. Inside draw, call the function to draw a line.



new Vue({
  // ...
  methods: {
    // ...
    drawLine(x1, y1, x2, y2) {
      let ctx = this.canvas;
      ctx.beginPath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 1;
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
      ctx.closePath();
    },
    draw(e) {
      this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
      this.x = e.offsetX;
      this.y = e.offsetY;
    }
  },
  // ...
})

Don't forget to update the Vue directive mousemove to use draw: <canvas id="myCanvas" width="560" height="360" @mousemove="draw"/>

Now we're getting somewhere! While your cursor is within the canvas boundaries, Vue keeps creating a line from old x- and y-coordinates to the next location.

But did you notice the ugly line from the top left corner? That's because we set the default (x,y) coordinates to be (0,0). We want to fix it but not by modifying the default coordinates. Instead, we need to tell Vue when to start and stop drawing. Just like how a pen shouldn't be able to transfer ink to paper just by hovering, the mouse shouldn't be able to draw just by moving over the canvas.

4. `mousedown`, `mouseup`

Create a new state called isDrawing and set the default value to false. Then define two methods to handle mousedown and mouseup events. Update draw to use the isDrawing flag. It looks like we added a lot of stuff but we're simply telling Vue to draw if and only if the left mouse button is pressed.



new Vue({
  // ...
  data: {
    canvas: null,
    x: 0,
    y: 0,
    isDrawing: false
  },
  methods: {
    // ...
    draw(e) {
      if(this.isDrawing) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = e.offsetX;
        this.y = e.offsetY;
      }
    },
    beginDrawing(e) {
      this.x = e.offsetX;
      this.y = e.offsetY;
      this.isDrawing = true;
    },
    stopDrawing(e) {
      if (this.isDrawing) {
        this.drawLine(this.x, this.y, e.offsetX, e.offsetY);
        this.x = 0;
        this.y = 0;
        this.isDrawing = false;
      }
    }
  },
  // ...
})

Pass the new functions to the appropriate Vue directives: <canvas id="myCanvas" width="560" height="360" @mousemove="draw" @mousedown="beginDrawing" @mouseup="stopDrawing" />. Then remove the coordinates from the dom to finish your project!

Clik here for the complete code.

Free illustrations for your next project

Rei Allen Ramos — Fri, 01 May 2020 06:16:33 +0000

Who doesn't like free stuff? Whether you're a designer, a graphics illustrator, a web developer, a student looking to spice up their presentation, or someone who just enjoys beautifully made illustrations, these awesome projects will surely inspire you and get your creative juices flowing.

1. Undraw

Undraw features thousands of high-quality SVG for your pages. The palette is dynamically created from a single color that you can freely choose. As of today, illustrations are not grouped into categories so it's a bit difficult to browse by infinite scrolling. Also available as PNG.

2. Black Illustrations

An amazing project that aims to represent people of color in illustrations. Create an inclusive atmosphere with these illustrations available in Photoshop, Illustrator, XD, Sketch, and Figma.

3. Streamline Labs

80 free vector illustrations for your presentation and/or websites. Comes in hand-drawn and flat styles. Want more? Check out their 3,000 illustrations (50 are free for you to try) and 30,000 free icons.

4. Open Peeps

This one blew my mind when I first tried it. Modern cartoon style where you can mix and match "...building blocks made of vector arms, legs, and emotions." Support for the leading design programs.

ExpressJS: Static and Dynamic Routes

Rei Allen Ramos — Sun, 26 Apr 2020 04:26:29 +0000

Recently I've been writing simple VueJS tutorials. This got me thinking -- wouldn't it be better if I also had a backend that complements Vue? Several articles later, I was convinced that ExpressJS is just what I need.

This tutorial:

will generate a bare-bones ExpressJS server app
will discuss how to write a simple ExpressJS API (GET)
will demonstrate how to convert a static route to a dynamic one
will not discuss the complete RESTful verbs (POST, PUT, PATCH, etc)

Project Setup

mkdir express-routing-practice && cd express-routing-practice
npm init -y
npm i --save express debug http

This will generate package.json and package-json.lock for us. We'll need the debug and http modules because it's required by bin/www (more details later).

Express Setup

For this tutorial, I don't recommend using the Express generator because it creates a lot of boilerplate code that we won't use. What we'll do is use it as a guide to bootstrap our app. This also helps identify which sections of the Express generator is directly related to routing.

Create a bin folder and an empty file www.

mkdir bin && cd $_
touch www

Copy this from the official repo to bin/www to do the heavy lifting. We don't need to delve in detail what each line does. However we do need to note that var app = require('../app') tells us which file is our entry point. Let's create that file now via touch app.js in the root folder, then add the following:

// app.js
var express = require('express');
var app = express();

module.exports = app;

Update package.json to remove the default entry point index.js and add a new script to start our server:

// before
{
  "name": "express-routing-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
}

// after
{
  "name": "express-routing-practice",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "DEBUG=express-routing-practice:* node ./bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...
}

Then in your terminal, start your server via npm start. Visit localhost:3000 in your browser. If you're seeing Cannot GET /, that means our server is operational! 🎉

Create a GET endpoint

We'll create 2 routes with 1 GET endpoint for each. Create a new folder and the 2 files via:

mkdir routes
touch routes/home.js
touch routes/users.js

home route

Open home.js and paste the following:

var express = require('express');
var router = express.Router();

// Explanation: A nameless path GET request without any parameters.
// We'll learn how to name a path in users route.
router.get('/', function(req, res, next) {
  return res.json({ message: 'Home!', data: null })
});

module.exports = router;

Then add this to app.js anywhere before module.exports = app; to use it:

// Explanation: requests to `localhost:3000/` should be redirected to `routes/home.js`
var homeRouter = require('./routes/home')
app.use('/', homeRouter);

Restart your server then visit localhost:3000 to see the json on screen!

users route

Setup users.js and add some data:

var express = require('express');
var router = express.Router();

var data = [
  {
    name: 'Bibi',
  },
  {
    name: 'Colt',
  },
  {
    name: 'Jessie',
  }
]

router.get('/', function(req, res, next) {
  return res.json({ message: 'Users Index', data: data });
});

module.exports = router;

then update app.js to include:

var usersRouter = require('./routes/users');
app.use('/users', usersRouter);

Restart server, visit 'localhost:3000/users' and see the data come to life.
Tip: You can also use cURL to test your endpoints. We're making an API after all 😄.

Adding path name to a GET endpoint

By convention, a GET endpoint will return a complete list (or an index) of a resource. But should you need to set another GET endpoint, Express is ready for that.
Let's build on top of users.js to create more GET endpoints:

router.get('/Bibi', function(req, res, next) {
  var name = req.originalUrl.split('/')[2];
  var user = data.filter(u => u.name == name);
  return res.json({ message: 'User Show', data: user });
});

router.get('/Colt', function(req, res, next) {
  var name = req.originalUrl.split('/')[2];
  var user = data.filter(u => u.name == name);
  return res.json({ message: 'User Show', data: user });
});

router.get('/Jessie', function(req, res, next) {
  var name = req.originalUrl.split('/')[2];
  var user = data.filter(u => u.name == name);
  return res.json({ message: 'User Show', data: user });
});

Explanation: a GET request to localhost:3000/users/Bibi will be redirected to the subpath Bibi, and so on.

Whoa there! Our reference data didn't change but our source code just scaled in size! Imagine if we had 99 objects in the data array -- will we make 99 subpaths? Well technically we can but wouldn't it be better if there was a way to encapsulate all these subpaths?

Dynamic routes

What we've created up until now are called static routes. To convert these into a dynamic route, we simply need to declare an identifier using a colon (:). Express then automagically determines which subpath the request should be redirected to.
Updating the three subpaths:

router.get('/:name', function(req, res, next) {
  var name = req.params.name;
  var user = data.filter(u => u.name == name );
  return res.json({ message: 'Users Show', data: user });
});

Hooray! Now you'll be able to access localhost:3000/users/Bibi, localhost:3000/users/Colt, and localhost:3000/users/Jessie using one dynamic route 🎉!

Lazy loading in Vue

Rei Allen Ramos — Sat, 25 Apr 2020 07:20:48 +0000

Today I was browsing Vue resources and stumbled upon Webpack's code splitting feature. Several links later, I found this video that demonstrates how seamless it can be done in Vue.

Webpack's Code splitting

Code splitting is the practice of bundling javascript files into small chunks. Lazy loading refers to how Webpack serves these chunks only when needed. When done correctly, they alleviate page loading time.

Example

For a given routes.js:

import Home from './components/Home.vue'
import MyProfile from './components/MyProfile.vue'
import About from './components/About.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: MyProfile
  },
  {
    path: "/about",
    name: "about",
    component: About
  }
]

export default routes;

This is most likely how your basics-to-vue-router tutorial has introduced routing and there's nothing wrong with it! However, we have Webpack at our disposal so let's use it to the fullest. Time to level up!

Lazy loading in Vue is literally just one line. Let's take "/myProfile" route and lazy load it by simply modifying the component property and converting it to an arrow function that imports the, err, component.

// before
component: MyProfile

// after
component: () => import( "./components/MyProfile.vue" )

Hooray! 🎉 Another fancy term for this is dynamic imports. Behind the scenes, when we visit the root route "/home", Webpack served a bundled app.js file but set aside MyProfile.vue for later use. When the user visits "/myProfile" route, that's Webpack's cue to serve it.

Let's lazy load /about route too. The final routes.js should look like:

import Home from './components/Home.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/myProfile",
    name: "myProfile",
    component: () => import( "./components/MyProfile.vue" )
  },
  {
    path: "/about",
    name: "about",
    component: () => import( "./components/About.vue" )
  }
]

export default routes;

I hope you noticed that we didn't lazy load the Home component because it defeats the purpose of code splitting. As a general rule of thumb, lazy load components that aren't needed on the landing page.

How to use Material Design with Vue

Rei Allen Ramos — Fri, 24 Apr 2020 09:30:03 +0000

Use vue-cli to create a new app

$ vue create my-app

Let's use babel and eslint for our presets:

Vue CLI v4.2.3
┌─────────────────────────────────────────────┐
│                                             │
│     New version available 4.2.3 → 4.3.1     │
│   Run yarn global add @vue/cli to update!   │
│                                             │
└─────────────────────────────────────────────┘

? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features

It may take a few minutes for the installation to finish.

Install vue-material

Enter the folder then run npm install vue-material --save or if you're a yarn fanatic yarn add vue-material. When the installation finishes, we need to add them to main.js.

import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)

import VueMaterial from 'vue-material' - globally imports all the components. If you'd rather import per component, use import { MdCard } from 'vue-material/dist/components' (replace MdCard with the actual component you need)
import 'vue-material/dist/vue-material.min.css' - imports the minified base styles
import 'vue-material/dist/theme/default.css' - imports the default theme. Alternatives: default-dark.css, black-green-dark.css, black-green-light.css

Use Material Icons

Under head of index.html, simply add <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">.

Optional: Use Roboto

The official vue-material docs highly recommend using Roboto with your app. To use it, add <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> under head of index.html. The vue app created by vue-cli creates an App.vue component by default. Add Roboto as the first font-family option.

<style>
#app {
  font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
  /* other styles */
}
</style>

References:
Vue Material

How to use Pug and SCSS with Vue

Rei Allen Ramos — Thu, 23 Apr 2020 02:19:20 +0000

Why use pre-processors?

increase coding speed (not typing speed)
reduce source code size
and my personal favorite: DRY

Install Pug

In the root folder of your Vue application:

npm install -D pug pug-plain-loader

Then, while still in the root folder, create a new file webpack.config.js with:

module.rules = {
  test: /\.pug$/,
  loader: 'pug-plain-loader'
}

Done! To make sure your Vue component compiles with it, add lang="pug" to the <template> tags, like so:

<!-- before -->
<template>
  <div class="awesome-class">
     <h1>Hello World!</h1>
  </div>
</template>

<!-- after -->
<template lang="pug">
  .awesome-class
    h1 Hello World!
</template>

References:
Pug homepage
Vue-loader Pug guide
Pug cheatsheet

Install SCSS

In the root folder of you Vue application:

npm install -D sass-loader node-sass

Then, edit webpack.config.js so that it looks like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader',
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
}

Done! Adjust your component files by adding lang="scss" to the <style> tags.

<!-- before -->
<style scoped>
/* old css */
</style>

<!-- after -->
<style lang="scss" scoped>
/* write scss here */
</style>

Note: If you'd rather use the indent-based cousin, Sass, head on over to the Vue-loader Sass guide for the necessary modifications.

References:
Vue-loader Sass guide
Sass cheatsheet

Shorten bash shell prompt (and add colors!)

Rei Allen Ramos — Mon, 20 Apr 2020 23:53:55 +0000

In a previous article, we learned how to append the current git branch in your bash shell:

Display current git branch in bash shell prompt

Rei Allen Ramos ・ Apr 19 ・ 1 min read

#linux #git

But if you want to turn your bash shell prompt from this:

to this:

then keep reading 🦄

Shorten bash shell prompt

Fire up your editor and open ~/.bashrc. Look for the block we edited from the previous article:

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(show_git_branch)\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt

If you want to learn about each and every piece of the script, feel free to head on to the reference section below. The article even talks about how to customize the colors. Otherwise, copy-paste away!

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u\[\033[00m\]:\[\033[01;34m\]\W\[\033[00m\]\[\033[01;33m\]$(show_git_branch)\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@:\W$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt

As you might have noticed by now, this also changes the color of the git branch part. Enjoy your short and sweet prompt!

Reference:
BASH Shell Change The Color of Shell Prompt on Linux or UNIX

How to apply GKE config map changes

Rei Allen Ramos — Mon, 20 Apr 2020 07:35:19 +0000

I'm a developer by job title, but recently my tasks have been looming on the edge of being a devops. And my latest adventure involved modifying a GKE config map (setting environment variables). Let me share how I applied the changes to the affected pods.

Scale your deployment

Once you've saved your changes in the config map, the trick is to scale down your deployment to 0. WARNING: Make sure you're aware of the current replica set count before proceeding.

kubectl scale deployment service_name --replicas=0

A quick kubectl get pods will tell you the deployment is currently scaling down and existing pods are being terminated.

service_name-6bc55776bb-ncpsg           0/1     Terminating   0          9m45s

This should at most take a minute. In my case, it took just under 30secs to fully terminate the pod. Once the pod isn't listed anymore, scale it back to your original number (in my case it was 1).

kubectl scale deployment service_name --replicas=1

kubectl get pods

service_name-6bc55776bb-ncpsg           0/1     ContainerCreating   0          9m45s

That's it! Any modifications in your config map should now be reflected in the pod. If you know a more efficient way, please don't hesitate to share it!

Display current git branch in bash shell prompt

Rei Allen Ramos — Sun, 19 Apr 2020 11:16:55 +0000

A pet peeve according to Google is something that a particular person finds especially annoying. A pet peeve according to me is when I need to type git status or git branch to double check I'm not accidentally mucking up the remote master.

You've added, committed, and now you're ready to push. Then you hear a voice from the back of your head nagging you to check if you're on the correct branch:

rapramos@rapdr_ramos:~/Documents/projects/my_awesome_project$ git branch
  awesome_branch
* master

Phew, dodged a bullet. Normally your remote master should be protected from accidental pushes but better safe than sorry.

Display your git branch in your command line

Fire up your editor and open /home/your_username/.bashrc. You should be able to find this setting:

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w\$ '
fi
unset color_prompt force_color_prompt

Above the block, add:

show_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

Then call the function via $(show_git_branch) and insert it right before the last \$ for both cases. The final code should look like:

if [ "$color_prompt" = yes ]; then
    PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]$(show_git_branch)\$ '
else
    PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(show_git_branch)\$ '
fi
unset color_prompt force_color_prompt

Save, exit then run source ~/.bashrc to apply your changes. If everything was done correctly, congratulations because now you'll know what branch you're on all the time:

rapramos@rapdr_ramos:~/Documents/projects/my_awesome_project(master)$

Forem: Rei Allen Ramos

Revamp your profile's color scheme!

But why?

PWA vs a progressive web app: what's the difference?

How I learned a lot from deploying an app that does nothing

Quick backstory...

Anyway, the app

Action-first mindset

How to use HTML Canvas with Vue

🦄 What we're building 🦄

1. Create a canvas

2. Reading mouse coordinates from mousemove

3. Draw!

4. mousedown, mouseup

Free illustrations for your next project

1. Undraw

2. Black Illustrations

3. Streamline Labs

4. Open Peeps

ExpressJS: Static and Dynamic Routes

Project Setup

Express Setup

Create a GET endpoint

home route

users route

Adding path name to a GET endpoint

Dynamic routes

Lazy loading in Vue

Webpack's Code splitting

Example

How to use Material Design with Vue

Use vue-cli to create a new app

Install vue-material

Use Material Icons

Optional: Use Roboto

How to use Pug and SCSS with Vue

Why use pre-processors?

Install Pug

Install SCSS

Shorten bash shell prompt (and add colors!)

Display current git branch in bash shell prompt

Rei Allen Ramos ・ Apr 19 ・ 1 min read

Shorten bash shell prompt

How to apply GKE config map changes

Scale your deployment

Display current git branch in bash shell prompt

Display your git branch in your command line

2. Reading mouse coordinates from `mousemove`

4. `mousedown`, `mouseup`