ENDOC-668 add technical blogs to dev site

vuepress/docs/.vuepress/config.js

@@ -78,7 +78,7 @@ module.exports = {
               },
           ],
           globalPagination: {
-              lengthPerPage: 10,
+              lengthPerPage: 6,
               layout: 'IndexPost'
           },
 

vuepress/docs/_posts/2022-04-20-why-is-blogging-important.md

@@ -0,0 +1,60 @@
+---
+author: Sohini Pattanayak
+date: 2022-04-20
+summary: Technical blogging is very important for modern developers, as it can not only help developers learn and grow but also help other people to learn from them. At the same time, documenting our learnings and experiences in the form of a blog is a very good practice for a developer in the IT industry. Through this blog, you'll figure out why it is so important to write technical blogs and also how you can get started with it.
+tags:
+- Developer Topics
+- Community
+title: Why is technical blogging so important?
+---
+
+<p>All the learning that we gather together defines our knowledge. And when we put this knowledge into writing, providing direction, instruction, explanation, and empathy, we call it technical blogging.</p>
+
+<p>But, why do we have to do this?</p>
+
+<p>If we look at it from our own perspective, it's really helpful for us to grow as individuals. Documenting our learning process in a particular subject, in one place, in a complete manner is, first of all, self-help! There are two benefits to it:</p>
+
+<ul>
+	<li>Our storytelling capability develops and improves with time.</li>
+	<li>When we need to work on that particular subject, even after 5 years, the blogs we wrote help us stay up to date on the subject.</li>
+</ul>
+
+<p>What, apart from these?</p>
+
+<p>If you are someone who wishes to be around a technical community or a network of people, technical blogging is so your thing!</p>
+
+<p>One technical blog can help many learn and grow, just as you grow personally. After all, we look for blogs when we try to learn something new. So, we can definitely be one of those bloggers whose writings are read by others as they try to learn something new.</p>
+
+<p>But, what if you suffer from imposter syndrome?</p>
+
+<p><em>"What if I am not proficient enough to write a blog? What if I don't have the skills to do it? What if I am not knowledgeable enough?"</em></p>
+
+<p>Well, you don't need to be a pro in order to write a blog. If you're a very keen learner, you can always use your learnings to start writing blogs.</p>
+
+<p>And whatever we learn is our knowledge. Hence, each one of us is absolutely qualified to write technical blogs.</p>
+
+<p>Let's explore a few things we can use as best practices while writing blogs:</p>
+
+<ul>
+	<li>Always define key points before starting a blog. (These can also be goal statements.)</li>
+	<li>Dedicate each paragraph to a particular topic/area.</li>
+	<li>Make sure you are writing with your target audience in mind.</li>
+	<li>Create engaging sentences at the beginning of each paragraph to develop interest.</li>
+	<li>Break lengthy sentences into shorter ones.</li>
+	<li>Break up big ideas into smaller sections, with short paragraphs.</li>
+	<li>Use bullet points to explain agendas/steps.</li>
+	<li>When working with an in-depth technical subject, use flow diagrams to explain processes.</li>
+	<li>Be empathetic while you write. Express how you feel; don't be afraid to show your emotions in the writing. This will keep it from sounding like a dry step-by-step manual.</li>
+	<li>Use a tool to check spelling mistakes, nouns, pronouns, adjectives, etc.</li>
+</ul>
+
+
+<p>These are the steps I try to follow when I am writing blogs. The best thing about writing blogs continuously is that your writing improves every time. And that is learning too.</p>
+
+<p>To wrap up, it is not really hard to write a technical blog. The very first thing you really need to do is get started. And slowly, the quality of your writing and content will improve over time. Believe in your capabilities and write everything you can to best explain your content! The blogs you write can help many other people while satisfying your own curiosity and learning goals. It is mutually beneficial, for you and the audience you're writing the blog for.</p>
+
+<p>That's all for this blog. I hope this was useful for you. Please feel free to drop your thoughts in the comment section below.</p>
+
+<p>Thank you!</p>
+
+</span><br><a href="#">Back to top</a></span></p>

vuepress/docs/_posts/2022-05-03-using-react-to-create-mfe.md

