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.

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.

How to remain updated with changes in web development.

Hello all!

In the world of coding, things keep changing and as a developer, you ought to be always updated with new technologies and things coming up.

And nowadays changes happen very fast, almost every month something new comes in the world of web development.

Today I will be right to the point. This one is a short article.

In order to remain updated with changes in the field of web-development, often we search for it on the internet.

But, wouldn’t it be nice if you could get all the updates automatically every week. So, brace yourself that’s what I am gonna tell you today.

Below I am providing 2 newsletters, You just have to subscribe to these weekly newsletters and every week you will be updated with the latest changes via E-mail.

Resources:

  • Frontend Focus: A once–weekly roundup of the best front-end news, articles, and tutorials. HTML, CSS, WebGL, Canvas, browser tech, and more.

  • JavaScript Weekly: A free, once–weekly email roundup of JavaScript news and article.

Now every week just sit and wait for your newsletter to arrive with all the latest updates of HTML, CSS, JavaScript, browsers, and more.

So, this was all for this article. If you know some similar or better resources than please share it in the comments.

Thank You.

Understanding Screen resolution.

Hello and welcome everyone.

So, straight to the topic. Today we are going to decode the science behind the screen resolution and would also see, how it is calculated?

There is no rocket science in this, yet it could be a bit complex for some readers, hence pay attention.

Why is it a big deal?

screen size is important because there are lots of different screen sizes. Whether you’re deciding to build for windows or MacBook, both platforms have tons of different devices.

Resolution is also important. That’s because the resolution of different screens can affect how designers build their sites. Based on this information, there are certain things that a designer or developer needs to know.

So as you can see, both screen size and resolution size are important, but for different reasons.

As a website owner or web designer or developer, you have to take into consideration what are the most common screen resolutions for the intended target audience of the website to determine what web page width is suitable for the website.

These days we have many different screens sizes all with different resolutions – TV’s, desktop monitors, laptops, tablets, mobile phones, and even smart watches.

What is screen resolution?

To understand resolution you need to understand how a screen works. Screens are made up of thousands of tiny dots all bunched together called pixels, each one has the ability to change color and when you zoom out all the dots joined together to make up an image.

Screen resolution is the measure of the number of pixels a screen can display. This would be measured by width and height. For example, a screen that has 1,024 pixels horizontally, and 768 vertically would have a resolution of 1,024 x 768.

How is it calculated?

Resolution is the maximum number of pixels that can be displayed on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels), i.e., 1024×768.

The higher the screen resolution the more information can fit on the screen.

Screen size is usually measured in inches and is the actual size of the device’s screen measured diagonally. Anyone with a tape can measure the screen size. Screen resolution is measured by the number of pixels displayed in each dimension. In order to calculate the pixels per inch, you need to know the screen size as well as the resolution.

The formula to calculate PPI is a bit complicated. You need to take both the digits in screen resolution. Add a square of both these digits and take a square root of the result. The final number should be divided by the size of the screen.

For example – if the screen size is 5.8 inches and screen resolution is 1138 X 680, then PPI can be calculated as –1138X 1138 + 680 X 680 = 1757444.  A square root of 1757444 is 1325.69. Now, divide the number 5.8 i.e. 1325.69/5.8 = 228.5.

Final Words.

The idea behind considering screen resolution and screen size is to build an app that is visually compatible with any android and iOS device. If you are building an app with one screen in mind, it will spoil the user experience. Poor user experience will hurt the quality of your mobile app, which is something every developer should avoid.

If you have any question in mind, feel free to ask in the comments.

Thank You.

Top 7 forums for Web-Developers.

Hi Everyone.

Today we will be talking about learnings. For a web-developer learning is a lifelong process.

There are various ways, resources, and methods to learn from. But here we gonna talk about one of the most important ways.

That is by joining online web-development forums.

What is a forum?

A forum is an online place where different people from the same field are connected so that they can discuss various things related to their field.

A forum is great way to learn from others experience and expertise. You can also share your point of views on these forums. (These forums might have some regulations.)

So, we are about to see the top 7 Web-Development forums for 2018 – 2019.

