What is MVC in programming.

Hi Everyone!

This concept is a bit difficult to understand, but that does not stop me from writing about it. I will try to be as clear and simple as I can.

We have a lot to cover, So let’s just dive into it. I have also included diagrams and example code of MVC below.

MVC:

MVC stands for “Modal View Controller” and it is a “Software architectural design pattern“, Which in turn is one of the most frequently used patterns.

It separates application functionality. And promotes organized programming.

popular frameworks that uses mvc concept.

  • Ruby on rails (RUBY)
  • Codeigniter (PHP)
  • Laravel (PHP)
  • Angular (JS)
  • Express (JS)
  • Django (PYTHON)
  • Flask (PYTHON) , e.t.c…

Now let’s break it down to the 3 components – MODAL, VIEW and  CONTROLLER.

modal:

Modal is responsible for getting and manipulating the data. It can also pull data from a JSON file.

It is the logic related to data which interacts with the database (select, update, insert, delete).

It communicates with the controller. And depending on the framework is also capable of updating the view.

view:

You got it!

It is the actual view of the application, the user interface. It is what the user sees when they interact with the application.

Usually the content of this part is HTML and CSS with dynamic values. It also communicates with the controller.

It’s dynamic values on the UI are passed from the controller. Depending on the framework template engine may vary. Template engine allows the dynamic data.

controller:

Controller takes in user input, so this could be from a user visiting a page, clicking a link or submitting a form which makes a get and post request.

Basically the main thing here is processing a request (GET, POST, PUT, DELETE).

You can think of the controller as a middleman between MODAL and VIEW. Controller gets the data from the Modal and passes it to the View.

Now i am sharing two diagrams and a code example for better understanding. The code shared is just an dummy code it is not going to work.

MVC (Modal View Controller) diagram.

Example code:

http://your-app.com/users/profile/1
/routes
    users/profile/:id = Users.getProfile(id)
