teleren/devto huggingface dataset:
Pen Pal Mentoring
Tags: leadership, career, beginners
Published: 2020-04-16 03:27:05

---
title: Pen Pal Mentoring
published: true
description: The importance of mentorship in early career development cannot be overstated. This practice is also beneficial for mentors too. This is a win-win situation.
tags: leadership, career, beginners
---

## Introduction

I have been working in *Software Development* for over fifteen years. Nowadays I'm the *Head of Technology* for a small startup working on digital agents. Leadership is my passion.

I've discovered that there are three core approaches to Leadership:
- Mentorship
- Coaching
- Sponsorship

Lara Hogan has written very well about it in her [Resilient Management](https://resilient-management.com/) book, and succinctly expressed in this tweet:

{% twitter 1248735948558331904 %}

## Mentoring

Mentoring is how a Leader can actively teach skills to less experienced team members. And so, is the most important tool one can get access to earlier on one's career. Great Mentoring earlier on will yield far more capable and skilled team members in the future.

Earlier in my career I had no notion of how important this was, and the impact it could have on my future. Is hard to seek something when we don't know such a thing even exists. We simply don't know what we don't know.

So I would like to give this small insight to all of you who are starting this great and challenging career path.

## Pen Pal

In these modern times many won't know what a [Pen Pal](https://en.wikipedia.org/wiki/Pen_pal) is. Basically, people used to exchange hand written letters with each other. You could correspond with your Pal for years, or even a lifetime. Even now some people still practice this form of social interaction. And with our modern technology, some have taking it to email form.

The great thing about this practice is the **asynchronous** nature of it. You write a letter, post it, and wait for a reply. There is no expectation of instant notification or response, like you would have in a chat, or even email, situation.

## Pen Pal Mentoring

Joining this two concepts and activities together, I thought it could be a great idea to **Mentor** people who are starting their careers in the Software industry, in a **Pen Pal** way.

This would be beneficial for both parties. For the **Mentor**, the opportunity to practice and hone its *mentoring* skills. For the **Mentee**, the opportunity to grow the skills required to succeed in this industry.

I would like to extend this offer to any "newbie" out there. If you are just starting, or only have a couple of years of experience under your belt, get in touch, maybe I can help you along the way. Leave me a comment, and we can get in touch!

Thanks for reading.
HOW TO CREATE ICON INPUT ELEMENT USING HTML AND CSS
Tags: html, css, design, webdev
Published: 2020-04-16 03:13:26

There is a lot of time we need to customize input control. In this post, we are going to create a customized input-element with an icon before it. We will do it using only HTML and CSS.

We are going to use a div element as a container for the input element. Inside our container, we will put the input element and our icon container. The icon container is also a div element. Here is our HTML:
```html
<div class="icon-input-container">
    <input class="icon-input" type="text" placeholder="Email">
    <div class="icon-container">
      <div class="icon-email"></div>
    </div>
</div>
```
For the icon, we are going to use an SVG. You can get a lot of wonderful icons from FlatIcon for various purposes for free in SVG, PNG and AI format. We have used that SVG as div background. Here is the CSS:
```css
.icon-input {
  width: 100%;
  border: 1px solid #E6E6E6;
  margin: 8px 0;
  outline: none;
  padding: 8px 0px 8px 35px;
  transition: 0.3s;
}
 
.icon-input-container {
  position: relative;
}
 
```
### [Read The Full Article and Check GitHub Repo.](https://mushfiqweb.com/icon-input-element-using-html-and-css/)

### Thanks for reading and share if you like it.
My react-router doesn't work while using axios to fetch API.
Tags: react
Published: 2020-04-16 03:08:48

I am trying to fetch Newsapi. Now I display the news on the screen and I want to click the image and redirect to that detailed news page. I add react-router to it. But it does not work. Here is the code, https://github.com/xnslx/React-router-practice-fetch-newsapi Thank you in advance!
Am about to Open Source this project - Encourage me!
Tags: opensource, showdev
Published: 2020-04-16 03:05:05


Let me know if I should speed up releasing the source code?

## (Source Code Coming Soon to this public Github Repo)

Github URL: https://github.com/telecomsxchange/ott_apps

### IOS and Android OTT App (Chat, Voice, Video) supports one on one and one to many.

### Goal

The approuch here is to open source the Apps and Web services side of things and integrate with as many different CPaaS providers as possible (e.g. Twilio, Sinch, Restcomm, Etc..) i think there is no value today of building another SIP/WebRTC backend, we want to give a head start to developers that need a working IOS, Android app for group and one to one messaging, conferencing, and voice calling.


Live Demo on App Store: https://itunes.apple.com/us/app/o2-app/id1363104848?mt=8

Tested on over 32k Live Users: http://ottusers.telecomsxchange.com 


![alt text](https://ott.telecomsxchange.com/appflow1.jpg "App Flow")



XCode view: 
![alt text](https://user-images.githubusercontent.com/26701933/79405928-5c667400-7f9e-11ea-8a46-7ec0dbdb37bc.png "X Code Ciew")


Signup:

- Ready to use your Twilio Account SID - Token for sending OTPs
- Can easily switch signup OTPs to your own HTTP API.

Video Calls:

- Twilio Programmable Video Dependant (Up to 4 people at the same time currently supported)
- Possible to use another SDK for initiating videos

Audio Calls 

- Up to 10 participents at the same time
- Twilio support already built in for Audio, Possible to switch to another SDK


Chat 

- Unlimited particpents support
- Audio Voice Message support
- Image Sharing support
- Location Sharing Support
- 1:1 , 1 to many
Minha caixa de ferramentas no inicio de 2020
Published: 2021-04-14 13:10:45

---
title: Minha caixa de ferramentas no inicio de 2020
published: true
date: 2020-04-16 03:00:00 UTC
tags: 
canonical_url: http://igordcsouza.com/2020-04-16-my-tool-kit-first-tri-2020/
---

Ta rolando uma thread no Twitter sobre isso e o Guto Carvalho fez um post que eu achei bem legal e resolvi copiar para acompanhar ao longo dos anos. Notebook Pessoal/Trabalho (DUAL BOOT) Ubuntu 18.04 Google Chrome 1Password ToDoIst Grammarly Notifier for Github VSCode Slack Dracula Theme OBS Audacity oh-my-zsh...
COBOL's 60th birthday 
Tags: cobol, legacy
Published: 2020-04-16 02:45:16

You'd think with all the COBOL advocacy I've been doing, I'd notice, but it slipped past me that this year is COBOL's 60th birthday.

The folk over at MicroFocus however, have been very much [on the ball](https://www.microfocus.com/en-us/marketing/cobol-60).

See also 
 1. [Our Government Runs on a 60-Year-Old Coding Language, and Now It’s Falling Apart](https://onezero.medium.com/our-government-runs-on-a-60-year-old-coding-language-and-now-its-falling-apart-61ec0bc8e121) (I'm assuming they mean the government is falling apart.)
 1. [COBOL turns 60: Why it will outlive us all](https://www.zdnet.com/article/cobol-turns-60-why-it-will-outlive-us-all/).
 1. [How COBOL Still Powers The Global Economy At 60 Years Old ](https://www.tpr.org/post/how-cobol-still-powers-global-economy-60-years-old).

For those who aren't au fait with COBOL, there's always [Wikipedia](https://en.wikipedia.org/wiki/COBOL).
Web Surgery - Ep.3 - Web tracking and cookie consensus banner
Tags: webdev, javascript, beginners
Published: 2020-04-16 02:36:05

---
title: Web Surgery - Ep.3 - Web tracking and cookie consensus banner
published: true
description: Today I added a GDPR compliance web tracking to my website. If you are using another tracking service (e.g. Google Analytics) that use cookies, I will also show you how to add a banner to get visitors' consensus.
tags: Webdev, Javascript, beginner
---

Today I added a GDPR compliance web tracking to my website. If you are using another tracking service (e.g. Google Analytics) that use cookies, I will also show you how to add a banner to get visitors' consensus.

Web tracking service that I use: [Fathom Analytics](https://usefathom.com/ref/W4UI50)

This site to download the cookie consent banner: [osano.com](https://www.osano.com/cookieconsent/download/)

I got the JavaScript for clearing all cookies from this [Stackoverflow thread](https://stackoverflow.com/a/33366171)
COBOL - not dead; not dying; not even idle (#2)
Tags: language, cobol, legacy
Published: 2020-04-16 01:59:05

We now have people saying that COBOL is [an old programming language ... threatening global stability](https://www.techradar.com/au/amp/news/an-old-programming-language-is-threatening-global-stability).

The threat to global stability comes not from a language but from shortsightedness in public and private industry. The article claims that there are 220 *billion* lines of COBOL in active service globally. The number of trained programmers, by contrast, is dwindling rapidly. 

It's not the fault of the language that we are now in this situation. It's the fault of _people_, people who are far too interesting in bowing down to the god of the new; people who suffer from [kainomania](https://wordinfo.info/results/kainomania) and who have made kainomania an industry standard (I can't find Steve Jobs's little soundbite now, but to loud cheering he says, "Completely new!".)

Interestingly, the headline of the article acts against the intent of the text, which ends on quite a positive note, viz, "If you've ever wanted to learn COBOL, now would be the perfect time to do so."
Accessibility for the colour blind #3: Forms
Tags: forms, a11y, input
Published: 2020-04-16 01:53:40

Ok.... So this one is a big one for me. I have MAJOR issues seeing forms. Especially when people use white on... a little less white... With light grey text... WTF!??!?!?

## Labeling 

Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple has this problem with their registration form:

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

Using labels works a lot better. 

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

But even then the border is too light and I personally would have issues seeing that. 

Adding a darker / thicker border or even some shadow helps even more. 


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

## Required Fields
The picture below is a perfect example. I cannot tell which one of these if any... or all of them are required...

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

Instead try:

- Marking required fields with an asterisk.

- Even better, marking required fields with “required.”

- Where possible, remove optional fields altogether.

In the next article I'll be wrapping up this series with a few more examples and tooling!
TDD By Example: Chapter 1 Multi-Currency Money
Tags: tdd, kentbeck
Published: 2020-04-16 01:51:17


## Summary
The first part of this chapter Beck gathers requirements and starts to define the acceptance criteria. He doesn't call what he does by those names but when he writes:

> What behavior will we need to produce the revised report? Put another way, what set of tests, when passed, will demonstrate the presence of code we are confident will compute the report correctly?

I think he is talking about putting the requirements for the code into the tests.

He describes that he is going to put everything he needs to do on a list. He is going to focus on one thing at a time. He will add things to the list as they come up. 

We start to understand one of the main tactics of TDD.

> When we write a test, we imagine the perfect interface for our operation.

He writes the test so that code has the API he wants it to have. He then gets the test to green as fast as he can. One of the most important things in TDD is to get to a passing test as fast as possible.

> You probably aren't going to like the solution, but the goal right now is not to get the perfect answer but to pass the test. 

The TDD cycle:
>  1. Add a little test.
> 2. Run all tests and fail.
> 3. Make a little change.
> 4. Run the tests and succeed.
> 5. Refactor to remove duplication.

There is a sidebar on "Dependency and Duplication". He mentions that dependencies are the key problem in software at all scales and that the key to removing dependencies is remove duplication. 

There is now a refactoring where duplication is removed in very small steps.

> Do these steps seem too small to you? Remember, TDD is not about taking teeny-tiny steps, it's about being able to take teeny-tiny steps. 


## Commentary
I think the sidebar on dependency and duplication is the most interesting thing in the chapter. When he writes:

> Dependency is the key problem in software development at all scales.

my eyes stop.

I wonder if that's true. I think about on my own experience and I feel like there is some truth to it. But could it really be the "key" problem? And can the answer to the "key" problem be as simple finding duplication and removing it?

I have these questions in my mind as I read on. Some part of me feels like there is a lot truth to that statement. Some part of me feels that there are much more pressing problems, like building trust on a team.

The rest of the chapter is a good introduction to the technique of TDD. Beck emphasizes small focused steps. I appreciate that approach more and more in my day to day work. I'm starting to feel that I actually move faster taking as small a step as possible.
My development environment | From scratch | Ubuntu | 2020
Tags: linux, ubuntu, webdev, tutorial
Published: 2020-04-16 01:38:52

{% youtube smwpadzkWRQ %}


Content:
0:07 Start of the video
0:51 Terminals
0:51    - Terminator
2:16    - Alacritty
3:12 Fundamental tools installation - with brief explanation
3:19    - curl
3:28    - git
3:33    - htop
3:39    - vim
3:45    - jq
3:50    - zsh
4:03    - tmux
4:27 Tmux basic usage
5:56 jq overview
6:29 htop overview
6:39 vim basic usage
7:24 zsh overview
7:50 oh my zsh installation
8:58 powerlevel 10k installation (zsh theme)
12:42 powerlevel 10k overview
13:34 fzf installation (fuzzy finder)
14:11 fzf basic usage
15:24 IDEs
15:24    - Intellij Idea (mention)
15:42    - VS Code (mention and installation)
15:59 Nord color theme 
16:13 Nord for alacritty
16:53 Jetbrain's Mono Font
17:37 Rust installation
18:00 Customize status bar configuration, add crab emoji (very important)
18:38 Docker installation
20:52 docker-compose installation
Vue.js Enterprise Crash Course
Tags: vue, javascript, frontend, webdev
Published: 2020-04-16 00:59:41

---
title: "Vue.js Enterprise Crash Course"
published: true
description: "This is a short course I made for professional Vue developers looking to take their career and craft to the next level this year. Check it out, it’s free to join!"
tags: vue,vuejs,javascript,frontend,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/6n5ggv42j4con7hocqmv.png
---

I’ve just released the first lesson of my new [Vue.js Enterprise Crash Course](https://crash-course.enterprisevue.com/) 🥳

This is a short course I made for professional Vue developers looking to take their career and craft to the next level this year. 

Check it out, it’s free to join: [Vue.js Enterprise Crash Course](https://crash-course.enterprisevue.com/)

## Why I made this course

Are you hoping to step up as a developer this year? Maybe there’s a senior role at your company that you've been eyeing, or perhaps you want to find a new company that's working on projects that really excite you.

If you're perfectly happy with your job, perhaps this year you just want to find new and challenging ways to level-up your mastery of the craft.

I made this course to introduce some of the knowledge that expert Vue developers have and that you’ll need if you’re considering building large apps with Vue. 

## What you will learn

While there are plenty of different skills you need for enterprise development, some of the most crucial are - testing, deployment, and full-stack architecture.

As it’s a short course, you shouldn’t expect to master these topics, but you will get a basic knowledge and a good starting point for further study.

I’ll also give you an enterprise app blueprint that you can mess around with and use as the basis of your own Vue + Node apps.

The first lesson is out today, and in this one, I talk about what enterprise web development skills are and why they’re crucial for building commercial-grade Vue apps.

I hope to see you in the course! 

[https://crash-course.enterprisevue.com/](https://crash-course.enterprisevue.com/)
Understanding React Context to Beginners or Lazy people 🥱
Tags: react, context, beginners, javascript
Published: 2020-04-16 00:58:11

#Do you know what's *Context* and how to use it with *Hooks*?

If you:
- Doesn't understand the React Docs yet (in some moment you'll do it)
- Only wants an explicit and easy tutorial 🦥 

*You're in the correct place!*

##__What will be the path we will follow?__ 

We're going to understand what is *Context* and what problem does it solve, then we're going through code!

Without further ado, let's do it 🏄‍♂️ 

In many applications, we have a __state global__ (data which we need to manipulate in deferents parts of the app 💾)

*Context*, is a __"state management"__ which provides a way to pass data through the component tree without having to pass props down manually at every level. 

###Now, we will through the steps to implement Context in our Apps 


####1- Creating our *Context*:

![Code to create the Context Component](https://res.cloudinary.com/dcboyc8ye/image/upload/v1586981132/zqylu3daii0viowz38nu.png)

####2- Subscribing our Components to the *Context*:

Every *Context* comes with a *Provider*, you need to wrap your components with the *Provider* this will allows to the components subscribe to the *Context* changes. 

The *Provider* accepts a _value_ prop to be passed to consuming components that are descendants

![Context Provider](https://res.cloudinary.com/dcboyc8ye/image/upload/v1586941028/ohgoahumajhazxkthdfl.png)

####3- Consuming the *Context* in our component:
You can use a __<MyContext.Consumer></MyContext.Consumer>__ is a React component that subscribes to the *Context* changes which uses the _"render props"_ technique to consume the value of the *Context*

In this example we're going to use the *Hook useContext* which accepts a *Context object* (the value returned from React.createContext) and returns the current *Context value* for that *Context*

![Layout Component](https://res.cloudinary.com/dcboyc8ye/image/upload/v1586981126/wyinnklgjzzhnt6brccg.png)

![Button Component](https://res.cloudinary.com/dcboyc8ye/image/upload/v1586981121/uzrroefeuitfpz7ec7tv.png)

It's important to remember that the current *Context value* is determined by the value prop of the nearest *<MyContext.Provider>* above the calling component in the tree.

Well people this it's all, to this point I hope that you can create a *Context*, subscribed your components and change the current value of the *Context* since a child (look carefully out the second image of the step 3)
Which is a best-advanced Udemy course on the Javascript?
Published: 2020-04-16 00:57:11

Can anyone suggest the best courses to learn on Udemy? As it's a lot confusing to find the bunch of similar courses.

1. advanced Javascript 
2. React
3. node and 
4. AWS


1.Advanced Javascript:
  a. One of the best to understand the weird parts -> 
 [Advance Javascript Concepts](https://cognizant.udemy.com/course/advanced-javascript-concepts/learn/lecture/13512858?start=15#content)

  b. Reference book: [You don't know Js](https://github.com/petyakostova/IT-Books/blob/master/JavaScript/You%20Don't%20Know%20JS%20-%20Kyle%20Simpson/You%20Don't%20Know%20JS%20(book%20series)%20-%20Kyle%20Simpson.pdf)
How to Search Packages from Terminal
Tags: linux, ubuntu, cli
Published: 2020-08-11 13:38:17

---
title: How to Search Packages from Terminal
published: true
date: 2020-04-16 00:00:00 UTC
tags: linux, ubuntu, cli
canonical_url: https://tech.serhatteker.com/post/2020-04/search-packages-from-terminal/
---

There are 2 ways to search available packages from `cli` on Ubuntu:

1. `apt-cache`
2. `apt`

Each gives different output formats; `apt-cache` is like lean and one line. `apt` includes more info and highlights the package name. I usually prefer `apt`.

For instance lets search __NeoVim__ and see the results:

### apt-cache

```
user@host:~$ apt-cache search neovim
lua-nvim - Lua client for Neovim
lua-nvim-dev - Lua client for Neovim
neovim - heavily refactored vim fork
neovim-qt - neovim client library and GUI
neovim-runtime - heavily refactored vim fork (runtime files)
python-neovim - Python2 library for scripting Neovim processes through its msgpack-rpc API
python3-neovim - Python3 library for scripting Neovim processes through its msgpack-rpc API
ruby-neovim - Ruby client for Neovim
```

### apt

```
user@host:~$ apt search neovim
Sorting... Done
Full Text Search... Done
lua-nvim/bionic 0.2.1-1-1~ubuntu18.04.1~ppa2 amd64
  Lua client for Neovim

lua-nvim-dev/bionic 0.2.1-1-1~ubuntu18.04.1~ppa2 amd64
  Lua client for Neovim

neovim/bionic,now 0.4.3-3~ubuntu18.04.1~ppa1 amd64 [installed]
  heavily refactored vim fork

neovim-qt/bionic 0.2.8-3 amd64
  neovim client library and GUI

neovim-runtime/bionic,bionic,now 0.4.3-3~ubuntu18.04.1~ppa1 all [installed,automatic]
  heavily refactored vim fork (runtime files)

python-neovim/bionic,bionic 0.2.6-3ppa1~ubuntu18.04.2 all
  Python2 library for scripting Neovim processes through its msgpack-rpc API

python3-neovim/bionic,bionic,now 0.2.6-3ppa1~ubuntu18.04.2 all [installed]
  Python3 library for scripting Neovim processes through its msgpack-rpc API

ruby-neovim/bionic,bionic 0.7.1-1 all
  Ruby client for Neovim
```

_Info_:

Also you can pipe the outputs to _less_ if it gives a lot of results.




All done!
ERROR: Failed to build gem native extension.
Tags: cocoapods, ios, beginners
Published: 2020-04-15 23:45:18

### Are you unable to install cocoapods on maxOS Catalina ? here is what might work for you.

On macOS Catalina I faced several issues install cocoapods, and below is the solution.


```shell
sudo gem install -n /usr/local/bin cocoapods
Building native extensions. This could take a while...
ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

    current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.12.2/ext/ffi_c
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0 -r ./siteconf20200416-2584-hct4l8.rb extconf.rb
mkmf.rb can't find header files for ruby at /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/include/ruby.h

You might have to install separate package for the ruby development
environment, ruby-dev or ruby-devel for example.

extconf failed, exit code 1

Gem files will remain installed in /Library/Ruby/Gems/2.6.0/gems/ffi-1.12.2 for inspection.
Results logged to /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.12.2/gem_make.out
ameedjamous@Ameeds-iMac O2IOS-master % sudo gem install -n /usr/local/bin ruby-dev
ERROR:  Could not find a valid gem 'ruby-dev' (>= 0) in any repository
ERROR:  Possible alternatives: ruby_dev
ameedjamous@Ameeds-iMac O2IOS-master % sudo gem install -n /usr/local/bin ruby-devel
ERROR:  Could not find a valid gem 'ruby-devel' (>= 0) in any repository
ERROR:  Possible alternatives: ruby_dev, rubdev, ruby-DTL, ruby-avl, ruby-d2l
```

## Solution getting cocopods workings on macOS Catalina

```shell

# brew cleanup -d -v    
# brew install cocoapods
 
```

Thought others might find this useful.