DEV Community: Utkarsh Maurya

My experience with JavaScript as a Java Programmer

Utkarsh Maurya — Sun, 05 Jun 2022 18:42:13 +0000

My programming journey started with Java. It's a great language to learn about core programming and OOP concepts.

A few months ago, I started learning JavaScript as a part of my Full Stack Web Developer goal. JavaScript is immensely popular and it has a great ecosystem. There are tons of JavaScript libraries and framework out there like React, Vue, Angular etc.

Because of my familiarity with Java, learning JavaScript has been very comfortable for me.

So, in this blog, I would like to talk about the things that I like about JavaScript and what I don't as a Java programmer

What I like about JavaScript

1: No boilerplate code

No more public static void main(String[] args).
With JavaScript, I don't have to write unnecessary boilerplate code just because I want to run a small piece of code. No need to define a class and a main method for everything. I know that they have their significance in Java and why they are important but sometimes it is frustrating.

2: Higher Order functions and Callback

I really love being able to create functions that can be passed different functionality according to my need. I don't have to define a whole new function just because there is some slight difference in functionality.

They allow us to compose different operations.

H.O.F functions like map(), filter(), reduce() are extremely helpful when I want to perform some operation on a collection of items.

Java also has support for Higher order functions with Lambdas and the Functional interface, but I never used them as frequently as I use in JavaScript.

3: Objects

Objects are the bread and butter of JavaScript.

Objects are probably my favourite part of JS. I love how easy it is to create and use objects in JavaScript. No need to always define a class whenever I want to group together related pieces of information, I can just create an object for it.

With ES6, it is easier than ever to use objects. Object destructuring makes it so easy to extract and use values from objects.

// before ES6
let person = {
    name: "Utkarsh",
    username: "utkarsh1311"
}

let name = person.name;
let username = person.username;

console.log(name, username) // Utkarsh utkarsh1311

// after ES6
let person = {
    name: "Utkarsh",
    username: "utkarsh1311"
}

let { person, username } = person;

console.log(person, username) // Utkarsh utkarsh1311

4: The JavaScript Ecosystem

JavaScript was developed to make the frontend of web along with HTML and CSS. There are so many frontend libraries and frameworks based on JavaScript like React, Vue, Angular, Next.js and many many more.

JavaScript now also has the abiltity to run outside browsers thanks to technologies like Node.js.

This huge ecosystem allows us to build almost anything with the help of JavaScript.
You can develop web app with React or Vue, desktop apps with Electron.js, mobile app with React Native, Xamarin.
The possibilities are endless.

I never felt this freedom with Java. I know Java has it's own use cases where it shines but I really enjoy JavaScript more due to being able to build stuff.

What I don't like about JavaScript

1: Object Oriented Programming

I know, I know, I said that I love using objects in JS. So why now I am saying I don't like OOP in JS.

Well, It is true that I love to use JS objects, I simply can't wrap my head around the way OOP is implemented in JavaScript.
JavaScript uses something called Prototype based OOP. That means there is no concept of classes in JavaScript. And maybe because I have a Java background, I have a very clear mental model of traditional class based OOP.

With ES6, JS has introduced a class based syntax which makes it easier to write Object oriented code, but it is just syntactical sugar and under the hood, it still uses the Prototype based OOP.

After watching JavaScript-The Hard parts by Will Sentance, my understanding of OOP in JS has definitely improved, but I still don't like it.

2: Asynchronous JavaScript

Asynchronous means things that happen independent of the main program flow.
Asynchronous programming is the backbone of modern web development. It is a very important aspect of JS to learn if you wish to be a successful web developer.
When I started writing code which involved some sort of async operation, I made a lot of mistakes because I didn't have any idea about how asynchronous programminga actually works in JS.
I struggled a lot with Promises, then, catch, async, await etc. I still do. There are still certain concepts in Asynchronous JS which is hard for me wrap my head around.

Summary

This was all about my experience with JavaScript as a Java programmer.
Overall, I am really enjoying coding in JavaScript and I think I am starting to like it more than Java (Sorry Java).
Let me know what you think 😄.

A workflow for my web-dev projects repo

Utkarsh Maurya — Tue, 07 Dec 2021 08:19:48 +0000

Whenever I add new projects to my web-dev-practice repository, it is a pain to add the information about the project manually to the README of the repo.

My Workflow

That's why I created a workflow which automatically adds information about the project like it's name, preview image and a try-it link from a data.json file to the README.md as an HTML table cell. Also adds a little Download button at the end of the README.md in case someone wants to download the repo as a zip file.
I am using the Json2Table action from EddieHub and readme-download-button-action.
Here is the YAML file :-

