teleren/devto huggingface dataset:
February: Forem Twitch Events Roundup 👾
Tags: meta, opensource
Published: 2021-03-08 21:20:20

In February, Nick Taylor and I kicked off another great month of Twitch streams. This is a round up of all the wonderful guests who joined us.

## Pair Programming with Dann Ott
{% youtube iVMPwTETH3Q %}
Dann Ott joined us to work on an open front-end issue. 
{% github https://github.com/forem/forem/issues/12452 %}

This bug occurred in Safari whenever we used the `gap` property on DEV. 

We also talked about when to use CSS Grid, Flex-box and other alternatives. 

### Places to Follow Dan
Personal website: 
https://www.dtott.com/ 
Twitter:
https://twitter.com/danieltott
Virtual Coffee:
https://virtualcoffee.io/
Cleveland React:
https://clereact.dev/

## Introducing Suzanne and Katie
{% youtube f0EBITxbvoU %}
We introduced and talked to our coworkers Katie Davis and Suzanne Aitchison. 
We discussed a11y, JavaScript, developer tooling, working at Forem and more.

### Places to follow Suzanne
Twitter:
https://twitter.com/s_aitchison
DEV:
 https://dev.to/s_aitchison
Up Your A11y:
https://www.upyoura11y.com/ 

## Pair Programming with Jono Yeong
{% youtube WO201vtzWM4 %}
We were joined by Jono Yeong to work on a markdown bug that appears in article titles.
{% github https://github.com/forem/forem/issues/2204 %}

### Places to Follow Jono
Twitter:  
https://twitter.com/JonoYeong
Jonathan Yeong's Blog:
https://www.jonathanyeong.com/
DEV profile:
https://dev.to/jonoyeong
Youtube Channel: 
https://www.youtube.com/channel/UClb6km0HLkGUOEjHlp5WdPA
Newsletter: 
https://newsletter.jonathanyeong.com/ 

## Walkthrough Wednesday with Todd Libby🦞
{% youtube idyqPHD9uGA %}
We were joined by Todd Libby to talk about a11y, web standards, lobster rolls 🦞 and more.

### Place to Follow Todd
Personal Site: 
https://toddl.dev/ 
Twitter: 
https://twitter.com/toddlibby 
Twitch: 
https://twitch.tv/toddlibby
Front End Nerdery Podcast: 
https://anchor.fm/frontendnerdery 
Front End Nerdery Podcast channel: https://www.youtube.com/channel/UCng3HUrp-Dzu92iA_Zbhh3Q 
Newsletter: 
https://buttondown.email/colabottles 
LinkedIn: 
https://linkedin.com/in/todd-libby

Thanks to all our viewers who joined the streams and chatted with us this month! 

Be sure to follow the [ThePracticalDev Twitch](https://www.twitch.tv/thepracticaldev) channel to check out all the great guests we have joining us every Wednesday this month.
Nevertheless, Sigute Coded in 2020/2021!
Tags: wecoded, womenintech
Published: 2021-03-08 20:07:07

When I looked back at the past year, I asked myself, did anything really happen at all? It often felt and still feels like time became meaningless with days blending into each other... And, yet, I did realize that there achievements since last International Women's Day I would like to share! 

---

In April, I gave my first public talk about one of the last projects I worked on at Microsoft. Meetup/conference talks are something I would like to do more of in the future.

{% twitter 1255558306745274368 %}

---

I left Microsoft and joined a healthcare company that summer. I was working as a senior Android engineer for the first time! It was really exciting to finally have this title. 

To get to the senior engineer title, it took me Bachelors in Computing Science, Masters in Advanced Computer Science, 8 years of Android experience, Microsoft in my CV, and an internal referral!

...I often wonder which of these circumstances finally did it.

I am also aware that if it took me all this, it's something that's going to be even harder for many other women in this field who do not share the same privileges as me. My university degrees opened many doors, so did getting experience at a big company. I am an immigrant, but I am also white. I hear many disheartening stories and I hope that the resolutions towards more diverse workplaces that people and companies are making today will make a difference throughout the year.

---

The company I joined was not a match in the end... I did carry out my second job search later in the year and have recently started at my new job. I am happy at my new workplace and hope to stay there for a long time :) 

---

Last year I also participated in a campaign that provides real-world case studies to help inspire girls to pursue a STEM career. I was really happy to be part of this. 

{% twitter 1306872114050408448 %} 

---

For the next year, I am not making any big plans. I am mainly trying to learn as much as I can in my new job, and find a balance in my work and life. If I can share with the community more, and write some blog posts about areas that are important to me, it will make me happy.
Simple way to use multiple radio buttons in React
Tags: react, javascript, webdev, tutorial
Published: 2021-03-08 20:57:53

Many beginners have a problem with using multiple radio buttons because they do not realize that the radio buttons are grouped and only one radio button can be selected in one group.

Today, I'd like to show you how to easily use multiple radio buttons without using groups (without using the name parameter) in React. 😊

__Before we start__, I would highly recommend you to check out __runnable example__ for the solution on our website:
[Simple way to use multiple radio buttons in React](https://dirask.com/posts/1xVY4p)

Final effect:![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv8kmd2ngych056dxhgn.png)

In below example I've created `RadioInput` functional component which renders `label` with a single `input type="radio"` (radio button).

In the `Form` we have four `RadioInput` elements - two for gender and, two for role.

In every group we can select only one radio button at the same time, then `setGender` function sets gender 🧒🧑 and `setRole` function sets role depending on which option we choose.  

Practical example:
```jsx
//Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';

const RadioInput = ({label, value, checked, setter}) => {
	return (
	  <label>
	    <input type="radio" checked={checked == value}
	           onChange={() => setter(value)} />
	    <span>{label}</span>
	  </label>
	);
};
   
const Form = props => {
	const [gender, setGender] = React.useState();
	const [role, setRole] = React.useState();
	const handleSubmit = e => {
		e.preventDefault();
		const data = {gender, role};
		const json = JSON.stringify(data, null, 4);
		console.clear();
		console.log(json);
	};
	return (
	  <form onSubmit={handleSubmit}>
	    <div>
	      <label>Gender:</label>
	      <RadioInput label="Male" value="male" checked={gender} setter={setGender}  />
	      <RadioInput label="Female" value="female" checked={gender} setter={setGender} />
	    </div>
	    <div>
	      <label>Role:</label>
	      <RadioInput label="Admin" value="admin" checked={role} setter={setRole} />
	      <RadioInput label="User" value="user" checked={role} setter={setRole}  />
	    </div>
	    <button type="submit">Submit</button>
	  </form>
	);
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );
```
You can run this example [here](https://dirask.com/posts/1xVY4p)

If you found this solution useful and would like to receive more content like this leave a comment or reaction 💗🦄💾.
Thanks for your time and see you in the upcoming posts! 😊🔜
_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)

You can also join our [facebook group](https://www.facebook.com/groups/125343696143974) where we share  coding tips and tricks with others! 🔥
Nevertheless, Simone still Codes in 2021! (or part 3)
Tags: wecoded, bekind, developerutrecht
Published: 2021-03-08 20:43:27

---
title: Nevertheless, Simone still Codes in 2021! (or part 3)
published: true
tags: shecoded,bekind,developerutrecht
---
✨ As everyone else shares everywhere. I also cannot believe another year has passed so quickly.
It is international woman's day again, and also my birthday tomorrow. 

Before writing this, I read my post from last year. I am in such a different place compared to last year. This I knew already, but reading it back is very fun and strange in a good way. 
In this crazy different year, I decided to quit my job, take the leap and start the same job at a company I thought would suit me better. It's been 3 months and it's the best work decision I have ever made. 

Not sure it is because of the new job, Coronavirus or just me seeing things a bit different because of both. The JS goal I set for myself, I did not make it. But that is okay. I have learned (and am still learning everyday) to be less hard on myself. Studying again really is very intense. I underestimated that for sure. So I decided to be kind to myself, also do what I can and try not to worry and overthink things. Next to the JS I did learn last year, I also learned that thinking about myself is the most important thing. 

Also I did learn a lot on my new job. About the company, Git workflow, composer.. a lot of things I need for work, that are not programming. Also I bought CSS secrets, the real paperback, to read for fun. And I am loving it. Reading about CSS casually whenever and study JS one dedicated evening a week. 

To stay on topic, the only thing I would love to change at work is that I will get another woman developer colleague. You looking for a job in Utrecht, The Netherlands? Let me know! I know this is a long shot. My goal for next year is getting a bigger network of women, making more friends :) 

Happy international women's day to everyone! 
<3 Love from The Netherlands 




✨ PS from the template :) 
My advice for allies to support underrepresented folks who code is... Smile and be kind. Never assume, you can ask anything, if you ask politely and are sincere.
Any colorblind front-end developers?
Tags: codenewbie, discuss, help
Published: 2021-03-08 20:36:34

This may be a silly question... I am still working on breaking into Web Development but a common thread has been coming up. As I work on portfolio projects I share with friends, every time they mention the colors being off. I know I'm colorblind, so does this mean I should focus on backend work? 
Are there folks in this line of work who are also colorblind and give me some guidance? I love working with React and other frameworks but if this would sort of cause problems down the end, I hope to find out sooner rather than later :).
Also due to this is it a bad idea to make a portfolio with mainly black white and grey which seems to be my comfort zone?
Going flippy for React
Tags: react, flatironschool, flippy, flashcard
Published: 2021-03-08 20:30:14

I just completed my final project for Flatiron School (that's a scary and exciting sentence!).  This project used a Ruby/Rails API and React/Redux.  I was really nervous going into this after the bad blood JavaScript and I had, but React was considerably easier for me to work with.

My project required the use of a flash card and after searching, I found react-flippy.  These flippy cards turned out to be just what I needed and were easy to use.  Once you have installed react-flippy, you just import it where you need like this:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxv1c4qmdkd4917bf889.png)

The flip cards themselves are also quite simple to create.  You simply use <Flippy>, <FrontSide> and <BackSide> inside your JSX and place your information right inside.  These are also customizable so you can have them flip horizontally or vertically for a little added adventure!  You also determine if you want them to flip on hover or flip on click.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewn2f1bblh2q3v5j1mp1.png)

