DEV Community: Darshan-Bajeja

Cricket Score Display App: #1 Intro and the server

Darshan-Bajeja — Thu, 24 Mar 2022 17:45:33 +0000

A blog post after a long time!

Being Indians, me and my friends love playing cricket in our streets and colonies. I would invest 2 hours daily playing cricket with my friends in the evening. And why do I call that an investment? Because that's the only time where I do some physical stuff to keep myself fit as a developer!

Recently we as friends have decided to play tournaments. Each one of us would choose a team, select few players from that team for the tournament, usually 5, and then play for our team.

We wanted to log the data of tournaments so if we want to refer it in future we can do that. Or even when tournament is going on, we need to see points and total runs and stuff like that to know who plays the semi finals and the final match. So I took this as an opportunity to learn a new tech. I told them that I would build a PWA, where we can add players, make their teams, create tournaments and add matches and squads to those tournaments. We would also be able to see results of matches and points table and some similar stuff.

So in this series I would like to document my journey building this PWA.
But have I done anything till now? Yes. I have kind of planned in my mind what I would like to do in this app, and have chosen the techonologies that I would like to use. I chose to use Firebase for the backend, and React Ionic for the frontend. This is going to be my first app built with Ionic. Also I wanted to learn firebase by building this app. I have built few apps with firebase but never did it myself, I have only taken few tutorials on firebase.
But even though I want to learn firebase by building this PWA, I don't want to dedicate much time or money in this, because this is something which I and only 5 of my friends will be using. But how do I make sure that only we can add data to the app? What if someone else, who lands on my website tries to do something fishy? There are two ways to do that:
1) Using security rules for database
2) Adding a master password that only me and my friends know
But I am not planning to add authentication to the app, so there's no using of security rules as well. Now for option 2, I would have to use cloud functions in firebase, but it is a paid feature as of now. And as I mentioned before, I don't want to pay for anything for this app.

So I have done something for that already. I have set up a very simple express js server, with only 1 post route that checks for the master password, which I will request everytime I try to add or edit something.

I have already deployed it to Heroku (as I told you I don't want to pay anything for this).

Also this is my second app where I am using gitlab for VCS. Otherwise mostly I use Github only.

I have also setup a firebase project and generated the ionic project.

So that's what I have done till now. Next I am planning to document and plan my database and some other stuff because the database structure will be a bit complex. Therefore, I can code easily. There's no meaning of designing a mockup or wireframe because I will be directly using components from Ionic.

So as I am done with the documentation, I will be back with another post.

Thank you for reading this post and hope you will enjoy my journey of building this app!

Python Doesn't Care About The Extension!

Darshan-Bajeja — Thu, 09 Dec 2021 16:36:17 +0000

Once upon a time (don't go away, this isn't a story!), I wrote a python script to generate random phone numbers to as mock data for testing my express API (Yes Python helping JS!). I thought that it was a very simple script, so why not write it out in notepad instead of something like VS Code or PyCharm. So I wrote it down, and by mistake I saved it as text file and not python file (main.txt), and I even ran it. So as a dev, very quickly I opened up Powershell, just wrote cd Des, hit tab and enter. Then just wrote python m, and a quick tab and enter and to my surprise I got an error. Now you might say that, ok you ran a text file with python, what else do you expect except an error. But guys, the error wasn't that, the error was related to a bug in my script! And as I mentioned, I just typed python m and hit tab, it showed python main.txt, and I was surprised with that. Python running a text file!

Then I thought Programming languages just see the text in the file and don't care about the extension. So I tried a similar program in Java, and it didn't work... So I thought may be its just with Python. Now I didn't try it out with other languages, but I am sure that Python doesn't care about your file extension. I tried the same with .mp3 file as well and it worked!!!

So let's try it now:

Open up the simplest text editor possible on your machine, that is Notepad on Windows, TextEdit on MacOS, or Gedit, Mousepad, or Text Editor on Linux.
Write any python code inside it. I will write the code to take a number as input and print out its square.

Now let's save this file, but give any other extension except .py or .pyc as they are for Python specifically. I will give it the extension of sqlite3. (Yooo!)

Finally use any CLI to run the code...

And it works....

Now I don't have a good conclusion for this post, but I know you enjoyed the content, and liked the fun fact...!!

And yes, if any of you pythonistas know the reason for this, please put down in comments below!

LERN GQL WITH ME: Schema Definition Language

Darshan-Bajeja — Sun, 31 Oct 2021 16:32:05 +0000

(Examples taken from howtographql)

Welcome to the second part of Learn GraphQL With Me. In this post we will be learning about some core concepts related to GraphQL. These concepts are language independent, so it means that you do not need to know any particular language to understand these, as these are GraphQL specific, and once understood can be implemented in any language.

One thing to keep in mind here is that as GraphQL is different from REST and SOAP, you need to try to understand this little differently as GraphQL has its own specific concepts, which are independent of any other type of API.

So let's finally begin learning GraphQL.

Schema Definition Language (SDL)

GraphQL has its own type system for defining schemas, like we do for modelling the database tables (for SQL) and documents (for NoSQL). This is called the SDL or the Schema Definition Language.

So this is how you define schemas or types in GraphQL:

type Person {
    name: String!
    age: Int!
}

Notice how we have ! after the data types String and Int. This tells that 'name' and 'age' are compulsory. If we just wrote name as name: String, this would have meant that it is not compulsory that Person has a name.

Let's also add a Post type to our schema:

type Post {
    title: String!
}

Now what if we want to have relations between the Post and the Person type. We can now use Person and Post as a data type, like we use String, Int. So let's define an author field, which is of type Person.

type Post {
    title: String!
    author: Person!
}

This tells that a Post will have an author who will be a Person. But we also want to say that a Person can write many posts, so how do we do that. Let's add a posts field to Person type which will be an array of type Post.

type Person {
    name: String!
    age: Int!
    posts: [Post!]!
}

Notice how we have ! after Post as well as after ], this tells that the array is compulsory as well as there has to be some data of type Post inside it.

