<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: John Dears</title>
    <description>The latest articles on Forem by John Dears (@afrinc).</description>
    <link>https://forem.com/afrinc</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F360684%2Fbabfe23c-0a51-4bc6-8fbf-7ac2584d4efd.jpg</url>
      <title>Forem: John Dears</title>
      <link>https://forem.com/afrinc</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/afrinc"/>
    <language>en</language>
    <item>
      <title>Can you say you are an Expert?</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Tue, 21 Feb 2023 14:37:21 +0000</pubDate>
      <link>https://forem.com/afrinc/can-you-say-you-are-an-expert-50ea</link>
      <guid>https://forem.com/afrinc/can-you-say-you-are-an-expert-50ea</guid>
      <description>&lt;ul&gt;
&lt;li&gt;&lt;p&gt;One of the greatest dilemmas people face is knowing when to call themselves an expert. Well there are many criterias which includes the &lt;strong&gt;&lt;em&gt;quality of experience, one's assertive confidence, and their ability to communicate clearly.&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Experts, to some level, are able to establish a &lt;strong&gt;&lt;em&gt;roadmap&lt;/em&gt;&lt;/strong&gt; for gaining expertise. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It's also important to consider one's &lt;strong&gt;rapport&lt;/strong&gt; with their peers or subordinates and well they &lt;strong&gt;conduct&lt;/strong&gt; themselves socially and how well their responses/behavior are accepted by others. I can call it social acceptance rate. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Other things to consider include the &lt;strong&gt;&lt;em&gt;target audience&lt;/em&gt;&lt;/strong&gt;, &lt;strong&gt;&lt;em&gt;improvement rate&lt;/em&gt;&lt;/strong&gt;, and &lt;em&gt;&lt;strong&gt;contribution to the community&lt;/strong&gt;&lt;/em&gt;. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Experts are those who have a deep knowledge of their subject matter, demonstrate intensity in their thoughts, are vocal in sharing their knowledge, and frequently revise their knowledge to stay current.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Becoming an expert is a continuous process that requires dedication and ongoing learning.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It's important to set goals and strive to improve in all the areas mentioned above to establish oneself as an expert in a given field.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;One's persistence and consistency in performance can help anyone become an expert. Later, Recognition follows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The belief that expertise can only be attained through a significant investment of time is a common misconception. Unfortunately, this myth has discouraged many individuals from pursuing their passions and developing their skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You can never be late to learn anything, thats for sure.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Quality, not quantity, is what matters. &lt;br&gt;
It's sad that the myth of time has become so overwhelming that some people give up before they even start.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;As Kang (Marvel fans will know this) rightly said, "Time isn't what you think it is... We can shape it..."**&lt;/p&gt;

&lt;p&gt;Well thats pushing us into whole new topic. So period.&lt;/p&gt;

&lt;p&gt;Whats your thought? Do you want to be an expert? If yes, in what?&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>discuss</category>
      <category>explainlikeimfive</category>
    </item>
    <item>
      <title>Still Refactoring : Developer diaries</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Tue, 21 Feb 2023 12:35:29 +0000</pubDate>
      <link>https://forem.com/afrinc/refactoring-developer-diaries-nei</link>
      <guid>https://forem.com/afrinc/refactoring-developer-diaries-nei</guid>
      <description>&lt;p&gt;Part 1 :&lt;a href="https://dev.to/afrinc/refactoring-no-i-don-t-want-to-touch-it-76l"&gt;Developer Diaries : Refactor Code!! Noooo.. :'(  &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But wait, the code is never truly done,&lt;br&gt;
New features and updates are always on the run.&lt;br&gt;
We need to keep it clean, and agile too,&lt;br&gt;
And that means refactoring, through and through.&lt;/p&gt;

&lt;p&gt;It's not just a one-time task, you see,&lt;br&gt;
It's a constant process, like a busy bee.&lt;br&gt;
We must embrace it, with open arms,&lt;br&gt;
And never let our code come to harm.&lt;/p&gt;

&lt;p&gt;We need to stay alert, and vigilant too,&lt;br&gt;
To catch the bugs before they ensue.&lt;br&gt;
Our users deserve the best, it's true,&lt;br&gt;
And we must deliver, it's what we do.&lt;/p&gt;

&lt;p&gt;So let's not shy away, from the task at hand,&lt;br&gt;
Let's refactor our code, and take a stand.&lt;br&gt;
We'll be the ones, who make a difference,&lt;br&gt;
And deliver software with elegance.&lt;/p&gt;

