teleren/devto huggingface dataset:
Dice Rolling Program
Published: 2020-07-24 00:39:04

Recently I started playing a game of Dungeons and Dragons with friends, and the first night I noticed I lacked the various sets of dice you need to play.  My wife ordered a few sets, however I realized this was a great chance to put some of my HTML/CSS skills to the test with some JavaScript I recently learned.

On a Saturday morning, I got up early, slammed a few cups of coffee, and got to work.  I wrote out the HTML and basic CSS first, since I'm a visual person and it helps to get a basic design down first.  Then I went to work and created several functions for each type of dice.  Lastly, I created a delete function to clear the board.

What do you think?  Below are a few links:
- Version 1.0 (individual delete function): https://codepen.io/aaronmac/pen/XWXZGYY

- Version 1.1 (universal delete function): https://codepen.io/aaronmac/pen/eYJrKeO?editors=0010

- Github repository for version 1.1: https://github.com/aaronmccollum/game_dice_set

A few updates I want to make soon:
- Using less "ids" and more "classes" in HTML
- Updating functions with ES6 shortcuts
- Using "let" and "const" instead of var

If you have any tips or recommendations, let me know!
useMemo in an application
Tags: react, usememo, webdev
Published: 2020-07-24 00:19:31

There are a few hooks exposed by react that I don't reach for that much (if ever). This probably says more about my preferences and the applications I work on than the utility of the hook, but today I found an itch that `useMemo` scratched perfectly.

I wrote a fairly complex custom hook with Observables upon Observables that served the purpose of firing and organizing multiple network requests. I'm increasingly impressed with RxJS but that's not the purpose of this post.

Here is a simplified version of the custom hook.

```jsx
export default function useGetTodoCountPerContact(contacts) {
  const [contactCounts, setContactCounts] = useState()
  const getSomeItems = () => networkRequestAsObs()...
  const getOtherItems = () => networkRequestAsObs()...
  const getCounts = id => forkJoin(getSomeItems(), getOtherItems())
    .pipe(map(([a, b]) => ({ [id]: a + b }))
  
  useEffect(() => {
    if (contacts) {
      forkJoin(contacts.map(contact => getCounts(contact.id)))
        .subscribe(res => setContactCounts(res))
    }
  ), [contacts] }
  return contactCounts
}
```

I proceed to consume this custom hook and everything is looking good.

```js
const contactsTodos = useGetContactsTodosCount(contacts)
```

Then I realize the data includes the current contact. I need to filter that out because I already have the data for that particular contact. No problem.

```js
const contactsTodos = 
  useGetContactsTodosCount(contacts.filter(c => c.id !== activeContact.id))
```

But now I start to notice something interesting in the network tab.

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

It appears to be an infinite loop!

When the custom hook returns its updated state, my consuming component is re-rendering and then telling the custom hook it has a new filtered list of contacts.

In order to make sure that react doesn't think there is a change in filtered contacts, I moved this filtering into a variable that is set with `useMemo()`

```jsx
const excludeCurrent = 
  useMemo(() => contacts.filter(c => c.id !== activeContact.id), [contacts])
```

Now react is not diffing an array that is calculated on every render but is diffing the contacts from props which does indeed remain the same.
CodeLand Day One Feedback
Tags: codeland
Published: 2020-07-24 00:17:19

---
title: CodeLand Day One Feedback
published: true
description: Please share your feedback with us so that we can continue making CodeLand better and better.
tags: codeland
//cover_image: https://direct_url_to_image.jpg
---

Thank you for joining us for Day 1 of CodeLand:Distributed!

We hope you drew inspiration from the speakers, made meaningful connections with your fellow attendees in the Connect rooms and comment sections, and feel drawn closer to this global community of developers just like you.

## **👉 [Link to feedback form](https://airtable.com/shrgSUqbNRIOu9dZJ) 👈**

