teleren/devto huggingface dataset:
Notes on this from "this and object prototypes"
Tags: javascript, webdev, womenintech
Published: 2020-03-13 16:27:57

`this` provides an elegant way of implicitly 'passing along' an object reference, leading to cleaner API design and easier reuse.

There are two meanings often assumed, but both are wrong:
1. `this` equals the function itself.
2. `this` equals the function's scope.

`this` is actually a binding that is made when a function is invoked. What it references is determined entirely by the call-site where the function is called.


## The four rules of `this`

#### Default Binding
this is the default rule when none of the other rules apply.

```javascript
function ball(){
  console.log(this.a);

}

var a = 3;
ball(); //3
```


#### Implicit Binding
Here, the call-site uses the `obj` context to reference the function.

```javascript
function ball(){
  console.log(this.a);
}

var obj = {
  a: 3,
  ball: ball
};

obj.ball(); //3
```


#### Explicit Binding
ball.call() allows us to force its `this` to be the `obj`.

```javascript
function ball(){
  console.log(this.a);
}

var obj = {
  a: 3,
};

ball.call(obj); //3
```


#### new Binding
By calling `ball()` with `new` in front of it, we have constructed a new object and set that new object as the `this` for the call of `ball()`.

```javascript
function ball(a){
  this.a = a;
}

var bar = new ball(2);
console.log(bar.a); //2
```


### Order of precedence 

1. Called with `new`? Use the newly constructed object.
2. Called with `call` or `apply`? Use the specified object.
3. Called with a context object? Use the context object.
4. Default binding; if 'strict mode' => undefined.

## Arrow Functions

Arrow functions are signified not by the `function` keyword, but by the so-called "fat-arrow" operator =>. Instead of using the four rules, arrow-functions adopt the `this` binding from the enclosing scope.

```javascript
function ball(){
  //return an arrow-function
  return(a) => {
    //'this' here is lexically inherited from 'foo()'
    console.log(this.a);
  };
}

var obj1 = {
  a: 2,
};

var obj2 = {
  a: 4,
};

var baz = ball.call(obj1);
baz.call(obj2); //2, not 4
```

the arrow-function created in `ball()` captures whatever `ball()`s `this` is at its call-time. `ball()` was `this` bound to `obj1`, so `baz` will be `this` bound to `obj1` as well.
Wizar devlog 08 - Ravioli transformation
Tags: typescript, gamedev, sam
Published: 2020-03-13 16:04:21

Achievement of the week so far:

User Stories:
- user can connect Crafter observable to React.
I finished the first version of Crafter React which makes React (really) reactive to Cragter observables changes. It was mainly a copy past of Mobx-React but without the hooks for now.
- user can add Transformation to a Ravioli Component
In the SAM pattern the model is isolated from the view. That makes possibles to write application in "privacy first" because what the world sees about your component is not necessarily the exact copy of the underlying model. Eg. As a player I can't see the contains of other players inventory.
- transformation applies only on certains control state.
To keep a good developer experience, Ravioli provides an API to effectively split your code.
Instead of having one representation which handles multiple cases, we can easily put many representation as needed, depending on the control states (and many others params if needed).
Eg. As a player, I can see the other **dead** players inventory.
Instead of using if/else, let's be more declarative and use two different transformation. One for an alive player, one for a dead player. See the example below.

Technical Stories:
- refactor Crafter to make it compatible on Node.js app. Basically removed a singleton and implements a container pattern to isolate each observers/observables context.