&lt;p&gt;And as we go about our daily grind,&lt;br&gt;
Refactoring our code with our heart and mind,&lt;br&gt;
We know we're making a lasting impact,&lt;br&gt;
And that's something to be proud of, in fact.&lt;/p&gt;

&lt;p&gt;So here's to all the developers out there,&lt;br&gt;
Who refactor their code with care,&lt;br&gt;
Your efforts may go unnoticed, it's true,&lt;br&gt;
But we know that you're making a difference, through and through!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Coders ft. ChatGPT</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Tue, 21 Feb 2023 12:28:23 +0000</pubDate>
      <link>https://forem.com/afrinc/poem-3-2ilo</link>
      <guid>https://forem.com/afrinc/poem-3-2ilo</guid>
      <description>&lt;p&gt;In dark basements they dwell,&lt;br&gt;
Lost in code, with stories to tell,&lt;br&gt;
Their eyes fixed on glowing screens,&lt;br&gt;
Living out their digital dreams.&lt;/p&gt;

&lt;p&gt;With fingers that dance across the keys,&lt;br&gt;
They build the world as they please,&lt;br&gt;
And in their code, there's a joke or two,&lt;br&gt;
Hidden away, just for me and you.&lt;/p&gt;

&lt;p&gt;They speak in languages we don't understand,&lt;br&gt;
With acronyms that seem quite grand,&lt;br&gt;
And if we ask what they're up to,&lt;br&gt;
They'll reply with "It's just tech voodoo."&lt;/p&gt;

&lt;p&gt;They work long hours, through the night,&lt;br&gt;
Forgetting to eat, forgetting to sight,&lt;br&gt;
Their love for code is like a flame,&lt;br&gt;
And they'll never be quite the same.&lt;/p&gt;

&lt;p&gt;They have their quirks, that's for sure,&lt;br&gt;
Like drinking Red Bull to stay secure,&lt;br&gt;
And when they get a new keyboard,&lt;br&gt;
It's like Christmas, we're all quite floored!&lt;/p&gt;

&lt;p&gt;But despite their oddities, we can't deny,&lt;br&gt;
That coders are just plain awesome, oh my!&lt;br&gt;
They build the apps we all rely on,&lt;br&gt;
And in the end, their code is the bomb!&lt;/p&gt;

</description>
      <category>coders</category>
    </item>
    <item>
      <title>The G gap;</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Tue, 20 Sep 2022 12:34:35 +0000</pubDate>
      <link>https://forem.com/afrinc/the-g-gap-13a2</link>
      <guid>https://forem.com/afrinc/the-g-gap-13a2</guid>
      <description>&lt;p&gt;"I must study politics and war so that my sons may have liberty to study mathematics and philosophy.&lt;/p&gt;

&lt;p&gt;My sons ought to study math and philosophy, geography, natural history, naval architecture, navigation, commerce and agriculture, in order to give their children a right to study painting, poetry, music, architecture, statuary, tapestry and porcelain.&lt;br&gt;
"&lt;br&gt;
John Adams.&lt;/p&gt;

</description>
      <category>life</category>
      <category>generation</category>
      <category>everyday</category>
    </item>
    <item>
      <title>Reasons to do pair programming</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Wed, 08 Dec 2021 13:45:48 +0000</pubDate>
      <link>https://forem.com/afrinc/reasons-to-do-pair-programming-3o3b</link>
      <guid>https://forem.com/afrinc/reasons-to-do-pair-programming-3o3b</guid>
      <description>&lt;ul&gt;
&lt;li&gt;fun&lt;/li&gt;
&lt;li&gt;better design&lt;/li&gt;
&lt;li&gt;less bugs&lt;/li&gt;
&lt;li&gt;more passion &lt;/li&gt;
&lt;li&gt;natural language flow&lt;/li&gt;
&lt;li&gt;increases code reuse chance&lt;/li&gt;
&lt;li&gt;puts your pride to work (faster typing)&lt;/li&gt;
&lt;li&gt;team bonding&lt;/li&gt;
&lt;li&gt;easier code reviews&lt;/li&gt;
&lt;li&gt;faster &amp;amp; cheaper on the medium/long run&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&amp;amp;&amp;amp; builds courage&lt;/p&gt;