LEARN GQL WITH ME: Introduction to GQL and The Series

Darshan-Bajeja — Thu, 28 Oct 2021 15:58:38 +0000

So I have been building REST APIs for quite some time now. And I actually kind of like them, because when you build several REST APIs, then you find it very interesting and you keep on discovering many things. The people who have built REST APIs will understand what I am trying to express here.

But since a long time I have been hearing about this new guy (at least new for me, actually its quite oldish) called GraphQL. They say that it can build the most efficient APIs. No API, including REST and SOAP APIs, are as good and efficient as GraphQL, because unlike REST, GraphQL has a single endpoint and gives you a flexible approach of fetching data from the server as a client. Just ask for what you need. Its like the objective type question that a client asks a server, the specific word or the specific data, and the server answers in exact number of words, or exact amount of data it was asked to give.

If you don't get any of it, don't worry. In this series, I am going to be learning GraphQL myself, and whenever I think that okay, I have reached a checkpoint, or learnt enough about a topic in GraphQL or in short gql, that I can explain someone, then I will write a post here, teaching you whatever I learnt last. So this series is called LEARN GRAPHQL WITH ME! Where you literally 'learn graphql with me'....

One thing to make clear, that GraphQL is in a way like REST, that it is a specification and not a module, package or library or framework, no! Its a specification. You can build REST APIs in many languages: JavaScript, Python, Java, C++, Go, PHP, Ruby, etc. Same way, GraphQL is also kind of API, and you can build it with any language. Right now there is no package for building GraphQL APIs in all languages, but in most of the major languages a package or module exists with which you can build GraphQL APIs. In this series, I am going to be learning using JavaScript, and then I even might migrate to TypeScript by the end of this series. But if you have been using a language, which currently does not have a package to implement GraphQL APIs, you have 2 options:

Learn a new programming language
Learn concepts of GraphQL, and be the first developer among the ones who use the same language as you do to build a package yourself, so that other people can use it (as well as you can use it) to build GraphQL APIs!

Alright so let's meet in the next post, where we will learn something new in GraphQL. And by the way, what I am going to use as a resource to learn GraphQL is called howtographql, developed by the devs at prisma.

howtographql / howtographql

The Fullstack Tutorial for GraphQL

How to GraphQL 🎓

How to GraphQL is a fullstack tutorial website to learn all about GraphQL! It was built by Prisma and many amazing contributors. All content on the site is completely free and open-source.

Note: This repository is currently mostly unmaintained. We are looking for maintainers who can help cleaning up issues and PRs opened by the community. If you are interested in helping out, please reach out!

Content

The content for all tutorials is located in the /content directory. Here is an overview of all the tutorials that are available at the moment:

GraphQL

Fundamentals of GraphQL
Advanced GraphQL

Frontend