```ts
test('representation predicate', function() {
  const player = component(object({
    name: string(),
    health: number(),
    inventory: array(object({ id: string(), quantity: number() }))
  }))
    // Define which control state my player can be
    .setControlStatePredicate('isAlive', ({model}) => model.health > 0)
    .setControlStatePredicate('isDead', ({model}) => model.health <= 0)

    // Define acceptors
    .addAcceptor('setHealth', model => ({mutator({hp}: {hp: number}): void { model.health += hp }}))

    // Define actions (if you use TS, it will autocomplete magically only with possible mutations <3 )
    .addActions({ hit: () => [{ type: 'setHealth', payload: {hp: -10}}]})

    // How the world will see me?
    .setTransformation('alive', {
      predicate: 'isAlive', // I am alive, no inventory visible.
      computation: ({modelSnapshot}) => ({ name: modelSnapshot.name, health: modelSnapshot.health})
    })
    .setTransformation('dead', {
      predicate: 'isDead', // I died. Be my guest. Loot me.
      computation: ({modelSnapshot}) => ({ name: modelSnapshot.name, inventory: modelSnapshot.inventory })
    })

    // Instantiate a player
    .create({
      name: 'Fraktar',
      health: 10,
      inventory: [
        { id: 'sword', quantity: 1},
        { id: 'shield', quantity: 1},
      ]
    })

  // Player is alive, I can't see its inventory.
  expect(player.state.representation.inventory).toBeUndefined()

  // Take that!
  player.actions.hit()

  // Haha, here is one a lovely sword!
  expect(player.state.representation.inventory).toBeDefined()
})
```
PRESENTING: SLIM CODER
Tags: showdev, personal, slimcoder
Published: 2020-03-13 15:57:38

---
title: PRESENTING: SLIM CODER
published: true
tags: showdev, personal, slimcoder
cover-images: https://res.cloudinary.com/dwl34s9au/image/upload/v1584114814/FB_IMG_1584114572562_p66nwv.jpg
---

As a full time software developer,  I always had a thought of sharing my experiences either good or bad which I have gained during my development phase.
I specifically want to share my perspectives, advices and struggle with my community member so they could dramatized the life of a developer. 
Since, being working for 1 year in open source working environment I had learned alot. Now I want to introduce you all to the 2nd personality of my self namely, 'Slim coder' 
Now you all are wondering about this second personality. So, let me clarify you all; slim coder is a person who love to serve his services for the tech community. He live with the ambition to help others and will remain continue to help here after. You can easily take benefit from the slim coder services though below mentioned platform. 

GitHub: https://github.com/viveksharmaui
YouTube: https://www.youtube.com/channel/UCRfB2PR9Vlf0C1l17qup-Wg
Stack overflow: https://stackoverflow.com/users/story/11727445
Medium: https://medium.com/@vvkofficial
Dev community: https://dev.to/viveksharmaui

If you wish to see your slim coder serving his services and advices for tech community so, don't forget to subscribe the channel; your slim coder is always available for tech community. Also, if you want to share your suggestions/recommendation or want to connect with Vivek; you can follow me on below mentioned. platforms.

Facebook : https://web.facebook.com/vvk.anand.official
Instagram : https://www.instagram.com/i.am.vvk
LinkedIn : https://www.linkedin.com/in/vvkofficial
Twitter : https://twitter.com/i_am_viveksh

You will get to know about the development of Vivek as slim coder and many other things are on the way. So, please subscribe and follow slim coder if you want to gain information through the experiences and advices of slim coder.

Thank You.
Introducing Suitcase PHP: a simple to use SDK Builder
Tags: php, api, sdk
Published: 2020-03-13 15:46:35

---
title: Introducing Suitcase PHP: a simple to use SDK Builder
published: true
description: Need to build an easy to use SDK for your API? We got you covered 💪
tags: PHP, API, SDK
---

Recently I have been working on a package that I've been meaning to build for the last couple of years. I constantly find myself having to work with 3rd party APIs or writing an SDK to provide access to an API I had built. This isn't a huge problem, but there's a lot of repetitive code that goes into this.

This package is still very much in development, but here is a super quick example of using it with a WordPress API

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qc5liq7lpr6yqjf205sg.png)
How to download a CSV file with Slim 4
Published: 2020-03-13 15:32:44

It's a sample code for CSV download with Slim 4.

```php
<?php
declare(strict_types=1);

use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;

class DownloadCsvFIle extends Action
{
    public function __invoke(ServerRequestInterface $request, ResponseInterface $response, $args): ResponseInterface
    {
        $csv_file = '/path-to-the-csv-file/csvfilename.csv';

        $response = $response
            ->withHeader('Content-Type', 'application/octet-stream')
            ->withHeader('Content-Disposition', 'attachment; filename=csvfilename.csv')
            ->withAddedHeader('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
            ->withHeader('Cache-Control', 'post-check=0, pre-check=0')
            ->withHeader('Pragma', 'no-cache')
            ->withBody((new \Slim\Psr7\Stream(fopen($csv_file, 'rb'))));

        return $response;
    }
}
```