Really quite a helpful tool and very easy to use.  I loved how simple and customizable they were.  My project benefitted greatly from react-flippy and I recommend it to anyone in need of a flippy card in the future!

Check out my [project](https://learn-with-me-usa.herokuapp.com/) on Heroku.
Learn more about [react-flippy](https://github.com/sbayd/react-flippy).
useSpriteAnimation() like how Facebook does it using React Hooks
Tags: react, hooks, sprite, webdev
Published: 2021-03-08 19:56:49

When we post animated images to Facebook, it is displayed as Sprite Animation.  We can also try using React Hooks to do it.  

The image may look like this:

![Sprite image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/052in1bj690i0v0pcj91.png)

To do animation, we could write a custom React Hook `useBackgroundShift()`:

```js
function useBackgroundShift(size, xacross, yacross, xymax) {
  const [shift, setShift] = useState({ dx: 0, dy: 0 });

  useEffect(() => {
    let intervalID;

    if (size.width !== null && size.height !== null) {
      intervalID = setInterval(() => {
        setShift(({ dx, dy }) => {
          if (dx + dy * yacross + 1 >= xymax) {
            dx = 0;
            dy = 0;
          } else if (++dx >= xacross) {
            dx = 0;
            if (++dy >= yacross) {
              dy = 0;
            }
          }
          return { dx, dy };
        });
      }, 132);
    }

    return () => intervalID && clearInterval(intervalID);
  }, [size.width, size.height, xacross, yacross, xymax]);

  if (size.width === null || size.height === null) return {};

  return {
    backgroundPosition: `-${(shift.dx * size.width) / xacross}px -${
      (shift.dy * size.height) / yacross
    }px`,
    backgroundRepeat: "no-repeat"
  };
}
```

I also added the ability to animate from frame 1 to frame N, just to see how it works.  It is not yet perfect as I only did it as an experiment.  Some might be hard coded numbers for the moment, but that's the basic idea of a custom React Hooks to do Sprite Animation.  

Demo: https://codesandbox.io/s/beautiful-leaf-o9hew?file=/src/App.js
Congrats to the "Hack the Planet" Contest Winners!
Published: 2021-03-08 19:53:38

---
title: Congrats to the "Hack the Planet" Contest Winners!
published: true
description: Meet the winners from the New Relic x DEV "Hack the Planet" contest!
Tags: hacktheplanet, newrelic, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tige5rdyvwpwklgfiqv9.png
---

I'm so excited to introduce you all to the winners and winning projects of the New Relic x DEV [Hack the Planet](https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d) contest! 

Participants were asked to submit their projects on The Relicans (a new community created and moderated by New Relic, dedicated to software developers and the topics that interest them). Because of this, New Relic has announced the winners on The Relicans today ⭐️ 

### **Head over to this post on [The Relicans](https://www.therelicans.com/therelicans/hack-the-planet-contest-winners-announced-22po) to find out if your project was given a Grand Prize or Runner-Up award. BIG congrats to the winners.**

To _everyone_ who submitted a project for this hackathon, please pat yourselves on the back. You've created an app dedicated to saving the planet and we were able to plant a  bunch of trees in the process. It's efforts like these that help us all see the larger value of software development in the world we live in ❤️
Built a Dashboard Sidebar with Tailwind & Alpine.js
Tags: tailwindcss, javascript, showdev
Published: 2021-03-08 19:45:42

I came across Alpine.js while on my journey of learning Laravel. And it has been a blessing.
In order to learn more about it, I've been building random things. This week, I tried building a dashboard sidebar. The design and functionality are inspired by that of [CoreUI](https://coreui.io/).

Here's how it looks like and works:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzfuu4uczwb22tqad0ue.png)
I wanted the sidebar to be open by default on Desktops. And the rest of the page accessible to the right.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwsrf23zxmsrzd6rfa1c.png)
When closed, I wanted the content to take over the full width of the window.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evawt631ehpjaqdkn6le.png)
For mobile, I wanted to do the opposite. It has to be closed by default.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24xv9t8si2rmp33vq85p.png)
And when toggled open. I wanted it to be fixed. And the content outside it to be partly visible (opacity) but inaccessible. Additionally, clicking outside the sidebar should close it.