React & Apollo
React & Relay (Out of date)
Vue & Apollo (Out of date)
Ember & Apollo (Out of date)

Backend

javascript-apollo / JavaScript & Apollo
typescript-apollo / Typescript & Apollo
typescript-helix / Typescript & Helix
graphql-elixir / Absinthe & Elixir
graphql-ruby / Ruby…

View on GitHub

Coding Challenge #0

Darshan-Bajeja — Sun, 24 Oct 2021 17:35:36 +0000

In these challenges I ask you a question which you answer and I give shoutouts to correct answers. This is the first challenge, but for us devs it is 0th.

Rules and Instructions

You need to solve the question within 24 hours of posting. However you can try it out even if you are late, just that you wouldn't get a shoutout here, but you will improve your knowledge.
You can use any technology or programming language you like, but need to write code, no website/app builders allowed.
Please try to submit a github or any other vcs hub repo instead of embedding code here.
To get the shoutout your answer should be correct and submitted within 24 hours of publishing of this post.

Task(Difficulty: Easy)

Write some code (Use classes, structs, interface or functions) to create models for a course based application in which a user can be a student or instructor or admin. Courses should have a thumbnail image, video lessons with descriptions divided into sections, and also price. You can add as many features as you like but these features are minimum.

All the best...

Shoutouts

Shoutouts will come here

Halfmoon: The forgotten CSS Framework

Darshan-Bajeja — Sat, 23 Oct 2021 13:51:15 +0000

In this post you will learn about a very beautiful CSS framework, halfmoon css that you will rarely see someone using but is perfect for any person who wants to use a CSS framework.

We often see people talking about bootstrap, Tailwind CSS or Bulma CSS when it comes to CSS frameworks. Once I wanted to use some css framework for one of my projects, and I tried to find some new ones, and in a blog post I saw the mention of halfmoon css, I just saw it and I was really surprised, like such a beautiful framework and no one talks about, no one uses it, or only few use it, but you rarely hear or read about it!

What I like about it is that having dark mode, a very difficult task for people who are not very good at front end, but want to develop a full stack app with a good front end having both light and dark modes! It is very easy to learn as well because its look and css classes are highly inspired from bootstrap. Its documentation as well is very easy to understand, so let's now go ahead and try to create a simple tip counter app in pure html and javascript, with a dark mode.

Building the tip calculator

Full source code for this app available on Github:

Darshan-Bajeja / halfmoon-tip-calculator

A tip calculator using the halfmoon css framework for the design

Halfmoon CSS Tip Calculator

This is a tip caluclator made in pure html and javascript and uses the halfmoon css framework for the UI. This was built for a blog post on dev.to, demonstrating the halfmoon css framework.
Link to the post: https://dev.to/darshanbajeja/halfmoon-the-forgotten-css-framework-4g44

View on GitHub

Firstly let's create an empty directory for the project, and create 2 files inside it- index.html and script.js:

Let's open it up in any code editor, and as most of you would have guessed, I am going to open it up in VS Code.

Using emmet, let's add the html boiler plate code, and then link the javascript file to the html file. Also replace the title to Tip Calculator:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tip Calculator</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

Now let's add an h1 tag just for testing purpose- which says our dear old Hello, World!:

<h1>Hello World</h1>

And then open the html file in a browser. I am using Live Server extension to get hot reload.

You would see and old school hello world there:

Now let's visit half moon css website and move to the docs page. Click on 'Download' link on the sidebar, and scroll down to cdn section. Copy the link tag and paste in the head section and add script tag above the script tag which we added before. Now your code should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tip Calculator</title>
    <!-- Halfmoon CSS  -->
    <link
      href="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/css/halfmoon-variables.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <h1>Hello World</h1>

    <!-- Halfmoon JS  -->
    <script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

Ok so now in the browser you can see the difference in font in the html page.

Ok so let's start making our tip calculator. Now I want everything to be in center, so let's create a div, which will be placed in the center of our web page, and give it the following classes:

h-half (For giving a half height, that is 50%)
w-half (For giving a half width, that is 50%)
border (For giving it a border)
rounded (For giving it border-radius)
shadow-lg (For giving it a shadow of large size)

If you have experience with bootstrap, you can see that these classes are very similar to it.

Now to center this div, wrap it inside another div, with classes:

h-full (To give 100% height)
w-full (To give 100% width)
d-flex (To give a display: flex; property)
flex-column (To give a flex direction of cloumn)
justify-content-center (To justify the content center vertically (note that flex column makes the justify-content and align-items opposite))
align-items-center (To align the items center horizontally)