</description>
      <category>programming</category>
      <category>productivity</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Pair programming</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Thu, 21 Oct 2021 18:22:59 +0000</pubDate>
      <link>https://forem.com/afrinc/pair-programming-342d</link>
      <guid>https://forem.com/afrinc/pair-programming-342d</guid>
      <description>&lt;p&gt;Well I stumbled upon one article on Pair Programming on dev.io and I loved it.&lt;br&gt;
&lt;a href="https://dev.to/jacobherrington/7-ways-to-get-the-most-out-of-pair-programming-415h"&gt;https://dev.to/jacobherrington/7-ways-to-get-the-most-out-of-pair-programming-415h&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I could basically understand the notion of doing pairing while coding. It opened up a whole new level of perspective for writing softwares together. It introduces some amazing ways one can collaborate during programming.&lt;/p&gt;

&lt;p&gt;My team have been following this practice for over 1 year now and everyday brings new lessons to us. Would suggest everyone to give it a go.&lt;/p&gt;

&lt;p&gt;This article suggested ways to get the most out of it. I am sure, many of you will find it helpful.&lt;/p&gt;

&lt;p&gt;So did you pair with anyone today?&lt;/p&gt;

</description>
      <category>devjournal</category>
      <category>programming</category>
      <category>productivity</category>
      <category>pairprogramming</category>
    </item>
    <item>
      <title>One year Club</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Mon, 18 Oct 2021 14:38:18 +0000</pubDate>
      <link>https://forem.com/afrinc/one-year-club-4ok2</link>
      <guid>https://forem.com/afrinc/one-year-club-4ok2</guid>
      <description>&lt;p&gt;Its been one year.... and counting.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FIfgPtoy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aybchi9w8v1h9a8we2ig.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FIfgPtoy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aybchi9w8v1h9a8we2ig.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devjournal</category>
      <category>oneyearclub</category>
      <category>badge</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Developer Diaries : Hacktober fest 2021</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Mon, 18 Oct 2021 14:23:54 +0000</pubDate>
      <link>https://forem.com/afrinc/hacktober-fest-2021-5d9o</link>
      <guid>https://forem.com/afrinc/hacktober-fest-2021-5d9o</guid>
      <description>&lt;p&gt;Because its always fun. Keep coding and plant more trees!!!&lt;br&gt;
2 years in a row now. I like this energy of participation, where you feel like contributing repositories making a difference.&lt;/p&gt;

&lt;p&gt;Feel free to reach out to me or comment for more info.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xlspXSxJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l02bk7s7xqpr5wdz1uvd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xlspXSxJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l02bk7s7xqpr5wdz1uvd.png" alt="Image description"&gt;&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;Hacktober fest is here!!! Where are you? Just get started..&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
      <category>java</category>
      <category>github</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Developer Diaries : Refactor Code!! Noooo.. :'(</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Thu, 19 Nov 2020 07:18:48 +0000</pubDate>
      <link>https://forem.com/afrinc/refactoring-no-i-don-t-want-to-touch-it-76l</link>
      <guid>https://forem.com/afrinc/refactoring-no-i-don-t-want-to-touch-it-76l</guid>
      <description>&lt;p&gt;Every time someone mentions refactoring code,&lt;br&gt;
My stomach churns like a washing machine mode.&lt;br&gt;
It's like cleaning out my closet or tidying up my bed,&lt;br&gt;
Except it's a million times worse, or so I've said.&lt;/p&gt;

&lt;p&gt;"Why bother?" I whine, "It'll just be a mess again,&lt;br&gt;
Like a tornado just swept through and left a big stain."&lt;br&gt;
But deep down, I know it's the right thing to do,&lt;br&gt;
And that's why I'll grudgingly say, "Okay, fine, I'll do."&lt;/p&gt;

&lt;p&gt;So I roll up my sleeves, and dive right in,&lt;br&gt;
And feel like a frog, trying to swallow a gin.&lt;br&gt;
The code is a mess, and it's in need of some love,&lt;br&gt;
So I get to work, like a diligent beaver, I shove.&lt;/p&gt;

&lt;p&gt;I tackle the easy parts first, with a grin,&lt;br&gt;
Like picking up the garbage, left in the bin.&lt;br&gt;
Then comes the hard stuff, and that's when I sweat,&lt;br&gt;
Like a contestant on a game show, feeling the regret.&lt;/p&gt;

&lt;p&gt;But I'm determined to make it all better,&lt;br&gt;
To improve our code, make it faster, and wetter.&lt;br&gt;
I'll streamline our functions, cut the bloat,&lt;br&gt;
Optimize our algorithms, and give them a coat.&lt;/p&gt;