/controllers
    class Users {
          function getProfile(id) {
              profile = this.UserModal.getProfile(id)
              renderView('users/profile', profile)
     }
/modals
     class UserModal {
           function getProfile(id) {
               data = this.db.get('SELECT * FROM users WHERE id = id')
               return data;
      }
/views
     /users
          /profile {{profile.name}}

Email: {{profile.email}}
Phone: {{profile.phone}}

That’s all for this article, see you soon in some other article.

Thank You.

Understanding “this” keyword in JavaScript.

‘Hi Everyone!

In this article, we are about to discuss  ‘this’ keyword in JavaScript. It is a very important part of object-oriented JS programming. Hence it becomes crucial for serious developers to understand  ‘this’ keyword.

It is also one of the most confused concepts of JavaScript.

What is ‘this’?

Understanding 'this':

To be able to understand what I am about to talk, you should be familiar with the basics of JavaScript. e.x – Variables, Objects, Functions, etc…

There isn’t a single word that describes ‘this' well, so I just think of it as a special variable that changes depending on the situation. Those different situations are captured below.

case 1:

In a regular function (or if you’re not in a function at all), 'this' points to'window' This is the default case.

function logThis() {
console.log(this);
}

logThis(); // window

// In strict mode, `this` will be `undefined` instead of `window`.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Case 2:

When a function is called as a method, 'this' points to the object that’s on the left side of the dot.

/*
 * You can also think of this as the "left of the dot" rule. 
 * For example, in myObject.myMethod(), `this` will be myObject
 * because myObject is to the left of the dot.
 *
 * Of course, if you're using this syntax myObject['myMethod'](),
 * technically it would be the "left of the dot or bracket" rule,
 * but that sounds clumsy and generally terrible.
 *
 * If you have multiple dots, the relevant dot is the one closest 
 * to the method call. For example, if you have one.two.hi();
 * `this` inside of hi will be two.
 */

var myObject = {
  myMethod: function() {
    console.log(this);
  }
};

myObject.myMethod(); // myObject

Case 3:

In a function that’s being called as a constructor, 'this' points to the object that the constructor is creating.

function Person(name) {
  this.name = name;
}

var gordon = new Person('gordon');
console.log(gordon); // {name: 'gordon'}

Case 4:

When you explicitly set the value of 'this' manually using,'bind''apply' or,'call' it’s all up to you.

function logThis() {
  console.log(this);
}

var explicitlySetLogThis = logThis.bind({name: 'Gordon'});

explicitlySetLogThis(); // {name: 'Gordon'}

// Note that a function returned from .bind (like `boundOnce` below),
// cannot be bound to a different `this` value ever again.
// In other words, functions can only be bound once.
var boundOnce = logThis.bind({name: 'The first time is forever'});

Case 5:

In a callback function, apply the above rules methodically.

function outerFunction(callback) {
  callback();
}

function logThis() {
  console.log(this);
}

/*
 * Case 1: The regular old default case.
 */
 
outerFunction(logThis); // window

/*
 * Case 2: Call the callback as a method
 */
 
function callAsMethod(callback) {
  var weirdObject = {
    name: "Don't do this in real life"
  };
  
  weirdObject.callback = callback;
  weirdObject.callback();
}

callAsMethod(logThis); // `weirdObject` will get logged to the console

/*
 * Case 3: Calling the callback as a constructor. 
 */
 
function callAsConstructor(callback) {
  new callback();
}

callAsConstructor(logThis); // the new object created by logThis will be logged to the console

/*
 * Case 4: Explicitly setting `this`.
 */
 
function callAndBindToGordon(callback) {
  var boundCallback = callback.bind({name: 'Gordon'});
  boundCallback();
}

callAndBindToGordon(logThis); // {name: 'Gordon'}

// In a twist, we give `callAndBindToGordon` a function that's already been bound.
var boundOnce = logThis.bind({name: 'The first time is forever'});
callAndBindToGordon(boundOnce); // {name: 'The first time is forever'}

Conclusion:

So, this was all about “this”.

The value of ‘this’ keyword depends on the situation, analyze the situation and figure out what ‘this’ represents.

You gave your precious time to read this article.

Thank You.

Everything is a ToDo list.

Hi Everyone!

Today’s topic might not be clear from the heading, so let me make it clear over here. This post is a bit different so brace your self to think a bit.

In the field of programming, it is very important to understand the fundamentals and core concepts of programming. This field requires you to think differently.

Most people find coding quite tough and the reason being the way they think about web-applications. Anyone can learn the syntax of a computer language, and print ‘Hello World’.

But to literally build something you got to Think Differently…

And that’s what we are going to do today. Don’t go to the different purposes of these web-applications, instead try to see the common pattern that I am trying to point out.

Everything is a todo list.

Every web-application is a kind of todo list app. Let us see how.

ToDo List app:

The picture below is from a todo list web app.

Enter your task to be done and it will add it to the list.

Google is a kind of ToDo List app:

Google is a kind of todo list app, instead of tasks in the list there are the search results.

Enter your query and it gives you the list of search results.

E-commerce(Amazon) shopping cart:

A shopping cart is also a kind of todo list app. Instead of tasks, there are products and items on the list that you saved.

Select your product and it will be added to the list of the cart.

In fact, messaging apps are a kind of ToDo list.

All messaging apps are also a kind of todo list. the only difference is that the text input bar is at the bottom.

See the first image of todo list app, I am about to convert it to a messaging app. Here we go.

conclusion:

Every web-application is a kind of todo list app. Very rarely you would found an application that does not fits into this pattern.

Once again (Don’t consider the functionality of these sites, instead try to see the pattern, I am trying to point out.)

Hence,

A todo list app is a great place to start for beginners.  Walk your way through an advance todo list app (like the one shown in the image above.) to get familiar with concepts used in almost all web applications.

Amazing new articles are about to come, stay tuned!

Thank You.

The most difficult CS subjects.

Hi Everyone!

Let’s talk about the most difficult CS subjects and why these subjects are considered difficult.

These are the subjects that really need an astonishing amount of hard work to excel and master them.

So, without any further due, let’s just dive into this.

The hardest CS subjects:

1.ARTIFICIAL INTELLIGENCE: Giving consciousness to machines, and making them able to take their own decision. This is the most difficult subject in the industry because here you have to be a multi-talented person.

  • Your mathematics needs to be strong enough.
  • You should know how to handle the database.
  • You should be able to develop your own algorithms.
  • Offcource, you need to know how to code.

And the thing that makes AI even more difficult is that it isn’t static, the system by itself gets better and better. Hence to be in the game you have to keep improving yourself.

IT is said about AI that:

“You can initiate it, but you can’t stop it.”

2.THEORY OF COMPUTATION: You might not have heard of it ever. You gave a command to the computer to do ‘X’ and it did. But have you ever imagined how the computer did it – well that’s what is Theory of computation.

The study of that process by which a computer implements a command is called Theory of computation.

Here the expert never asks ‘What?’,  instead, they only ask ‘How?’

They don’t care WHAT the result is, but HOW that result came into existence.

3.MICROPROCESSORS / LOGICAL CHIPS: Those small computers and chips that can do processing for you. This is what you have in all your electronic devices including your smartphones.

It is a big deal to program these processors.

4. ADVANCE DATABASE: You know this, the management and storing of data in a systematic way. It is easy to store data when it is in small quantity. But when it becomes huge it becomes a nightmare to store and maintain it.

It is an art to store and manage a huge amount of data.

5. COMPILER DESIGN: Converting high-level language into machine language. A very rough way to understand it is this:

This is all about creating a software that makes other software.

SO, these were the most difficult subjects of computer science. If you mastered these subjects you can get a huge payoff.

If you liked it then stay tuned for more such articles, and you can also check our previous articles.

Thank You.

Avoid these bad coding habits.

Hello Everyone!

When it comes to coding, most people think it is something mystical that only geeks can understand. Believe me, it is not like that my friend. Anyone can code with a fair amount of practice.

There is nothing mystical about it.

Coding is a skill like any other. Like language learning, there’s grammar and vocabulary to acquire. Like math, there are processes to work through specific types of problems. Like all kinds of craftsmanship and art-making, there are techniques and tools and best practices that people have developed over time, specialized to different tasks, that you’re free to use or modify or discard.

Here we are about to see a few bad coding habits that you must avoid.

Avoid these bad coding practices:

1. Saying “I’ll fix it later”.

The habit of postponing code fixes is not merely a problem of priorities. Organizing your issue tracker might generate some progress, but you also need to have a way of tracking smaller issues that come up. Adding “TODO” comments is a quick way of making sure you don’t miss anything.

2. Insisting on a one-liner solution

Being obsessive about writing efficient, elegant pieces of code is a common trait of programmers. It’s like solving a puzzle—you find a combination of functions and regular expressions that turn 20 code lines into 2 or 3. Unfortunately, it doesn’t always result in readable code, and that’s generally the far more important outcome. Make your code accessible first, then clever.

3. Difficulty seeing through recursion

The idea of recursion is easy enough to understand, but programmers often have problems imagining the result of a recursive operation in their minds, or how a complex result can be computed with a simple function. This makes it harder to design a recursive function because you have trouble picturing “where you are” when you come to writing the test for the base condition or the parameters for the recursive call.

4. your code is a mess

Symptoms
  1. Doesn’t follow a consistent naming convention.
  2. Doesn’t use indentation, or uses inconsistent indentation.
  3. Doesn’t make use of whitespace elsewhere, such as between methods (or expressions).
  4. Large chunks of code are left commented-out.
Programmers in a hurry commit all these crimes and come back to clean it up later, but a bad programmer is just sloppy. Sometimes it helps to use an IDE that can fix indentation and whitespace with a shortcut key, but there are programmers who can even bludgeon Visual Studio’s insistence on proper indentation by messing around with the code too much.

5.Reinventing the wheel all the time

Don’t write code you don’t need to. Perhaps someone else has spent a good deal of time on your problem already, and he or she might have a well-tested solution that you can reuse. Save yourself some trouble.

Conclusion.

As the old saying goes, “If it walks like a duck and quacks like a duck, it’s probably a duck.” The same is true for bad code. If it looks like bad code and smells like bad code, it’s probably bad code. The infallible developer does not exist. The almighty developers that came before may have made a mistake, and you will too. It is how coding works.
So, this is it for this article. We will surely talk about good coding habits and practices in upcoming articles.
Thank You.

JavaScript debugging dev tools.

Errors can and will happen every time you write some new computer code.

Programming code might contain syntax errors or logical errors. Many of these errors are difficult to diagnose.

Often, when programming code contains errors, nothing will happen. There are no error messages, and you will get no indications where to search for errors.

Searching for (and fixing) errors in programming code is called code debugging. And believe me, that’s not easy but the most valuable skill a developer could have.

Hence, here I am with top JavaScript debugging tools.

Chrome DevTools:

chrome dev tools

Google Chrome DevTools is a set of debugging tools that can be used to debug JavaScript code right from the Chrome browser as they are inbuilt. You can get to interact with HTML, CSS and JavaScript all from the browser simply by clicking the inspect element button.

It has the resources panel for inspecting the storage of web pages such as the HTML5 database, cookies, local storage etc.

You may have been using Chrome all these years without knowing that it has a debugging tool with so much power.

Sublime Web Inspector:

SublimewebinspectorThe sublime web inspector is a javascript debugging tools. The sublime web inspector allows you to debug, whatever you edit in your programs. It works on top of Web Inspector Protocol.

If you use Sublime Text Editor for your JavaScript editing, then Sublime Web Inspector allows you to debug from the same program you edit with. It works on top of WebInspectorProtocol, with all information displayed in console and text files.

Node.js Inspector for Debugging Requests to Node Apps

Debugging the Node.js on your application’s backend can be challenging. The following tools take advantage of the capabilities of the Node.js Inspector to assist you:

 

React Developer Tools

IN THE BROWSER: The React tab shows props and state values if they exist for the selected elements.So, these were the four debugger tools that can make debugging easier for you. You can learn to use them through the tutorials available online for free. Hope you liked the article.

Thank You.

Plunker and Angular JS.

Hi Everyone!

Let’s talk about Plunker, what is it and how is it related to Angular JS.

Plunker is an online community for creating, collaborating on and sharing your web development ideas. Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build the web.

This is what they say in technical terms, let me clarify this.

Plunker:

Plunker or plnkr is an integrated web development environment and is completely written in AngularJS. The plunker website also provides you to write plunks(codes) and share it with other developers.

There is also the ability to search for popular JavaScript library and refer it to your current plunk. Another feature is the live preview which is quite handy when you are learning AngularJS as you can see the result of your code change in real-time.

Some of the other features are the ability to do real-time collaboration on Plunker and I recommend that if you are going to do any serious AngularJS development then try Plunker first.

A really handy feature is that you can use almost any framework right from the editor, without any complex setup.

We can code up Angular in the browser using plunker. It gives us the ability to try our Angular quickly without requiring complex setup.

It also gives us a unique URL so:

  1. We can quickly take a look at some code another person has written.
  2. We can share our code with other people, which is especially useful when we are stuck with some broken code and need help.

Why do most Angular JS people prefer Plunker?

The material reason is that Plunker allows creating an arbitrary number of files, while JSFiddle (or JSBin, for that matter) restrict you to one HTML + one CSS + one JS. Plunker also allows downloading the project as a ZIP.

Plunker allows you to describe a larger example of functional Angular.js code than JSFiddle.  It also gives better feedback and real-time previews as you type.

JSFiddle, on the other hand, allows you to quickly share a single example of some functional code, mainly a jQuery snippet of some sort.

Both are great platforms and have contributed so much to the community.

So, I hope that you liked this post and got some useful information. Stay tuned for more such contents.

Thank You.

Developer v/s Hacker v/s Programmer v/s Computer Scientist.

Hello Everyone!

This is going to be very interesting.

In this article, I will talk about Hackers, Programmers, Developers, and Computer Scientists. The level of their knowledge and expertise. I will try to keep it simple while explaining their roles in the industry and how they are different from each other and plays a different role.

We will also try to figure out who is more suitable for what job.

With this article, I am not judging any profession, because I understand very well that every profession has its own importance in the industry. The entire industry will collapse if even one of them vanishes.

So, without any further due, Let’s begin.

Computer Scientist.

A Computer scientist is the one who experiments with different computer languages. They know everything from the binary (bit 0,1,0,1) to all the way to software and hardware.

Understanding the Algorithm and Data structures. These people are often very good at Mathematics. Without any doubt, a computer scientist is at the top.

Yet! They are not directly involved in the industry that much. The reason being their extreme knowledge. Yes, you heard it right. They are mostly focused on solving big problems.

A computer scientist is the one who develops or invents new programming languages.

For instance, Tim-Berner-Lee is a very well known Computer Scientist. You can check about his latest project Here. Thanks, him if you are using the World Wide Web (www).

Programmer.

A programmer is the one who understands a pre-written programming language and uses it to write a program for machines or computer to say.

They understand almost all the programming languages that exist in their era. They never stop learning.

They write programs on which different software runs.

A programmer may be working on different languages at a time, while the work of a computer scientist is very specialized.

Developer.

A Developer is surely the most sought and in-demand professional in the industry.

They understand and masters a particular computer language. While as mentioned earlier a programmer can be working with almost all existing languages at a time.

They possess a very specialized knowledge.

For example:

  • Android developer
  • IOS developer
  • Web developer

Hacker.

A Hacker is the one who works in an emergency scenario. Knowledge level of a hacker depends on individuals.

Their knowledge is not syllabus based.

Basically, they find bugs in the system and hacks it (with the owner’s permission). Just tries to enter the system anyhow.

Sometimes a hacker could be as good as a developer or a programmer.

Kinds of hackers:

  • Ethical hacker (White hat hacker)
  • Unethical hacker (Black hat hacker) – Illegal

Quick summary:

  • Computer Scientist – Research-based specialized work, inventing new languages.
  • Programmer – Knows and understands many languages and writes code for software and machines.
  • Developer – Specialized knowledge, master in a particular language.
  • Hacker – Works in the emergency case to save the data and system.

So,  that is it for this article. Once again I will say – I am not judging any profession.

Feel free to comment below.

Thank You.

FrameWorks and their pros and cons.

Hello Everyone!

Let’s talk about Frameworks. Today we are going to look at some pros and cons of using a framework.

Before that let’s have a quick explanation of Frameworks.

What is a FrameWOrk?

In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software.

A framework is a set of pre-written programming code that anyone can use to save their time and energy. Different programming languages have different frameworks. Often the framework is also referred to as coding libraries.

Libraries are a bunch of codes that can save your time by already implementing the functionality you want.

Types of Frameworks:

  • UI/CSS Framework: Bootstrap, Materialize, Bulma, etc.
  • Frontend JS Framework: React, Vue, Angular, etc.
  • Backend Framework: Laravel, Express, Django, etc.

UI Framework:

Pros:

  • Faster development and prototyping.
  • Responsive by default.
  • Browser compatibility.
  • Documentation and support.
  • JavaScript widgets/plugins.

cons:

  • Stops developers from learning CSS.
  • Less Customization.
  • Lots of overriding styles.
  • Many sites look the same.
  • Many depend on JQuery for certain things.

Frontend JS Framework:

Pros:

  • Much less work for large frontend application.
  • Organized, component-based design.
  • Robust data/state management.
  • Virtual DOM (Fast performance).
  • Reliable and tested.
  • Great for teams.

cons:

  • Adds complexity for simple projects.
  • Can be too opinionated / less freedom.
  • Stops beginners from learning actual JS coding.
  • Updates can introduce issues.

Backend Framework:

Pros:

  • Saves a ton of time and makes things much easier.
  • Very flexible and allow you to build anything.
  • Built-in Security.
  • MVC (Modal view controller).
  • Built-in routing.
  •  Community documentation and support.

cons:

  • Can stop beginners from learning the fundamentals of coding.
  • Less Freedom.
  • That’s all I got.

Conclusion:

So, in the end, it literally comes down to the individual developers and programmers choice. Definitely, Framework is an amazing tool, but you should also be able to work without them.

That is it from my side for this article. Stay tuned for more such contents.

Thank You.

5 WP plugins every developer must have.

Hello everyone!

If you’re a web developer working with WordPress, read on to get five great plug-ins that can help in every aspect of the development process.

WordPress plugins for developers are rated highly by developers since they help make their work easier. I have researched and found these 5 WordPress plugins that stand out as the most useful plugins for developers.

While there is no scarcity of WordPress plugins in the world, I want to showcase some of the plugins that I think you code junkies out there may get some use out of and up your game.

So, let’s begin.

5 WP plugins for developers:

  • User Switching10 Best WordPress Plugins for DevelopersUser switching can be described as a developer’s best time saver. Ever wondered how to quickly login and log out from your WordPress site in order to view how other viewers see your website? You don’t have to keep logging in and out of your site, you can now use this plugin to switch between different users, saving you a great deal of time. This plugin allows you to switch between registered users without having to login in and out. With a click on a button, you can easily and quickly switch WordPress users.
  • Query Monitor query monster plugin for wordpress developers
    Query Monitor lets you view all the ongoing database queries, as well as the rows being affected. You can also view rewrite rules, hooks fired on the current request, PHP errors and warning and even template filenames and parts. Furthermore, Query Monitor is one of the very few WordPress plugins for developers that let you keep track of AJAX calls, REST API requests and redirects. So if you are working with the WP REST API plugin, Query Monitor can prove to be very useful.

     

  • Debug BarBest WordPress Plugins for Developers

    Put simply, Debug Bar helps you debug your WordPress site in the most efficient way. You can check for PHP errors, database errors, and requests, various cache options, too. Plus, the plugin description mentions a lot of add-ons that give you “more insight into, for instance, the registered Post Types, Shortcodes, WP Cron, Language file loading, Actions and Filters and so on.”

  • Developerplugins for developer_9This is the ultimate plugin for testing your WordPress development environment. This plugin checks and ensures that your development environment is configured correctly including the plugins, constants and other settings. This plugin helps developer develop by optimizing their environment and ensuring essential tools and plugins are installed.
  • WordFenceImage titleWeb security is very critical in the tech world nowadays. Cyber breaches may cause harm to the whole organization. As a developer, you need to take care of your website. WordFence will help you shield your web pages by building a firewall and malware scanner. The malware scanner checks core files, themes, and plugins for malware, bad URLs, backdoors, SEO spam, malicious redirects, and code injections.

For more helpful WP plugins, with their detailed review please visit: List of really good and important plugins for WordPress.

I Hope that it was helpful to you. If you want us to touch any topic regarding web development than please let us know in the comments below.

Thank you for reading this far.