teleren/devto huggingface dataset:
Signs That Your Unit Tests Are Not Helpful
Published: 2019-06-10 16:47:56

---
title: Signs That Your Unit Tests Are Not Helpful
published: true
description: 
tags: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/uhzvkeykp4h2tctrnpo3.jpg
---

Here are two metrics that you can look at with your unit tests:

1. Percentage of test failures that are only a problem with the unit test, not a problem with the code running in a real environment. This often happens when you are mocking interfaces.
2. Percentage of times that a bug fix or otherwise non breaking change requires an update to a unit test.

The goal would be to have both these percentages at 0%. This would indicate that every test failure represents a real issue in your code and that only feature changes require updates to the unit tests.

As these percentages approach 100% the less helpful your unit tests become. However what percentage should act as the cut for when your unit tests are a net positive verse when they are a net negative? We can make two assumptions:

1. Every test failure that reflects a real code issue exactly out weighs every false positive.
2. Every unit test update that comes from a non feature change is out weighed by the benefits of having a unit test that comes from a feature change.

With these two assumptions in place then 50% for each of the metrics is the cut off for when your unit tests become a net negative. These are broad assumptions that might not always be true, but would need determined on a project by project basis based upon the technology that is in place. However it does provide a framework for thinking about the utility of unit testing.

Check out [my blog](https://www.alexlockhart.me/) for more of my musings upon technology and various other topics.
Best way to stay on top of the services you use?
Tags: discuss, pro
Published: 2019-06-10 16:46:44


I'm sure that older projects have this problem. From time to time, some kind of API change/URL drops/IP changes (the list goes on and on) and the service stop working correctly. The clients are angry and I have to be the bad guy. (again)

Are there any good blogs/websites/API or something that I can easier check all the services I use without needing to leave more than 1-2 hours a month?

PS. I tried the mail rough but it takes a lot more time and in some cases, I receive junk emails intended as "updates".

Thank you! :)
How to make a custom Input Range slider using HTML, CSS and JavaScript
Tags: javascript, beginners, input, custom
Published: 2019-06-10 16:43:35

HTML has an input type of range that works awesomely. With just some CSS styling, you are good to go. The natural behavior, however, might not suit what you want. Suppose you need a custom input range for an audio player, or anything at all, where you can design the range, the controller, how do you go about it? Here is how I did mine:


**HTML**
-  Create a div and give it a class name

```
<div class="range">
</div>
```

-  Within the div create another div which will serve as the slider. Give it a class name too

```
<div class="range" id="range">
  <div class="slider" id="slider">
  </div>
</div>
```

**CSS**
-  Give the two divs specific height. In this example, I will use same height for both.

```
.range{
  height: 10px;
  border: 1px solid black;
}
.slider{
  height: 10px;
  width: 80px;
  background-color: red;
}
```

**JavaScript**
-  Target the DOM nodes and attach each of them to variables

```
const rangeDiv = document.querySelector("#range");
const sliderDiv = document.querySelector("#slider");
```

-  I will work with the width percentage. Hence, we will have to create a variable we will name percent.

```
let percent = 0;
```

-  To mock the slider increment, I will use setInterval, which I have assigned to a variable named 'timer'.

```
let timer = setInterval(()=> {
  sliderDiv.style.width = `${percent}%`
  percent += 5
}, 1000);
```

Here, we assigned the width of the styleDiv to 'percent%'. Then, at every second, the percent variable is incremented by 5.

-  Now, what happens when the width gets to 100%? We have to ensure that the timer stops. We do this by clearing the setInterval

```
let timer = setInterval(()=> {
  if(percent === 100){
    clearInterval(timer);
  }
  sliderDiv.style.width = `${percent}%`
  percent += 5
}, 1000);
```

That's it. The custom input range slider is working perfectly. You can check the full codebase below.

{% codepen https://codepen.io/temmietope/pen/ewOYLN %}


I used this method to make the custom input range for my music player. Check my github repository.
https://github.com/temmietope/Music-player
5 "Comparison" based articles you can read this week | Programmers
Tags: articles, reading
Published: 2019-06-10 16:38:03

---
title: 5 "Comparison" based articles you can read this week | Programmers
published: true
description: 5 "Comparison" based articles you can read this week | Programmers
tags: articles, reading
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9iunpx82jb2dqc9mbzu7.png
---

<b>1) PHP Cookies and Sessions | Detailed Explanation | Coding Example</b>

