teleren/devto huggingface dataset:
Vue Runtime Compiler, for arbitary Markdown
Tags: nuxt, vue, markdown
Published: 2020-06-14 09:01:04

I don't know how to emit only client-side bundle, that is `ssr-only`, but the simple answer is

```js
// vue.config.js

module.exports = {
  runtimeCompiler: true
}
```

Or,

```js
// webpack.config.js or nuxt.config.js

      config.resolve.alias.vue = 'vue/dist/vue.common'
```

[v-runtime-template seems unmaintained](https://github.com/alexjoverm/v-runtime-template/issues/70). Luckily, according to [StackOverflow](https://stackoverflow.com/questions/39516731/dynamic-html-elements-in-vue-js), it is as simple as

```vue
<template>
  <component :is="dynamicComponent" />
</template>

<script>
export default {
  prop: {
    template: {
      type: String,
      required: true,
      default: ''
    }
  },
  computed: {
    dynamicComponent: function() {
      return {
        template: `<div>${this.template}</div>`,
        methods: {
          someAction() {
            console.log("Action!");
          }
        }
      }
    }
  }
}
</script>
```

I extended it a bit, and make it available for markdown as well as PrismJS. (In TypeScript / class component style.)

```vue
<template lang="pug">
.content
  component(:is="dynamicComponent")
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'
import MakeHtml from '@/assets/make-html'

@Component
export default class Markdown extends Vue {
  @Prop({ required: true, default: '' }) content!: string
  @Prop({ default: () => ({}) }) ctx!: Record<string, any>

  makeHtml = new MakeHtml()

  dynamicComponent = Vue.extend({
    computed: {
      ctx: () => this.ctx
    },
    mounted() {
      Prism.highlightAllUnder(this.$el)
    },
    template: this.makeHtml.getHTML(this.content)
  })
}
</script>
```

And, `nuxt.config.js`

```js
    extend(config) {
      config.resolve.alias.vue = 'vue/dist/vue.common'

      config.module.rules.push({
        test: /content\/.+\.md$/,
        use: {
          loader: 'raw-loader',
          options: {
            esModule: false
          }
        }
      })
    }
```

> I don't know how to emit only client-side bundle, that is `ssr-only`

Actually, I lied. I do know a framework that can `ssr-only`.

https://content.nuxtjs.org/
How to update the default exception body thrown by Sping-Boot
Tags: springboot, exception, default, errors
Published: 2020-06-14 08:40:38

The default exception in spring, if thrown (and not handled by [ControllerAdvice](https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annotation/ControllerAdvice.html)) follows the exception format as

```json
{
    "timestamp": "2020-06-14T05:46:37.538+00:00",
    "status": 401,
    "error": "Unauthorized",
    "message": "Unauthorized",
    "path": "/path_requested" 
}
```

To change this default exception body to return your own custom fields, you just have to override the `BasicErrorController`(provided by the framework) and its `error` method.

* How to override

```java
@RestController
@RequestMapping({"${server.error.path:${error.path:/error}}"})
@Slf4j
public class BasicErrorControllerOverride extends AbstractErrorController {

  public BasicErrorControllerOverride(ErrorAttributes errorAttributes) {
    super(errorAttributes);
  }

  @RequestMapping
  public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
    HttpStatus status = this.getStatus(request);
    Map<String, Object> errorCustomAttribute = new HashMap<>();
    errorCustomAttribute.put("custome_message", "error");
    errorCustomAttribute.put("custom_status_field", status.name());
    return new ResponseEntity(errorCustomAttribute, status);
  }

  @Override
  public String getErrorPath() {
    return "/error";
  }
}
``` 

* How the error will now look like:

```json
{
    "custome_message": "UNAUTHORIZED",
    "custom_status_field": "error"
}
```

🍻 If you enjoyed this story, please click the ❤️ button and share it to help others find it! Feel free to leave a comment below.

Read more: 👇

* [Global Header in Swagger-Ui using springfox](https://dev.to/s2agrahari/global-header-in-swagger-ui-spring-boot-5188)
* [Grouping APIs in Swagger using springdoc-openapi](https://dev.to/s2agrahari/grouping-apis-in-swagger-55kk)
Acquisitions - [June 2020]
Tags: discuss, news, healthydebate
Published: 2020-06-14 08:39:34

In case you missed the M&A tidbits of May, please check out the previous article in this series.

We continue the journey of Acquisitions across the technology world in the **June 2020** edition with more examples. Most of you might be already aware of these by now.

1. [Zynga Acquires Turkish Org, Peak Games for $1.8B](https://techcrunch.com/2020/06/01/zynga-acquires-turkeys-peak-games-for-1-8b-after-buying-its-card-games-studio-for-100m-in-2017)

2. [Just Eat wraps up GrubHub in a $7.3B deal](https://techcrunch.com/2020/06/10/just-eat-takeaway-confirms-its-gobbling-up-grubhub-in-a-7-3b-deal)

3. [MasterCard acquires Finicity for $825 Million](https://www.marketwatch.com/story/mastercard-to-purchase-open-banking-company-finicity-for-825-million-2020-06-23)

4. [Amazon buys self-driving startup Zoox for $1.2B](https://techcrunch.com/2020/06/26/amazon-to-acquire-autonomous-driving-startup-zoox)

While occurrences like these were never new but it'd be noteworthy to observe how they pan out in a world that has been shaken to its very foundations recently. To understand more about this, I have the following questions for the Dev.to community:

----

- Which of these 2 sides would benefit from such acquisitions & why?
- How is it sustainable in a post-Covid era full of drastic changes?
Announcing the first Arcadia game for AC0/RD
Tags: python, git, javascript
Published: 2020-06-14 08:20:09

It’s been a little while since we first talked about Arcadia, but here is a little something - an update about what the first game will be.

Right now, it’s just going to be a simple one. The Star Sailors novella, which is what a number of our games is based off of, will serve as the source of inspiration for this unnamed game. The main character in the novella, Opus, is taking on the persona, or life-form of the force Gravity. A simple 1-player game, taking place on Kepler 22 (like in the novel) where you have to dodge the attacks that Gravity throws at you and defeat him.

Yes, it’s simple. Right now, it’s just a 500px by 500px screen with two characters and it’s pretty easy to win. But we’re making it on multiple versions, using Unity, Buildbox, Pygame & Javascript and we’re experimenting with what will work best on Pi-based Arcade systems and also on web-based game systems.

We’ll be expanding the game and making it into a mini-game in Arcadia (the way that mini-games will work is that you can earn the in-game currency by completing missions and mini-games, as well as achievments. It’s not meant to be a fully-featured game, but it will be large and expansive nonetheless). 

Arcadia will also have citizen science applications like in Eve Online.

Keep up to date with our Stellarios development at https://acord.software/stellarios

Originally published at https://blog.acord.software/post/620817320185577472/announcing-the-first-arcadia-game?fbclid=IwAR1NLTjAJKcvMpbr25_Gjvm2OiDNurZkFpHd_w3vSGHv1Xq_q4-cgCSMOZE
Git Commit Show-Season 2. Registrations are open for developers now [Free]
Tags: gitcommitshow, developers, mastery, free
Published: 2020-06-14 07:47:19

**Registrations are now open at http://gitcommit.show**

**What to expect:** A 2-day long, online meetup where selected developers and researchers will share their insights and breakthrough projects. Unlike other online conferences, it will be interactive with opportunities to connect with speakers and fellow attendees face to face.

**About Git Commit Show:** started in 2019 to provide a better alternative to physical conferences by being open, free, and inclusive of people who come from remote areas and modest backgrounds.
Scala+Stellar Weekly Update June 14, 2020
Published: 2020-06-14 07:38:48

🧠 Thinking about

There are many ecosystem proposals (SEPs) that are not yet supported by the SDK. The experience this week starting to implement SEP-7 highlights how it would be valuable to implement these even before they are finalised. Building them as a reference implementation would help to identify missing edge cases before they are locked in stone. In particular, the `replace` field in SEP 7, which is a declaration of transaction fields values that a user must provide whilst signing, is [slightly ambiguous in its format definition](https://github.com/stellar/stellar-protocol/issues/644). I think I should attempt to work on promising/interesting SEPs before they get the stamp of approval.

🔙 Last Week

Reverted support for multiplexed accounts, as this is not yet an approved protocol change. Released this in [v0.12.2](https://github.com/Synesso/scala-stellar-sdk/releases/tag/v0.12.2).

Started implementing [SEP 7](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0007.md#preamble), with methods for generating and parsing transaction signing request URIs. Support is done for `xdr` and `replace` arguments.

Updated the integration test docker image to use the newly released [Horizon v1.4.0](https://hub.docker.com/layers/synesso/stellar/v1.4.0-core13.1.0/images/sha256-d79d470262ca4a5613f0077d407a09e5b741a60302f2577d1653e0777938e984?context=explore).

Shared a [Github Actions recipe](https://github.com/stellar/docker-stellar-core-horizon/pull/184) for automatically building & pushing the quickstart docker image to dockerhub.

🍕 Planned (Jun-Aug)

* SEP-0007 - URI Scheme to Facilitate Delegated Signing
* SEP-0010 - Stellar Web Authentication
* Ongoing SDK rebuild effort.
Vanilla JavaScript localStorage
Tags: javascript
Published: 2020-06-14 07:16:33

Now and then, it would help if you stored a small variable for later on. Might be, for instance, a cookie bar status, a shopping cart, or whatever. We can use the localStorage API for this in `JavaScript`.

## JavaScript localStorage methods

The JavaScript localStorage comes with the following methods we can use and leverage;

- `setItem(key, value)` Allow us to set a value for a specific key we pass.
- `getItem(key)` Retrieve a specific item value based on the key.
- `removeItem(key)` Remove an item from localStorage based on the key.
- `clear()` Clears all localStorage we setup.
- `key()` Retrieves the key name on a specific number.

Let's put it to the test and set and retrieve data.

### setItem(key, value)

To set a specific value for a key we can do the following:

```js
window.localStorage.setItem('mood', '😃');
```

But sometimes we want to save an object we can do as such:

```js
var person = {
  name: 'Chris',
  mood: '🤩'
};
window.localStorage.setItem('person', JSON.stringify(person));
```

### getItem(key)

To retrieve an item we need the key we used to identify:

```js
console.log(window.localStorage.getItem('mood')); // 😃
```

Or for the Object:

```js
console.log(JSON.parse(window.localStorage.getItem('person'))); // {name: "Chris", mood: "🤩"}
```

### removeItem(key)

Once we are done with a specific item, we can remove it, but calling `removeItem` and passing the key.

```js
window.localStorage.removeItem('mood');
```

### clear()

Or if we want to clear all the localStorage, we can use the following method:

```js
window.localStorage.clear();
```

Feel free to play around with this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="dyGXOvQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript localStorage">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/dyGXOvQ">
  Vanilla JavaScript localStorage</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

The browser support is relatively good we can check if the browser supports it with the following code:

```js
if (typeof Storage !== 'undefined') {
  // Yeah! It is supported. 🥳
} else {
  // No web storage Support. 😞
}
```

[View on CanIUse](https://caniuse.com/#feat=mdn-api_window_localstorage)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Setting Up Git Organizations
Tags: git, webdev
Published: 2020-06-14 07:08:53

This week I learned about a feature that GitHub offers that I completely ignored. Usually, when I collaborate with other devs on a project, I'll have an app like Trello to keep track of workflow. Github Projects are a great way to manage workflow and delegate tasks while keeping all your tools in one place.

## The Set-Up

Creating a new project is as easy as clicking on "New Project" from the `+` dropdown menu. You'll be greeted with basic input fields as well as a template menu. 
  * None - Start from scratch
  * Basic Kanban - Starts with a column for To-Do, In Progress, and Done
  * Automated kanban - Same as Kanban and includes built-in triggers to move pull requests and issues across the columns
  * But Triage - Prioritizes bugs with To-Do, High Priority,  Low Priority, and Closed columns

I haven't used the pull request or issue feature, so basic kanban is my template of choice.

## Workflow

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

In addition to creating cards and moving them to the appropriate location, every card can be converted into an issue. Issues are useful because you can delegate issues to your team like so. 

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

## Conclusion

There are so many cool technologies and tools to discover. Sometimes learning the tech and tools that you already have on a deeper level can boost your productivity and simplify your workflow.
Should DEV.to have a feature like Quora ? 
Tags: discuss, javascript, beginners, opensource
Published: 2020-06-14 06:42:23

The dev.to community is growing everyday. I've been using this platform for almost one and a half year, and I guess only one feature is missing that is, the total views count shown on profile. Since Dev is an open source project present on Github it is possible to suggest a feature. 

Like in [Quora](https://www.quora.com/profile/Ali-Abbas-1224) , Total Answer Views reflects on the user's profile and everyone can see. 

What do you think about this feature dev family?

@Ben
Top Shelf Web development Tutorials — The Web Dev
Tags: opens
Published: 2020-06-14 06:20:57

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

I had added all of my 211 blogs to my site [https://thewebdev.tech/](https://thewebdev.tech/) and i am launching it now. I did these blogs in a span of 2 years and they contain full length series like youtube, through which you can create web-apps in ReactJS, GatsbyJS, Firefox extensions and React Native. Also, i have a good series on Interview Questions, which are based on my experience of taking and giving interviews in WebDev for the past 10 years.

So, visit the site and learn to build cool stuff with JS and become a better WebDev.

I will be keep writing full length series on it and will also be inviting some more tech writers to write or cross-post there blogs here.

If you are a tech writer, please do contact me and we can take it further.

I had also created a facebook page for the site. So, do like and share it.
[The Web Dev Facebook](https://www.facebook.com/The-Web-Dev-109996400753872/)

![Facebook Page](https://ik.imagekit.io/thewebdev/thewebdev-fixes/launch/facebook_7dcOsf2eq.png)

Also, i had launched the site on Product Hunt, so please upvote it.

https://www.producthunt.com/posts/the-web-dev

![Product Hunt](https://ik.imagekit.io/thewebdev/thewebdev-fixes/launch/ph_LAF_GUtneS.png)

I am in the process of making all my blog posts exclusive to my site only, and will be soon removing it from dev. They will only contain the starting of the post and the rest you have to read on my site. So, do bookmark this site.

Thank you all for supporting me on my blogging journey.
Where do you go to learn more advanced concepts
Tags: discuss
Published: 2020-06-14 06:10:37

Hello everyone,

I was curious where is your goto place to learn some more advanced concepts or learn something more than just the basic tutorials of like chat rooms or todo lists etc.

I would say I am currently at the intermediate level of programming, and I know how to do all of those basic apps, and I know some advanced concepts. I want to be able to read or watch how people solve more advanced problems that require some more thought than the basic apps I see all over youtube.

Any youtube channels or company articles you always look out for? Any more specific websites dedicated to more advanced concepts?
FCC - Random Quote Machine
Tags: codepen
Published: 2020-06-14 05:23:11

<p>React based webpage using bootstrap CSS that generates a random quote pulled from Free Code Camp. This was a project solution to one of FreeCodeCamps challenges. About halfway through this design, I realised that react may have been a poor choice compared to jQuery for such a simple web page. So I finished it anyway and learned quite a bit. I might give this another go in jQuery instead later. For now, this will do.</p>

{% codepen https://codepen.io/toastyrhombus/pen/yLeJzPb %}
Words that end with -ism (another Quora question)
Tags: deno, javascript
Published: 2020-06-14 05:18:38

So now there's another long list of words polluting the Quora database. This is a [list of words ending with "-ism"](https://www.quora.com/What-words-end-in-ISM) as requested at Quora.

It uses a very large collection of words, the [2019 Collins Scrabble word list](https://boardgames.stackexchange.com/questions/38366/latest-collins-scrabble-words-list-in-text-file). The code reads the entire file from Google Drive, turns it into an array, filters out the header and then filters on a regular expression.

The code is there on Quora but I've reproduced it below. It also uses the `Deno.args` property to access the command line so that a regular expression can be handed in to the script. 

```javascript
// wref.ts
const rawWords = await fetch(
  "https://drive.google.com/uc?export=download&id=1oGDf1wjWp5RF_X9C7HoedhIWMh5uJs8s",
);

const rex = (Deno.args.length) ? new RegExp(Deno.args[0], "gi") : /.*/gi;

const body = new Uint8Array(await rawWords.arrayBuffer());

const list = new TextDecoder("utf-8").decode(body).split(/\r\n|\r|\n/g);

console.log(
  list
    .filter((line: string, index: number) => index > 1)
    .filter((word: string) => null !== word.match(rex))
    .join(", "),
);
```
Invocation is
> deno run --allow-net wref.ts "ism$"
React Props
Published: 2020-06-14 04:57:26

When I started learning React, I struggled with Props. I am writing a quick overview of React Props as a small guide for those that are just learning React. Hopefully, this will prove useful for those you just starting with React.

####Components
Remember that React works with components. They are small reusable pieces that are independent and are similar to JavaScript functions. Often times, these components contain information that need to be passed between other components. This is where props come in. 

####Props are Short for Properties
Props are pieces of information stored in components. These pieces of information are often passed to other components depending on their use. In other words, components will have props of their own depending on what has been declared. The format of props are similar to that of attributes. An attribute will be declared, along with a value for the attribute. This attribute is how a prop will be called or invoked in other components.

```react
function BookParent() {
  return (
    <div>
      <BookChild title="Harry Potter" author="JK Rowling"/>
      <BookChild title="Game of Thrones" author="George R.R 
      Martin"/>
    </div>
  );
}

```
```react
function BookChild(props) {
  return (
    <div>
     {props.title} by {props.author}
    </div>
  );
}

```
Here we have two components. One is a parent component and one is child component of the parent. In the parent component, an attribute for title and author was declared with values. Title and Author are now properties of the parent(BookParent) component. However, BookChild does not know the values that were assigned to Title and Author. BookChild will need to pass in props and invoke title and author by using props as seen above. 

####Props are Passed Down from Parent to Child
As you can see the props came from the parent component. It is only being invoked by the child when it is needed. You cannot pass up a prop coming from child to parent. To do that, you would have to use a callback function(may go over this in another post). Bottom line is that props relations are parent to child!

####In Summary
Props are passed down from parent to child. Yes, I know I am repeating myself but this is very important. Props are declared at the very top level component. You cannot invoke a prop that has been declared, just like how a variable will be undefined or null if it has bee declared yet. 

So first you need to declare a prop in the Parent Component:
```react
function ParentComponent() {
  return (
  <div>
   <ChildComponent declaredAttribute={attributeValue} />
  </div>
  );
}
```

Then invoke using props in the Child Component:
```react
function ChildComponent(props) {
  return (
  <div>
   {props.declaredAttribute}
  </div>
  );
}
```

That prop will now render at the very top level component with the format being used in the ChildComponent.

Thank you for reading. Hope this was helpful.
However, the Deno community chat is on discord
Tags: discord, deno, javascript, todayilearned
Published: 2020-06-14 04:51:48

Today I learned that the main community chat for Deno is happening on Discord, at https://discord.gg/TGMHGv6 to be exact. And the question that still lies on the Deno Spectrum chat unanswered was answered within 3 minutes on Discord.