Blockchain and Security Blog Series

Reading Time: < 1 minute

This Blog Series is meant for everyone willing to grab a look underhood the Blockchain and Security system. Doesn’t matter you are a freshman or a senior, do a diligent reading and try to comprehend whatever is written.

This is especially to show a “Road not Taken” usually by the undergrads of the college. Hope this insight helps!!!

In case of any query, shoot an email to aman0902pandey(@)gmail.com

Share this Page

Day01 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part I – Day 01 Hey guys, I was just sitting an thinking to what else can be initiated in CEV, as an attempt to show my college people something “Cutting-Edge” and that can actually share with the undergrads here, to what is called as “The Road not taken!” With that I came up with a thought to start a series of micro-blogs on “Why?”…

Continue reading

Day02 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part II – Day 02 At CEV, we basically focus on creating inquisitiveness rather than teaching a lot. After all we all are an autodidact, searching for motivation and peers around to learn, to what we call as “Classrooms”. Considering that, I am adding a subpart to the list below, which will be telling about a few very “well-known” CVE registered bugs. Prerequisites a basic…

Continue reading

Day03 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part III – Day 03 As you have already seen, how critical the small bugs could be. The fatal injury they can cause to your data privacy can’t be overlooked. Creating a fault free system, is extremely tough, and this is what the world or your own startup demands from you. There has been a boom in AI startups. As simple as that, create an…

Continue reading

Day04 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part IV – Day 04 The process to create a secure system, requires the knowledge of almost every domain in periphery of the application you are making, and the conjunction of that every technology. For eg. working on a Blockchain systems requires you to have an idea about what goes on in the Distibuted networks, the data structures, the contract flow, the cryptographic key generation,…

Continue reading

Day05 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part V – Day 05 The challenges faced while creating a secure software is quite straight, and so straight are the solutions. This blog covers the very two terms to tell about how to measure the realiability of a secure system. Plus, after covering a lot of scenarios, I will try to connect the dots for you people, to be able to comprehend the further…

Continue reading

Day06 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog I – Part VI – Day 06 This blog will cover the motivation to what lead me write this blog series. I will be covering a few intriguing bugs(in the very next BLOG), which could seriously be enlightening to the people reading, and yeah, may serve the target of this blog series, of showing the people to what is called as “The road not taken” Let’s go…

Continue reading

Day07 – “Why?” & “What in?” Security & Blockchain?

Blockchain is often described as merely the technology behind the “Cryptocurrencies” and people fail to perceive the avenues it opens for the greater good of mankind. In reality, Blockchain is to cryptocurrency as to what the Internet is to email.  You never thought about applying blockchain in different domains for the upliftment of the society because you were too busy trading in Bitcoins and ether to mint money since that’s…

Continue reading

Day08 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog II – Part I – Day 08 The last blog was written by Kaushik, the Applied Physics Freshman student, beautifully covered the diverse applications of Blockchain and the challenges/risks involved with the use of the current form of Blockchain technology.. This blog will cover straight definitions and their super intuitive explanations(as far as I can make), about the FORMAL METHODS & VERIFICATIONS. What are they? and Why…

Continue reading

Day11 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog III – Part I – Day 11 Hope the blogs are going pretty well. In this very blog, divided into several micro-blogs, I’ll be explaining about the Hyperproperties. This particular thing will take you to the most obvious level of understanding the computer systems. And in this particular micro-blog, I’ll tell about hyperproperties, directly. Most of the work will be taken from the teachings of my mentor…

Continue reading

Day12 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog III – Part II – Day 12 In this blog, we’ll vaguely discuss the Hyperproperties and Information Flow thing. As continued, this blog will contain the understandings from the Teachings of Dr Pramod, from SAT SMT Winter School 2018[1]. I will try to portray my understanding from his teachings and is working with him closely on Blockchain, I suppose it earned me a proper understanding. Let us…

Continue reading

Day13 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog III – Part III – Day 13 Understanding Hyperproperties and Blockchain together. And how this could be so big! Let’s get in…. In this micro-blog Let us check this vaguely 2-trace property Hyperproperties Safety and Liveness – Another 2 very Important terms Blockchain & Hyperproperties How this could be so big? Safety and Liveness – Another 2 very Important terms As already explained, Property is a set…

Continue reading

Day14 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog IV – Part I – Day 14 Let us get some dirty hands on Solidity, to exploit some very dangerous Ethereum – Solidity bugs. 2 Bugs/vulenrabilities in this very micro-blog. Covering bugs like, Denial of Service with Block Gas Limit, where the attacker exploits the bug by taking benefit from limited GAS available for each transaction, and unchecked_send() bug, which when made by mistake, could be a…

Continue reading

