teleren/devto huggingface dataset:
Starving with a Full Stomach
Tags: impact, webdev, productivity, tech
Published: 2020-04-07 16:02:20

The story is told of a herd of deer who became trapped one winter in a steep ravine. With much of the winter left to go and no real supply of food, they were doomed to die. They only needed to survive until the deep snows melted, and then they would be able to easily escape their predicament. When some local residents discovered the plight of the herd, they banded together as a town and began throwing hay down to the trapped animals. They delivered a significant amount of food to the deer. But several weeks later were troubled to discover that all of the animals were dead.

When they investigated, the hay had indeed been eaten, yet the deer all died of obvious starvation. What nobody realized, especially the deer, was that alfalfa - grass hay - won't nourish deer. They ate it all the same, it seemed like food to them. But they all starved to death with full stomachs.

![image](https://cdn-images-1.medium.com/max/800/0*EJEzw3u-Jt0zH7hf?)

Photos by [Derek Howard](https://is-tracking-link-api-prod.appspot.com/api/v1/click/5583552493649920/~Tokens.Link~)

As humans, our need for nourishment exceeds just food. We also require emotional and intellectual nurturing. But like deer we can too easily confuse true sustenance with empty filler.

In order to nurture our minds and our souls, we must take care to not only find the proper "food", but also avoid too much of that which will do us damage. Like a stomach with limited space, if we consume too much meaningless and damaging "content", we reduce our ability to consume that which we need.

How can we find the fillers in our own life?

Here are some criteria you can use to identify what may be taking space, but providing no nourishment.

First, is it quick and easy to obtain? Second, does it give the appearance of providing something important, like meaning or connection? Third, can it easily consume a lot of your time and energy? And finally, after you consume it does it leave you feeling "empty"?

Some obvious examples would be things like social media, pornography, gaming or other hobbies, drugs and alcohol, etc. Any of these can meet the above criteria for things that "fill us up", but leave us starving, like hay to a deer.

So what is your hay? What do you fill your time and head with that is slowly starving you?

Happy Coding!

Enjoy this discussion? Sign up for our newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=fullstomach&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=fullstomach&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
npm local packages - one big fuckup?
Tags: npm, node, javascript
Published: 2020-04-07 15:41:01

---
title: npm local packages - one big fuckup?
published: true
description: The more I work with node, npm or JavaScript, the more frustrated i get
tags: npm, node, JS, JavaScript
---

Using local packages with PHP/Composer is very simple: you just add a local folder to `repositories` in your projects `package.json` file and thats it. Composer then checks your local repo before it lookups packagist. Any local package behaves like an actual package from the server. Meaning composer is linking it and if you change the version inside package.json it understands there is an update. All dependencies go where they always go - into the vendor folder.

With npm local packages are just hell. You can add a lot of cool stuff to your projects `package.json` like http links to package archives, or even git repo urls. All of those behave the same. Packages are downloaded into your projects `node_modules` folder, all dependencies are there, node finds them easily.

Just with local packages its getting weird: When you add a local package to your `package.json`, you do that by giving a local file system path (instead a version number). Then, when you do `npm install`, it suddenly installs all dependencies of you local package into a new created `node_modules` folder inside that package, not inside your project. With a npm package, a http or a git url it would never do that, simply because it does not have write access on that remote source. In a local package it just goes haywire. When you put several local packages in your `package.json` you end up with a separate node_modules folder in every single one of them. Insane.

Then there is npm link. No idea who came up with that. Its the same misbehavior, just on a global scale. I find tons of questions about this, but no real solution. How can an ecosystem like npm become that big like that?

I think node and JavaScript are very important for the internets future since server and browser side development grow closer every second. There are just so many frustrating flaws.
Ε3: 7 Practical & Effective Methods To Improve At Visual/UI Design
Tags: ux, ui, designer, design
Published: 2020-04-07 15:59:33

💪In this video, we will talk about⬇️
1. How to find a mentor
2. The importance of a design portfolio
3. How to overcome perfectionism
4. How to fight the imposter syndrome
5. How to improve your empathy skills

Previous episodes:
- [Are You New to UX? Here Are The Best 5 Tips (And How To Actually Make Them Work)](https://dev.to/eleftheriabatsou/e2-are-you-new-to-ux-here-are-the-best-5-tips-and-how-to-actually-make-them-work-4id4)
- [Should Designers Learn To Code & Why It's Not A Good Question] (https://dev.to/eleftheriabatsou/e1-should-designers-learn-to-code-why-it-s-not-a-good-question-860)

👋Hello, I' m Eleftheria, an app developer, master student, freelancer, public speaker, and chocolate lover.

This is a new series on my channel and I'm going to be talking about UX and UI.
This is the 3rd episode out of 8.
If you have any feedback, please do share it with me. Thank you.



😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩Would you care about buying me a coffee? You can do it here: [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou) but If you can't that's ok too!


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)
Looking for developers
Tags: hires, developers, team
Published: 2020-04-07 15:45:56

---
title: Looking for developers
published: true
description: I am now looking for developers to join my team
tags: hires, developers, team
---
Hi, how are you doing? I am a web developer with +10 years experience.

I am leading a team of 5 developers and have enough work for us.

I am looking to grow my team this year, so anyone who wants to join is welcome.

And if you have projects to work with us, that would be great.

Thanks,
Van
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-07 15:39:27

day 29/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learning multiprovider, make cart_screen, widget spacer, implementation consrtuctor, routename with static const,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
PKI Certificates
Tags: security, ssl
Published: 2020-04-07 15:36:01

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

It is importan for web developers to understand the concept of PKI such as private/public key, certificate and CA. Let us see the concepts briefly.

We are using SSL certificates subconsciously everyday. Our web browsers have pre-built root certificates which are the roots of trust.
When we visit a web page, the web server encrypts some messages and return back to the web browser. The browser realizes that the server certificate is signed by a certificat authority who is one of the pre-built authorities in the browser and then trusts the server finally.

# Self-signed Certificates
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0ncwv62lbbeo7w592xdq.png)

In most cases, we use certificates from public CAs for https purpose. But if connections happend only in closed networks, it is efficient and convinient to use self-signed certificate as trusted root certificates.

A private root CA key and self-signed root certificate is created in a secure and closed machine. I used a hardware appliance called HSM to generate or import private root CA private key and certificate. But in small testing scenarios, it is ok just like in a common linux machine.

Plus we can make intermediate CAs if we want trust hierarchy. I made three tier of certificates comprising a single root, several intermediate, and  device certificate per device.

A server creates an CSR filled with information like CN and expiration date, then sends it to an intermediate or root CA server. The CA server signs it with its pair of private key and certificate and generates the server certificate that consists of issues, subject, revocation endpoint and public key of the server.

Next time, I would like to talk about 2-way SSL which makes securer than the above 1-way SSL.
Authentication with swagger-client in the Browser
Tags: openapi, swagger, javascript, frontend
Published: 2020-04-07 15:32:20

Use of the [OpenAPI specification](https://www.openapis.org/) has been growing.  My place of work is very interested in leveraging it as much as possible - in both the backend and the frontend.  Being on the frontend team, I was tasked with creating an API call using an OpenAPI spec, and [swagger-client](https://github.com/swagger-api/swagger-js) - a JavaScript client for using the OpenAPI spec.  In this post, I want to share with you what I learned about authentication and swagger-client.  It is a fairly simple process, but is not laid out clearly in the documentation for swagger-client.  The code below is based on the example I found in the [migration documentation](https://github.com/swagger-api/swagger-js/blob/master/docs/MIGRATION_2_X.md).

This implementation is through the browser and called for an independent module.  Following the instruction in the README, I pulled the CDN into the application through our index.html:

```
<script src='//unpkg.com/swagger-client' type='text/javascript'></script>
```

This made the `SwaggerClient` class globally available in the application.

In the module, I started by creating a function that creates a new client, specific to the spec I want to use.

```
// function takes the spec url I want to use and the authentication code needed.
async function createClient(specUrl, auth) {
  const client =  await new SwaggerClient(
    specUrl,
    {
      authorizations: {
        // This key will be defined by the OpenApi spec
        APIKeyQueryParam: auth,
      }
    }
  )
  .catch(err => console.error('client error: ', err));

  return client;
}
```

I then created the function to make the API call.  

```
export default async function apiCall(specUrl, auth) {
  const client = await createClient(specUrl, auth);

  const data = await client.apis['Search Parameter'].titleSearch({ s: 'potter' })
    .catch(err => console.error('data fetch error: ', err));

  const result = data.body.Search;

  return result;
}
```

Setting up my functions this way allows a neat decoupling of the creation of the client and the consumption of the client.  It will also allow me to later refactor both functions to more generic uses as our code base matures.

I hope this helps anyone else trying to do a browser implementation of the swagger-client.
SSL/HTTPS-ify for Heroku
Tags: security, heroku, webdev, fastify
Published: 2020-04-07 15:23:43

Heroku already have HTTPS by default. You don't have to buy your own SSL certicate.

But you do have to embed some server-side code to redirect to SSL -- https://help.heroku.com/J2R1S4T8/can-heroku-force-an-application-to-use-ssl-tls

For unsupported platforms, like Node.js-Fastify, you might have to write your own.

The guides are

> # Reverse Proxies (Heroku, nodejitsu and others)
>
> Heroku, nodejitsu and other hosters often use reverse proxies which offer SSL endpoints but then forward unencrypted HTTP traffic to the website. This makes it difficult to detect if the original request was indeed via HTTPS. Luckily, most reverse proxies set the x-forwarded-proto header flag with the original request scheme. express-sslify is ready for such scenarios, but you have to specifically request the evaluation of this flag:
>
> app.use(enforce.HTTPS({ trustProtoHeader: true }))
>
> Please do not set this flag if you are not behind a proxy that is setting this flag. HTTP headers can be easily spoofed outside of environments that are actively setting/removing the header.

Or

```python
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
SECURE_SSL_REDIRECT = True
```

So, the Fastify code becomes:- (I modified the code from [express-sslify](https://github.com/florianheinemann/express-sslify/blob/master/index.js#L49))

```js
    const app = fastify()

    app.addHook('preHandler', async (req, reply) => {
      const isHttps = ((req.headers['x-forwarded-proto'] || '').substring(0, 5) === 'https')
      if (isHttps) {
        return
      }

      const { method, url } = req.req

      if (method && ['GET', 'HEAD'].includes(method)) {
        const host = req.headers.host || req.hostname
        reply.redirect(301, `https://${host}${url}`)
      }
    })
```

My homepage is currently on Netlify, though; and it don't have to purchase SSL certificate either.

For DigitalOcean, you might use [Let's Encrypt](https://letsencrypt.org/).

I believe that the reason to use SSL/TLS, is that HTTP can be intercepted. Not sure how safe it is in `localhost`. (Of course it is unsafe in `0.0.0.0`)
💻🚀 Tech bites: What is serverless?
Tags: serverless, beginners, learning, codenewbie
Published: 2020-04-07 15:16:34

---
title: 💻🚀 Tech bites: What is serverless?
published: true
description: Have you ever wondered what is serverless computing? Well, wait no more as this infographic gives you a nice introduction to it.
tags: serverless, beginners, learning, codenewbie
series: Tech bites
---

**Serverless computing** has gained a lot of traction recently. But, are you still trying to wrap your head around how this works?
Wonder no more, I created this infographic as a gentle 101 (introductory) resource to serverless computing.

![serverless 101](https://res.cloudinary.com/nezahualcoyotl/image/upload/v1586274415/101_serverless_v3fcb0.png)

You can find the pdf version [here](https://github.com/trallard/tech-bites/blob/master/EN/serverless/101_serverless.pdf) which is released under CC-BY.


✨ This post is part of a series of visuals I will be working on over the next few months so I will be adding al the visuals to this GitHub repository {% github trallard/tech-bites %}
Samsung S20: Opt feluri in care ridica stacheta pentru alte telefoane
Tags: samsung, s20, smartphone
Published: 2020-04-07 15:09:30


Noile telefoane Samsung S20, Plus și Ultra vin cu ce e mai bun pe piață în materie de 5G, zoom foto, înregistrare video 8K, ecrane 120Hz și multe altele.
Samsung Galaxy S20 vine în trei tipuri diferite de telefoane. Există Samsung S20 de 6,2 inci, Samsung S20 Plus de 6,7 inci și imensul smartphone de la emag: https://www.emag.ro/search/galaxy+s20 >> Samsung S20 Ultra de 6,9 inci. 

Telefoanele flagship Samsung de anul trecut au fost Galaxy S10 și S10 Plus, precedate de S9 și S9 Plus în 2018. Modelele 2020 sunt S20, S20 Plus și S20 Ultra. Deci, de ce Samsung a sărit de la S10 la S20 în branding-ul său și de ce există trei modele în acest an?

20 din S20 se referă la 2020 - Samsung a decis să schimbe numerele de la cele privind versiunea la ani. Toți producătorii de telefoane procedează cum doresc în ceea ce privește numerele pe care le folosesc pentru a-și numi produsele, dar această mișcare face ca Samsung să fie unul dintre primii care să lege numele produsului de anul în care a fost lansat, ceea ce are un efect practic. De asemenea, numărul este mai mare decât numărul produselor rivalilor săi, iar creierele oamenilor tind în mod natural să creadă că numerele mai mari sunt mai bune.

În ceea ce privește faptul că linia Samsung S20 vine cu trei dispozitive în acest an, din punct de vedere tehnic înseamnă că există cu un model mai puțin decât în 2019, când Samsung avea S10 și S10 Plus, alături de S10E mai mic (un telefon de buget) și S10 5G puțin mai mare. În acest an, Samsung a integrat 5G pe întreaga linie de produse, astfel încât nu are nevoie de un model 5G separat. 

Totodată, Samsung a urmat exemplul Apple și a oferit celui mai ieftin dispozitiv din gamă brandul standard. Așadar, cum a fost iPhone 11 pentru Apple toamna trecută, așa va fi și Samsung S20 pentru Samsung în acest an.

Va fi interesant de văzut dacă Samsung S20 va deveni cel mai popular model din gama Samsung, în felul în care iPhone 11 a devenit favoritul printre cumpărătorii Apple. Este totuși de așteptat ca modelul de mijloc, Samsung S20 Plus, să fie cel cumpărat de cei mai mulți. 

Totuși, noile telefoane Samsung S20 fac mai mult decât atât și anume că pun la încercare o competiție uriașă: iPhone-ul Apple, Pixel-ul Google și dispozitivele Huawei de ultimă generație, unele din telefoanele pe care le vor cumpăra mulți oameni în 2020. 

Cu toate acestea, cel mai înalt model al noului Samsung S20 vine cu opt lucruri care au ridicat ștacheta pentru telefoanele emblematice:

1. Introduce o cameră zoom 100x.
2. Realizează fotografii de 108 megapixeli.
3. Integrează două forme de 5G: Sub 6 (standard) și undă milimetrică (super rapid).
4. Vine cu un ecran AMOLED de 120Hz pentru un joc video și mai bun.
5. Oferă înregistrare video 8K.
6. Crește capacitatea bateriei la 5.000 mAh.
7. Include un încărcător rapid de 25 de watt în cutie (și acceptă un încărcător nou de 45 de watt).
8. Vine cu modul „Single take” pentru a capta 10 fotografii și patru videoclipuri prin apăsarea unui singur buton.
CSS: Box Model
Tags: beginners, tutorial, css, webdev
Published: 2020-04-07 15:08:23

Now that we know how to use styles and select which elements we want the styles to be applied to, another important topic about CSS is the box model.

# Box Model?

Yes, box model. The easiest way to imagine it is that every single element is inside of a box with multiple layers. These layers are margin, border, padding and content.

![Box Model Diagram](https://dev-to-uploads.s3.amazonaws.com/i/syde15veggnbdnsrr4cw.png)

Let's talk about each of the parts of an element:
- **Content**: The content box is where you'll see your content. This is what gets affected when you set an element's `width` and `height`.
- **Padding**: The padding box is essentially an extension of the content box but the content itself leak onto the padding box. The thickness of the padding is added to the `width` and `height` of the content.
- **Border**: The border box wraps around the padding and content. 
- **Margin**: The margin is a box encompassing all the boxes. This determines the amount of white space available between elements.

## I'm still confused...

An alternative way to visualize the box model is to think of it like a property.

- **Content**: The house.
- **Padding**: The front/back yard and the narrow path between the house and the fence.
- **Border**: The fence surrounding the property.
- **Margin**: Possibly an alley, the sidewalk, or the road separating the house from the other properties.

# The alternative box model?

We mentioned before that the padding adds to the width and height of the content. But what if you want to set the height and width of the element while taking padding and border width into account?

## `box-sizing`

`box-sizing` is a CSS property that determines box model is handled for an element.

### `content-box`

This is the default implementation.

### `border-box`

Incorporates both the padding and border into the given width and height of the element.

{% jsfiddle https://jsfiddle.net/koralarts/anc2mjk9/3/ result,css,html %}

**ASIDE**: `padding-box` previously existed but wasn't widely adopted and is now obsolete. [More info about `padding-box` usability.](https://caniuse.com/#search=padding-box)

# What now?

So what should I use? Should I use `content-box` or `border-box`? I don't have an answer for you but I prefer using `border-box`. I prefer `border-box` because it removes the uncertainties when sizing. It makes sure that if you set your element to have certain dimensions, it'll stay as such.

---

Now that we know the box model, we'll talk about specificity and cascade in the next post.
Building an i18n translator using React
Tags: react, javascript, internationalization, i18n
Published: 2020-04-07 15:04:01

It's so obvious that websites need to be internationalized. But creating multiple versions of the same website is not the best solution to it. Using React we can completely globalize our application. I'm going to show you how it can be done.

###This application includes:

####Translate Engine
It does nothing but gets a word and returns the translated word based on the language selected. You need to pass the `selected language` and a word to this component. The children for the `Translate` component should only be a `string`. I have used Redux below, but you can use local state or Context API to set the language.

```javascript
import React, { PureComponent } from "react"
import { connect } from "react-redux"

// The function which returns you translated words based on a language.
import Dictionary from "./dictionary"

class Translate extends PureComponent {

    translateWord(word) {
        try {
            const { lang } = this.props
            // lang = "es"
            const languageDb = Dictionary(lang)

            if (word in languageDb.words) {
                return languageDb.words[word]
            }

            return word

        } catch (err) {
            console.error('Error while translating::translateWord', err)

            // If something goes wrong return the word as it is.
            return word
        }
    }

    render() {
        let { children, lang } = this.props

        if (typeof children === "string" && lang !== "en") {
           // pass the lowerCased word to get in the translated form.
           return this.translateWord(children.toLowerCase())
        }

        return <>{children}</>
    }
}

const mapStateToProps = (state) => {
    return {
        lang: state.lang,
    }
}

export default connect(mapStateToProps, null)(Translate)

```

####Dictionary
This can be an `object/function` that returns a list of all the available translated words based on a language. You'll have to feed a JSON object (as shown below) that lists all the translated words.

```javascript

import es from "./es.json"
import ru from "./ru.json"
import de from "./de.json"

const languages = {
    es,
    ru,
    de,    
}

export default function(lang) {

    return languages[lang]
}


```

This is how my spanish DB (`es.json`) looks like:
```JSON
{
   "lang":"es",
   "words" : {
      "search"        : "registrar",
      "conversation"  : "conversación"
   }
}

```
You can use the translate component as shown below, But remember its children can only be a `string`.

```javascript
 <Translate>Hello</Translate>
```
I have created a simple sandbox for you to understand better practically. I have also created a hooks version below as suggested in comments.
{% codesandbox reacttranslate-jz9n2 %}

The hooks version:
{% codesandbox reacttranslate-in-hooks-3v5c1 %}

This is my first post/blog I have ever written and published. I thought of giving it a try during the pandemic lockdown. Let me know for suggestions on how to improve the content.

Happy coding!
Stay Inside and Stay Safe