Read Here: <a href="https://fullstackgeek.blogspot.com/2019/06/php-cookies-and-sessions-examples.html">PHP Cookies and Sessions | Detailed Explanation | Coding Example</a>


<b>2) Redis vs MySQL Benchmarks</b>

Read Here: <a href="https://fullstackgeek.blogspot.com/2019/04/redis-vs-mysql-benchmark.html">Redis vs MySQL Benchmarks</a>


<b>3) InnoDB vs MyISAM | Storage Engines | Tabular Differences
</b>

Read Here: <a href="https://fullstackgeek.blogspot.com/2019/05/main-differences-between-innodb-and-myisam.html">InnoDB vs MyISAM | Storage Engines | Tabular Differences
</a>


<b>4) Best PHP Frameworks (2019)</b>

Read Here: <a href="https://fullstackgeek.blogspot.com/2019/05/best-php-frameworks.html">Best PHP Frameworks (2019)</a>


<b>5) Var vs Let in JavaScript</b>

Read Here: <a href="https://fullstackgeek.blogspot.com/2019/02/var-vs-let-javascript.html">Var vs Let in JavaScript</a>


Happy Reading,
Full Stack Geek
What's the best software for collaborating on a slide deck?
Tags: discuss, productivity
Published: 2019-06-10 16:21:20

Every time I've tried to take on tasks like shared conference talks, or even just get help on my own slides I've found we get caught up in the world of passing back different versions of the slides or only being able to collaborate synchronously and having a hard time swapping things without colliding.

Are there any good tools that enable async collaboration without being overly convoluted. Something akin to my git workflow but hopefully with a gentle enough learning curve?

It's either a case where there is a tool I'm missing or I'm just not using my current tools effectively. Either way, I'm reaching out to the community for thoughts!

Thank you.
Have you ever fought back against a task on the basics of ethics?
Tags: discuss, ethics, career
Published: 2019-06-10 16:20:33

---
title: Have you ever fought back against a task on the basics of ethics?
published: true
description: Have you ever fought back against a task on the basics of ethics?
tags: discuss,ethics,career
---

Has there ever been a time where you had to push back against something you were tasked to do because of ethical concerns?
If you had to live with only 5 dev tools, what would they be?
Tags: discuss
Published: 2019-06-10 15:52:33

---
title: If you had to live with only 5 dev tools, what would they be?
published: true
description: As developers, we love our tools. Plus we all know we have way too many, what if there was a restriction.
tags: "discuss"
---

So let's just say that tomorrow you were told you could only have 5 developer tools on your machine(s) to get your 'real work' done, what would they be?

For me, I'm thinking

1. SublimeText
2. Xcode
3. Paw
4. Tower
5. iTerm2

And no cheating and saying something like Docket, SetApp or JetBrains Toolkit :)
Colorful timeline, Survey, Directional hover | Module Monday 42
Tags: showdev, opensource, webdev, javascript
Published: 2019-06-10 15:46:17

---
title: Colorful timeline, Survey, Directional hover | Module Monday 42
published: true
description: Module Monday 42
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1560102733/timeline_uapia9.png
canonical_url: https://guide.anymod.com/module-monday/42.html
---