@@ -0,0 +1,239 @@
+---
+author: Anthony Viard
+date: 2022-05-03
+summary: Having discovered micro frontend creation with Angular, we jump into another world with React. Remember, I'm trying to create a micro frontend using the web component specifications for Angular, React, and Vue.js. Does React provide the best developer experience when creating a micro frontend social card? Let's try it!
+tags:
+- Developer Topics
+- Open Source
+title: Using React to Create a Micro Frontend
+---
+
+<p><em>Disclaimer: This article has been written with the help of the ModSquad Community. The related live session is available here:</em></p>
+<p>
+<div class=”iframe-container”><iframe width="560" height="315" src="https://www.youtube.com/embed/4sF3XYlNZC4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+</p>
+
+## Introduction
+
+<p>Hi, fellow developers!</p>
+
+<p>Having discovered micro frontend creation with Angular, we jump into another world with React. Remember, I'm trying to create a micro frontend using the web component specifications for each of the following frameworks: Angular, React, and Vue.js.</p>
+
+<p>Does React provide the best developer experience when creating a micro frontend social card? Let's try it!</p>
+
+## Create the React app
+
+<p>React offers a simple way to <a href="https://github.com/facebook/create-react-app">create React applications</a> using <a href="https://create-react-app.dev/docs/getting-started/">Create React App</a>.</p>
+
+<p>As seen in the previous blog, you need to have npm installed. You can then run <code class="language-bash">npx create-react-app react-social-card</code> to create the application skeleton.</p>
+
+<p>Once complete, you should have a new React project available in the <code class="language-bash">react-social-card</code> folder.</p>
+
+<p>Start it using the command <code class="language-bash">npm start</code>.</p>
+
+<p>The default React page is reachable at <a href="http://localhost:3000">http://localhost:3000</a>.</p>
+
+<img src="./images/2022-05-03-image1.png" width="720" height="480.2">
+
+## Add the social card code
+
+<p>Before configuring the <code class="language-bash">custom-element</code>, we have to create the React social card component. After some research, here is an example of code we can use: <a href="https://codepen.io/leoraw/pen/ZjvRpL">https://codepen.io/leoraw/pen/ZjvRpL</a>. Thanks to <a href="https://codepen.io/leoraw">@leoraw</a> for sharing this example.</p>
+
+## Create the React components
+
+<p>The social card is split into two different React components: a button box and the card itself.</p>
+
+<p>First, we create a new file for the button box in the <code class="language-bash">components</code> folder, name it <code class="language-bash">ButtonBox.js</code> and copy this code:</p>
+
+```js
+import React from "react";
+
+const UiButton = props => {
+   const classes = (props.isClicked) ?
+     "ui-button clicked" : "ui-button";
+   const number = (props.isClicked) ?
+         (props.number + 1) : props.number;
+
+   return (
+     <button className={classes} id={props.text}
+       onClick={() => props.onClick()}>
+       <span className="ui-icon">{props.icon} </span>
+       {number}
+     </button>
+   );
+};
+
+class ButtonBox extends React.Component {
+   constructor(props) {
+     super(props);
+     console.log(props.likeIsClicked);
+     this.state = {
+       likeIsClicked: props.likeIsClicked
+
+     };
+   }
+
+   toggle(index) {
+     let state = {};
+     state[index] = !this.state[index];
+     this.setState(state);
+   }
+
+   render() {
+     return (
+       <div>
+         <UiButton icon='♥' text='likes'
+           number={this.props.likes}
+           onClick={() =>
+             this.toggle('likeIsClicked')}
+           isClicked={this.state.likeIsClicked}/>
+       </div>
+     );
+   }
+}
+
+export default ButtonBox;
+```
+
+<p>Then, in the same folder, we create the <code class="language-bash">SocialCard.js</code> file and copy the following content.</p>
+
+<p>Please note, this new component imports and uses the previous one. Effectively, the internal architecture in the micro frontend allows us to use multiple components, and all the components are built into one custom element.</p>
+
+``` js
+import React from "react";
+import ButtonBox from "./ButtonBox";
+
+const UiCard = props => {
+ let {image, title, content} = props.content;
+ return (
+   <div class="card-wrapper">
+     <div className='card-img'>
+       <img src={image} />
+     </div>
+     <div className='card-content'>
+       <h3>{title}</h3>
+       <div>{content}</div>
+     </div>
+     </div>
+ );
+}
+
+class SocialCard extends React.Component {
+   render() {
+     return (
+       <div className='card-body'>
+         <UiCard content={this.props.content}/>
+         <div className='line'></div>
+          <div style={{textAlign: 'right'}}>
+             <ButtonBox
+             likeIsClicked={this.props.likeIsClicked}
+             likes={this.props.likes}/>
+         </div>
+       </div>
+
+     );
+   }
+}
+
+export default SocialCard;
+```
+
+## Use the new components in the main App.js file
+
+<p>Once these two components are available, we can update the main <code class="language-bash">App.js</code> file and remove the old React demo code.</p>
+
+<p>Update the <code class="language-bash">App.js</code> file by replacing the existing code with this:</p>
+
+``` js
+import React from 'react';
+import './App.css';
+import SocialCard from "./components/SocialCard";
+
+const cardDetails = {
+   id: 0,
+   content: {
+       title: 'Shiba Inu',
+       image: 'https://material.angular.io/assets/img/examples/shiba2.jpg',
+       content: 'The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.',
+   },
+   likeIsClicked: true,
+   likes: 5
+}
+
+function App() {
+ return (
+   <SocialCard
+     key={cardDetails.id}
+     content={cardDetails.content}
+     likes={cardDetails.likes}
+     likeIsClicked={cardDetails.likeIsClicked}
+     />
+ );
+}
+
+export default App;
+```
+
+<p>You can see that we are instantiating a new social card component and giving it some data to display.</p>
+
+<p>Now you can restart the application or refresh the page to see our social card appear. However, this is still a raw React application and we need to define the <code class="language-bash">custom-element</code> to finish our task.</p>
+
+<img src="./images/2022-05-03-image2.png" width="720" height="686.2">
+
+## Switch the app to a custom element
+
+<p>In the <code class="language-bash">src</code> folder, at the same level as the <code class="language-bash">components</code> folder, we create a new folder named <code class="language-bash">custom-element</code>.</p>
+
+<p>Next, let's create a new file named <code class="language-bash">social-card-app.js</code> to define the <code class="language-bash">custom-element</code> using the related API:</p>
+
+``` js
+import ReactDOM from "react-dom"
+import React from "react"
+import App from '../App'
+
+class SocialCardApp extends HTMLElement {
+   connectedCallback() {
+       this.mountPoint = document.createElement('span')
+       this.render()
+   }
+
+   render() {
+       ReactDOM.render(<React.StrictMode>
+                   <App/>
+           </React.StrictMode>,
+           this.appendChild(this.mountPoint))
+   }
+}
+
+customElements.get('react-social-card') || customElements.define("react-social-card", SocialCardApp)
+```
+
+<p>The string "react-social-card" is used to define the <code class="language-bash">custom-element</code> tag and renders the React app using <code class="language-bash">&lt;App/&gt;</code>. It's analogous to Russian dolls: <code class="language-bash">custom-element > React app > social card component > buttonbox component</code>.</p>
+
+<p>Then, in the following <code class="language-bash">public/index.html</code> file, replace the body with this:</p>
+
+``` html
+<body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <react-social-card></react-social-card>
+</body>
+```
+
+<p>Reload your browser and check the HTML content:</p>
+
+<img src="./images/2022-05-03-image3.png" width="720" height="265">
+
+<p>The <code class="language-bash">react-social-card</code> custom element is used and loads the React app content.</p>
+
+<p><strong>Congratulations! You've just created your first micro frontend using React!</strong></p>
+
+## Resources
+
+- The code above is available on GitHub <a href="https://github.com/avdev4j/react-social-card">here</a>.
+
+- Watch micro frontend videos on our <a href="https://www.youtube.com/c/EntandoVideos">YouTube channel</a>.
+
+- Join us on <a href="https://discord.gg/SdMCvyzzHm">Discord</a> to share and learn about composable apps.
+
+</span><br><a href="#">Back to top</a></span></p>
+