teleren/devto huggingface dataset:
VueJS is easy and everyone should learn it
Published: 2021-02-09 20:42:49

#**What even is JueVS and why is it easy?**
VueJS is a JavaScript framework that allows for the effortless implementation of UIs and front-end applications. Over the past couple of years, it has increasingly become exponentially more popular among developers and companies are starting to take notice. The reason for VueJS's rise in popularity is mainly due to how fast and lightweight it is, along with requiring less of a learning curve like most other JS frameworks. 

#**Where to begin?**
The installation will be your first step in becoming a VueJS pro. You can download 2 versions of VueJS from their website [Link](https://vuejs.org/v2/guide/installation.html). The two versions available currently are Development (which comes with error messages and is recommended for newer developers) and Production (implemented at the command line and does not come with any error messages).

#**What I'll be demonstrating today**
Prior to this assignment, I had a draft resume written up in basic HTML and CSS. With this, I'm going to be demonstrating how I implemented a VueJS component in order to simplify down my cluttered code. For example, before VueJS, I had a multitude of list items and variables that were scattered around the entire resume which acted only as text headers. Now my code has variables I can refer back to at any point and a specific area where all my variables will be.

#**My Code and Video**

[Explanation](https://youtu.be/ij363MLdXrQ)
[My Code](https://codepen.io/nzp126/pen/yLVaBOq)
Mobile Apps for Manufacturing: Types and Features That Reshape Industry
Tags: mobile
Published: 2021-02-09 20:35:21

Have you thought about the mobile apps for manufacturing recently? Thanks to digital transformation in manufacturing, there have been enormous changes in the workplace over the past years. And the manufacturing software doesn’t feel like the one from the 1980s anymore. Apps for manufacturing companies are already here to stay and to improve.

__In this blog post__:
- What’s a Manufacturing App?
- What Is the Value of Mobile Apps for Manufacturing?
- Apps for Manufacturing: Digging into Types and Features
- Mobile Apps for Manufacturing: To Build or Not to Build

[https://apiko.com/blog/mobile-apps-for-manufacturing-industry/](https://apiko.com/blog/mobile-apps-for-manufacturing-industry/)
Recreate Azure Dashboard with CSS
Tags: css, grid
Published: 2021-02-09 20:23:04

![image](https://dev-to-uploads.s3.amazonaws.com/i/vfy0pno9rqep8r8ujv14.png)
Azure has a customizable dashboard wherein the user can select a series of tiles or components that relate to various resources or activities.  Each can be positioned and/or sized according to the needs of the user.  Some are 1x1, others are 2x3, and so forth.

I'm looking to recreate this dashboard concept in a web application with CSS and I'd like to know if there's a particular grid style or technique that would be best suited for dynamic creation based on a configuration stored in a database.  Are there ways to do this with CSS Grid with things like colspan and rowspan like styles?
Markdown cheatsheet
Tags: markdown, todayilearned, beginners
Published: 2021-02-09 20:14:21

*Originally published on [my blog](https://temmie.me/blog/markdown-cheatsheet)*

You can style texts on the web with markdown. Markdown files use the .md or .mdx extensions. Here is a list of essential markdown syntax that you will mostly use often.

##HEADERS
```
# Heading 1 <h1>
## Heading 2 <h2> 
### Heading 3 <h3>
#### Heading 4 <h4>
##### Heading 5 <h5>
###### Heading 6 <h6>
```
# Heading 1 <h1>
## Heading 2 <h2> 
### Heading 3 <h3>
#### Heading 4 <h4>
##### Heading 5 <h5>
###### Heading 6 <h6>

##BOLD
```
**I am a bold text**
__I am a bold text__ 
```
**I am a bold text**

##ITALICS
```
*italicized text*
_Italic text_ 
```
*italicized text*

##LISTS
#####Unordered List
```
- Shoes
- Bags
- Clothes
```
- Shoes
- Bags
- Clothes

#####Ordered List
```
1. Baby
2. Teenager
3. Adult
```
1. Baby
2. Teenager
3. Adult

##CODE
```
`code`
```
`code`

##LINK
```
[inline-style link](https://temmie.me)
[inline-style link with title](https://temmie.me "My portfolio")
```
[inline-style link](https://temmie.me)
[inline-style link with title](https://temmie.me "My portfolio")

##IMAGE
```
![descriptive alt text](image.jpg)
```

##BLOCKQUOTE
```
> blockquote
```
> This is a blockquote

##HORIZONTAL RULE
```
Hyphens
---
Asterisks
***
Underscores
___
```

Hyphens

---

Asterisks

***

Underscores

___

##STRIKETHROUGH
```
~~This is strikethrough sentence.~~
```
~~This is strikethrough sentence.~~

##TABLE
```
| Name | Type |
| ----------- | ----------- |
| Temitope | Frontend engineer |
| Ayodele | Coach |
```
| Name | Type |
| ----------- | ----------- |
| Temitope | Frontend engineer |
| Ayodele | Coach |


##INLINE HTML
```
<h4>My Title</h4>
<p>I really have nothing to write here, lol</p>
<p>Markdown does *not* work well here. Use <strong>HTML tags</strong> instead.</p>
```
<h4>My Title</h4>
<p>I really have nothing to write here, lol</p>
<p>Markdown does *not* work well here. Use <strong>HTML tags</strong> instead.</p>


You can play around the markdown syntax [here](makeareadme.com).

Checkout my articles on [my blog](https://temmie.me/blog)
GraphQL Schema Federation With Apollo, TypeScript and Node.js
Tags: programming, javascript, graphql, softwareengineering
Published: 2021-02-11 18:41:35

---
title: GraphQL Schema Federation With Apollo, TypeScript and Node.js
published: true
date: 2021-02-09 20:10:12 UTC
tags: programming,javascript,graphql,softwareengineering
canonical_url: https://medium.com/swlh/graphql-schema-federation-with-apollo-typescript-and-node-js-7aa6b0ae06
---

[![](https://cdn-images-1.medium.com/max/1920/1*nbCCHCnEXrA6tAQr8YMXkA.png)](https://medium.com/swlh/graphql-schema-federation-with-apollo-typescript-and-node-js-7aa6b0ae06?source=rss-269f954fad8c------2)

Let’s build a single data graph that aggregates multiple services

[Continue reading on The Startup »](https://medium.com/swlh/graphql-schema-federation-with-apollo-typescript-and-node-js-7aa6b0ae06?source=rss-269f954fad8c------2)
Make Console Logging in VS Code 10x Faster with Turbo Console Log
Tags: vscode, visualstudiocode, productivity
Published: 2021-02-09 20:10:08

---
canonical_url: https://blog.natterstefan.me/make-console-logging-in-vs-code-10x-faster-with-turbo-console-log
---

> (...) make debugging much easier by automating the operation of writing meaningful log message.
> ([source](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log))

The first sentence on the Turbo Console Log (TCL) Marketplace page sums it up very well. Debugging becomes easier with TCL because it helps you log information quickly. This process is automated and can be started with a shortcut. And last but not least, TCL provides the logs with context. This context helps you to find out where the information of the log is located in the code. Let's look at an example.

## Example

For the example, I quickly set up a [Create-React-Application](https://reactjs.org/docs/create-a-new-react-app.html) and added a `useEffect` which logs the result of `Date.now()`. You see me selecting the variable and then executing the TCL command from the command line. You can also use a shortcut, but for the simplicity of the example, I used the command directly. It shows you that this is also possible.

Once I executed the command TCL created the `console.log` for me with the requested information. The information is then available to me in the browser for further debugging.

![Turbo Console Log](https://dev-to-uploads.s3.amazonaws.com/i/pcrp3j0tclk6wed79ytn.gif)
 
## Settings

![Turbo Console Log Settings](https://dev-to-uploads.s3.amazonaws.com/i/eqiwt6dpo6j6bg82sjiq.png)

Open the Settings of VS Code (e.g. with `CMD + ,` on macOS) and search for "Turbo Console Log". On the settings page, you get a list of options to customize TCL according to your needs. You can add or remove context, add a prefix to the logs, and more. Make it yours.

## Download the Extensions

Get the extension for VS Code [here](https://nttr.st/36LMiKj).

## Do you like my Content?

Make sure to subscribe to my [newsletter](https://newsletter.natterstefan.me/) and never miss new productivity tips, software engineering news, and more!
Experiments with A-Frame and Javascript Games - Chase the cats and CubeGen. 
Tags: javascript, gamedev, html, css
Published: 2021-02-09 19:42:04

I have been exploring using AFrame and vanilla javascript a lot more in the last week to create simple game like experiences. I like A-Frame ease of use and though I think in some ways it can be hard to make something that feels 'polished' with it, for purely experimental fun little side project like these two it can be nice and simple to try out ideas with it. What promoted these two random games was in fact randomness! So I have been playing a bit with generating elements of a level in games for the last 6 months, mostly on playcanvas projects, and looking more into procedural generation, and wanted to apply this in a simple setting. I started as simple as it can get - generating a random numbers of cubes!

## CubeGen
CubeGen is a simple game whereby you have to find the white cubes from a randomly generated amount of cubes with a shimmering texture look to them. In the first version of the game I just created it on a typical plane with no walls, and the player had to push through the boxes to find the correct one, but it felt like it lacked a certain dynamic to make it more interesting. 

So after a day or two I decided to really start playing with the A-Frame physics system component some more, figured out how to create a fly cam which worked with collisions etc and put it in zero gravity. I go into it more in the video below but the actual code is fairly simple - Do some DOM manipulation with js combined with utilising A-Frames component system to detect collision event and then a fair amount of for loops to create the 'random' cubes to the game area. There is more info below along with an overview on the original prototype if you are interested.    

### Overviews on CubeGen conception
{% youtube n5fQNj76oFQ %}

### Final Game
{% youtube btK4LscCJTw %}

### Source:
{% github drnoir/find-the-boxes-gen %}

### Play:
 https://drnoir.itch.io/cubegen 

After I made CubeGen I wanted to extend the idea a little further and make something a little different so I of course opted for cats! Much of the code and logic was copied from the CodeGen project but the main difference was trying to create random movement for the cats which was sort of implemented but needs some refining and fixing still. There is a more in-depth overview below. 

### Overview of Chase the Cats
{% youtube PGsxNnmWOe4 %}

### Source:
{% github drnoir/chasethecats %}
Customize POJO generation from IntelliJ Database tool window
Tags: intellij, sql, java
Published: 2021-02-09 19:23:19

I was already a huge fan of IntelliJ Ultimate's [Database Tool Window](https://www.jetbrains.com/help/idea/database-tool-window.html); however, today I found a gem hiding further down in the context menu: **Scripted Extensions**.

What brought me there in the first place was that I wanted to generate some bare-bones POJOs that were [Lombok `@Data` annotated](https://projectlombok.org/features/Data) and had simple [JPA `@Column` fields](https://docs.jboss.org/hibernate/stable/annotations/reference/en/html/entity.html#entity-mapping-property-column) for [use with JOOQ](https://www.jooq.org/doc/3.14/manual/sql-execution/fetching/pojos/). IntelliJ Ultimate comes with a Scripted Extension, `Generate POJOs.groovy`, that got pretty close. So, I started with that and created a copy of that file...

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

...with this content:

{% gist https://gist.github.com/itzg/a2ffb550689f806636e202f619b50e7e  
 %}

Now I can select tables, right-click, and run the extension:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mwrmb3br6b0oxxdxrs7g.png)
Should parent component pass object or just id?
Tags: react, redux
Published: 2021-02-09 19:02:43

A colleague and I have a difference of opinion. Say a parent component rendering a list is using map to render a child component for each data object in the list (the data here is being stored in state).

My colleague insists only the id should be passed to the child component, and the child component does a look-up on the data stored in state to get the object.

I think, the parent having already looped through, should pass the entire object so the second look-up inside the child component can be skipped.

What's the general consensus out there?
The difference between String and string in Typescript
Tags: typescript, learning, javascript
Published: 2021-02-09 19:01:22

TypeScript is a good advancement in the javascript ecosystem.
Today we are going to talk about the difference between the `String` and `string` types in Typescript.

```shell
Type error: Type 'String' is not assignable to type 'string'.
```

Let's take a look at the above error.

To begin, we know that whether we use String or string, we would want to refer to the same thing. But both of those are a little different.

*String* is a class in JavaScript to construct strings. It provides a way of creating strings using that constructor. What we get using *String* is an object.
If you check if it's a string or not, you will get \*
`object`.

```javascript
let name = new String('Mike');
console.log(typeof name); // object
```

*string* on the other hand does not exist in JavaScript. Rather it is used in Typescript to tell it it is an actual string.

Therefore, when you are creating a function, type or interface in Typescript, it is recommended to use lowercase `string` to tell Typescript you want to get an actual string. If you use `String`, then you will get an object (which is not what you would want).

Thank you for reading.

---
# Other articles of mine that you might like
- [Scooter: Write and publish short code snippets](https://josiasdev.best/scooter-write-and-publish-short-code-snippets)
- [Create your own HTML element.](https://josiasdev.best/create-your-own-html-element)
- [Some JavaScript array methods](https://josiasdev.best/some-javascript-array-methods)
- [My hashnode Christmas Hackathon submition.](https://josiasdev.best/my-hashnode-christmas-hackathon-submition)
- [Create and deploy a react app to stormkit](https://josiasdev.best/create-and-deploy-a-react-app-to-stormkit)
Utilize Web Components
Tags: webcomponents, frontend, webdev, learn
Published: 2021-02-09 19:00:33

Web Components are a great tool to develop a website. You can use other peoples already coded components and input them into yours, with a few easy steps. Find more compontents to use at https://www.webcomponents.org/ or play around on your own to find and make more.

Today I'm going to walk you through how to install, import, and utilize a web component with these six steps. If you are a visual learner you can watch the video down below, while using this code to help you. 

**1. Install node.js**
The very first thing you need to do is install node.js at https://nodejs.org/en/. This will help your terminal to understand the prompts we give it.

**2. Initialize the repository**
Now that we have all the correct installations we can start our project. Open your terminal and run `npm init @open-wc`. This will ask for your preferences and the project name. I chose all of the suggested choices for the repository but feel free to play around with different options. From there we should change our directory to the actual project with `cd <project-name>`.

**3. Open VS code**
We are now ready to open the repository to make sure it worked correctly. You can do this using the command `code .`.

**4. Install components**
Heading back to our terminal, we are now ready to install our components. Today we used meme-maker and moar-sarcasm but dont be afraid to try new ones. You can install the components by running `npm install @lrnwebcomponents/meme-maker` and `npm install @lrnwebcomponents/moar-sarcasm`. Now we will go back into our js file to import them at the top using ```
import '@lrnwebcomponents/meme-maker';
import '@lrnwebcomponents/mpoar-sarcasm';
```

**5. Start the project**
To open the website in your browser run `npm start` in the terminal. Here you can make sure everything is working well before you try to use the components.

**6. Use components**
Now that we know the project is good we can go into our javascript again and in the render function actually use the component tags. 
```
<meme-maker
  image-url="https://images.immediate.co.uk/production/volatile/sites/3/2021/02/Super-Bowl-meme-d53799a.jpg?quality=90&resize=620,413"
  top-text="trying to figure out"
  bottom-text="web components">
</meme-maker>
<moar-sarcasm>
  "trying to figure out web components"
</moar-sarcasm>
```

{% youtube 25LVsllIKgY %}

That looks great! Good luck with your exploration and keep coding!
Load a custom font in Gatsby
Tags: gatsby, font, loadfont
Published: 2021-02-09 18:58:14

---
title: Load a custom font in Gatsby
published: true
description: How to load that awesome new font you downloaded
tags: gatsby, font, loadfont
---

To load a custom font in a Gatsby project you will need to create a `gatsby-ssr.js` file and use the `onRenderBody` function. This will allow you to append a link to the sites head. 

### gatsby-ssr.js

```js
const React = require("react");
export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <link
      rel="stylesheet"
      href="https://indestructibletype.com/fonts/Jost.css"
      type="text/css"
      charset="utf-8"
    />
  ]);
};

// Can then be accessed like: font-family: Jost in your code
```
DevRel Handbook 2021 - Community Wisdom
Tags: devrel, communities, collaboration
Published: 2021-02-09 18:50:01

*"The greatness of a community is most accurately measured by the compassionate actions of its members." – Coretta Scott King*

Last December, just before Christmas, I had the pleasure to be invited to a virtual happy hour with a diverse group of passionate people - Product Leaders, Developer Relations, Community Managers and startup founders.

Sipping our beverages that cold evening and with sunny beach pictures as our zoom backgrounds, we started sharing our experiences from 2020 and thoughts on how we should operate in 2021 and beyond. We touched upon conducting better events, community building, DevRel and how startups can start building a close-knit network with a shoe string budget.

We soon realized that these experiences are way too important to be lost in a happy hour and the idea of a **collaborative DevRel Handbook** was born.

We prepared a list of topics that evening but promptly removed a few that were extra creative, possibly an after effect of happy hour drinks 😄. 

**DevRel Handbook Topics**
1. What are the best outreach channels for developer advocacy
2. Should you start a community or leverage existing communities?
3. Best practices when you start a new community and more

Full list of topics [here](https://weavr.ai/devrel-handbook/)

*This handbook is a collaborative effort from this amazing community of DevRels, Product leaders, Startups, developers & Community Managers.* Participants name below

Please share your thoughts here 👇🏽
[DevRel Handbook - 2021 & beyond](https://social792541.typeform.com/to/U7P2LGWz)
How do I stop jMonkeyEngine window from consuming the mouse when it's focused?
Tags: java, gamedev, help, jmonkeyengine
Published: 2021-02-09 18:57:40

How do I stop a jMonkeyEngine window from consuming the mouse when it's focused. E.g. I want to disable the 3D it a way that locks the camera AND lets the mouse still move around the user's screen, as if it were a normal window. How can I do that?

<b><center><b>
##Thanks!<br/>Cheers!
</b></center></b>
Introducing stencil.email
Tags: opensource, showdev
Published: 2021-02-09 18:55:06

[stencil.email](https://stencil.email) provides a set of 4 HTML email templates that can be quickly used in just a couple of lines of code.

All templates are:
✅ Responsive
✅ Customizable (colors, text, icons) 
✅ Tested on all major email clients
✅ Ready for production

I built this because many times I just wanted to send a simple, but good looking, transactional email without having to pollute my workspace with `.html` files or rely on hosted third parties. 


This is all you need:
```javascript
const Stencil = require('@radval/stencil')


const stencil = new Stencil('transactional')
const html = stencil.render({
    heading: 'Welcome, Jane! 🎉',
    message: 'We’ve heard you like emails!',
})
```

Check out the [repo](https://github.com/valentinradu/stencil) for examples and the list of customizable features.

Hope it helps someone out there!
Methods to Download and Use QuickBooks Component Repair Tool 
Published: 2021-02-09 18:48:11

At the time of installing QuickBooks, the user might come across certain error codes, which includes 1603, 1935, 1904, 1402, etc. This is when <a href="https://qbsenterprisesupport.com/quickbooks-component-repair-tool/">QuickBooks component repair tool</a> comes into play. This tool can be downloaded and installed to get rid of several types of QuickBooks errors that the user might stumble upon. The component repair tool can also <a href="https://qbsenterprisesupport.com/fix-microsoft-net-framework-errors/">fix the issues related to framework. Microsoft MSXML, Microsoft.NET. and Microsoft Visual C++</a>. 

After going through this post, the reader might be able to make the best use of QuickBooks component repair tool successfully. 
Moreover, if you are unable to get rid of the errors using this tool, in that case, the user can speak to our <a href="https://qbsenterprisesupport.com/quickbooks-support/">U.S based QuickBooks desktop support</a> team right away at 1-800-761-1787, and our team of professionals will ensure to provide you with immediate technical assistance.
How to use @Attribute decorator in Angular
Tags: angular
Published: 2021-02-09 18:47:00

> [Clique aqui](https://wldomiciano.com/como-usar-decorator-attribute-em-angular/) para ler em Português.

The [`@Attribute`][2] decorator allows passing data from a parent to a child component in a way very similar to the [`@Input`][1] decorator.

But `@Attribute` is very limited in comparison to `@Input` as it only allows passing simple static `string` data.

## How to use

First, you must decorate a constructor parameter.

In the code below I used the `readonly` keyword just as a preference matter, your parameter doesn’t need to be read-only and you can use any access modifier you want.

```ts
@Component({
  selector: "app-hello",
  template: `{{ parameter }}`,
})
export class HelloComponent {
  constructor(@Attribute("message") readonly parameter: string) {}
}
```

So you can pass a static string as a normal HTML attribute. Note that the attribute name must be the same as the argument passed to `@Attribute`.

```ts
@Component({
  selector: "app-root",
  template: `<app-hello message="Hello"></app-hello>`,
})
export class AppComponent {}
```

## How DO NOT use

You cannot use data binding with `@Attribute`. The code below shows four **WRONG** ways to use this decorator.

```ts
@Component({
  selector: "app-root",
  template: `
    <app-hello [attr.message]="'Hello'"></app-hello>
    <app-hello [message]="'Hello'"></app-hello>
    <app-hello message="{{ hello }}"></app-hello>
    <app-hello [message]="hello"></app-hello>
  `,
})
export class AppComponent {
  hello = "World";
}
```

## Final thoughts

Although the `@Input` decorator is more flexible, sometimes a simple static string may be more suitable. In these times the `@Attribute` decorator may be very useful.

I hope this article was helpful.

[1]: https://angular.io/api/core/Input
[2]: https://angular.io/api/core/Attribute