Use this tool to help you prototype faster quality code

Use this tool to help you prototype faster quality code

**Use this tool to help you prototype faster quality code** Code quality often falls wayside when it comes to projects with tight deadlines. When we’re new to a language, framework or library, it’s easy to slip into a state of spaghetti thoughts,...

Use this tool to help you prototype faster quality code

Code quality often falls wayside when it comes to projects with tight deadlines. When we’re new to a language, framework or library, it’s easy to slip into a state of spaghetti thoughts, especially when you’re just trying to work things out.

You don’t know what you don’t know, and sometimes, this can lead you down an unnecessary road of major refactoring further down the line.

It’s a common issue, especially in JavaScript-based projects where many developers tend to pick things up without actually knowing JavaScript at all.

In part, this is because JavaScript is easy.

You can write something and it’ll just work without protest. There is no compiling. No bright red errors or yellow warnings. Libraries and frameworks like Angular, React and Vue might throw in some structural and architectural suggestions — but this doesn’t always guarantee that your code is robust from the get-go.

If you’re a Visual Studio Code user, the ability to install and use extensions is one of the reasons why the code editor is so popular amongst developers. There are multiple tools that are available for making your coding life easier, but there is a particular one that’s helped me become a better developer and it’s called Tech Debt Tracker.

Awareness in the moment

The perks of pair programming is that your partner has the opportunity to point out the blips in your thought processes and potential code related warning signs.

However, not every developer or engineer has the chance to get their code reviewed live by a more senior developer. Tools like Tech Debt Trackergives you the alerts and warnings that you need about your code while you’re coding.

The thing with JavaScript-based development is that there is no requirement to code in a particular way. You could write a function with five-hundred lines and the produced output wouldn’t even bat an eye.

Your app can have the appearance of working just fine. But when it comes to inspections under the hood, you’d find that the wiring is not quite right.

When it comes to creating code, we are the human bridge between ideas and machines. In order to do this effectively, we need to learn how to communicate and connect the ideas together properly via code.

So when someone else sees five hundred lines worth of gibberish, you have failed yourself as a developer. Code is a communication and in order to communicate effectively, other developers need to understand what it is you’ve written.

To you, the code may make sense. But to the future and improved you, this code may actually not be at the quality and level you need it to be.

Tech Debt Tracker’s rating system prevents this, to a certain degree, from happening. It does this by assessing your code based on a series of six metrics — length, argument count, complexity, understandability, nesting depth and comment density.

Why it matters

There is a common misconception that the fewer lines of code you have, the better your code is.

This logic doesn’t work if you apply it to the minified version of the same code. When it comes to minification, everything sits on one line. But this doesn’t make the code’s quality any better than the original.

That’s just formatting.

True code quality often starts with the six metrics above. Length is not about your line count — but how long your actual code is. For example, the longer a function, the higher the chances for it to interface an error or unhandled side effect. Complexity is linked in with length.

The perks of Tech Debt Tracker is that it’s an extension that runs locally in the background, giving you live updates on your code quality scores. This means that you can consistently establish the quality of your code against pragmatic standards that can be extended to other team members with ease. It also means that in a team setting, you’re able to self review your code against a standard before committing or running your CI/CD pipeline.

If you are developing a project on your own or are just starting out without someone to review your code, the VS Code extension unwittingly turns into your free personal code tutor, pointing out where and why you’re going wrong.

What’s your code story?

Learning to code is like learning to write a novel — you’re creating a series of systems and rules, where your user is the active protagonist in the tale. They are experiencing the story which unfolds based on a series of actions.

As the code creator, you are creating a world that needs to be systematic in approach and simplified in a way that is accessible by others.

Juniors to a new concept, framework or library, often fall prey to overthinking, over-creating and over-engineering the code. They may end up writing an unnecessary amount of loops, promises, callbacks, nested functions and declaring variables in strange places with insider-knowledge names.