## Open-source web modules for your next project
Everything below is open source and free to use on any website, web app, or anywhere else. There are hundreds more like these on [Anymod](https://anymod.com).

Click a mod to see it along with its source code.

## Directional hover

Hover effect based on which direction the mouse moves over the thumbnail.

<a class="btn btn-sm" href="https://anymod.com/mod/directionally-aware-3d-hover-effect-llkddd?v=20">View mod</a>

<a href="https://anymod.com/mod/directionally-aware-3d-hover-effect-llkddd?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1560102733/hover-gallery_eag799.gif"/>
</a>

## Colorful timeline

Add events to this responsive colorful timeline.

<a class="btn btn-sm" href="https://anymod.com/mod/colorful-vertical-timeline-dkdrdb?v=20">View mod</a>

<a href="https://anymod.com/mod/colorful-vertical-timeline-dkdrdb?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1560102733/timeline_uapia9.png"/>
</a>

## Survey questionnaire

Build your own survey questions and add to any page.

<a class="btn btn-sm" href="https://anymod.com/mod/multi-stage-form-questionnaire-dkdrrb?v=20">View mod</a>

<a href="https://anymod.com/mod/multi-stage-form-questionnaire-dkdrrb?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1560102733/survey_aig2t2.gif"/>
</a>

## First letter highlight

A simple content block with the first letter of each section highlighted.

<a class="btn btn-sm" href="https://anymod.com/mod/first-letter-highlight-alrarm?v=20">View mod</a>

<a href="https://anymod.com/mod/first-letter-highlight-alrarm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1560102845/first-letter_wtzrr5.png"/>
</a>

## SoundCloud embed

Add a track to any page.

<a class="btn btn-sm" href="https://anymod.com/mod/soundcloud-embed-mokmr">View mod</a>

<a href="https://anymod.com/mod/soundcloud-embed-mokmr">
  <img src="https://res.cloudinary.com/component/image/upload/v1560102732/soundcloud_wsqggb.png"/>
</a>

<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Do you use Github or Gitlab to host your FOSS projects?
Tags: discuss, github, productivity, beginners
Published: 2019-06-10 15:13:39

Whilst Github has been the defacto code hosting facility for most coders, Gitlab has only recently earned some glory after Microsoft announced their infamous acquisition of Github last year.

At that time, a whole lot of projects migrated to Gitlab if I'm not wrong. At the very least, many of them have set up mirroring so that their Github commits are automatically reflected to Gitlab which they are treating as an insurance (in the rare case that Microsoft pulls a Skype or Nokia out of Github!).

As a FOSS enthusiast, what do you use on a regular basis to host your code? Is it Github or Gitlab?
Keeping Browser Tabs in Sync Using localStorage, Angular & Akita
Tags: akita, angular
Published: 2019-06-10 13:50:52

---
title: Keeping Browser Tabs in Sync Using localStorage, Angular & Akita
published: true
description: Keeping browser tabs in sync using localStorage, Angular & Akita
tags: Akita, Angular
---

In this post, we are going to learn how we can keep our application state in sync when a user has multiple tabs open. We are going to make this happen by using the Web Storage API and Akita. Basic knowledge of Akita is needed.


## Create Contacts Page
For our demo, we will create a contacts page, that allows our users to add, edit and remove a contact.

```shell
ng add @datorama/akita
ng g af contacts
```

The above commands add Akita to our project and scaffold the files we need, entity store, entity query, model and service.

Now, let's add Akita's <a href="https://netbasal.gitbook.io/akita/enhancers/persist-state">`persistState`</a>:

```ts
// main.ts
import { persistState } from '@datorama/akita';

persistState({
  key: 'yourKey',
  include: ['contacts']
});

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));
```

<b>From the docs:</b> The `persistState` function gives you the ability to persist some of the app’s state, by saving it to localStorage/sessionStorage or anything that implements the StorageEngine API, and restore it after a refresh.

Now, the only thing we need to do is to listen to the `window.storage` <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event">event</a> which fires when `localStorage` has been modified in the context of another document. When it emits, we filter the `key` we are interested in and call the `snapshotManager.setStoresSnapshot` method with the new value.

```ts
import { untilDestroyed } from 'ngx-take-until-destroyed';
import { fromEvent } from 'rxjs';
import { snapshotManager } from '@datorama/akita';

class AppComponent {
  ngOnInit() {
    fromEvent<StorageEvent>(window, 'storage').pipe(
      filter(event => event.key === 'yourKey')
      untilDestroyed(this)
    ).subscribe(event => {
      snapshotManager.setStoresSnapshot(event.newValue, { skipStorageUpdate: true });
    });
  }
}
``` 
The <a href="https://netbasal.gitbook.io/akita/enhancers/snapshot-manager">`setStoresSnapshot`</a> method takes the application state object which looks like:

```ts
{
  "storeName": state,
  "storeName": state
}
```

and updates each store with the given value. 

Try it. Open your application in two tabs, change the store's value in one of them and see it reflected in the second one. 


The inspiration for the article came from the <a href="https://blog.angularindepth.com/keeping-browser-tabs-in-sync-using-localstorage-ngrx-and-rxjs-87de3bca4e2c">ngrx</a> version of it.
SQ3R
Tags: learning, mindmap
Published: 2019-06-12 13:42:39

---
title: SQ3R
published: true
tags: learning, mindmap
canonical_url: https://vorakl.com/articles/sq3r/
cover_image: https://vorakl.com/files/sq3r/sq3r.png
---

The [SQ3R](https://en.wikipedia.org/wiki/SQ3R) is a [reading comprehension](https://en.wikipedia.org/wiki/Reading_comprehension) method of reading textbook materials is named for its five steps: _Survey_, _Question_, _Read_, _Recite_, and _Review_.It offers an active and fairly efficient approach to getting information stored as a text. A text form is far from the ideal or best source of meaningful data for our minds, but the SQ3R method makes it possible to remember, understand, and integrate new knowledge with what we already know.

![PNG](https://vorakl.com/files/sq3r/sq3r.png)

Other formats: [PDF](https://vorakl.com/files/sq3r/sq3r.pdf), [PNG](https://vorakl.com/files/sq3r/sq3r.png), [TXT](https://vorakl.com/files/sq3r/sq3r.txt)
Is Server-Side Rendering really easy using NextJS?
Tags: discuss, ssr, react, vue
Published: 2019-06-10 14:15:13

---
title: Is Server-Side Rendering really easy using NextJS?
published: true
description: In large scale projects, is really easy to do that?
tags: discuss, ssr, react, vue
---

In large scale, front-end app which I have worked, one of the requirements that must be present in the project was Server-Side Rendering. The core team has decided to go with NextJS, at that moment was the NextJS 6.

Many things started to goes wrong and we faced troubles with Dynamic Routes, state merge, and management.

Have you ever used NextJS to accomplish this requirement or any other lib/framework?

Last, did you have in troubles with SSR rendering not only in React apps but in other apps?
Do you make the same project with two or more frameworks/languages just to practice? 
Tags: discuss, webdev
Published: 2019-06-10 13:59:43

---
title: Do you make the same project with two or more frameworks/languages just to practice? 
published: true
tags: discuss, webdev
---

When I come up with a project idea I always have this same dilemma. I want to use new technologies, but also to continue improving in what I know. Should I make the same project many times with different languages just to practice?
Implement Sign In with Apple using Auth0 Extensibility
Tags: signinwithapple, authentication, identitymanagement
Published: 2019-06-10 13:54:09

---
title: Implement Sign In with Apple using Auth0 Extensibility
published: true
description: Extend Auth0's core functionality to support Sign In with Apple in your application.
tags: #signinwithapple #authentication #identitymanagement
canonical_url: https://auth0.com/blog/implement-sign-in-with-apple-using-auth0-extensibility/
---

Last Thursday, [we took a look at Sign In with Apple](https://auth0.com/blog/what-is-sign-in-with-apple-a-new-identity-provider/), the new identity provider features Apple released at WWDC 2019. In that post, we included simple steps to add support for Sign In with Apple in a Node.js application. 

Today, we're going to show you how you can support Sign in with Apple without adding any special code to your app — thanks to Auth0's Custom Social Connections, Apple is just one of the many identity providers you can leverage when connecting to Auth0.

[Read on 🍎](https://auth0.com/blog/implement-sign-in-with-apple-using-auth0-extensibility/?utm_source=dev&utm_medium=sc&utm_campaign=implement_apple)

![Implement Sign In with Apple using Auth0 Extensibility](https://thepracticaldev.s3.amazonaws.com/i/8c1vuulqzm9rx5mgqmn6.png)
Is there a future for the Atom editor?
Tags: discuss, editors
Published: 2019-06-10 13:44:59

When Atom first came out, it was novel in that it was built on web technologies and therefore pretty flexible and exciting for folks who worked in those technologies. It's called "A hackable text editor for the 21st Century".

But then VSCode came along and took a lot of similar ideas and executed them really well. It took off. Despite the occasional performance drawbacks of these kinds of editors, I was always a believer.

I wrote about my switch from Atom to VSCode about 18 months ago. The post has received almost 150,000 reads so it seems like a lot of people were curious about making the same switch.

{% link https://dev.to/ben/why-i-switched-from-atom-to-visual-studio-code %}

A little competition is rarely enough to sew the demise of a software productivity tool, but Atom was created by GitHub, which has since been acquired by Microsoft, creators of VSCode. I'm just wondering if that would lead to the eventual slide into obscurity of their "other" code editor which is trying to fit the same niche.

I have not followed Atom very closely, so I don't know the answer to this question. I'm curious what is going on from those who still use Atom or have followed any discussions around the project.

And how does this whole saga make you feel? Has Atom been a success?
It works, but you’re gonna look silly doing it
Tags: dailywriting
Published: 2019-06-13 02:07:18

---
title: It works, but you’re gonna look silly doing it
published: true
tags: daily-writing
canonical_url: https://marcusblankenship.com/it-works-but-youre-gonna-look-silly-doing-it/
---

Friday I sent you a fun puzzle to consider. It was an encoded message that began:

`Toothy purse in respond civil force ending theme honey:`

 

Some of you replied with the correct answer:

`To the person responsible for sending the money:`

 

Not sure how to solve it? Iain wrote to me about his technique:

**”They key is to speak it out loud (or imagining it being said) with an American accent.”**

 

Try it now – say the first sentence out loud a few times.

_Listen closely and you may hear yourself saying it, even though you didn’t realize it._

 

**There are many possible lessons in this. Some are:**

Lessons about communicating effectively.

Lessons about necessary things which make us feel silly.

Lessons about what you’re saying, even though you didn’t realize it.

Other lessons which I’ve not realized.

 

**Possibility to reality**

Most of my potential lessons fail to turn into actual lessons.

So I’ve found that asking myself three questions help me capture more of them.

1. How does this remind me of my work life?

2. Can I see an underlying principle here?

3. What small experiment might help me understand it better?

 

**Which lesson would you like to take away from this?**

 

And, if you choose, tell me too. I’d love to hear. ![🙂](https://s.w.org/images/core/emoji/11.2.0/72x72/1f642.png)

Best,  
Marcus

The post [It works, but you’re gonna look silly doing it](https://marcusblankenship.com/it-works-but-youre-gonna-look-silly-doing-it/) appeared first on [Marcus Blankenship](https://marcusblankenship.com).
Elixir is functional Ruby?
Tags: discuss, elixir, ruby, functional
Published: 2019-06-10 13:34:26

---
title: Elixir is functional Ruby?
published: true
description: 
tags: discuss, elixir, Ruby, functional programming, 
---

"Elixir is functional Ruby"

I just started digging into elixir and ecosystem and can't get this description for elixir off my head. So I decided to start a discussion here, so I can get opinions of experienced Ruby developers writing elixir, and also elixir devs.

My reasons

- syntactic similarities
- Elixir like Ruby has a MVC web applications framework phenoix

What do we think about this?
Hey Fellow Devs
Tags: wordpress, kenya, design, review
Published: 2019-06-10 13:05:33

I am new here but this is what we do. A web design agency based in Nairobi, Kenya. We do monthly site evaluations and here is a link to one of the latest. Let's engage. http://digitallegion.co.ke/web-design-inspiration-legionnaire-roundup-006/
The Building an Indie Business Podcast- Book Discussion: Evil by Design by Chris Nodder
Tags: podcast, startup, design
Published: 2019-06-10 13:04:06

---
title: The Building an Indie Business Podcast- Book Discussion: Evil by Design by Chris Nodder
published: true
description: 
tags: podcast, startup, design
---

https://overcast.fm/+RG5jDj1jY

[Episode Page](https://baib-podcast.com)
[Revenue Research](https://revenueresearch.co/)
THAT'S why dev.to is a brilliant platform
Tags: discuss
Published: 2019-06-10 13:00:44

Hey there!

I've only been on dev.to for about 2 weeks now, but I'd like to get rid of it here, why I think this platform is **simply brilliant**!

# 1. It's free
Everyone has the opportunity to share their knowledge with the world for free. Of course, you can also create your own website. But here you have an audience that reads the articles and you address the right target group.

# 2. It's mega easy
The platform is very simple and clearly structured. I am a huge fan of good UIs and this site is a perfect example.

# 3. The community
The community is large and tries to find solutions for the problems of the users together. There is an open ear for everyone. This is not self-evident. Everyone respects everyone. That's great!

# 4. Own blogs
"Advertising" is prohibited on most platforms. But here it is even desirable to share posts you have published on your own blog. The ability to extend your reach is an incredible privilege.!


**THANKS for creating this platform!**

What Do you think? Let's discuss in the comments below! :)