teleren/devto huggingface dataset:
Day 99: Component communication got nothing on me 😎
Tags: 100daysofcode, vue
Published: 2020-10-23 19:59:53

I know I said I'd try something smaller but I just had to try one more time😂. This time I got it right 💃. Component communication got nothing on me😎. 
The links to the components that were giving me a hard time: [Menu](https://github.com/M-Tee/Kathys-Kitchen/blob/main/src/components/Menu.vue), [Tab](https://github.com/M-Tee/Kathys-Kitchen/blob/main/src/components/tab.vue), [Card](https://github.com/M-Tee/Kathys-Kitchen/blob/main/src/components/sCard.vue). Disclaimer: I'm not using the best practices here rather I'm working with what works and adjusting as I learn.

####This means continue...
I was motivated to continue working on the design. Unfortunately, _a designer's dream is a developers nightmare._ I clearly created my own nightmare. After hours and hours of trying to get implement the design, I ended up with this. So close but not it.

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

You don't wanna know how I pulled that off😂, did some dirty tricks somewhere. Just so you know those are 3 flex cards and I switched the data for the last two cards to get to that. It sounded brilliant until I thought about responsiveness and it was clear that this was pretty dumb. The good thing is when your the developer and designer you can always choose to wake up from the nightmare and dream I again. I chose just that, redesign!

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

This was easy to implement. It feels good to be in control. 😌

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

_I love the relationship I have with code, this whole back and forth thing is exciting. When I'm on the verge of giving up it somehow works out. If only relationships in real life we're this exciting._😂

_That was Day 99_
Webrtc ios call connection
Tags: ios, webrtc, android
Published: 2020-10-23 19:54:08

We are developing an application where we are trying to send an audio call from iOS to android using webRTC.Im able to get the ringing and connecting states but the call is not getting established .Getting the below failure  response from android.Can anyone please help on this.



libjingle: (port.cc:734): Jingle:Port[0xba42f800:audio:1:0:relay:Net[swlan0:192.168.43.x/24:Unknown]]: Port deleted
 libjingle: (basicportallocator.cc:924): Jingle:Port[0xba42f800:audio:1:0:relay:Net[swlan0:192.168.43.x/24:Unknown]]: Removed port from allocator (9 remaining)
 libjingle: (port.cc:734): Jingle:Port[0xba42fb80:audio:1:0:relay:Net[rmnet1:10.15.166.x/24:Cellular]]: Port deleted
 libjingle: (basicportallocator.cc:924): Jingle:Port[0xba42fb80:audio:1:0:relay:Net[rmnet1:10.15.166.x/24:Cellular]]: Removed port from allocator (8 remaining)
/libjingle: (port.cc:734): Jingle:Port[0xba42f480:audio:1:0:relay:Net[rmnet0:25.29.38.x/24:Cellular]]: Port deleted
/libjingle: (basicportallocator.cc:924): Jingle:Port[0xba42f480:audio:1:0:relay:Net[rmnet0:25.29.38.x/24:Cellular]]: Removed port from allocator (7 remaining)
Marvel
Tags: mobile, prototype
Published: 2020-10-23 19:46:49

Hoje é uma dica de app. Que dev nunca teve aquela idéia genial e 5 minutos depois estava lá sentado digital linhas e mais linhas de código sem pensar no amanhã. E depois de horas digitando quando vai testar o que foi desenvolvido muita coisa não fazia sentido, e ai a motivação vai lá pro chão.


Então hoje quero deixar a dica de um app mobile chamado [Marvel](https://marvelapp.com/). Disponível para [Android](https://play.google.com/store/apps/details?id=com.marvelapp) e [iOS](https://apps.apple.com/br/app/marvel/id765801658). Com ele você consegue desenhar as telas do seu app em uma folha qualquer, isso mesmo desenhar no lápis e papel e depois poderá visualizar como as telas se comportarão no celular antes mesmo de programar uma única linha.


Com isso tenho certeza que você poupará horas de trabalho e retrabalho. Testem ai e comentem a sua experiência.
My first Hacktoberfest :)
Tags: hacktoberfest, opensource
Published: 2020-10-23 18:56:05

### Who am I ?
Hey, I am Swarnava. I am from India. I go by Swarn10 on GitHub. I am a student at Indian Institute of Technology, Kharagpur (IIT-KGP). I love data structures and algorithms a lot. I am also into Competitive Programming. I like coding and learning new concepts of computer-science in my free time. I also love football, big Man Utd fan :p. 
### Background
I am not new to open source. I had been previously exposed to open source by a senior of mine at college, but I could hardly find time to contribute. This year however due to the COVID-19, I could be at home in my peace of mind and could contribute to the open source community which I was wanting to do since a very long time. 
I like coding as already mentioned. Whenever I find some time, I look up something new and try to understand and think about new problems. Since, I am also into competitive programming, problem-solving is another thing which I get my kick out of from coding.

### Progress
I feel extremely happy to announce that I have successfully completed this year's Hacktoberfest challenge. One was supposed to make 4 PRs to complete the challenge. It was only after my 4 PRs passed the review period that I thought of sharing this with the community. 
<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions
Since, I am a lot in DS & Algorithms and also Competitive Programming, I contributed mainly to those repositories that were based on DS & Algo  and were looking for contributors to improve the repo by solving problems and adding them to the repository, so that it could act as a resource for people who are/will be preparing for software interviews. I feel extremely happy to have been able to do atleast some good for those people out there by contributing in whatever way I could, and it was all possible because of open source and Hacktoberfest. Thank you Hacktoberfest and DigitalOcean. 
The following is the list of my 5 PRs :-  
1. https://github.com/pratik-choudhari/AlgoCode/pull/90
2. https://github.com/pratik-choudhari/AlgoCode/pull/133
3. https://github.com/rohan8594/DS-Algos/pull/17
4. https://github.com/ahampriyanshu/algo_ds_101/pull/1153
5. https://github.com/vJechsmayr/PythonAlgorithms/pull/434

### Reflections
For me, it has been truly a wonderful experience. I felt like I was doing social service just by coding :). 
The rules were so simple and everything was co-ordinated and carried out in such a seemless fashion.
I learnt a lot during this phase, making my code more readable, adding proper documentation, talking to the owner of the repo in case of any confusion etc. This truly had an overall impact on me. 
Last but not the least I can't thank Hacktoberfest and DigitalOcean enough for such a great initiative. I would definitely love to come back and contribute more for the open-source community in the next year. 

