teleren/devto huggingface dataset:
Nested slots with Vue.js
Tags: vue
Published: 2020-10-24 17:20:22

Coming from the world of _Twig_ and _Latte_ (PHP templating engines), I was surprised that nested slots also work with _Vue.js_ templates.

TL;DR the following _Vue_ template works:
```html
<!-- `base-layout`'s component template -->
<div class="component">
  <slot name="wrapper"> <!-- an outer slot -->
    <div class="wrapper">
      <slot> <!-- nested /inner slot -->
        Default slot's content.
        The slot is nested within another named slot.
      </slot>
    </div>
  </slot>
</div>
```

Then, we can either provide content to the inner slot only (in this case, the default slot),
```html
<base-layout>
  <p>A paragraph for the default slot.</p>
</base-layout>
```
... or override the the whole wrapper instead.
```html
<base-layout>
  <template v-slot:wrapper>
    <div class="wrapper my-wrapper">
      <p>A paragraph for the default slot.</p>
    </div>
  </template>
</base-layout>
```

It enables us to create more flexible visual components without exposing multitude of props (e.g. for wrapper css).

The pattern works epsecially well with CSS frameworks like _Bulma_ or _Bootstrap_ that include pre-styled components that require particular wrappers to be used.
For the default usage, we need not know what wrapper classes have to be used for the components to render properly, but enables us to fine-tune them when the need arises.