&lt;p&gt;And when it's all done, and the code runs like a dream,&lt;br&gt;
I'll do a victory dance, like a ballerina queen.&lt;br&gt;
I may not get the recognition I deserve,&lt;br&gt;
But I know I'm the one who preserves.&lt;/p&gt;

&lt;p&gt;I preserve the quality of our software,&lt;br&gt;
And keep our users happy, without a care.&lt;br&gt;
I preserve the integrity of our code,&lt;br&gt;
And make it easy for anyone to decode.&lt;/p&gt;

&lt;p&gt;So here's to all the developers, big and small,&lt;br&gt;
Who refactor their code, and give it their all.&lt;br&gt;
You may not get the recognition you deserve,&lt;br&gt;
But you're the ones who preserve!&lt;/p&gt;

&lt;p&gt;... TO_BE_CONTINUED&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>refactorit</category>
      <category>discuss</category>
      <category>codequality</category>
    </item>
    <item>
      <title>Developer Diaries - Hacktober Fest 2020</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Tue, 10 Nov 2020 16:40:30 +0000</pubDate>
      <link>https://forem.com/afrinc/developer-diaries-hacktober-fest-success-24ij</link>
      <guid>https://forem.com/afrinc/developer-diaries-hacktober-fest-success-24ij</guid>
      <description>&lt;p&gt;Glad could contribute towards Open source projects and earn some swag. Kudos to people who organized this.&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fasbd3a54dvrgb1qh8apm.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fasbd3a54dvrgb1qh8apm.PNG" alt="HacktoberFest"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devjournal</category>
      <category>hacktoberfest</category>
      <category>opensource</category>
      <category>productivity</category>
    </item>
    <item>
      <title>How this WFH culture going to change an individual's lifestyle?</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Sat, 10 Oct 2020 10:24:56 +0000</pubDate>
      <link>https://forem.com/afrinc/how-this-wfh-culture-going-to-change-an-individual-s-lifestyle-5hjo</link>
      <guid>https://forem.com/afrinc/how-this-wfh-culture-going-to-change-an-individual-s-lifestyle-5hjo</guid>
      <description>&lt;p&gt;With every organization adapting to WFH or remote trend, its curious how will this change us as human beings. Ever wondered what its ripple effects will be?&lt;br&gt;
Well it certainly did force everyone to shift to internet (if some were not before). &lt;/p&gt;

&lt;p&gt;I would like to think how is it going to affect us as individuals(mentally or physically) or the organization we work for, team we work with?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Will we get more "ME" time or get burned out?&lt;/li&gt;
&lt;li&gt;Will our family time be more productive or affected?&lt;/li&gt;
&lt;li&gt;Will we be able to learn this great time management technique we sought or will this stress us out?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All comments are welcome. :)&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>productivity</category>
      <category>mentalhealth</category>
      <category>management</category>
    </item>
    <item>
      <title>Creating Composite Node of a Graph using D3.js</title>
      <dc:creator>John Dears</dc:creator>
      <pubDate>Mon, 04 May 2020 12:00:54 +0000</pubDate>
      <link>https://forem.com/afrinc/a-composite-node-of-a-graph-using-d3-js-v5-3p8i</link>
      <guid>https://forem.com/afrinc/a-composite-node-of-a-graph-using-d3-js-v5-3p8i</guid>
      <description>&lt;p&gt;Lately I have been using D3 for visualizing data for a React project and it got my attention for a while. I was especially interested as to the scope of this very powerful tool that has a great problem solving ability range related to any kind of data visualization.&lt;br&gt;
It gives you a feeling that you can do &lt;strong&gt;ANYTHING&lt;/strong&gt;. Okay, lets talk about it.&lt;/p&gt;
&lt;h3&gt;
  
  
  What is D3.js ?
&lt;/h3&gt;

&lt;p&gt;D3.js is a javascript library used for visualizing data. It is very powerful with the combination of &lt;strong&gt;SVG&lt;/strong&gt; (Support Vector Graphics) and &lt;strong&gt;HTML&lt;/strong&gt;.&lt;br&gt;
Now it depends on the creativity of the developer using it to actually visualize it in the most beautiful way. &lt;/p&gt;

&lt;p&gt;Since this is data driven , d3.js works on your pure data and transforms it in a graphical way. While applying d3.js, you will doing lot of CSS, at the same time solving some Mathematical Coordinate Geometry problems. For instance, applying Pythagorean theorem, finding distance between two coordinates &lt;code&gt;(x1, y1)&lt;/code&gt; and &lt;code&gt;(x2, y2)&lt;/code&gt; on a graph etc.&lt;/p&gt;

