DEV Community: Ogurinka Benjamin

[Boost]

Ogurinka Benjamin — Tue, 10 Jun 2025 08:15:25 +0000

Ben Halpern for The DEV Team

Jun 3 '25

Exciting Community News: We're Partnering with Google AI!

#meta #ai #google #webdev

415

Comments 137

4 min read

Nuxt 3 Is The Most Beautiful Thing Ever!

Ogurinka Benjamin — Tue, 30 Jul 2024 06:56:05 +0000

A little bit of background

I have been a Vue developer for a few years. Although I have worked with earlier versions (particularly Vue 2.x) and have experimented with Nuxt 2 a few times, I have been hesitant to use Nuxt 2 as my primary tool for Vue projects. There were just aspects of it I didn't like (my personal opinion), so I preferred sticking to native Vue unless I absolutely needed to use Nuxt.

But all of that changed with Vue 3 (which is amazingly awesome, by the way) and the stable release of Nuxt 3. I did a few practice projects with Nuxt 3 to really understand what had changed and see if I could have a reason to maybe change my mind. Well, Nuxt 3 is everything it claims to be, and I don't see myself building Vue apps any other way.

This short article highlights all the things I love about Nuxt 3 in no particular order and reinforces why I love working with Vue even more.

Disclaimer!

I may or may not mention features that have existed since Nuxt 2, so please forgive me, Nuxt Community, I was not familiar with your game.

What This Article Is

This article is all about geeking out over the things I love the most about Nuxt 3. It's a personal take on what makes Nuxt 3 amazing and why I’m excited about it.

What This Article Is Not

This article is not aimed at highlighting the overall best features of Nuxt 3, maybe I will cover that in a separate article.

Nuxi, you beautiful beauty!

Nuxt 3 introduces a powerful CLI that makes creating projects much easier. You can spin up projects from the ground up quicker or choose from a variety of available templates for a quick boilerplate depending on your use case. But wait, there's more! We don't just have the power to create new projects and boilerplates; we can easily add Nuxt Modules (which have gotten a facelift!) as well as create layouts, pages, components, plugins, and middleware, all from the CLI with relative ease and some initial boilerplate to get you up and running. This eliminates a lot of the manual work involved in setting up your project and saves a lot of time.

TypeScript, of course

We can all agree that TypeScript on its own is one of the best things to happen to web development in recent years. With its addition in Vue 3, it was only natural that it would find its way to Nuxt. But that's not all—I love the fact that TypeScript is the default in Nuxt 3. Switching from JavaScript to TypeScript within Nuxt is seamless, with zero configuration needed. Being able to leverage on all the great features of TypeScript within Nuxt just makes the experience so much better.

Vite! Vite!! Vite!!!

Nuxt 3 uses Vite by default, which, if you don't already know, just makes the experience so much better. Developed by Evan You, the creator of Vue, Vite is designed to address the limitations of traditional bundlers like Webpack, especially regarding development speed and build performance. So out of the box, we get all that comes with Vite within Nuxt with no additional configuration needed.

import { x } from... Nah, no need!

One notable addition to Vue 3 is the Composition API, which requires a lot of manual imports in native Vue 3 to fully utilize its features. However, Nuxt 3 simplifies this process significantly.

In Nuxt 3, you can use the Composition API's features—such as creating computed properties, reactive variables, refs, and composables—without needing to manually import them. Nuxt 3 includes next-gen auto imports, which automatically import commonly used APIs and components, reducing boilerplate code and making development smoother.

Let's talk about modules

It's common to need additional libraries and modules to build out certain features in your app. Nuxt 3 elevates the concept of modules to a whole new level, simplifying development and making it easier to find Nuxt-specific wrappers for various modules and packages.

From modules built by the Nuxt team, like Nuxt UI (Oh boy! Do I love this!) and Nuxt Image, to external modules that assist with things like authentication, SEO, database management, UI, animations and more, Nuxt 3 opens up a whole new world of possibilities.

I will go into details with some of my favourite modules in a different article cause we just need to talk about it a bit more.

Nuxt UI, I love you!

With Nuxt 3 comes Nuxt UI, which, in the simplest terms, is the best way to build interfaces within Vue and Nuxt. Nuxt UI is a Nuxt module that

"...provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces."

It essentially has almost everything you need to create any kind of modern interface, with amazing and highly customizable components that can cut your development time by up to 80%. I will write a separate article specifically highlighting just how incredible this is.

Nuxt Content is better!

Nuxt Content gets an upgrade! If you didn't already know, Nuxt Content is a file-based CMS built directly into Nuxt. It offers a simple and quick way to build dynamic pages using .yml, .json, .md, and .csv files.

This upgrade comes supercharged with amazing features like code highlighting, a robust query builder, and one very notable enhancement: the MDC syntax. The MDC syntax allows you to use Vue components within markdown files, which is simply awesome! Nuxt Content also received a massive rewrite, favoring the use of built-in components and composables to make building apps with Nuxt Content much more straightforward.

Nuxt Studio!

While Nuxt Content was already impressive with its recent updates, the Nuxt team has outdone themselves with Nuxt Studio!

"Nuxt Studio is a new editing experience for your Nuxt Content website, offering infinite customization and user-friendly editing. Edit your website with our Notion-like editor and unleash the collaboration between developers and copywriters."

It comes with some truly amazing features like custom components, live collaboration, continuous deployment, preview links, drafts, and more!

Conclusion

If you're a Vue developer (or any kind of frontend developer, really), Nuxt 3 makes life a breeze! It's like having a superpower that makes coding smoother and more enjoyable. With Nuxt 4 on the horizon, I can only imagine I'll be back soon for another epic geek-out session. Stay tuned for more excitement!

PS: You should totally check out Nuxtr if you consistently work with Nuxt. It's a VS Code extension that transforms how you work with Nuxt in VS Code. Although this isn't a paid shoutout, I highly recommend giving it a try!

Building A Custom File Upload Component For Vue

Ogurinka Benjamin — Fri, 07 Oct 2022 11:58:59 +0000

General Overview

When building applications for either the web or mobile, very often, the need to make a provision for file upload arises. There are many use cases for file uploads and these may include profile picture upload for an account, document upload for account verification, etc. I was spurred to build a custom file upload component after experiencing a snag while working on a project. I needed some custom features but I could not find them. Then I thought to myself, hey! I will build them.

In this article, I will be exploring the basics of creating a simple, yet useful file upload component for your next VueJS application. This article focuses on a single file upload, but a lot of the concepts can be extended and used for multiple file uploads as well.

Prerequisites

While this article is designed to be beginner friendly, there are a few skills the reader is expected to possess:

Basic HTML, CSS and JavaScript
Basic understanding of some ES6+ concepts
Basic VueJS. I will be using Vue 3 together with the options API. You can read more about the different APIs avaialble in Vue here

Project Setup

In this article, I will be using the Vue CLI to set up my project. If you already have the CLI installed, navigate to your preferred directory, open it up in your terminal and run the following command

vue create file-upload

You will be required to choose a few options after running this command. For this project I am using the default presets, but you can choose to add more items if you want to expand beyond the scope of this article.

If everything works fine, your vue project should be created and should look very similar to the image below

;

If you have not already started, proceed to start your development server to get your project up and running in your browser. This is can be achieved by navigating to your project root directory and running npm run serve. This will start up a development server on http://localhost:8080.

Great! Now let's build out our component features

Congrats, if you have made it this far. I am proud of you! We will continue to build out our upload component which is where most of our logic will take place.

Creating our component markup

To spin up our Upload component, proceed to create a new file inside the components folder called FileUpload.vue and paste in the following code:

<template>
  <div class="file-upload">
    <div class="file-upload__area">
      <input type="file" name="" id="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "FileUpload",
};
</script>

