DEV Community: Rose Kamal Love

Introduction to FHIR - The Standard for data exchange in healthcare

Rose Kamal Love — Thu, 16 Jun 2022 22:31:17 +0000

I have recently been accepted as an open source contributor for LibreHealthIO under the
Google Summer of Code Program and my project for this summer is to rewrite the
whole UI of the lh-toolkit as an Open Web App
using the pre-existing lh-toolkit-webcomponents.

These web components are built with Polymer.js and follow what is called the FHIR Standard which is the
ultimate standard when it comes to data exchange in healthcare. My UI re-write is supposed to be compliant with this
standard. So, I figured why not write a blog about everything I learn about FHIR Standard
so that people that come after me have a place to look for, and my understanding solidifies while writing this.

FYI: FHIR is pronounced as Fire, weird I know but it is what it is.

Checkout Intro to FHIR

Before FHIR and what led to its creations

In the ancient times (the 2000s) it was very hard to have applications that we take for granted today, IE5 was the explorer that
people used back then. Developers back then had to solve really basic problems to even do things as basic as creating a
web portal that links two hospitals' data together and shows it on a web page.

Getting access to data, designing asynchronous web applications, and reloading the web page when new data comes in,
we're really crazy problems for developers back then. Think of writing a frontend for IE5 that updates with the data,
yeah we do take a lot of things for granted that developers in the early 2000s had to do themselves.

The technology that the developer from the 2000s used as a protocol known as HL7 V2, is a bit hard to understand
but once you are used to it, HL7 V2 really makes it a lot easier to quickly scan the data and tell what's it trying to tell
you. It was very dense so allows for a lot of information in smaller transfers.

This is what a typical HL7 V2 payload looked like:

I know this looks hilarious, but isn't building web apps for IE5 hilarious in itself? Even though this looks very
old fashioned (because it is) but it really was a groundbreaking technology because it allowed for web apps to be built
which could dynamic, asynchronously querying a bunch of backend systems using these v2 queries and dynamically updating
itself when new data comes in.

Me thinking about useEffect while writing this 😆

After the HL7 V2 there was a large effort to replace it with something more modern than something that was built in
the 90s. That led to the creation of a protocol known as the HL7 V3.

This here is an example of HL7 V3's XML Payload

Even though this was a great effort with some really good ideas in it, it utterly failed to attract any kind of mind
share. The main reason that I found it on the internet is that it was too complex and intense to understand and the make
something useful out of it. So it never really managed to take off as a useful standard.

Basic Technology as a Barrier

Basic concepts of getting data out of EHRs and agreeing on formats across jurisdictions were completely preventing large
scale interop.

A lot of amazing things were done using the HL7 V2 and V1 but at the same time a lot of amazing things were not
done, just because the technology hadn't caught up, it really wasn't usable by modern approaches to build applications,
things like building apps that work on your phone and tablet, or work across slow distributed mobile networks, there are
all kinds of barriers there.

All of this leads to the creation of 🔥 HL7 FHIR.

FHIR was created as a response to these old technologies, as a
fresh attempt to build standards that could meet modern needs for interoperability and most importantly that it
would be picked up by people who needed to build technology to solve healthcare problems so let's dive in.

Introduction 🔥 HL7 FHIR

I still can't get over FHIR being pronounced as fire 😆

Fast Healthcare Interoperablity Resources the H and the I are fundamentally what they wanted to build. So, no question about why they chose those two letters.

They chose the word fast kind of deliberately, and fast in this context doesn't mean that the data exchange in itself is fast. The idea behind it are that it is fast to adopt which translates to, you don't need tonnes of experience, PHDs or anything like that to get started with the FHIR Standard

It is intended to be a standard that you can pick up, quickly learn, and very quickly become productive as well as proficient in. And I gotta say, they have succeeded in making it fast.

The work resources comes from the HTTP spec, the language that they (HTTP) use describes the entire world wide web in terms of addressable resources.

For example, you go to google and type in your query term in the form input, and then you pull down a page with a bunch of search results on it, what you have actually done is you have downloaded a resource, that resource, in this case, is search results.

The HTTP spec describes the entire web in terms of these addressable , fetchable, resources.
FHIR is taking all of that context and applying it to Health Care

Hl7 is a standards development organization and FHIR is a standard. (V2 and CDA are also separate standards)

Just a heads up almost none of the actual work of standards development happens by HL7 the corporate entity, what it brings to the table is a process and a governance framework and they organize events, the standard itself is created by volunteers who are spread entirely around the globe.

The amazing stuff, all of it is free and open source, this is honestly is great.

So, What is FHIR?

FHIR is a free and open source standard for health interoperability, based on modern approaches. It consists of five things

A robust data model for describing health and administrative data
A RESTful API for interacting with the data using either JSON or XML
A set of open source tools to implement and test FHIR applications
A collection of FHIR Servers around the world that you can interact with
A community of implementers working together

FHIR also has its own free and open source implementation of the standards in the Java programming language.
But if you're not a Java developer, there are open source libraries of excellent quality in all kinds of other languages as well.

The FHIR Manifesto

One of the primary aims of FHIR was to not repeat the mistakes of the past, and a lot of that led to the creat of The FHIR Manifesto which is a set of guiding principles that was key in terms of decision-making, in order to create and maintain a standard that can be implemented quickly.

Here are a few points from that manifesto

Implementer Focus

This sounds trivial I know, a, of course, a technical standard is going to target developers and implementers, but a lot of people who contributed to the FHIR standard aren't Computer Scientists or doesn't come from a computer background at all, they are clinicians, doctors or PHDs. The vocabulary that they use can be a bit hard to comprehend for the "technical" folks.

The specification is targeted at developers and implementers (not clinicians)
Every detail of the specification is tested at connectathon events

When creating a standard it is crucial to test its implementations because it can and does happen that we come up with standards, think that they are the optimal ones and then they turn out to be unworkable this is why connectathon events help a lot in testing the standards before making them normative

Common Scenarios

The HL7 V3 tried to be comprehensive, it was trying to be the standard that can be usable for every use case. So it becomes bloated with a lot of stuff that one person needed, or a small group of people needed.

So, FHIR places a heavy emphasis on the 80:20 rule

80% - Specification covers only what is needed by 80% of systems worldwide
20% - FHIR is easy to extend for your use case

Be Open

FHIR is free to use and free to contribute to