Sometimes we fall into bad patterns because of our preconceptions. Things that may work well in other spaces and languages may not be exactly transferrable. It takes practice to recognize our own bad patterns in context, something which many among us don’t realize we have.

How to use Tech Debt Tracker as a prototyping and learning tool

Tech Debt Tracker is made for teams, complete with GitHub collaboration features but I’ve been using it as a code improvement tool.

Inadvertent debt is a type of technical debt that is impossible for every developer to avoid. It is the type of debt that’s coded in due to lack of skill or awareness of a particular idea, knowledge topic or latest developments in the industry.

This kind of debt is not always the developer’s fault and can occur at any level. Tech Debt Tracker brings awareness to the process of coding and addresses potential issues before they become entrenched.

It can be hard when you’re coding by yourself with no one there to guide you. You may be self-taught, still in the process of learning, picking up something new and out of your main realm of expertise — but you can’t know what you don’t know. It gets even harder if you don’t realize you’ve got bad habits or major gaps in knowledge.

Using tools like Tech Debt Tracker can help increase your code awareness. It can also teach you a few things about code quality and how to achieve it. The tool is free and can be implemented at any point in your development process.

Final thoughts

The issue with many solo projects is that we often take code quality as the last point of consideration. A lot of us, especially newbies, stop when it starts working.

But if it works, why go further?

If you chose to ignore code quality as a facet of your development process flow, it is akin to building your app with sticks rather than bricks. The structure may appear to work under the current conditions, but if it ever gets stressed through requirement changes or the addition of new features, your code may collapse into itself over time.

It’s easy to write bad code. It’s harder to get into the right habits and mentality — something which Tech Debt Tracker can help guide you over with and get your code right the first time around.

You can download Tech Debt Tracker here or via Visual Studio Code Extensions.

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20

How to Retrieve full Profile of LinkedIn User using Javascript

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Here we are fetching LinkedIn data like Username, Email and other fields using JavaScript SDK.

Here we have 2 workarounds.

  1. Configuration of linkedIn developer api
  2. Javascript Code to fetch records

Configuration of linkedIn developer api

In order to fetch records, first we need to create developer api in linkedin which will act as token/identity while fetching data from other linkedin accounts.

So to create api, navigate to https://linkedin.com/developer/apps and click on 'Create Application'.

After navigating, fill in details like name, description and other required fields and then submit.

As we submit, it will create Client ID and Client Secret shown below, which we will be using in our code while communicating to fetch records from other LinkedIn account.

Note: We need to provide localhost Url here under Oauth 2.0. I am using my localhost, but you can probably use other production URLs under Oauth 2.0 where your app is configured. It will make your api  consider the Url as trusted which fetching records.

Javascript Code to fetch records

For getting user details like first name, last name,User image can be written as,

<script type="text/javascript" src="https://platform.linkedin.com/in.js">  
    api_key: XXXXXXX //Client ID  
    onLoad: OnLinkedInFrameworkLoad //Method that will be called on page load  
    authorize: true  
</script>  
<script type="text/javascript">  
    function OnLinkedInFrameworkLoad() {  
        IN.Event.on(IN, "auth", OnLinkedInAuth);  
    }  
  
    function OnLinkedInAuth() {  
        IN.API.Profile("me").result(ShowProfileData);  
    }  
  
    function ShowProfileData(profiles) {  
        var member = profiles.values[0];  
        var id = member.id;  
        var firstName = member.firstName;  
        var lastName = member.lastName;  
        var photo = member.pictureUrl;  
        var headline = member.headline;  
        //use information captured above  
        var stringToBind = "<p>First Name: " + firstName + " <p/><p> Last Name: " + lastName + "<p/><p>User ID: " + id + " and Head Line Provided: " + headline + "<p/>"  
        document.getElementById('profiles').innerHTML = stringToBind;  
    }  
</script>    

Kindly note we need to include 'https://platform.linkedin.com/in.js' as src under script type as it will act on this Javascript SDK provided by Linkedin.