Interested in seeing this in action? You can do so here: https://tailpine.netlify.app/sidebar-2.html

And if you'd like to see how this was built you can do so here: https://github.com/zaxwebs/tailwind-alpine/blob/main/sidebar-2.html

Thanks for reading. Signing out.
How to stand out as a dev? Advice from a recruiter with over 350 devs hired
Tags: career, webdev, programming
Published: 2021-03-08 19:34:47

Hey people!

I'm super excited because I can show you today's interview in Developer Habits! We are talking to Olga Shatokha, a recruiter who gave me a chance to become a professional developer when I joined Pipedrive.

Olga's an experienced talent hunter who's worked in big companies like Pipedrive, Printify and now also owns her own recruiting agency.
We talk about Olga's experiences and life as a recruiter but also more developer-oriented topics like how to stand out as a developer, how to improve your portfolio, what kind of questions you should be prepared for during an interview and well...what makes a great developer.

I genuinely believe it's one of my best and most genuine interviews as it contains information helpful for all levels of developers!

Olga's recruitment agency called Bee's Knees:
https://beeskneeshire.com/​

{% youtube rSm_OzQZV2k %}

Timestamps:
00:00​ - Intro
01:00​ - Beginning of the interview
01:25​ - Olga's background
05:00​ - Moving from Ukraine to Estonia and to Pipedrive
06:15​ - How to hire when culture's important?
12:30​ - Differences between interviewing a junior and a senior
15:00​ - How to stand out as a developer?
17:05​ - The importance of side projects
19:00​ - Tips for creating a good CV
21:15​ - The (non)importance of education when applying for a job
23:45​ - How to prepare for an interview?
29:50​ - The RED FLAGS during an interview
35:25​ - Why ask uncomfortable / not that obvious questions?
40:30​ - Olga's career after Pipedrive
44:44​ - Scaling companies - Pipedrive and Printify
48:03​ - Olga's own agency called Bee's Knees
51:00​ - What's the one habit that has made you a better recruiter?


