teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7, bestofdev
Published: 2019-01-28 14:23:37

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi, bestofdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Effective Technology

Transitioning to Docker isn't always the easiest. Alex shares a list of helpful commands, and their use cases. 

{% link https://dev.to/alex_barashkov/20-docker-commands-use-cases-for-developers-2d9g %}

#2. The TLDR

Nicole shares a brief history on color theory and gives us some advice on picking a color or color palette when designing a project. 

{% link https://dev.to/nzonnenberg/basic-color-theory-for-web-developers-15a0 %} 

#3. A real programmer would be like....

Andy reflects on what it means to be a programmer and how job titles aren't a prerequisite to be defined as one. 

{% link https://dev.to/andygeorge/i-am-not-a-real-programmer-1ogo %}

#4. !important

You know you've done it. Emma helps us understand CSS specificity so we _stop_ slapping on `!important` and actually understand why our styles aren't getting applied. 

{% link https://dev.to/emmawedekind/css-specificity-1kca %}

#5. 76%

^^^ that's the amount of web pages loaded with HTTPS. This post walks us through _why_ we should use HTTPS in development, as well as the technical considerations: generating certificates, reverse proxies, etc.

{% link https://dev.to/kmaschta/https-in-development-a-practical-guide-175m %}

#6. Your Discretion

When considering the scope of a project, you may realize that a css framework is unnecessary. Sarthak shares resources to use instead of frameworks (from powerful CSS properties to code snippets) as well as ways to remove unused CSS. 

{% link https://dev.to/teamxenox/do-we-really-need-a-css-framework-4ma6 %} 

#7. Solid Advice

Whether or not you agree with Darragh's view on JWT, it's hard to argue with their main takeaway: be sure you understand why you're using a piece of technology (and its limitations) before you use it! 

{% link https://dev.to/darraghor/be-careful-of-the-jwt-hype-train-3e81 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Help serving assets over HTTP/2 for a Gatsby Netlify hosted site
Tags: help, gatsby, netlify
Published: 2019-01-29 03:50:49

---
title: Help serving assets over HTTP/2 for a Gatsby Netlify hosted site 
published: true
tags: help, gatsby, netlify
cover_image: https://thepracticaldev.s3.amazonaws.com/i/244k7ct9qj9jnvd4otjd.jpg
---

Hi all. I threw out this Tweet into the Twitterverse, but thought it would be wise to ask for help here as well.

{% twitter 1090084616189423616 %}

I have a Gatsby site deployed to Netlify, and some of my assets are being served over HTTP/1.1. I know that Netlify [supports HTTP/2 by default for sites enabled with HTTP2](https://www.netlify.com/blog/2017/07/18/http/2-server-push-on-netlify/).

I know that I need to add entries into my `_headers` file, e.g.

```
/
  Link: </js/example-script.js>; rel=preload; as=script
  Link: </css/example-style.css>; rel=preload; as=style
```

but it would be a pain to update this after every deploy. Is anyone aware of a gatsby plugin that might do this, or how do you go about handling this with your Gatsby site when hosted on Netlify?

I can probably generate the `_headers` file as part of my build process, but my gut tells me someone has already done this 😉

The source code is here if anyone is interested.

{% github https://github.com/nickytonline/iamdeveloper.com %}

Photo by [Lukas Juhas](https://unsplash.com/photos/2JJz3u_R_Ik?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/help?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Skipping tests
Tags: python, testing, beginners
Published: 2019-01-31 06:11:05

Sometimes you might want to skip a particular test while executing others for some reason. Maybe the database guy isn't done setting up and that particular test requires a database connection. Instead of having to wait, you can just write the test and instruct pytest to skip it, giving the appropriate reason so it doesn't look like you just skipped a failing test to keep your test suite green.

There's a couple of ways to do this. The simplest is to use the `@pytest.mark.skip` decorator like so:

```python
import pytest

def test_stuff(): # this test will be executed
    pass

@pytest.mark.skip(reason="just testing if skip works")
def test_other_stuff(): # this one will be skipped
    pass
```

Running your tests should produce the output below:

```shell
collected 2 items
skip.py .s                           [100%]

===================== 1 passed, 1 skipped in 0.05 seconds ===============
```

Notice the little `s`. It shows the test that was skipped. Pytest also tells us that `1 passed, 1 skipped`. If you need a more verbose output, you can use the `-rs` flag `pytest skip.py -rs`:

```shell
collected 2 items
skip.py .s                    [100%]
==================== short test summary info ===============
SKIP [1] skip.py:14: just testing if skip works

=================== 1 passed, 1 skipped in 0.02 seconds ==========
```

The test above was skipped even before it started. This isn't always ideal. You can have more control over how the test is skipped by using the `pytest.skip(reason)` function:

```python
import pytest

def setup_stuff():
    return False

def test_stuff(): # this test will be executed
    pass

def test_other_stuff(): # this one will be skipped if setup_stuff() returns false
    if not setup_stuff():
        pytest.skip("setup failed")
    else:
        pass
```

```shell
collected 2 items
skip.py .s                  [100%]
=================== short test summary info =============================
SKIP [1] skip.py:12: setup failed

==================== 1 passed, 1 skipped in 0.05 seconds =================
```

If you prefer to check that the condition is satisfied before the test starts, then you can use `skipif`:

```python
import pytest

def setup_stuff():
    return False

def test_stuff(): # this test will be executed
    pass

@pytest.mark.skipif(not setup_stuff(), reason="setup failed")
def test_other_stuff(): # this one will be skipped if setup_stuff() returns false
    pass
```

```shell
collected 2 items
skip.py .s                  [100%]
=================== short test summary info =============================
SKIP [1] skip.py:12: setup failed

==================== 1 passed, 1 skipped in 0.05 seconds =================
```

There are many other ways you can customize your tests to skip depending on certain conditions as explained in the [docs](https://docs.pytest.org/en/latest/skipping.html).
Do you know there is a version of VSCode available without MS branding, telemetry or licensing?
Tags: discuss
Published: 2019-01-31 11:51:09

---
title: Do you know there is a version of VSCode available without MS branding, telemetry or licensing?
published: true
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/k6zca948lsmhdnf0cdgo.png
---

## What do you think of [VSCodium]? 

## Have you used it?

## Is the branding, licencing and telemetry a big deal?

I have been using VSCodium for the last week now and I can honestly say apart from the branding I can't find any differences between VSCode and VSCodium

<!-- LINKS -->
[vscodium]: https://github.com/VSCodium/vscodium
let, async, await as variable
Tags: javascript
Published: 2019-02-01 13:41:34

---
title: let, async, await as variable
published: true
description: 
tags: javascript
---

![](https://thepracticaldev.s3.amazonaws.com/i/jrf51xu87wlkpwpn47ac.png)

if i assign `let` some other value, how interpreter still understand its original use.
Create a Simple Dark Mode with CSS Filters
Tags: css, html, frontend
Published: 2019-07-10 06:53:26

---
title: Create a Simple Dark Mode with CSS Filters
published: true
description: 
tags: CSS, HTML, Frontend
---

So there's this thing you probably haven't heard of called "dark mode". Yeah, you're right, they're everywhere. Let me teach you how to grace the interwebs with even more instances of light on dark! 🌓

**Caveat**: This tutorial uses the power of [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter), thus isn't supported by every browser. Per July 10 2019, [94.36% of users support it worldwide] (https://caniuse.com/#search=css%20filter). 

## How does filters work?

The CSS `filter` property lets us add effects with functions such as monochrome, blur, saturate and a few others. Each of these functions take parameters, and because of this, the possibilities are practically endless. [The CSS filter MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) has a few examples and describes them quite well. 

```css
.invert-me {
  filter: invert(100%);
}
```

Another filter function is the ✨`invert()`✨ function. It takes a percentage (or decimal number between 0 and 1). MDN tells us this:

_[The filter function] inverts the samples in the input image. The value of amount defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0._

This sounds perfect for creating a simple dark mode! After all, black inverted is white (and vice versa), right? Sure! Let's try just inverting the entire page and  see how that looks:

{% codepen https://codepen.io/sindre/pen/QXzPdj %}

It looks kind of ok already! Apart from the inverted image, the page looks alright. How could we stop the image from inverting? We might be able to do some magic trick by moving the images out of the container, then position them correctly with absolute positioning, however that sounds terrible for ux, dx and a11y, and possibly more abbreviations, so we need to find another way. We could also invert only parts of the page, let's say every `<p>`, `<hx>`, `<strong>`, `<ul>` and so on, however this might create new problems when trying to invert the background as there might be margins between the elements.

## The solution

But wait! The invert of white is black and the invert of black is white... Could this mean that any color inverted an even number of times is just the same color? Of course that's the case! Let's just invert all images back to their original form when inverting the wrapper!

{% codepen https://codepen.io/sindre/pen/WqJxGZ %}

That seems to work! Now every image will be inverted back. We can also use the class `no-dark-mode` to invert back other elements, such as videos, elements with CSS background images or parts of the page that are already light on dark in color.
Why did I write another React Native boilerplate
Tags: reactnative, boilerplates, typescript, templates
Published: 2019-02-03 17:46:28

---
title: Why did I write another React Native boilerplate
published: true
description: I was not disappointed with what I found, but they just left me wanting for more...
tags: reactnative, boilerplates, typescript, templates
---

*Most of the boilerplate solutions that I found online were either too simple, just a few npm commands put together, or were too heavily loaded and included too many external dependencies / libraries.*

I have written a [detailed article](https://medium.com/@amitm30/why-did-i-decide-to-write-another-react-native-boilerplate-4ead11b7fb93) on it. Please share you views / suggestions:

https://medium.com/@amitm30/why-did-i-decide-to-write-another-react-native-boilerplate-4ead11b7fb93
gRPC and Protocol Buffers as an alternative to JSON REST APIs
Tags: api, distributed
Published: 2019-02-05 12:23:19

---
title: gRPC and Protocol Buffers as an alternative to JSON REST APIs
published: true
description: 
tags: api, distributed
---

gRPC is an open-source remote procedure call framework and Protocol Buffers is a mechanism for serializing structured data. Both were developed by Google and are used in their internal and public APIs. Other big players such as Cisco and Netflix already benefit from this technology for mission critical applications.

In this post, we will learn the core features of gRPC and Protobuf, and compare to JSON REST APIs.

Read more on: https://www.smoothterminal.com/articles/grpc-and-protocol-buffers-as-an-alternative-to-json-rest-apis
Creative Computing: Why kids should learn logical programming
Tags: discuss, learn
Published: 2019-02-07 13:34:28

---
title: Creative Computing: Why kids should learn logical programming
published: true
description: 
tags: #discuss #learn 
---

In the last years, we have entered into an Artificial Intelligence and Automation Age. This future/present image has been the target of discussions and fears, since a lot of working classes will not exist anymore because of the automation of a large number of services. You can check out which jobs are more likely to disappear in [Will Robots Take My Job?](https://willrobotstakemyjob.com/) website. 

However, if jobs will vanish we just have to create more jobs, right? The computers systems will take care of the simplest and repetitive areas, so we just have to move on to more complex and creatives one. Because, for most than the artificial intelligence evolves, it never will take our [humanity for us](https://www.youtube.com/watch?v=ajGgd9Ld-Wc).

But, for that happen we must prepare our children for a future where their creative and social skills will be more required than their skills for repetitive and massive tasks (that's the computer's domain). One way of doing that is to teach our kids logical programming with tools like [Scratch](https://scratch.mit.edu/). That way, the kids are able to solve a problem in many ways, using their logical skills in a ludic and funny exercise. 

This strategy, together with others, can be able to prepare them for a future where these skills will be necessary. If you have another point of view or solution, please make a comment in the space below.
Github credentials for beginners
Tags: git, github, commandline
Published: 2019-02-20 15:25:45


---
title: Github credentials for beginners
published: true
description: A guide using the credential helper of the git command line.
tags: git, Github, command line,
---

![Control Panel](https://images.unsplash.com/photo-1532200547849-1e9352d72b98?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80)
###### Photo by Jp Valery on Unsplash

Today I’m documenting how to enter your GitHub credentials only once for a certain period. This way, you can avoid the tedious operation of entering your username and password every time you push to your GitHub repo. This is especially helpful when you’re working on a remote computer or in the cloud. I do not want to have my password stored in a computer that I don’t own. I value security and by having it cache only for a certain period, gives me a little bit more piece of mind. 

We will use a tool available in the Git CLI, called credential helpers. Git credentials authenticate the connection over non-SSH protocols. It informs Git to remember your username and password. Git ships with some default helpers that can be used to achieve this process, avoiding the tedious typing of your username and password when prompted every time you push to your Github repo. 
* Store – stores your credentials on disk protected only by file permissions.
* Cache – stores your credentials in memory for a certain period. 
* Osxkeychain – if available, will use the OSX Keychain app to fetch the credentials. I believe this is used mostly on Mac.

I will only provide the instruction for cache as this is what I prefer to use. I will try and break down each parameter passed. You can also refer to this [Github Help Doc](https://help.github.com/articles/caching-your-github-password-in-git/) in caching your Github password in Git.

Let’s get to this.

```
$ git config --global credential.helper 'cache --timeout=3600'
# Set the cache to timeout after an hour
```

**$ git config** = is the command used to set Git configuration values on either global or local level.

**--global** = means you want to apply this configuration to the user’s OS. Global configuration values are stored in a hidden file. One advantage of this is you don’t have to set it again when working with another project on your computer.

**credential.helper** = tells Git to remember your username and password every time it talks to Github.

**‘cache –timeout=3600’** = will store your credentials for an hour. 

Well, that is all for now. I will surely be coming back until I memorize this code.
Awesome Developer Streams
Tags: githunt, developers, twitch
Published: 2019-02-08 18:03:35

---
title: Awesome Developer Streams
published: true
description: A cool list of awesome developers streaming. 
tags: #githunt, #developers, #twitch
---

Hey Developers,

I recently found out about Twitch Streaming and what's awesome is I can get to watch a couple of my favorite developers live coding on Twitch. I also found this awesome list made by [@bitandbang](https://github.com/bnb) with a list of awesome streamers you can check out if this is your kinda thing.

{% github bnb/awesome-developer-streams %}

Check it out and you can also send PR for streamers that are not already on the list. 😎😎
Testing For Success vs. Failure
Tags: help
Published: 2019-02-08 19:42:48

---
title: Testing For Success vs. Failure
published: true
tags: help
---

When you build something, and tweak it to satisfy all of the scenarios it can cover, how/when/how much do you test it for failure?

Let's say that I build a monitor to watch the ratio between two specific metrics, and I want it to alert me when that ratio drops below 0.8, rather than 1 (indicating that there is no issue), or 0.9 (indicating that we might have something righting itself, i.e. an autoscaling host being killed off as it's no longer needed).

I've built this monitor and tweaked the thresholds based on historical examples of:
1. Times when we wanted to be alerted, based on what was going on, and what the ratio looked like at that time
2. Times when we expect the ratio to not be 1, but we don't need to alert, as we have scheduled a change during that time period

I've researched this, tested in, even did some new example tests of #1 and #2. Based on everything I've tested thus far, the new monitor I've built satisfies everything and would have alerted on all times when we wanted it to, and would have ignored all of the times we wanted it to ignore the metric ratio. I present the results of my testing, my research, my reasonings, and the monitor, to my manager, who says:

### "You need to come up with an example of where this monitor fails."

# _Is he right?_
Remember, I have:
* tested different metrics, and combinations/ratios, to find the optimal way to monitor these scenarios
* tweaked my thresholds to satisfy when I do and do NOT want the monitor to alert us

Testing for unknown unknowns is always difficult. In this case, I'm being asked to make a monitor that is _completely perfect, and **will not need to be tweaked in the future** even if our infrastructure changes_.

Can/should this be done? How/why/why not?
Around the Web – 20190208
Tags: blog
Published: 2019-02-16 15:30:10

---
title: Around the Web – 20190208
published: true
tags: Blog
canonical_url: https://wipdeveloper.com/around-the-web-20190208/
cover_image: https://wipdeveloper.com/wp-content/uploads/2017/07/WIPDeveloper.com-logo-black-with-white-background.png
series: Around the Web
---

And now for somethings to read (or watch) over the weekend, if you have some spare time that is.

## [205: A Safe Place](https://www.gooddaysirpodcast.com/podcast/2019/2/6/205-a-safe-place)

**Good Day, Sir! Show – Salesforce Podcast**  – / John De Santiago – Feb 6 – In this episode, we discuss the popularity of PHP, Salesforce towner tours, Spotify, Microsoft 365, Satya Nadella’s achievements, Action buttons, Four Roses Bourbon, and IDE’s.

## [Working with Aura and Lightning Web Components: Interoperability and Migration – Salesforce Developers Blog](https://developer.salesforce.com/blogs/2019/02/working-with-aura-and-lightning-web-components-interoperability-and-migration.html)

**Salesforce.com**  – Feb 5, 10:30 AM – In this post, we’ll explore a few considerations and patterns for working with both Aura components and Lightning web components in your Salesforce applications. We’ll look at general usage patterns for combining Aura and Lightning web components…

## [New JavaScript Features That Will Change How You Write Regex](https://www.smashingmagazine.com/2019/02/regexp-features-regular-expressions/)

**Smashing Magazine**  – Feb 8, 1:00 PM – 11 min read Share on Twitter or LinkedIn Upgrade your inbox and get our editors’ picks twice a month. With useful tips for web devs. Sent 2× a month. You can unsubscribe any time — obviously. If you have ever done any sort of…

## [What Hooks Mean for Vue](https://css-tricks.com/what-hooks-mean-for-vue/)

**CSS-Tricks**  – Feb 4, 9:23 AM – Ship custom analytics today with Keen.io. Not to be confused with Lifecycle Hooks, Hooks were introduced in React in v16.7.0-alpha, and a proof of concept was released for Vue a few days after. Even though it was proposed by React, it’s actually an…

## [Debugging LWC Tests in VS Code](https://www.mattgoldspink.co.uk/debugging-lwc-tests-vs-code/)

**Matt Goldspink**  – View all posts by Matt Goldspink – Feb 4, 5:07 AM – Sometimes you have a test that consistently fails and you just can’t figure it out. Most of us are used to being able to debug a component in the browser but how do we do that with Jest tests in LWC? Well fortunately it’s very simple! I’m going to…

## Till Next Week

Want to share something? Let me know by leaving a comment below or emailing [brett@wipdeveloper.com](mailto:brett@wipdeveloper.com)  or following and tell me on [Twitter/BrettMN](https://twitter.com/BrettMN).

Don’t forget to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)** to receive free the [WIPDeveloper.com](https://wipdeveloper.com/) weekly newsletter every Sunday!

The post [Around the Web – 20190208](https://wipdeveloper.com/around-the-web-20190208/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).