on: 
  push
jobs:
  table:
    runs-on: ubuntu-latest
    name: Update README from json data
    steps:
    - uses: actions/checkout@v2
    - name: Read/Write data into README
      uses: eddiejaoude/github-actions-reader-writer@v0.1
      with:
        json-file-path: 'data.json'
        github-token: ${{ secrets.GITHUB_TOKEN }}
        columns: 3
        object-field-names: '[ "tryItLink", "projectName", "imageUrl", "description" ]'
        html-cell: '<td align="center"><div style="display:flex; flex-direction: column;"><h2>{{ projectName }}</h2><img src="{{ imageUrl }}" /><h3>{{ description }}</h3><h3><a href="{{ tryItLink }}">Try It</a></h3></div></td>'
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Get latest release
        id: get-latest-release
        uses: InsonusK/get-latest-release@v1.0.1
        with:
          myToken: ${{ github.token }}
          view_top: 1

      - name: Readme Download Button Action
        env:
          GITHUB_USER: "utkarsh1311"
          REPO: "web-dev-practice"
          FORMAT: "zip"
          VERSION: "${{ steps.get-latest-release.outputs.tag_name }}"
          COLOR: "blue"
          BEGIN_TAG: "<!-- BEGIN LATEST DOWNLOAD BUTTON -->"
          END_TAG: "<!-- END LATEST DOWNLOAD BUTTON -->"
        run: |
          UPDATE=$(cat README.md | perl -0777 -pe 's#(${{ env.BEGIN_TAG }})(?:.|\n)*?(${{ env.END_TAG }})#${1}\n[![Download ${{ env.FORMAT }}](https://custom-icon-badges.herokuapp.com/badge/-Download-${{ env.COLOR }}?style=for-the-badge&logo=download&logoColor=white "Download ${{ env.FORMAT }}")](https://github.com/${{ env.GITHUB_USER }}/${{ env.REPO }}/archive/${{ env.VERSION }}.${{ env.FORMAT }})\n${2}#g')
          echo "${UPDATE}" > README.md

      - uses: EndBug/add-and-commit@v7
        with:
          message: "docs(readme): Bump download button version to ${{ steps.get-latest-release.outputs.tag_name }}"
          default_author: github_actions
          branch: main

And this is what my README.md looks like :-

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

Here is the the repo which uses my workflow :-

utkarsh1311 / web-dev-practice

Projects for web-dev practice

Repo for projects made for web-dev practice

Here are my projects

Dice Game This is a local two-player and one control game. As soon as you refresh you get the result.The one with the highest value die win. Refresh the page to get a new result. Try It	Drum Kit Use your computer keyboard to jam away musically! Try It	Order Card Summary Solution for the FrontEndMentor summary card component challenge Try It
Simon Game Challenge A digital version of the classic memory game called Simon Game! Try It	Advice generator app A simple app to generate random advices Try It	Sunnyside agency landing page Solution for Sunnyside agency landing page challenge from Frontmentor.io Try It

You can download the code as a zip file by clicking the button below

View on GitHub

and this is link to the yml file : https://github.com/utkarsh1311/web-dev-practice/blob/main/.github/workflows/main.yml

Additional Resources / Info

My experience

Learned a lot about GitHub actions. How they work, what events can trigger a workflow, how to use different action in the same workflow. Overall, It was a great learning experience.

DEV Community: Utkarsh Maurya

My experience with JavaScript as a Java Programmer

What I like about JavaScript

1: No boilerplate code

2: Higher Order functions and Callback

3: Objects

4: The JavaScript Ecosystem

What I don't like about JavaScript

1: Object Oriented Programming

2: Asynchronous JavaScript

Summary

A workflow for my web-dev projects repo

My Workflow

Submission Category:

Yaml File or Link to Code

utkarsh1311 / web-dev-practice

Projects for web-dev practice

Repo for projects made for web-dev practice

Here are my projects

Dice Game

This is a local two-player and one control game. As soon as you refresh you get the result.The one with the highest value die win. Refresh the page to get a new result.

Try It

Drum Kit

Use your computer keyboard to jam away musically!

Try It

Order Card Summary

Solution for the FrontEndMentor summary card component challenge

Try It

Simon Game Challenge

A digital version of the classic memory game called Simon Game!

Try It

Advice generator app

A simple app to generate random advices

Try It

Sunnyside agency landing page

Solution for Sunnyside agency landing page challenge from Frontmentor.io

Try It

You can download the code as a zip file by clicking the button below

Additional Resources / Info

My experience