teleren/devto huggingface dataset:
Vue.js Dynamic Component Rendering
Tags: vue
Published: 2020-03-31 13:42:13

---
title: Vue.js Dynamic Component Rendering
published: true
description: 
tags: vue, vue.js
---

In the [last chapter](https://dev.to/fdietz/vue-js-functional-components-2495) have already seen quite a few examples of flexible components using render functions which give us a lot of power. But, since rendering a component dynamically via it's name is such a typical use case there is built-in support for that in Vue.js.

In this chapter we discuss the usage of the `<component>` tag.

## Using the `<component is>` feature

As an example we use a tab navigation where the content of a tab is rendered dynamically.

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/s3f6syypcs5u9mgsl596.png" width="50%" alt="Toogle Button">
  <figcaption>Example 1</figcaption>
</figure>

Let's start with the tab content:

```js
Vue.component('tab-home', {
  template: '<div>Home component</div>'
});

Vue.component('tab-posts', {
  template: '<div>Posts component</div>'
});

Vue.component('tab-archive', {
  template: '<div>Archive component</div>'
});
```

I'm using a common name prefix `tab-` here to make it easier to lookup these components later.

Now, to render the component dynamically we use the `<component>` tag and give it a name via the `is` prop:

```html
<component is="tab-home"></component>
```

It is that simple! Vue then lookups the component referenced by that `String` and renders it in place of the `<component>` tag.

Now, this example is still static, let make it more dynamic. First we need to manage all our tabs in the Vue.js app:

```js
new Vue({
  el: '#demo',
  data: {
    currentTab: 'Home',
    tabs: ['Home', 'Posts', 'Archive']
  },
  computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
});
```

We use the `tabs` for the list of all tabs we want to render and the `currentTab` to maintain the selection. The actual component's name is concatenated as a computed property `currentTabComponent`.

Next we look into the markup to render the tabs:

```html
<div id="demo">
  <ul class="tab-list">
    <li
      v-for="tab in tabs"
      :key="tab"
      >
      <a
        :class="['tab', { active: currentTab === tab }]"
        @click="currentTab = tab">
        {{tab}}
      </a>
    </li>
  </ul>

  <component
    :is="currentTabComponent"
    class="tab-content">
  </component>
</div>
```

You can find the complete example on [GitHub](https://github.com/fdietz/vue_components_book_examples/tree/master/chapter-7/example-1)

We use a `v-for` directive to render a list of tabs using the `currentTab` to set the `active` class. The `@click` event is used to change the `currentTab` state. Clicking on a tab will change the `background-color` to visually indicate the active state.

The `<component>` uses the `currentTabComponent` computed property to render the active tab content.

Note, how it passes along the `class` prop to the actual component it renders. Nice!

## Summary

The `<component>` tag is quite a powerful feature and in some use cases it might be easier to use instead of slots and custom code.
Oracle Apex: Submit Page on Enter Key Press
Tags: showdev, orclapex, javascript
Published: 2020-03-31 14:19:43

Hi,

Please check my following post on how to submit the page when the user presses the enter key on an item in Oracle Apex.
[Submit page on enter key pressed](https://www.vinish.ai/oracle-apex-submit-page-when-enter-key-pressed)
How to Master competitive Programming, Logic Building, OOP and DS concepts ??
Tags: discuss, help, beginners, career
Published: 2020-03-31 13:39:38

---
title: How to Master competitive Programming, Logic Building, OOP and DS concepts ??
published: true
description:I'm a CS student and a guy who is striving hard to learn programming languages. I'm unable to excel at Competitive programming and it takes lot of time for me to build a logic sometimes. Because of these issues, I was lagging behind. OOP and DS concepts are also the other factors that are dragging me back from learning new things. Could Someone help me with their suggestion to get me out of all these issues. I'm a Pro Procrastinator in nature and also not interested to practice programming, I just see the videos and moves to next concept. All these things collectively bringing me backwards in the field of programming. So, I request every one of the DEV community to help me with their answers so that I can hit all these things to become a better programmer.  
tags: #discuss,#help,#beginners,#career
---
Kentico Rocks Episode #031 - Kentico Kontent Management API Review
Tags: podcast, kenticokontent, blazor, headlesscms
Published: 2020-04-01 15:24:52

---
title: Kentico Rocks Episode #031 - Kentico Kontent Management API Review
published: true
date: 2020-03-31 14:10:54 UTC
tags: podcast, kenticokontent, blazor, headlesscms
canonical_url: https://www.mcbeev.com/Blog/March-2020/Kentico-Rocks-Podcast-Episode-31
---

In this episode of **Kentico Rocks** , Brian McKeiver talks about **[Kentico Kontent](https://kontent.ai/)**'s API capabilities. The goal is to talk about a lesser publicized Kontent API, the [**Management API**](https://docs.kontent.ai/reference/management-api-v2#operation/validate-project-content). Brian discusses why you might want to use the Management API for importing content, reviews how to call the Management API v1 from the [.Net SDK](https://github.com/Kentico/kontent-management-sdk-net) that Kontent provides, and demo's a real world [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) app that upserts content items through the Management API v2.

Remember, you can [subscribe to the Kentico Rocks podcast on spotify](https://open.spotify.com/show/4LDuqV2NKush3NJqNP4rO6). Click on over to that if you haven't start following Kentico Rocks yet.


Watch Now

{% youtube ujWdNt6u9os %}


In This Episode

Brian McKeiver chats about the following topics in Kentico Rocks podcast episode #31:

* A very quick introduction to Kentico Kontent
* How the Kontent Management API is used vs. the Delivery API
* An introduction to the Kontent Management API .Net SDK
* Management API v2 features vs. the original v1
* A review of a Blazor app that uses Kontent to power its data and content
* A live demo of creating a new Content Item version, Upserting that Content Item, and Publishing it through the Management API v1 and v2


Related Links to this episode:

* [Kentico Kontent](https://kontent.ai/) 
* [Management API Docs in Kontent](https://docs.kontent.ai/reference/management-api-v2#operation/validate-project-content) 
* [Kontent Management .Net SDK Github](https://github.com/Kentico/kontent-management-sdk-net) 
* [.Net Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) 
* [Ondrej Polesny's Twitch Stream](https://www.twitch.tv/ondrabus) 
* [Build a SPA with Blazor and Kontent](https://www.youtube.com/watch?v=ESNRPpbAO9c&feature=youtu.be)


You can also listen to the previous episode of Kentico Rocks where I talk about [JavaScript Unit Testing and You](https://www.mcbeev.com/Blog/February-2020/Kentico-Rocks-Podcast-Episode-30)
Chugging along
Tags: c, planning
Published: 2020-03-31 13:54:47

---
title: Chugging along
published: true
description: Just an update on my programming journey
tags: #c #planning 
---
Just wanted to share a little bit of progress. If you have been following me, you may have seen that I was switching environments by moving into my new “office” space from my bedroom.  I was able to get a decent size whiteboard that has already proven useful. 

I’ve been working through the K&R C book very slowly. I’m trying to depend more on myself for solutions to problems instead of googling when I’m stuck. I’ve owned up to the fact that I tend to speed through things to get “there” but end up not getting the results I want. I’m trying to be more methodical in my approach by breaking each problem down into simple steps using the whiteboard, documenting my code as much as possible (I can always remove later if it’s obnoxious), and learning how to use the debugger. I think these steps keep me in the problem solving mindset that allows me to accomplish my goal. 

I feel guilty that it’s taken me this long to get to this point in programming. But I keep in mind that there is no “set” path to becoming the “genius programmer”. There is only me and my ability to solve problems with the tools I have acquired so far. 

Again, I would like to say that I’m thankful for everyone that has shared their knowledge that I can learn from every day.
Working from home - Day 13
Tags: watercooler, remote, webdev, development
Published: 2020-03-31 13:46:57

---
title: Working from home - Day 13
published: true
description: Continuous journey of working from home due to COVID-19 outbreak at the world. This is my journey, my challenges in trying to be productive and completely changing my work habits from office first to remote first. 
tags: watercooler, remote, webdev, development
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ay2sblohx912c1l50sgg.jpg
series: working from home
---

## General

As usual, a weekend with kids at home being quasi isolated is always hard. Saturdays work great but Sundays are tough.

Thanks to time change (back to summer timing), somehow our daily routine got out of sync. From the past, I think the next 2-3 days will be a bit chaotic until we settle down again.

It's really cold, and it even snowed on a Monday, 30th April 2020. Like an early april fool joke. But real. Check the video below:

{% youtube rqRZ0obHCMQ %}



## Work

So two weeks in, another review meeting.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jclo5nqwo96s9pq30lok.png)

As usual, our Reviews are way more focused. People are asking questions via Chat first and after each topic has been presented our Product Manager reads them out loud and answers them. 
If there is still a need for clarification, people can signal by enabling video or audio.

This set of rules works well and I think in the future this is one way of keeping them. Even in the office, there is no way 30+ people are listening. Meeting rooms are always short on availability. 

We also had our refinement meeting (grooming). Yet it was more confusing than helpful. Sometimes questions were asked in the group and it was unclear who should answer (backend / frontend / ux ?). I will see how our Retrospective on Tuesday will work as I believe more people realized how a 90 minutes hangout isn't productive enough.

One outcome is that we will do more on our Chrome Extension. And there is still a lot of legacy, tight-coupling in it. I have to keep up the refactoring and need to think more about architectural design.


## TIL

Don't attend a meeting without a clear agenda. Speak up if you think something is unclear. 

Experiment Toggles / Feature Toggles are really important. Even more when you can't easily deploy and rollback, for example in the Chrome Web App Store. Now that most work is done there, it is really easy to support new AB-Tests, monitor them and act quickly.


Cheers,

Ferit
Authoring commit messages
Tags: git, professionalism, writing
Published: 2020-03-31 13:44:55

---
title: Authoring commit messages
published: true
description: Describes what makes a good commit message, with links to other pages on this topic.
tags: git, professionalism, writing
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7z91no1h95v9jyikef97.jpg
---

Great writing is intentional. It considers the needs and expectations of the reader.

Commit messages are writing.

Commit messages are great when they're intentional, considerate of the needs and expectations of the reader.

Who's the reader?

The reader is future you. Or future me. It is colleagues reviewing a Pull Request. It's a release engineer trying to verify and summarize the changes that will go into a release. It's someone troubleshooting trying to find when an unexpected change may have been introduced. It's a team member try to catch up on changes to a product.

Write great commit messages. 

That automatic message stub that GitLab generates for you? It's not great.

> Update Deployment.md

Don't focus on what file you changed. That's apparent from the substance of the commit, from the diff. Rather, focus on the meaning of what you changed and why you changed it.

Better:

> Add checklist step to post in Service Operations channel

This post is less about directly telling you how to do this, and more a place where I can collect annotated links about this.

See also: [my Pinboard tag `commit_messages`](https://pinboard.in/u:microcline/t:commit_messages/).

+ Succinct advice about writing commit messages: [A Note About Git Commit Messages](https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+ Reinforcing the present-tense imperative norm: [Writing Git Commit Messages](https://365git.tumblr.com/post/3308646748/writing-git-commit-messages)
+ Advice on writing commit messages, and also more generally about composing git commits: [How to make good Git commits](https://dev.to/ruanbrandao/how-to-make-good-git-commits-256k)

Cover photo credit: Photo by [NihoNorway graphy](https://unsplash.com/@nihongraphy) on Unsplash
Starting A Blockchain Insurance Platform
Tags: blockchain, insurance, ethereum, disrupt
Published: 2020-03-31 13:43:52

The multi-trillion-dollar insurance industry is dominated by huge corporations, weighed down by heavy regulation and plagued by misalignment's of company and consumer incentives. The insurance world has devolved into an inefficient, expensive and ultimately frustrating industry. When customers most need help, they can end up fighting in vain for reimbursement from companies whose profits too often depend on avoiding paying out.
InsureNET is building a platform for decentralized insurance products and applications. With visionaries like you, we can create a platform full of opportunities across the industry’s value chain and can all come together to provide better products and services. We aim to use blockchain technology to help make the purchase and sale of insurance more efficient, enable lower operational costs, provide greater transparency into the industry and democratize access to reinsurance.
Blockchain can provide the means to dis-intermediate the market with a peer-to-peer risk platform that helps insurance return to its roots as society’s safety net. We even envisage new groups building their own bespoke insurance risk pools and services on the platform. And InsureNET will be a fully-compliant, fully licensed insurance platform for the emerging blockchain economy.
In short, InsureNET can deliver the insurance industry the modernization customers are crying out for.
We are assembling a team of experts, experienced in delivering innovative products and at the top of their game in blockchain.

We started a demo here: https://insurenet-web.netlify.com
JavaScript Budget App Updates
Tags: codenewbie, womenintech, javascript
Published: 2020-03-31 13:38:33

Yesterday I made some major headway on my budget app (following along with building it via my JS course) in that I got all of the primary functionality working (i.e. entering incomes and expenses, making the calculations behind the scenes and also on the UI, etc).

What I'm now focusing on is the functionality behind deleting individual items from the list once they've been added as an income or expense. I've more or less done this before, but it's so great to go through it all in a very clear and well-explained manner - rather than relying on a few patched-together blog posts from various internet sources.

As mentioned before, my goal for this week is to get the app up and running and then to take it apart and rebuild it. I'll probably go through the course instructions again but this time with the foresight of knowing what comes next and all that good stuff. I'll probably also write out general notes for myself to help me when I eventually build it on my own without following along with the course. Reminder to self: learning is not linear.

I'm also currently building the app with three different modules as IIFEs (immediately invoked function expressions), but I'm looking forward to updating those as separate modules. The three modules are the budget controller (behind the scenes for the income and expense databases), the UI controller (responsible for any changes to the UI based on user interactions), and the app/global controller (responsible for connecting the budget controller and the UI controller, and for initializing the app).

I'm also getting a major lesson on code architecture and keeping everything organized. I'm learning about the importance of thinking about and writing out the structure of the program well before typing the first line of code. All really great stuff!

_This post was originally published on March 3, 2020 on [my blog](https://alexlsalt.github.io/blog)._
Diving into March (and Coding)
Tags: webdev, womenintech, codenewbie
Published: 2020-03-31 13:37:04

Happy Monday and happy March! Starting off Month #3 of 2020 already - crazy, but in a good way! I personally feel great about it because in other times, each new month was accompanied by feelings of 'How the heck is it already March?!' and 'Time is passing me by and I don't even know where it's going!!'

From my previous post - I admittedly didn't get much coding done on Friday. I mentioned I try not to code on the weekends, but even on Friday it was tough for me to get in the zone - so I kind of didn't lol. I think I may have cracked open the text editor for an hour at best, added a new feature to the budget app I'm building along with my JS course, and called it a day.

But all in all, we're doin' quite alright, folks! Today I'm pretty tired, but I'm angling to get back into the coding mix. This week, my goal is to finish the budget app tutorial, and also to get really comfortable with it's structure and how the different modules of code fit together (still kind of mind-boggling, but I can feel those neurons firing upstairs!).

That way, next week, I can take it all apart and build it back up again!

So, as I prepare myself to dive back into all the code, here's a great quote I picked up from From Steven Pressfield's The War of Art this morning:



_There's no mystery to turning pro. It's a decision brought about by an act of will. We make up our minds to view ourselves as pros and we do it. Simple as that._



In the interest of turning pro, I'm now heading into battle - despite the start-of-the-week drowsiness. Wish me luck!


_This post was originally published on March 2, 2020 on [my blog](https://alexlsalt.github.io/blog)._
What is the equivalent command for docker port CONTAINER in docker-py

Tags: python, docker
Published: 2020-03-31 13:33:55

I trying to automate a docker server using docker-py. Need to check whether the host URL is pinging or not using python. Hence I need an equivalent command in python for docker port container

import docker
client = docker.from_env()
print(client.port('c03ebfb53a7d', 80))
Big myths surrounding technical debt
Tags: todayilearned, api, techdebt
Published: 2020-03-31 13:00:30

*TL;DR notes from articles I read today.*

### [Five big myths surrounding technical debt](https://bit.ly/2QX5NaR)

- Myth #1 is that tech debt is amorphous, when in actuality it is usually a collection of many discrete problems. This means you can quantify tech debt (frequency, impact, cost to fix) on a spreadsheet or tracker and then prioritize based on impact.
- Myth #2 is that all tech debt has a single cause. In fact, there are three major sets of causes (or enablers):
    - Intentional tech debt, where the team knowingly took shortcuts to meet deadlines.
    - Unintentional, where poor code results from inexperience or incompetence or misunderstood requirements.
    - From age, where incremental enhancements and bug fixes cause a bit rot.
- Myth #3 is that you should never intentionally take on tech debt. But there are three situations where it may be justified: you are building a prototype or demo module to solicit feedback on a new feature or product, time to market is critical or you are building based on guesswork and anticipate client requirements will change sooner than later.
- Myth #4 is it only hurts engineers. In fact, it affects developers, product managers, customer support teams and customers, technical operations, and any executive team you may set up.  
- Myth #5 is that only a full rewrite can repay the debt, whereas more often, a detailed plan of incremental fixes will solve it.   

*[Full post here](https://bit.ly/2QX5NaR), 8 mins read*

---

### [Indirect benefits of building API-first](https://bit.ly/2WU7LNd)

- A major benefit of building API-first is agility, both digital and strategic. You are not constrained to a single usage pattern and have the basis for a variety of applications with use cases you can’t even imagine yet, offering both flexibility and reusability.
- Your end-user has a better experience since APIs encourage interactivity across internal and external applications, creating a stickier, unified experience for consumers.
- Building your organization around APIs creates a potential for partnerships, big and small, whether using the marketplace model (your platform allows others to build and distribute custom add-ons, in turn extending your own platform) or one where partner APIs share data with a common, collaborative goal.
- Outward-facing APIs enable the growth and inception of self-sustaining developer communities, providing you with awareness, API support, product suggestions and more. 

*[Full post here](https://bit.ly/2WU7LNd), 4 mins read*

---

*[Get these notes directly in your inbox every weekday by signing up for my newsletter, in.snippets().](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
Daily Challenge #215 - Difference of 2
Tags: challenge
Published: 2020-03-31 12:54:09

---
title: Daily Challenge #215 - Difference of 2
published: true
series: Daily Challenge
description: Return pairs that have a difference of two.
tags: challenge
---
The objective is to implement a function that will return all pairs of integers from a given array of integers that have a difference of 2. The result array should be sorted in ascending order of values.

Assume there are no duplicate integers in the array. The order of the integers in the input array should not matter.

###Examples
<pre>
[1, 2, 3, 4]      -->  [[1, 3], [2, 4]]
[4, 1, 2, 3]      -->  [[1, 3], [2, 4]]
[1, 23, 3, 4, 7]  -->  [[1, 3]]
[4, 3, 1, 5, 6]   -->  [[1, 3], [3, 5], [4, 6]]
</pre>

###Tests
pairDifference([1,2,3,4])
pairDifference([1,3,4,6])

Happy coding!

***
_This [challenge](https://www.codewars.com/kata/5340298112fa30e786000688/train/javascript) comes from technikhil on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_