teleren/devto huggingface dataset:
I "Hacked" YouTube's Homepage with a Chrome Extension - Video
Tags: javascript, extension, youtube, video
Published: 2020-02-07 14:44:26

---
title: I "Hacked" YouTube's Homepage with a Chrome Extension - Video
published: true
description: In this tutorial we're going to learn how to create a Chrome Extension to "hack" YouTube's Homepage
tags: javascript, extension, youtube, video
---

I was too lazy to write a blog post, so I made a video. 😆

Let me know if you still prefer a blog post and I'll convert it.

Meanwhile... Here's the video:

{% youtube yBDGve-Cc0I %}
SOLVING THE SCALING PROBLEM with GraphQL + serverless APIs
Tags: graphql, serverless, techtalks, webdev
Published: 2020-02-07 14:36:34

> This video is a talk from *Byteconf GraphQL 2020*, a free, live-streamed GraphQL conference that aired on January 31st, 2020. [Visit our website](https://www.bytesized.xyz/graphql-2020) to sign up for the Byteconf GraphQL "swag bag", a free downloadable resource with everything you need to get started with GraphQL, as well as info about future Byteconf events!

Accessing and working with data is not easy with serverless, because traditional methods of database access don't work well. In this talk, I will discuss the key problems around working with databases when building serverless application logic and approaches to solving them. I will motivate problems like connection pooling, cold-starts, handling spiky concurrent loads, database transactions and transient failures. I will then present GraphQL as a possible solution for building a high-performance data API that can scale to serverless workloads. I will talk about the pros & cons of this approach. Finally, I will do some live code demos and make the problems and solutions discussed previously more concrete!

Thanks to [Tanmai Gopal](https://twitter.com/tanmaigo), who presented this talk at [Byteconf GraphQL 2020](https://www.bytesized.xyz/graphql-2020)!

{% youtube lgABF5rpa24 %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
Ellipsis on flexbox items
Tags: webdev, css, tutorial, html
Published: 2020-02-07 12:15:01

In this article I will explain how to add ellipsis on flexbox child elements.  
I had this problem a while ago and I've found a solution surfing the web, I've prepared also some codepen to show examples and let you understand better.
Jump to the last codepen if you are in eagerto see the solution


### What do we want

Let's see immediately what we want to achieve.  
Ideally we want to create a flexbox row with one (or more) "fixed" element on the left and a long element on the right and if the flexbox container shrinks (due to a user resizing the window for example) I want the long child on the right to be truncated with ellipsis.
(The fact that the child elements are on the left or right doesn't really matter, what I will explain works also if you want to truncate the child on the left and set the one on the right as fixed)

Let's try this out

{% codepen https://codepen.io/albertodeago/pen/rNVNZGN %}


"Well... That was pretty easy... what is the problem you are talking about?"
I can hear you saying this, so I will immediately show a very similar example and we'll see if you catch what's the difference

{% codepen https://codepen.io/albertodeago/pen/eYNYLPN %}

Did you catch the difference?
The change is that in this example the flex children has some elements inside (a **p** element), so it's actually a more common case rather than having simple text.

Below there is the codepen with the solution, after the example I will explain what the solution is and why it works like that (because at first glance it looks like magic).

{% codepen https://codepen.io/albertodeago/pen/GRJRXLB %}

Again, did you spot the differences? (spoiler, there are two)

1) The css ellipsis properties  are now applied to the **p** inside the flex child
2) min-width: 0 is applied to both the flex children (and this is what looked magical, at least to me)

If you are asking yourself "What? Why is a min-width: 0 solving this problem?" you are like me so I dived deep into this and I've found the reason behind this.

The solution can be found [in this spec](https://drafts.csswg.org/css-flexbox/#min-size-auto).
I suggest you to read it, but to be synthetic the min-width by default is auto, and with that value Flexbox set the min-width as the minimum content size, thus when the container is not going to *shrink* that child more than that width. Infact the solution is setting a min-width, can be also different than 0, try experimenting in my codepen above.

I tested this in Chrome, Firefox, Edge and Opera. I don't have a safari to test it out but I'm pretty sure it will work, let me know if you can try that out too.
Daily Challenge #183 - Automorphic Numbers
Tags: challenge
Published: 2020-02-07 14:30:10

---
title: Daily Challenge #183 - Automorphic Numbers
published: true
series: Daily Challenge
description: Find numbers that are at the ends of their squares. 
tags: challenge
---
###Setup
For this challenge, implement a function that will return `true` if a number is Automorphic. Automorphics are numbers whose square ends in the same digits as the number itself. The number will always be positive.

###Examples

`autoMorphic(13)` => `false`
13 squared is 69. Since 69 does not end in 13, return `false`. 

`autoMorphic(25)` => `true`
25 squared is 625. Since 625 ends in 25, return `true`.  

###Tests

`autoMorphic(6)`

`autoMorphic(625)`

`autoMorphic(225)`

Good luck!~
***
_This [challenge](https://www.codewars.com/kata/5a58d889880385c2f40000aa) comes from MrZizoScream 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!_
Kubectl Basic Commands | How to create and debug a pod in a Minikube cluster 😏
Tags: kubernetes, devops, docker, beginners
Published: 2020-02-07 14:24:31

In this practical video you will learn ***the most used and useful commands of Kubectl***, the command line tool for accessing the Kubernetes cluster.

Instead of just listing the commands, ***I'll walk you through an example by creating, editing and deleting a pod in the local minikube cluster***. 👩🏻‍💻

![Kubectl Commands](https://static.wixstatic.com/media/e7182f_736c0274f66141eaa4bfbcd922061651~mv2.png "Kubectl Commands")


On top of that I cover useful ***debugging commands***.

![Debugging Commands](https://static.wixstatic.com/media/e7182f_34473abef72846e88a234ebcff0eebc0~mv2.png "Debugging Commands")

So, are you ready to learn them? 🤠

{% youtube azuwXALfyRg %}

-----------------

I'm happy to connect with you on 
- [Twitter](https://twitter.com/Njuchi_)
- [YouTube](https://www.youtube.com/channel/UCdngmbVKX1Tgre699-XLlUA?sub_confirmation=1)
- [Instagram](https://www.instagram.com/techworld_with_nana/)
Open a new tab when your browser extension is installed
Tags: ux, glitch, extension, javascript
Published: 2020-02-07 13:56:07

I recently published my first Browser extension to [Chrome](https://chrome.google.com/webstore/detail/glitch-extension/pdiedadcnaailaknceakckfffhfjiagd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/glitchextension/), bringing [Glitch](http://glitch.com/) superpowers to your browser. After the user installed the extension, I wanted to show the user a new tab with some information about myself as well as ask them if they wanted to receive updates about the extension and other projects I’m working on.

I was inspired by some of my favorite Chrome extensions that do this, including [Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg), [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp), and [Honey](https://chrome.google.com/webstore/detail/honey/bmnlcjabgnpnenekpadlanbbkooimhnj). Here’s a quick demo of Honey’s install page.

![Honey install](https://dev-to-uploads.s3.amazonaws.com/i/aim1p1w59sqvi1dcttrg.gif)

Thankfully it was a fairly short amount of code to get this working! In case you're interested in doing something similar, here's how I did it. 

### manifest.json

Normally this is the section where you need to update your [manifest.json](https://developer.chrome.com/extensions/manifest) so you can implement the functionality. However, here we will use the `tabs` API, most of which can be used without any extra permissions 🙌

We do need to have a background script declared in our manifest.json. A background script listens for an event, like installs, messages from the [content scripts](https://developer.chrome.com/extensions/content_scripts), [and more](https://developer.chrome.com/extensions/background_pages).

```json
{
  "name": "Glitch extension",
  "version": "0.0.1",
  "description": "Glitch superpowers for your browser 👾",
  "background": {
    "scripts": [ "background.js" ],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "browser-icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}
```


### background.js

We will listen to an event when the extension is installed. The event contains a `reason` property which could be any of the following: "install", "update", "chrome_update", or "shared_module_update"
Since we only want to open the new tab on install, we will make sure that the `reason` equals “install”.


```js
chrome.runtime.onInstalled.addListener(function(details) {
  if (details.reason === "install") {
    chrome.tabs.create({ url: "https://avigoldman.com/glitch" });
  }
});
```

### Try it out
That’s it! Now every time your chrome extension is installed, a new tab will be opened. And here’s a video of it working 👾

![Installing the glitch extension](https://dev-to-uploads.s3.amazonaws.com/i/q17mhy6wey5kiwldnurb.gif)

Happy coding,
Avi
[PT-BR] A Sociedade da Informação versus a Sociedade do Conhecimento: Uma implicação com o futuro da humanidade.
Tags: knowledgesociety, informationsociety, accesstoinformation, informationtechnology
Published: 2020-02-07 13:49:08

Novamente essa semana que passou foi muito corrida. Muita coisa para fazer no trabalho, chegava em casa e só queria dormir e acabei não pensando em nada para o artigo de hoje. 

Ontem voltando da faculdade, lembrei de um artigo que escrevi para a matéria de Informática e Sociedade (Saudades Prof. Odilon). Ao ler, caiu a minha ficha que se encaixa em uma coisa que nós temos vivenciado hoje em dia: *o acesso a informação, mesmo que todos estejam disponíveis na internet, estamos sempre buscando uma forma de filtrar quais informações são importantes, relevantes e como vão mudar o modo de ver o mundo e de fazer as pessoas crescerem intelectualmente.* 

Então, segue abaixo alguns trechos retirados desse artigo. Tenham uma boa leitura!

**Conceito de Informação e Conhecimento**

A informação é aquela que informa. Em outras palavras, é a resposta a uma questão de algum tipo. É, portanto, relacionado aos dados e ao conhecimento, pois os dados representam os valores atribuídos aos parâmetros e o conhecimento significa compreensão de coisas reais ou conceitos abstratos. O conhecimento é uma familiaridade, consciência ou compreensão de alguém ou algo assim, como fatos, informações, descrições ou habilidades, que é adquirida através de experiência ou educação, percebendo, descobrindo ou aprendendo. O conhecimento pode se referir a uma compreensão teórica ou prática de um assunto. Pode ser implícito (como com habilidades práticas ou experiência) ou explícito (como com a compreensão teórica de um sujeito); pode ser mais ou menos formal ou sistemática.

**Nos dias de hoje**

Novas tecnologias sempre estão surgindo, e necessitamos de informações constantes, seja na internet ou em algum livro. A informática muda constantemente, então precisamos nos adaptar a ela, através do conhecimento e da informação.

A Sociedade do Conhecimento inaugura uma nova era. Participe de redes sociais, se inscreva, interaja mais, colabore com o que você sabe e pergunte mais, procure saber, trocar ideias e informações. Não basta ter acesso ao dicionário gigante de informações é preciso que ele faça sentido a todos nós e o laboratório de troca de experiências são as redes sociais.

Iremos para uma era em que a sociedade não perceberá a tecnologia em suas vidas, e a normalidade de ter vantagens e facilidades no dia a dia, pois assim vamos nos sentir agindo e pensando no sentido de maneira natural ou “normal”. Hoje o dever de saber é importante. São caixas de surpresas pois ela faz uma vida tanto no mundo real quanto no mundo virtual e a tecnologia abrange de formas dependentes em cada um de nós. Isso mostra que quanto mais saber, pode ser infinito.

*Nada é tão perigoso para aprisionar a inteligência do que aceitar passivamente as informações.”
Augusto Cury*
Repeated String Match - #Challenge
Tags: javascript, java, c, challenge
Published: 2020-02-07 13:47:16

Given two strings A and B, find the minimum number of times A has to be repeated such that B is a substring of it. If no such solution, return -1.

For example, with A = "abcd" and B = "cdabcdab".

Return 3, because by repeating A three times (“abcdabcdabcd”), B is a substring of it; and B is not a substring of A repeated two times ("abcdabcd").

Note:
The length of A and B will be between 1 and 10000.

***My Solution:***

class Solution {
    public int repeatedStringMatch(String A, String B) {
        int count = 1;
        String s = A;
        while(s.length()<=10000){
            if(s.indexOf(B)!=-1){
                return count;
            }else{
                ++count;
                s=s+A;
            }
        }
        return -1;
    }
}

Happy Coding! 😇 please share your approach on comments...
How to find out who don't follow back with Twitter's REST Api.
Tags: php, laravel, twitter
Published: 2020-02-07 13:41:54

---
title: How to find out who don't follow back with Twitter's REST Api. 
published: true
description: How to find out who don't follow back with Twitter's REST Api. 
tags: php,laravel,twitter
---

I wrote [this](https://dev.to/mnlwldr/how-i-track-unfollower-with-twitter-s-rest-api-48fc) few hours ago to show you, how I track my unfollower on Twitter with PHP and Git. 
Here is another interesting thing you can do with Twitter's REST Api. Find out who don't follow back. 

Based on my [other](https://dev.to/mnlwldr/how-i-track-unfollower-with-twitter-s-rest-api-48fc) post, here an example how I do this: 

```
<?php
require_once 'env.php';
require "vendor/autoload.php";

use Abraham\TwitterOAuth\TwitterOAuth;
use Tightenco\Collect\Support\Collection;

$api       = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
$parameter = [
    'screen_name' => 'mnlwldr',
    'count'       => 5000,
];

/* Get a list of IDs who follow me */
$follower   = $api->get("followers/ids", $parameter);

/* Get a list of IDs I follow */
$followings = $api->get("friends/ids", $parameter);

collect($followings->ids)
    
    /* diff the two arrays and return the difference */
    ->diff($follower->ids)
    
    /* chunk the diff because Twitter users/lookup accept max 100 IDs per request */
    ->chunk(100)
    
    /* now iterate over the chunks and call the users/lookup endpoint */
    ->flatMap(function (Collection $ids) use ($api) {
        return $api->get('users/lookup', [
            'user_id' => $ids->implode(','),
        ]);
    })
    /* iterate over the result and print the username */
    ->each(function ($profile) {
        print $profile->screen_name . PHP_EOL;
    });
```
Tell me something funny about your first DEV job
Tags: watercooler, discuss, career, jokes
Published: 2020-02-07 13:37:06

HAPPY Friday!!!

As I am here, dreaming about my first DEV job, I felt like asking you:
What's something funny that you did or happened to you about your first job?

-Maybe something that wasn't that funny at the time but now when you look back you can't help but laugh.
-Or maybe something about the interview that closed the deal.
-Or whatever comes to mind.

Give me some inspirational laughs people.!

<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" alt="A purrgrammer cat typing like crazy on his laptop">
Amazon Sumerian Digital Badge 
Tags: augmentedreality, virtualreality, mixedreality, aws
Published: 2020-02-07 13:27:26

---
title: Amazon Sumerian Digital Badge 
published: true
description: Learn about AR/VR/Mixed Reality with Amazon Sumerian 
tags: Augmented Reality, Virtual Reality, Mixed Reality, AWS
---
Learning about AR/VR and Mixed Reality with Amazon Sumerian is a lot of fun.  The digital badge is an added incentive for a lot (including myself).  The video series of me navigating it can be found at https://youtu.be/wt-7OWB-4jY.  I'm recording it as part of the Create-Build-Learn we're doing but also it's amazing how the act of teaching and recording yourself going over it helps reinforce the concepts.  My students say they find it easier when I record me going over the lessons so they can refer to later or if they miss class so thought I'd extend that to this as well.
In-template computed property declaration in VueJS
Tags: vue, javascript, tutorial
Published: 2020-02-07 13:20:39

Computed Properties are one of the best features of VueJS.

However, they don't work in all situations.

For example, let's say that you're looping over an array in a template and need to calculate something based on the index.

```vue
<span v-for="(item, index) in new Array(5)" :key="index">
  <slot :isFilled="index + 1 <= rating">
    <font-awesome-icon icon="star" v-if="index + 1 <= rating" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>
```

This example is from a rating-display component which I was using in [my recent course on Component Slots](https://www.vuescreencasts.com/courses/32).  It takes in a rating prop,  then displays either a set of stars (default) or whatever icons you choose to put into the slot.

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

The issue here is that `index + 1 <= rating` is repeated, and in the second usage with the v-if, the intent of the line is not clear.

However, we can't use a traditional computed property, because we're relying on `index` for the calculation.

And using a method, while it successfully solves the intent issue, is still pretty messy.

```vue
<span v-for="(item, index) in new Array(5)" :key="index">
  <slot :isFilled="isFilled(rating, index)">
    <font-awesome-icon icon="star" v-if="isFilled(rating, index)" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>
```
Wouldn't it be cool if, instead, you could just assign stuff to a property mid-template?

```vue
<!-- not actual code -->
<span v-for="(item, index) in new Array(5)" :key="index">
  let isFilled = index + 1 <= rating
  <slot :isFilled="isFilled">
    <font-awesome-icon icon="star" v-if="isFilled" />
    <font-awesome-icon :icon="['far', 'star']" v-else />
  </slot>
</span>
```
The answer is yes, that would be _awesome_.

Good news: we can do it.

Kind of.

```vue
<span v-for="(item, index) in new Array(5)" :key="index">
  <Let :val="index + 1 <= rating" v-slot="{val: isFilled}">
    <slot :isFilled="isFilled">
      <font-awesome-icon icon="star" v-if="isFilled" />
      <font-awesome-icon :icon="['far', 'star']" v-else />
    </slot>
  </Let>
</span>
```

So it's probably some crazy complex meta-programming magic, right?

See for yourself:

```vue
<template>
  <span>
    <slot :val="val" />
  </span>
</template>

<script>
  export default {
    //this can be anything, so it's a rare case where this style of prop declaration is preferred
    props: ['val'] 
  }
</script>

<style lang="scss" scoped>

</style>
```

That's the entire thing.

I even left the empty css block in there, so I could say I didn't cut a single line.

If you want to know more, check out my courses on Slots on [VueScreencasts.com](https://www.vuescreencasts.com/).  The Let block was pulled from [the first course](https://www.vuescreencasts.com/courses/32), and I'll be adding a second course in the series -- with even more crazy uses of slots -- in a week.

--Jeffrey
Odaksan Streç makinası ve Palet streçleme robotları
Tags: odaksan, strecmakinesi, stretchmachine, paletstrecmakinesi
Published: 2020-02-07 13:20:31

Streç Makinası yada palet streç makinesi olarak bilinen palet streçleme robotları Odaksan Mühendislik Bünyesinde %100 Yerli üretim felsefesiyle akülü ve tablalı olarak üretim yapmaktadır. 2011 yılında ODAKSAN MÜHENDİSLİK olarak faaliyete başlamıştır. Firmamız Streç paketleme robotları üretimi yaparak Tekstil, gıda, kimya, sektörlerindeki seçkin müşterilerine hizmet vermektedir.

https://www.odaksan.com

Üretimini gerçekleştirdiği FOCUS 285 Streç robotu ve size özel çözümleri ile Odaksan Mühendislik “Paketlemede çözüm Ortağınız” olma noktasında önemli adımlar atmaktadır.

Firmamız genç ve dinamik kadrosuyla, teknolojik gelişmelere açık, piyasa ihtiyaçlarına cevap verebilecek son teknolojisiyle ve kalite belgeleriyle hizmet vermektedir.

https://www.susogutmakulesi.com.tr
https://www.susogutmakuleleri.com
Laravel Passport don`t work. Error: column "api_token" does not exist
Tags: laravel, passport, oauth
Published: 2020-02-07 13:17:17

I want to create API with OAuth 2.0 authentication.

Use Laravel Passport tutorial https://laravel.com/docs/6.x/passport.

Set up the configuration on config/auth.php:

```php
'guards' => [
    'web' => [
        'driver' => 'session',
        'provider' => 'users',
    ],

    'api' => [
        'driver' => 'passport',
        'provider' => 'users',
    ],
],
```

When testing, I use a fresh token, but in response I get an error: 

```
SQLSTATE[42703]: Undefined column: 7 ERROR:  column "api_token" does not exist↵LINE 1: select * from "users" where "api_token" = $1 limit 1
```

Solution: clear the cache with command:

```
php artisan config:clear
```
Daily Developer Jokes - Friday, Feb 7, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-02-07 13:00:17

---
title: "Daily Developer Jokes - Friday, Feb 7, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Friday%2C%20Feb%207%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125994c8f5a.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Did you hear what the clumsy cryptographer did to their password?

___A___: Made a hash of it.
 -->
Hello World
Tags: helloworld, introduction, linux
Published: 2020-02-07 12:40:22

just a quick Hi to say... "Hi"

I'm new here and a full time Dad at daddy daycare ;)
I'm trying to learn Python on my odd hour off here and there.

I'm currently "hacking" with https://github.com/pihomeserver/Kupiki-Hotspot-Script to set up a VPNd Wi-Fi router.

when I'm not playing with Play-Doh or Python-ing 
I'm a www.x-plane.com pilot.


oh and I'm a full time Linux user too

oh and i use Arch btw ;)