teleren/devto huggingface dataset:
Introducing womxnbuild!
Tags: womxnbuild, womenintech, replit, community
Published: 2021-03-01 01:18:19

`console.log('Hello, world!')`

We are womxnbuild - a brand new community for our womxn and bipoc builders. Excited to be here and use this space to become friends and share our ideas and maker products with the community.

Here are our socials:
[repl.it](https://repl.it/@womxnbuild)
[Dev.to](https://dev.to/womxnbuild)
[GitHub](https://github.com/womxnbuild)
[Twitter](https://dev.to/womxnbuild)
[Instagram](https://www.instagram.com/womxnbuild/)
[Website](https://womxnbuild.github.io)

Can't wait to get working with y'all.

~~
fellow womxn builder
(she/her)
Is there a way to make a new enum from an array of `String`s?
Tags: help, csharp, dotnet
Published: 2021-03-01 01:03:45

I know there's a way to convert a `String[]` to a list of `<EnumType>[]`, but that's not what I want.

For ease of creation, I need a way to convert a list of tokens to a <strong><bold><b>new</b></bold></strong> enum.

E.g.
```csharp
String[] strVals = {"MY_FIRST_CONSTANT", "MY_SECOND_CONSTANT"}
Emum ValCollection = /* Way to convert String[] to Enum. */
```

<div alt="Thanks! Cheers!">
##<b><center><b><strong>Thanks!<br/>Cheers!</strong></b></center></b>
</div>
How to Learn Game Hacking
Tags: gamehacking, reverseengineering
Published: 2021-03-01 00:45:17

For most people, game hacking will be the most difficult thing they ever try to learn.  Why?  Not because it's impossible hard, but because it appeals to young people, who do not understand the value of sacrifice, investment, patience or work ethic.

But don't get me wrong, it is difficult.  [Reverse engineering](https://www.apriorit.com/dev-blog/366-software-reverse-engineering-tools) is the core of what you will be doing as a game hacker.  Yes you will be coding, but you can easily copy libraries and code from other people, and many people will already have a background in programming.

But reverse engineering?  I wouldn't say it's very difficult, but it's an acquired taste.  People who love RE will spend 10 hours a day in a debugger or a disassembler going down different rabbit holes without achieving anything, you can do this for days before you find something important.

Most people just can't take it.  But for those that do, game hacking is easily the most fun thing you can do with your reverse engineering hobby.

So how you learn it!?

Well, first you learn how to Cheat Engine, then you learn how to code, then you learn how to reverse then you learn how to combine all these skills to make cheats.  Sounds too easy?  Well, you'll find out it isn't, but the absolute easiest way to learn is with the tutorials provided at [Guided Hacking](https://guidedhacking.com/threads/ghb0-game-hacking-bible-introduction.14450/).  This series of tutorials will build upon each other one step at a time, providing everything you need from beginning to end.  You truly can become an expert with this guide.

### More Game Cheat Articles​

-   [Are Anticheats Effective?](https://dev.to/ghrake/are-anticheats-effective-2jk1)
-   [Enter the World of Game Hacking](https://dev.to/ghrake/enter-the-world-of-game-hacking-5895)
-   [Game Hacking Fundamentals](https://dev.to/ghrake/game-hacking-fundamentals-221f)
-   [How to Learn Game Hacking](https://dev.to/ghrake/how-to-learn-game-hacking-2bka)
-   [Unreal Engine Dumping](https://dev.to/ghrake/unreal-engine-dumpi-42pm)
The 3 Rules of TDD (Plus bonus rule)
Tags: tdd, testing
Published: 2021-03-01 13:45:15

---
title: The 3 Rules of TDD (Plus bonus rule)
published: true
date: 2021-03-01 00:00:00 UTC
tags: tdd, testing
canonical_url: https://jhall.io/archive/2021/03/01/the-3-rules-of-tdd-plus-bonus-rule/
---

“Uncle” Bob Martin authored the [_Three Rules of TDD_](http://butunclebob.com/ArticleS.UncleBob.TheThreeRulesOfTdd), which is enough to get started with TDD:

> 1. You are not allowed to write any production code unless it is to make a failing unit test pass.
> 2. You are not allowed to write any more of a unit test than is sufficient to fail; and compilation failures are failures.
> 3. You are not allowed to write any more production code than is sufficient to pass the one failing unit test.

With these rules in mind, it’s pretty clear that writing all of your tests up front is _not_ TDD.

It’s also worth noting that there’s no rule that you must use TDD for non-production code (although of course you’re free to do so, if you feel it’s a benefit!)

The fourth rule, which Kent Beck includes in his book [_Test Driven Development: By Example_](https://amzn.to/3dV1lFU), and I think it’s worth including, too:

> Refactor.

That is, once you’ve written a test, and code sufficient to make the test pass, look for any reasonable refactoring to do on your code and your tests. Remove duplication. Make it more readable. Improve performance.
How to check if the browser supports picture-in-picture mode using JavaScript?
Tags: javascript
Published: 2021-03-01 00:00:00

---
  title: How to check if the browser supports picture-in-picture mode using JavaScript?
  published: true
  tags: JavaScript
  date: Mon Mar 01 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-browser-supports-picture-in-picture-mode-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-5a3e319ef1517a233b3628794918a9dc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-browser-supports-picture-in-picture-mode-javascript)
  
To check if a browser supports picture-in-picture mode, you can use the `pictureInPictureEnabled` property in the global `document` object in JavaScript.

Picture-in-picture mode is a modern feature in browsers where the user will be able to play a video in an inset window (or a small separate window) even if the user is working on some other programs.

This is how you can check for the availability,

```js
// Check if browser supports picture-in-picture mode
const doesitSupport = document.pictureInPictureEnabled;

console.log(doesitSupport); // true
```

- The property returns a boolean `true` if it supports picture-in-picture mode and `false` if not

- The `pictureInPictureEnabled` is still in a progress state at the time of the writing of this blog. Be sure to check the [`pictureInPictureEnabled` compatibility table in caniuse.com](https://caniuse.com/?search=pictureInPictureEnabled).

See the above code live in [JSBin](https://jsbin.com/javuvegizo/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Better readme in 5 minutes. (Snack Pack #1)
Tags: webdev, writing
Published: 2021-02-28 23:51:26

# Documentation is an easy win


Readmes are often overlooked, abandoned, or forgotten entirely. Don't let a pour readme sour a good project.

A good readme is easy. First off this is just a starting point, there's always room to improve a readme. Here's how I start all my projects.

```
- Project Details 
  - Who is the project for? 
  - What does it do?
- Set up
  - How can I get someone up and running on this project? 
- Tech behind the project.
  - What frameworks/technologies are we using?
- Architecture 
  - How is the folder structure laid out? Just big picture stuff
- Testing / Formatting
  - Do you have formatting or testing and how is it enforced?
- FAQs
  - What's confusing about this project and why?
```


## My template for new Readmes:
https://gist.github.com/BlakeCampbells/58b72751eae87f6891d0fc357298e299


## Additional Resources
https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
https://github.com/RichardLitt/standard-readme



*My snack pack reads are intended for a quick read without any fluff or BS.*

Feedback is always welcome.
Help me get started with Stripe
Tags: startup, swift, ios, productivity
Published: 2021-02-28 23:50:24

Im looking to add the following functionality to my app and was wondering where to start on Stripe (or elsewhere if you have any recommendations!).

A creator goes onto my app, creates an account, adding payment info and setting a price of 5 dollars for users to subscribe to him. Next: 1 of many users, stumbles upon his account, and decides to subscribe. 
So he presses subscribe and fills in payment info or uses apples payment system, to subscribe to this creator (5 dollars per month). Finally at some point (perhaps at the end of the month or beginning) when payment occur I get 30% of the 5 dollars and the creator gets the other 70%. 

So It seems to me that the Express setup is the best for me. But am not sure how to get started. I've made it to here(https://stripe.com/docs/connect). But still don't have a beginning point. Is there a cocoapod to implement, etc?

I've also asked this Q: https://www.reddit.com/r/stripe/comments/lrsp7x/payout_subscriptions_help/
Develop intuitive apps with Microsoft 365 data
Tags: codenewbie, microsoft365, webdev, beginners
Published: 2021-02-28 23:41:51

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5evi16szsu056tmyghn.jpg)
If you have been using any Microsoft 365 products in your day-to-day life, then you are already using Microsoft Graph.
Microsoft Graph is the data and insights that describe the patterns of productivity in an organization, accessed through a 
unified API endpoint. 

>Microsoft Graph powers Microsoft products

There are thousands of datasets that power first party Microsoft products, available to you to extend your applications to:

- Query the structure 
- Get information about the user
- Access files, calendars, Planner plans, etc. within the Team
- Act on behalf of a user
- Access content
- Add relevance and intelligence
..and many more

So did you just want to build an application in the Microsoft365 platform or did you want to leverage all the data that is available to you, so you can build smarter applications that is well informed with what the user does, needs and proactively make decisions to make user's day to day life more productive.
Find out more here on [Microsoft Graph Mailbag series](https://developer.microsoft.com/en-us/graph/blogs/microsoft-graph-mailbag-intro-to-microsoft-graph-and-top-5-api-requests/).
REST API - Modern Rails JSON Serializers - Which Ones To Use? 
Tags: discuss, serialization, rails, help
Published: 2021-02-28 23:40:00

---
title: REST API - Modern Rails JSON Serializers - Which Ones To Use? 
published: true
description: Discussion post about Rails JSON Serializers
tags: discussion, serialization, rails, help
---

Hello, fellow Rails developers and everyone who wants to participate in the discussion. I'm working on a small side project where I want to create a rails API.

I use the TDD approach (at least I try! :sweat_smile:) and code in small iterations. Now after I created the whole model, validations and basic routes, the moment of truth has come...

I need to choose how my API will look like and what gem is the best to use for Serialization. 

After googling and reading some articles, I found that there are a lot of blogs related to [Fast JSON API](https://github.com/Netflix/fast_jsonapi) which is now deprecated and kind of replaced by [JSON:API Serializer](https://github.com/jsonapi-serializer/jsonapi-serializer). These gems are following [JSON:API specification](https://jsonapi.org/) and force our API response to meet this specification standard. 

On the other hand, we have [Active Model Serializers](https://github.com/rails-api/active_model_serializers). This gem is also deprecated but has [another stable version 0.10](https://github.com/rails-api/active_model_serializers/tree/0-10-stable).
I also found [Blueprinter gem](https://github.com/procore/blueprinter). I've never used it before and don't know its limitations.

I'm curious, what are the best practices in building robust REST APIs that are easy to use? Is it better to follow `JSON:API` specification or create something of your own?

For instance, looks like [GitHub](https://docs.github.com/en/rest/reference/orgs) or [Shopify](https://shopify.dev/docs/admin-api/rest/reference/inventory/inventoryitem) responses don't follow `JSON:API` specification.

And if one chooses to create responses not following `JSON:API` standard, which gem would you prefer to use :upside_down_face:?
169. Majority Element
(javscript solution)
Tags: algorithms, javascript
Published: 2021-02-28 23:33:29

###Description:
Given an array nums of size n, return the majority element.

The majority element is the element that appears more than ⌊n / 2⌋ times. You may assume that the majority element always exists in the array.


###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// Use a hashmap to save the count of each element
// Return the first number whose count is equal to the majority
var majorityElement = function(nums) {
    // Define the majority number to reach
    const majority = Math.round(nums.length / 2)
    const map = {}
    for(let i = 0; i<nums.length; i++){
        const cur = nums[i]
        // Increment the count of each number in the hashmap
        map[cur] = (map[cur] || 0) + 1
        // Return the first number whose count is equal to the majority
        if(map[cur]===majority) return cur;
    }
};
```
Day 28: Counting Sort
Tags: 100daysofcode, php
Published: 2021-02-28 23:20:04

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

```php
<?php
$RANGE = 255;
 
function day28($arr)
{
    global $RANGE;
     
    $output = array(strlen($arr));
    $len = strlen($arr);
     
    $count = array_fill(0, $RANGE + 1, 0);

    for($i = 0; $i < $len; ++$i)
        ++$count[ord($arr[$i])];
 
    for ($i = 1; $i <= $RANGE; ++$i)
        $count[$i] += $count[$i - 1];
 
    for ($i = $len-1; $i >= 0 ; $i--)
    {
        $output[$count[ord($arr[$i])] - 1] = $arr[$i];
        --$count[ord($arr[$i])];
    }
 
    for ($i = 0; $i < $len; ++$i)
        $arr[$i] = $output[$i];
return $arr;
}
 
$arrChar = "Cichorium intybus";
$arrNum = "4568834218790654356732177654982678";
 
$arrChar = day28($arrChar);
$arrNum = day28($arrNum);
 
echo "Sorted character array is " . $arrChar;
echo "<br>";
echo "Sorted integer array is " . $arrNum;
 
?>
```
Re-writing then/catch to async/await
Tags: javascript, beginners
Published: 2021-02-28 23:19:48

There are two main ways to handle asynchronous code in JavaScript: 
- then/catch (ES6), and 
- async/await (ES7). 

In this post, I wanted to show to convert a then/catch syntax into an async/await syntax.

In this example, I will be using axios, a JavaScript library that allows making an HTTP request, and an alternative to the `.fetch()` method. Some of the advantages of using axios over the fetch method are that axios performs automatic transforms of JSON data and has better browser support compared to the fetch method. 

### then/catch
```javascript
  useEffect(() => {
    axios
      .get(
        `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`
      )
      .then((response) => {
        const firstTenNews = response.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      })
      .catch((err) => {
        console.log("Error fetching and parsing data", err);
        setLoading(false);
      });
  }, []);
```
### async/await
```javascript
  useEffect(() => {
    async function fetchCurrentNewsData() {
      try {
        const result = await axios.get(
          `https://finnhub.io/api/v1/news?category=general&token=${process.env.REACT_APP_API_KEY}`
        );
        const firstTenNews = result.data.slice(0, 10);
        setCurrentNews(firstTenNews);
        setLoading(false);
      } catch (err) {
        console.log("Error fetching and parsing data", err);
        setLoading(false);
      }
    }
    fetchCurrentNewsData();
  }, []);
```

I hope this helps. Some may argue that the async/await syntax is more readable compared to the then/catch syntax. What are your thoughts? Let me know in the comments below if you have a preferred syntax 👩🏻‍💻
Switch Statements in JavaScript
Tags: javascript, beginners
Published: 2021-02-28 22:49:53

Today I'll be doing a quick tutorial on how to use a switch statement in JavaScript and when it's appropriate to use. I bring this up because I found my self in a situation where I was writing a series of if statements that a switch made for a much better solution. 

#### When to use a switch statement?

Switch statements are perfect for when different outputs may require a different following reaction. For example x + y can have many different outcomes but what if you need a different reaction depending on what the output turns out to be? You could write a series of if statements or you can contain the logic entirely within a switch statement.

#### How to use it:

The switch itself will take in an expression and depending on what case the expression fulfills will be the code block that performs. 

``` JavaScript
switch(expression) {
  case 1:
    // Does something
    break;
  case 2:
    // Does something else
    break;
  default:
    // If none are met this one performs
}
```

That's the basic structure of how it will look. Notice how at the end of each case we break out of the code. If you don't it will keep running through the cases.

Here's a full on example of it in use. It will be a function that takes in a species as a string and return a name of a famous member of said species.

``` JavaScript
const famousMemberOfSpecies = (species) => {
    let famousMember;

    switch(species){
        case "Wookie":
            famousMember = "Chewbacca";
            break;
        case "Twi'lek":
            famousMember = "Hera Syndulla";
            break;
        case "Weequay":
            famousMember = "Hondo Ohnaka";
            break;
        case "Hutt":
            famousMember = "Jabba";
            break;
        default: 
            return "No famous members found";
    }

    return famousMember;
}

console.log(famousMemberOfSpecies("Hutt"));//Should log "Jabba" to the console.

console.log(famousMemberOfSpecies("Nexu"))//Should log "No famous members found" to the console.
```

Notice how I used the default case to handle an output that might not need a response.

You can get much more complicated with these and perform entire code blocks in each case but the point is you can handle different outputs with different responses using this and avoid overusing if/else statements that are more appropriate for more complicated conditional statements. 

Anyways that'll be it for today. Happy Coding!
Vanilla Javascript Fetch Refresher
Tags: javascript, webdev, beginners, react
Published: 2021-02-28 21:18:00

If you've been developing with any of the powerful Javascript frameworks/libraries like React, Vue, and Angular. Then like me, you can get a bit rusty with some pure DOM (Document Object Model) manipulation because these technologies will abstract lots of the heavy lifting. Here's a quick refresher to get you right back into the swing of things by fetching some hilarious programming jokes. 

Let's get going with CodePen for brevity
[Starter CodePen](https://codepen.io/terrythreatt/pen/OJbvvKo)

First, let's make a new API request for jokes

```javascript 
const url = 'https://official-joke-api.appspot.com/jokes/programming/ten'

fetch(url)
  .then(response => response.json())
  .then(jokesObj => console.log(jokesObj)) // this shows an object of our jokes
```

Next, let's create a helper function to see our jokes

```javascript 
fetch(url)
  .then(response => response.json())
  .then(jokesObj => renderJokes(jokesObj))

function renderJokes(jokes) { 
  jokes.forEach(joke => console.log(joke)) 
}
```

Last, let's use our helper function to manipulate the DOM to render our jokes 

```javascript 
function renderJokes(jokes) { 
  const jokesDiv = document.getElementById("jokes")
  jokes.forEach(joke => {
    const li = document.createElement('li')
    li.innerHTML = `
      ${joke.setup}
      </br>
      ${joke.punchline}
    `
    jokesDiv.appendChild(li)
  })
```

Now we should have all ten of our jokes rendering in a list

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

[Final CodePen](https://codepen.io/terrythreatt/pen/RwoMMKp)

Let's chat about Vanilla JS
Hopefully, this was a good and quick refresher on Vanilla Javascript DOM manipulation. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with Vanilla JS.

Happy Coding,
Terry Threatt
Spring boot error messages disabled!
Tags: java, api, springboot
Published: 2021-02-28 22:03:42

So, I went through a lot of hell trying to figure out why the f-word my messages weren't showing. Guess what? Apparently, the are now disabled by default! :expressionless: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnaz2l79pn9zqlvb3475.jpeg)
After spending a few hours wondering why my code wasn't working, I finally stumbled upon the reason. 

Apparently, the default value for server.error.include-message is "never".

So, I went into my code (application.properties) and had to do the following:

```
server.servlet.context-path=/api/v1
server.error.include-message=always
server.error.include-binding-errors=always
```
...
What's that? It's non-standard, you say?
Well, get off my back! It works, doesn't it?

In case someone is having the same issue and like me they're wondering wtf is going on, this should be able to help.
All the Ways to Center a Div
Tags: css, html, webdev
Published: 2021-02-28 21:45:20

---
canonical_url: https://blog.katherinempeterson.com/all-the-ways-to-center-a-div
---
Centering a div is something we need to do all the time as web developers, and yet it still can be a challenge. There are many approaches you can take to accomplish it. Below I'll explore all the ways to center one div inside another. 

All of the examples will be using the following HTML:
```html
<div class="outer-div">
  <div class="inner-div"></div>
</div>
```

Each example has these shared base styles:
```css
.outer-div {
  background-color: red;
  width: 150px;
  height: 150px;
}

.inner-div {
  background-color: blue;
  width: 50px;
  height: 50px;
}

```
![blue div inside red div uncentered](https://dev-to-uploads.s3.amazonaws.com/i/vmcxeye44in0yzssa656.png)

There is a 150x150 red outer div, and a 50x50 blue inner div. The goal is to find all the ways to center the blue div vertically and horizontally inside the red div and get this end result: 
![blue div inside red div centered](https://dev-to-uploads.s3.amazonaws.com/i/6qwypyw6cpn6cnway09c.png)
 
---

## 1. Flexbox 

```css
.outer-div {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

OR

```css
.outer-div {
  display: flex;
  justify-content: center;
}

.inner-div {
  align-self: center;
}
```

---

## 2. Absolute Positioning
```css
.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

``` 

OR

```css
.outer-div {
  position: relative;
}

.inner-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
```

---

## 3. CSS Grid 
```css
.outer-div {
  display: grid;
  place-content: center;
}
```

OR 

```css
.outer-div {
  display: grid;
  align-items: center;
  justify-content: center;
}
```

OR

```css
.outer-div {
  display: grid;
}

.inner-div {
  align-self: center;
  justify-self: center;
}
```

---

Try these out yourself in CodePen!

{% codepen https://codepen.io/katherinecodes/pen/vYygVGw default-tab=css,result %}

---

Did I miss any? Let me know below!