Please share your feedback with us so that we can continue making CodeLand even better and better.  As a small bonus, you’ll have the option to **enter for a chance to win a $50 gift card to the [DEV Shop](https://shop.dev.to) when submitting your feedback.**

Thank you again for joining us!
Day 181: Want Something Done
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-24 00:05:28

_liner notes_:
- Professional : Got my blog post submitted! I want to look it over again tomorrow with fresh eyes before I ask for a content review. It's funny the things you catch when I transferred the blog post from one place to another. Also pushed the code for the repo to GitHub. Looked into a bug that was submitted for the Web Component. Actually, it's not really a bug, because I knew about it, but didn't want it to work that way, but I can see how someone could think it's a bug. I have an idea on how I want to get it working the way they want.

- Personal : Finished packing up my room. Only really have the clothes I wear regularly out. Been putting it off, but if you want something done, you just have to get started. While I was clearing out the room, I was listening to tracks for the radio show.

![Aerial view of the islands of Rock Islands, Palau](https://dev-to-uploads.s3.amazonaws.com/i/grdrzy1mpu7pyyvgcf4m.png)

Going to get the recording from last week's radio show submitted for the station to play this week. I'll probably also go through tracks for this week's show. I really need to get the framing ordered for my van. Just need to pull the trigger and order something. I'm tired.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube h17VBazKNlQ %}
IAM, CIAM, and IDaaS - know the difference and terms used for them
Tags: iam, ciam, idaas, identity
Published: 2020-09-03 04:57:14

---
title: IAM, CIAM, and IDaaS - know the difference and terms used for them
published: true
date: 2020-07-24 00:00:00 UTC
tags: IAM,CIAM,IDaaS,Identity
canonical_url: https://www.loginradius.com/engineering/blog/difference-between-iam-ciam-and-idaas/
---

Over time, organizations are using many terminologies for IAM, CIAM, and IDaaS platforms. This article clarifies the use of these terms, key features, and common use cases of IAM, CIAM, and IDaaS platforms.

   
[Read On](https://www.loginradius.com/engineering/blog/difference-between-iam-ciam-and-idaas/)
24th July 2020: IAC Team Status Update
Tags: puppet, modules, mysql
Published: 2020-09-04 18:48:52

---
title: 24th July 2020: IAC Team Status Update
published: true
date: 2020-07-24 00:00:00 UTC
tags: puppet,modules,mysql
canonical_url: https://puppetlabs.github.io/iac/team/status/2020/07/24/status-update.html
---

It’s Friday - time for another status update from the IAC Team!Here’s a short overview of some of the work we and the community have been up to recently:

## Community Contributions

We’ve had plenty of great community contributions this week:

- [fe80](https://github.com/fe80) [added the capability too specify by package provider and source](https://github.com/puppetlabs/puppetlabs-mysql/pull/1314/), to the [MySQL module](https://forge.puppet.com/puppetlabs/mysql).
- [elmobp](https://github.com/elmobp) [fixed a bug in the MySQL module](https://github.com/puppetlabs/puppetlabs-mysql/pull/1315) which was caused by improper handling of non-printable characters being returned by MySQL.

## Preparing for Puppet 7

Given the upcoming release of Puppet 7, the IAC team have begun working with our colleagues on the Puppet Agent team to ensure that the [supported modules](/iac/modules/) and [tools](/iac/tools/) we manage are thoroughly tested with Puppet 7.We hope to begin testing the modules with the nightly builds of Puppet 7 from next week.Special thanks to [mihaibuzgau](https://github.com/mihaibuzgau) and [gimmyxd](https://github.com/gimmyxd) for their help in this effort!

## Re-Engaging with the DSC Builder

As I’m ([michaeltlombardi](https://github.com/michaeltlombardi)) back from my paternity leave and off of CI triage, [sheenaajay](https://github.com/sheenaajay) and I are back at work on the DSC builder, racing to cross the last couple hurdles before we’re happy with the implementation.

More on this - and possibly a full blog post on it - later, but I’ve been wrestling with canonicalizing manifest values so we can get a case insensitive _but case preserving_ behavior from Puppet - which is what PowerShell users expect of DSC whether or not they think about it explicitly!If you’d like to see more on the tangled web that this PR/ticket has turned into, let us know!

Sheena meanwhile has been hard at work fixing bugs and ensuring that our support for class-based DSC resources is up to scratch!She’s working on the broader end-to-end testing which should help significantly boost confidence in the capabilities of this builder.

<!-- Links --><!-- Mentioned People -->
addEventListener "once"
Tags: javascript, codenewbie
Published: 2020-07-23 23:59:31

<p>If you want to add an event callback but have it run only once, you can simply use the <code>once</code> option in the method's options object:</p>

```js
  document.body.addEventListener('click', () => {
    console.log('I run only once! 😇');
  }, { once: true });
```

<p>This prevents the need to otherwise immediately remove the event listener after the callback first fires (which I've been guilty of!):</p>

```js
  document.body.addEventListener('click', cb);

  function cb() {
    console.log('Hi! 👋');
    document.body.removeEventListener('click', cb);
  }
```

<p>The more you know! 🌈</p>

<h3>Links</h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" target="_blank">MDN Article on addEventListener()</a>

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill)!
How to Detect Dark Mode in SwiftUI
Tags: swift, swiftui
Published: 2020-07-23 23:44:29

---
title: How to Detect Dark Mode in SwiftUI
published: true
description: 
tags: #swift #swiftui
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>SwiftUI makes it really simply to detect when dark mode is enabled. We simply have to add a <strong>@Enviroment </strong>variable and use <strong>.colorScheme</strong> property to scan the settings on our device and see if dark mode is enabled.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's take a look at the example below.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        ZStack {
            Color(colorScheme == .light ? .blue : .red)
            Text("Hello, World!")
        }
    }
}</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the code above we are creating the <strong>@Environment</strong> variable to see if our device is in dark mode. Then inside of our body view we are setting the background color to red if its in dark mode or blue if its not in dark mode by using our <strong>colorScheme</strong> variable inside of a <a href="http://swifttom.com/2020/04/01/what-is-a-ternary-operator-in-swift/">ternary operator</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A great use case for this is if you want to support different custom UI's for when the users device is in dark mode.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>🌃 Happy Coding! 🌃</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
The 35,000% improvement, scalability vs performance, and Outlook goes down for millions
Tags: performancematters, performance, monitoring, scalability
Published: 2020-07-23 23:41:30

Hi folks, 

Welcome back to Performance Matters! Lately, at Raygun we have been having more conversations about product-led growth, so this week, I wanted to pose you a question - if you could add one feature to Raygun, what would you add and why? Looking forward to your response 🚀

This week, learn how one dev improved system performance by 35,000%, how performance and scalability work together, and the Outlook crash that impacted millions (if not hundreds of millions)! 

Enjoy! 

Your Curator 

------------------------------

### FEATURED ARTICLES

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

<strong>How I scaled a software system's performance by 35,000%</strong>

Find out how this developer resolved a platform's scaling, stability, and performance issues through caching, jobification, queue separation, and more, all while processing over $20,000,000 per day. 

[Learn how they did it](https://medium.com/swlh/how-i-scaled-a-software-systems-performance-by-35-000-6dacd63732df)

------------------------------

<strong>App performance vs scalability</strong>

Gain valuable insight into the relationship between these two core pillars of software development. 

[Are they mutually exclusive?](https://www.conceptatech.com/blog/application-performance-vs-scalability-are-they-mutually-exclusive)

------------------------------

<strong>What Linters can do for you</strong>

Linters aren't in the way, they're on your side. Find out how to start making them work for you.

[Find out how](https://stackoverflow.blog/2020/07/20/linters-arent-in-your-way-theyre-on-your-side/)

------------------------------

### BUG OF THE WEEK

<strong>Outlook goes down for millions this week</strong>

Microsoft has been keeping fairly quiet about it, but some individuals have done some digging and think they've found the root cause. 

[Find out what happened](https://www.computerworld.com/article/3567096/outlook-went-down-for-four-hours-wednesday-what-happened.html)

------------------------------

### COMMUNITY

<strong>Detect CSP concerns with Raygun</strong>

We know that the protection of your software is critical, which is why we’re excited to introduce new reporting for Content Security Policy (CSP) violations to Crash Reporting 🔎

[Read the full update](https://raygun.com/blog/content-security-policy/?utm_medium=email&utm_source=performance_matters&utm_campaign=csp_violations)

------------------------------

<strong>Improvements to lazy-loading in Chrome</strong>

Addy Osmani runs us through the benefits of the improvements to lazy-loading.

[Learn what they are](https://twitter.com/addyosmani/status/1284020009350701057)


------------------------------

If you think Performance Matters is pretty great, why not [sign up](https://performancematters.dev/) to receive it in your inbox every week? 🙌

------------------------------

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

------------------------------
A quick intro to 'this' in JavaScript
Tags: javascript, webdev, beginners, blog
Published: 2020-07-23 23:32:50

---
title: A quick intro to 'this' in JavaScript
published: true
description: A quick intro into the world of 'this' in JavaScript
tags: javascript, webdev, beginners, blog
cover_image: https://i.ytimg.com/vi/gvicrj31JOM/maxresdefault.jpg
---

Probably one of the most confusing aspects of JavaScript is finding out what 'this' means. In this post, I will try to go over the basics of the 'this' keyword when used in a method, function, and by itself.


# this in a method
A method is a property on an object that is a function. For example:

```js
const greeting = {
  someProp: "🦄", 
  sayHello: function () {
    return "Hello 👋"
  }
}

console.log(greeting.sayHello()) // Hello 👋
```

**sayHello** is our method. Another frequently used method is **console.log()** 


When using the 'this' keyword in a method it will be referencing the object owner. 

```js
var first = "Jane"
var last = "Fonda"

const person = {
  first: "Sally",
  last: "Sweet",
  fullName: function () {
    return this.first + " " + this.last
  }
}

console.log(person.fullName()) // Sally Sweet
```
The object owner, in this case, is **person** so it will be referencing the person object. Even though we have the same variable names out there in the global scope, when using the 'this' keyword in a method it will be referencing properties on the object owner.

# this in a function
If you using the this keyword in a function then it will be referencing the window (if you're in the browser)

```js
var lucky = 13; // note: let and const will not work 

function add (num) {
  return this.lucky + num;
}

console.log(add(10)) // 23 
```
```js
    function sum(a, b) {
      console.log(this === window) // true
      this.favNum = 13 // sets 13 in the global obj
      return this.favNum + a + b
    }

    window.favNum // 13
    console.log(sum(10, 10)) // 33
```




# this alone
If you paste in the following, the 'this' keyword will be referencing the global scope which in this case is the window object in the browser.


```js
console.log(this)
console.log(this === window) // true
```


# Conclusion
There is still a lot more to cover for 'this' and by no means does this post go over all the possibilities. It does try to open up the basics and hopefully this was able to help clarify some things about 'this'

Thank you for reading and if I missed something in this post please comment down below, I'm not an expert so feedback is always appreciated. 


cover image from https://i.ytimg.com/vi/gvicrj31JOM/maxresdefault.jpg
(preview) What Not To Put Up With
Published: 2020-07-23 22:45:51

---
title: (preview) What Not To Put Up With
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I've been putting together thoughts on "what not to put up with" (mostly in your job search, but in some cases on the job), for a while. 

For example, I often post or comment on LinkedIn about not EVER consenting to preemptive reference checks (before the offer stage of the hiring process - as has been the industry standard etiquette for decades - let alone before you've even gotten an interview), because they exponentially increase your references' exposure to calls (and at that, often just as shady lead gen tactics by account managers, disguised as reference checks). You depend on these people, so you need to protect their time whether staffing agencies respect it or not. They should reasonably expect one reference check call (maybe two, absolute max) per job SEARCH, not per job APPLIED TO.

A post on LinkedIn today, about those offering advice for job seekers, reminded me that I need to put together a more comprehensive guide on these thoughts, as such practices are only going to get worse as the pandemic rolls on. This is my way of reminding myself to finally get around to just that.

There will be tales of rockets, and buggy code, and lives saved, and... You'll never look at the staffing industry the same.
Import Github Repos To StackBlitz, CodeSandbox In Seconds
Tags: github, webdev, stackblitz, codesandbox
Published: 2020-07-23 22:27:13

#Import to CodeSandbox
Just append `box` to GitHub repository url. 
For instance, this is a test repository in my GitHub. If I want to open this repo in CodeSandbox, I will have to edit the url as follows
```
https://github.com/chilupa/test-repo
```
to
```
https://githubbox.com/chilupa/test-repo
```
#Import to StackBlitz
Replace the beginning part of the url in your GitHub with the below
```
https://stackblitz.com/github/<user-name>/<repo-name>
```

For instance, this is a test repository in my GitHub. If I want to open this repo in StackBlitz, I will have to edit the url as follows
```
https://github.com/chilupa/test-repo
```
to
```
https://stackblitz.com/github/chilupa/test-repo
```
Press `Enter` and it should import all of your repository code to **StackBlitz**.

Once the import is complete, please note that there could be certain dependency errors (like missing `compiler`) and the code editors would suggest you install them. If you install those, your app should be up and running!

Happy Coding!
What's your go to stack/arch for realtime event/notification ?
Tags: discuss, development
Published: 2020-07-23 22:23:52

---
title: What's your go to stack/arch for realtime event/notification ?
published: true
description: 
tags: #discuss #development
//cover_image: https://direct_url_to_image.jpg
---

Fairly simple question, People who've worked with requirements where real time updates are really necessary. It could be a chat app, event based architecture that needs constant updates or maybe activity based stuff like how Stripe has the whole webhooks.

The general solution I see everywhere is a combination of a message broker and web socket, message broker takes care of handling the event messages on the server and web socket takes care of letting the client app know that it needs to request for updates.

What other solutions do you think should be considered and which you think are better?
Designing Servers for a Scalable Internet [Beginner's Tutorial]
Tags: servers, tutorial, scalability, node
Published: 2020-07-23 22:20:08

Do you want to learn the basics of how servers work, why they're important, and how to build them?

In this video series, you'll be building and scaling a server in NodeJS in under an hour!

By the end of the tutorial, you will:
 - Be able to write a simple client and server in NodeJS
 - Be able to monitor a server for scaling/performance issues
 - Know at least two methods for building servers that scale

When you're done, test your knowledge with this short [Quiz](https://forms.gle/eBomf23bNcf9yUBH9)!

## Part 1 - What is a Server?

{% youtube Bi78GhT_3E0 %}

## Part 2 - Writing Your First Server in NodeJS

{% youtube t0pXjezTGCs %}

## Part 3 - Dealing with Scaling Issues

{% youtube c_LpIp-TAIk %}

## Part 4 - Summary and Self-Assessment 

{% youtube I9Uaxs5Vyb0 %}

Think you're a server pro now? Test your knowledge with this short [Quiz](https://forms.gle/eBomf23bNcf9yUBH9)!
Updates from 77th meeting of TC39
Tags: javascript
Published: 2020-07-23 21:53:33

__To Stage-1:__

* [`await` operations](https://github.com/tc39-transfer/proposal-await.ops) to stage 1.

* [ResizableArrayBuffer and GrowableSharedArrayBuffer](https://github.com/syg/proposal-resizablearraybuffer) to stage 1.

__To Stage-2:__

* [`JSON.parse` source text access](https://tc39.es/proposal-json-parse-with-source/) to stage 2.

* [Record & Tuple](https://tc39.es/proposal-record-tuple/) to stage 2.

* [`.item` on method on all the built-in indexables](https://tabatkins.github.io/proposal-item-method/)  to stage 2.

* [The `FinalizationRegistry.prototype.cleanupSome` method](https://github.com/tc39-transfer/proposal-cleanup-some) to stage 2.

* [JSON Modules](https://github.com/tc39/proposal-import-assertions#json-modules) split out from Import Conditions at stage 2.

__To Stage-3:__

* [`Intl.Segmenter`: Unicode segmentation](https://tc39.es/proposal-intl-segmenter/) to stage 3.


__To Stage-4:__

* [Numeric Separators](https://tc39.es/proposal-numeric-separator/) to stage 4.

* [Logical Assignment](https://tc39.es/proposal-logical-assignment/) to stage 4.

* [WeakRefs](https://tc39.es/proposal-weakrefs/) to stage 4.

* [`Intl.DateTimeFormat` `dateStyle` & `timeStyle`](https://tc39.es/proposal-intl-datetime-style/
) to stage 4.

* [`Intl.ListFormat`](https://tc39.es/proposal-intl-list-format/) to stage 4.

* [`Promise.any` and `AggregateError`](https://tc39.es/proposal-promise-any/) to stage 4.


--
[@gnumanth](https://twitter.com/gnumanth)
Passionate about Smart Connected Communities, open source, and Eco-System building
Published: 2020-07-23 21:04:17

Six(6) interconnected Goals:

Engage and network communities in practice.

Learn activities that invite intentional play and risk.

Interdisciplinary approaches to solving “grand challenges”.

Flexible learning spaces supported by innovative technology.

Transformational and obtainable measures of learning.

Conditions within society and culture which promote possibilities in STEM.