Observe the following snippet to see it in action.
Note the difference between the two card components.
{% codepen https://codepen.io/dakujem/pen/PozWeBZ %}

The surprise comes from the fact that this pattern is not mentioned in the Vue docs (as far as I can tell) and I was unable to find reference to it elsewhere either.


P.S.: Sections that are rendered in another templates are called "blocks" in both _Twig_ and _Latte_ templating engines.
Five tips on how to focus more while developing games
Tags: gamedev, productivity, development, tips
Published: 2020-10-24 17:16:10

# **Or anything else, for that matter.**

I've always been an easily distracted person. So, if you are too, then this is for you. Now, this is a collection of what helped *me*, so results may vary, but generally, I think it could be used anywhere where focus is a must-have. Anyways, let's get on with the list.

___

**Don't have Discord/social media on your taskbar 💬**

This one was bound to be on this list. You see a shiny red circle awaiting you and then you're talking with somebody for 5 hours, doing nothing contributing to the game. It's one I've struggled with. Just know to put your phone on Do Not Disturb, Airplane Mode--whatever works! Just don't fall victim to the red circle.

**Temperature is everything 🌡️**

I know, it's a weird thing to say, but I've noticed I'm less focused when I'm too cold or too hot. I don't know why, but yeah. That's something, I guess. To avoid it, wear a hoodie or just change the temperature.

**Don't be depressed over your failures 😭**

Everybody makes mistakes. Realize it's okay to make mistakes. John Cena wasn't always a top-tier wrestler. He had to work to it--the goal. He made mistakes along the way, he slipped and fell over the rocks to victory a few times, and he had some bad matches. But look at him now!--Oh, yeah. I forgot I couldn't see him.

**If you're learning, please don't get too antsy 🐜**

Can I not express this enough? Just don't do it. It makes you feel bad and it tarnishes your potential of what you could've learned. It's also going to take longer than the normal way, so there's literally zero gain. Just saying, I've been through that too. *Multiple times.*

**Don't do it on weekends (Unless your schedule requires it) 📅**

Because it's the weekend. Burning yourself out is not okay. And, I also like to play video games and other activities, so please. Just allow time for yourself outside of a monitor, and go outside or something. It's the healthiest option out of all of these. Plus, you'll have a fresh mindset going into...*dare I say--*

###### **_Monday..._** *gag*

___

# **A closing statement, I guess.**

I'm not very good at writing a consistent article. But hey, I gave it my best. So what do you think? Am I wrong? Is there something I can add/improve on? If so, please tell me in the comments. Thanks, and have a wonderful day! ^^

###### *Results may vary.
Writing about writing
Published: 2020-11-02 03:46:06

---
title: Writing about writing
published: true
date: 2020-10-24 16:54:29 UTC
tags: 
canonical_url: https://triptych.writeas.com/writing-about-writing?pk_campaign=rss-feed
---

I've been off the writing horse for some time now, and while things are not great anywhere, I'm just trying to live every day one at a time and seek out answers as they present themselves. One thing that is bugging me is that I'm not writing. And when I'm not writing, I'm building up a creative “backlog” that makes everything worse.

So, with that in mind, I'm going to try writing “something” every day. And posting it to Twitter will help keep me honest and potentially I'll write something worth reading!

What am I doing right now? I'm working on a tiny interactive fiction experiment called Tiny IF. If I can get this working, I'll share my code and build on that to perhaps get back to the place I was when I was so ambitious about creating a game making tool.

I'm also working on several stories, and just trying to get all the randomness less random. I'm using [GitHub](https://github.com) as a personal goal keeping tool now, and I'll write about that at some point in the future. I'm also trying to find a game that I can play for more than one sitting. I'm so impatient now and my attention span is so low, I'm unable to even get to “day 2” on many games. But yet I want to play them!

Hoping things go well in the world in the next few weeks. We are on a negative path, and I hope that we can course correct in a huge way.

Anyway, have a good weekend everyone and I'll be back again here tomorrow – hopefully I can at least “day 2” my blogging.
Add non-sudoer user with ssh access to a specific directory
Tags: ssh, linux, vps
Published: 2020-10-24 16:52:47

---
title: Add non-sudoer user with ssh access to a specific directory
published: true
description: Add non-sudoer user with ssh access to a specific directory
tags: ssh,linux,vps
cover_image: https://images.unsplash.com/photo-1525855009402-c32162423909?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2560&h=1440&fit=crop&ixid=eyJhcHBfaWQiOjF9
---

Suppose you want to add another public key (`id_rsa.pub`) on an existing non-sudoer user, e.g. `ftpuser` for your teammate or another machine that you'll `ssh`ing often and you want this user to have access to a specific dir. In this example we'll use `/var/www/html` as the specific dir, also I'm using ubuntu as an example server.

#### 1. (optional) where's the home dir of `userA`?
If for some odd reason your non-sudoer user has a different home directory like `/var/www/html`, you may want to move it back to its default dir and symlinking it instead:

```bash
# server
sudo usermod -m -d /home/userA userA
```

#### 2. create `.ssh` dir and `authorized_keys` file if not exists

```bash
# server
mkdir /home/userA/.ssh && chmod 700 $_
touch authorized_keys && chmod 600 $_
```

#### 3. symlink a directory (e.g. `/var/www/html`)

```bash
# server
# ln -s /var/www/html /home/userA/link_name
ln -s /var/www/html /home/userA/www
```

#### 4. `authorized_keys` file in `/etc/ssh/sshd_config`

This is where we read keys that are authorized to log in:

```bash
# server
# add/update this line accordingly
AuthorizedKeysFile /home/old_user/.ssh/authorized_keys  /home/userA/.ssh/authorized_keys
```

then restart it with `sudo service sshd restart`

#### 5. add client's public key (`id_rsa` file) to server:

let's check if we have keys:

```bash
# client
# check if there's any keys exists
ls -al ~/.ssh

# otherwise create one
# for the rsa file you could
# name it like userA_id_rsa
ssh-keygen -t rsa -b 4096 -C "your comment"

# start in background
eval "$(ssh-agent -s)"

# adds key to ssh-agent, it'll ask for passphrase
ssh-add ~/.ssh/userA_id_rsa

# copy public key to authorized_keys in server
cat ~/.ssh/userA_id_rsa | ssh sudouser@host.domain -vvv "cat - >> /home/userA/.ssh/authorized_keys"

# or if the sudo user uses key for loggin in
cat ~/.ssh/userA_id_rsa | ssh sudouser@host.domain -vvv -i ~/.ssh/sudouser_id_rsa "cat - >> /home/userA/.ssh/authorized_keys"
```

#### 6. then log in:

```bash
userA@host.domain -vvv -i ~/.ssh/userA_id_rsa

# remember step 3 symlink?
# once logged in successfully, confirm if
# you can see /var/www/html in your home dir:
# ls -la ~/home/userA/link_name
ls -la ~/home/userA/www
```

#### saving ssh config

have some ssh config handy (`~/.ssh/config`):

```bash
Host userA.domain
  HostName host.domain
  User userA
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/userA_id_rsa
  IdentitiesOnly yes
  RemoteForward 52698 localhost: 52698
```

then log in `ssh userA.domain -vvv`
What Is Express In Node.js
https://sirnode.com/what-is-express-in-node-js
Published: 2020-10-24 16:45:40

Hello in this article, I will share the information about the express module in node.js which is one of the most important and popular frameworks used with Node.js and how we can use it.

Firstly, what is node.js? It is a Javascript Runtime platform started to be developed by Joyent in 2009, where we can write server-side applications with Javascript. It runs on a javascript engine called V8. V8 is vastly coded by C, C ++ and javascript languages ​​developed by Google and which Chrome web browsers also work on. Its sole purpose is to translate javascript code into machine code. It is definitely a very good performance. I created multiple events that run asynchronously and tested them myself. Their response speeds were incredible. Node.js, which runs I / O and network operations non-blocking, is very stingy in time and resources. In other words, if you want to give an example, instant transactions in very high traffic sites can be sent to the client's screen in a very short time and with less resource consumption, using the web socket, as in the same signalR, without querying the user. For example, sending stock exchange information withdrawn from a service to all clients. This will be done as the stock market information changes without querying the user. Real time applications can be done with node.js using web socket technology... Read Continue https://sirnode.com/what-is-express-in-node-js
Real-Time & Historical US Stock, Forex and Cryptocurrency Market Data
Published: 2020-10-24 16:39:39

Finage has some exciting news about new features and data feeds. We are covering all Us stock exchanges, Forex (Currencies) and Cryptocurrencies Real-Time & Historical Data at the moment.  

We are also celebrating our +1000 paid users. Thank you for who join us and also our teams worked hard to achieve this kind of success. We are also providing up to 15 years of Json Historical Market Data for Stock, Forex and Cryptocurrencies.

Whoever would like to build financial applications, developers, custom financial software companies can use Finage Market data.   

Before Finage accessing and using real-time financial data was really hard, it needs lots of paper works, much more hours of implementation and more. But with Finage you can easily access the all market feeds, just connect to our WebSockets or API by reading easy to understand documentation and with technical live chat support we are always with you. 

From now on we are also starting weekly stock analysis, historical stock prices reports, real-time stock trading analysis and more. Stay tuned with Finage for more new exciting stuff in the financial market data filed.  

Check out our real-time market data feeds: www.finage.co.uk

Daily Financial Terms by Finage:   
End of day Financial Data:  The Stock price data they called EOD shortly, is that data you can download after markets closed for that day or also you can check on specific time if you are looking for 24 hours like in the forex.

Forex, Financial Tick Data:

Tick datas is the most knows as highly frequency data is available for the market. You can also use for in deep micros truce analysis. 

Futures Data:   
In the forex, stocks or cryptocurrencies markets futures are derivative financial contracts that connect the parties to make transactions to assist predetermined future date and price.


Stock Quotes and Trade:

Quote Data means usually top of the book bid/ask prices data. You can also call BBO = best bid/offer inside market. Trade Data means records of the trades that were already transacted. Depending on your buy or sell orders it could be advantageous to use both of them.
Refactoring: Functional Decorators
Tags: typescript, javascript
Published: 2020-10-24 16:25:12

<sub>Image of decorating the sidewalk with Chalk Art</sub>

Staying in tune with [Polymorphic Composition](https://dev.to/jwp/polymorphic-composition-494k) where the majority of our code parts are Javascript or Typescript functions, we will begin to see a pattern whereby base functions can easily have more functionality simply using another function. This other function uses what is known as decorator pattern. The base function never changes. 

<sub>By "never changing working code" we simply add a function which calls an existing function but returns a different result.</sub>

Consider this Angular route function:

```typescript
/** Using the route, parse the id param
 * @returns id  e.g. route/id
 */
export function funcGetRouteId(
  ar: ActivatedRoute
) {
  let currentRoute = ar.snapshot;
  let id = currentRoute.paramMap.get("id");
  let person id = Number.parseInt(id); 
  return personId;
}

```
In the code above the id of the route is returned using angular's route snapshot. e.g. /person/id where id is the number. 


**The Decorator**
```typescript

/**Parses the route id 
 * @returns True if id is greater than zero 
 * (meaning existing person) 
 * False if person id is not greater than zero
 */
export function funcIsExistingPerson(ar:ActivatedRoute) {
   // we reuse the existing code but
   // provide a different result
   let id = funcGetRouteId(ar);
   if (id > 0) return true;
   return false;
}
```
The caller's code looks like this:

```typescript 
if (funcIsExistingPerson(this.ar)){
   // don't show icon until change;
   this.SaveIconAction
       .saveIconVisibility = "none";
   }     
```
None of the internals of how it was done are exposed, however, the naming of the function makes it clear what it's doing. 

The caller merely needs to hover over the function to pick up the API comments.

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

**A New Way of Thinking**
When we start dialing-into what decorators do for us, we spend more time thinking about the base-function. Each base-function can have a minimum of 2<sup>n</sup">-1 decorators based on the number of parameters it requires.

When we start seeing code possibilities based on the Permutations of the parameters used, we are thinking outside of all specific solutions, and more into reusable parts.

><sub> Warning: It's pretty easy to get carried away with decorators, once we dial into thinking of Permutations.  It's better; however, not to just write code because "someday" we may need it.  Unless of course, we are writing utility programs.<\sub>

JWP2020 Functional Decorators
📬 Apache Kafka Commands
Tags: kafka, programming, beginners, opensource
Published: 2020-10-24 16:10:15

---
title:  📬 Apache Kafka Commands
published: true
description: Post with introduction of Apache Kafka
tags: kafka, programming, beginners, opensource
cover_image: https://images.unsplash.com/photo-1530435622277-39544076a5f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80
---

Currently when we need to connect large information systems with different formats and volumes we will depend on tools that are in charge of being in the middle of our architecture, organizing and distributing all that information operating in high availability, this is where the integration options we have could fit very well Apache Kafka would fit our project very well.

### What is Apache Kafka?

> Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications.
*https://kafka.apache.org*

### Get Apache Kafka

At the time of writing this post it is in version 2.6

https://kafka.apache.org/downloads

![Kafka page download](https://i.ibb.co/StW9BdM/Screen-Shot-2020-10-10-at-21-58-13.png)


### Kafka Architecture

![Img](https://i.ibb.co/2hdLzkc/kafka.jpg)


* *Brokers*: In charge of containing the topics of the cluster
* *Publishers*: They are in charge of putting the messages on the topics
* *Consumers*: They extract the messages from the topics to process them
* *Cluster*: A set of Kafka nodes
* *Topics*: Flow of data that have a same context
* *Partitions*: The corresponding divisions of a topic
* *Zookeeper*: Orchest all nodes in the cluster

### Zookeeper

To use Kafka we need to first start Zookeeper, in the installation folder there is the shell command in the folder `bin`. Which is:

```shell
$ bin/zookeeper-server-start.sh config/zookeeper.properties
```

### Kafka

Now we start Kafka, we need to locate ourselves in the `bin` directory where the shell is located.

```shell
$ bin/kafka-server-start.sh config/server.properties
```

### Creating the topic

To generate a topic we must execute:

```shell
$ bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 2 --partitions 3 --topic my-topic 
```

### List all topics

```shell
$ bin/kafka-topics.sh --list --zookeeper localhost:2181
```

### Get information about the topic

```shell
$ bin/kafka-topics.sh --describe --zookeeper localhost:2181 --topic my-topic 
```

### Delete a topic

```shell
$ bin/kafka-topics.sh --delete --zookeeper localhost:2181 --topic my-topic 
```

### Creating a consumer

```shell
$ bin/kafka-console-consumer.sh --topic my-topic --from-beginning --bootstrap-server localhost:9092
```

### Creating a producer

```shell
$ bin/kafka-console-producer.sh --topic my-topic --bootstrap-server localhost:9092
> Mensaje 1
> Mensaje 2
```
Regex: Match Sets
Tags: regularexpression, beginners, codenewbie, webdev
Published: 2020-10-24 15:57:15

```js
console.log('hook, book, cook'.match(/[hbc]ook/gi)); // [ 'hook', 'book', 'cook' ]
```

Match any of the character from the set

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
#MyReactJourney - Simple ToDo App
Tags: react, hacktoberfest, node, javascript
Published: 2020-10-24 15:54:06

### Why Javascript + React ?
You know javascript is a very interesting language, you will never know where and which web/app you would be developing it with. 

My React journey started long back, but I never shared my views and experiences with my friends, I think I never thought where to begin it with and what should be shared.

So I have taken this opportunity with Dev.to to start with a simple ToDo app, #LetsStart !

### The App
My ToDo app is a simple web app that displays a small input box (inline form) and listing of all the ToDo items. 

The UI Theme is using Bootstrap 4.5 and Node-SASS to override some css properties.

You can play around as you like!

I have also implemented a Mock API from mockapi.io and stored all the ToDo items. It's very easy to begin with and you can generate dummy data with GET/POST/DELETE Api 

(Clone API)[https://mockapi.io/clone/5f9422429ecf720016bfc339]

### Dev Dependencies
Some UI and JS Dependencies:
- "axios": "^0.21.0",
- "bootstrap": "^4.5.3",
- "node-sass": "^4.14.1",
- "react": "^17.0.1",
- "react-bootstrap": "^1.4.0",
- "react-dom": "^17.0.1",
- "react-scripts": "4.0.0",

This project is bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

### Contributions
(@austinnoronha) The working sample APP is hosted on Github - https://github.com/austinnoronha/my-first-react-website/tree/main/my_todo_app

Thank you to #Hacktoberfest 2020 for inspiring me to start my Blog and Tech journey!
Reference vs. Primitive Values
Tags: javascript, beginners, tutorial
Published: 2020-10-24 15:48:22

**Primitive Types** 


A primitive data type is defined by the programming language. Primitive data types consist of numbers, strings, boolean, null, and undefined. 

```javascript
let a = 1; 
let b = 1; 

a === b; // true

let string1 = 'hi';
let string2 = 'hi';

string1 === string2; // true
```
Variables holding the same value and same data type will always return true in a condition as long a strict operator is used (===). This is not the same for reference types.



**Reference Types**

Reference types are nonprimitive types and are not defined by the user. Objects are considered a reference type; furthermore, arrays are also objects. Objects are created by the programmer. 

```javascript
let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object1 === object2; // false
```
When we assign a key-value pair to object1 and assign the same key-value pair to object2 and check to see if they are equal we get false. This is a bit confusing since this works for primitive types. Every time we create an object we are creating a space in memory to hold the information and a reference to that object in memory. Creating 2 objects creates 2 different references and 2 different addresses where the objects will be saved. Even though the objects contain identical key-value pairs this is the reason they are considered different. 

```javascript
let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object3 === object1; // true; 
```

Now if we take a look at object3 variable the value assigned to it is object1. A new object is not being created this time. Only a reference to object1 is in the value of object3. Object1 and object3 point to the same address; therefore, the same object. Now doing a conditional statement will return true.

```javascript
let object1 = {value:1};
let object2 = {value:1};
let object3 = object1; 

object1.value = 2; 

console.log(object3.value)// 2;  
```
Changing the properties of object1 will also change the properties of object3 since they are the same object.

Reference types can be a bit difficult to understand, but I hope after reading this blog, it will be clearer in your mind.