Day15 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog IV – Part II – Day 15 Let us get some dirty hands on with some more Solidity code and exploit a few more Ethereum – Solidity bugs. Here we’ll discuss about the famous DAO attack, caused by the reentrancy bug. Let us do it… In this micro-blog delegatecall (the proxy calls) (SWC-112) (Inclusion of Functionality from Untrusted Control Sphere) DoS With Block Gas Limit (SWC –…

Continue reading

Day16 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog V – Part I – Day 16 Hey People, I have been a little busy for last few days. Plus it took me some time to find the correct stuff that should fir right in the series. So now, after so many micro-blogs, it is possible that you must be wondering on How an attacker can even do this? For that I’ll be giving you people an…

Continue reading

Day17 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog V – Part II – Day 17 Hey People, I have given a gist of how the EVM stores the smart contracts on its machine. In this I will directly discuss some technical things about, how deep you can dive into using just the information told about in the previoud micro-blog. Will try to give a glimpse, rest you can think of autonomously. Let’s do it… In…

Continue reading

Day18 – “Why?” & “What in?” Security & Blockchain?

Hey guys, in this Blog I will be discussing the Integration of Blockchain with IoT (Internet of Things). So, let’s proceed with what IoT actually is. What is Iot? Internet of things is an environment of connected physical devices embedded in various systems and accessible on the Internet, thus rendering these devices to become autonomous and can be controlled through their digital representation. The whole idea behind IoT is based on the…

Continue reading

Day19 – “Why?” & “What in?” Security & Blockchain?

author: aman Blog VII – Part I – Day 19 So, towards an end of this series. I was quite busy in some other blog so couldn’t write this one quickly. In this blog I’ll take up a case of a Security tool used in Ethereum Smart Contract bug discovery, ECHIDNA. I’ll try to unwrap a few things about how a security can be used to analyse a “script”, that…

Continue reading

Day20 – “Why?” & “What in?” Security & Blockchain?

author: amanBlog VIII – Part I – Day 20Hey there, Sorry for time being away. In the complete series the main focus was to get the undergrads of my college to a kind of “ROAD” that is not taken “usually”. This was something out of the world of Competitive Coding and Machine Learning. Since the Internet is Changing, and Blockchains are the one who is the Lead Changer of this…

Continue reading

 

Authors

Aman Pandey (BTech III)
Kaushik Chandra (MSc Physics I)
Gaurav Kumar (BTech I – ECE)

Let’s Torrent

Reading Time: 4 minutes

We all have witnessed this technology for downloading our favorite movie which wasn’t available elsewhere. It is one of the most impeccable techs in the world of data sharing ever thought and brought to reality by a human.

Definition               

BitTorrent is a communication protocol for peer-to-peer file sharing (P2P) which is used to distribute data and electronic files over the Internet in a decentralized manner.”

The protocol came into existence in 2001(thanks to Bram Cohen) and is an alternative to the older single source, multiple mirrors (user) sources technique for distributing data.

A Few terms

  • BitTorrent or Torrent: Well, BitTorrent is the protocol as per its definition, whereas Torrent is the initiating file which has the metadata(source) of the file. 
  • BitTorrent clients: A computer program that implements the BitTorrent Popular clients include μTorrent, Xunlei Thunder, Transmission, qBittorrent, Vuze, Deluge, BitComet, and Tixati.
  • Seed: To “seed” the file denotes to “download” the file.
  • Seeding: Uploading the file by a peer after their downloading is finished.
  • Peer: (The downloader) Peer can refer either to any client in the swarm or specifically to a downloader, a client that has only parts of the file.
  • Leecher: Similar to peer, but these guys have poor share ratio i.e. they doesn’t contribute much in uploading but only download the files.
  • Swarm: The group of peers.
  • Endgame: an applied algorithm for downloading the last pieces of any file. (Not the Taylor swift’s Endgame).
  • Distributed Hash Tables(DHTs): A decentralized distributed system. In layman language, hash tables are used to provide encryption using something similar to lock and key model.

Working

Let’s have the gist of what happens while torrenting.

The following GIF explains this smoothly.

Let’s Torrent

First, the server sends the pieces(colored dots) of the files to a few users(peers). After a successful download of a piece of the file, they are ready to act as a seeder to upload the file to other users who are in need of that file.       

As each peer receives a new piece of the file, it becomes a source (of that piece) for other peers i.e., the user becomes seeder, giving a sigh of relief to the original seed from having to send that piece to every computer or user wishing a copy.

In this way, the server load is massively reduced and the whole network is boosted as well.

Once a peer is down with downloading the complete file, it could in turn function as a seed i.e. start acting as a source of file for other peers.

Speed comparison:
Regular download vs BitTorrent Download

Download speed for BitTorrent increases with an increase in peers joining to form  the swarm. It may take time to establish connections, and for a node to receive sufficient data to become an effective uploader. This approach is particularly useful in the transfer of larger files.

Regular download starts promptly and is preferred for smaller files. Max speed is achieved promptly too.

Benefits over regular download

  • Torrent networking doesn’t depend on the server being distributed among the peers. Data is downloaded from peers which eventually become seeds.
  • Torrent files are open source and ad-free. An engrossing fact about the same is that TamilRockers use torrent to act as the Robin hood for pirated movies and songs, which is apparently an offensive act.
  • Torrent judiciously uses the upload bandwidth to speed up the network: after downloading, the peers’ upload bandwidth is used for sending the file to other peers. This reduces the load on the main server.
  • A File is broken into pieces that helps in resuming the download without any kind of data loss, which in turn makes BitTorrent certainly useful in the transfer of larger files.

Torrenting or infringing?

Using BitTorrent is legal. Though, Downloading copyrighted material isn’t. So torrenting isn’t infringing.

Most BitTorrent clients DO NOT support anonymity; the IP address of all peers is visible in the firewall program. No need to worry though, Indian govt. has clarified that streaming a pirated movie is not illegal.

Talking about the security concerns, each piece is protected by a cryptographic hash contained in the torrent descriptor. This ensures that modification of any piece can be reliably detected, and thus prevents both accidental and malicious modifications of any of the pieces received at other nodes. If a node starts with an authentic copy of the torrent descriptor, it can verify the authenticity of the entire file it receives.

Further Reading:                    

IPFS is not entirely new but is still not widely used.
Read it here on medium.

Written by Avdesh Kumar

Keep Thinking!

Keep Learning!

TEAM CEV

INTELLIGENT AUTOMATION

Reading Time: 4 minutes

– by Aastha Patel

CSE, Ist year
———–

WHAT IS INTELLIGENT AUTOMATION?

In simple words, Intelligent Automation (IA), can be defined as the unification of the two most widely-used technologies, Artificial Intelligence (AI) and Robotic Process Automation (RPA), to bring about the digital transformation and extend the automation process in the business industry.

In case you are wondering what automation is, it is the application of technology to maximize the efficiency of a process with minimum human intervention. It relies on the prescriptive instructions and the structured data inputs given by the humans. This traditional automation has been utilized by companies for a long time.

INTELLIGENT AUTOMATION
Intelligent Automation, IA = AI + RPA

 

WHAT ARE THE TECHNOLOGIES USED BY INTELLIGENT AUTOMATION?

Business Process Management (BPM) 

It ensures the efficient coordination of the people, system, and data. Its main objective is to provide a solid operational process for the business tasks that requires decision making, data generation, data exchanging, calculations, and storage from the beginning to the end.

Robotic Process Automation (RPA) 

The primary work of the RPA includes taking over repetitive tasks that have no exceptions, thereby reducing the human workload. This fast technology mainly replaces humans doing the simple work in business processes and that’s what makes it a robot. Due to this, people get more free time to focus on higher thinking skills and improve customer services.

Artificial intelligence (AI) 

I am sure most of you are aware of this technology. This has enabled us to create systems and machines that can think and self-learn just like us. It embraces many concepts like Machine Learning (ML), Natural Language Processing (NLP), Big Data, Deep Learning, etc. Machines can now decipher patterns, analyze data, perform predictive analysis, and can implement decision making from previous experiences. This is how our Netflix and Youtube recommendations work.

RPA can only handle back-end business functions, while Intelligent Automation can handle the complex front-end tasks too. Adding Intelligence and BPM to the RPA, can increase the automating of complex business tasks and contribute to the incredible workflow, thereby improving the productivity of the company. 

 

THE WORKING OF INTELLIGENT AUTOMATION

IA assists in the entire journey of automation, right from discovery to automation tasks to its optimization including all the front-end and back-end business complexities. 

Initially, it observes the work carried out by the people, analyzes and identifies the optimal workflow, and then proposes a path for automation of the business process using AI technology. 

Next, the AI tools are applied to the unstructured data including audio, video, and chat information to analyze the patterns in the data, reduce the repetitive tasks and make accurate predictions about productivity gains in the future.

Let’s take an example of emails and invoices to understand Intelligent Automation. The RPA is used for retrieving and downloading the files. On the other hand, AI is used to “read” the documents, extract the required information, and accordingly work upon it. The key advantages of using AI along with RPA, are accurate results and faster output with minimum human intervention.

In a nutshell, IA has expanded our abilities in Automation for the business process. 

 

BENEFITS OF INTELLIGENT AUTOMATION

  • Organizing Complex Data – IA stores, analyzes, manipulates, and retrieves the data from inputs and sources and runs appropriate processes on them.
  • Eliminating Errors – IA improves the accuracy of the complex tasks and with time reduces the exceptional errors caused by self-learning.
  • Reducing Operational Obstacles – It can operate on unstructured data, optimizes the human-digital workforce, and boosts up the productivity by giving consistent results.
  • Increasing Cybersecurity – Manages to address the potential threats to the security by analyzing the network of data.
  • Liberate Employees – It eliminates the repetitive tasks and hence the human concentration is shifted to thinking of innovative and creative tasks.

APPLICATIONS OF INTELLIGENT AUTOMATION

More than 80% of business firms are already using this technology. Due to this, they have observed a significant increase in their ROI (Return On Investment).

FINANCIAL SERVICES

The digital workers can handle almost all the tasks from transfers to payment processes. It can also help the customers in office reconciliation in the back-end and customer-experience in the front-end. 

HEALTHCARE SERVICES

Implementation of check-ups for surgery, record retention, post-surgery administration are some of the things that the IA is capable of, hence significantly reducing the manual processes and overhead costs.

TELECOMMUNICATION SERVICES

The IA offers great telecom services such as maintenance, installation, minimizing the downtime, and brings about customer satisfaction.

IA has succeeded in making our ideal Business Management a reality. The hybrid decisions of the human and the automation with intelligence have given a new definition to the digital transformation. It has proposed real solutions for our complex processes while simultaneously reducing our time, energy, and costs.

 

Thanks for reading, and will feel appreciated if followed by questions.

Keep reading, Keep learning.

Primer to HTML, CSS, BOOTSTRAP

Reading Time: 10 minutes

Landed here surfing through various amazing websites, wondering how they are designed?
Interested in front-end development, but just a beginner?
You are at the right place!
It’s never too late to start. So let’s get started.

1 Introduction to HTML, CSS and BOOTSTRAP

1.1 HTML

Hyper Text Markup Language was created by Tim Berners-Lee in 1991, is a markup language used for structuring and presenting content on Web.

  • Created to build the structure of the website.
  • Consists of several elements represented by tags.
  • These elements are rendered on the browsers in form of viewable content.

1.2 CSS

Cascading Style Sheets (CSS) is a simple language created to style the HTML elements.

  • Styling can be done using tag names, class names and id’s assigned to various elements in our HTML document.

Primer to HTML, CSS, BOOTSTRAP

1.3 BOOTSTRAP

Bootstrap is a very popular and useful framework of HTML, CSS and JS for creating responsive website designs.

  • It has inbuilt HTML, CSS based designs for different elements like button, divisions, images, lists, tables and many more; which can be directly used to create a responsive design very fast.

 

2 BOOTSTRAP basics

2.1 Bootstrap GRID

Bootstrap gridding system divides the page into 12 identical columns and multiple rows, which you can use to place HTML elements. More than 1 column(s) can be combined to achieve more width.
Primer to HTML, CSS, BOOTSTRAP

The gridding system consists of 4 classes:
xs – for screens less than 768px width
sm – for screens equal to or greater than 768px width
md – for screens equal to or greater than 992px width
lg – for screens equal to or greater than 1200px width

example:
<div class="row">
  <div class="col-sm-4">...</div>
  <div class="col-sm-8">...</div>
</div>
here you can verify there are two columns having a
span on 4 and 8 columns of the bootstrap grid system adding up to 12

2.2 Bootstrap classes

Contextual inbuilt classes can be used on different HTML elements to style them without having to write CSS code ourselves(you can assume that CSS is already written for the classes we are using). In this section we will discuss some important contextual classes provided by bootstrap.

  • Classes for div containers
    .container and .container-fluid are the bootstrap classes which can be assigned to a container div
    .container sets the division width less than screen width by rendering left and right margins.
    .container-fluid sets the division width= screen width.
    Primer to HTML, CSS, BOOTSTRAP
  • Classes for background color
    .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger
    background color will automatically appear for the particular element when you assign any of these classes for it.Primer to HTML, CSS, BOOTSTRAP
  • Classes for text color
    .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger
    text color will automatically appear for the particular element when you assign any of these classes for it.
  • Classes for button
    .btn,.btn-default,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-link
    button color will automatically appear for the particular button, when you assign any of these classes for it..btn-lg,
    .btn-sm,
    .btn-xs
    any of these classes when assigned to a button, resizes the button.
    Primer to HTML, CSS, BOOTSTRAP

These are some of the important classes we discussed. Bootstrap provides many more classes for many other elements. We will be using these classes and introduce other classes further.

2.3 Modifying style using CSS

After use of contextual classes that bootstrap provides, you might be feeling limited in no. of options. For example; for text coloring using class, the range of colors that bootstrap provides is very less (red(danger) ,yellow(warning) ,green(success) … etc). also, the other styling is very particular, like the button border, border-radius, font etc. The question is, do we have to work with these restrictions? This way, all the websites made using bootstrap will look identical with just changes in the content.
Primer to HTML, CSS, BOOTSTRAP
Fortunately this doesn’t happen. We can do all types of styling changes using CSS. We just have to assign a different class(not bootstrap classes) to the target element and set/update any CSS property of our choice. The CSS will be rendered on the target element.

example:
<div class="container">
<p>we are modifying CSS of a button.</p>
<button class="btn btn-lg btn-danger colorchange"></button>
</div>
<style>
.colorchange{
  background-color: #000000;
  border-radius: 20px;
}
.colorchange:hover{
  background-color: green;
  transition:0.7s;
}
</style>

 

After a brief intro to the languages and frameworks we will be using further and learning bootstrap basics, lets get our hands on and start making a beautiful static responsive website.


 

3 Let’s start building 😉

Prerequisites
  • Basics of HTML and CSS
  • Some theory about bootstrap that we discussed above

3.1 Setting up environment to start off

Directory structure will be like-

Project folder

  • index.html
  • style.css
  • assets folder (containing images to be used)

To start off, all you need is a text editor. I prefer Brackets text editor because it comes along with autocomplete feature, which saves time and I’ll be using Brackets throughout. There are several alternatives to brackets like sublime text editor, atom etc.

Another requirement to start off is Bootstrap.

  • You can download it from getbootstrap.com
  • or you can use bootstrap CDN(which I’ll be doing).
  • NOTE: If you use CDN, internet connection will be needed for bootstrap to do the rendering.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  • another font-awesome CDN is to be included in our html file. The various icons that we will include in our website(in following sections) uses this.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

you can copy these CDNs in the head tag.

Setting up
index.html to begin.

<html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="./style.css">
     <title>
       My first Bootstrap Template.
     </title>
   </head>
   <body>
   </body>
   </html>

meta tag is used for proper zooming and rendering during the first load of the page on browser. Test run index.html once. Now we have set up the environment required for making our website.
Don’t forget to link your CSS file to this in head tag.

3.2 Making different sections

The sections we will be building will be:

  • HOME
  • GALLERY
  • TEAM
  • CONTACT

Now, I’ll provide you the source code used. Notice the Bootstrap classes being used. Also watch the styling changes that I’m making in the CSS file to change the designs of the target elements. All sections here, are child elements of body tag. You can use my source code given below. Feel free to work around with your own ideas and tweaking.

HOME

This section will contain the page which first loads on user’s screen. This will contain Logo, Menu, Text in middle, Background image.

Primer to HTML, CSS, BOOTSTRAP
index.html:

<div class="container-fluid home" id="home">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">LOGO</a>
                    </div>
                    <ul class="nav navbar-nav navigation" >
                        <li><a href="#home">HOME</a></li>
                        <li><a href="#gallery">GALLERY</a></li>
                        <li><a href="#team">TEAM</a></li>
                        <li><a href="#contact">CONTACT</a></li>
                    </ul>
                </div>
            </nav>
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6">
                    <h1>QUOTE:</h1>
                    <H3>"Dreams of great dreamners are always transcended,<br><br> - A.Kalam"</H3>
                </div>
                <div class="col-sm-3"></div>
            </div>
        </div>

style.css:

.home{
    background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(https://wallup.net/wp-content/uploads/2018/09/25/607518-leaves-dark-macro-water_drops-camera-748x421.jpg);
    background-size: cover;
}
.home .row{
    margin-top: 10%;
    margin-bottom: 15%;
}
.navbar{
    margin-top: 5%;
}
.navbar ul{
    float: right;
}
.nav li{
    border-bottom: 1px solid whitesmoke;
    text-align: center;
}
.navbar-brand{
    color: white;
    border: 1px solid white;
    border-radius: 50px;
}
.nav li a:hover{
    color: black;
}
.nav li a{
    color: white;
}
.home .row h1{
    color: cadetblue;
    margin: 50px;
    margin-left: 0;
    border-bottom: 1px solid cadetblue;
}
.home .row h3{
    color: white;
    margin: 30px;
}

 

GALLERY

This section in our page will contain an image carousel with left and right swipe controls to view different images of gallery.
Primer to HTML, CSS, BOOTSTRAP

index.html

<div class="container-fluid gallery" id="gallery">
            <div class="container-fluid">
                <h1>Gallery</h1>
                <center><p>Galleries are pages which contain large numbers of media content—almost always, images—with little or no supporting
                text. Large numbers of galleries have been deleted from Wikipedia per WP:NOT. This is usually cited in this context as
                WP:NOT an image gallery, which is a paraphrase of the official policy that Wikipedia articles are not mere collections
                of photographs or media files. There are, therefore, very few gallery-articles left on Wikipedia in the main article
                namespace (see [1]). This page defines how, when, and where gallery-articles should and should not be used. It is not
                concerned with the use of the gallery feature within pages that are predominantly text-based articles</p></center>
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <center><img src="https://hrexecutive.com/wp-content/uploads/2018/10/GettyImages-869538734broken700-700x450.jpg"></center>
                        </div>
                        <div class="item">
                            <center><img src="https://kubesystems.com/wp-content/uploads/2016/05/bg-dark-3-700x450.jpg"></center>
                        </div>
                        <div class="item">
                            <center><img src=""></center>
                        </div>
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left""></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right""></span>
                    </a>
                </div>
            </div>
        </div>

style.css

/*GALLERY*/
.gallery{
    background-color: black;
}
.gallery .container-fluid{
    margin-top: 100px;
    margin-bottom: 60px;
    background-color: url(https://wallup.net/wp-content/uploads/2018/09/25/607518-leaves-dark-macro-water_drops-camera-748x421.jpg);
}
.gallery h1{
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid white;
    color: white;
    font-weight: lighter;
    text-align: center;
}
.gallery .item{
    text-align: center;
}
.gallery .item img{
    text-align: center;
}
.gallery p{
    text-align: center;
    width: 70%;
}

 

OUR TEAM

This section of our page will display 3 team members in form of cards. The cards will contain personal information about each member.
Primer to HTML, CSS, BOOTSTRAP

index.html

<div class="container-fluid team" id="team">
            <div class="container">
                <h1>Our Team</h1>
            <div class="row">
                <div class="col-sm-4">
                    <center>
                        <div class="shift s1">
                            <img src="https://biobaseddelta.com/wp-content/uploads/2018/08/person-450x340.jpeg" />
                            <h3>Member 1</h6><span>Designation</span><br><br>
                            <i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i
                                class="fa fa-instagram"></i>
                            <center>
                                <p>
                                    A team is a group of individuals (human or non-human) working together to achieve their goal.
                                    As defined by Professor Leigh Thompson of the Kellogg School of Management, "[a] team is a group of people who are
                                    interdependent with respect to information, resources, knowledge and skills and who seek to combine their efforts to
                                    achieve a common goal".[1]
                                    Team members need to learn how to help one another, help other team members realize their true potential, and create an
                                    environment that allows everyone to go beyond their limitations.[4]
                                </p>
                            </center>
                        </div>
                    </center>
                </div>
                <div class="col-sm-4">
                    <center>
                        <div class="shift s1">
                            <img src="https://biobaseddelta.com/wp-content/uploads/2018/08/person-450x340.jpeg" />
                            <h3>Member 1</h6><span>Designation</span><br><br>
                                <i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i
                                    class="fa fa-instagram"></i>
                                <center>
                                    <p>
                                        A team is a group of individuals (human or non-human) working together to achieve their goal.
                                        As defined by Professor Leigh Thompson of the Kellogg School of Management, "[a] team is a group
                                        of people who are
                                        interdependent with respect to information, resources, knowledge and skills and who seek to
                                        combine their efforts to
                                        achieve a common goal".[1]
                                        Team members need to learn how to help one another, help other team members realize their true
                                        potential, and create an
                                        environment that allows everyone to go beyond their limitations.[4]
                                    </p>
                                </center>
                        </div>
                    </center>
                </div>
                <div class="col-sm-4">
                    <center>
                        <div class="shift s1">
                            <img src="https://biobaseddelta.com/wp-content/uploads/2018/08/person-450x340.jpeg" />
                            <h3>Member 1</h6><span>Designation</span><br><br>
                                <i class="fa fa-facebook"></i><i class="fa fa-twitter"></i><i class="fa fa-google-plus"></i><i
                                    class="fa fa-instagram"></i>
                                <center>
                                    <p>
                                        A team is a group of individuals (human or non-human) working together to achieve their goal.
                                        As defined by Professor Leigh Thompson of the Kellogg School of Management, "[a] team is a group
                                        of people who are
                                        interdependent with respect to information, resources, knowledge and skills and who seek to
                                        combine their efforts to
                                        achieve a common goal".[1]
                                        Team members need to learn how to help one another, help other team members realize their true
                                        potential, and create an
                                        environment that allows everyone to go beyond their limitations.[4]
                                    </p>
                                </center>
                        </div>
                    </center>
                </div>
            </div>
        </div>
        </div>

style.css

/*TEAM*/
        .shift{
           text-align: center;
           background-color: #fff;
           padding: 30px;
           margin-top: 30px;
           margin-bottom: 50px;
           width: 100%;
           position: relative;
       }
       .shift .row{
           margin-top: 50px;
           margin-bottom: 50px;
       }
       .team h1{
           text-align: center;
           border-bottom: 1px solid black;
           margin: 30px;
       }
       .shift:hover{
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
       }
       .shift i{
           font-size: 0;
           padding: 0;
           margin-left: 5px;
           margin-right: 5px;
           border-radius: 60px;
           visibility: hidden;
       }
       .s1:hover > i{
           visibility: visible;
           font-size: 17;
           padding: 8px;
           border: 1px solid white;
           transition: 0.3s;
       }
       .team img{
           text-align: center;
           width: 50%;
           height: auto;
       }
       .team p{
           width: 90%;
       }

 

CONTACT

This section will contain a contact form (made using form tag) and other contact details. At the end of the page there is a simple footer section.
Primer to HTML, CSS, BOOTSTRAP

index.html

<div class="container-fluid contact" id="contact">
    <div class="container">
        <h1>Contact</h1>
        <div class="row">
        <div class="col-sm-6">
            <h2>Get In Touch</h2>
            <form>
                <input type="text" placeholder="Your Name" required><br>
                <input type="email" placeholder="Your eMail" required><br>
                <input type="number" placeholder="Your Contact No." required><br>
                <textarea></textarea>
                <button type="submit" class="btn btn-primary x">Send Message</button>
            </form>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-5">
            <h4>EMAIL</h4>
            [email protected]<br><br>
            <h4>PHONE</h4>
            +30 976 1382 9921<br><br>
            <h4>FAX</h4>
            +30 976 1382 9922<br><br>
            <h4>ADDRESS</h4>
            San Francisco, CA<br>
            4th Floor8 Lower<br>
            San Francisco street, M1 50F<br>
        </div>
        </div>
    </div>
</div>
<div class="container-fluid foot">
    <i class="fa fa-twitter" aria-hidden="true"></i>
    <i class="fa fa-facebook" aria-hidden="true"></i>
    <i class="fa fa-instagram" aria-hidden="true"></i>
    <i class="fa fa-linkedin" aria-hidden="true"></i><br><br>
    © 2020.<br>
    Designed by: Shreyash .K<br>
    Demo bootstrap template.
</div>

style.css

/*CONTACT*/
.contact{
    background-image: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url(https://www.pixelstalk.net/wp-content/uploads/images2/Free-Hd-Dark-Wallpapers-Images.jpg);
    background-size: cover;
}
.contact .container h1{
    color: white;
    text-align: center;
    border-bottom: 1px solid white;
}
.contact .container h2{
    color: silver;
}
.contact .container{
    margin-top: 50px;
    margin-bottom: 25px;
}
.contact form{
    background-color: silver;
    padding: 20px;
    border-radius: 10px;
}
.contact .row{
    margin-top: 50px;
}
.contact form input{
    width: 100%;
    margin: 10px;
    margin-left: 0;
    height: 25px;
}
.contact form textarea{
    width: 100%;
    height: 20%;
}
.contact form button{
    background-color: black;
    margin: 5px;
}
.contact .col-sm-5{
    color: silver;
}
.foot{
    text-align: center;
    padding: 25px;
    background-color: black;
    border-top: 1px solid white;
}
.foot i{
    color: white;
    padding: 5px;
}
.foot i:hover{
    background-color: white;
    color: black;
    transition: 0.4s;
}

 

And our first bootstrap website design is ready!
Hope you enjoyed it. You can now create more such designs using even more variety of elements and classes provided by bootstrap. Try experimenting different combinations of styling and make your design attractive to the viewer.
Thank you!
keep learning, keep growing.

YANTRIKA DIVISION,

TEAM CEV.

Squashing the Key Concepts related to Hyperledger Fabric

Reading Time: 6 minutes

Squashing the Key Concepts related to Hyperledger Fabric

Indeed you are at the right place 💖

I assume you already know about the key concepts of DLTs before you start reading this blog. If this is the case, let’s know more about Hyperledger Fabric.

What is Hyperledger Fabric and does it suits your use-case or application?

Hyperledger Fabric is a private and permissioned 🔐 DLT or a Blockchain to be precise, which comes under the umbrella of Linux Foundation.

As it is permissioned, one can not join or leave the network at any time. The members 👨 of a Hyperledger Fabric network enrol through a trusted Membership Service Provider (MSP), which we will discuss later.

The reason why it gains a mass adoption in Blockchain Marketplace is its modularity & flexibility. It allows to plug in different consensus algorithms, different database to save the data in ledger, and even allow to use different MSP to enrol users.

Hence, if you are looking for a Modular Permissioned-Blockchain Enterprise solution, Fabric can be the choice which you will definitely like.


Architectural Components of Fabric:

Like any permissioned blockchain network, Hyperledger Fabric has various actors & components like orders, peers, client applications, MSPs, CAs, etc. Let’s discuss them one by one.

1. Membership Service Provider:

Any of the actor 👨 in Fabric has an identity & according to the identity, the exact permissions and role of the actor are decided. So, from where do these identities come from and who decide the permissions? Yes, the MSP is the entity that defines rules, permissions and roles of different actors, whose identities have been issued by a valid CA(Certificate Authority).
The documentation says:

MSPs turn verifiable identities issued by CAs into the members of a blockchain network.

Summing up, an MSP abstracts away the protocols behind issuing certificates, validating certificates, and user authentication with all the cryptographic mechanisms, handled by CAs.

Note: Fabric comes with a built-in CA component, called Fabric-CA to allow you to create CA on the blockchain network. However, this component is pluggable and you still have to options to choose from other available CAs.

2. Peers
A peer is a node that hosts instances of the ledger and chaincode in the blockchain network. So, if an application or an admin wants to query the ledger or update the ledger then a connection with a peer is required.

A peer in the fabric network can hold more than one ledgers, which can be governed by one or more chaincodes.

https://hyperledger-fabric.readthedocs.io/en/release-2.1/peers/peers.html

https://hyperledger-fabric.readthedocs.io/en/release-2.1/peers/peers.html

A peer hosting multiple ledgers. Peers host one or more ledgers, and each ledger has zero or more chaincodes that apply to them. In this example, we can see that the peer P1 hosts ledgers L1 and L2. Ledger L1 is accessed using chaincode S1. Ledger L2 on the other hand can be accessed using chaincodes S1 and S2.

3. Orderer

An orderer node packages the transactions into a block 📦, which is then sent to peers, and after verification ✔️ appended to the ledger.

In a fabric network, there are various provisions for the configuration of orderer nodes. We can use a single orderer node (SOLO, deprecated from v2.0) or also a group of orderer nodes can be used to order the transaction and form a block, and this forms an ordering service.

As Fabric is a permissioned blockchain, and real message passing can take place between the nodes, so it doesn’t depend on probabilistic consensus algorithm for ordering of transactions like in the case of Bitcoin and Ethereum. So, all you have to do is to use the consensus algorithm provided by fabric, or you can plug in your own implementation.

4. Channel

Channel provides a mechanism for the peer to communicate & transact privately. Conceptually, each of the ledger in the network is associated with a channel and the peers which have joined the channel can view and transact on that ledger only.

Squashing the Key Concepts related to Hyperledger Fabric

In the above case, three channels C1, C2 &C3 exists, conceptually shown by black, blue, & orange rectangle. Peer P1 & P3 have joined blue channel(C2) and black channel(C1) and P2 & P4 have joined the orange channel(C3) and black channel(C1). So, the Blue ledger is maintained by P1 and P3, whereas Orange Ledger is maintained by P2 and P4, but black ledger is maintained by P1, P2, P3 and P4.

Here is another reference from Fabric’s Documentation:

Squashing the Key Concepts related to Hyperledger Fabric

P1 & P2 have joined channel C1 and thus can access the ledger L1. P2 & P3 have joined channel C2, thus can access ledger L2. The interesting part is peer P2 have joined both the channels, thus can access both the ledgers.

5. Ledger

Fabric’s Ledger 📒 is a distributed database with two components –

World State — the state of the ledger at a given point in time. So, world state stores the most recent value of assets in the form of key-value pairs.
Transaction Log — records all transactions which have resulted in the current value of the world state; it’s the update history for the world state.

A Ledger L comprises blockchain B and world state W, where blockchain B determines world state W. We can also say that world state W is derived from blockchain B.

A Simple Transaction:

Whenever a transaction is performed, it modifies the world state and the record of the transaction is made in the log of the ledger.

Squashing the Key Concepts related to Hyperledger Fabric

Note:

  • In Fabric, the database associated with the world state is pluggable and comes with two choices LevelDB & CouchDB.
  • Transaction log doesn’t need to be pluggable.

6.Smart Contract & Chaincode

Smart Contracts are the codes that contain the business logic in the fabric-network. It defines the business cycle of an asset in the world state. So the business logic inside the smart contracts governs all the transactions.

Here is a pseudo-code smart contract from the documentation:

Squashing the Key Concepts related to Hyperledger Fabric

Smart Contract ‘Car’ 🚗 defines the business logic to query, transfer and update the ownership of the car, agreed upon by Org1 & Org2

Smart Contracts are packaged into the Chaincode for deployment on the blockchain-network.

Think of smart contracts as governing transactions, whereas chaincode governs how smart contracts are packaged for deployment.

There are also some chaincodes which work on lower-level, to perform the necessary tasks in the blockchain-network, and they are called system chaincodes.

It is better to cover the chaincodes & transaction life-cycle in a different blog, later on 😺.

Squashing the Key Concepts related to Hyperledger Fabric

So that’s it. Thanks for reading.

Official Docs: https://hyperledger-fabric.readthedocs.io/en/release-2.1/

If you are facing difficulties in setting up Hyperledger Fabric, refer:

Hyperledger Fabric v2.1: Setting Things Up

 

Day20 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 3 minutes

author: aman

Blog VIII - Part I - Day 20

Hey there, Sorry for time being away.

In the complete series the main focus was to get the undergrads of my college to a kind of "ROAD" that is not taken "usually". This was something out of the world of Competitive Coding and Machine Learning. Since the Internet is Changing, and Blockchains are the one who is the Lead Changer of this internet revolution. I guess, transformation would be the right word.

We have discussed about a lot of things, let's put them together.

In this micro-blog

  • Connecting the Dots
Connecting the Dots

So, we've talked about a lot of things in the series of the Blogs. However, I must say that I couldn't cover everything I knew in detail, but here I'll try to connect the dots for you.

Let me list the blogs with the topics they covered. (You are free to skip through the list, just come back if you want to grab a look at what has been already done.)

We talked about various sotware attacks, attacks on Blockchains, how terminologies(soundness, completeness) could mean so much, vulnerabilities, specs/invariants, bugs in few of the most trusted spaces. We also had 2 guest lectures in the series. Let me now end up with a complex case in case of Bitcoin.

The case leaves a possibility for an attacker to Partiotion the Bitcoin network into multiple parts, creating a possibility to fork bitcoin into 2 parallel chains. Let's see how it works:

BGP Highjacking attack on Bitcoin

The Bitcoin network is highly centralised, even after known to be a decentralised network. And even if the Blockchain is completely encrypted the routing of messages is still very much open. The routes are easily deductible to the adversaries.

See Here : https://bitnodes.io/

To explain it more, the complete Bitcoin network is spread to multiple ISPs (Internet Service Providers), which are again built up of multiple network clusters, called as Autonomous Systems(ASes). To communicate some messages between these ASes uses a protocol called the Border Gateway Protocol(BGP). This complete complete procedure is termed as Internet Routing.

~13 ASes host about 30% of the entire network, while 50 ASes host the 50% of the Bitcoin Network

Any attacker with accesss to the routing infra, can Highjack the BTC network. As a result of attacking mentality they can partition the BTC network in several parts. Probably bringing a major network towards their side.

Now they can add as many blocks in their side, and broadcast the chain in the network. By the general rule of Bitcoin network, "the longest chain is considered to be the final chain", the malicious one gets updated in the real etwork.

"hese attacks, commonly referred to as BGP hijacks, involve getting a router to falsely announce that it has a better route to some IP prefix."

"50% of Bitcoin mining power is hosted in only 39 prefixes (i.e., in 0.007% of all Internet prefixes). This allows an attacker to isolate ~50% of the mining power by hijacking only these 39 prefixes. Much larger BGP hijacks (involving orders of magnitude more IP prefixes) are routinely seen in the Internet today."


You see this is a big thing. The Internet Routing has a developing history of more than 35 years, and the BGPs are still considered to be stable. It is said that, Bitcoin has already gone through hundreds of BGP routing attacks, and the attacks are still not deductible.


So turning back and seeing the dots to be connected, we find,

  • a 100% secure system isn't possible
  • not a lot of people are aroung the security of these systems
  • the higher institutes are still hustling to create an environment of secure information exchange
  • developing techniques to check a system for its security is extremely difficult, and this is the place where actual computer science comes in
  • the attack surfaces are open in Hardware devices as well,
  • the Finance field is already being exploited for its vulnerabilities and application for the Blockchain tech

One thing to notice is that, even if the Blockchain tech fails, there will be a definite transformation in the internet we will be using tomorrow.

The security is everything. For a world running on Data, User's privacy, access to the systems comes in first.

So, that should be a lot of motivation I guess. I don't have any pre compiled list of the things, one can work on in the future, but BLOCKCHAIN + SECURITY, is surely the most citable area of work.

I'll try to cover more in details sometime. And yeap, I never read the Blogs twice, so pardon for the errors.

Shoot your questions and error reporting here [email protected].

- Aman Pandey

amanpandey.codes

HTML Canvas Games from Scratch #4

Reading Time: 6 minutes

HTML Canvas Games from Scratch #4

Hello devs!🎮
Let us continue with the game👾
Now we need to implement these functionalities to complete the game:

  • Collide bullets with aliens
  • Healthbar for the player
  • Respawning of aliens
  • Background
  • Score calculation and game over

Let’s do it! 🚀

Phase 4

So we will begin with the code we left last time.
If you don’t already have it, you can download it from : HERE
So we will follow the order of functionalities given above.

Bullet alien collision💥:

So the alien should die if the bullet touches the alien’s body. To do this we will implement a distance() function which will take the coordinates of the alien and the bullet in consideration and check if any collisions occur. We will be iterating through the array Aliens and the array Bullets to check for each pair of {alien , bullet} to check for a collision. Let’s code!

//Checking for bullet kill  
for(i=0;i<Bullets.length;i++)
{
for(j=0;j<maxAliens;j++)
{
if(Math.abs(Bullets[i].x - Aliens[j].x) <= 18 && Bullets[i].y <= Aliens[j].y && Bullets[i].y>=Aliens[j].y-20 && (player.y - Aliens[j].y) >= 38 )
{
kills++;
Bullets[i].y = -10;
var addAlien = new alien(Math.random()*(window.innerWidth-100)+60, Math.random()*(window.innerHeight/2-300),Math.floor(Math.random()*2));
Aliens[j] = addAlien;
}
}
}

Now let us analyse this code.

We are traversing through both the arrays and checking for 4 conditions :

  • Absolute distance between bullet and alien in x axis is less than or equal to 18 (as the aliens are almost 36px in width).
  • The y coordinate of the bullet is less than the y coordinate of the alien.
  • The y coordinate of the bullet is greater than ( alien.y - 20 ).(as the aliens are almost 40px in height)
  • The y coordinate of the space shuttle (center) is at least 38px below the aliens center.(this ensures that the alien and space shuttle are not )

If these conditions are satisfied, we :

  • Update number of kills (variable kills++)
  • Send the bullet out of the screen (y = -10)
  • Add a new alien in place of the dead alien.

Source Code : Code Link
Location in repository : \Phase 4\BulletCollisions


Try and run this code yourself to see the output.

Healthbar❤️:

For this we define a new variable called healthBarHeight.
So out health bar height will depend on the health variable, which is initially valued 90. As the aliens touch the shuttle, or the aliens *pass beyond the screen *, the shuttle’s health is reduced.
Turning it into code :

//Drawing the health bar  
c.beginPath();
if(health == 90){
c.fillStyle = "green";
healthbarHeight = 90*6;
}
else if(health == 60){
c.fillStyle = "orange";
healthbarHeight = 60*6;
}
else if(health == 30){
c.fillStyle = "red";
healthbarHeight = 30*6;
}
else{
healthbarHeight = 0;
}
c.fillRect(20, 20, 20 , healthbarHeight );
c.closePath();
c.fill();

Note : All this is written inside the draw() function.

Well we also need to handle the cases where the player loses health. Write this inside the draw() function :

for( j=0 ; j<Aliens.length ; j++)
{
if(Math.abs(Aliens[j].y - testShuttle.y) <= 60 && Math.abs(Aliens[j].x - testShuttle.x)<=18 || Aliens[j].y >= window.innerHeight -30){
health-=30;
var addAlien = new alien(Math.random()*(window.innerWidth-100)+60, Math.random()*(window.innerHeight/2-300),Math.floor(Math.random()*2));
Aliens[j] = addAlien;
}
}

Try to check what conditions are handled.


Note : As soon as any of the conditions are satisfied, we have also killed the alien. Try removing the last 2 lines inside the if statement and then run the code and see the outcome.

The healthbar would looks something like this :
https://github.com/jrathod9/Making-of-Space-X-/blob/master/Phase%204/Health/Healthbar.png

Source Code : Code Link
Location in repository : \Phase 4\Health


Note : We still need to add the “Game Over” condition. We will do that at the end.

Before moving forward, let us code to increase the difficulty with score.
I.e. as kills increase, so will the speed of the aliens and the number of aliens:

var level = 0; //Declare this at the top  
//Increase difficulty with kills  
//Add this inside "Checking for bullet kill" after Aliens[j] = addAlien;  
if(kills % 10 == 0){
alienSpeed += 0.1;
}
if(kills % 20 == 0){
level++;
var levelupAlien = new alien(Math.random()*(window.innerWidth-100)+60, Math.random()*(window.innerHeight/2-300),Math.floor(Math.random()*2));
Aliens.push(levelupAlien);
maxAliens++;
}

At every 15 kills we add a new alien, and at every 10 kills we increase the speed.
Source Code : Code Link
Location in repository : \Phase 4\LevelUp

Background✴️:

The game is set in outer space, so whats missing?
Right! Stars✨!
Lets code this separately first:

var maxStars = 150; //Stars on the screen  
var starSpeed = 5;
//Star object  
var star = function(x,y ,rad){
this.x = x;
this.y = y;
this.rad = rad;
}
Stars = new Array(); //Array of stars  
//Filling the array  
for(a = 0; a<maxStars ; a++){
var temp = new star(Math.random()*(window.innerWidth-20), Math.random()*(window.innerHeight-20),Math.random()*3 );
Stars.push(temp);
}

Now we will be drawing these stars, but every time a star leaves the screen we will place it back on the top. Hence it will be like a single screen just repeating itself.
This is how most of the infinite runner games like temple run and subway surfers take up just a few MB of space.
So here goes the draw function :

function draw(){
//Clear window  
c.clearRect(0,0,window.innerWidth, window.innerHeight);
//Draw stars  
for(j = 0;j<maxStars ; j++){
c.beginPath();
c.fillStyle = 'rgba(255,255,255,0.7)';
c.arc(Stars[j].x,Stars[j].y,Stars[j].rad , 0 , Math.PI * 2 , false);
Stars[j].y += starSpeed;
//This part send the star back to the top  
if(Stars[j].y >= window.innerHeight-20){
Stars[j].y = 0;
}
c.closePath();
c.fill();
}
requestAnimationFrame(draw);
}
draw();

Result:
https://github.com/jrathod9/Making-of-Space-X-/blob/master/Phase%204/Background/background.gif

Source Code : Code Link
Location in repository : \Phase 4\Background

Now we need to add this to the game . The background will be drawn regardless of what’s going on in the game so let us straightaway merge the code in the game code, resulting in :

https://github.com/jrathod9/Making-of-Space-X-/blob/master/Phase%204/BackgroundMerged/GameWithBackground.gif

Source Code : Code Link
Location in repository : \Phase 4\BackgroundMerged

Its time to wrap it up by calculating the score and handling the game over condition.

Game 0ver🎌:

To calculate the score there may be different ways. It totally depends on you how do you want to calculate the score.
I personally feel it is best to check the Accuracy and Level Reached:

var alive = 1; //1 alive 0 dead  
..
..
function draw(){
//Enter code to draw Stars  
..
..
if(alive)
{
//Rest of the game  
..
..
//Check if alien touches shuttle or crosses screen to reduce health  
..
..
if(health == 0) //Check if health is 0  
alive = 0;
..
..
}
else
{
//Score screen  
c.beginPath();
c.fillStyle = 'rgba(255,255,255,0.5)';
c.font = "30px Calibri";
c.fillText("GAME OVER!" , (window.innerWidth-20)/2 - 55 , (window.innerHeight-20)/2 - 30);
c.fillText("Kills : " + kills , (window.innerWidth-20)/2 - 15 , (window.innerHeight-20)/2 );
c.fillText("Accuracy : " + (kills*100/totalBullets).toFixed(2), (window.innerWidth-20)/2 - 55 , (window.innerHeight-20)/2 + 30);
}
requestAnimationFrame();
}
draw();
..
..

This is how the game over screen will look:

https://github.com/jrathod9/Making-of-Space-X-/blob/master/Phase%204/Final/GameOver.png

So we are now ready with the final game:
Source Code : FINAL GAME
Location in repository : \Phase 4\Final

I’ve added a flickering effect to the alien as it looks cool. 😉
Enjoy playing and share it with your friends too! You can now experiment with the code to add your own effects, functionalities, audio, video and much more.

Play This Game
Play Another Version

Well this is the end of the series. Hope you try and create more such games and visuals on canvas.

If you liked canvas check THIS out!
Do leave suggestion/comments if any.
Cheers!🍬


Written by : Jay Rathod💻
Links : Portfolio | Github | Codepen | Linkedin | Instagram

Getting Familiar with Some Cool Git Commands- git bisect & git blame

Reading Time: 5 minutes

So, this article will move around:

  1. git bisect
  2. git blame

So let’s discuss them one by one, with the situations in which they can be used.

Finding Regression Error using ‘git bisect’:

‘git bisect’ will work as a life-saver spell if you need to find a regression bug introduced in your software accidentally. Such type of errors are common in group projects or open-source, in which some contributor unintentionally changes certain important piece of code, which breaks some other functionality, and it remains unnoticed for a long period of time. So, when such bug comes under notice, the main task of the maintainer is to track when this bug/breakage is introduced or to say before which commit, all things were working correctly.

So, the general approach to this problem would be to find a commit at which things were working correctly, and perform a binary search between the good commit and the latest commit to find the commit at which things were broken. This will narrow down the consideration window with few rounds of compiling.

Of course, it is a perfect approach, but doing it manually and keeping an eye on the good and bad commit makes the process cumbersome. So here comes the ‘git bisect’ for rescue.

To find the bug, firstly checkout to master and handover the git the responsibility to find the regression bug by firing:

git bisect start

By the above command, before the git starts the process you need to give a reference to a bad-commit and a good commit.

Assuming things are bad at the current HEAD, for giving reference to a bad commit use:

git bisect bad HEAD

After that, to perform a binary search, a reference to a commit, where things were working as expected, is needed. So, just take the hash of good-commit and use:

git bisect good <git-hash>

After this stage, git will start the process to find the breakage point. It will automatically checkout to the intermediate commits. All you need to do is to mark the checked-out commit as good or bad by:

git bisect good
git bisect bad

 

Let’s see this with example. Consider the file:

In this file, at line-4 the correct word was ‘Blockchain’, but accidentally it has been changed. So let’s find out the commit, before which everything was good.

Here is the git-log for reference:

Let’s start the git bisect and as things were good at ‘add Blockchain’ commit. So let’s take it as a good commit and take the latest commit as bad commit.

You can see that git take over the task of divide and conquer, and also displays the rough steps remaining in finding the regression point. So, all you have to do now is to mark the current checked out commit as good or bad.

After seeing the file at ‘add compiler design’ commit, we can conclude it as a good commit, as the spelling is correct there. So, let’s mark it as good commit.

The next bisect point is a bad commit, so let’s mark it.

Again, it’s a bad commit.

Whoops, we just found the commit at which things the word was misspelt. It is the commit with the message ‘add MP’.

In the same way, you can find regression bugs very easily in big projects :).

It saved me many hours, so will also save yours.


Finding the culprit for breaking the code by ‘git blame’:

The official documentation says, git blame-

Annotates each line in the given file with information from the revision which last modified the line. Optionally, start annotating from the given revision.

So in short, it is used to find the person in a group project, who changed the line and responsible for breaking the project.

So, git blame command will give you the information about the latest commit that changed the line, for all the lines accompanied by the author of the commit.

Command:

So let’s try this out by :

git blame <path-to-file>

Clearly, you can see the latest commit hash which changed the Line-4. Although the author in these commits are same. But if it is a team project, you can also judge which person broke the code, so that you can blame him, to have a coffee :).

You can also use GitHub to find the git blame for a line:

 

Similarly, GitLab also has the option to view blames:

That’s all for this article and Don’t forget to ‘Clap’, if you have found it useful.

References:

https://git-scm.com/docs/git-blame

https://git-scm.com/docs/git-bisect

You can find some more good-stuff at:

GIT and GITHUB: A Layman’s Guide[Part-1]

GIT and GITHUB: A Layman’s Guide [Part-2]

HTML Canvas Games from Scratch #3

Reading Time: 5 minutes

Hey, devs!🎮
So we are all set to begin creating the game👾.
Let’s do it!

Phase 3

Before we jump into coding, let us plan things.
Objects we will need :

  • Player (The space shuttle)🚀
  • Alien👾
  • Bullets

Let us define these objects :

//Shuttle object
var shuttle = function(x,y){
this.x = x;
this.y = y;
}
//Alien object
var alien = function(x,y){
this.x = x;
this.y = y;
}
//Bullet object
var bullet = function(x,y){
this.x = x;
this.y = y;
}
//Since we will handle multiple bullets and Aliens
var Bullets = new Array();
var Aliens = new Array();

Other variables that we will need to define are :

var totalBullets = 0; //bullets on screen
var health = 90; //health of player
var kills = 0; //total aliens killed
var maxAliens = 5; //Max aliens on the screen
var bulletSpeed = 7; //Speed of the bullet
var alienSpeed = 0.2; //Speed of the aliens

Note : These values are selected by hit and trial.
Now we will need alien and shuttle sprites. I have already made these using fillRect() functions.
Download code from this link : Code Link
Location in repository : \Phase 3\Sprites
Note : It is ok if you don’t try to understand drawShuttle() and drawAlien() as it isn’t very important, those are just figures made using rectangles. You will be using images for sprites in the future mostly.
Result :

HTML Canvas Games from Scratch #3
Space Shuttle will be positioned at the bottom center.
Alien will have a constrained random position at approximately the top part of the screen.

Now we will work on the same code that you’ve downloaded.
Let us add an event listener to enable the space shuttle to move using the arrow keys. (As we did in the previous post)

var keys = []; //Add this before the draw() definition
window.addEventListener("keydown", keysPressed, false );
function keysPressed(e) {
// store an entry for every key pressed
keys[e.keyCode] = true;
window.addEventListener("keyup", keysReleased, false);
}
function keysReleased(e) {
    // mark keys that were released
keys[e.keyCode] = false;
}

So we need to adjust the position of the space shuttle before re-drawing it on the canvas. Inside the draw() function, before drawing the space shuttle :

//Handling arrow key presses and shuttle movement boundaries
// left
if (keys[37]) {
if(player.x >= 70)
player.x -= shuttleSpeedh;
}
// right
if (keys[39]) {
if(player.x <= window.innerWidth - 50)
player.x += shuttleSpeedh;
}
// down
if (keys[38]) {
if(player.y >= window.innerHeight/2)
player.y -= shuttleSpeedv;
}
// up
if (keys[40]) {
if(player.y <= window.innerHeight - baseBottomh - midBottomh - cannonh)
player.y += shuttleSpeedv;
}

Run this code to check what are the constraints to the movement of the space shuttle.
Note : shuttleSpeedh and shuttleSpeedv respresent horizontal and vertical velocity. These have been defined in the file at the top.
Result :
HTML Canvas Games from Scratch #3
Here’s the source code : Code link
Location in repository : \Phase 3\MovingShuttle

Now let us fill the array of aliens:

//Initial array of aliens
for(a = 0; a < maxAliens; a++){
var temp = new alien(Math.random()*(window.innerWidth-100)+60, Math.random()*(window.innerHeight/2-300));
Aliens.push(temp); //We already defined this array
}

To draw all these aliens we need to make changes in out draw() function. Just add a loop where we are drawing a single alien:

for(a = 0 ; a < Aliens.length ; a++)
drawAlien(Aliens[a]);

Result :
HTML Canvas Games from Scratch #3
Here’s the source code : Code Link
Location in repository : \Phase 3\SpawnAliens

Moving on, we now need to make the space shuttle launch bullets.
This will happen on pressing spacebar. But only 1 bullet will be launched on pressing spacebar once. So the event we use will be keyRelease. Remember we have already defined it?
Let us add more functionality to it.
js  function keysReleased(e) { if(e.keyCode==32){ //keycode of spacebar var temp = new bullet(player.x , player.y - midBottomh - cannonh); totalBullets++; Bullets.push(temp); } }  
Now let us draw all the bullets on the canvas;

function drawBullet(thisBullet){
c.fillStyle = bulletColors[Math.floor(Math.random()*6)];
c.beginPath();
c.arc(thisBullet.x,thisBullet.y - cannonh + 10, 2.5 , 0 , Math.PI*2 ,false);
c.fillRect(thisBullet.x-2.5,thisBullet.y - cannonh + 10  ,5,5);
c.closePath();
c.fill();
}

Last but not the least lets draw these bullets on the canvas and make them move . This should be added inside draw():

//Check bullets that left the screen and remove them from array
for(a = 0 ; a < Bullets.length ; a++){
if(Bullets[a].y <=0 ){
Bullets.splice(a,1); //Removes 1 element from the array from index 'a'
}
}
//Update bullet coordinates to make it move and draw bullets
for(a = 0 ; a < Bullets.length ; a++){
Bullets[a].y -= bulletSpeed; //Already defined at the top
drawBullet(Bullets[a]);
}

Result :
HTML Canvas Games from Scratch #3
Here’s the source code : Code link
Location in repository : \Phase 3\Bullets

Moving on to the last thing that we will be doing in this phase. Make the aliens move.

Aliens[a].y += alienSpeed; //Add this inside the loop
//where we use drawAlien();

So we have set the aliens in motion!👾

Final source code for this phase : Code Link
Location in repository :  \Phase 3\Final

We are almost done with the game. This phase was about the aesthetics of the game. Next phase will be the final phase where we will add the game logic and a final touch with a good background and a visible healthbar.
Do leave comments/suggestions if any.
Cheers!🍺

 Play the game :

Star this game!


Written by : Jay Rathod💻
Links : Portfolio | Github | Codepen | Linkedin | Instagram

HTML Canvas Games from Scratch #2

Reading Time: 7 minutesHey folks!🎮
So in the previous post I tried to lay a foundation to start understanding canvas. I hope that by now you are a bit comfortable with it. So in the previous post we saw:

  • File structure and boilerplate📁
  • Some important javascript functions for drawing✏️
  • Defining a particle and drawing it on the canvas (hope you remember atom😉)
  • requestAnimationFrame()🔄
  • One and two dimensional uniform motion of the particle🏃
  • Gaining control over the Math.random() function🎲

Phase 2

Till now we were have worked with one particle, but that’s not how games are right? At least most of them. Handling multiple particles is not as tough as you might think. Let’s see how its done!
First of all, will the object definition of the particle change?
Well, it depends on the properties of these particles.
(We will see this later on)

Let us continue with the same particle definition that we previously used:

var particle = function(x,y,radius){
   this.x = x;
   this.y = y;
   this.radius = radius;
}

Now instead of defining one particle, let us define an array of particles:

var particleArray = new Array();

Let us now define 50 particles with random positions on the screen. But what are the dimensions of the screen?
We already have :

  • window.innerWidth
  • window.innerHeight

So the coordinates of the screen will be in the range:

  • X : 0 – window.innerWidth
  • Y : 0 – window.innerHeight

So the code goes like this :

var totalParticles = 50;         //number of particles 
var maxRadius = 30;               //maximum value of radius   
var particle = function(x,y,radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}
var particleArray = new Array(); //array of particles        
var i;                          //loop variable 
for(i = 0 ; i < totalParticles ; i++) {
    //Defining properties of the particle
    var xcoord = Math.random()*window.innerWidth;
    var ycoord = Math.random()*window.innerHeight;
    var rad = Math.random()*maxRadius;
    //New particle with above properties
    var tempParticle = new particle(xcoord,ycoord,rad);
    //Push tempParticle into the array
    particleArray.push(tempParticle);
}

I’ve tried to keep the code readable and obvious. Just read it and you should understand what is happening.
What’s left? Let us draw these particles on the canvas!
Just add the following code :

c.fillStyle = 'aqua';
//Drawing the particles
for(i = 0 ; i < totalParticles ; i++ ){
    c.beginPath();
    c.arc(particleArray[i].x,particleArray[i].y,particleArray[i].radius,0, Math.PI*2,false);
    c.closePath();
    c.fill();
}

Result:

HTML Canvas Games from Scratch #2

Here’s the source code : Code link
Location in repository : \Phase 2\ParticleArray

Note : On refreshing the page you will find a new configuration everytime.
Also we haven’t used the requestAnimationFrame() function as we just wanted static particles as of now.

What next? Let us give all the particles some random velocities🚀.
We need to add two properties for the particle object “x velocity” and “y velocity“:

var particle = function(x,y,vx,vy,radius){
this.x = x;
this.y = y;
this.vx = vx;              //x vel
this.vy = vy;              //y vel
this.radius = radius;
}

Now since we have added new properties for this object, we must also define its values for all the defined instances.

Wait, did I just go too hard on you?😝

Ok let me reframe that:
Since we added two new properties to the particle object, we also need to give the value of these properties for all the particles that are stored in the array.
So inside the for loop in which we are defining and adding particles to the array :

{
    ...
    ...
    var xvel = Math.random()*6 - 3;
    var yvel = Math.random()*6 - 3;
    ...
    var tempParticle = new particle(xcoord,ycoord,xvel,yvel,rad);
    ...
    ...
}

Try figuring out the range of (xvel, yvel).

Now we are ready with particles and their velocities. Lets start drawing them on the canvas. This time we will use requestAnimationFrame():

c.fillStyle = 'aqua';        //define fillStyle
function draw(){
    //Clears the entire canvas
    c.clearRect(0,0,window.innerWidth,window.innerHeight);
    //Update the value of the coordinates (according to velocity)
    for(i = 0 ; i < totalParticles ; i++ ){
        particleArray[i].x += particleArray[i].vx;
        particleArray[i].y += particleArray[i].vy;
    }
    //Drawing the particles
    for(i = 0 ; i < totalParticles ; i++ ){
        c.beginPath();
        c.arc(particleArray[i].x,particleArray[i].y,particleArray[i].radius,0, Math.PI*2,false);
        c.closePath();
        c.fill();
    }
    requestAnimationFrame(draw);
}
draw();

Result :

HTML Canvas Games from Scratch #2

Here’s the source code : Code link

Location in repository : \Phase 2\ParticleArrayMoving

It must be noted that the particles will soon disappear leaving a black screen. The reason being that the canvas extends infinitely, we just get to see a part which our window can capture.
To confine the particles to our window, we must make the window act as a box 🔳. Particles must collide and bounce back inside like this:

HTML Canvas Games from Scratch #2

These conditions are to be taken care of every time before drawing the particles. Let us code them:

//Checking for collison with walls
for(i = 0 ; i < totalParticles ; i++ ){
        if(particleArray[i].x > window.innerWidth || particleArray[i].x < 0)
            particleArray[i].vx*=-1;
        if(particleArray[i].y > window.innerHeight || particleArray[i].y < 0)
            particleArray[i].vy*=-1;
    }

Result :

HTML Canvas Games from Scratch #2

Here’s the source code : Code link
Location in repository : \Phase 2\ParticleArrayMovingCollisions

Notice the particles bouncing off the edges.

Practice Sesh💻 : You can try giving a different color to all the particles. You can also try to making all the particles twinkle/shimmer✨, by changing its opacity (the ‘a‘ in rgba).

Solutions to these : Link to code

Location in repository : \Phase 2\Practice Sesh

Interacting with the canvas:

Yes, chill❄️. It is possible. Obviously. Who would call it a game otherwise?
Let us talk about the addEventListener() method. As the name suggests, it simple listens to events. Events in this case are keyboard inputs, mouse clicks , changes in mouse movements etc.

Syntax:

window.addEventListener(Event,Function,useCapture);

Event : An event is nothing but a trigger. It is used to execute a coded response. Eg : click , onmousedown , onkeypress , onkeyup etc. (Know more..)
Function: This is the function that is to be called when that specific event occurs. It is defined somewhere in the code.
useCapture : This is either true or false. It is optional. It is used to define whether the event should be executed in the Bubbling or Capturing phase (it is not important right now, though you can read more here). By default it is false.

Lets start with the most basic event and response :
For this you will need the javascript code where we had just 1 static particle.(try to write this code yourself once)
Source code : Code link
Location in repository : \Phase 1\Atom Particle
Just remove the line of code used to increment the speed. Thus getting us a static particle.
Now let us add a simple mouse click event : (append this snippet at the end of the code.js file)

window.addEventListener("click", move , false); //define event listener
function move(e)            //response function                                              
{
    atom.x = e.x;            //update x coordinate of atom        
    atom.y = e.y;            //update y coordinate of atom
}

What is ‘e’ ?
e here represents the event, and the event here is click. It must be passed as a parameter to the function.
Every event has specific properties. For this click event, we have properties x and y which represent the coordinates of the cursor on clicking.

Coming back to the code, the function replaces coordinates of atom with the coordinates of the cursor. Thus moving it to the click position.
Check it out yourself.
Source code : Code link
Location in repository : \Phase 2\ParticleCanvasInteraction

Similarly, let us make atom move left , right, up and down with the arrow keys.
So this is what we need :

  • On pushing down an arrow key the particle should move.
  • On releasing the key the particle should stop its movement.

We will use the keydown and keyup events.
This even has a specific property called keyCode. Every key on the keyboard has a different keyCode. The keyCode values of arrow keys are :

  • Left : 37
  • Up : 38
  • Right : 39
  • Down : 40

Let us define a boolean array called “keys” which will hold true for all those keyCodes which are pressed.
Also we will need two event listeners, one that will check for keys pressed and the other that will check for keys released.

var keys = [];
window.addEventListener("keydown",keyPressed,false); //keydown listener
window.addEventListener("keyup",keyReleased,false);      //keyup listener
function keyPressed(e){             //sets value true when key pressed 
    keys[e.keyCode] = true;
}
function keyReleased(e){            //sets value false when key released
    keys[e.keyCode] = false;
}

Its not done yet. We need to make required adjustments in the draw() function, the effect of key presses on the coordinates :

function draw(){
..
..
    if(keys[37])                //if left is true
        atom.x-=xspeed;         //move left by xspeed
    else if(keys[39])         //else if right is true
        atom.x+=xspeed;         //move right by xspeed
    if(keys[38])                //if up is true
        atom.y-=yspeed;         //move up by yspeed
    else if(keys[40])         //else if down is true
        atom.y+=yspeed;         //move down by yspeed
..
..
}

Note : These are grouped this way because Up and Down cannot function together, and Left and Right cannot function together.


Also don’t forget to define xspeed and yspeed outside the draw function.

Result :
HTML Canvas Games from Scratch #2
Source code : Code link
Location in repository : \Phase2\ParticleCanvasInteractionKeyboard

Now its your turn to play around with a few more such events.

Other things you can try :

  • Bound the motion of this particle to the box
  • Comment out the clearRect() function and see the output
  • Use the fillRect() function with black colour but opacity less than 1, instead of clearRect(). (Will give a nice trail effect)

This is all for this post. Till here I have covered everything it takes to create the game that I made. Now all we have to do is combine all this logic in one file ❗
In my opinion you may also start creating the game yourself, or try making some other game maybe ping-pong, flappy bird, snakes etc.

Do leave comments/suggestions (if any).
Cheers!🍭

Written by : Jay Rathod💻
Links : Portfolio | Github | Codepen | Linkedin | Instagram

CEV - Handout