teleren/devto huggingface dataset:
A Colorful Logger for the Browser
Tags: showdev, javascript, frontend, webdev
Published: 2019-09-24 15:23:00

Introducing a colorful logger built for easing front-end development — [logt](https://www.npmjs.com/package/logt)

<p align="center">
  <img src="https://i.imgur.com/efMwTMd.png" />
</p>

## Features
- **Small library size** - Only ~1.3KB gzipped!
- **Colorful labels** to help distinguish logs by importance.
- **Log levels** to hide less important log messages.
- **Show hidden messages programmatically** to print logs hidden due log level.
- **Built with TypeScript** for detailed type info and that sweet sweet autocomplete.
<p align="center">
  <img src="https://media.giphy.com/media/ckNv6K3sRo8dWOUtH7/giphy.gif" />
</p>

## Installation

```
$ npm i logt -S
```

## Usage

You can use this logger for your frontend projects. You can choose as an ES6 module or directly include the script in HTML.

#### As an ES6 module

```typescript
import LogT from "logt";

const LOG_TAG = "sample tag";
const logger = new LogT("error");

logger.error(LOG_TAG, new Error("example error"));
```

#### Include in HTML

```javascript
<script src="https://cdn.jsdelivr.net/gh/sidhantpanda/logt/dist/logt.min.js"></script>
<script>
var LOG_TAG = 'sample tag';
var logger = createLogger('error');

logger.error(LOG_TAG, new Error('example error'));
</script>
```


## Peek into hidden logs

This feature allows to quickly see hidden logs in the developer tools without having to make code changes. The logger stores all hidden messages locally.

```typescript
const logger = new LogT(0); // Only error logs will printed to console
logger.warn('TAG', 'warning message'); // Will not print anything to console
logger.info('TAG', 'info message'); // Will not print anything to console
logger.debug('TAG', 'debug message'); // Will not print anything to console
logger.silly('TAG', 'silly message'); // Will not print anything to console

logger.showHidden(1); // Will print the warning message
logger.showHidden(2); // Will print the info warning message
logger.showHidden(5); // Will print the debug as well as silly message
```

Check out the project on [Github](https://github.com/sidhantpanda/logt) for more details documentation!
What is your preferred keyboard for programming?
Tags: devdiscuss, discuss
Published: 2019-09-24 15:14:51

---
title: What is your preferred keyboard for programming?
published: true
description: What is your preferred keyboard for programming? 
tags: #devdiscuss #discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/54x8yw5u2gmpw2jxm4f7.jpg
---

I've been using a cheap mechanical (gaming) keyboard for more than 2 years now. It is just really recent that I use it more for programming and it feels uncomfortable.

I will buy a new one. What do you recommend?
Your First Year In Code: Now Available In Print!
Tags: meta, firstyearincode, books, beginners
Published: 2019-09-24 14:42:37

---
title: Your First Year In Code: Now Available In Print!
published: true
description: 
tags: meta, firstyearincode, books, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7tflkqbabck9owspkl7a.png
---

Two months ago, we published “Your First Year In Code” with longtime DEV member, @isaacdlyman and 15 co-authors. This book is both technical and non-technical, offering practical guidance and advice for early career developers. Those of you with more experience will resonate with many of the stories told, and will receive a refresher on the perspectives and challenges of newer developers.

We initially launched “Your First Year In Code” as an e-book, but we immediately received lots of requests for physical copies, as not everyone enjoys reading via a screen reader. *I’m excited to share that “Your First Year In Code” is now available in print*. Isaac has worked hard to make the book accessible. The digital version is on a pay-what-you-can-model and the physical version is at a reasonable sticker price of $20 USD.  We’re very excited for this format to improve the reading experience for those who prefer a tactile touch. 

![isaac-holding-book](https://thepracticaldev.s3.amazonaws.com/i/9jo3tq10ipedh1b4slyg.jpg)

The best way to purchase “Your First Year In Code” is from an independent bookstore near you. There’s a simple search engine at [IndieBound](https://www.indiebound.org/book/9780578564999) to help you find one. If going indie isn’t an option, you can also buy from the following retailers (please leave a positive review!): 

- [Barnes & Noble](https://www.barnesandnoble.com/w/your-first-year-in-code-isaac-lyman/1133364216)
- [Target](https://www.target.com/p/your-first-year-in-code-paperback/-/A-78278748)
- [Amazon](https://smile.amazon.com/dp/0578564998)

Similar to the digital book, proceeds will be distributed among the deserving co-authors and 10% of all proceeds will go directly to [Girls Who Code](https://girlswhocode.com/). We just bought a copy for everyone on the DEV team, you should do the same!

Happy Coding!
Daily Challenge #75 - Set Alarm
Tags: challenge
Published: 2019-09-24 14:56:48

---
title: Daily Challenge #75 - Set Alarm
published: true
series: Daily Challenge
description: Write a function named setAlarm which receives two parameters
tags: challenge
---

Write a function named setAlarm which receives two parameters. The first parameter, employed, is true whenever you are employed and the second parameter, vacation is true whenever you are on vacation.

The function should return true if you are employed and not on vacation (because these are the circumstances under which you need to set an alarm). It should return false otherwise. 

*Example*:

`setalarm(true, true) -> false`
`setalarm(false, true) -> false`
`setalarm(false, false) -> false`
`setalarm(true, false) -> true`

***
_This challenge comes from Swolebrain at [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
GitHub Actions: powering up your existing repos with build capabilities
Tags: github, testing, opensource, devops
Published: 2019-09-24 14:55:12

In the following article, I'll explore GitHub Actions and you can take advantage of them in your existing GitHub repositories to make builds directly from within GitHub.


https://medium.com/@darktelecom/github-actions-powering-up-your-existing-repos-with-build-capabilities-1636b065b823
.NET Core 3.0 - What’s New and Upcoming
Tags: dotnet, blazor, aspnetcore, wpf
Published: 2019-09-24 14:33:26

.NET Core 3.0 released yesterday — Sep 23rd.

**Announcing .NET Core 3.0**
https://devblogs.microsoft.com/dotnet/announcing-net-core-3-0/

Live virtual Conference on going — https://www.dotnetconf.net/agenda

**Key Points**
* Performance is greatly improved
* C# 8.0 support.
* WPF and WF support in .NET Core 3.0 but will not work in Linux yet.
* More improvements for IoT, Rasberry Pi.
* High-performance JSON APIs
* .NET Core apps now have executables
* Pack your application with all dependencies in single exe and trimming support.
* gRPC support for serverless programming use as an alternative to WCF services.


**ASP.NET Core and Blazor updates in .NET Core 3.0**
https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0/


**Client-Side Blazor to get its stable release by May 2020**

**Entity Framework Core 3.0 and Entity Framework 6.3**
https://devblogs.microsoft.com/dotnet/announcing-ef-core-3-0-and-ef-6-3-general-availability

**Key Points:**
* Restricted client evaluation — A much-needed feature.
* Single SQL statement per LINQ query
* Cosmos DB support
* Nullable reference types.

**What’s new in ASP.NET Core 3.0**
https://docs.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-3.0?view=aspnetcore-3.0

**Key Points:**
* Performance improvement.
* Blazor support
* gRPC — is a popular, high-performance RPC (remote procedure call) framework.
* SignalR improvements — Auto-reconnect support.
* Awaitable for loops, async enumerables.
* Generic Host support
* Improvements in hosting app under reverse proxy.
* Identity server integrated templates.
* Project Templates for Separated frontend (Angular, React) and backend API under the same project.
* Project Templates for microservices.


**What’s new in Xamarin**
https://devblogs.microsoft.com/xamarin/xamarin-dotnet-conf-2019/

**Key Points:**
* XAML Hot Reload for Xamarin.Forms
* Xamarin Hot Restart iOS 13 & Android 10
* iOS 13 & Android 10 Support

**Visual Studio 2019–16.3**
https://devblogs.microsoft.com/visualstudio/dot-net-core-support-in-visual-studio-2019-version-16-3/

**Migration from .NET core 2.2 to 3.0**
https://docs.microsoft.com/en-us/aspnet/core/migration/22-to-30?view=aspnetcore-3.0

**What’s Next?**
**.NET Core 3.1** LTS will release by Nov 2019
**.NET 5** — Nov 2020 goal is to combine all platform under the same roof — .NET 5


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eg4cqoekks04nr0nn6i0.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wkmt2ert4qf8g4akc1wd.png)


Check out my site for more blogs and resource links related to ASP.NET Core — https://sharetechlinks.com
Filter a Dictionary in D
Tags: dlang, tutorial, filter
Published: 2019-09-24 14:06:17

This wasn't so much about filtering the content, but instead having a list of dictionaries and filtering to ones with specific data.

```dlang
auto data = [["key": 5], ["key": 2]];

auto foo = data.filter!(x => x["key"] == 5);
```

Well I showed this with my count example, it is one of the reasons I like D. I just keep with the same tools and there is similarities in how they all work. One of the challenges can be producing the ability to traverse, let me dive into this dictionary filtering. 

```dlang
import std.array;

auto dict = ["one" : 1
           , "two" : 2
           , "three" : 3];

dict.byPair
    .filter!(x => x[0] == "one")
    .assocArray;
```

In this case I'm asking to traverse the dictionary by each key/value pair. After the filtering we build out a new dictionary.

As an aside, while I find consistency in these, I'm also aware D has inconsistency.
Matt’s Tidbits #35 - A strategy for debugging complex unit test failures
Tags: mattstidbits, android, testing, debugging
Published: 2019-09-24 13:57:46

[Last time I shared a quick tip on assertions in Kotlin.](https://medium.com/@matthew.b.groves/matts-tidbits-34-a-quick-tip-on-assertions-in-kotlin-e0fa8dba3ff) This week I want to share a strategy for debugging complex unit test failures.

Sometimes a unit test fails and it’s really obvious why it’s not working — perhaps you forgot to mock something, or you changed a simple method that now returns a different value, etc.

However, sometimes the scope of changes is so large (or the code is so complex) that it can be very difficult to pinpoint exactly what is causing the failure. To solve cases like this, I would like to share the following strategy:
1. First, save your changes and check out the latest version of the code where the test in question passes.
2. Next, use the debugger to step through the test a line at a time, and write down each (important) method call/variable state as you run through the whole test.
3. Now, re-apply your changes and step through the test again, performing the same documentation exercise as in step #2.
4. Now, compare each method call and variable state between the two versions. Look for any differences. Identify and challenge any assumptions you may have made — did you forget to call a method or set a variable, did you introduce unintended behavior when you changed the code, or does the test need to be changed?

Only through careful analysis and a thorough understanding of what the code used to do, what the code should do now, and what the test is actually testing will you be able to solve the problem correctly.

While performing this exercise myself recently, I discovered that I had left out a call to an important method — in this case it was called `checkIfConnected()`. In my (incomplete) understanding of the code, I was confident that the Bluetooth device was already connected (which it was), but unfortunately the `checkIfConnected()` method did more than just check if it was connected — it also initialized a bunch of other parts of the application. Adding that check back in fixed the test failure!

The morals of this story are:
1. Always understand the code before you try to change it.
2. Use any and all tools available to you (including pencil and paper) to help enhance your understanding and double-check your work to see if you missed something.
3. Always **always** *always* question your assumptions.
4. Be careful with how you name methods — if `checkIfConnected()` had been named `initializeConnection()`, I likely would not have removed what I thought was a superfluous statement!

I used pencil and paper to track this down, but I’m curious — does anyone have a software-based solution that they use to analyze and compare code flow? If you do, let me know in the comments below! And, please [follow me on Medium](https://medium.com/@matthew.b.groves) if you’re interested in being notified of future tidbits.

*This tidbit was discovered on September 19, 2019.*
React Native Flawless UI
Tags: reactnative, react, javascript
Published: 2019-09-24 13:44:41

# Introduction

Performance is one of the topic which can change the overall perception of the service you deliver. 
To be honest, we have sometimes a hard time matching our and our customers expectation on that topic. 
This articles is based on what we learned so far during this journey. 
Mistakes that we did, and will not reproduce, or stuff that we learnt and actions that we took in responses.


> Everything you know about React performance will apply in a React Native application


There are some great React Native Apps out-there. Here is how we try to be one of them.

View on web [React Native Flawless UI](https://react-native-flawless-ui.netlify.com/)

View repo on [Github](https://github.com/tuantvk/react-native-flawless-ui)


## Table of Content

### [Navigation](https://react-native-flawless-ui.netlify.com/navigation)
1. [React Navigation](https://react-native-flawless-ui.netlify.com/navigation#react-navigation)
2. [Tab navigation](https://react-native-flawless-ui.netlify.com/navigation#tab-navigation)

### [State Management](https://react-native-flawless-ui.netlify.com/state-management)
1. [Component state](https://react-native-flawless-ui.netlify.com/state-management#component-state)
2. [Context API](https://react-native-flawless-ui.netlify.com/state-management#context-api)
3. [Redux](https://react-native-flawless-ui.netlify.com/state-management#redux)
4. [Mobx](https://react-native-flawless-ui.netlify.com/state-management#mobx)
5. [VSCode warning](https://react-native-flawless-ui.netlify.com/state-management#vscode-warning)

### [Form](https://react-native-flawless-ui.netlify.com/form)
1. [Formik](https://react-native-flawless-ui.netlify.com/form#formik)
2. [Redux Form](https://react-native-flawless-ui.netlify.com/form#redux-form)
3. [Formik Validation](https://react-native-flawless-ui.netlify.com/form#formik-validation)
4. [Form ScrollView](https://react-native-flawless-ui.netlify.com/form#form-scrollview)

### [Custom Component](https://react-native-flawless-ui.netlify.com/custom-component)
1. [UI Component Library](https://react-native-flawless-ui.netlify.com/custom-component#ui-component-library)
2. [Header Use Component Library](https://react-native-flawless-ui.netlify.com/custom-component#header-use-component-library)
3. [Button](https://react-native-flawless-ui.netlify.com/custom-component#button)
4. [Screen Sizes and Resolutions](https://react-native-flawless-ui.netlify.com/custom-component#screen-sizes-and-resolutions)

### Built With

- [React Native](https://facebook.github.io/react-native/)
- [Docz](https://docz.site/)

More:

- [React Native Testing](https://github.com/tuantvk/WtfReactNativeTesting)
- [29 seconds of react](https://github.com/tuantvk/29-seconds-of-react)
- [Javascript interview questions developer](https://github.com/tuantvk/javascript-interview-questions-developer)
Yarn Plug'n'Play and Karma
Tags: yarn, karma, webpack
Published: 2019-09-24 13:19:33

After turning on Plug'n'Play feature on the Yarn, I faced a problem with running our javascript tests. Strictly speaking, Karma couldn't run at all. 

Console was saying:
```
./node_modules/.bin/karma: No such file or directory
```
I quickly realised that I call binary directly by the path, but `node_modules` is empty, so I need to get new path. That wasn't a big problem, just to get a path of an executable: `yarn bin karma`, and for its running simply: `yarn run karma`.

Then I got running Karma, but not tests:

```
ERROR [preprocess]: Can not load "webpack", it is not registered!
ERROR [karma-server]: Server start failed on port 9878: Error: No provider for "framework:jasmine"!
```

Here is a slice of configuration file:
```javascript
// karma.config.js:
{
   ...
   browsers: ['Chrome'],
   frameworks: ['jasmine'],
   preprocessors: {
       './app/javascript/**/*.test.js': ['webpack']
   },
   ...
}
```

After doing some research in the web I didn't find any working solution. So I've opened source code of Karma and its dependency injection library. I've found that Karma loads its plugins on the fly by scanning all available plugins (preprocessors, testing frameworks, browser launchers etc.). (If I were more attentive and [read the documentation](https://karma-runner.github.io/4.0/config/plugins.html) properly there would be no problems.) But Yarn with enabled PnP has different directory structure, so Karma doesn't see any plugins. 

The thing we just need to do is specify plugins strictly in the configuration and add them to your `package.json` as dependencies.
```javascript
// karma.config.js:
{
    ...
    plugins: [
        'karma-jasmine',
        'karma-webpack',
        'karma-chrome-launcher',
    ],
    ...
}
```



&nbsp;



### Conclusion
By enabling Plug'n'Play be more careful with working with relative paths of libraries. And don't forget to specify all your explicit and implicit dependencies in your `package.json`.
How to Audit your site with Lighthouse
Tags: beginners, webdev, html, tutorial
Published: 2019-09-24 13:07:52


Lighthouse is an open-source, automated tool for improving the quality of web pages. ⠀
You can run it against any web page, public or requiring authentication. ⠀
It has audits for performance, accessibility, progressive web apps, and more.

[Image from video and above description from Lighthouse website.](https://developers.google.com/web/tools/lighthouse/)
⠀
To run it in Google Chrome follow the below steps.⠀
1. Open Devtools⠀
2. Click Audit tab⠀
3. Click Run audits


⠀
It has some great tips and resources for how to improve your site.⠀
⠀
However one thing to keep in mind is that getting a good score on the audit doesn't mean you have the perfect site, for example it doesn't rate the quality of your design, content, usability etc, you should find the right balance between meeting your clients needs and making sure it is as fast as possible.

Once again if you are interested in finding out more about this awesome tool I highly recommend heading over to [the lighthouse website.](https://developers.google.com/web/tools/lighthouse/)

And I will aim to do a deeper dive into the functionality at a later date.

{% youtube gZPKTygdPjM %}
Running VSCode On Linux: Hitting My Watcher Limit And What To Do About It
Tags: linux, inotify, vscode
Published: 2019-09-24 12:22:05

---
title: Running VSCode On Linux: Hitting My Watcher Limit And What To Do About It
published: true
tags: linux, inotify, vscode
canonical_url: https://stephencharlesweiss.com/blog/2019-09-26/vscode-linux-watchers/
---

I have been working on a Linux VM more recently, and one particularly annoying thing about it (there are a lot of little quirks that are frustrating) was that VSCode couldn’t monitor for changes because it was out of watchers.

Watchers are part of the `inotify` Linux kernel subsystem<sup>1</sup> that extend the filesystem to notice changes and report on those changes to applications listening for them.<sup>2</sup>

There are, however, a fixed number of watchers, and evidently, my machine’s default (8192) was insufficient to the task.

The fix was relatively straightforward: increase the number of watchers. The `guard/listen` repo has an informative post on the process. Quoting below<sup>3</sup>:

> **The technical details**  
> Listen uses inotify by default on Linux to monitor directories for changes. It’s not uncommon to encounter a system limit on the number of files you can monitor. For example, Ubuntu Lucid’s (64bit) inotify limit is set to 8192.
> 
> You can get your current inotify file watch limit by executing:  
> `$ cat /proc/sys/fs/inotify/max_user_watches`
> 
> When this limit is not enough to monitor all files inside a directory, the limit must be increased for Listen to work properly.
> 
> You can set a new limit temporary with:  
> `$ sudo sysctl fs.inotify.max_user_watches=524288`  
> `$ sudo sysctl -p`
> 
> If you like to make your limit permanent, use:  
> `$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf`  
> `$ sudo sysctl -p`
> 
> You may also need to pay attention to the values of max_queued_events and max_user_instances if Listen keeps on complaining

After making those changes, my VSCode was once again able to track my changes, which in turn, meant that the source control features were actually helpful and I didn’t have to use the terminal to see my diffs.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

* <sup>1</sup> Words, they’re hard and I’m not sure I know exactly what they all mean.
* <sup>2</sup> [inotify - Wikipedia](https://en.wikipedia.org/wiki/Inotify)
* <sup>3</sup> [Increasing the amount of inotify watchers · guard/listen Wiki · GitHub](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details)
NASA Space Apps Challenge 2019 - Are You In?
Tags: nasa, hackathon, api, webdev
Published: 2019-09-24 11:56:31

---
title: NASA Space Apps Challenge 2019 - Are You In?
published: true
description: 
tags: #nasa #hackathon #api #webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dkps94q7p59yj95geham.png
---
The [NASA Space Apps Challenge](https://www.spaceappschallenge.org/) is an international hackathon for developers of all levels, scientists, designers, storytellers, makers, builders, technologists – EVERYONE! – that will take place in cities around the world, where teams will engage with NASA’s free and open data to address real-world problems on Earth and in space.

This year's challenges will cover 5 topics:

Earth's Oceans🌊
Living in Our World🌎
To the Stars ✨
Planets Near and Far 🚀
Our Moon 🌜

Space Apps 2018 included over 18,000 participants at more than 200 events in 75 countries. Let's try to beat those numbers, this year!

The global event will take place on October 18-20, 2019 – local and virtual attendance is encouraged!

Check out the [event's map](https://2019.spaceappschallenge.org/locations/map) and register for the hackathon closest to you! 


PS: If you are in Berlin, Germany, see you at our local [event](https://2019.spaceappschallenge.org/locations/berlin-germany/)!