teleren/devto huggingface dataset:
dev to glitch dotfile refs
Tags: devto, glitch, embed
Published: 2020-01-13 16:22:43

using dev.to insert a link to a glitch dot file such as .prettierrc (file=.prettierrc) when i click PREVIEW i get the error

(now logged on github as https://github.com/thepracticaldev/dev.to/issues/5499) 
```
Heads up:

base:  Invalid Options
```
EXAMPLE below without the .

 {% glitch osde8info-transportapi-glitch file=prettierrc %}
Xem trực tiếp bóng đá, xem phim mới online
Tags: xemchuatv, xemphimchua, xemphimonline, tructiepbongda
Published: 2020-01-13 16:21:00

Công việc bề bộn và áp lực căng thẳng từ cuộc sống khiến các bạn mệt mỏi. Nhiều bạn mong muốn đi thật xa để trải nghiệm, có những bạn chỉ muốn thưởng thức một bộ phim hay để thư thái tâm hồn. Nhưng việc phải đi ra ngoài vào những ngày cuối tuần đôi khi lại là một “cực hình” khi phải chen chúc để giành được một tấm vé, và việc giá cả cũng sẽ khiến bạn phải suy ngẫm khi giá vé cuối tuần gần như đắt gấp đôi. Vậy tại sao bạn không đơn giản vùi mình trên chiếc giường thân thuộc, bóc snack và chìm đắm vào thế giới phim ảnh chỉ thông qua màn hình điện thoại hoặc máy tính? Quá đơn giản và tiện lợi mà không cần phải tốn phí hay công sức nào.

Việc lựa chọn phim nào, trang web nào cũng có thể sẽ khiến bạn đau đầu một chút! Nhưng không sao, với danh sách các trang web sau bạn có thể tha hồ đánh dấu và tìm kiếm mọi loại phim, thuộc mọi quốc gia khác nhau, từ hiện đại cho đến cổ trang. Hãy thưởng thức và thư giãn những phút giây của bạn một cách sảng khoái nhất nhé!

Chúng tôi cũng Cap nhat link xem truc tiep bong da hom nay tai XemChua.tv.
----------- Thong tin lien he ------------------
Kenh Xem Chua tv - Suu tam nguon truc tiep bong da moi ngay de phuc vu nhom doc nhai yeu bong da ma ko so huu co hoi duoc xem vi ly do gi do, chung toi la nhom thanh vien hoat dong phi loi nhuan, dung cho niem say me cong trai bong.

Social: https://www.facebook.com/2bongdachamtv/
Dia chi: 79 Lang Ha, Dong Da, HN
Website: https://xemchua.tv 
Email: ad.11met.tv@gmail.com
Reasons why you can get Error 0 during an HTTP Request
Tags: javascript
Published: 2020-01-13 16:15:46

One of the most frustrating things that can happen is you can start getting Unknown errors (Error status 0) on HTTP requests in your PWA/app.

Error 0 is a weird error since effectively what's happened is that the request has failed failed. Not just failed, but failed in a way that the system doesn't know how to handle. This can happen for a number of reasons, but this is my handy checklist for trying to figure things out:

* **CORS isn't set up properly.** (check the browser logs, they will tell you this)
* **Preflight is failing.** Is your server handling this properly? Is it returning an error?
* **The response is corrupt.** Did you leave a debugging statement in there? Did something happen to cause HTML output when the browser is expecting JSON?
* **Did you exceed some sort of throttling?** This can cause a problem, too.
Add background to styled-components while use ".map" method
Tags: react, styledcomponents
Published: 2020-01-13 15:44:31

Hi everyone, it's my first post on DEV!

Two days ago I hit a small problem, but still, that took time to solve it.

I decide to write a little post about it for future me and maybe someone who will meet the same issue. I hope it will be helpful and save some time for someone!

The thing that I should do, was to display different background on a couple of divs while using styled-components and map method. I try to pass the background as property but it didn't work. I think the reason behind that is either me who pass prop incorrectly, or props in the first place wouldn't work in that case? It doesn't matter cause I came up with another solution.

It's inline styles. I dunno how much the performance unfriendly and I sure that a better solution exists, but if you struggle with the same problem and yet don't find a solution, I hope my small code example would help you!


![Code Example](https://thepracticaldev.s3.amazonaws.com/i/xqh1gkzydp39yx9c0ruo.png)

Thanks for attention.

Edit note. You should use camelCase property when to write inline styles like "backgroundSize". I forget that when write example code. Sorry.
Optimise your Web Product performance
Tags: javascript, webdev, performance, tutorial
Published: 2020-01-13 15:43:15

>Today it’s not about ‘get the traffic’ — it’s about ‘get the targeted and relevant traffic

Relevant traffic will come only when your web product is properly targeted and performant.

>Performance is the key to success applies to the web products more than ever before

### Basic Performance Improvements

1. Put css in the head tag
2. Put scripts just before the body closing tags
3. Make your page HTML syntactically correct
4. Make less http calls
5. Avoid 301 Redirections

_These performance steps are very simple and easy to implement_

---

### Some advance Optimisation steps

## Bundling

Bundle your javascript files and css files appropriately to make sure that it keeps a balance between a single file size multiple https call, now a days mostly the trend is to send **Critical CSS** and **Immediately usable component**

## Minification 

Minify your javascript & css files to reduce the file size

## CSS Improvements

* Mark media queries as non blocking to speed up the first render
* Use less CSS overall

## JS Improvements

* Use `async` & `defer` appropriately to avoid render blocking
* Put inline JS if it is considerably small

## Images

* Use scalable images like SVGs
* Use sprites for the icons
* Use webp images with the fallback to jpeg
* Use LazyLoad for the images

## Fonts

* Do not use custom fonts if not required
* Prioritise based on browser support
* Choose only the relevant styles you need
* Keep character sets down to a minimum
* Host fonts locally or prefetch
* Store in LocalStorage with Base64 Encoding

## Caching

* Leverage browser caching as much as possible, as per product requirement
* Add durable cache expiration header in static assets
* Enable component caching at server side
* Enable CDN caching for assets

## Rendering

* Keep first render from the server to deliver fast first page render
* Successive renders could be on client side for good user experience
* For better performance, implement progressive rendering
* Make use of browser intersection observer API to reduce rendering load on browser

## Networking Improvements

* Ensure that number of network round trips are lesser
* Implement `DNS prefetch`, for quick DNS resolution

* Implement GRPC support both at Backend & Frontend for faster request response cycle
* Reduce/Remove network redirection
* Always use Ajax call for interacting with servers for user interaction
* Implement `Brotli` compression
* Make use of fast reverse proxy server for performance tuning of the resources

## Monitoring

* Use Chrome performance analyser `Light House` for verifying impact of improvements
* Use page speed to verify page load time


_The focus of this article is to list down the improvements which can be done, there is always some scope of performance improvement in a web product. Intentionally I have not mentioned the links and code snippets so that readers explore more about the terminologies instead of directly using the snippet._
The Building an Indie Business Podcast- Monetization of Open Podcast
Tags: podcast, startup
Published: 2020-01-13 15:39:03

In this episode I discuss how I will monetize the Open Podcast Community.

[Revenue Research](https://revenueresearch.co/)
[Episode Page](https://baib-podcast.com)
https://overcast.fm/+RG5j3zS1I
Goals for 2020
Published: 2020-01-13 15:36:44

I am not a big fan of New Year Resolutions. However, at the beginning of the year, I set some goals that I would like to accomplish before the end of the year. Call it a ~~resolution/target/~~goal or whatever but I decided these towards the end of 2019. In no particular order, my goals for 2020 are;

* Attend at least 20 meetups
* Publish 15 articles
* Tweet more
* Give a talk
* Mentor Newbies
* Attend a conference
* Run a half marathon

So, there you have it. I hope that by the end of the year, I'd happily look back at this post and say I did it. Also, all milestones achieved will be shared in hopes that someone out there becomes inspired.


What are your goals for 2020?
What is a TypeScript Interface?
Tags: beginners, typescript
Published: 2020-01-13 15:33:29

<h1>TypeScript Interface</h1>

Interfaces in TypeScript create a structure of what the object should contain. Think of how we created variables in the previous post and then stated what type the variable would accept. Interfaces allow us to do this with an object. 

Let us imagine that we have a recreational basketball league and we want teams to register their players. However, we want to ensure that teams register their players with specific information. What we can do is create a basketball player interface and define its structure. 

```typescript

interface BasketballPlayer {
  firstName: string;
  lastName: string;
  jerseyNumber: number;
  position: string;
  currentTeam: string;
}
```

Now that we have created a Basketball player interface, let's see how we can use this. 

```typescript
const registerPlayer = (registerPlayer: BasketballPlayer) => {
  console.log(registerPlayer);
}

let kingJames = {
  firstName: "Lebron",
  lastName: "James",
  jerseyNumber: 23,
  position: "All",
  currentTeam: "Lakers"
}

registerPlayer(kingJames);




# console.log output  { 
    firstName: "Lebron",
    lastName: "James",
    jerseyNumber: 23,
    position: "All",
  }

```

Using the type of BasketballPlayer ensures that the correct information is submitted by all the teams and adds consistency to the application. 

Any attempt to add other properties or omitting them will result in an error when being compiled. 

We can also included properties that are optional. Let's assume that in our recreational league adding a nickname is optional. We could add that by adding ? after the property. 

Here is what our BasketballPlayer type would like like with an optional nickname.

```typescript
interface BasketballPlayer {
  firstName: string;
  lastName: string;
  jerseyNumber: number;
  position: string;
  currentTeam: string;
  nickName?: string;
}
```


Nickname is now optional and allows some flexibility on adding properties that are not imperative. 

In our next blog post, I'll review how we can use Interfaces with Classes.
All About Kali Linux 2019.4 New Version
Tags: kalilinux, cybersecurity, hacking, hackingblogs
Published: 2020-01-13 15:26:18

Kali 2019.4 Version

Its really a great news to hear that the fourth and final release of 2019 i.e; Kali 2019.4, which is available in market to download immediately. Kali 2019.4 includes many of the exiting features and new updates, let us discuss about that updates. 
•	It contains a new default desktop environment.
•	It consists of New GTK3 theme.
•	It also introduced a new feature named “Kali Undercover” mode.
•	A new home for Kali Documentation and is Git powered now.
•	It also has a feature of public packaging which means getting our tools into Kali.
•	The next feature is Kali NetHunter Kex which means that Full Kali Desktop on Android.
•	It also has a feature of BTRFS during setup.
•	It also has the feature of Added PowerShell.
•	Its kernel is upgraded to the version 5.3.9.
•	It also has the feature of normal bugs fixes and updates. 
Now, let us discuss some of the features in detail.

Kali Undercover

As we all know that the environment changes day by day, so they thought they would take a side step and do something for fun to all people. A person named Robert, who leads the penetration testing team of development of Kali, he is suggested about the Kali theme that looks like Windows as a casual view, they have created the Kali Undercover theme.

Let us assume that we are work in a public place, hacking away, and we might not want the distinctive Kali Dragon for everyone to see and wonder what if it is we who are doing. So, they made a little script that will change our Kali theme to look like a default Windows installation. That's the way by which we can work a bit more incognito. If after we are done and in a more private place, run that script again and we will switch back to our Kali theme. Its like a magic for us. If you want to know how to use kali linux then you can read some post on <a href="https://hackingblogs.com">Hacking Blogs</a>
node pug compilefile
Tags: node, pug, javascript, ssr
Published: 2020-01-13 15:20:36

loving node pug more and more everyday you can even turn a PUG template into a JS function and call it to generate more HTML 

https://pugjs.org/api/reference.html

NODE.JS
```
  var fn = pug.compileFile('./templates/table.pug', {})

  var html = fn({tablerows: [[4,5], [6,7]]});
  console.log(html)
  var html = fn({tablerows: [[8,9], [1,2]]});
  console.log(html)

```

TABLE.PUG
```
as before
```

```
OUT.HTML
<table><tr><td>4</td><td>5</td></tr><tr><td>6</td><td>7</td></tr></table>
<table><tr><td>8</td><td>9</td></tr><tr><td>1</td><td>2</td></tr></table>

```
JavaScript Arrow Functions
Tags: javascript, node, tutorial, beginners
Published: 2020-01-13 15:16:57

You might not familiar with this newer syntax of defining functions in JavaScript. It just not adds up syntactic sugar in code but it also comes with a default behavior that differs from old JavaScript functions in the context of *this* keyword. Don't worry, we will make it clear together!

*Arrow Functions* were introduced in ES6. 

Let's look at the syntax of Arrow Functions first:

![first-example](https://thepracticaldev.s3.amazonaws.com/i/dbdmi29jacck5tdut638.png)

Output:
![first-example-output](https://thepracticaldev.s3.amazonaws.com/i/ekmqhj18usky9conu4ao.png)

In the above example, I have defined two functions with old syntax as well with new arrow syntax. And you can see in the output, Arrow Function would not make any difference. It would work same as the old function and product output. 

Also, I have demonstrated one-line syntax of arrow function and arrow function with parameters in the below example.

![second-example](https://thepracticaldev.s3.amazonaws.com/i/a1ypdeqjy6iw8c8ys2d5.png)

Now let's look at the behavior of arrow function with respect to *this* keyword.

Example:
![this-keyword](https://thepracticaldev.s3.amazonaws.com/i/uzppfxc3urx7ba9vzx97.png)

Output:
![this-keyword-output](https://thepracticaldev.s3.amazonaws.com/i/3dpetdzytwu31sjyl6oj.png)

In the above example, I have defined two constructor functions with regular function and arrow function within it. And, if you look at the output then, it might look confusing. How this output is produced? Let me clarify. 

Until arrow functions, every new function defined its own *this* value. This proved to be less than ideal with an object-oriented style of programming. And, it can be verified by looking at the output of the *p1* object. In that, *this* 
not refers to *Person1* object instead refers to *window* object. In this case, age would not be updated correctly.

On the other hand, An arrow function does not have its own *this*. Now, if you look at the *person2* object which contains an arrow function within it. And, the output also proves that an arrow function does not have own *this* instead refers to *parent2* object. thus, it would update the age correctly.

When to use an arrow function?
- In my opinion, it shortens the syntax and code looks cleaner. But you need to be careful when you are messing with *this* in case of constructor function or class. It can leads to unexpected output sometimes. I personally prefer using an arrow function syntax over old syntax.

I hope you liked it and let me know your thought on this topic by commenting down below.

Follow me on twitter: https://twitter.com/ykhokhaneshiya
Simple Image Gallery using React, typescript and styled-components
Tags: react, typescript, styledcomponents, imagegallery
Published: 2020-01-13 15:10:02

In this post will be demonstrates an idea used to build a simple responsive image gallery on a React project using typescript and styled-components and without using media query.

For size values, percentage measures are used to maintain responsiveness.

![""](https://raw.githubusercontent.com/renatobentorocha/simple-img-gallery-react/master/image_gallery_click.gif)


![""](https://raw.githubusercontent.com/renatobentorocha/simple-img-gallery-react/master/image_gallery_responsive.gif)


The gallery's structure was made with a main container that using 100% of page width. Over the main container, we have two clickable labels, one on left and another on the right side. This labels will be used to move between the images.

![](https://raw.githubusercontent.com/renatobentorocha/simple-img-gallery-react/master/image_gallery_wire_frame.png)

When the component is rendered passing to it n images, then the structure bellow will be created n-1 over the main container.

![](https://raw.githubusercontent.com/renatobentorocha/simple-img-gallery-react/master/layer_image_gallery.png)

So each one that structure has an id associated and the left label has an id for the previous and right label has an id for the next one. When one label is clicked the component state will be updated with the next or prev image id occasioning the rerender and apply the css to specific clicked label.

```typescript

  function handleCheck(name: string) {
    setChecked(name);
  }

  function createInputRadio(index: number) {
    const id = `_${index}`;

    return styled.input.attrs({
      name: 'images',
      id,
      type: 'radio',
    })`
      &:checked {
        ~ #__${index} {
          visibility: visible;
          animation: scroll 1s ease-in-out;
        }
      }
    `;
  }

  function renderInputRadio(index: number) {
    const id = `_${index}`;
    const InputRadio = createInputRadio(index);

    return (
      <InputRadio
        key={index.toString()}
        checked={checked === id}
        value={checked}
        onChange={() => handleCheck(id)}
      />
    );
  }


```

[Source code](https://github.com/renatobentorocha/simple-img-gallery-react)
How to Run Android Studio Emulator via CMD 
Tags: android
Published: 2020-01-13 14:58:03

This as been a pain to me. I have been trying to open my Android Studio Emulator from the Command Prompt, but I have been getting funny error messages which I don't understand.

I did whatever a typical developer will do, which is going to Google.com and searching => "open android studio emulator from cmd". 

And I saw a link to a question answered on SO (Stackoverflow)https://stackoverflow.com/questions/44521081/android-how-launch-emulator-from-command-line/44521194. To make your life easy, you can follow the steps below in order to run Android Studio Emulator via CMD. 

Steps:
* You have to first add this line 
 |C:\Users\<User>\AppData\Local\Android\Sdk\emulator| to your environmental variables.If you don't know how to or you haven't done it before. Just do a quick Google search on how to add a file path to environmental variables on Windows or Mac. 

   When you are done, then you can then move to the next step.
* Open CMD and run it as an Administrator. I don't think its a requirement to do so. When you have done that, type this command on your CMD => |emulator -list-avds| Emulator stands for the in-built Emulator you have already installed on Android Studio. list-avds Just list all the emulator you have. If its one, that the one that would be shown.

* Now the last thing is to run the emulator with this command => |emulator -avd Nexus_One_API_27| Nexus_One_API_27 is just the name of the emulator i have currently on the machine. 

After typing that command, just press ENTER and it should start running. 

And that's all!

P.S * This article assumes you have already installed, downloaded and configured AVD (Android Virtual Device) and all you want to do is run it from the command line.
toBe(Void 0) In A Unit Test
Tags: testing, void, javascript, webdev
Published: 2020-01-13 14:56:55

---
title: toBe(Void 0) In A Unit Test
published: true
description: While the pattern seemed odd, I didn't immediately look into what the pattern meant; the tests were working correctly.
tags: Testing, Void, JavaScript, WebDev
series: Front-End Testing
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sit5kjrcy1f4m3m3ma8e.png
---

I saw the following pattern in a clients Unit Tests. While the pattern seemed odd, I didn't immediately look into what the pattern meant; the tests were working correctly.

```javascript
function toTestUndefined(state) {
  if (state === false) {
    return undefined;
  }
  return true;
}

it('testing void 0 pattern', function() {
  expect(toTestUndefined(false).toBe(void 0);
});
```

The oddity that I found was the use of the `void 0`. This small set of code led me on a merry chase to determine what it was doing and why it was used as seen here.

## Usage

The `void` operator evaluates the given expression and then returns `undefined`.

> The `void` operator is often used merely to obtain the `undefined` primitive value, usually using `void(0)` (which is equivalent to `void 0`). In these cases, the global variable `undefined` can be used instead (assuming it has not been assigned to a non-default value).

This pattern is often used with an anchor tag.

```html
<a href="javascript:void(0)" id="loginlink">login</a>
```

JavaScript within a URL will redirect the browser to a plain text version of the result of evaluating the JavaScript. But if the result is `undefined`, then the browser stays on the same page. `void(0)` is just a short and simple script that evaluates to `undefined`.

## Within Jasmine

In this particular case, when I got with the developer who wrote the code he explained that the linter settings were different for tests than for the code under test. The linter for tests "complained" about the use of `undefined` and `void 0` bypassed the complaint.

## Summary

I recommended using it within a variable for clarity, resulting in something like the following ...

```javascript
var _undefined = void 0;

it('testing void 0 pattern', function() {
  expect(toTestUndefined(false).toBe(_undefined);
});
```
Study Log: Reading Vue's RFCs (2)
Tags: motivation, devjournal
Published: 2020-01-13 14:53:30

Continued from [the last post](https://dev.to/nozomuikuta/study-log-reading-vue-s-rfcs-793), I've reading [active RFCs of Vue.js](https://github.com/vuejs/rfcs/tree/master/active-rfcs).

Now, I'm reading the last one, composition API, which I skipped at first because it is long.

I would like to visualize what I learned about RFCs. That's because the reason I write posts every day is not only keep my motivation to learn things but improving skills of writing about them in English. I hope trying new ways would be helpful for that purpose.

---

By the way, I'm feeling that most of posts I've wrote so far are not informative to other people in this community. They are just "memo" about my study. Should it be Twitter that I write down daily thoughts?
I'm not sure to what extent the contents can be written freely.

In addition, I'm tweeting every time I write a post with #DevCommunity hash tag. Should it be only when I think the post is informative to others in the community that I add this tag?

---

I decided to not attach `2020` tag to posts of my devjournal since it's included in the title of the series. This change is applied to the past posts as well.
are you market ready
Tags: python, machinelearning, java, devops
Published: 2020-01-13 14:45:48

am really passionate about coding and how dynamic tech is, i have always been on my toes trying to learn new things, rigorously search for ideas and as a result my knowledge has widened and am looking forward to share with fellow developers. soon i shall be writing articles on android development, machine learning and a few tips on how to be an excellent and relevant developer in the market(of course apart from coding being a hobby for some of us its also a career). lets interact.