keyword: slim, slim4, psr-7, csv, download, file download, stream
A Responsive Card List
Tags: codepen, showdev, css, webdev
Published: 2020-03-13 15:20:12

There's a responsive card pattern I've had to build out in a few projects lately and thought it was worth sharing. After some iterations I think I've found the CSS flexible enough to work for most situations. Feel free to comment if you have some advice or an alternative setup that works as well.

This list that has quite a few features:

### Desktop
- List items scale flexibly to fit a configurable number per row
- Items align correctly according to configurable spacing
- The last item doesn't abnormally stretch to fill the container
- Items within a row have equal height

### Mobile
- It becomes a horizontal scrolling list
- Configurable and equal padding to the left and right, [despite being a scrolling flex container](https://stackoverflow.com/a/38997047)
- There is configurable spacing between items
- The first item is centered on the screen, properly accounting for both internal and external configurable spacing
- All items have equal height
- An item peeks from the right, hinting there are more to see

Here is a Codepen to demonstrate. You can hover over the list to show the spacing. Try view it at different widths and the list should change between mobile scrolling and a desktop grid.

{% codepen https://codepen.io/bendman/pen/zYGWExZ default-tab=result %}

Here is the CSS (SASS actually, but it's easy enough to convert):

```scss
ul {
  /* Spacing between list items and the container */
  --outer-spacing: 48px;
  /* Spacing between list items and each other */
  --item-spacing: 16px;
  /* Items per row in desktop */
  --items-per-row: 3;
  
  box-sizing: border-box;
  list-style: none;
  padding: calc(var(--outer-spacing) - var(--item-spacing) / 2);
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 0 auto;
  justify-content: stretch;
  
  /* On mobile this becomes a horizontal scrolling list */
  @media (max-width: 600px) {
    margin: 0;
    padding: var(--outer-spacing);
    overflow-x: auto;
    flex-wrap: nowrap;
    align-items: stretch;
    
    /* Add a space after the last item 
       https://stackoverflow.com/a/38997047 */
    &:after {
      display: block;
      content: ' ';
      flex: 0 0 var(--outer-spacing);
    }
  }
}

li {
  box-sizing: inherit;
  display: inline-block; /* or inline-flex */
  flex: 0 0 calc(100% / var(--items-per-row) - var(--item-spacing));
  margin: calc(var(--item-spacing) / 2);
  
  @media (max-width: 600px) {
    flex: 0 0 100%;
    margin: 0;
    
    /* Item spacing */
    & + & {
      margin: 0 0 0 var(--item-spacing);
    }
  }
}
```

_Cover Photo by Aditya Chinchure on Unsplash_
Daily Challenge #204 - Partial Keys
Tags: challenge
Published: 2020-03-13 15:02:00

---
title: Daily Challenge #204 - Partial Keys
published: true
series: Daily Challenge
description: Implement a function to search for keys from just the first few characters.
tags: challenge
---
Implement a function that takes an object as an argument, and returns a very similar object but with a special property. The returned object should allow a user to access values by providing only the beginning of the key for the value they want. For example if the given object has a key `idNumber`, you should be able to access its value on the returned object by using a key `idNum` or even simply `id`. `Num` and `Number` shouldn't work because we are only looking for matches at the beginning of a key.

Be aware that you could simply add all these partial keys one by one to the object. However, for the sake of avoiding clutter, we don't want to have a JSON with a bunch of nonsensical keys.

Also, if a key is tested that appears as the beginning of more than one key in the original object (e.g. if the original object had a key `idNumber` and `idString` and we wanted to test the key id) then return the value corresponding with whichever key comes first alphabetically. (In this case it would be `idNumbers` value because it comes first alphabetically.)

###Example
<pre>
let o = partialKeys({ abcd: 1 })

o.abcd === 1 // true
o.abc === 1 // true
o.ab === 1 // true
o.a === 1 // true

o.b === 1 // false!

Object.keys(o) // ['abcd'] </pre>

###Tests
partialKeys({
    aaa: 1,
    abc: 2,
    dfg: 3,
    def: 4,
    dfgh: 5
  })

Good luck!

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

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-03-13 15:01:51

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![pokemon-relaxing](https://media.giphy.com/media/iIbgY9P1m0woM/giphy.gif)

Happy Friday!
day 4/100 => 100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-03-13 14:58:10

Goal: Complete flutter-dart-to-build-ios-android-apps from Udemy

Today's Progress: masih Belajar tentang adaptive dan responsive layout, menggunakan layout builder, didalam nya bisa menggunakan contrains ( mempunyai property maxheigh n min height)


https://twitter.com/triyono__
https://github.com/triyono777/100-days-of-code/blob/master/log.md
📌📌ATENCIÓN: OFERTA LABORAL📌📌
Tags: hiring, argentina, trabajo, womenintech
Published: 2020-03-13 14:48:49

En [Eudaimonia](https://www.eudaimonia.com.ar/) nos encontramos en la búsqueda de los siguientes perfiles:

-iOS Dev 
-Android Dev 
-Fullstack Dev 

📌¿Qué ofrecemos?

✅Flex Time ⏱
✅Home Office🏡
✅Almuerzo los Viernes 🍝
✅Capacitaciones

¿Remuneración? La que nos digas en base a tu experiencia y conocimiento.

📍Palermo, Capital Federal, Buenos Aires, Argentina. 

Si estas interesado/a y cumplís con los requisitos, enviá tu CV indicando puesto, remuneración pretendida y seniority a micaelaj@eudaimonia.com.ar

Más información en [https://www.eudaimonia.com.ar](https://www.eudaimonia.com.ar/)
Jupyter notebook to check software for CVE vulnerabilities
Tags: python, security
Published: 2020-03-13 14:24:09

I [created a Jupyter Notebook with Python code](https://github.com/agtoever/Software-CVE-checker) to check a list or a file of software items against the NIST CVE database. You can [run it directly in binder](https://mybinder.org/v2/gh/agtoever/Software-CVE-checker/master?filepath=SearchSoftwareForCVE.ipynb).
What i feel i learnt too late in life
Published: 2020-03-13 13:27:53

Whatever you do – give it 100% of your efforts.

Forgive and let go , forget completely.

Read too much.

Speak less , listen more.

Save a portion of your earnings and avoid credit card debt.

Change your thinking and mindset , change your life.

Never ever stop learning and growing as a person.

Never stuck on a point, try new things , have new experiences.

Find a mentor and do what they're doing.

Be kind to people; treat people as you would like to treat you.

Be persistent. When knowledge and ability aren’t enough, be persistent.

“Life is scary. Get used to it. There are no magical fixes. It’s all up to you. So get up off your keister, get out of here, and go start doin’ the work. 

Nothing in this world that’s worth having comes easy.” Bob Kelso

Smart girls like to hear they’re pretty, pretty girls like to hear that they’re smart.

Happiness is a choice and everything else is a matter of perspective.

Never forget your car keys will change your car from one tone of inert metal into one of the most deadly killing machines that has been invented.

Wait 24 hours before getting mad and reacting about anything. 

If it doesn’t bother you in 24 hours time, it probably isn’t important enough to get mad over.

Have the courage to live a life true to yourself, not the life others expect of you.

Never attribute to malice that which can be adequately explained by stupidity.

“There is nothing noble in being superior to your fellow man; true nobility is being superior to your former self.” Ernest Hemingway.

Remember you’ll always regret what you didn’t do rather than what you did.

“You’d worry less about what people think about you if you knew how seldom they do.” David Foster Wallace

If you blame it on someone else, don’t expect it to get better.

“You can be the ripest, juiciest peach in the world, but there will always be someone who hates peaches.” Dita von Teese

Don’t make decisions when you’re angry. Don’t make promises when you’re happy.
“Never argue with a stupid person, they’ll drag you down to their level and beat you with experience.” Mark twain

Only pack what you can carry yourself.

“Remember only enemies speak the truth. Friends and lovers lie endlessly, caught in the web of duty.” Stephen King

Time is the most valuable thing you have.

Remember the human touch.

Be very careful how you spend the first and last two hours of each day.

Think big; don’t be afraid to be bold.

Invest in authentic relationships.
How to load a Docker image from a tar file
Tags: devops, docker
Published: 2020-03-13 14:17:01

To use a [docker](https://intellipaat.com/blog/tutorial/devops-tutorial/docker-tutorial/) tar image You can make use of Docker load

You can load your image through STDIN or a tar archive like so:

Git bash console:

"$ docker load < HDP_2.5_docker.tar"

Windows cmd:

"$ docker load -i windowsservercore.tar"

Want to know how to make full use of docker? try out docker training course online.
Embedding a Google Drive image in HTML
Tags: html, beginners, codenewbie
Published: 2020-03-13 14:08:39

######TL:DR- Convert the link generated by Google drive from https://drive.google.com/file/d/[image_id]/view?usp=sharing to https://drive.google.com/uc?export=view&id=[image_id] for use in your image tag######


Google drive makes it easy to host images online and share it anywhere. If you intend to add an image from your google drive account to you HTML code, it is pretty easy! In this write-up, I will show you a very quick way to go about it with 3 easy straight-forward steps.

###**Upload image to your google drive**###
First, go to your [drive account] (drive.google.com/drive/my-drive) (obviously, lol). Then you click on the *New* button and then add the image file (or folder) you wish to save on you Google drive, and tadaa! the image is now on your drive.

###**Get the shareable link**###
Right click on the image in your google drive and then select *share*. This will then lead to a modal display, then you select *Get sharable link*. Copy this link to clipboard.

###**Embed link in your code**###
A typical link is of this format https://drive.google.com/file/d/[image_id]/view?usp=sharing. Adding this to your img tag will not display the image. So what is the essence, yeah?
The link can be tweaked to https://drive.google.com/uc?export=view&id=[image_id]. This new link can be used on your image tags and image displayed as desired. 

I hope you find this useful.
Cheers!
Have you considered Site Reliability Engineering as a path?
Tags: codenewbie, beginners, career, sre
Published: 2020-03-13 14:06:34

I wanted to point to this podcast appearance by my colleague @molly_struve, DEV's Lead SRE.

{% podcast codenewbie/s11-e7-why-site-reliability-is-so-important-molly-struve %}

It's not always clear when and how to make a career leap, and I feel like this episode covers that in spades and gives a lot of insight into what qualities might make site reliability engineering right for you.

Happy coding!
A Second Interview!
Tags: firstpost, interview, nervous, group
Published: 2020-03-13 13:52:41

I got a second interview with a company I applied to and would really like to work for. This interview is very different from what I've ever done. I was told it was going to be a group interview, but its actually a series of 30 min interviews with the executive level employees, including the CEO. I'm planning on trying to do a bit of research on each person, but I'm pretty nervous about this one. 

I'm trying to remind myself that the worse they can say is no in the end, but this is also part of my career change. So even though not a lot is riding on it, I feel like like A LOT is riding on this opportunity.

This is my first post. Thank you for killing your time to read it!
Where are you coding from?
Tags: discuss
Published: 2020-03-13 13:23:17

Hey there DEV.to community!

I thought it would be a good discussion if we shared where we are all from and maybe also one or two photos of the city you are coding from.

To begin, I'm from Tabriz a city in northwest Iran.

![El Goli](https://dev-to-uploads.s3.amazonaws.com/i/c2i2wbmql5htpe5ghvgb.jpg)

Here is called El Goli it is a famous and historical site of Tabriz.

![Bazaar of Tabriz](https://dev-to-uploads.s3.amazonaws.com/i/qnrbt7ellgfjg8xhcq9v.jpg)

And this is the bazaar of Tabriz, world's biggest covered market!
Cryptography - to the point
Tags: security, beginners, aws
Published: 2020-03-13 13:13:16

Of course! Cryptography is a very technical subject; **it's difficult to understand the "how"**

But there ubiquitous presence warrants to **understand the "why & when"**

Surprisingly, these questions aren't difficult to understand, so let's run through them quickly.

## Some terms
- Encryption and signing make use of keys
- Private keys: are keys that are treated as secret and are usually used by a single entity
- Public keys: are keys that are shared and available for anyone to use
- Symmetric keys: where encryption and decryption is done using the same key
- Asymmetric keys: where encryption and decryption is done using the separate keys belonging to a key-pair
- Hashing makes use of a hashing function
- Encoding (which is not cryptography) is merely changing how the data is represented e.g. ASCII, UTF-8, base64, base62, HEX etc.

## Encryption, Signature & Hash

### Encryption
```
Encrypt some data called X:
[X] --(public key)--> [Y]

Decrypt Y to obtain the data:
[Y] --(private key)--> [X]
```
To contunue reading, click https://mannharleen.github.io/2020-03-13-cryptography/