Peace !!!
No module named and Attempted relative import : The Import Mechanism Of Python And Two Related Problems
Published: 2020-10-23 19:44:35

###No module named

Issue Description : 

This problem ever happened when the application was executed with the command line, but it can be executed smoothly with the Pycharm run button. So it can be very simple to debug, just check the show command line afterwards in the edit configuration item of Pycharm, and then execute the import sys; sys.path command. Compare the options in the command line,you will find the former has Added a module for /home/hzcortex/projects.... In other words, Python does not add the directory where the script executes the command to sys.path.
I wish AWS had more useful error messages.
Tags: aws
Published: 2020-10-23 19:40:54

Sorry, this is more of a complaint than anything else.

I've spent the better part of two days troubleshooting a `ValidationException` in a CloudFormation stack that is nearly 100% devoid of any substance.

I've worked in systems with particularly awful error messages in the past (I'm talking about you, Win32 API, and ORA-NNNNN), but most of those were merely annoying and time-consuming. You could still trace, you could still look up the error and get something that would point you in _a_ direction.

`ValidationException` with `400` as a status code, and a brief text blurb saying which service threw the message is entirely useless.

I'm just saying, could the biggest player in cloud computing please step up their error message game? This is just silly, and it's costing me days of my life that I can't get back.
Node JS/TS Starter Repos
Published: 2020-10-23 19:35:04