&lt;p&gt;This article especially focuses on creating a complex node of a graph. A Complex node refers to a node which will have a lot of elements or information attached to it, instead of just an empty circle.&lt;/p&gt;
&lt;h3&gt;
  
  
  Why v5 version especially ?
&lt;/h3&gt;

&lt;p&gt;You will find so many example snippets and gists especially on &lt;a href="https://bl.ocks.org/"&gt;bl.ocks.org&lt;/a&gt; or &lt;a href="https://stackoverflow.com/"&gt;stackoverflow&lt;/a&gt; for creating graphs or trees with &lt;code&gt;v3&lt;/code&gt; version but not many on the &lt;code&gt;v5&lt;/code&gt; version.&lt;/p&gt;
&lt;h3&gt;
  
  
  Pre-requisite
&lt;/h3&gt;

&lt;p&gt;Html, CSS , Javascript, Coordinate Geometry.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Let's Start&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;We will be writing a simple working script for creating a complex SVG node of a graph.&lt;br&gt;
First, you need to include the following &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; inside your html &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; for using d3 &lt;code&gt;v5&lt;/code&gt; library.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;h3&gt;
  
  
  Canvas and data container element
&lt;/h3&gt;

&lt;p&gt;Specify the canvas’s &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;height&lt;/code&gt; where all the SVG elements will reside. We then call &lt;code&gt;d3.select()&lt;/code&gt; on &lt;code&gt;body&lt;/code&gt; element, appending &lt;code&gt;svg&lt;/code&gt; to it, and specifying properties like &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;height&lt;/code&gt; We currently have our json data as &lt;code&gt;nodes&lt;/code&gt; with all params that we require to visualize.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Lets append new element &lt;code&gt;g&lt;/code&gt; into &lt;code&gt;svg&lt;/code&gt; variable (canvas) and insert node data into it, indexing with &lt;code&gt;id&lt;/code&gt;.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;h3&gt;
  
  
  Rectangular node
&lt;/h3&gt;

&lt;p&gt;Now we append &lt;code&gt;rect&lt;/code&gt; element into our &lt;code&gt;svg&lt;/code&gt; with &lt;code&gt;(x,y)&lt;/code&gt; coordinates as &lt;code&gt;(0,0)&lt;/code&gt;.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now this gets tricky here, as we now have our basic node ready and would like to place many more elements inside with reference to the rectangular node and not canvas. One of the ways for doing that is to get coordinates using &lt;code&gt;getBBox()&lt;/code&gt;.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;h3&gt;
  
  
  Image element
&lt;/h3&gt;

&lt;p&gt;Now that we have placement coordinates of this box, lets place things inside.&lt;br&gt;
Say I want to place a logo &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5gKNHHBH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.icons8.com/ios-glyphs/30/000000/superman.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5gKNHHBH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://img.icons8.com/ios-glyphs/30/000000/superman.png" alt="image-icon" width="30" height="30"&gt;&lt;/a&gt; here available. It's simple.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;As you can see we have tweaked &lt;code&gt;X&lt;/code&gt; and &lt;code&gt;Y&lt;/code&gt; a little bit depending on where we would like it to be. I wanted it to be in middle, with a little bit of tab  (&lt;code&gt;10&lt;/code&gt;) from left.&lt;/p&gt;

&lt;h3&gt;
  
  
  Text element
&lt;/h3&gt;

&lt;p&gt;Now, we want some text. We use the node data and access it using keys. And again, append &lt;code&gt;text&lt;/code&gt; to &lt;code&gt;svg&lt;/code&gt; like below:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;another example to add text&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;h3&gt;
  
  
  Circular counter element
&lt;/h3&gt;

&lt;p&gt;Now what if I want to insert a circle inside the rectangular node and maintain a text inside it. We do it as follows:&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;and text&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;At last simply merge all the elements into one.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Wondering how does it look like while inspecting. See for yourself.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QDB3qM8o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/11709991/80964993-6fe35d00-8e2f-11ea-945c-9d28470331e8.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QDB3qM8o--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://user-images.githubusercontent.com/11709991/80964993-6fe35d00-8e2f-11ea-945c-9d28470331e8.PNG" alt="inspect_element" width="880" height="414"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>html</category>
      <category>css</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