So now you will have this code:

<div
      class="
        h-full
        w-full
        d-flex
        flex-column
        justify-content-center
        align-items-center
      "
    >
      <div class="h-half w-half border rounded shadow-lg"></div>
    </div>

(Please ignore the formatting done by prettier)

and the output would be like this:

Now let's give a header to our centered div. So create another div element with an h1, and a button with the text- toggle dark mode.

To make this beautiful let's add some halfmoon classes.

DIV:

d-flex
justify-content-around
align-items-center

H1

font-weight-bolder

BUTTON

btn
btn-primary

This will give us a beautiful header with a blue button.

Now let's have another div below the header div, with classes d-flex, flex-column, h-three-quarter (for 75% height), align-items-center, justify-content-around, and add 2 input boxes, with type number, with placeholders total bill amount and tip percentage, and ids bill and percentage and a paragraph tag with the text: Tip amount is 0 and put the number '0' in a span with id of tip-amount.

Next, to give it a good style let's add some classes. To the input boxes give the classes of form-control, form-control-lg and w-three-quarter. You pretty much now understand how the class names work in halfmoon. Also add the classes: font-size-24 and font-weight-semi-bold to the paragraph tag to make it look good. Now finally your code inside the body tag should look like this (excluding the script tags):

    <div
      class="
        h-full
        w-full
        d-flex
        flex-column
        justify-content-center
        align-items-center
      "
    >
      <div class="h-half w-half border rounded shadow-lg">
        <div class="d-flex justify-content-around align-items-center">
          <h1 class="font-weight-bolder">Tip Calculator</h1>
          <button class="btn btn-primary">Toggle Dark Mode</button>
        </div>

        <div
          class="
            d-flex
            flex-column
            align-items-center
            h-three-quarter
            justify-content-around
          "
        >
          <input
            type="number"
            id="bill"
            placeholder="Bill amount"
            class="form-control form-control-lg w-three-quarter"
          />
          <input
            type="number"
            id="percentage"
            placeholder="Tip percentage"
            class="form-control form-control-lg w-three-quarter"
          />

          <p class="font-size-24 font-weight-semi-bold">
            Tip amount is <span id="tip-amount">0</span>
          </p>
        </div>
      </div>
    </div>

and the webpage should look like this:

Now we have a beautiful UI. We now have to more goals to accomplish here.

Make our calculator functional
Make the Toggle Dark Mode button to work

So let's do the first part, that is make our calculator functional,

To do that, let's go to our javascript file and grab the html elements by their ids:

const billInput = document.querySelector("#bill");
const percentageInput = document.querySelector("#percentage");
const tipSpan = document.querySelector("#tip-amount");

Next, let's create a function to calculate the tip and render it in the tip-amount span.

const calculateAndRenderTip = () => {
  const billValue = Number(billInput.value);
  const percentageValue = Number(percentageInput.value);
  const tip = (percentageValue / 100) * billValue;
  tipSpan.innerHTML = tip;
};

And let's add the change event listener to billInput and percentangeInput, and run the function.

billInput.addEventListener("change", calculateAndRenderTip);
percentageInput.addEventListener("change", calculateAndRenderTip);

So now our calculator is functional, but note that as we have mentioned input type as number, you need to use arrow keys for incrementing and decrementing the number to trigger the change event, or if you prefer to type in the number, then you need press enter key after typing in the number to trigger the change event, otherwise browser won't detect the change event just when you type.

Now the final part is to adding the darkmode toggling functionality. And in fact it is the easiest to do!

So first in the button we created for toggle darkmode, add an onclick listener for a function which you might call, suppose, toggleTheme.

<button class="btn btn-primary" onclick="toggleTheme()">
            Toggle Dark Mode
</button>

and in javascript file, let's create this function which just uses the halfmoon variable which we get from the javascript cdn of halfmoon to call the toggleDarkMode function from it, and that's all you need to do for toggling dark mode in your website, really!

const toggleTheme = () => halfmoon.toggleDarkMode();

To get the full source code of this app visit the github repository provided above the section where we started writing the code for this app.

So did you see how easy and cool is Halfmoon CSS. I hope you enjoyed using halfmoon and will use it in your future projects.

If you make a project using halfmoon css, be sure to link it down below in the comments of this post, I will have good time looking at them!