teleren/devto huggingface dataset:
Single File Components in Two Minutes
Tags: vue, webdev, beginners, css
Published: 2019-10-20 17:15:17



Single-File-Components or SFC is a Vue.js feature that allows us to build our entire component - template, logic, and styles, in one `.vue` file.

Below is an example of a component that displays a paragraph element with static text and a dynamic winner.

```vue
<template>
<p>And the winner is: {{ winner }}</p>
</template>

<script>
module.exports = {
	data: function () {
		return {
			winner: 'You'
		}
	}
}
</script>


<style scoped>
p {
	color: blue;
}
</style>
```

### Template & Script
The template portion of this example is a paragraph element with some template syntax that allows us to render data to the DOM. 

Templates in single-file components must be wrapped in one HTML tag, so if we wanted to include multiple paragraph elements in our example, we would have to wrap our elements in a `div` or a similar container element.

In between the script tags are where our logic and data are found. The data and DOM are linked allowing us to dynamically change our data, so if we were to change the winner data to say 'me', the DOM would reflect that change reactively.

### Style
```vue
<style scoped>
p {
	color: blue;
}
</style>
```
In the example above, the style tag features the attribute `scoped`. This attribute allows us to style the elements of the current component only. 

Meaning if this component is featured on a page with other paragraph elements, only the paragraph element in this component will take on the color blue, the rest will follow whatever default rules were set for the paragraph elements.

<hr>
For additional reading on single file components or the Vue framework in general, I recommend checking out the official <a href="https://vuejs.org/v2/guide/"> Vue.js documentation</a>
My dear and beloved developer, a.k.a. Narwhal
Tags: hiring, barcelona
Published: 2019-10-20 17:09:05

---
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q71sc5h0wyqtn8t6rimi.jpg
title: My dear and beloved developer, a.k.a. Narwhal
published: true
description: Lorem ipsum
tags: hiring, barcelona
---

This is a 💌 love letter 💌 for you.

I've been looking for you. You’re so hard to find you because you prefer to make things with a computer instead of looking for a new job or career opportunity.

I know, I do too. But forget about me, this post is actually about you.

> # Why bother reading this? Why did I write it?

I'll personally invite you for a beer. _How?_ Only the worthy will find out.

# Choose Your Own Adventure:

1. Keep reading if you think you are (or you will be) one of the best developers you know, you love creating new things & you enjoy coding.
2. **[Stop reading] (https://dev.to) if you just want a "job", if working in a fun team culture doesn't matter to you or if you hate sunny Barcelona.**

{% instagram B3uPw14oLhL %} 
{% instagram BtfiIIChCwf %}

***
# Want to know the secret about great developers?
The BEST developers are already employed and actually like their jobs.

Want to know what makes you are GREAT developer?

- You speak code
- You wrote tons of code in more than one programming paradigm (i.e. OO, Functional, etc)
- You created, or contributed to the creation of, systems that solve real-world problems
- You prefer coding rather than talking
- You are open minded and a problem solver
- You learnt at least one language the hard way
- You simply write from good to outstanding code
 

Feeling identified? Great! Think of this as our standard, we are looking for the new generation of pragmatic developers and you might be a great fit for us.

Here's the deal: 
{% organization caravelo %}

[Caravelo] (https://www.caravelo.com) -Technology and Software Solutions for airlines- is growing and is looking for more developers to join the core team.

So why would you be interested in checking out Caravelo?

1. "Generic answer that all companies say" (no need to repeat it again)
2. You'll have the opportunity to continuously learn by doing and grow
3. It's pretty fun to work on something that impacts the travel experience of 100,000+ passengers a month (worldwide)
4. We pay reasonable-market salaries
5. We believe in team diversity, work-life balance, and continuous feedback

So if you're just looking for a "job", then we're really not the right place for you.


Since `text` is boring I thought I'd add a few GIFs to convince you to talk to me :)

![What's wrong with you guys](https://media.giphy.com/media/YsMO3SEJiF0Ag/giphy.gif)

This is how I feel when I spend all day looking for talented developers like you.

![Happy](https://media.giphy.com/media/Is1O1TWV0LEJi/giphy.gif)

Now I'm kinda happy because you are still reading this post so you might be the right person.

When you do average things, you get average people. We like hiring great people in a fun way.

Go and check our :beer: #BeerCruit meetups and let me invite you for a Beer. https://github.com/caravelo/beercruit

XXX,

From yours truly
Can we extend the Kubernetes API? How?
Tags: kubernetes, beginners, bitesize
Published: 2019-10-20 16:34:56

---
title: Can we extend the Kubernetes API? How?
published: true
description: Kubernetes bitesize series for busy people. No more than 2 min read. Read it while waiting for the coffee to brew. 
tags: kubernetes, beginners, bitesize
cover_image: https://github.com/adipola/my-posts/blob/master/pictures/kubernetes_sun_bitesize.gif?raw=true
series: Kubernetes in Bitesize 
---

First of all, **YES!** Kubernetes API can be extended.

![](https://media1.tenor.com/images/c3e1704b3fcf54ad94f1a5be47514674/tenor.gif?itemid=4350445)

Kubernetes introduces the concepts of resources, controllers and custom resources/controllers. In brief, **resource** is an endpoint for storing API objects of a certain kind. **Controllers** are control loops that watch the state of your cluster. Not sure what it means? check [Kubernetes Reconciliation Loop](https://dev.to/adipolak/kubernetes-self-healing-reconciliation-loop-4aj5).

Using custom resources help make K8s modular where we can pick the resources needed for our cluster. For example, a core built-in resource is **Pod**.
Resources can also be called - objects.

The custom resource created is also stored in the etcd cluster with proper replication and lifecycle management.

We can add or remove custom resources using _dynamic registration_ while the cluster is up and running. Once a resource is installed, the user can access it using kubectl (K8s command line) just like they would access the core resource pods:

```bash
kubectl get pods
kubectl get {your_new_resource}
```


In order to create a full **declarative API**, one will need to add custom controllers as well. This helps us to specify the desired state of the resource and try to keep the current state of K8s objects in sync with the desired state.

We can leverage custom controllers to encode domain knowledge for specific applications into an extension of the Kubernetes API.

There are two main ways to extend the Kubernetes API:
1. [Using aggregation Layer](https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/apiserver-aggregation/)
2. [Using CRD - CustomResourceDefinition](https://kubernetes.io/docs/tasks/access-kubernetes-api/custom-resources/custom-resource-definitions/)



## What about a use case?
For example, we might want to introduce our own **SSL Configuration information for specific domain**, for that we can leverage resources and controllers.


Want to deep deeper and try it for yourself? Check the sample-api server [repo](https://github.com/kubernetes/sample-apiserver).




**This was Extending Kubernetes API in under 2 minutes. Learn something new in every bite !**

![](https://media.tenor.com/images/82517b1fbf01e0db1c2636319e2c6965/tenor.gif)


🐦 Happy to take content suggestions, questions and more on [twitter](https://twitter.com/AdiPolak).
Shadow DOM, Custom Elements and Web Components Explained
Tags: webdev, webcomponents, html, dom
Published: 2019-10-21 01:47:24

---
title: Shadow DOM, Custom Elements and Web Components Explained
published: true
date: 2019-10-20 16:34:45 UTC
tags: webdev, web components, html, dom
cover_image: https://i1.wp.com/geekyminds.co.in/wp-content/uploads/2019/10/interface-3614766.png
canonical_url: https://geekyminds.co.in/shadow-dom-and-custom-elements-explained/
---

Web Components are a relatively new set of technologies that lets you create custom HTML elements using the shadow DOM. They enable you to write markup, styles and logic once and **reuse it** around your website or web app!

I'm a strong believer in Project-Based Learning (PBL), so we are also going to write a custom element from scratch!

### We will be looking at: 
* The Document Object Model (DOM) ✌
* The concept of Shadow DOM - simplest explanation 🦄
* Associated terms (shadow host, tree and root) 🐈
* Custom Elements, Autonomous Custom Elements and Customized Built-in Elements 🐕
* **Project** - Create a Custom Element from Scratch! 🎉

[Continue reading "Shadow DOM and Custom Elements Explained"](https://geekyminds.co.in/shadow-dom-and-custom-elements-explained/)

The post [Shadow DOM and Custom Elements Explained](https://geekyminds.co.in/shadow-dom-and-custom-elements-explained/) appeared first on [GeekyMinds](https://geekyminds.co.in).
How do you organize your virtual environments?
Tags: productivity, python, environments
Published: 2019-10-20 16:30:42

I am currently programming in Python at home and for each project I have a virtual environment, this practice avoid a lot of problems. A while ago I put virtual environments in their respective project directories, but that raised some issues with git and stuff...

So how do you organize your virtual environments? Is there a good practice for this?

me:
`projects
├── archives
│   └── project1
├── lab
│   └── project2
├── study
│   └── project3
├── venvs
│   ├── project1venv
│   ├── project2venv
│   └── project3venv`

In general, I organize my directories like @cecilelebleu, with just a few changes. See:
{% post https://dev.to/cecilelebleu/how-i-manage-my-projects-folders-and-files-38d3 %}
Replaced Element and Void Element
Tags: html
Published: 2019-10-20 16:24:06

---
title: Replaced Element and Void Element
published: true
description: A brief explanation of replaced and void element
tags: html
series: FrontEnd Development Zero to Hero
---
Elements in HTML are either Replaced or Void.

##__REPLACED ELEMENT__
An [answer on Stack Overflow] (https://stackoverflow.com/questions/38779034/list-of-replaced-elements) on this same topic sums it up:

> Replaced elements are those, whose content will be replaced in the document preparation phase. Before the replacement happens, browser (or officially, user agent) could not know the exact dimensions. For example, the content of `img` element will be replaced with the image defined as its `src` attribute. And only after replaced, browser could know how wide and high it is, then try to render it in the right position.

###__LIST OF REPLACED ELEMENTS__

* `<applet>`
* `<audio>`
* `<br>`
* `<button>`
* `<canvas>`
* `<embed>`
* `<iframe>`
* `<img>`
* `<input>`
* `<math>`
* `<object>`
* `<select>`
* `<svg>`
* `<textarea>`
* `<video>`

From the list above, these are the elements you will likely come across most of the time:

* `input` - This element allows users to enter data in forms.
* `select` - The container for a series of `option` element shown as a drop-down list in forms.
* `button` - also a form element that can be used in place of a `input` type of `submit`.
* `textarea` - a form element that allow users to enter specified amount of characters.
* `video` - As the name implies, this is used for showing video on-page, it requires attributes like `controls`, `preload`, `poster` and `source` as a child element that points to the location of the video.
* `br` - This used to create a line break between a block of text.


##__VOID ELEMENTS__
To quote [the spec](https://www.w3.org/TR/2011/WD-html-markup-20110405/syntax.html):

> A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

Furthermore, void elements don't have closing tags and don't wrap any content because they are the content. There are not many void elements, they are discussed below. 

###__LIST OF VOID ELEMENTS__
* `area`
* `base`
* `br`
* `col`
* `command`
* `embed`
* `hr`
* `img`
* `input`
* `keygen`
* `link`
* `meta`
* `param`
* `source`
* `track`
* `wbr`

Some void elements can be used ion their own, and others require additional information. Examples of elements that can be used on their own:

* `hr` - for separating block of text
* `br` - for creating break lines

In regard to elements that require additional information the `img` tag is an example, it requires at least two attributes:

* `src` - which indicate the location of the file
* `alt` - This text is displayed if the image fails to download after page rendering or the user has image disabled in their browser. The alt text should be a brief description of the image. Screen readers also read this alt text when navigating your web page.

_Edited September 19, 2020: Grammar fix._
SSD vs HDD: Which should I have on my PC?
Tags: os, tutorial, beginners
Published: 2019-10-20 16:22:57

In this article, I will simply compare (HDD VS SSD) according to my personal perspective.

#What are HDD and SSD?
You might be surprised by this thing, but in fact, there are a lot of people who have read this article and who don't really know what HDD or even SSD is.
Important Both are simply hard disks that store data.

###I'll start talking about HDD:
HDD is an abbreviation for Hard Disk Drive, an old technology still used to this day as it first appeared in 1956, i.e., the age of this technology is approximately 64 years. These discs use the tip of the magnetic needle and the moving parts inside it so that you hear the sound of the hard drive when working intensively. The rotational speed of these discs is about 5400 rpm or 7200 and some are up to 15,000 rpm.

###Now I will talk about SSD:
SSD is an acronym for Solid State Drive. SSDs can be considered a large version of the USB flash drive. Everywhere from the SSD microcontroller drives (Controller).

###What's the difference between the two?
In its simplest form, an SSD is flash storage and has no moving parts whatsoever. As a result, they're smaller and take up less space in a PC case, in some instances even mounting directly to the motherboard. SSD storage is much faster than its HDD equivalent.

HDD storage is made up of magnetic tape and has mechanical parts inside. They're larger than SSDs and much slower to read and write.

I will not philosophize much on you I'll give you the advantages and disadvantages that caught my attention

###Advantages and disadvantages:

HDD Advantages :
1-Cheap compared to SSD.
2-Do not bother it by the speed of system boot or open files.
3-You need high storage space
4-Its lifespan is 1.5 million hours.

HDD disadvantages:
1-The magnetic field can completely clear the data.
2-Slower than SSD disks
3-Heat the resulting heat is higher due to moving pieces.
4-Consume more power than SDD with a power consumption rate of 6-7 watts

SDD Advantages:
1-Consume less energy than HDD at a rate (2 - 3) W power consumption, which increases battery life.
2-Read and write speed of HDD.
3-The speed of opening files is 30% faster than HDD.
4-Not affected by the magnetic field

SDD disadvantages:
1-Expensive compared to HDD.

<-- This article is based on experience only, so I wish someone corrected some of the information that was wrong -->
tapping_device - a gem for tacking method calls
Tags: ruby, rails, showdev, contributorswanted
Published: 2019-10-20 15:57:21

[tapping_device](https://github.com/st0012/tapping_device) is a gem built on top of Ruby’s `TracePoint` class that allows you to tap method calls of specified objects. The purpose of this gem is to make debugging Rails applications easier. 

For example, you can use it to see who calls methods on your `Post` records

```ruby
class PostsController < ApplicationController
  include TappingDevice::Trackable

  def show
    @post = Post.find(params[:id])
    tap_on!(@post) do |payload|
      puts "Method: #{payload[:method_name]} line: #{payload[:filepath]}:#{payload[:line_number]}"
    end
  end
end
```

And you can see these in log:

```
Method: name line: /PROJECT_PATH/sample/app/views/posts/show.html.erb:5
Method: user_id line: /PROJECT_PATH/sample/app/views/posts/show.html.erb:10
Method: to_param line: /RUBY_PATH/gems/2.6.0/gems/actionpack-5.2.0/lib/action_dispatch/routing/route_set.rb:236
```

Or you can track all association calls with `tap_assoc!`. This is very useful for tracking potential n+1 query calls, here’s a sample from my work project


```ruby
tap_assoc!(order) do |payload|
  puts "Assoc: #{payload[:method_name]} line: #{payload[:filepath]}:#{payload[:line_number]}"
end
```

```
Assoc: payments line: /RUBY_PATH/gems/2.6.0/gems/jsonapi-resources-0.9.10/lib/jsonapi/resource.rb:124
Assoc: line_items line: /MY_PROJECT/app/models/line_item_container_helpers.rb:44
Assoc: effective_line_items line: /MY_PROJECT/app/models/line_item_container_helpers.rb:110
Assoc: amending_orders line: /MY_PROJECT/app/models/order.rb:385
Assoc: amends_order line: /MY_PROJECT/app/models/order.rb:432
```


Although I've been using similar ways on my work for a while, my use cases might be quite limited. So I'd love to hear any feedback or suggestions on this tool 😄
my entry for the autumn 2019 lisp game jam
Tags: gamedev, lisp, lua, tic80
Published: 2019-10-20 15:42:46

---
title: my entry for the autumn 2019 lisp game jam
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f9c1smmsn4mho1jhdhf8.png
tags: gamedev, lisp, lua, tic80
---

Let me clearly say I am not a lisp programmer but I like to learn. So I made a game for the Autumn 2019 lisp game jam. https://itch.io/jam/autumn-lisp-game-jam-2019

I used Fennel and tic80 for my entry. I have written other games in pico8 and played with tic80 a lot so I felt this would keep me out of needing to write low level things and just concentrate on the lisp part (which I did not know well at all).

The code is open and available here: https://github.com/tonetheman/autumn_lisp_jam_2019

At first it was a struggle to write anything in Fennel/lisp. The fact that Fennel transpiles down to lua was helpful when I was first starting the project. I could write what I thought to be correct code and then look at the lua that Fennel generated and look for problems.

The jam was only 10 days but towards the end of it I can say that I did not need to look up Fennel syntax at all. One of the great things about lisp like languages is how the syntax is orthogonal. See here if that term seems odd: https://en.wikipedia.org/wiki/Orthogonality_(programming)

Tic80 has a straight-forward if not sparse game loop. You have 1 function that is called in a tight loop. If you look at game.fnl I split that out into a more traditional update and draw but that is just function organization.

I also have a SceneManager which I liberally stole that concept directly from Phaser. My main loop is just the SceneManager pushing the update and draw out to a concrete object. That gives you the ability to switch, pause and control scenes. This same construct also lets you separate the code to separate scene files that have nothing to do with each other. You can see examples of this in loadingscene.fnl and gamescene.fnl in the code.

I would say the rest of the code is fairly obvious and gross.

There are still all sorts of bugs. I am sure there is some weirdness with the way I am detecting mouse clicks but I could not nail that down.

All in all the game jam was fun. I learned Fennel lisp and got a game out of it.
 
https://fennel-lang.org/
https://tic.computer/
What do you do to avoid being stuck at not learning something new ?
Tags: discuss, career, learn
Published: 2019-10-20 14:57:36

---
title: What do you do to avoid being stuck at not learning something new ?
published: true
description: I have a job at a decent Software Firm and I do my work quite effectively; I try to learn new things on the go and I do learn a few things here and there but recently I have been evaluating myself and see that I am stuck at learning part or at least unsatisfactory for me. 
tags: discuss,career,help,learn
---
Completed Hacktoberfest 2k19
Tags: hacktoberfest
Published: 2019-10-20 14:25:46

_**Hacktoberfest 2019** has been amazing, my first set of contributions in Open-Source technology._

This event has been really helpful and casts away the fear to collaborate, share and explore.

#### #hacktoberfest #hacktoberfest2019 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/yxltdi6bkgde1n364wxk.jpg)
Function invocation with the apply() and call() methods
Tags: javascript
Published: 2019-10-20 13:46:48

---
title: Function invocation with the apply() and call() methods
published: true
description: 
tags: javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/function-invocation.jpeg
---

## The "this" parameter in the context of Javascript functions

We have seen in previous articles how the `this` parameter is set differently depending on how the function is invoked.

`this` can be set to the `global` or `window` object if the function is invoked as a regular function, it's set to the object that calls the function when the function is invoked as a method, and it's set to the instance of the object created when the function is invoked as a constructor function.
What if we want to set `this` to an arbitrary object?

We can do that by using the `call()` and `apply()` methods of the function.
Since functions are first class objects in Javascript, they also have properties and methods that we can use.
The `call()` and `apply()` methods are two related built in methods that each function object has that we can use to set this.

The `call()` and `apply()` methods take two parameters.
The first parameter is the object that we want to set as `this`.
The second parameter refers to arguments passed to the function on invocation.
The difference between the `call()` and the `apply()` method is in the way they accept the second parameter.

`call()` will take in a list of arguments, while `apply()` will take in an array of arguments.
Below is an example of using `call()` and `apply()`.
We define two different objects, `pugliese` and `focaccia`, and a `bake()` function.
The `bake()` function prints out a list of the arguments passed to it when it's invoked and also prints out `this`.

```
const pugliese = {
  name: 'Pane pugliese',
  description: 'Round and crunchy'
}

const focaccia = {
  name: 'Focaccia',
  description: 'Soft and flat'
}

function bake() {
  console.log(arguments);
  console.log("'this' is:", this);
}

bake.call(pugliese, 'water', 'flour', 'salt');

// prints out:
// [Arguments] { '0': 'water', '1': 'flour', '2': 'salt' }
// 'this' is: { name: 'Pane pugliese', description: 'Round and crunchy' }


bake.apply(focaccia, ['oil', 'water', 'flour', 'salt']);

// prints out:
// [Arguments] { '0': 'oil', '1': 'water', '2': 'flour', '3': 'salt' }
// 'this' is: { name: 'Focaccia', description: 'Soft and flat' }
```

As you can see, this is set to the object we pass to the function.
The `call()` and `apply()` methods are useful when we want to explicitly set the value of `this` at function invocation.
Ecommerce Platform Prototype with Elixir and Phoenix
Tags: livecoding, showdev
Published: 2019-10-20 13:19:47

> CrimsonCommerce is an experimental ecommerce platform build using a functional programming approach and leveraging the power of Erlang/Elixir and the Phoenix framework.

Building the Catalog(Category) context:

{% youtube C1RRUU8ycuA %}

Quick 30 minute stream, where I'm working on the creation of a product and category models, inside the catalog context. 

You can follow progress of the project here: 

{% github amacgregor/crimson_commerce %}