In the same way we can also fetch records of any organization with the companyid as keyword.

<head>  
    <script type="text/javascript" src="https://platform.linkedin.com/in.js">  
        api_key: XXXXXXX ////Client ID  
        onLoad: onLinkedInLoad  
        authorize: true  
    </script>  
</head>  
  
<body>  
    <div id="displayUpdates"></div>  
    <script type="text/javascript">  
        function onLinkedInLoad() {  
            IN.Event.on(IN, "auth", onLinkedInAuth);  
            console.log("On auth");  
        }  
  
        function onLinkedInAuth() {  
            var cpnyID = XXXXX; //the Company ID for which we want updates  
            IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=10&format=json").result(displayCompanyUpdates);  
            console.log("After auth");  
        }  
  
        function displayCompanyUpdates(result) {  
            var div = document.getElementById("displayUpdates");  
            var el = "<ul>";  
            var resValues = result.values;  
            for (var i in resValues) {  
                var share = resValues[i].updateContent.companyStatusUpdate.share;  
                var isContent = share.content;  
                var isTitled = isContent,  
                    isLinked = isContent,  
                    isDescription = isContent,  
                    isThumbnail = isContent,  
                    isComment = isContent;  
                if (isTitled) {  
                    var title = isContent.title;  
                } else {  
                    var title = "News headline";  
                }  
                var comment = share.comment;  
                if (isLinked) {  
                    var link = isContent.shortenedUrl;  
                } else {  
                    var link = "#";  
                }  
                if (isDescription) {  
                    var description = isContent.description;  
                } else {  
                    var description = "No description";  
                }  
                /* 
                if (isThumbnailz) { 
                var thumbnailUrl = isContent.thumbnailUrl; 
                } else { 
                var thumbnailUrl = "http://placehold.it/60x60"; 
                } 
                */  
                if (share) {  
                    var content = "<a target='_blank' href=" + link + ">" + comment + "</a><br>";  
                    //el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";  
                    el += "<li><div>" + content + "</div></li>";  
                }  
                console.log(share);  
            }  
            el += "</ul>";  
            document.getElementById("displayUpdates").innerHTML = el;  
        }  
    </script>  
</body>  

We can get multiple metadata while fetching records for any any organization. We can get company updates as shown below.

Conclusion

We can also fetch any company specific data like company job updates/post, total likes, comments, and number of views along with a lot of metadata we can fetch which I have shown below.

Thank you for reading !

7 Best Javascript Iframe Libraries

7 Best Javascript Iframe Libraries

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

Iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. I have compiled 7 best Javascript iframe libraries.

1. Zoid

A cross-domain component toolkit, supporting:

  • Render an iframe or popup on a different domain, and pass down props, including objects and functions
  • Call callbacks natively from the child window without worrying about post-messaging or cross-domain restrictions
  • Create and expose components to share functionality from your site to others!
  • Render your component directly as a React, Vue or Angular component!
    It's 'data-down, actions up' style components, but 100% cross-domain using iframes and popups!

Download


2. Postmate

Postmate is a promise-based API built on postMessage. It allows a parent page to speak with a child iFrame across origins with minimal effort.

Download


3. Iframe Resizer

Keep same and cross domain iFrames sized to their content with support for window/content resizing, in page links, nesting and multiple iFrames

Demo

Download


4. Iframely

Embed proxy. Supports over 1800 domains via custom parsers, oEmbed, Twitter Cards and Open Graph

Demo

Download


5. React Frame component

This component allows you to encapsulate your entire React application or per component in an iFrame.

Demo

Download


6. Seamless.js

A seamless iframe makes it so that visitors are unable to distinguish between content within the iframe and content beside the iframe. Seamless.js is a JavaScript library (with no dependencies) that makes working with iframes easy by doing all the seamless stuff for you automatically.

Demo

Download


7. Porthole

A proxy to safely communicate to cross-domain iframes in javascript

Demo

Download


Thank for read!