<style scoped>
.file-upload {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.file-upload .file-upload__area {
  width: 600px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #ccc;
  margin-top: 40px;
}
</style>

For now, what we have is just some basic markup with an input element and some basic styling to improve the visual appearance of our component. We will proceed to register this component and render it so we can see what we have so far.

//App.vue
<template>
  <div>
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload.vue";

export default {
  name: "App",
  components: {
    FileUpload,
  },
};
</script>

The above code will enable us see what our component looks like now and going forward. If you have followed the instructions correctly, you should see something similar to the image below when you visit your development url in your browser.

Writing our upload logic

Now that we have our markup set up, we will proceed to write some logic to handle our file upload.

First off, we will define a few props which will help us control how our component should behave. Props are a useful way to pass data from parent component to child components and vice-versa in Vue. You can read more about props here.

Go ahead and add the code below to your File Upload components

// FileUpload.vue
export default {
  ...
  props: {
    maxSize: {
      type: Number,
      default: 5,
      required: true,
    },
    accept: {
      type: String,
      default: "image/*",
    },
  },
  };

The maxSize prop helps our component to be more dynamic by specifying the maximum file size that can be accepted by our component.
The accept prop allows us to define the type of files that should be permitted for upload.

After our props are set up, we can go ahead to define some data to help us perform our upload operation. We will update our code to look like this by defining some initial state.

// FileUpload.vue
  ...
  data () {
    return {
      isLoading: false,
      uploadReady: true,
      file: {
        name: "",
        size: 0,
        type: "",
        fileExtention: "",
        url: "",
        isImage: false,
        isUploaded: false,
      },
    };
  },

Here, we define some initial state for our component which we will use to update our UI and perform certain logic for when files are selected. You can read more about Vue options data state here.

Now that we have our state defined, we can proceed to update our UI to better reflect what we have done so far.

First off, we would head over to App.vue to update our component declaration and specify values for our component props. Copy and replace the code in App.vue with

//App.vue

<template>
  <div>
    <FileUpload :maxSize="5" accept="png" />
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload.vue";

export default {
  name: "App",
  components: {
    FileUpload,
  },
};
</script>

Here we set our maxSize to 5 and tell our File Upload component to only accept .png files

Having achieved our data set up, we can go on to define some logic we want to perform. First on the list will be to actually handle what happens when the user chooses a file. To achieve this, we create a function that will handle the upload. In vue, we can do this by creating a handleFileChange function within our methods (more on this here) object in our FileUpload.vue component. Go ahead and add the block of code below

// FileUpload.vue

  methods: {
    handleFileChange(e) {
      // Check if file is selected
      if (e.target.files && e.target.files[0]) {
        // Get uploaded file
        const file = e.target.files[0],
          // Get file size
          fileSize = Math.round((file.size / 1024 / 1024) * 100) / 100,
          // Get file extention
          fileExtention = file.name.split(".").pop(),
          // Get file name
          fileName = file.name.split(".").shift(),
          // Check if file is an image
          isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
        // Print to console
        console.log(fileSize, fileExtention, fileNameOnly, isImage);
      }
    },
  },

The above code helps us handle our initial file upload logic and extracts certain information from the selected file. First, we need to perform our first validation to be sure a file was selected and then we get the uploaded file and extract the file size, file extension, file name and then check whether or not the selected file is an image.

To actually see this work, we need to call the function in some way.

We will call this function from input element using the @change event listener in Vue which is similar to onchange in regular JavaScript. We will update our input element to look like this

<input type="file" name="" id="" @change="handleFileChange($event)" />

Here, we listen to a change event on our input and then call our handleFileChange function. After this, we can go ahead to test what we have achieved by uploading a file from our file directory. If you have been following the discourse, you should see an output similar to the screenshot below

Let us move on to perform some validation based on the data we have in our props. Remember, in our prop, we set a max file size of 5 and told our component to only accept png files. When a file is selected, we want to handle these validations.

First of all, we create a new errors array in our data object.

// FileUpload.vue
  data() {
    return {
      errors: [],
      ...
    };
  },

And then we update our markup to be able to render any possible error that occurs.

// FileUpload.vue
<template>
  <div class="file-upload">
    <div class="file-upload__area">
      <div>
        <input type="file" name="" id="" @change="handleFileChange($event)" />
        <div v-if="errors.length > 0">
          <div
            class="file-upload__error"
            v-for="(error, index) in errors"
            :key="index"
          >
            <span>{{ error }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

In our markup, we loop through our errors array to check if any errors exist and print that out on our UI. For this operation, we take advantage of two built-in Vue directive called v-for and v-if. More details about these can be found here.

Next up we create three new functions:

isFileSizeValid which takes a parameter of fileSize and will handle validation for file size
isFileTypeValid which takes a parameter of fileExtension and will handle the validation for accepted file type(s)
isFileValid which will take the paramater of file which will be the object for the uploaded file

We will proceed to add these functions together with their logic in our methods object. Update your code to look like what is seen below

// FileUpload.vue
  methods: {
    ...
    isFileSizeValid(fileSize) {
      if (fileSize <= this.maxSize) {
        console.log("File size is valid");
      } else {
          this.errors.push(`File size should be less than ${this.maxSize} MB`);
      }
    },
    isFileTypeValid(fileExtention) {
      if (this.accept.split(",").includes(fileExtention)) {
        console.log("File type is valid");
      } else {
        this.errors.push(`File type should be ${this.accept}`);
      }
    },
    isFileValid(file) {
      this.isFileSizeValid(Math.round((file.size / 1024 / 1024) * 100) / 100);
      this.isFileTypeValid(file.name.split(".").pop());
      if (this.errors.length === 0) {
        return true;
      } else {
        return false;
      }
    },
  },

In our isFileSizeValid function we basically performed a simple operation to check if the size of the uploaded file is less than or equal to the value set in our prop. We also checked if the file type is an accepted file type defined in our accept prop as well as in our isFileTypeValid. Finally, we defined the isFileValid function which basically calls our earlier defined functions and passes arguments for fileSize and fileExtension. If any of the condition fails, we basically push an error message into our errors array which will be printed to the user

To use our new functions, we would need to make slight modifications to our handleFileChange function. Update your code to look like the code below.

// FileUpload.vue
methods: {
    handleFileChange(e) {
      this.errors = [];
      // Check if file is selected
      if (e.target.files && e.target.files[0]) {
             // Check if file is valid
        if (this.isFileValid(e.target.files[0])) {
          // Get uploaded file
          const file = e.target.files[0],
            // Get file size
            fileSize = Math.round((file.size / 1024 / 1024) * 100) / 100,
            // Get file extention
            fileExtention = file.name.split(".").pop(),
            // Get file name
            fileName = file.name.split(".").shift(),
            // Check if file is an image
            isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
          // Print to console
          console.log(fileSize, fileExtention, fileName, isImage);
        } else {
          console.log("Invalid file");
        }
      }
    },
    ...
}

Here, we have modified our code to check if all validations are passed and then allow the user to select the file. Go ahead and test this out to be sure everything looks right. If it does, you should see outputs similar to the screenshot below.

Great to see you have made it this far! I’m proud of you.

The final phase will be to preview our uploaded file and send this data to our parent component.

To do this, firstly, we need to make some modifications to our component markup. Update your markup to look like this:

// FileUpload.vue
<template>
  <div class="file-upload">
    <div class="file-upload__area">
      <div v-if="!file.isUploaded">
        <input type="file" name="" id="" @change="handleFileChange($event)" />
        <div v-if="errors.length > 0">
          <div
            class="file-upload__error"
            v-for="(error, index) in errors"
            :key="index"
          >
            <span>{{ error }}</span>
          </div>
        </div>
      </div>
      <div v-if="file.isUploaded" class="upload-preview">
        <img :src="file.url" v-if="file.isImage" class="file-image" alt="" />
        <div v-if="!file.isImage" class="file-extention">
          {{ file.fileExtention }}
        </div>
        <span>
          {{ file.name }}{{ file.isImage ? `.${file.fileExtention}` : "" }}
        </span>
      </div>
    </div>
  </div>
</template>

In the new block of code added, we checked if the file has been selected and we hid the input element and showed a new set of elements which will help us preview the selected file. We also checked if the selected file is an image so we could render the image and then finally we displayed the name of the selected file.

To see this action, we need to make some modifications to our handleFileChange function. Update your code to look like:

// FileUpload.vue
methods:{
  handleFileChange(e) {
      this.errors = [];
      // Check if file is selected
      if (e.target.files && e.target.files[0]) {
        // Check if file is valid
        if (this.isFileValid(e.target.files[0])) {
          // Get uploaded file
          const file = e.target.files[0],
            // Get file size
            fileSize = Math.round((file.size / 1024 / 1024) * 100) / 100,
            // Get file extention
            fileExtention = file.name.split(".").pop(),
            // Get file name
            fileName = file.name.split(".").shift(),
            // Check if file is an image
            isImage = ["jpg", "jpeg", "png", "gif"].includes(fileExtention);
          // Print to console
          console.log(fileSize, fileExtention, fileName, isImage);
          // Load the FileReader API
          let reader = new FileReader();
          reader.addEventListener(
            "load",
            () => {
              // Set file data
              this.file = {
                name: fileName,
                size: fileSize,
                type: file.type,
                fileExtention: fileExtention,
                isImage: isImage,
                url: reader.result,
                isUploaded: true,
              };
            },
            false
          );
        } else {
          console.log("Invalid file");
        }
      }
    },
}

Above, we introduced some new piece of code, but the most important of them all is the FileReader. This helps us read the contents of the uploaded file and use reader.readAsDataURL to generate a URL which we can use to preview our uploaded file. You can get a detailed breakdown on all the features of the File Reader here.

We then update our file object with appropriate data which we will use to update our user interface.

We can also add some basic CSS to improve the visuals of our preview. Update your style section with the code below,

// FileUpload.vue
...
<style>
.file-upload .file-upload__error {
  margin-top: 10px;
  color: #f00;
  font-size: 12px;
}
.file-upload .upload-preview {
  text-align: center;
}
.file-upload .upload-preview .file-image {
  width: 100%;
  height: 300px;
  object-fit: contain;
}
.file-upload .upload-preview .file-extention {
  height: 100px;
  width: 100px;
  border-radius: 8px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5em auto;
  font-size: 1.2em;
  padding: 1em;
  text-transform: uppercase;
  font-weight: 500;
}
.file-upload .upload-preview .file-name {
  font-size: 1.2em;
  font-weight: 500;
  color: #000;
  opacity: 0.5;
}

</style>

You can proceed test this out and if everything works fine, you should see a screen similar the one below.

We can also create a function to reset our data which gives the user a neat way to change their selected file without having to refresh the page.

To do this, we will need to create a new function called resetFileInput and update our code to look like this:

// FileUpload.vue
methods:{
     ...
     resetFileInput() {
      this.uploadReady = false;
      this.$nextTick(() => {
        this.uploadReady = true;
        this.file = {
          name: "",
          size: 0,
          type: "",
          data: "",
          fileExtention: "",
          url: "",
          isImage: false,
          isUploaded: false,
        };
      });
    },
}

Here, we have basically reset our state to its default. We can then update our markup with a button to call this function. Update your markup to look like:

// FileUpload.vue

<template>
  <div class="file-upload">
    <div class="file-upload__area">
      <div v-if="!file.isUploaded">
        <input type="file" name="" id="" @change="handleFileChange($event)" />
        <div v-if="errors.length > 0">
          <div
            class="file-upload__error"
            v-for="(error, index) in errors"
            :key="index"
          >
            <span>{{ error }}</span>
          </div>
        </div>
      </div>
      <div v-if="file.isUploaded" class="upload-preview">
        <img :src="file.url" v-if="file.isImage" class="file-image" alt="" />
        <div v-if="!file.isImage" class="file-extention">
          {{ file.fileExtention }}
        </div>
        <span class="file-name">
          {{ file.name }}{{ file.isImage ? `.${file.fileExtention}` : "" }}
        </span>
        <div class="">
          <button @click="resetFileInput">Change file</button>
        </div>
      </div>
    </div>
  </div>
</template>

Finally, we can then send the contents of our selected file to our parent component. To do this, we first create a new function called sendDataToParent and we add the code below to it.

// FileUpload.vue

methods:{
    ...
    sendDataToParent() {
      this.resetFileInput();
      this.$emit("file-uploaded", this.file);
    },

}

Above, we created a custom event listener (more info on this here ) called file-uploaded which we will listen for in our parent component and then send the selected file when the event is triggered. We also reset our state.

We will also need to call our new function to trigger this event. To do this, we will update our markup with a button which when clicked, will trigger this event. We can update our markup to look like this.

// FileUpload.vue

<template>
  <div class="file-upload">
    <div class="file-upload__area">
      <div v-if="!file.isUploaded">
        <input type="file" name="" id="" @change="handleFileChange($event)" />
        <div v-if="errors.length > 0">
          <div
            class="file-upload__error"
            v-for="(error, index) in errors"
            :key="index"
          >
            <span>{{ error }}</span>
          </div>
        </div>
      </div>
      <div v-if="file.isUploaded" class="upload-preview">
        <img :src="file.url" v-if="file.isImage" class="file-image" alt="" />
        <div v-if="!file.isImage" class="file-extention">
          {{ file.fileExtention }}
        </div>
        <span class="file-name">
          {{ file.name }}{{ file.isImage ? `.${file.fileExtention}` : "" }}
        </span>
        <div class="">
          <button @click="resetFileInput">Change file</button>
        </div>
        <div class="" style="margin-top: 10px">
          <button @click="sendDataToParent">Select File</button>
        </div>
      </div>
    </div>
  </div>
</template>

To see it in action, we will need to make some modifications to our parent component. To achieve this, we will navigate to our App.vue file and update our code to look like this:

<template>
  <div>
    <div>
      <p>Upload a file</p>
      <button @click="showFileSelect = !showFileSelect">Select a file</button>
    </div>
    <div v-show="showFileSelect">
      <FileUpload :maxSize="1" accept="png" @file-uploaded="getUploadedData" />
    </div>

    <div v-if="fileSelected">
      Successfully Selected file: {{ file.name }}.{{ file.fileExtention }}
    </div>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload.vue";

export default {
  name: "App",
  components: {
    FileUpload,
  },
  data() {
    return {
      file: {},
      fileSelected: false,
      showFileSelect: false,
    };
  },
  methods: {
    getUploadedData(file) {
      this.fileSelected = true;
      this.showFileSelect = false;
      this.file = file;
    },
  },
};
</script>
<style>
#app {
  text-align: center;
}
</style>

Above, we have added some data to control our state. Firstly, we defined a file object to hold our received file, we have fileSelected boolean to control our interface behaviour and then we have showFileSelect to basically toggle our File Upload component.

In our markup, we also added a new code. A button to toggle our File Upload component, a custom event listener which listens for a file-uploaded event and triggers a getUploadedData function. In our getUploadedData, we simply performed a user interface logic and then set the data received from our component to our parent’s file object.

It is important to note that from here, you could also proceed to upload this file to a backend server after you have received the data from the component or perform any other type of action you intend to with this file.

If everything is done right, you should have a similar experience to this:

Conclusion

Congrats! You have made it to the end and I hope you were able to learn some new tricks and tips from this. Take it up as a challenge and extend the features covered here and perhaps do something even more awesome with it.

Resources

You can find the complete code for this on GitHub.

You can also play around with a live demo here.

10 Reasons you should give surge.sh a try for your next frontend project

Ogurinka Benjamin — Tue, 01 Dec 2020 12:59:39 +0000

In a world where the relevance of building static sites has greatly risen, having a flexible, easy, and fast way to deploy can sometimes be a life-saver.

Sometime in November (2020), I was surfing through the web and I came across a site with the domain surge.sh. Initially wasn't quite sure what it meant and so I decided to find out (out of curiosity) and my first impression was "Amazing!!!". I have used Netlify and Netlify CLI for more than a year now and going through the docs for Surge I found some things that felt different and made me try it for a few projects.

First off, what is surge?

" Surge is a static web publishing platform
for Front-End Developers"_

In more simple terms, it gives you the ability to publish your HTML, CSS, and Javascript project to the web for free.

Why should you give it a try?

" Surge makes it easy for developers to deploy projects to a production-quality CDN through Grunt, Gulp, npm."

1. It is 100% free, for the most parts!

In the past, having to share your projects (no matter how little) would require you to get a domain name & pay for a hosting service and this can sometimes be a chore, especially if you do not have the funds to play around with. With surge, you get to deploy that cool stuff you have built without having to pay for anything or worry about adding your credit (or debit) card information.

2. Easy Setup and Deployment

Getting to deploy your projects on some platforms can easily become complicated and navigating around can very easily become a chore. Surge provides you with a setup and deployment flow that is as easy as ABC

Installation

Getting up and running with Surge is quite simple. The only prerequisite is having an environment with Nodejs installed. If you have that already, you can simply open a terminal on your Windows, Mac, or Linux OS and run ```npm

install --global surge


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/02orv9v9fdna8bdgl3rw.png)

Remember to use ```sudo

 npm install --global surge

``` if you are a Linux or Mac user

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qtpdzbp1ncbseo3rwrtj.png)

That's pretty much it! Installation takes less than a minute and you are good to go.

Once installed, run the surge command and you will be prompted to log in or register (for new users), complete the registration/login process and you are ready to use Surge! 

#### Deploying a project on Surge
If you have completed a project and you are ready to share with the rest of the world, deploying is easy as well. All you have to do is open your terminal, navigate to your project directory and run the surge command. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ane28iluuddyl9pzugrr.png)

Hit enter to proceed with the setup wizard and you will be up and running within seconds!


### 3. Add custom domains
Surge provides you with the flexibility to add a custom domain name to your project (assuming you have one).
All you have to do is log in to your domain registrar and create a CNAME record for your domain (or subdomain) and set the values of your hostnames __@__ and __www__ to __na-west1.surge.sh__.

If your domain registrar for some reason prevents you from creating a CNAME record, you can create an __A__ record and set the IP to __45.55.110.124__ instead.

Once completed, open your terminal and run the surge command using the format below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dhj0ed5hllprmkq0t0r5.png)

Now your project will be deployed to your custom domain


### 4. Free SSL
In a world where security is important, it is usually recommended to have your websites deployed using SSL. The catch is that SSL certificates don't always come cheap and most times you will be required to pay for it, but with Surge you do not need to worry about that. Every deployed Surge project comes with free basic SSL by default at no extra cost! Cool, right?


### 5. Ignore files, deploy only what's necessary!
With Surge, you can leave out files that you do not wish to deploy and only send what you need online. 
This is achieved by simply creating a __.surgeignore__ file in the root of your project and specifying files you wish to ignore.
For example, if you wish to ignore the deployment of a __node_modules__ and a __.git__ file, in your __.surgeignore__ file you will have something like
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rjh9wm1yjp4subz3pf3a.png)
It is important to note that Surge automatically ignores files like __node_modules__ and __.git__. The above is for illustration purposes alone.


### 6. Force HTTP to HTTPS
Sometimes users will visit the HTTP version of your site and if your site has SSL enabled, it useful to ensure they always only browse through using a secure connection. Surge gives you the ability to easily achieve this. Simply open your terminal and follow the command format below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yq42psm91zuhzvur5nxm.png)


### 7. Clean URLS
These days, no one really likes to load up a website and navigate to a new page only to see something like __website.com/about.html__. Thankfully, Surge allows you to clean up your URLs and make them look sleek and beautiful. This is a  feature that comes by default on Surge and so by deploying your site on __website.com/pages/about.html__, it is also made available at __website.com/pages/about__

### 8. Automatic Gzipping
Building performant websites in this modern day cannot be stressed enough and one major performance recommendation is for static assets (.html, .css, .js, .json, etc) to be Gzipped. Surge takes care of this for you! Once your project is deployed, your static assets are automatically Gzipped for production


### 9. Custom Redirects
You can decide to redirect a user when they hit a certain route (perhaps one you are still working on) or perhaps perform other forms of redirects. Surge allows you to do this with ease. 

Simply create a __ROUTER__ file in the root directory of your project and add your redirects according to the format below

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dkbn5fm7lnlmjccczsnb.png)

You can also redirect to external sites as well when a specific route is hit on your site

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2is3uuf0kj96yc6oend1.png)


### 10. Collaboration
There are times you get to work on projects with your friends or as part of a team and at that point, collaboration becomes extremely vital. Surge allows you to add collaborators to your project and give them the ability to deploy to your domain as well.
To add a collaborator, first deploy a project and then follow the command format below 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mm1xosbl9qnxq4im5w0t.png)


## Conclusion
Surge is really flexible and offers some really quick, easy, and fast way to deploy a project online and it's definitely worth trying when you just need to quickly get a site online.

Design tools every frontend developer should consider learning to aid productivity

Ogurinka Benjamin — Sat, 25 Jul 2020 10:40:50 +0000

A few years back you might easily get a pass as a frontend developer just by knowing how to properly write mockups, build beautiful layouts and add interactive features to a website using just HTML, CSS and JavaScript. But the times have changed and being a frontend requires so much more these days.

Your first thought may be, why would one need to learn design when all I do is code? The answer is simple. Being able to have a basic understanding of image manipulation, create graphical components, retouch images, design user interfaces or just set up certain information using graphics, illustrations and/or images for your website is a huge bonus. It speeds up your productivity and better gives you value whether you work professionally at a company or startup or you actively freelance.

Below is a list of tools you could learn grouped according to system requirements

On Windows/macOS

Adobe Photoshop

Adobe Photoshop is a software application for image editing and photo retouching for use on Windows or macOS computers. Photoshop offers users the ability to create, enhance, or otherwise edit images, artwork, and illustrations.

Adobe Illustrator

Adobe Illustrator is a software application for creating drawings, illustrations, and artwork using a Windows or macOS computer.

Adobe inDesign

Adobe developed InDesign for the desktop publishing market, and it's primarily used to layout newspapers, magazines, books, posters and flyers. Pretty much anything with large amounts of text should go straight into InDesign. Time to put it all together.

Adobe XD

Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed and published by Adobe Inc. It is available for macOS and Windows, although there are versions for iOS and Android to help preview the result of work directly on mobile devices.

Sketch

Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch B.V. It is primarily used for user interface and user experience design of websites and mobile apps and does not include print design features.

CorelDraw

CorelDraw is a software program for editing vector graphics. Vector graphics are created in graphics packages and consist of objects. Each object can be edited separately, meaning that the shape, colour, size and position can be changed.

Compatible On Linux

GIMP

GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.

Inkscape

Inkscape is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics format. Other formats can be imported and exported.
Inkscape can render primitive vector shapes and text.

Runs in the browser

Figma

Figma is a vector graphics editor and prototyping tool. It is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma Mirror companion apps for Android and iOS allow viewing Figma prototypes on mobile devices. The feature set of Figma focuses on use in user interface and user experience design, with an emphasis on real-time collaboration.

Canva

Canva is a graphic-design tool website. It uses a drag and drop format. Canva is used to make web wireframe(blueprints), design presentations, infographics, photoshops and many more. There are different drag and drop widgets which makes easy it easy to use. There are also different templates available which we can use.

Pixlr

Pixlr is a cloud-based set of image tools and utilities, including a number of photo editors, a screen grabber browser extension, and a photo-sharing service. The suite was intended for non-professionals, however, the apps range from simple to advanced photo editing.

Polarr editor

Polarr is the easiest tool to create your own aesthetics and share with others. • Easily customize your own style with selective colours, overlays.

Fotor

Fotor is a photo editing platform, utilizing exclusive technology to bring an unprecedented level of editing control to everyone.
Fotor's software is available on every major mobile device, desktop computer and online.

BeFunky

BeFunky develops innovative digital media tools that allow users to express themselves creatively, without the need for any advanced technical knowledge. We strive to provide the best possible image editing capabilities with the easiest possible application, truly allowing anyone to be, well...funky!

Honourable mentions

LunaPic

LunaPic is an online platform that enables users to upload, edit, and share their pictures. After uploading the picture to the platform, users can add borders, filters, animations, and more to their pictures.

PicMonkey

PicMonkey empowers creatives of all experience levels to make high-impact images to promote their personal or business brand. Its photo editing and design tools are a powerful yet easy-to-use alternative to complicated creativity software and are optimized for the best experience on the desktop and mobile.

Ribbet

Ribbet is a free online photo editor and collage maker with beautiful filters, seasonal effects, touch-ups, stickers and fonts. We also offer Premium membership for those users wishing to take advantage of our Premium editing tools.

Conclusion

It is not ideal to spend time learning all of the tools listed above, but knowing how a few works definitely goes a long way to speed up your personal productivity and increase your work value ❤

Becoming a developer: the stuff you won't hear everyday

Ogurinka Benjamin — Sun, 28 Jun 2020 01:58:40 +0000

The past few years have seen a steady increase in the world of tech, particularly in the development industry where companies, organizations, individuals, and startups need to ship products faster and iterate quickly. Being a developer in such a time can sometimes feel a bit overwhelming and it is easy to get lost and confused about what you need to do, how you need to do it, and the best way to do it. There are a lot of hard parts and a lot of misconceptions. Here’s a simplified view of the journey.

Why do you want to become a developer?

Meet Melvin, our case study

Melvin is a software developer in Rivers, Nigeria. He specializes in building frontend web applications and shaping a world where solutions to both complex and simple problems are readily available and are optimized to meet the demands and desires of the target audience while being inclusive enough to a diverse range of users.

Starting out as a developer, it was never always clear as to what the first step would be for him and it was never about just for the sake of it, but there was always a clear definitive insight as to why he wanted to be a developer:

“Building Stuff. I've always been fascinated and interested in tech-related stuff since I can remember. I Love video games and I love computers and programming. I decided to learn how to build games from scratch. I believe this was the major thing that pushed me into coding.” - Melvin.

A lot of the time you hear people get a bit confused as to how to get started, but very few people spend the time reviewing why they wanted to get started in the first place. This is an important step and a lot of people fail.

Being able to sustain growth in something requires a huge understanding of why you are doing it in the first place. No one goes to buy a car without first identifying why they need a car, no one builds a house without a purpose and in the same way, no one takes on the journey of a developer without first knowing why they want to do so.

This is a crucial step as it helps shape your decisions and lets you decide what actions are relevant to you. It helps you be more predictive in the steps you should follow and what you should avoid.

It is usually about interest and identifying what interests you and this step defines a lot in terms of how you get started and how much you could learn to do.

Getting stuck, moving on

The fact that you have identified interest is one thing, but it does not always guarantee that you would get it right or would have a smooth ride.

For Melvin, building games was the initial motivation to get started, but it was never a straight forward journey.

“I started out with unity for game development, but motivation dropped, I actually stopped coding for 2 Months. Before I decided to go into Web Development, I'm looking into ways to build games that work on the browser so I guess that spark is still there.” - Melvin

Trying out one thing that you may have failed to get better at is not a reason to throw in the towel and let it go. Sometimes it is usually an indication that you are looking at it or approaching it from a perspective that does not best suit who you are designed as.

“It got a little bit complex... I think the world of unity was a little too big for me at that moment.
Also, it took a lot longer to build something tangible that you can actually see. It was one of my biggest motivations to push on and do more. I guess I wasn't getting that.” - Melvin

Getting stuck is natural and it should not be a reason to stop.This would become difficult even more if you lack a genuine basic foundation of why you are doing it in the first place. Getting stuck is one way to motivate you to move on and identify other ways that best work for you and that better fit into your design as a person

Learning, practicing, discipline

The journey of every developer is usually one riddled with constant learning, practicing, and a whole lot of discipline. Growing as a developer takes more than just knowing how a technology works. It requires time to practice that technology and genuine discipline to stay consistent enough to get better at it.

Think of it as learning to drive, you do not grow as a driver or get better at driving simply by knowing where the ignition is or being able to distinguish between the throttle and brakes. It takes practice and takes discipline to get good at it. The same goes for growing as a developer. You get better at it by simply doing it. Investing your time and being committed to putting in the effort to improve in the areas that you need to and being better at every step.

Imposter Syndrome and fighting it

Impostor syndrome is a distortion of thinking that tends to make people believe they’re actually incompetent, unintelligent, and lazy. They’re convinced they’re faking their way through their accomplishments, and one day, they’ll be found out.

This a natural feeling you would almost definitely encounter when you start getting to a point in your journey where you feel more responsible for tasks and challenges.

Learn to fight this! According to Melvin, “learn to add yet”. Whenever you feel inadequate or like less, add yet in the end. Doing so puts the emphasis back on your development and growth and allows you to focus on the future and reminds you of where you are headed and the necessary things you still need to do to get there.

Another way is to measure your growth and keep track of how far you have come. Looking back to where you were on Day 1 and where you are on Day 60 is quite important as it helps remind you of just how much you have covered.

“I can't measure, but I certainly know way more than I thought I would.
I know things that now that I didn't know existed.
2 years ago, I thought web development was HTML, CSS, and JavaScript.

Looking at it now, there's more to web development and programming for the web.” - Melvin

Ask questions, be bold

Part of growing means being able to know when you need to ask questions and when you to reach out to people. Never be afraid to ask questions when you are just starting out. It is okay to look stupid and clueless sometimes, but always think of it as something essential. Think of it as something you need to do to better understand concepts better.

As much as you have the internet to help you out, there are simply just people who are better and more experienced, and learning to reach out and ask questions is vital for your growth as a developer.

Join a community, reach out!

“Starting out and being able to grow I had a few motivations. I think one of them was having mentors and people on the same journey with me.” - Melvin

Getting involved in the tech community allows you to develop, grow, and practice your skills in a safe space with similar people like you. It also the easiest way to find experienced individuals who have all the necessary abilities and resources to help you find a footing.

Don’t rush! Take your time

As much as you would love to get ahead an build a lot of stuff, it is important to take things easy and allow yourself time to fully get all the necessary foundational knowledge,

“I made a lot of mistakes and missed important steps in the journey… I skipped ahead of a lot of things and I rushed through the whole system. I learned that the short way is the long way in programming. Due to rushing, I have missed out on some opportunities owing to a lack of knowledge I should already possess.
I will advise anyone thinking of rushing through everything to relax, take it all in ... Learn it and learn it well .” - Melvin

Final Thoughts

It's not a race, there's no competition ( except for hackathons). Take your time, learn at your own pace. It'll do you a lot more good than rushing through just to catch up with recent technologies. You've heard this a million times but from someone who made a similar mistake, ensure you ground yourself in the fundamentals of any technology you want to learn. If possible dive deeper and learn how it works behind the scene.

DO NOT GIVE UP, YOU'RE DOING AMAZING. LEARN, PRACTICE AND RESEARCH.
Emphasis on research, being a developer is more Problem Solving and Research than writing actual codes.

How to become a Microsoft Student Ambassador

Ogurinka Benjamin — Thu, 25 Jun 2020 17:29:36 +0000

Microsoft offers students a chance to be ambassadors for them on their local campuses and help grow their tech and leadership skills.

What is the Microsoft Student Ambassadors (formerly called Microsoft Student Partners ) program?

The Microsoft Learn Student Ambassadors program is a global group of on-campus ambassadors who are eager to help students and their communities, lead in their local tech circles, and develop technical and career skills for the future.

Now that you know what that is, what does it really mean to be an MSA?

It means you’ll be supported while you build your local community, make a difference, lead others, learn and share. You’ll get access to Microsoft resources and experts to help you on your journey, including exclusive entry into our global student network. You’ll connect with Microsoft experts on Microsoft Teams, get a Microsoft Office 365 subscription and Azure credits, plus other cool things.

The Student Ambassadors program prepares students for future careers through opportunities to build vibrant communities and share the latest in tech with their peers. Through exclusive access to Microsoft resources, such as Microsoft Learn, Visual Studio Code, and Azure credits, Student Ambassadors are equipped to build their technology skillset through hands-on learning. In addition, you have the opportunity to develop your leadership and entrepreneurship skills through hosting events on your campus, networking with other students and Microsoft professionals, and building interdisciplinary skills, such as public speaking, and social media and personal branding.

What other benefits are there?

You get to help others

Make a difference, expand your impact, and share your passions through original content, peer mentoring, and facilitating opportunities such as Microsoft Imagine Cup teams and student hackathon events.

Be a Microsoft Tech Insider

Get unique access to Microsoft resources and personnel that help you lead in your community and provide opportunities to be part of a team while you prepare for graduation.

Grow your skills

Master career and tech skills and build your leadership reputation with access to tools, learning resources, and special offers like Azure credits and opportunities to learn directly from Microsoft experts.

Be cool

Well, not everyone can get to say they volunteer for Microsoft, right? You get to stand out and be a voice, an inspiration and a beacon of light to others.

Good to see you’re following, now one question is “Who can apply?”

To apply, you must be at least 16 years old, have valid identification and be actively enrolled in an accredited, higher education academic institution.
Now, you do not need to be a tech genius or a computer science student to apply. Microsoft encourages students from all academic backgrounds who want to grow their career and tech skills while making a difference in their communities to apply. Some experience in coding or technology is helpful, but there are tools and resources to help you learn in the program.

Finally, how to apply?

Step1

Head over to https://studentambassadors.microsoft.com, click on “Apply Now”

Step 2

You would be required to create a Microsoft account if you do not have one and then proceed to the form to fill in the required fields.

Step 3

You may be required to do a short video, no need to be afraid. Just be yourself, be confident, and put on a smile!

Step 4

Complete any other additional steps and submit! Once the application is filled and submitted, you can edit it until the time it goes under review.

That’s it! Wait for feedback and do not forget to share the good news when you do get accepted!

At the time of writing, applications are open so jump right in!

Conclusion

I do hope you take a step to apply today and if you need to reach out for more questions, feel free to reach out via:

Email: hi@tammy.dev
Twitter: @_simplytammy
Instagram: @_simplytammy
Dev: @simplytammy

🎉 🥳

You're not failing, give yourself time

Ogurinka Benjamin — Thu, 23 Jan 2020 10:41:42 +0000

First of, a very Happy New Year to everyone in the DEV community.

This post was inspired by personal experiences and a learning journey that has shaped me into who I am so far and a talk by Ibukun.

In 2018, I decided to learn to code properly and it was perhaps one of my best decisions that year. It was not easy of course. Starting out thinking about all I needed to learn and how much I needed to cover to get to the required level of expertise to get a stable job and all of that. Initially, I was getting the feeling of "not good enough", "not making enough progress", but then in 2019 I got a revelation that perhaps shaped my mentality and helped me become a better individual.

Think of the butterfly. Biology has taught us that it doesn't start its life as a butterfly with wings and everything, it goes through through a journey, through phases. A process called "metamorphosis".
The metamorphorsis of a butterfly is perhaps one of the most amazing thing nature brings to us. Let's take a step further

Stage One (Egg)

"A butterfly starts life as a very small, round, oval or cylindrical egg."

This is you at the start of your journey, delicate, fragile and tense. At this stage you're not quite sure about what you really know, you're driven by what people have said and what you've read. Here you're inspired by your desire to make something or build something cool. At this stage you're unsure of how much you'll need and how you'll need it.
This stage is critical cause it lays the foundation for whoever you'll grow up to be and how much time you invest in actually getting the hang of things is really crucial. This is where you ask the questions like "I do not know where to start" and where you need the most direction

Stage Two (Larva)

"When the egg finally hatches, most of you would expect for a butterfly to emerge, right? Well, not exactly. "

Yes, not exactly. It's not that simple... Knowing what you want to do doesn't automatically give you wings and strengths. There's still a process. This is the stage where you have chosen to what you want to do and you're beginning to take baby steps and you're starting to explore and get the hang of things a bit more. This where you get to transition from that person who knew nothing at all to that person who knows a thing or two. Here you've taken a few courses and attended a few bootcamps (maybe) and you understand some of the things that previously seemed alien to you and you can talk to people about them. Your success at this stage is going to be largely based on your inspiration and philosophy that brought you this far. This is the part where you practice and build your confidence

Stage Three (Pupa)

"The pupa stage is one of the coolest stages of a butterfly’s life. As soon as a caterpillar is done growing and they have reached their full length/weight, they form themselves into a pupa, also known as a chrysalis".

This is an interesting part of everyone's growth, interesting cause it can be viewed in two different perspective.
First, from the perspective that you've been wasting your time and you're not ever going to be good enough and that what you know isn't perhaps enough to make you stand out in a competitive world. This is a part where people get stuck failing to realise that they have done so much and have learnt so much that their minds don't just want to keep learning and that it wants them to take a bold step and evaluate their options and take a deep dive into a world of endless possibilities.

Second, from the perspective of the person who understands what they want and know that it's time to make that big job application, apply for that internship, put yourself out there and let the world get a chance to see just how amazing you can be.

This is a very crucial stage cause the decisions you make here will prove fabulous or fatal. This is a point where you could easily fail or go on to conquer the world

Final Stage (Adult Butterfly)

"Finally, when the caterpillar has done all of its forming and changing inside the pupa, if you are lucky, you will get to see an adult butterfly emerge."

Well it's simple and straightforward. You have done all your self evaluation and you've made all the hard decisions that have shaped you into an adult, an adult strong enough to make big calls about their life, strong enough to understand their worth (cause well, it's taken a lot to get you here) and you've been shaped into an individual who's now doing amazing things.

It's easy to look at the big guys we admire and wish to be like them and we be like "God when?", but the truth is every one them have had to battle their way up in some way and they've had to endure difficult moments. They've had to make sacrifices and they've all had to come up against times when it felt like they would never get there.
If you ever hope to get to that stage where your confidence is firm you have to draw inspiration from the life cycle of the butterfly. You have to understand that where ever you find yourself at the moment is only a phase and you're bound to grow and move past it only if you make conscious efforts to.
It's easy at any of the first three stages to think you're failing, but I tell you this you're not failing.... You're evolving into a creative who would go on to do great things.
Remember the butterfly doesn't start out with wings... It starts out looking helpless and vulnerable, it goes on to a stage where its slowly starting to understand how the world works, moves to stage where it seems like it's probably done for and then emerges a strong beautiful butterfly that everyone admires.

So think again, you're not failing...

What programming language to choose? It's really up to you

Ogurinka Benjamin — Tue, 24 Dec 2019 14:38:10 +0000

It's a common confusion to choose what languages to learn and the right path to take and to be honest reading guides and articles online can be overwhelming when deciding. Sometimes thinking about how complex some of the concepts can be scares you so much and you just want to and be like "Maybe this programming thing isn't for me🤷🏾‍♂️". Well, here's my take on the subject.

Prerequisites

There are few things to consider before you even start learning to code.

The Why

So the first question (and probably the most important) you want to ask yourself is why am I choosing to go into programming? What excites me about it? What puts a smile on my face when I think of it? This is usually very important because it helps to a great extent to ease how you get started and where to begin.
So are you going into programming cause you want to build awesome games? Want to build stuff that do what you tell them to? Want to build amazing mobile applications? You want to make stuff work in your browser? Etc. Have you identified a problem and you want to solve it? Or you just want to do it for fun and see how it goes? Or you want to make some money? These are the hard questions you need to ask yourself. They help define what you should know, what you should learn and how you should learn it.

What's the plan going forward?

Many people choose to get into programming for the initial excitement and buzz, but lack a clear vision of where they are headed. This is crucial cause when you lack a definitive concept of what you want to do with what you've learned, even the easiest of things become overwhelming tasks. You tend to easily get frustrated when stuff are not working and you each day of frustration inches you closer to quitting.
You really want to avoid spending a whole year of your time learning how to solve problems using a programming language when you're not quite sure what you hope to do with it going forward. Are you learning it so you can get a job and make money? Are you learning it cause you want to build the next billion dollar idea? These are crucial parts to consider before ever taking a single course.

Does it excite me?

Being excited about what you do is an easy way to get really good at it and not being particularly pumped about it is an easy way to fail. So you just got to love it. The thing about love is, even when it gets tough you just want to get it to work cause in the end it really excites you. And if doesn't, well it's probably a sign that you should thread carefully and be sure it's something you want to do.

Getting Started

Now that you've asked yourself all the basic questions and you're at least 87% sure you want to learn how to code, it's time to get started. But not yet...

Before you actually start learning a language, there are few things to still consider

Relevance

The world of programming is ever changing (as a matter of fact the World is ever changing). As a result, you want to be sure that you're making the right choice and not choosing something that is totally irrelevant to the modern world. For example, you don't want to find yourself learning a language that no one cares about anymore (not calling any names). You want to be sure it's relevant to the world you exist in and to relevant to your plan going forward. For example, if you want to land a big paying job, what languages are relevant to help you land this kind of job?

Helps you with your Goal

You want to pick a language that helps you achieve your intended goal. You've identified what you want to do and now is time to identify what languages and concepts help you achieve it. For example, you don't want to start learning a language better suited for Game Development when your goal is to build apps for the web. So this is the part where you spend time researching and understanding the field you're going into and the languages that are better suited for it.

Understand them, know what they can do.

This is tricky as you can easily mistake this for me telling you to learn them all. But no. Take time and research about the relevant languages that would help you with you goal and take it a step further by knowing what they can do. Read articles that explain their capabilities and find gallery of softwares designed with them (use these softwares if possible). This might seem unnecessary, but it gives you a better understanding of just how powerful the languages are and better insight into whether or not they can do what you have in mind and achieve the things that excites you. This is also the part where you learn about the general concepts of how they work and how they do what they do and just how difficult it would be to learn it. Enough said.

Let's choose one, shall we?

Now we know why we want to code, we have an idea of what the plan is going forward, we know which Languages are relevant, we know which of the relevant ones help us with our goal and we understand just how they work. Let's jump right in or not...

Even after understanding all of the above, picking a language can still be overwhelming, but then our decision is easier. Cause now we've cleaned up a whole lot of things and we understand things better. Now it's just a case of starting.
There's no "God programming language" which is to say one has it's edge over the other. We know what we want to do and we just have to choose one that best does it for us.
The thing most people starting out in programming fail to understand is that a lot of the concepts are the same regardless of the language. So learning one eases the process of learning another.
This is the part where it's now totally up to you, you just start learning cause you know what you hope to achieve. This way You're able to choose what you're somewhat sure of and you know just exactly what you're going into. Some people would say some languages are better suited for beginners than others, but the truth is there's really no sense in spending 1 year learning a "beginner" language that has nothing to do with your goals and pursuits. They say no knowledge is wasted, but in my opinion this is a case of time wasting.
A better approach will be to learn about the core concepts of programming like earlier stated. Understanding the general idea around variables, conditionals, loops, data types, functions, etc. If you already have a general understanding of these concepts, using them in any programming language, beginner friendly or not, is easier and you're able to understand what they do better and faster than someone who's just hearing them for the first time when they're taking coding lessons.

My personal opinion.

13 reasons why you should be using Netlify

Ogurinka Benjamin — Mon, 11 Nov 2019 01:15:14 +0000

Few months ago, I wanted a quick, fast and easy way to showcase a small project I worked on using Javascript and shared hosting seemed like too much stress for me (I mean, I am still trying to understand a lot). Few random Google search later, I found Netlify and I have never looked back ever since. Currently I have a few portfolio projects hosted on netlify and even my personal website is hosted on Netlify. Great stuff!

So what exactly is Netlify?

A platform that offers cloud hosting and
serverless backend services for static websites.
Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.

I could try to go further and explain this, but it would take a whole new article to achieve that.

But like the definition says, Netlify offers you cloud hosting services as well as present you with the ability to handle backend operations with its serverless backend service.
You can understand the concept of serverless backend by clicking this link.

So what are my 13 reasons why you should be using it?

1. Well, It is free

I think personally for me, the easiest catch is the fact that I do not get to worry a whole lot about pricing when I need to use Netlify. It offers massive features (which I find mind-blowing) on its free plan and as a matter of fact, all the features Iisted as reasons why you should use Netlify are all available on the free plan.

2. Easy to use

The Netlify User Interface is perhaps one the of the easiest to understand and be able to find your way around without needing to Google a lot of “How to “ or spending time reading the docs. The first time I used Netlify, from registration to deployment was an exciting experience and I never really got confused about anything.

3. Deploy in seconds

Deploying projects on Netlify are not just easy, but pretty fast too. You have the option to deploy from a Git repository or just by simply dragging your project folder and dropping it. Netlify takes care of everything else from there on. It identifies build commands (if any) and with just a click your project will be live in a few seconds

4. Continuous Deployment (CD)

Anytime you deploy your project from a Git repo, Netlify automatically activates CD for you. With that, whenever you make a new commit and push to your repo, Netlify builds it for you and automatically updates your project to the most recent version. All this is achieved without having to create a configuration file and writing a long list of rules.

5. Branch Deploys

Ever wanted to know what a branch of a project looks like? Netlify has got you covered! You could easily choose any branch of your Git project and deploy just that branch. This comes in handy when testing new features that may or may not make it to the master branch or just a quick way to easily see how a PR would affect your site.

6. Free Private Repo Hosting

If you have a private repo, you could easily still get it online and keep your codebase private without having to pay for anything. Enough said

7. Deploy Previews

Netlify gives you the ability to preview every deploy you make or want to make, This will allow you and your team to see what changes will look like in production, without having to deploy them in your existing site.

8. Asset Optimization

Netlify gives you the ability to automatically optimize assets for your project. Available options like CSS and JS minification, image compression, and pretty URLs allow you to improve the performance of your sites with just a few clicks.

9. Free SSL

Netlify adds security to your site with its Free SSL option with Let’s Encrypt. With one click install, HTTPS will instantly be available for your sites.

10. Rewrites and Redirects

This gives you the ability to easily perform redirects and control certain actions on your website. I found this particularly useful when I wished for a way to be able to easily direct users to a custom error page and have clean URLs. Creating a simple _redirects file and with a few lines of text, I was able to give my site better urls and just by adding my own 404 file, I can control what users see when they access a broken or invalid path on my site. Great stuff!

11. Custom Subdomains

By default, Netlify gives you a free custom subdomain whenever you create a new project (something like_mywebsite.netlify.com_), but they also give you the ability to use a custom domain name which you own and by simply updating your DNS records, your Netlify site will have it’s own domain.

12. Free DNS

Although still in BETA, Netlify gives you the option of DNS Management absolutely free (that’s all I know about this).

13. It gets thumbs up from the likes of Google, Facebook, Verizon, etc.

One of the many features that Netlify offers which I find very useful, but I didn’t feel should make my list is Netlify Forms. With this, I can easily setup my form on my static site and get submissions without having to write any backend code or subscribe to any third-party service. It even gives me the ability to enable reCAPTCHA and even allows me specify my own success page. With 100 submissions per month on the free plan, I find this very useful.

But hey, don’t just take my word for it, head over to Netlify right after you leave a 💗.

You should probably know enough JavaScript, first.

Ogurinka Benjamin — Tue, 10 Sep 2019 14:40:33 +0000

So, I remember a few months ago when I was trying to decide if it was time to learn a JavaScript framework or not and a question kept bugging my head, "How much JavaScript should I know before learning a framework". Well, fast forward to now and I think I may have a better understanding and can answer this question for myself (and perhaps for a few others too).

Let me just start by saying "You should know enough JavaScript first".

There are lots of concepts behind modern JavaScript frameworks that I personally (and I feel a lot of professionals would agree) feel that every one who wants to learn a framework should understand very well. I will take out time to outline a few.

The Basics (of course)

You definitely want to know and understand a lot of the basics and core principles of the language. You should be able to declare variables, understand data types, understand arrays, objects, declare functions, manipulate conditions and create loops. A very good understanding of these is something you definitely want to have before you learn a framework.

But, there's more.

Yes! There's more and below are my best picks for concepts I feel you should understand better before delving into a framework.

Manipulating the DOM

Most frameworks are designed to help you manipulate and make changes to the DOM quicker and faster, but it is absolutely important to know how this works in plain JavaScript and how to do a whole lot in terms of making changes to the DOM without the help of a framework or library.

Array Methods

This is an absolutely and extremely important subject that you should understand. Working with JavaScript would definitely mean you will have to play around and work a lot with data, most of which would be present in the form of an array. You need to be able to add items, to the array, update it, get data from it, remove data from it and do all kinds of stuff on it. It's almost unavoidable and it's something I 100% feel should be learnt.

More understanding of Objects.

Most modern frameworks would make you work a lot with Objects and it's perhaps something you do not want to ignore and something you really want to wrap your head around.

Prototypes and ES6 Classes

You will find that most modern frameworks make the most of these. And if you lack an understanding of how it works, you may just on the surface know how to use it, but would lack a very fundamental "know-how" of how this works under the hood. And I feel it's more beneficial to know how it works than just how to use it.

ES6 Modules.

I'm writing this with a smile on my face cause as of now I am still trying to understand this subject myself. But that said, it's something that is very common in modern frameworks and something that should be learnt and properly understood before even writing a single line of code that is dependent on a framework.

More New JavaScript features

Yes. JavaScript isn't what it use to be a few years ago and there are lots of new features it brings that you should definitely learn, stuff that you would find prevalent in most modern frameworks.

I could say a whole lot more about this, but I feel the above are the most important things you should learn before choosing a framework.

Beginner's guide to Javascript arrays [PART 2]

Ogurinka Benjamin — Sun, 18 Aug 2019 11:44:07 +0000

Hi guys! First of all I am more than overwhelmed by the reception the predecessor of this post received. It really do appreciate.
If you're viewing this for the first time, be sure to check out the PART 1 of this post Here!.

We will consider the following methods for this post.

reduce()
map()
filter()
sort()

Let's dive right in.

First of all let's define an array (or two) that we will be using for this.


// Array 1

const students = [

{firstname: 'Tammy', lastname:'Benjamin', admitted: 2011, graduation: 2014},
{firstname: 'Deborah', lastname:'Emeni', admitted: 2017, graduation: 2021},
{firstname: 'Daniel', lastname:'Oke', admitted: 2009, graduation: 2012},
{firstname: 'Ogurinka', lastname:'Benjamin', admitted: 2012, graduation: 2016},
{firstname: 'Nelson', lastname:'Abel', admitted: 2017, graduation: 2021},
{firstname: 'Ellie', lastname:'Julie', admitted: 2013, graduation: 2017},

];


// Array 2

const teachers = [

'Stephen', 'Richard', 'Biodun', 'Ruth',
'Peter', 'Paul', 'John', 'Jacob', 'Chris',
'Emeka', 'Nicole', 'Jaden', 'Albert',

];

Array 1 holds an array of objects (Read about objects here) of specifying the names, year of admission into school and year of graduation.

Array 2 holds a basic array of teachers.

Let's assume we want to get the list of students admitted in the year 2017 from the array, this can be achieved using the filter() method

What is the filter() method ?

The filter() method creates a new array with array elements that passes a test. This is useful for accessing properties, in the case of objects. If the current item passes the condition, it gets sent to the new array.
In the exercise above, we want to get the value of a specific property in our object array, in this case every student admitted in 2017

Code:


const admittedIn2017 = students.filter(function(student) {

if (student.admitted === 2017) {
return true;

}

});

console.log(admittedIn2017);

Explanation:

The above iterates over the entire array and checks for every occurrence where the value of admitted is 2017 and then returns the object which we display to the console.
We take the students array and filter over it. The filter method takes in a function which has an argument. We use this argument to make reference to the property in our object(in this case 'admitted') and then set our condition.For every time the condition is passed, the function returns true.

Challenge:

As a personal challenge, add more array items and try to return every student that will graduate within a range of year (say between 2012 to 2021)

map()

Let's assume you want to get the first name and the year of admission of every student in our array, we can achieve this using the map() method.

The map () method creates a new array by performing a function on each array element. In our case we want to get every student's first-name and their year of graduation.
It is important is important to note that the new array has the same length as its original.

Code:


const firstNameAndGradYear = students.map(function(student) {

return student.firstname + " " + student.graduation;

});


console.log(firstNameAndGradYear);

Explanation:

Here we are iterating over our student array and returning the value of 'firstname' and 'graduation' of each object and then displaying it to our console.

Challenge:

Try returning the last name and first name of every student. (Quite simple)

sort()

The sort() method sorts an array based on a certain condition and returns a new array.

Let's assume we want to sort our students array based on their year of graduation

Code:


 const aphabetically = students.sort(function(a, b) {

if (a.firstname > b.firstname) {

  return 1;
}
else {

return -1;
}

});


console.log (aphabetically);

Explanation:

The above iterates over our students array and compares all first names . It checks and sorts our students array alphabetically based on their first names. It takes two arguments (a,b) and moves it up or down based on alphabetical order

Challenge:

Try to sort the array based on the year of graduation order.

reduce()

The reduce() method runs a function on each array element to reduce it to a single value.

To understand this better, we will try to verify how many years all students in our array will spend in school.

Code:


const yearInSchool = students.reduce(function(total, student) {


return total + (student.graduation - student.admitted)


}, 0);

console.log(yearInSchool);

Explanation:

We iterate over our array and output the combined number of years all the students in our array will be spending in school. The 'total' argument here serves as an accumulator which we assign an initial value of 0 and each time we iterate over our array, is given the value of our math operation (student.graduation - student.admitted). You can read more about it and how it works here!

Challenge:

Try to get the amount of years all the students graduating in 2021 alone will be spending in school

Additional array methods

There a few other array methods which can also prove useful in different scenarions

toString()

This converts an array into a string.

Usage: (Using our Teachers array)


teachers.toString() // Converts the teachers array to string separated by a comma

join()

It behaves just like toString(), but in addition you can specify the separator

Usage:


teachers.join('/'); // Converts the teachers array to string separated by a forward slash

every()

The every() method check if all array values pass a test.

Example: Using our student array

For example, we will try to check if all the year of admission of our students array is greater than 2011


const greaterThan2011 = students.every(function(student) {
return student.admitted >= 2011;
});
console.log(greaterThan2011); // will return false

some()

The some() method check if some array values pass a test.

Example: Using our students array


const greaterThan2011 = students.some(function(student) {
return student.admitted >= 2011;
});
console.log(greaterThan2011); // will return true

find()

The find() method returns the value of the first array element that passes a test function

Example: Using our students array


const greaterThan2011 = students.find(function(student) {
return student.admitted >= 2011;
});
console.log(greaterThan2011);

indexOf()

The indexOf() method searches an array for an element value and returns its position. It takes two arguement, the item to search for(which is required) and where to start the search. Negative values will start at the given position counting from the end, and search to the end (which is optional)

Example: Using our teachers array


console.log(teachers.indexOf("Biodun")); // returns 2

lastIndexOf()

This is the same as indexOf(), but returns the position of the last occurrence of the specified element.

includes()

The includes() method determines whether an array contains a specified element.

Example: using our teachers array


console.log(teachers.includes("Biodun")); // returns true

Summary

There are dozens more array methods that you can find useful depending on the task you intend to accomplish. I have taken out time to list out the ones I have had reasons to use and I hope you picked up a thing or two from this. Thank you.