Specification is licensed under Creative Commons CC0
Many tools are open source (MIT / The APACHE License (Apache License)
Many tutorials are free as well

Be Easy to Adopt

Being easy to learn is critical to the success of FHIR
Many organizations have adopted FHIR in weeks

Parts of FHIR

FHIR: Data Model

As I mentioned earlier the R in FHIR stands for resource, and resource ofc is that http concept of a resource. In the world of FHIR, an individual resource is a data model for some specific purpose.

FHIR defines a set of roughly 150 resources
These are the building blocks of the specification, example include:
- Patient (the person who receives healthcare)
- Encounter (a doctor's appointment or hospital say)
- Observation (e.g. a device reading, or lab value)
- Diagnostic Report (e.g. a whole lab or X-Ray report)
- Medication Prescription (Rx for meds)

Let's look into the Patient resource a little deeper,

This is the structure of the Patient resource type which you can find on the FHIR Website, this website is in itself a highly comprehensive documentation of everything FHIR and even everything HL7

One of the things in this website/documentation that I think is great but may sound trivial to you is that everything that can be explained has a link attached to it, which you can click to learn more about what it is.

For example, what do you think that little sigma symbol in the 2nd grid represents? Well, click on it and find out.

One other thing that I have noticed myself is that the documentation is written in a way that I (a developer) don't have a hard time understanding. It does be following the manifesto XD

Data Type: Primitives

Much like any other programming language, FHIR has defined its own set of data types. These data types are very similar to the ones used in general programming languages so no worries there.

Types	Example
string	Patient is awake
boolean	true
date	2016-02-19
decimal	12.347000
integer	500
uri	http://snomed.info/sct
base64	rwr39o9h=
dateTime	2015-01-26t15:33:13-05:00
instant	2015-01-26t15:33:13.099-05:00

In the FHIR spec, uris and urls are very widely used hence there is a whole data type for that only, base64 here is used for things like images and all.

There are two types of dates in the FHIR spec, the dateTime represents the human time, which can have variable precision. instant on the other hand stores the system time, with the precision of seconds/milliseconds.

Data Type: General Purpose (composite)

General purpose datatypes are mini structures that are reused in a different part of the models

Here's an example of a general purpose data type: Human Name

FHIR Data Model - Resources

Meta Data
- Resource ID
- Resource Version
- Tags
- Profile
Extensiosn
- Any information that doesn't fit into the 80% (Remember the 80:20 rule?)
Narrative
- Human-readable version of the content (optional but encouraged)
- CDA has taught them that this is very important
Body
- Raw Structured Data

FHIR Encodings

FHIR has defined as of today 3 encodings, 3 means of serializing data and sending it across the wire,

JSON: The most popular with modern internet APIs
XML: Still very popular with great tools available
RDF/Turtle: Only generally used in some research contexts

A JSON encoding example of the Patient resource

{
  "resourceType" : "Patient",
  // from Resource: id, meta, implicitRules, and language
  // from DomainResource: text, contained, extension, and modifierExtension
  "identifier" : [{ Identifier }], // An identifier for this patient
  "active" : <boolean>, // Whether this patient's record is in active use
  "name" : [{ HumanName }], // A name associated with the patient
  "telecom" : [{ ContactPoint }], // A contact detail for the individual
  "gender" : "<code>", // male | female | other | unknown
  "birthDate" : "<date>", // The date of birth for the individual
  // deceased[x]: Indicates if the individual is deceased or not. One of these 2:
  "deceasedBoolean" : <boolean>,
  "deceasedDateTime" : "<dateTime>",
  "address" : [{ Address }], // An address for the individual
  "maritalStatus" : { CodeableConcept }, // Marital (civil) status of a patient
  // multipleBirth[x]: Whether patient is part of a multiple birth. One of these 2:
  "multipleBirthBoolean" : <boolean>,
  "multipleBirthInteger" : <integer>,
  "photo" : [{ Attachment }], // Image of the patient
  "contact" : [{ // A contact party (e.g. guardian, partner, friend) for the patient
    "relationship" : [{ CodeableConcept }], // The kind of relationship
    "name" : { HumanName }, // A name associated with the contact person
    "telecom" : [{ ContactPoint }], // A contact detail for the person
    "address" : { Address }, // Address for the contact person
    "gender" : "<code>", // male | female | other | unknown
    "organization" : { Reference(Organization) }, // C? Organization that is associated with the contact
    "period": { Period } // The period during which this contact person or organization is valid to be contacted relating to this patient
  }],
  "communication" : [{ // A language which may be used to communicate with the patient about his or her health
    "language" : { CodeableConcept }, // R!  The language which can be used to communicate with the patient about his or her health
    "preferred" : <boolean> // Language preference indicator
  }],
  "generalPractitioner" : [{ Reference(Organization|Practitioner|
   PractitionerRole) }], // Patient's nominated primary care provider
  "managingOrganization" : { Reference(Organization) }, // Organization that is the custodian of the patient record
  "link" : [{ // Link to another patient resource that concerns the same actual person
    "other" : { Reference(Patient|RelatedPerson) }, // R!  The other patient or related person resource that the link refers to
    "type" : "<code>" // R!  replaced-by | replaces | refer | seealso
  }]
}

Model Concepts

To work with the understanding we should get a basic understanding of some concepts that are defined by the folks who create FHIR, so that's what we
re gonna do it.

Model Concepts: Indentifiers

Identifies in FHIR have two important parts:

The system is a URI indicating the kind of identifier
The value is the actual identifier

{
  "system": "http://ehealthontario.ca/NamingSystem/ca-on-patient-hcn",
  "value": "0123456789"
}

Model Concepts: Codes

In health we often draw values from a set of allowable codes (e.g. standards like LOINC and local code systems)
Codes in FHIR have two important parts:
- The system is a URI indicating the kind of code
- The code is the actual code
- The display is a human-readable display name

{
  "system": "http://loinc.org",
  "code": "718-7",
  "display": "Hemoglobin mass/volume in blood"
}

Model Concepts: Extensions

Extensions are the way we include out 20%
An extension is really just a simple key-value pair
- The key is a URL
- The value is an FHIR datatype or more extensions
Extensions can also include child extensions which are also called Child Extensions

{
  "url": "http://hl7.org/fhir/StrucureDefinition/patient-birthTime",
  "valueDateTime": "2020-01-13T10:12:00+08:00"
}

Resource URLs

http://hapi.fhir.org/baseR4/Patient/example is a Resource URL, if we look closely the pattern here is that the URL starts with a base URL http://hapi.fhir.org/baseR4 in this case followed by the type of the resource, Patient here followed by the ID which here is example

REST API: Overview

The FHIR REST API is very expansive and covers many many use cases and features, I will be covering a few of them in this blog post but if you want to learn more you can do that by going to the following links

Here's an example of CRUD for the patient resource

Operation	Verb	Base URL	Type	ID
Read	GET	http://hapi.fhir.org/baseR4	/Patient/	/123
Create	POST	http://hapi.fhir.org/baseR4	/Patient/
Update	PUT	http://hapi.fhir.org/baseR4	/Patient/	/123
Delete	DELETE	http://hapi.fhir.org/baseR4	/Patient/	/123

The request body in POST/PUT is FHIR resources, in FHIR DELETE doesn't destroy the data, instead it flags the data as deleted

FHIR Searching (the Search API)

One of the very powerful features of the FHIR spec is the search API which allows us to get data using various searchParams. If we're building any applications that are being used for a purpose, it gotta have search functionality, and FHIR provides that.

Verb	Base URL	Type	Search Parameter
Get	http://hapi.fhir.org/baseR4	/Patient?
	http://hapi.fhir.org/baseR4	/Patient?	name=smith
	http://hapi.fhir.org/baseR4	/Patient?	birthdate=gt1970

The search parameter can even be empty, which means to the server that we want all it sends the data of all the patients, not all servers support this however because this is a security concern.

That's cool and all but how do we know what all search parameters are available for a particular resource? Well, every resource definition has a table of default search parameters at the bottom of the resource definition.

You can just go to the FHIR website and look for a resource, then at the bottom of the resource definition table, you will find the Search Parameters. There are a couple of columns for every search param table.

The first one is the part that goes in the URL so, baseUrl/Patient?birthDate=2020 here, the birthDate is the name that will be present in the first column of every resource.

The second column is an expression, and an expression is a "FHIRPath" expression determining what is indexed, often times these are very intuitive and one-to-one.

Search parameters have datatypes, which are related to (but NOT the same as) regular datatypes

FHIR Search Datatypes: String

The search param datatypes determine the semantics

http://hapi.fhir.org/baseR4/Patient?name=rob
http://hapi.fhir.org/baseR4/Patient?name:exact=Robby

FHIR Search Datatypes: Token

The search param index identifier and coded fields

http://hapi.fhir.org/baseR4/Patient?identifier=http://foo|1234
http://hapi.fhir.org/baseR4/Patient?identifier=1234
http://hapi.fhir.org/baseR4/Patient?identifier=http://foo|

FHIR Search Datatypes: Date

Date parameters index dates and times

http://hapi.fhir.org/baseR4/Encounter?date=2020
http://hapi.fhir.org/baseR4/Encounter?date=gt2020
http://hapi.fhir.org/baseR4/Encounter?date=2020-10-10
http://hapi.fhir.org/baseR4/Encounter?date=ge2020-10-10T12:12:00Z

Phew!

So, that's FHIR for you in a lot more than 100 seconds, I will next be blogging about consuming an FHIR API (HAPI FHIR to be exact) which I will be doing in a typeScript React.js app will be using Axios + ReactQuery for data fetching.

Until then, bye 👋🏻

please take some time to appreciate how beautifully remix's website tells us its features

Rose Kamal Love — Tue, 07 Jun 2022 19:44:53 +0000

https://remix.run/

My goals for GSoC 22' Community Bonding Period (LibreHealthIO)

Rose Kamal Love — Thu, 26 May 2022 00:00:00 +0000

Originally published on my personal blog

I have been selected as an Open Source Contributor for LibreHealthIO under the Google Summer
of Code Program and I am extremely excited to work with the amazing mentors that are assigned to mentor me for the
the project, Complete UI Re-Write of the Toolkit and Radiology.

My Project

During the 2018 GSoC period, web components of FHIR Resource using Polymer.js were written. This project is to use
those web components to completely re-write the UI of LibreHealth Radiology and LibreHealth Toolkit and make them
Open Web App modules.

The result would be a complete Open Web App with Spring Data on the backend and Polymer.js web components as
the frontend.

Discussion Thread: Complete UI Re-Write of the Toolkit and Radiology.

Community Bonding Period [May 21st to June 13th]

The period of time between when accepted GSoC contributors are announced and the time they are expected to start coding.
This time is an excellent one to introduce your GSoC contributors to the community, get them on the right mailing
lists, introduce them to the codebase and discuss how they will work with their mentors on their timeline for the
program, etc.

The community bonding period has already started (started 6 days ago), I haven't been able to participate in
the community because I have been involved in some personal issues. I was having my exams during the time the projects
got announced, so was involved in them for a couple of days after the projects were announced. But then on the last day of my
exams, I got the news that my grandpa died 😔. I was devastated. Then, got involved in all the rituals surrounding the death of a
family member in India.

I am now over all of that and can finally start participating in the community and get to know fellow open source
contributors, understand the different time zones/communication mediums for the mentors.

I had already planned out my Community Bonding Period back when I was writing the proposal for the project, and I am
going to strictly stick to that only.

My Targets for This Period

I have divided this period into two parts, one for the first week of the remaining days and the next for the second week
of the remaining days.

Part 1 (May 26 to June 2)

Since I have never actually used the Toolkit or the Radiology, (me not being in the medical field) I will
start by understanding the workflows that are present in the application.

And while I am at it it would make a lot of sense if I create these workflows in the form of charts using
the Lucid Charts
Web app.

Once I get a good understanding of how a potential user uses the Toolkit and Radiology I will start exploring the codebase
and get an idea of how the style of the code and the basic flow of the codebase. I will also try to change a few things and
see if it causes any errors or something to solidify my understanding of the codebase.

One good way to get a good grasp of the codebase is to work on some issues on the project, so I will try to shortlist
some issues and start working on them. The deliverables for this would be that I get a couple of MRs merged at
least and get a good understanding of the codebase

Part 2 (June 2 to June 12)

Now that I have a good understanding of the user side of the project (the user workflows I have created using Lucid Charts)
as well as the developer side of the project (the codebase). I can now start working on the designs for all the pages
of the projects.

I have already created wireframes for most of the pages when I was writing the proposal, but they are just wireframes
and lack a lot of details. I will start implementing full fledged designs which will follow the Material Design philosophy
and will be implemented using the Material Web Components

After each section of the project, I will get feedback from the mentors and community members and incorporate the
feedbacks immediately.

Deliverables

So, by the end of the community bonding period:

I will be having a good understanding of the project's UI workflows as well as the code workflows.
I would have created a couple of MRs at least.
I will be done with detailed designs of all the pages present in Toolkit and Radiology which would have been revised too on the bases of the feedback I get from the community and the mentors.

I will be updating how all this went and the percentage completion of the tasks that I decided, so stay tuned on dev.to

You can reach me out on twitter meanwhile 🙂

This is how you become "Internship Ready" as a Web Developer [in 2022] (Part 1: Front-End)

Rose Kamal Love — Thu, 19 May 2022 14:47:05 +0000

This article was originally posted on my personal blog

Introduction

In this blog post we're gonna dive into, how one who has zero experience in Web Development can become an internship ready Web Developer.

We'll first understand the difference between the backend and frontend of a web application, then we'll start by learning the frontend which will include firstly the basics html, css, and js.

Once we're done with these we'll have the choice to move further with the frontend or start exploring the backend I'll recommend moving forward with a Frontend JavaScript Framework like react.js, or one can move forward with a Backend JavaScript Framework like express.js

Note: The resources are going to be opinionated in this post to solve the issue of abundance of resources. It is an issue because if we are exposed to too many resources we tend to procrastinate

Even though this post is opinionated, you can still choose your own resources and swap them with the ones I recommend. Because it is possible that you don't understand the ones I have recommended

Why Web-Development?

The answer to this question is fairly straightforward, Web Development has proven itself to be a valuable skill to learn from time and time again.
I can tell this by my experience and from the experience of my fellow developers, that the number of opportunities in Web Development is far greater than they are in say Mobile Development or Machine Learning Development. The pay is pretty nice too, although it highly depends on the level of your skill.
The stipend is anywhere from 10k INR to 60K INR depending on the quality and relevance of the skills you have. (your year of college doesn't matter)

Apart from all this, the barrier to entry for Web Development is comparatively way less. You start to see the result of all that you've been learning quickly which motivates us, we learn more and get more results. This positive feedback loop takes more time to kick in, in other forms of development (say Mobile Development)

All and all, spending time learning web development is going to be extremely rewarding.

Why JavaScript?

The answer to this question is fairly complicated compared to the previous one. So let's divide it into two parts the front-end and the back-end.

Front-End

If I had to tell someone why they need to learn JavaScript to become a frontend developer in a single line, I would say:
Because every browser has a JavaScript Runtime built in by default.

JavaScript Runtime being the platform on which the . js code is executed. But no one would be using . js if it didn't get the job done, because it does. And there is a huge number of javaScript frameworks out there that make the ecosystem very developer friend (at least virtually)

Even if the website is built with a framework like Django (python) the front-end is still written with javaScript

Back-End

javaScript on the back-end is a different story entirely, there is no default recommendation for the back-end technologies, and using javaScript on the backend is nothing more than a personal recommendation

I recommend javaScript for the backend for mainly two reasons, the community is great and the friction is way less. (by friction I mean the context switching one has to do when developing an application using two different languages)

The top 3 back-end frameworks:

PHP – Laravel, CakePHP
Python – Django, Flask
JavaScript – Express.js, Spring

A newbie can learn either of the above-mentioned frameworks for the back-end but my recommendation still lies with javaScript, the blog post being about internship-ready web-developer. This statement doesn't mean that these technologies don't have opportunities, it is simply implying the javaScript has more.
With all that out of the way let's dive in.

Index

[ Featured: Learning on YouTube ]

Basics:

Internet

How does the internet work, and what is HTTP?

Browsers and how they work?

What's a Domain Name?

Working of a DNS, and what is hosting?

HTML

CSS

JavaScript

Tools:

Package Mangers (like npm),

build tools

npm scripts

webpack

esbuild

Version Control

Basic usage of Git and GitHub

Repo hosting service (GitHub)

Additional front-end:

JavaScript Front-end Frameworks (react.js, angular.js, vue.js, etc)

CSS Frameworks (tailwind, bootstrap, etc)

SSR (next.js, gatsby.js, nuxt.js, etc)

[Building Projects] (Will be covered in a different blog post)

Back-End: (this section will be covered in Part 2)

OS and General Knowledge

Basic Terminal Usage and CLI commands (grep, awk, sed, lsof, curl, etc)

Process, Threads, Concurrency and Memory management

I/O Management and POSIX (stdin, stdout, stderr, pipes)

Basic Networking

Programming Language (javaScript preferred)

Server (node.js, express.js etc)

DataBases

Relational (PostgresSQL, MySQL, MariaDB, etc)

Document (MongoDB, Firebase)

APIs

REST

JSON APIs

gRPC

Authentication

Don't get anxious looking at all the topics above, I am sorry if they look intimidating. This index is designed to quick access all the sections and sub-sections of the blog post that corresponds to each of the topics. For some of the topics that are too small to explain I have directly linked resources to learn them. For example, How does the internet work, and what is HTTP? is directly linked to a Stanford web page explaining exactly that.

Note: The first two steps (Basics and Tools) are basically mandatory (in order) to move forward with the later steps, however the last two steps (Additional Frontend and Back-End) can be swapped to the interest, whichever interests you more.

HTML

HyperText Markup Language is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. The HTML file contains all the content on the page, and it uses tags to denote different types of content.

For example, you can use tags to create headline titles, paragraphs, bulleted lists, images, and so on. HTML tags by themselves do have some styles attached, but they are pretty basic, like what you would see in a Word document.

HTML for beginners is very easy to pick up and can be learned fairly quickly. My sister is in 6th grade and she was getting the hang of it.

But, unfortunately, many people are stuck in this phase, maybe they're just saying they have started learning and haven't really but in fomo they say they're learning HTML. What I want to say is don't waste a lot of time on learning this, it is extremely easy to understand. It is basically MS Word u>where the structure of the content is determined by html tags instead of the bold or italic button in the MS Word program

To learn html I have two video recommendation

HTML Tutorial for Beginners: HTML Crash Course [English]
HTML Tutorial for Beginners | Complete HTML with Notes & Code [Hindi]

Just watch either of the two videos and move ahead, without wasting any more time on this.

CSS

Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy. You can add colors, custom fonts, and layout the elements of your website however you want them to look. You can even create animations and shapes with CSS!

With great power comes great responsibility

There is a lot of depth to CSS, and sometimes people tend to gloss over it so they can move on to things like JavaScript. However, I can’t overestimate the importance of understanding how to convert a design into a website layout using CSS. If you want to specialize in front-end, it’s essential to have really solid CSS skills.

Having said that, css is easy in the beginning then as soon as it starts making sense, it gets harder and harder. So my personal recommendation would be to learn the fundamentals in depth so you know what you're doing. 80% of the work can be get done with just these fundamentals.

And to get these fundamentals in place I have the perfect resource for you, I bet you have at least heard of freeCodeCamp. They have a interactive code along with tutorial which takes from basic html to responsive web design.

The topics involve:

Basic HTML and HTML5

Basic CSS

Applied Visual Design

Applied Accessibility

Responsive Web Design Principles

CSS FlexBox

CSS Grid

This is what the layout of the website looks like, on the left, we have the tutorial explaining the topic that we have learned. If the topic is from a previous module then it is linked here.
In the middle, there is the code editor in which we write our code, the output of which is shown at the right of the page.

Wait there is more, when you complete the modules you will be greeted with coding assignments in which you'll have to code out some projects to solidify the CSS skills that you have learned.

There are in total 5 coding assignments:

Build a Tribute Page

Build a Survey Form

Build a Product Landing Page

Build a Technical Documentation Page

Build a Personal Portfolio Webpage

Yeah, it even includes a personal portfolio

I can't recommend this interactive course enough!

JavaScript

JavaScript is a very interesting language (putting it mildly). It was designed in 10 days to run inside the browser. Using JavaScript we can make our website dynamic, meaning it will respond to different inputs from the user or other sources.

For example, you can make a Weather widget showing the weather based on the input of the user, you can build a website that tracks the user's expenses and shows the stats in a chart form.

It is crucial to learn if you wanna go ahead to learn JavaScript frameworks like React, you'll have a better time learning those frameworks if you take the time to learn regular Vanilla JavaScript first.

Even if you wanna go for backend development, you still can't gloss over JavaScript. You are also required to understand the fundamentals of this language. This is the only way we can interact with the browser like we do with a computer and it is fun.

Now comes the resources part:

These are the two free courses that I will recommend, but watching videos while mindlessly copying the code is what everyone tends to do when we learn from videos.

To solve this issue I would highly recommend you follow the 30 Days of JavaScript Challenge. In this challenge you will be given a unique challenge each day for 30 days, slowly increasing in difficulty.

This is the perfect way to solidify your learning and make you fall in love with JavaScript.

Note: Once you are done with this, you'll have to learn Asynchronous JavaScript and the best course for that is Namaste JavaScript - Akshay Saini, you don't have to watch the whole playlist at once, you can take your time and keep learning it slowly once you finished with the basics.

Learning on YouTube

Even though I am asking you to watch these playlists on YouTube, it is not a good platform to learn. There are a lot of distractions, and a whole sidebar dedicated to making you watch unproductive content.

I personally go from learning to watching Tanmay Bhatt's Comedy videos in no time.

This is why I would recommend you to checkout YouTemy the project I built to fix these issues. Even though it is in its MVP stage, you'll still get a lot of use out of it.

You can send feedback for the project to me personally on Twitter, or you can post an issue on GitHub - YouTemy and while you're at it, do give it a ⭐ on GitHub, I would Love ❤️ that

Tools

Let’s get into some other front-end technologies now. As we mentioned, HTML, CSS, and JavaScript are the basic building blocks of front-end web development. In addition to them, there are a few other tools that you’ll want to learn.

Package Manager

Package managers are online collections of software, much of it open source. Each piece of software, called a package, is available for you to install and use in your own projects.

You can think about them like plugins– instead of writing everything from scratch, you can use helpful utilities that other people have written already.

The most popular package manager is called npm, or Node Package Manager, but you can also use another manager called Yarn. Both are good options to know and use, although it’s probably best to start out with npm.

If you’re curious to learn more, you can read this article on the basics of using npm.

{ Source of Above Section }

Build Tools

Build tools are programs that automate the creation of executable applications from source code. The building incorporates compiling, linking, and packaging the code into a usable or executable form

By far the most widely used build tool is WebPack and I will recommend understanding how WebPack works. This knowledge will be easily transferable to other build tools.

If You are Scared of Webpack, WATCH THIS!

Version Control

This is something that you just can't skip, it is very important and will make you a decent developer single-handedly.

Version control (also called source control) is a system that keeps track of every code change that you make in your project files. You can even revert to a previous change if you make a mistake. It’s almost like having infinite save points for your project, and let me tell you, it can be a huge lifesaver.

The most popular version control system is an open source system called Git. Using Git, you can store all your files and their change history in collections called repositories.

You may have also heard of GitHub, which is an online hosting company owned by Microsoft where you can store all your Git repositories.

To learn Git and GitHub, GitHub.com has some online guides that explain how to get up and running. Traversy Media also has a YouTube video explaining how Git works.

And while you're at it, go ahead and learn GitHub Pages the repo hosting service provided by GitHub which will allow you to host your websites for free. And there is nothing better than being able to show your friends what you have built through a live URL

Additional Frontend

First off Congratulations, not a lot of people reach here. They quit before getting to the good part, the part where I fell in love with web development. The part where we finally start to see the output of the hard work that we've been doing.

This is the part where you'll get the skills that will get you an internship with good pay or good enough pay (depending on the quality of projects that you have).

In this section, I'll be telling you about CSS frameworks, JavaScript front-end frameworks and then finally SSR (Server Side Rendering). And if you choose to not learn the backend just yet I'll also tell you how you can build a full-stack application without the overhead of learning the backend (spoiler alert: Firebase)

JavaScript Front-End Frameworks

JavaScript Frameworks 😆 this sure is a very interesting topic to write about. But we'll first go over why we need them anyway, what purpose they serve, what are the most popular ones and then finally the none that I'll recommend and then where can you learn them from.

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

[ From MDN Web Docs ]

So, when we use basic HTML, CSS, and JavaScript to build our application, there is a limit on how complex a website can be, and real-time updates aren't great either. As the application grows larger and larger, it gets harder and harder to understand the whole flow of the project.

In the past there was a threshold of how complex a front-end can be, so most of the work was done using the back-end which served static HTML, CSS, and JavaScript files to the client, but now as the client's machines are getting better, Client Side frameworks have taken over the world.

They are easier to scale, making complex DOM manipulations easier than ever. I mean just go and look the FaceBook's homepage. There is so much going on there, imagine building that with plain JS and HTML, and CSS. No, go there and actually start designing the front-end yourself (on paper obv)

Now that we know why front-end frameworks exist, we can move forward and see what are the available options to learn.

There are a huge number of front-end frameworks and new ones popping basically every month it seems. Maybe even every week, to what to learn and what not to learn? The answer is a bit complicated, let's first narrow down our list to the top 3

Top 3 front-end JavaScript Frameworks

vue.js [188k GH Stars]
react.js [175k GH Stars]
angular.js [55k GH Stars]

Each of the above frameworks is great, Vue is the most loved, React is the most widely used and Angular is the most hated 😆

My recommendation out of the above bunchy is React.js the reason being, that it is very fun to write, the opportunities for React Developers are huge, and the knowledge of React can be then transferred to Cross Platform: React Native which can be used to build mobile apps for both IOS and Android.

I love ❤️ React.js (it is not a framework tho, though it is a library ping me on Twitter if you wanna discuss this)

Resource to learn React.js

Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)

This is by far the best React course there is, it's only ₹500 or $10,
My friend learned from this and landed an internship in the first year and It is recommended by everyone that has watched it.

There is no alternative to this course, so I would highly recommend that you buy this course and complete it, and follow all the instructions the instructor gives you. I am sure that you'll understand all the concepts very clearly.

And by the end of the course, you will be in a position to build your own full-stack project (using Firebase) or apply to internships directly, that's how good this course is.

Some Good Stuff on YouTube

CSS Frameworks

If you have followed this guide religiously, I recommended the best CSS course that I could find (FreeCodeCamp Interactive CSS Course) and you have completed it (at least I hope) but the problem with plain CSS is that it is not scalable what I mean by that is, as the project grows larger and larger the maintainability of CSS decreases rapidly.

Styles are overriding each other, new styles are making the old styles go nuts, the new guy just used !important everywhere and, now everyone is holding their re-iterating their life choices. It is a disaster.

Though many great developers have come up with various systems to fix all these issues (symantic class names for example), plain CSS is still a disaster, especially for someone who hasn't worked on large scale projects.

“Best practices” don’t actually work.

I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.

Adam Wathan (Creator of Tailwind CSS)

And this is where CSS Frameworks come in, to solve all the issues I mentioned above, some do the job really well that I think why does CSS even exist, and some suck so bad that I start loving plain CSS. So, what is my recommendation you may ask, well it is Tailwind CSS duh.

You can try using bootstrap , bulma or skeleton but once you get your hands on experience using Tailwind CSS I don't think you would even think of switching tailwind out for your next project (I certainly don't), that's how good it is.

You don't need to go through an entire course to learn tailwind, since you already know CSS you can just google how to do a certain CSS thing in tailwind as you go along with your project.

Learning Resources

SSR (Server Side Rendering)

Damn, this has been a very long write-up, but we're finally approaching the end so phew 😌.

What is Server Side Rendering?

Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client. Search engines can crawl and index content prior to delivery, which is beneficial for Search Engine Optimization purposes.

Popular examples of server-side rendering JavaScript frameworks include Angular server side rendering, ejs server side rendering, server-side rendering Express, Gatsby server side rendering, Google server-side rendering, NestJS server side rendering, Next server side rendering, Nuxt server side rendering, React server-side rendering, and Vue server side rendering.

Advantages of SSR

A server-side rendered application enables pages to load faster, improving the user experience.
When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.
Webpages are correctly indexed because web browsers prioritize web pages with faster load times.
Rendering server-side helps efficiently load webpages for users with a slow internet connections or outdated devices.

What is Static Site Generation?

A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.

Static site generators are an alternative to content management systems (CMS) — another type of tool for managing web content, generating webpages, and implementing templates. (A template is a reusable format for web content; developers use templates to avoid writing the same formatting over and over.) Static site generators are typically part of a JAMstack web development approach.

Why Next.js?

Next.js is a React Framework. A React Framework? that doesn't make sense, the framework of a framework? Well, React is not a framework, it is the library. What this means is that React doesn't force you to use it in a certain way. You can use React for a single div in an application built with plain HTML, CSS, and JavaScript.

Next.js however is an opinionated set of tools, which allows the developer to build applications in a certain way. Let me tell you this, It is the best thing that has happened to React to build Production Applications.

Some of the amazing features of Next.js

Automatic Routing (Frontend as well as API Routing)
Code Splitting
Server Side Rendering and Static Site Generation
Image Optimisation and SEO (The <Head/> element)

Resources to learn

Next.js themselves has provided us with amazing documentation and code-along tutorials, so there is no need to wander around the internet to learn Next.js

Official Start Learning
Official Documentation

We're finally done 🔥

Congratulation to all those who have read this blog post till here, and best of luck for completing all this and building cool projects, and getting an awesome internship.

Do let me know if you do see improvements, or want to ask for some advice or anything at all. Twitter is the best place to do this.
Do give me a follow while you're at it 😅.

What is next after this guide? I will be following up with Part: 2 of this blog post which will have a detailed guide explaining back-end development. After which or before this, I will post about what is the optimal way to come up with new project ideas and actually finish them till deployment (and avoiding Tutorial Hell 👿)

I am also working on React, and Next.js tutorials, and will also post about how you can actually apply for internships. Stay tuned for that.

Thank you all for staying this far 🙂.

Cryptography in Node.js

Rose Kamal Love — Thu, 12 May 2022 05:50:28 +0000

This article was originally posted on my personal blog

Link to original Video

The mysterious discipline of cryptography is the backbone of the internet. Without it,
there would be no secrets and no privacy in the digital world. As a developer, you don’t
need to understand the math that goes into cryptography, but it’s absolutely essential to
know key concepts like hashes, salt, keypairs, encryption, and signing.

The follow tutorial explains essential cryptography concepts and implements then with the builtin Node.js crypto module

1. Hash

The word hash actually has culinary roots. It means to chop and mix and that perfectly describes what a
hashing function does. It takes an input value of any length and outputs a fixed length value. Hashing algorithms,
like SHA (Secure Hashing Algorithm), produce a random, unique, fixed-length string from a given input. They are
often used to compare two values, like passwords, for equality.

The same input will always produce the same output.
Fast to compute, but computationally expensive to find the original input
Small probability of collision (unique)

Hello World -> {Hashing Function} => jibbrish(hashed stuff)

Implementation:

const { createHash } = require('crypto')

// Create a string hash

function hash(str) {
  return createHash('sha256').update(str).digest('hex')
}

// Compare two hashed passwords

let password = 'hi-mom!'
const hash1 = hash(password)
console.log(hash1)

// ... some time later

password = 'hi-mom'
const hash2 = hash(password)
const match = hash1 === hash2

console.log(match ? 'good password' : 'password does not match')

2. Salt

Hashes are great for making passwords unreadable, but because they always produce the same output,
they are not very secure. A salt is a random string that is added to the input before hashing.
This makes the hash more unique and harder to guess.

Users often to use weak passwords, like “password123”. When a database is compromised, the attacker can easily find the value
of an unsalted hash by searching precomputed rainbow table of common hashes - salting fixes this.

Used to make a hash harder to guess
Appends a random string to the input before hashing

Hello World --(+random salt)--> {Hashing Function} => jibbrish(salted hashed stuff)

Implementation

const { scryptSync, randomBytes, timingSafeEqual } = require('crypto')

function signup(email, password) {
  const salt = randomBytes(16).toString('hex')
  const hashedPassword = scryptSync(password, salt, 64).toString('hex')

  const user = { email, password: `${salt}:${hashedPassword}` }

  users.push(user)

  return user
}

function login(email, password) {
  const user = users.find(v => v.email === email)

  const [salt, key] = user.password.split(':')
  const hashedBuffer = scryptSync(password, salt, 64)

  const keyBuffer = Buffer.from(key, 'hex')
  const match = timingSafeEqual(hashedBuffer, keyBuffer)

  return match ? 'login success' : 'login fail'
}

const users = []

const user = signup('foo@bar.com', 'pa$$word')

console.log(user)

const result = login('foo@bar.com', 'password')

console.log(result)

3. HMAC

HMAC is a keyed hash of data - like a hash with a password.
To create a HMAC you need to have the key, therefore allowing you to verify both the authenticity and
originator of the data. Using a different key produces a different output.

Think of HMAC as a hash with a password or key
Only someone with the key can create an authentic hash

Hello World  --> {Hashing Function} => jibbrish(hashed stuff)
               |                    |
               |____ Shared Key ____|

Implementation:

const { createHmac } = require('crypto')

const password = 'super-secret!'
const message = '🎃 hello jack'

const hmac = createHmac('sha256', password).update(message).digest('hex')

console.log(hmac)

4. Symmetric Encryption

Encryption is the process making a message confidential (like a hash),
while allowing it to be reversable (decrypted) with the proper key. Each time a message
is encrypted it is randomized to produce a different output. In symmetric encryption, the same key
is used to encrypt and decrypt the message.

The same input will produce a different output, unlike hashes
Encrypted message can be reversed with the key
Same key used to encrypt and decrypt message

Hello World  --encrypt--> {jibbrish} --decrypt--> Hello World
                 |                        |
                 |______ Shared Key ______|

Implementation:
Perform symmetric encryption in Node by creating a cipher. Encryption also has an initialization
vector (IV) to randomize the pattern so a sequence of text won’t produce the same output as a previous sequence.

const { createCipheriv, randomBytes, createDecipheriv } = require('crypto')

/// Cipher

const message = 'i like turtles'
const key = randomBytes(32)
const iv = randomBytes(16)

const cipher = createCipheriv('aes256', key, iv)

/// Encrypt

const encryptedMessage =
  cipher.update(message, 'utf8', 'hex') + cipher.final('hex')
console.log(`Encrypted: ${encryptedMessage}`)

/// Decrypt

const decipher = createDecipheriv('aes256', key, iv)
const decryptedMessage =
  decipher.update(encryptedMessage, 'hex', 'utf-8') + decipher.final('utf8')
console.log(`Deciphered: ${decryptedMessage.toString('utf-8')}`)

5. KeyPairs

Using a shared key works for encryption works, but the problem is that both parties must agree upon the key.
This is problematic in the real world because it’s not practical or secure to share across a network. The
solution is to use an algoritm like RSA that generates a keypair containing a public and private key.
As their names indicate, the private key should be kept secret, while the public key can be shared freely.

Public Key <---- Mathematically Linked ----> Private Key

Implementation:

const { generateKeyPairSync } = require('crypto')

const { privateKey, publicKey } = generateKeyPairSync('rsa', {
  modulusLength: 2048, // the length of your key in bits
  publicKeyEncoding: {
    type: 'spki', // recommended to be 'spki' by the Node.js docs
    format: 'pem'
  },
  privateKeyEncoding: {
    type: 'pkcs8', // recommended to be 'pkcs8' by the Node.js docs
    format: 'pem'
  }
})

console.log(publicKey)
console.log(privateKey)

6. Asymetric Encryption

Asymmetric encryption depends on two keys. Encrypt a message with the public key and decrypt it with the private key.

Asymmetric encryption is used on the web whenever you use HTTPS to establish an encrypted connection to that website.
The browser finds the public key of an SSL certificate installed on the website, which is used to encrypt any data
you send, then the private key decrypts it.

Hello World  --encrypt--> {jibbrish} --decrypt--> Hello World
                 |                        |
                 |                        |
              Public Key              Private Key

Implementation:

const { publicEncrypt, privateDecrypt } = require('crypto')
const { publicKey, privateKey } = require('./keypair')

const encryptedData = publicEncrypt(publicKey, Buffer.from(secretMessage))

console.log(encryptedData.toString('hex'))

const decryptedData = privateDecrypt(privateKey, encryptedData)

console.log(decryptedData.toString('utf-8'))

Java and MySQL

Rose Kamal Love — Tue, 10 May 2022 04:47:01 +0000

This article was originally posted on my personal blog

Java DataBase Connectivity (JDBC)

What is JDBC ?

Java Database Connectivity is tool or an application programming interface
(API) that establishes a connection between a standard Database (say MYSQL) and a Java Application that intends
to use that database.

Need for JDBC ?

Before JDBC, ODBC API was the database API to connect and execute the query with the database. But, ODBC API uses ODBC driver which is written in C language (i.e. platform dependent and unsecured). That is why Java has defined its own API (JDBC API) that uses JDBC drivers (written in Java language)

We can use JDBC API to handle database using Java program and can perform the following activities:

Connect to the DataBase
Execute Queries and update statements to the database
Retrieve the result receive from the database

So, we can make an analogy of JDBC as the API which will allow us to create our own MySQL workbench of sorts, or more realistically allow us to create the controller for the database in our application. (if we are building a MVC application)

Wait wait, what the hell is an API anyway ?

API (Application programming interface) is a document that contains a description of all the features of a product or software. It represents classes and interfaces that software programs can follow to communicate with each other. An API can be created for applications, libraries, operating systems, etc.

Let's perform a thought experiment, we went to restaurant and ordered some food the food here is the data that we want in programming terms now we ask the waiter to take our order and deliver a message to the kitchen the backend of an application. Tha backend does it's magic and get back out food or the data.

Here, the waiter is the API.

Now that we have a basic understand of what JDBC is let's move forward but before we can start coding there a few things that we need to know.

Data Types in JDBC

SQL	Java
VARCHAR	java.lang.String
CHAR	java.sql.String
BIT	boolean
NUMERIC	java.math.BigDecimal
INTEGER	int
REAL	float
FLOAT	float
DOUBLE	double

More Data Types

BINARY	byte[]
DATE	java.sql.Date
TIMESTAMP	java.sql.Timestamp
ARRAY	java.sql.Array
REF	java.sql.Ref
STRUCT	java.sql.Struct
BIGINT	long
CLOB	java.sql.Clob
BLOB	java.sql.Blob

JDBC Architecture

Setting up the Dev Environment

Setting up Java Environment

Download the Latest SDK
Set Java_Home
Set Java Path

Setting up MySQL Environment

Download the Latest MySQL Workbench
Extract the file
Run the setup file

Note:
You can use whichever Database application that you like as long as it is a SQL database

Steps to Connect JDBC

Importing Packages This procedure is followed to make sure the relevant packages are readily available for the API
Load and Register Drivers The imported drivers need to be loaded and registered for establishing a connection between application and database
Connecting Database After the first two steps, the next stage is to connect the data base. This can be done by getConnection()
Writing the Queries Here, we write in the SQL Command or Query that we need to execute
Executing the Queries Now the query from the API is executed using executeQuery()
Processing Request After the above five request, the system basically does two things:
- Process Output Value
- Retrieve Values
Closing Statement The resultSet and statement need to be closed explicitly.
Closing Connections The last stage is to ourselves or the API from the Database

Let's Start Coding then 😃

Getting our Database Ready

First we need to launch MySQL, which we can do by launching the MySQL workbench or through the terminal for the sake of simplicity of this tutorial we are gonna be using the terminal
Now that MySQL is running, we can create a database named university by typing in the command CREATE DATABASE university;, and then to check whether the database is running or not we can execute SHOW DATABASES; this is my output, notice the university database.

mysql> show databases;
+--------------------+
| Database |
+--------------------+
| information_schema |
| University |
| customerdb |
| mysql |
| openmrs |
| performance_schema |
| sys |
+--------------------+
7 rows in set (0.02 sec)
mysql>

Next we will create a table named engineeringStudents with {id, department, first_name, last_name, passout_year, uni_rank} by executing the following command:

CREATE TABLE `customerdb`.`EngineeringStudents` (
`student_id` INT NOT NULL,
`department` VARCHAR(45) NOT NULL,
`first_name` VARCHAR(45) NOT NULL,
`last_name` VARCHAR(45) NOT NULL,
`passout_year` INT NOT NULL,
`university_rank` INT NOT NULL,
PRIMARY KEY (`student_id`),
UNIQUE INDEX `student_id_UNIQUE` (`student_id` ASC));

Now the last step to make our Database ready is to insert some data into it, which we will be doing by the following commands

insert into engineeringstudents
   value(10201, 'CSE', 'Kiran', 'Acharya', 2018, 1272);
insert into engineeringstudents
   value(10202, 'ME', 'Jayson', 'Robert', 2020, 1249);
insert into engineeringstudents
   value(10203, 'CSE', 'Praveen', 'Kumar', 2017, 1238);
insert into engineeringstudents
   value(10204, 'ECE', 'Rajesh', 'Kumar', 2019, 1243);
insert into engineeringstudents
   value(10205, 'CSE', 'Trevor', 'Krugar', 2018, 1000);
insert into engineeringstudents
   value(10206, 'CSE', 'Jogn', 'Denver', 2018, 1);
insert into engineeringstudents
   value(10207, 'ECE', 'Jennifer', 'Charles', 2019, 13232);

The Java Module 🥲

Creating the Module

You can use any IDE/Text Editor that you want, although I would recommend you download and install IntelliJ IDEA CE
Launch the IDE
Next, create a Java Project (Not a Maven or Gradle etc)
I am going to call it jdbc-intro
And then create a JDBC directory with a JDBC.java class in it, the directory structure should look like this:

|-- jdbc-intro
    |-- lib
    |-- src
        |-- JDBC
            |-- JDBC.java

Creating a basic SQL query in Java

Now, we would start writing the code in the src/JDBC/JDBC.java file:

package JDBC;

import java.sql.*;

public class JDBC {
    public static void main(String args[]) throws SQLException {
        String url = "jdbc:mysql://localhost:3306/customerdb";
        String uname = "root";
        String password = "password";
        String query = "select * from engineeringstudents";
    }
}

This code is pretty self explanatory, except for the import java.sql.*; line.
This is the line that provides us all of the function that are present in the JDBC Library/API
But we haven't added JDBC to our project, which we are going to using a JAR
- First we will download the Jar file for JDBC from this link
- Next, to add this JAR file to our project we can follow this article on GFG
Checking if our package is imported correctly by using the try and catch block which find the package className

package JDBC;

import java.sql.*;

public class JDBC {
    public static void main(String args[]) throws SQLException {
        String url = "jdbc:mysql://localhost:3306/customerdb";
        String uname = "root";
        String password = "password";
        String query = "select * from engineeringstudents";

        // Checking if the package is present
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
}

Connecting to the Database and printing the result to the console

To create a connection to the database we use the Connection class present in the JDBC Driver and pass the url, uname and password to the getConnection() method in the DriverManager
Then to convert our query String into a JDBC Statement we are going to use the Statement class and createStatement() method

Connection con = DriverManager.getConnection(url, uname, password );
Statement statement = con.createStatement();

Now that we have created a Query Statement, it need to be executed and result stored in a variable, which will be of the the type ResultSet which is also provided by the JDBC Driver
The statement is to be executed using the executeQuery() method by providing it the query as a parameter

ResultSet result = statement.executeQuery(query);

Now, the only thing remaining is to print the result obtained to the console.
while(result.next()) this part is pretty self explanatory, until the next result is null
- We will will iterate over all the 6 properties: {id, department, first_name, last_name, passout_year, uni_rank} which can be accessed by the result.getString(index) method by passing the index to it.
- Then we will concatenate this result into a temporary variable.
- When the iteration is completed (no more properties of index: i remains) we can print this temporary variable

while(result.next()) {
      String UniversityData =  "";
      for(int i=1; i <= 6; i++) {
         UniversityData += result.getString(i) + ":";
      }
      System.out.println(UniversityData);
}

Final Code

package JDBC;

import java.sql.*;

public class JDBC {
    public static void main(String args[]) throws SQLException {
        String url = "jdbc:mysql://localhost:3306/customerdb";
        String uname = "root";
        String password = System.getenv("SQLPassword");
        String query = "select * from engineeringstudents";

        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

        try {
            Connection con = DriverManager.getConnection(url, uname, password );
            Statement statement = con.createStatement();

            ResultSet result = statement.executeQuery(query);

            while(result.next()) {
                String UniversityData =  "";
                for(int i=1; i &lt;= 6; i++) {
                    UniversityData += result.getString(i) + ":";
                }
                System.out.println(UniversityData);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}