And a shameless promo - if you are interested in coding, growth mindset and are willing to share your experiences, ideas, then please do PM me on Twitter :)!

**DeveloperHabits**
📷 Youtube: [developerHabits](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA)
👉 Twitter: [https://twitter.com/developerHabits](https://twitter.com/developerHabits)
👉 IG: [https://www.instagram.com/developerhabits](https://www.instagram.com/developerhabits)
Let's stop using [a-zA-Z]+
Tags: javascript, regex, a11y, todayilearned
Published: 2021-03-08 19:27:20

If you, like me, regularly (see what I did here?) validate alphanumeric fields using Regex, you probably learned to do it like this:

```javascript
'Till'.match(/[a-zA-Z0-9]+/gu)
```

This is technically correct, of course. And it's what most validation libraries will do when you tell them a field is `alpha` / `alphanumeric` / etc.

However, I have a problem with this approach and a lot (!) of other people do, too. Because I'm from Germany. More specifically, from a town called Lüdenscheid. And Lüdenscheid won't match the regular expression above because of the Umlaut. Same applies for languages like French, Spanish, Czech, just to name a few.

So how can we as developers be more inclusive towards languages other than English? Do we have to include all possible variations of the latin alphabet? That's a common suggestion, but of course, it doesn't scale well.

## Luckily, Unicode has us covered:

```javascript
'Lüdenscheid'.match(/[\p{Letter}\p{Mark}]+/gu)
```

The `\p` flag allows us to pick a so called [*Unicode Character Category*](http://www.regular-expressions.info/unicode.html#category). In Unicode, all characters are sorted into categories that we can use in our regular expression. The `Letter` category includes letters from all kinds of languages, not just A-Z. But it does not include, e.g. `<`, `>`, `+` or `$` which is important for security. The `Mark` category – as [lionelrowe](https://dev.to/lionelrowe) pointed out in the comments (thanks) – contains combining marks. In Unicode, a letter like `ü` can be either one or two combined code points. So depending on how the character is coded, we need the `Mark` category.

### More details on the Mark category

If we omit the `Mark` category and run the following Regex: `'Lüdenscheid'.match(/[\p{Letter}]+/gu)` it will match `Lüdenscheid`, if the `ü` is encoded as a single character. On the other hand, if the `ü` is encoded as a letter-mark-combination (`u +   ̈`), the regex will only match `Lu`, because it will stop at the ` ̈` mark.

### Browser support

[Browser support](https://caniuse.com/mdn-javascript_builtins_regexp_property_escapes) for this feature is good, IE (not Edge) being the only exclusion.

## Bonus

```javascript
// Match only letters
'Lüdenscheid'.match(/[\p{Letter}\p{Mark}]+/gu)

// Match letters and spaces
'Pražští filharmonici'.match(/[\p{Letter}\p{Mark}\s]+/gu)

// Match letters and hyphens
'Île-de-France'.match(/[\p{Letter}\p{Mark}-]+/gu)

// Match letters hyphens and spaces
'Île-de-France'.match(/[\p{Letter}\p{Mark}\s-]+/gu)
```
I'm Ralf and I've asked myself - IWD, why do we actually need the day?
Tags: wecoded
Published: 2021-03-08 19:12:07

<!-- ✨This template is only meant to get your ideas going, so please change/add/remove these prompts as you wish! We also encourage you to create your own title if you’d like! ✨ -->

We are a long way from equality. Not only when it comes to payment, we are probably lagging behind in all areas.
We still have so many steps to take here, it is a hell of a long way to go. Of course, I can now spend a lot of time describing my ideal world, but that probably doesn't help anyone but me.
That one day is a step, not the first but one.
Without us working on the problem step by step, we will not get any further.
We limit ourselves to doing this every day anew. In agriculture we have learned that diversity is the more sustainable concept (not the one with the greatest earning potential for individuals). Why do some still think that in a monocultural, masculine-white working world, blooming landscapes arise? The permanent appraisal, measuring and marking creates stale, musty air.

Of course, 20 words don't make the gap any smaller. It will take more than this one day, this day is the minimum.
Yes we need this day.

<!-- Once your post is published, it will not appear on the /t/shecodedally page until an admin approves it. This is an extra step to ensure there is no abuse on this important tag. -->