**Update:** [Here's a modification for using TypeScript.](https://github.com/manavm1990/node-starter-ts) Discuss [here.](https://github.com/manavm1990/node-starter-ts/discussions)

**TLDR:** Head on over to [this **opinionated** beginner-friendly NodeJS starter pack.](https://github.com/manavm1990/node-starter) The deets are listed there in that one.

## Motivation

Over my years of teaching JavaScript at college and in bootcamps, students can get easily overwhelmed by how much there is to learn! I feel this myself in my own continual learning.

I have had pretty good success with alleviating some of this by providing my students with starter template repos.

The idea 💡 is to decrease some of the cognitive load by automating _some_ of the possible issues related to _code quality._ 

This allows students to focus on actually 'coding' and implementing _business logic_ and _algorithms_ rather than wondering so much about 'best practices' and the 'right way' to do certain things.

## How Does It Work?

Nothing much really...

Just includes some `npm run` scripts and uses some standard 'linting' configurations with just a few minor adjustments.

The VS Code Extensions and Settings are based on recommendations from [Syntax.fm](https://syntax.fm/), and my own experiences/struggles 💪🏽.

Go [check the README 📝](https://github.com/manavm1990/node-starter/blob/master/README.md) for more deets!

---

All of my students have really appreciated these types of starter templates that reduce their cognitive loads 🧠 and allow them to just jump in and code how they want while still 'auto-magically' adopting and developing 'best practices.'

There isn't much need to focus on all of this configuration 🔧 stuff when you are just getting started 🚀.

I have some other ones for 'vanilla front-end,' React, full-stack, etc.

If there is sufficient interest, I'll clean those up and post about them. 👋🏽
FINALLY!
Tags: hacktoberfest
Published: 2020-10-23 19:31:21

Hi, I'm a youtuber with the page: https://www.youtube.com/channel/UCffDu89S7eBKFxG0rXFDljQ
I've always been enthusiastic towards learning about new things.

I've been working on open source in GitHub and I found this oppurtunity.

It was amazing.

https://github.com/meshajamil/Repositoryfor-Hacktoberfest/pull/1
https://github.com/meshajamil/Repositoryfor-Hacktoberfest/pull/2
https://github.com/meshajamil/Repositoryfor-Hacktoberfest/pull/3
https://github.com/meshajamil/Repositoryfor-Hacktoberfest/pull/4


It was amazing, will surely participate again.
Creando tus propios alias para Git
Tags: git, productivity, tutorial, beginners
Published: 2020-10-23 17:07:10

¿Alguna vez te preguntaste como crear tus propios alias para Git?

Bueno hoy vas aprender a como crearlos, la verdad que es muy sencillo.

Lo primero que necesitamos es un archivo `Shell`, en este caso puede ser un `.bashrc` o `.zshrc`.

Primero creamos nuestro archivo `.bashrc` o el `Shell` que utilizes, abrimos el terminal y pasamos el siguiente comando: 

```sh
$ touch .bashrc
```
Esto creará el archivo de forma global y Git bash podrá acceder todo el tiempo. 
Luego abrimos el archivo y introducimos nuestros alias.

Por ejemplo: 
```sh
# .bashrc
alias gph="git push"
alias gcl="git clone"
```

Ahora reiniciamos el terminal y probamos nuestro alias `$ gph`.

También hay otra forma de crear alias, es creando un archivo `.gitconfig`.

Por ejemplo: 
```sh
# .gitconfig
[alias]
  st = status
  lg = log
```
Y también hay otra forma, desde el terminal. 

Por ejemplo: 
```sh
$ git config --global alias.st status
```

Pero personalmente prefiero la primera opción.

Y eso es todo, puedes ver algunos alias que tengo en mí [repositorio](https://github.com/Franqsanz/git-aliases).

Aquí en dev.to hay cientos de artículos explicando esto y más profundos. 
Espero que está breve explicación te sea de ayuda! ☺️

Gracias por leer !!!
SO LUCKY TO BE A PART OF HACKTOBERFEST
Published: 2020-10-23 19:29:21

Hi, I'm a youtuber with the page: https://www.youtube.com/channel/UCffDu89S7eBKFxG0rXFDljQ
I've always been very excited towards learning about new things.

I've been working on open source and been coding in GitHub

The experience was far beyond exceptional.

https://github.com/educationalexcellence/programming_languages-Hacktoberfest/pull/1
https://github.com/educationalexcellence/programming_languages-Hacktoberfest/pull/2
https://github.com/educationalexcellence/programming_languages-Hacktoberfest/pull/3
https://github.com/educationalexcellence/programming_languages-Hacktoberfest/pull/4

It was amazing, will surely participate again next year.
Hacktoberfest Completion
Tags: hacktoberfest, showdev
Published: 2020-10-23 19:24:22

Today I got an email saying I completed this year Hacktoberfest 🎉! 
In this little blog post I'm gonna talk about my experience.

## About My Experience
Even though I'm not completely new to GitHub and that I've already contributed to a few repositories before this event, this was my _first_ Hacktoberst and so I feeled a _rush_ whenever I entered to GitHub to search for an active repository to where I could solve an issue.

It felt nice to compete in the event not only because of the prize but because the feeling of camaraderie, collaborating with other developers and mantainers alike, working towards a common goal.

Also through this event I finally achieved the confidence to make a project of mine open source! I opened two issues and not more than an hour later there were two people interested in solving them! The day after that I did my first _issue review_.

## What I Learned From Hacktoberfest

I think I can summarize my learning experience in these two points:

- **To be patient**. I feeled very stressed out because I couldn't find a project to contribute to, unfortunately I didn't had enough time to spend on coding so I had to set my goals a little lower, that is, contributions that didn't requiered _a lot_ of work, so being patient was key to find repositories that met my expectations.

- **To be creative**. There are tons of other developers who are eager to achieve their 4 pull request too! Some of them way more experienced than I, so if I wanted to make my contribution stand out, I _had_ to be creative! And even so I couldn't keep up with all the awesome stuff other people did.

In general I'm very happy with how things turned out and I hope next year I could participate in this incredible event once again. 

Thanks for reading 👏!
Create Github Social Preview Images in a few clicks
Tags: opensource, github, developertools
Published: 2020-10-23 19:15:23

---
title: Create Github Social Preview Images in a few clicks
published: true
description: A new tool to quickly generate social preview images
tags: opensource, github, developertools
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v9jp1sgmuhhktmioi9mj.png
---

A problem I found when building public projects on github is creating social images to make it easier to share them on Twitter or reddit or even here. 

Of course, there are solutions to this my favourite probably being canva, but it still can be a time sink to design these images to look good.

A few weeks ago Wei and I came up with a solution to fix this during [MLH Fellowship](https://fellowship-orientation-batch-1.devpost.com/)

{% user wei %}

# [Presenting socialify](https://socialify.git.ci/)

Socialify allows users to create beautiful preview images in three clicks.

1. Add your GitHub repo url
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e3vg552m96b7wexevovc.png)
2. Choose your options 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4hi4j3nhw6urkw99430x.png)
3. Download Image or Copy Image url

# Image as a service

Socialify use the same concept of image as a service from [Vercel's og-image](https://og-image.vercel.app/)

This allows users to have SVG images that automatically update badges and description overtime.


### Some Example Images

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ygfavhheb8fefw5u18fm.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r93wdy8t9wu8lzllcsfx.jpeg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29ldtbqxkrl97nfgb2ts.png)

# Find our project

Website - [https://socialify.git.ci/](https://socialify.git.ci/)
Product Hunt - [https://www.producthunt.com/posts/socialify](https://www.producthunt.com/posts/socialify)

{% github wei/socialify %}
A laptop without stickers looks naked
Tags: watercooler, stickers, customize, laptop
Published: 2020-10-23 19:15:11

I love seeing a laptop with lots of stickers on it. I always wonder where people get them. A laptop with stickers is more personal. It has character. 

The other day my kids received a whole book of stickers that they gladly shared and now I, too, finally have a laptop full of stickers!

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

Do you put stickers on your devices? I'd love to see some pictures, please share in the comments.
Understanding Client-Side Storage
Tags: javascript, database
Published: 2020-10-23 19:10:54

Why do we need clientSide storage?  

Do you know why all websites show these popup to accept cookie policy? 

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

Because they want your permission to save user-specific data to store/access cookies in your browser. The browser has some storage limit which websites use to personalize user experience. 

**Features of clientSide data storage**

- `data persistence` which means you won't lose the data on page reload or on closing the browser. This property helps in personalizing the user experience on the app.  

- Different websites can have different clientSide data(i.e cookie, session, and localStorage). 


### Types of ClientSide Storages
----


**1. localStorage**

It's a key-value pair type client-side storage. It offers a maximum of 5MB limit. At 91wheels, we are using localStorage to store user-specific information like current city and user name for better personalization.

**Pros**
- Data has no expiry time. However, it can be removed by end-users by clearing browser data. 
- 

**Cons**
- The stored data is in plain-text. Hence, it's not advisable to store critical user information in localStorage. 
- It can only be read on the client-side. 

**How to save data to localStorage:**

```js
localStorage.setItem('username', 'dipakkr');

```

**Retrieving data from localStorage:**

```
const data = localStorage.getItem('username');

console.log(data); // dipakkr

```

![localStorage](https://dev-to-uploads.s3.amazonaws.com/i/zlqlh1zdewgesbtk5pt5.PNG)


**2. Session Storage**

Features
- It stores data only for a particular session. Session means till the time the browser tab is not closed. Once you close the browser, sessionStorage will be auto-deleted. 

- Like localStorage, it can only be accessed from the client. This also means that data is never transferred to the server. 

- Session storage also works as a key-value pair type storage. 

- The maximum limit of data saving in SessionStorage is about 5 MB.


**3. Cookie**

- Cookies are the earliest form of clientSide data storage. It is used to store information to personalize user experience on websites.

- The size of the cookie must be less than 4KB.

- Expiry time can be defined in the cookie. 


 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2tptjmgrw9f7rvect5al.PNG)

-------

Let's connect on  [Twitter](https://twitter.com/HQdeepak)
3 Tools for testing your kafka connection
Published: 2020-10-23 18:59:25

Today, I needed to test whether my kafka broker was active. I used telnet for this, but I could also have used cUrl. These are 3 tools that you can use to test your kafka connection:

**Tool 1 - telnet**

Telnet is a tool that we use to make remote connections based on the telnet protocol.

The command is quite simple:

**telnet [host/ip] [port]**

Run the following command in your terminal:

**telnet kafka-01 9092**

Your terminal should look like this:

$ telnet kafka-01 9092
Trying 192.168.15.20...
Connected to kafka-01.
Escape character is '^]'.

**Tool 2 - cUrl**

cURL is a command-line tool that we use for transferring data from or to a server using various network protocols. I have been using this tool for testing connectivity from a pod running inside a Kubernetes cluster.

The commad syntax is:

**curl [options...] url**

--
$ curl -v telnet://kafka-01:9092
   Trying 192.168.15.20:9092...
   TCP_NODELAY set
   Connected to kafka-01 (192.168.15.20) port 9092 (#0


**Tool 3 - kafkacat**

kafkacat is a powerful tool that you can use to produce, consume, list topics, and partitions. This tool is capable of creating or destroying your entire cluster. Be careful with this tool!

Run the following command in your terminal:

**kafkacat -L -b kafka-01:9092**

The arguments are -L for listing mode and -b for which Kafka broker to talk to.

Your terminal should look like this:

$ kafkacat -L -b kafka-01:9092
Metadata for all topics (from broker -1: kafka-01:9092/bootstrap):
 1 brokers:
  broker 0 at kafka-01:9092 (controller)
 1 topics:
  topic "topic-one" with 1 partition:



**plus:** You can also use these tools for testing your Azure Event Hubs connections.


Azure Event Hubs is a distributed stream processing platform and event ingestion service managed by Microsoft. You do not need to set up, configure, and manage your own Kafka clusters.


This is a terminal output for telnet:


$ telnet eventhub-01.servicebus.windows.net 9093
Trying [ip]...
Connected to [hostname].cloudapp.net.
Escape character is '^]'.