In this article, let us understand the Tamper Resistant Nature of a Blockchain. This is the third part of my Blockchain Series on Dev.
📦 ↔ 📦 ↔ 📦 ↔ 📦 ↔ 📦 ↔ 📦
Tamper Resistant Nature of a Blockchain ⛓
Every block 📦 of the blockchain contains its own hash value and the hash of the previous block (previous block hash) in the blockchain. These hash values chain the blockchain together in order in which the most recent block was made and goes all the way to the very first block that was created.
Whenever the data of a block gets changed, the hash of the block needs to be re-computed and this invalidates the block.
Now as a consequence of this (hash of the block changing), it also changes the hash of the block that exists on the next block. This changes the data in that block as well changing the hash value and hence this block will also get invalidated too. This change of hash values will run all the way down to the set of the blocks effectively breaking the entire chain. This proves that blockchain is TAMPER PROOF !
So this is it for the third article on Blockchain. Thanks for reading !
In this article, let us understand the Structure of a Block in a Blockchain. This is the second part of my Blockchain Series.
📦 ↔ 📦 ↔ 📦 ↔ 📦 ↔ 📦 ↔ 📦
The Structure of a Block in a Blockchain ⛓ ?
Blockchain, as we know, is a shared digital ledger that records a list of transactions that happen throughout the network. Now this can pretty quickly become longer thus ending with a never ending list of transactions. To get more fine grain control, it is split into a chain.
Right. A chain of blocks ⛓📦.
So let us understand what a block 📦 is: 📦 Block is kind of a box into which we group all the transactions that we want to add to the blockchain.
Other than a list of transactions, a block also holds a couple of other things.
In the header of the block , we have a couple of other things:
👉🏻Previous block hash 👉🏻Timestamp (the time a black was made) 👉🏻Merkle Root 👉🏻Nonce
✏ Previous Block Hash
It is the hash value for the block that comes directly before the given block in the chain. This is what helps in connecting the blocks of our blockchain.
Timestamp ⏲✏
It is the time that represents when the block was made. This helps us in knowing when certain transactions took place and also solves other problems which we will discuss a bit later.
Merkle Root 🌴
It is the hash that represents the entire transactions that happened inside the block. To find the Merkle Root, pair of transactions within the block are repeatedly hashed together until we are left with a single hash value.
Nonce
Nonce stands for “number only used once,” which is a number added to a hashed block in a blockchain that, when rehashed, meets the difficulty level restrictions. The nonce is the number that blockchain miners are solving for, in order to receive cryptocurrency. We will learn more on this in a separate article on Bitcoin
So this is it for the second article on Blockchain. Thanks for reading !
In this article, let us cover a detailed introduction on Blockchain and the problem that it solves. This is the first part of my Blockchain Series.
What is a Blockchain ⛓ ?
Blockchain is kind of a new way to make transactions. It allows us to make transactions in new ways that are more secure, transparent and even more cheaper than before. It’s main goal is to remove centralization.
IOW,
Blockchain is kind of a shared database that contains the list of transactions and these transactions are made between the users who become a part of this network. The transaction can be as simple as sending some dollars or can even be a bit complex.
The idea was to create new type of currency that was open to anyone and can establish the trust needed to facilitate the transactions. Bitcoin is a proper use case of a blockchain.
✏ What problems does a blockchain propose to solve ?
It solves the problem of centralization. But before understanding that, let us understand where is this centralization coming from.
In the current financial system, banks serve as third party mediators that currently handle all the transactions that take place between two users.
These banks have access to everything that we can do with our money and can even choose whether or not they want to share it with us or not.
At other times, banks are not the only third parties that handle it. Whether you use smart cards, e-cash etc. you are giving your information to them too. They also need to communicate with the banks and are an integral part in handling your money. This process can result in delay in the transaction times and fees collected by the companies that are handling your money. So this is something that Blockchain can improve.
Blockchain maintains a digital ledger making it possible to bypass these third parties and thus allows you to send money more quickly and can cut down on the fees associated with making a transaction. So those are the problems that the Blockchain is trying to solve.
So this is it for the very first article on Blockchain. Thanks for reading !
In this article, I will be mentioning the top 5 resources that I highly recommend if you want to learn Vue.js.
PS : I am not an affiliate of any of these resources/courses. These are just some of my personal recommendations if you are looking to learn Vue.
Introduction
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
Here are the top 5 recommendations (in no particular order) of the courses that you should definitely check out for learning Vue.
1. Build Web Apps with Vue 3 and Firebase by Shaun Pelling a.k.a The Net Ninja (rated 4.8)
Shaun is a gifted teacher. He knows how to explain stuff in a very easy and lucid manner. This course will definitely take your knowledge to the next level if you are looking to learn this specific technology.
Here is what this course covers
Learn how to create Vue 3 applications from the ground-up
Get in-depth knowledge of Vue features like the Vue Router, Vue CLI, Options API, Composition API, Teleport etc
Get hands-on & in-depth experience using the latest Vue 3 features (such as the Composition API)
Learn how to use Firebase as a back-end to your Vue applications (as a database, authentication service, hosting etc)
Build & deploy 4 real-world web apps with Vue & Firebase Learn how to implement an authentication system into your Vue js apps using Firebase Auth
2. Vue.js – The Complete Guide by Maximilian Schwarzmuller ( rated 4.8)
This course as the name can probably tell you covers the internals of Vue in great detail. The course starts from the very basics like What Vue.js is and how it works and later on moves to more complex and advanced topics
Here is what this course covers
What is VueJS and Why would you use it?
The Basics (including the basic Syntax, Understanding Templates and much more!)
How to Output Reactive Data & Listen to Events
Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements …)
Setting up a Development Environment and Workflow
Using Components (and what Components are to begin with)
A Deep Dive Look Behind the Scenes of Vue
Binding to Form Inputs
Sending Http Requests to Backend APIs
Authentication & Vue
How to make your App more Beautiful with Animations and Transitions
How to create an awesome Single-Page-Application (SPA) with Routing
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.
In this article, let us learn about how we can render dynamic content to the client (which is not static). Let us first touch briefly on what a template engine is because rendering dynamic content is closely related to what a template engine will help us in achieving.
Template Engines – a brief overview
A template engine is software designed to combine templates with a data model to produce multiple pages that share the same look throughout the site. These are the views in an MVC project.
So this helps us in putting dynamic content on our HTML pages.
We got a HTML like template (technically not HTML) which is typically a file that contains a lot of HTML like content in it but with some placeholders plugged into it and then we have a server (a Node.js Express server or any other server) serving the Node/Express content and then you have a templating engine. that replaces placeholders with HTML content but that content is generated on the server dynamically on the fly taking that dynamic content into account.
Some of the common template engines :
1. EJS
EJS Uses normal html and plain javascript in your templates.
EJS provides us clean syntax that easily mixes with HTML and provides the flexibility to write the JavaScript code inside the templates.
Dynamic content to be rendered in the above example is name. The value of the name variable will be rendered as an HTML page’s paragraph with value of name getting rendered on the fly.
2. Pug
PUG uses minimal HTML and custom template language.
3. Handlebars
Handlebars uses normal HTML and custom template language
The side effect of Handlebars template compared to Pug is that we cannot run any logic in the Handlebars template we need to pass a variable that has a value true or false(i.e logic is performed outside and passed into hbs template) and then we can render dynamic content.
This keeps our templates lean and all our logic should live while making sure that all our logic lives in our backend code. It works on the philosophy of less logic in the template and more logic in the node express code. So you have to prepare everything there so that inside the template you don’t have to write any JavaScript expressions.
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.
I recently started to create a Full Web Developer Course on my YouTube Channel and recently finished with the HTML and the CSS Section of this FREE course. More videos will be up on upload.
HTML Section
CSS Section
JavaScript Section
This section covers the basics of JavaScript along with the modern features that the language offers. We cover concepts like :
Demystifying Async Await, From Promises to Async Await
Scopes in JavaScript, Closures
Symbols in JavaScript
Iterators and Generators in JavaScript
The Concept of Pure and Impure Functions in JavaScript
Understanding Hoisting in JavaScript
AND MORE….
A lot of exercises and projects were made in this section of the course.
Here are the Projects that we made in this JavaScript Section :
Building COVID-19 Tracker Application using JavaScript and Mapbox
Making a Todo List Application in JavaScript using Custom Events
Implementation of Infinite Scroll in JavaScript
10 JavaScript Projects in 2 Hours
Node.js Section COMING SOON
MongoDB Section COMING SOON
Make sure to subscribe to the channel for more such videos. A lot of AWESOME videos are coming this month… So make sure to SUBSCRIBE to the channel for more amazing videos.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
2. Foundation
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
Bulma is the modern CSS framework that just works. Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Link :
https://bulma.io
4. Tailwind CSS
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Link :
https://tailwindcss.com/
5. UIkit
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.
In this article, let us learn about one of the most important concepts that you as a backend developer must have a solid knowledge of (because anyways working with an API is a big part of your jobs) and that is REST APIs
REST APIs
Actual definition:
“” Representational state transfer (REST) is a software architectural style that was created to guide the design and development of the architecture for the World Wide Web. REST defines a set of constraints for how the architecture of an Internet-scale distributed hypermedia system, such as the Web, should behave. The REST architectural style emphasises the scalability of interactions between components, uniform interfaces, independent deployment of components, and the creation of a layered architecture to facilitate caching components to reduce user-perceived latency, enforce security, and encapsulate legacy systems. “”
Now you must be wondering : “What the heck does this mean ?”
Anyways, let us make it super simple and understand what a REST API is piece by piece.
Now before we understand why we use a REST API, we first need to understand what problems does it solve ?
REST APIs are there to solve one problem you can say that not every frontend (UI) requires HTML pages. Not every UI wants your server code to generate HTML pages which effectively is the UI. Think about mobile apps these apps typically do not work with server side rendered HTML code. They do not need a templating language on server side to render the HTML code because you use a rich suite of prebuilt libraries for UI provided by Google or Apple to build your UI in the respective IDEs of these programming languages.
You build these User Interfaces totally decoupled from your server side logic. You don’t want HTML code because you can’t really render it there. Obviously you have browsers in your phone and that will render HTML pages.
But most of the applications do not use HTML to build their user interfaces but the tools that are provided by Google or by Apple and then you only need data to fill these user interfaces to life.
For building these amazing and sleek looking user interfaces on the frontend we have frontend technologies like React, Angular, Vue etc.
So we have a frontend that is decoupled from a certain backend logic like Google Maps (Server) and we only exchange data because we don’t need the HTML code but just the data. We built the User Interface on our own. So we just need a backend server that can typically serve us just the data that we need and then we can easily fabricate our user interfaces as per our requirements. So, this in essence is the core idea behind the REST APIs.
REST stands for Representational State Transfer which means that we transfer data (some form of state you could say) instead of user interfaces. We just want our server to send us data and we leave it to our client side app be it a mobile application or be it a single page application to do whatever it wants to do with this data. Thus in traditional web applications we rendered the views on the server side using templating engines and handled both the data and the UI . This is not bad at all it is a common pattern for a lot of web applications
Traditional Web Apps and REST APIs – ONLY THE RESPONSE DATA DIFFERS
Often traditional web applications and the REST APIs are seen as totally two different things. They are not, they only differ in the response and the kind of data that you expect but they don’t differ at the server besides the fact that you do not render the view there on the server. Here we use all knowledge that we gathered we only fine tune the data handling and finally deliver it to the client in the format in which it is required by the client.
A MAGNIFIED AND CRYSTAL CLEAR PICTURE OF THE REST APIs
So consider this scenario where we have our client (a mobile app, SPA) and then we have our server on which we build our backend REST API.
Now one possible advantage of this can be that we can make one and the same API for handling multiple clients and this is possible because both our mobile apps and web apps rely on the same data source, right. In fact, both the apps are same and consume the same data source. The only difference could be on how they present this data in their user interfaces.
Contrary to this, we can also have kind of a traditional application which just needs our service APIs. And in all such applications it is the data which is exchanged between the client and the server.
WHAT FORMAT DO WE EXCHANGE THE DATA IN
Some of the common formats that we most likely see are : 1.HTML 2.XML 3.JSON etc.
So there are different kinds of data that we can attach to the request and the response objects. So we can send plain text, XML or we could even send JSON.
There are different kinds of data that we can attach to the request and the response objects. We can send plain text,XML or we could send JSON.
XML
Introduction
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. In this article, let us see some cool projects that you can make to make the process of learning React extremely easy.
It looks a lot like HTML. XML allows us to use any tags. It allows us to send any data and does not make assumptions about the user interface because it is not parsable by browsers. They are user defined elements. These are machine readable but relatively verbose but you can define clear structures here. Here an XML parser is needed because node traversal in XML node tree is kind of a challenge in itself. So in essence you need an XML parser to efficiently parse the XML data.
JSON
JSON is kind of a defacto standard for data interchange in web applications. Here also we work on just the data and the JSON does not make assumptions about the user interface. It is machine readable and a bit more concise than XML and can easily be converted to Javascript. This is a huge plus when working with Node.js on the server and JavaScript on the browser. It is the most common format used in any of the APIs that you are communicating with these days.
Routing and HTTP methods
Now we know our web works on request and response cycle. So we have a client that interacts with the server in form of requests and response to get the data that it needs and more. Check my video on Client Server Architecture to know more regarding this :
So this is how we communicate with our server. In the REST World, these communications take place in form of paths which are known as API Endpoints
API ENDPOINT = ANY COMBINATION OF THE HTTP METHOD AND THE RESPECTIVE PATH These are the endpoints that we define on our REST API and we also define some logic that should get fired when such a request reaches our end point.
HTTP METHODS
More than just GET AND POST(These are only when we are working with links and forms), we have other HTTP methods as well that the browser natively knows of. So here is a short summary of the HTTP methods that our request client has access to.
GET – Get a resource from the server
POST – Post a resource to the server which is responsible for creating or appending a resource to an already existing array of resources so to say.
PUT – Put a resource onto the server(i.e create or overwrite a resource). Post should never overwrite an existing resource though it can do but it is not recommended
PATCH – Update parts of the existing resource on the server(not overwriting the entire resource but the parts of it)
DELETE – Delete a resource on the server
OPTIONS – Determine whether follow up request is allowed(sent automatically by the browser) This is automatically sent by the browser to find if the next request it tries to do is allowed or not. It is the best practice to use these methods in this way though you can do anything you want
This way any one who uses your API clearly knows what to expect for a given method
REST PRINCIPLES
1. Uniform interface, clearly defined API endpoints with clearly defined request and response structures IOW, your API should be predictable and also it should be well documented if it is open to the public. So people should know what data your API expects and what data it gives back.
2. Stateless interactions When building the server and the client, the server and the client are totally decoupled and they don’t share a common history ,every request is handled separately. And therefore no sessions can be used since no connection history is shared among the client and the server. Every incoming request is treated as if no prior request was sent. Server has a look on every request on its own. It does not store a session about the client.
You can just build an API and open it to the public and just present the documentation of its usage to the client. You don’t care at all about the clients. You just say here is the endpoints I have ,here is the data you get for each of the well-defined endpoints. So in essence, we have a strong decoupling between the client and the server even if they were to run on the same server because we are building the API for our application so that they work independently from each other and just exchange data without sharing the connection history.
3.Cacheable
You could send the client some response headers telling the client for how long the response is valid. Servers may set caching headers to allow the client to cache responses.
4.Client-Server Client and Server are separated,client is not concerned with persistent data storage.It is the responsibility of the server.
5.Layered System
As a client we send a request to a server, we can’t rely on that server we sent it to to immediately handle the request, the server may handle the request to other server or distribute it to other servers if it is busy. Ultimately we care about the data that we get back which should follow the structure that was defined by the API.
6.Code on Demand
REST API could also for some end points transfer executable code to the client.
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.
REST API could also for some end points transfer executable code to the client.
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.