Top 7 Web-Development forums.

  • Launch Chat:

    Launch consists of developers, entrepreneurs, designers, and marketers primarily working in the tech space. Its homepage is full of members who are “Y-Combinator founders, Thiel Fellows, serial entrepreneurs, investors, and passionate makers”.

  • frontendDevelopers:

    frontendDevelopers is a fabulous place to find new gigs. Apart from that, you can get feedback from like-minded developers, share ideas, and learn the latest trends in this forum.

  • Webdeveloper.com Forum:

    Webdeveloper.com is a forum about general web development and programming. The site is separated into sections: client-side development, server-side development, and site management.

  • Stack Overflow:

    It’s one of the most popular developer’s community site with questions and answers. You develop a reputation by answering questions and upvotes. Users with higher reputation can comment, vote and even edit comments of other people.

  • HTML Forums:

    HTML Forums is dedicated specifically to HTML. There are “electrifying discussions” there. Also, you can find information on traffic and links sale, server administration, domain names for sale and much more.

  • The SitePoint Forums:

    If you are looking for a great place to find answers to your questions about HTML, CSS, Marketing, JavaScript, PHP, Net, Database, design, and UX, hosting and more. Than the SitePoint forum is for you.

  • Webdevforums:

    On Webdevforums forum you can get feedback about your website, find useful tutorials, ask questions about marketing and SEO. Use categories at the bottom of the page to navigate the website.

Besides the list, I provided above there are two awesome places where you can find like-minded people and forums on every possible field.

Quora.com & Reddit.com

I hope that you will use a few or at least one of the suggested forums to keep learning.

You gave your precious time to read this article, Thank You.

Top CMS out there in 2018.

CMS:

A content management system is a software that helps us to manage our content and site.

You can literally manage everything from a blog to an e-commerce site, using CMS. You can manage an article if you have a blog, or manage your product if it is an e-commerce business.

It has made our life so easier that we just can’t imagine having a site without CMS. You can operate most CMS out there even if you have no prior technical knowledge.

Today we are going to talk about the top CMS in 2018, there features, flexibility and specifications because that’s what they are known for.

So, without any further delay let’s begin.

Top CMS:

  1. WordPress: This one goes without saying. Probably the best one out there. WordPress can make almost any kind of site either it is a blog, a real state site or an e-commerce. It can make anything under the sun. WordPress is the framework behind many of the websites and blogs you visit every day, including this one. .org Few of the key features are responsive design, social sharing features, multiple page styles, auto upgrade, and standard compliant coding. The one thing that makes it a CMS beast is plugins.
  2. Joomla: Joomla is a popular Content Management System. It is much more than just a powerful content management system. Besides, hundreds of extensions to enhance the functionality of any Joomla website, Joomla itself includes some powerful built-in features (or core features). Many times ranked as the 2nd best CMS after WP. zoomla Few key features are Rss, media manager, web links, search, banner management and, user management.
  3. Drupal: Drupal 8 takes an already terrific content management framework to ever greater heights for users, administrators, and developers. There’s a seriously sharp focus on user-friendliness, but the content presentation, new ways to create data structures, build APIs, multilingual capabilities, and the delivery of mobile accessibility out of the box? Drupal 8 brings those to the table too.  Few of the features are mobile first, multilingual ready, loading speed, javascript automated testing.
  4. Magento: Specific to make an e-commerce site. The large array of features is one of the main benefits of Magento. Through them, you can easily develop and manage a successful online store. Magento features like different payment engines and shipping options along with the international support and high security using an  SSL certificate will make your shop an attractive place for e-commerce.  The core features are checkout payment and shipping, analytics and reporting, marketing and promotional tools, and order management.
  5. OpenCart: OpenCart is an open-source shopping cart built on PHP/MySQL code. Distributed as a free eCommerce solution, OpenCart is a very user-friendly and effective platform that comes with a very intuitive and well-designed user-interface as well as a higher selection of extensions. Perfect for small businesses and medium-sized e-commerce stores, OpenCart is loaded with all the basic functions a user would need from an e-commerce solution.  Main features are, Product Reviews, Product Ratings, open source, multi-currency, automated image resize, 20+ payment gateways, and 8+ shipping methods.

One honorable mention is WIX. Very user-friendly having drag and drop interface.

SO, these were the top of 2018 CMS. You should choose one according to your needs.  Keep visiting for such more articles.

Thank You.

Deploying a live site with free Domain and Hosting.

Hello everyone!

In this article, we are about to create an entirely new site from scratch with free domain and free hosting.

I am going to create one for the sake of this tutorial, which you can visit to check at the end of this article.

Before we start, let me clear this for one last time: for the domain, we are using freenom.com and for hosting we are using 000webhost.com.

Let’s do it:

Domain registration:

At freenom.com you will get free domain name extensions like “.tk, .ml, .ga, .cf, and e.t.c”.

  1. Go to freenom.com and search for your free domain. We are going to use mytrialsite.tk for our tutorial. freenom
  2. Choose your preferred extension, checkout and continue.
  3. Sign in with your E-mail id, verify your account and set up your account details and click on complete order. freenom
  4. Go to service in the navigation bar and select My Domains from the drop-down menu. freenom
  5. There you have your registered domain. freenom

Getting the free Hosting:

Now we have our domain, so let’s get the hosting from 000webhost.com.

  1. Go to 000webhost.com and click on sign up for free. freenom
  2. Now you will be shown 3 hosting plans. Choose Free web hosting and continue. freenom
  3. Sign up with e-mail and enter your website name and verify your account. freenom
  4. Select Manage Website.  freenom
  5. Here you are in your dashboard. Now select “set web address“. Then it will ask you to upgrade but don’t. click on “It’s OK, I don’t mind 000webhost branding“. freenomwebhost
  6. Next, you will have two options – Own Domain and Buy-Domain. Select “Own Domain“. webhost
  7. At this point, it will ask you to park your domain. BE CAREFUL AT THIS POINT DON’T ENTER YOUR DOMAIN AND CONTINUE RIGHT NOW. I personally have troubled a lot here. Please mark my words don’t hurry here.

Pointing domain to your hosting:

First park domain to your hosting and then complete step 7 above.

  1. Go back to freenom, where you left it in step 5. click on “manage DNS”. freenom
  2. Under the drop-down menu of “management tools” choose “Nameserver”. freenom
  3. In Nameserver choose “use custom nameserver”. And enter these two nameservers: (ns01.000webhost.com ns02.000webhost.com). Continue by clicking on change nameserver. freenom
  4. Now is the time to enter the domain name in 000webhost at step 7 in the previous section. Back to 000webhost, enter your domain and click “park domain“. In most cases, it will be parked immediately or it may take up to an hour. webhost

Hurray:

The site is now live on the internet. To make it attractive and add some content you can install WordPress.

So, let’s see how to do it.

  1. Click on “Build Website”. webhost
  2. Select WordPress and install. Also, change admin username from admin to whatever you want. wpwp

That is it you are done. Now customize your site in WordPress. We are not gonna talk about WP settings here, but maybe in some other article.

Well you can check the site I used for this tutorial, it is live on the internet with some WP customization. Here is the link.

www.mytrialsite.tk

IT takes just 5 minutes to make your site live. There are other free hosting providers as well you can check the list here.

Tutes.club – 10 free web hosting service providers.

So, I hope that your free site will also be live on the internet very soon. If you liked this article then you can check out our other articles as well.

Thank You.

Solid-Inrupt: Welcome to the internet 2.0.

List of Data Breaches from 2005 to 2018. – Wikipedia. 

Before going ahead I want you to check out the list above, it will give you an idea that what is happening to your personal data, and there is no privacy at all.

Take the recent Cambridge Analytica & Facebook case, 5 million individuals data was leaked or sold by Facebook. Also, you may have heard the latest one about G+, Google plus is shutting down after 500,000 users data was exposed. 

On the internet, there is no such thing as Privacy. Yes! it is something to be worried about.

OR

Maybe not anymore.

Enough is enough, the father of the internet want the power back in his hands. His dream was to create a secure network where individuals would have been the owner of their own data, but surely that is not happening with WWW.

So, Tim Berners Lee decided to rebuild the internet. 

Solid Inrupt: About.

Solid Inrupt is the name of this project of remaking the internet. Here is the official site of solid inrupt.

https://solid.inrupt.com

Tim Berners Lee took this project of the new internet because as the internet evolved it diverged from Sir Tim’s original and inspiring vision. (Individuals to be the king of the internet).

Tim and Team have given 15 years to make it a reality.

Tim wants to provide a platform for the next generation of truly empowering and innovative developers.

How it works:

You decide where you store your data. Since you own your data, you’re free to move it at any time, without interruption of service or penalties.

whenever you’re opening up a new app, you don’t have to fill out your details ever again: they are read from your POD with your permission. Things saved through one app are available in another: you never have to sync, because your data stays with you.

What is POD?

Your POD is your personal storage space. All your data will be stored in your POD, not on the server of Facebook or Google, where they can manipulate it.

PODs are like secure USB sticks for the Web, that you can access from anywhere. When you give others access to parts of your POD, they can react to your photos and share their memories with you.

You can have as many PODs as you like, and they live on Solid enabled Web servers. Install the Solid Server on your own server at your home or workplace, or Get a Solid POD from a listed provider.

In order to prove ownership of your data, you need a way to identify yourself. Rather than relying on a third party, you can use your Solid POD to say who you are. So no more “Log in with X” or “Log in with Y” on the Web — just “Log in with your own Solid POD”.

What it holds for the Developers?

As far as claimed by the Solid Inrupt team, it is going to be a very promising platform and gonna create more opportunities for developers.

If you are a developer or planning to be one, then you can check their get started guide for developers. Here is the link to the official documentation page of Solid Inrupt.

https://solid.inrupt.com/docs/getting-started

But do you think that the current internet Kings like Google, Facebook and Amazon will let the power slip by their hands? They will surely not give up.

Now only time can tell what will happen, or who will win?

Father of internet V/S Kings of internet Continue reading “Solid-Inrupt: Welcome to the internet 2.0.”