teleren/devto huggingface dataset:
Nevertheless, I Will Continue to #ChooseToChallenge Myself
Tags: choosetochallenge, wecoded, womenintech, career
Published: 2021-03-05 09:43:37

My journey into becoming a Manager working in the Developer Relations industry [hasn't always been smooth](https://dev.to/czajkowski/it-s-2020-here-s-to-supporting-people-through-their-journeys-57p5). In 2021, I want to look at ways we can choose to inspire others while we continue to challenge ourselves—despite the obstacles we face at work, within our communities, and because of the pandemic. This year, I want to push past my comfort zone.

I am not a fan of writing. Mostly, I feel that someone else could phrase things more eloquently or share something more impactful. So this year, I challenge myself to overcome that doubt and write more. 

I still feel like an imposter at times, even after working in tech for over two decades. To compensate, I take on more responsibilities to show my value—and I know other women can relate. However, I believe we can overcome this and help support one another in saying No to things. [Shirley Bailes](https://twitter.com/shirleybailes) my co-organiser at [FOSDEM Community devroom](https://fosdem.org/2021/schedule/track/community_devroom/)this year, has a great formula I'm going to try when assessing to take on more work:

1. Does it have to be done, like contracts, POs, etc. 
2. If no, does it help move the needle - with a new project or a new idea or taking on more work.
3. If yes to either, I try to determine the scope of work ahead of time and what bandwidth I can devote to it. I also try to determine if I'm the right person to take action.

Lastly, I want to challenge myself by taking part in areas where I'm not an expert, even if I feel I am less capable than my male colleagues (who also may not know the answers but don't second guess themselves).

This year will no doubt be challenging. However, I know that I have allies, supportive colleagues, and I'm fortunate to know some amazing people that inspire me daily. If I can lend a helping hand, provide mentorship, or help you get your foot in the door, please reach out. My [Twitter DM](https://twitter.com/czajkowski)is open.
Greetings from Task Force Week 1
Tags: taskforce, awesomity, development, coding
Published: 2021-03-05 09:42:37

So, week 1 at the Task Force is over and it has been a joyous ride so far. It's been an interesting and educational experience that is more than I expected.

We kicked it off on the first day with an insightful session about values and just how important they are to the individual, the team and the community in general. That even helped me to revisit my own values and think about them in a new light that I'd never thought them in before.

To infinity and beyond. This expression had a whole new meaning to me on the second day. Tuesday was marked with two Codewars katas that had us scouring the internet with ways to count and operate beyond infinity and thankfully ES2020 came to the rescue with `BigInt`. Thank you Javascript.

Day 3 was particularly challenging at first but finally turned around. The morning session was about Communication, yet another essential skill in team building that I'm glad I learned more about and the evening had us presenting about Git workflows. Presentation is always challenging for me but only because I lack practice and that is exactly one of the skills i expect to build in the Task Force.

Yesterday was the fourth day and just like Tuesday, it was packed with even more Codewars katas. We pushed our problem solving capabilities a little further yesterday and i expect more of that later to challenge my problem-solving skills. We went on to learn about DevOps at Awesomity and how they do things.

Today has so far been the most educational day of the week. This morning we dived even deeper into the development process here and it is crazy how much goes on after writing code. This evening we'll be up for another presentation on the week's experience and I'm looking forward to it.

Well, that's it for week one at the Task Force.
Nevertheless, Nishiki Coded in 2021! 👩‍💻
Tags: wecoded
Published: 2021-03-05 09:36:37

#Hey you! Yes, you! Stop right here ✋
#You know what? If I am doing this, you can do it too!

'Nevertheless, she's coded!' As soon as I spotted a post about this on LinkedIn, Me to myself: "Yes, it's time to write another article and share something, Let's give it a try!"

So here I am 😉.

Let me tell you about myself first!

I am Nishiki Asumi Yapa, from a small island in the Indian Ocean called Sri Lanka. I'm reading Software Engineering, and I'm going to graduate in a year from today. After that, I can call myself a 'Software Engineering graduate with a first/second-upper (hopefully 🤞) degree'.

I'll start like this;

What is the most annoying thing you ever heard from others?

######"Oh! Can you do the documentation right? Girls can do that task better than boys,"
######"Can you check the documents with your girlfriends?"
######"Certainly you can do the presentation"
######"Let's appoint a boy as a leader"
######"Girls can not do coding"

![c4c55553ea3f28a1e5da9271ac0bc773](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ursg9yxq47ekw7fs0bn.gif)
 
Why do people keep saying these things? Is it their fault? No! No! No!
#####It's your fault girl! 😥
You are the reason behind their actions!
Maybe you're wondering what is the reason behind their action too!.

I've been volunteering for dev activities for a couple of years now. What I've noticed from the events I've been taking part in is that girls are not involved. It doesn't matter whether it's a hackathon or a technical session or some other competition.

I'm holding a position at Women in FOSS at my university, and even though we're planning any events, the girls don't come forward. No matter how hard we forced them, and request them repeatedly. They won't step up.

Why don't you step forward? Is there anyone who tells you that you can't do it? Is there anyone who tells you that you can't code?

I'm a really shy girl in my first year of college, too. But I realized that there is no one but you are the only person responsible for your life.

If somebody says you can not do it, just show them your capability.  Even though we are quarantined and we are spending our new normal life, do not let your skills die. 

There is always first time for everything. At first, you might feel it is hard to do, it is impossible to do. but when you start doing something and make it as habit, the impossible will turn into possible task. 

No one is perfect, including myself. I am not a super techy person but I am still trying to achieve my goal.

One of my wise friends once said "Grab your opportunities, if not, make opportunities for you!"

![tenor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fl0vmm3d377hxaciwxt.gif) 

Do not give up, believe in yourself! 💖
Good luck with your journey and stay safe
Algorithm to repeat a string num time
Tags: algorithms, javascript
Published: 2021-03-05 08:50:07

#Problem:

Repeat a string numerous times.

This function input:

`repeatStringNumTimes("abc", 3);`

gives us this output:

`abcabc`

One of the way to achieve this:

Step 1

create a local variable equal to an empty string in order to have an empty container where to store all the string we are going to create: 

`let accumString = ""`

Step 2

Create an iteration through a while loop 

`while ( num > 0 )` --> attention is a potential infinite loop

Step 3

Under the while loop condition fill up the variable using the addition assignment operator `+=`

`accumString += str`

Step 4 

to avoid the infinite loop just created associate to `num` the decrement operator `--` to stop the loop when `num` is 0.

note: the while loop is completed and we can close the curly bracket.

Step 5 

Outside of the while loop but still inside the function insert the return statement to stop the function and return the value of the function.

Step 6 

Now call the function `repeatStringNumTimes("abc", 3)` with inside a random string and integer.

the output will be: `abcabc` 

The whole function just created below:

```
function repeatStringNumTimes(str, num) {

let accumString = "";
while ( num > 0 ){
accumString += str;
num--;
}

return accumString;
  }

repeatStringNumTimes("abc", 3);
```
An animated good looking hamburger
Tags: hamburger, css
Published: 2021-03-05 08:42:53


https://codepen.io/stuartcreed/pen/VwmBBGw

This improves on source:
https://uxdesign.cc/the-menu-210bec7ad80c

```
<button id="mobile-hamburger" class="menu" onclick="this.setAttribute('aria-expanded', this.classList.contains('opened'))" aria-label="Main Menu">
  <svg width="50" viewBox="0 0 100 100" >
    <path class="line line1" stroke-linecap="round" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
    <path class="line line2" stroke-linecap="round" d="M 20,43 H 80" />
    <path class="line line3" stroke-linecap="round" d="M 20,56.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
  </svg>
</button>

<script>
    const hamburger = document.getElementById('mobile-hamburger')
    const menu = document.getElementById('mobile-menu')
    hamburger.addEventListener('click', function() {
      hamburger.classList.toggle('opened');
    });
</script>

<style>
  .menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    focus: none;
  }
  .line {
    fill: none;
    stroke: black;
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }
  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .opened .line2 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
</style>
```
Responsive Wrapper Button Component and thoughts on Angular vs React.
Published: 2021-03-05 08:16:53

I am relatively new to React, but I found that extending react components are straightforward and amazingly neat and powerful.

Today I made a responsive wrapper button component with hardly any code or logic. It will show a full button on big screens and only show an icon button on a small screen. It accepts all material-ui Button component's props make its usage the same as a material-ui button.

Here is the code:

{% gist https://gist.github.com/rexebin/9d3cbeeb128fccd24971af786f36dc4f %}

This example shows how we can wrap two similar components into one and cherry-pick props for each of them. This could be controversial to some, i.e. compose these two buttons each time is not too hard and that this over complicates things. I agree. However, I like to narrow down specific requirements and wrap them into a component to get a unified interface without copying things around. More importantly, when new requirements raise, I do not have to hunt templates and update them all over the places. I only have one place to update.

I have been developing with Angular for the last few years and loved it. Learning React turns out to be unexpectedly easy. I found my self enjoying using React and love it even more. My Angular experiences definitely helped. On top of my head, there are a few things I like about React:

1. Having templates in TypeScript is *wild* and make the whole experience so much better than Angular's way. Stuff like `ngIf`, `ngFor`, `ngTemplateOutlet` , `ngContent` etc., are not wanted.

1. Angular comes with style encapsulation. React doesn't. However, with stuff like emotion and styled-components, React doesn't need one. It turns out I like css in TypeScript a lot better than separate scss. I could use TypeScript variables in my css. How cool!

1. Tools like react-query make managing cache so easy. I am yet to find one equivalent lib for Angular.

Happy coding…
Use material-ui/pickers with React Hook Form.
Published: 2021-03-05 08:12:10

React Hook Form(RHF) has a `Controller` wrapper to help work with external controlled components like `material-ui` components. So far, I managed to use `Controller` wrapper element or `useController` hook to develop my forms without issues until `material-ui/pickers`. When I wrap `KeyboardDatePicker`, all functions work with one annoying warning:
> Warning: A component is changing an uncontrolled input to be controlled

Inspired by the comment [here](https://medium.com/r/?url=https%3A%2F%2Fgithub.com%2Freact-hook-form%2Freact-hook-form%2Fissues%2F438%23issuecomment-565381414), I figured out how to remove the above warning.

The idea is to manage a separate state for the date picker and manually wire it up RHF with `useEffect`.

1. Setup a state and wire it up to `value` and `onChange` props.
{% gist https://gist.github.com/rexebin/8d8ae1fa31ce6a7cb6a4f380e4dbd96a %}
1. Call RHF's `setValue` to `onChange` prop so that RHF knows about the picker's value changes. It is important to use the 3rd argument to enable validation and `isDirty` state update. `fieldName` is a string representation of the property name the date picker is to hook up in our RHF schema.
{% gist https://gist.github.com/rexebin/3a9364f18151e89ed7c5a3edaa7a1588 %}
1. Hook up the date picker with RHF by registering the field with `useEffect`. By now, the date picker would update RHF's model, and we can edit/save the date. However, when data arrives from the remote server and RHF form values are updated in our data initialisation process, the date picker is not updated. We deal with it next step.
{% gist https://gist.github.com/rexebin/d9cf74e7c8718d85837b8be0b6234c31 %}
1. To update the date picker when data initialisation happens, we need to watch the value changes coming from the RHF model and update the date picker. RHF's `watch` is the perfect tool for this job. Note, the value coming from the remote could be undefined. We default it to null here.
{% gist https://gist.github.com/rexebin/0c1cdbf820cae0d9a03e122a20e0bc69 %}
You may have noticed that in the above code, we have `setDate` called in two places. Since the `useEffect` will watch the value changes and update the state with `setDate`, we can safely delete `setDate` in our onChange prop.

Final code:

{% gist https://gist.github.com/rexebin/3ea6eadfca3a1ccc5a9531ac8fb5986c %}

Happy coding…

Update: 07/03/2021

For validation and general usage of the above date-picker, see below my own use case with Yup:
{% gist https://gist.github.com/rexebin/b8ecfdaf5dd1b149f5ebbf4127410775 %}
HTML Detail Summary element
Tags: html
Published: 2021-03-05 08:05:14

Today we will be looking at a native HTML element that can be used to create expandable elements.

It's the detail-summary combination, and the result will look like this.

{% codepen https://codepen.io/rebelchris/pen/abBYLrr %}

## HTML Detail summary

To add this functionality, we can enter a `details` element inside it will have a `summary` which will act as the title, and below that, a `p` that will be the collapsable content.

It will look like this:

```html
<details>
  <summary>How old is Dragonball Z?</summary>
  <p>
    Dragon Ball Z is adapted from the final 324 chapters of the manga series which were
    published in Weekly Shōnen Jump from 1988 to 1995. It premiered in Japan on Fuji
    Television on April 26, 1989
  </p>
</details>
```

You can have multiple details on one page, and they are even styleable!

```css
details {
  width: 200px;
  margin-bottom: 1rem;
  border: 1px solid #efefef;
  padding: 0.5rem;
}
summary {
  color: #333;
  font-weight: bold;
}
```

And that's it we created a cool accordion-like element, with no JavaScript involved!

## Browser support

The cool part about the detail and summary combi is that it has pretty good support!
It's just IE not playing along.

![HTML detail summary browser support](https://caniuse.bitsofco.de/image/details.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Learn Forescout Admin Training | Forescout Admin Course | HKR Trainings
Tags: elearning, onlinecourse
Published: 2021-03-05 07:57:54

Description:
At HKR [url=https://hkrtrainings.com/forescout-admin-training]Forescout admin training[/url], we accept a prepared client as a basic segment  of an effective arrangement. Our educators are exceptionally gifted experts who bring an abundance of pragmatic experience to the study hall. They are individuals from our Proficient Services office and are specialists at planning and actualizing ForeScout CounterACT arrangements.

About HKR Trainings: 
HKR Trainings excel at providing you the best online classes with high quality facilities at a low price without any compromise on quality. What can you expect from us? A dedicated learning platform with 24*7 support, best in class training materials to help you learn advanced techniques and practical knowledge of all IT Technologies.
Our courses are specifically curated for both professionals as well as job-seekers. Online classes conducted by the best knowledgeable and certified trainers helps you earn certification at your convenience.
Forescout Admin Course Content:
ForeScout Certified Administrator preparing is a four-day course highlighting guidance and remembers hands-for labs in a reproduced IT climate. Understudies figure out how to build up security strategies utilizing the entirety of our accessible devices. Understudies will arrange and control resources in an organization climate and see how Neutralize screens and ensure an endeavor organization. The FSCA course educational program incorporates the accompanying:
 1) Introduction
 2) CounterACT Installation
 3) Console Overview
 4) Terms and Architecture
 5) CounterACT Deployment
 6) CounterACT Configuration
 7) Policy Overview
 8) CounterACT Host Management, etc
COURSE FEATURES:
 * 30 Hrs of instructor led training
 * Customized Learning
 * Enterprise-grade Learning Management System (LMS)
 * Certification pass guaranteed
 * Trainers 24*7 Support
 * Flexible Payments
Contact Info:
6-3-852/2/B/6, PlotNo-8,Ground Floor Aparajitha, near Lal Bungalow, Alwyn Housing Colony, Hyderabad, Telangana 500016
India : +91-9711699759
info@hkrtrainings.com
40640 High Street Fremont, Illinois, Chicago.
USA : +1 (872) 231 0447
Website : https://hkrtrainings.com/forescout-admin-training
Siri suggestion without my application
Published: 2021-03-05 07:54:03

Hello everyone,

I'm going to implement an iOS message application.
I would like to make my recent conversion shown when I share the photos or anything else.

Just like the red frame of screenshot what I attached.
I tried to add a share extension and intent extension.

But still nothing shown in the suggestion list.

Can anybody give me a hint to resolve it?

Thank you very much.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71dp0vawlxa9l66uar0a.png)
Typescript - Tips & Tricks - Index Signature
Tags: typescript, webdev
Published: 2021-03-05 07:16:45

Welcome back guys, today I'll speak about the _"Index Signature"_.
In some cases, we need to create some special types like dictionaries.
These special types have some keys that identifies the elements and the datas.
A simple example:
```ts
export type User = {
    name: string,
    email: string;
    session: string
}

export type UserDictionary = {
    [username: string]: User
}

const userDictionary: UserDictionary = {
  'myusername': { email: "myemail@email.it", name: "myname", session: "session" },
  'myusername1': {
    email: "myemail1@email.it",
    name: "myname1",
    session: "session",
  },
};

console.log(userDictionary.myusername); // { email: 'myemail@email.it', name: 'myname', session: 'session' }
console.log(userDictionary["myusername"]); // { email: 'myemail@email.it', name: 'myname', session: 'session' }
console.log(userDictionary.myusername1); // { email: 'myemail1@email.it', name: 'myname1', session: 'session' }
console.log(userDictionary["myusername1"]); // { email: 'myemail1@email.it', name: 'myname1', session: 'session' }
delete userDictionary.myusername;

```
In this case, the _UserDictionary_ is a special type where the usernames are the keys of the objects and the user data are the values.
This type is powerful because it permits the consumer to access directly to the data if it knows the keys and it permits to store a unique value of a specific key.
With the index signature, we can create special types where the keys can be string or number.
An important thing that you must remember is that the keys of these objects can be iterated with the for-in loop or with the Object.keys method.
```ts
console.log(Object.keys(userDictionary)); // [ 'myusername', 'myusername1' ]
for (const key in userDictionary) {
  console.log(key);
}
/*
'myusername'
'myusername1'
*/
```

It's all from the _Index Signature_ for today.
Bye-bye guys!
Generate Editable React Form from PDF Form
Tags: react, javascript
Published: 2021-03-05 06:38:37

Hi there,
I'm using reactjs on frontend & nodejs on backend,

My main purpose is: I have a form in PDF format and want to convert it into html form and then add state for the input fields then handle those state with events too. I want to automate all this thing.

I know achieving this may be impossible or would probably takes lots of efforts.

If I can automate any small step or anything in this whole process that will also be helpful.

So I'm seeking for any library, package, any reference website, how do I achieve this or anything, that would be helpful for me.

Thanks
My Hacktoberfest 2020
Tags: coding, hacktoberfest, opensource
Published: 2021-03-05 05:41:43

Hi, this is my first ever dev blog. I was thinking about writing a dev blog. A couple of days ago I received my Hacktoberfest 2020 swags and my thoughts were changed to writing about my Hacktoberfest 2020 experience even four months after the 2020 Hacktoberfest. 
I have participated in hacktoberfest in order to receive the free swags but later I realized that to receive the swags I need to submit four valid pull request. I have heard about the term pull request but I have never submitted one. I have then started reading blogs about submitting a pull request on Github. Understanding how to submit a pull request was easy more challenging was selecting the right repository to contribute. Finally, I choose the repo awsome-resources by Shahed Nasser (https://github.com/shahednasser/awesome-resources). This repo is all about a collection of technical resources. I have submitted almost 6 valid pull request and wrote myself a technical blog and added to the repo. This took a while and I have to give much of my effort and time.
From the Hacktoberfest I learned that the swags are a token of appreciation for the effort taken by everyone during the entire program. All the beginners reading this post never participate in any program only to receive swags and a certificate. Give your effort and hard work this can bring you never-ending happiness and motivation to do more in your life. This is what I learned form Hacktoberfest 2020.
Thanks for reading
All suggestions and supports are welcome.
JSNews for JavaScript Developers
Tags: javascript
Published: 2021-03-05 05:37:52

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

This is nice app for all JavaScript developers they can use to keep updated with latest JavaScript stuff from difference sources in one application.

[View JSNews on Android PlayStore](https://play.google.com/store/apps/details?id=io.codeinphp.jsnews)