teleren/devto huggingface dataset:
How to properly extend JS native Classes
Tags: typescript, javascript, productivity, codequality
Published: 2020-01-24 19:45:08

In many cases it can be useful to extend native Javascript classes. Though you should be careful as unwanted side-effects might be difficult to pin down. In this example we will be extending the Array class with a simple immutable remove function.

In order the extend a class we want to add a property to the [object's prototype](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)

We could simply do the following:

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

Here we directly extend the classes prototype. We however lack control to define detailed behavior. This causes unwanted side-effects. One of the side-effects is that the property is Enumerable. This causes it to be part of values when using a for...in loop. In order to circumvent this issue and get more control we can instead do the following:

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

By using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) we are able to control the attributes of our new property.
Unpacking my head
Tags: devops, php, database
Published: 2020-01-24 19:42:56

In a Cordova application it seems like pretty often our error reporting system is complaining about an HTTP Error 0. I've pretty much always seen now that HTTP 0 errors are usually related to some sort of CORS problem. Or perhaps the system couldn't connect. That is, maybe the application was trying to issue a request while there was a disconnection of the network and when it came back up, it decided to report the error that was cached.

But then I came across this answer on SE: https://stackoverflow.com/a/26451773/77209

That answer goes way more in depth into why CORS-related errors are technically `status = 0`. It's essentially because it's a problem before the request gets made.

So, I recently ran into a problem where I was _still_ seeing these HTTP 0 errors. So I decided to check on the logs while some other stuff was running. That's when I noticed something.

> Side note: I check New Relic APM regularly. It's open in a tab and I peruse through it and have alerts set up in case something wild happens. Nothing ever was showing in this tab. At least nothing too wild. A couple of DB issues and a handful of errors with a remote web service.

But back to the logs: so in the logs I checked the timestamp of the request in my reporting system with the log... and I see that the `OPTIONS` request for the resource responded with a `502` status code.

Hmmm. Why? _Open up the error logs..._


    ... [crit] 30081#30081: *4243516 recv() failed (104: Connection reset by peer) while reading response header from upstream, client: #.#.#.#, server: redacted.server.name, request: "POST /api/v2/request-endpoint HTTP/1.1", upstream: "fastcgi://unix:/var/run/php/php7.3-fpm.sock:", host: "redacted.server.name", referrer: "http://url/"

Whoa. So the webserver lost connection to FPM. Is FPM crashing?

    [24-Jan-2020 13:48:57] WARNING: [pool www] child 13296 exited on signal 15 (SIGTERM) after 259.005807 seconds from start

Well, I'm not entirely sure why at this point but given that the application infrastructure has changed recently, I decided to go back over the config files.

`php-fpm` got bumped a little bit since some stuff was taken off this server. Also, it appears that I had been hitting the pool limits and so given the size of the box, it got a pretty sizeable bump.

So after deploying that change, I started getting errors again. 

MySQL connection limit reached. Whoops. Upping the number of `php-fpm` processes means that now that number needs to go up some.

So after deploying that change, it really got me thinking about how easy it is to miss this stuff.

Even with something like New Relic and error reporting, I was getting these weird errors from the client which told me nothing.

Monitoring stuff is hard, especially if you're not even sure what you're looking for.

Anyway, things have died down considerably. The number of random `status = 0` errors is practically 0 now.

I'm not sure if New Relic's infrastructure system would have caught this, but hey, they give you a 30-day free trial, so why not.
Module 4
Tags: cis114
Published: 2020-01-24 19:26:52

<ul>
<li>Packers</li>
<li>Bears</li>
<li>Lions</li>
<li>Vikings</li>
</ul>

<ol reversed start="5">(This is the code for listing a code from largest to smallest.)
  <li>Pulp Fiction</li>
  <li>The Dark Knight</li><li>The Godfather: Part 2</li>
  <li>The Godfather</li>
  <li>The Shawshank Redemption</li>
  </ol>

<dl>:Description List; <dt>:Description Term; The description that is associated with each term is marked with the <dd> element.

<nav>
<ul>
<<li><a href ="index.html">Home</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contacts.html">Contact Us</a></li>
</ul>
</nav>
Why is a JAMstack site fast?
Tags: jamstack, jamuary
Published: 2020-01-24 19:26:26

Speed is a notable characteristic of a JAMstack site. With a JAMstack setup, sites are served as static assets, and avoid the extra round trip to the origin server for content. Pre-rendering sites ahead of time means that the time it usually takes to build a site is significantly reduced, and content can be served immediately upon request. The cache plays a crucial role in making this possible. Caching greatly improves site load times by enabling access to resources that have either been fetched from a previous site visit or retrieved in advance.

It’s worth mentioning that the technique of leaning on the cache to speed up load times is not unique to the JAMstack. Monolithic, server side sites similarly depend on the cache to optimize server response time. Though the first request incurs a lengthy Time To First Byte (TTFB) (because of the need to travel to the origin server), subsequent requests can be served from the cache for quick and fairly consistent content delivery. Despite this, static sites still come up tops in terms of speed as opposed to monolithic sites. This is largely a result of how the cache is managed in either setup. As the popular adage goes, cache invalidation is one of the hardest problems in computer science. In a monolithic setup, the cache needs to be invalidated appropriately so content served to users is the most up to date. While there are solutions to handling this like [Fastly’s Surrogate Key HTTP headers to categorize and tag cached assets](https://www.fastly.com/blog/api-caching-part-iii), and the `stale-while-revalidate` header to keep stale content around while waiting for revalidation, crafting caching strategies takes a lot of time and effort. Not to mention, a poorly executed caching strategy can cause unexpected errors and redundant trips to the server that add time to page load. In the context of the JAMstack, the cache is automatically populated and persisted with every new site build. This means that developers can simply rely on the build process to handle cache invalidation and remain confident that their content is fast and never stale. The sole reliance on edge nodes for content delivery also means that sites are fast from being served as close to the user as possible. 

If you’re keen on digging into numbers around how fast JAMstack sites really are and how the cache can be optimized for speedier, more reliable sites, check out these fantastic resources: 

- [CSS Tricks article on JAMstack speed by numbers](https://css-tricks.com/a-look-at-jamstacks-speed-by-the-numbers/)

- [JAMstack performance discussion on HTTP Archive](https://discuss.httparchive.org/t/define-jamstack-sites-performance/1713)

- [Caching strategies for JAMstack sites on Netlify](https://www.netlify.com/blog/2017/02/23/better-living-through-caching/?utm_source=devto&utm_medium=caching-div&utm_campaign=devex)
Javascript Ternary Operator
Tags: javascript, codifynigeria
Published: 2020-01-24 19:13:35

<h1>Conditional or ternary Operator</h1>
<p>A conditional operator assigns a specified value to a variable based on some conditions, i.e it assigns a value to a variable if a condition is true , otherwise assigns an alternate value if condition is false.</p>

<p>Syntax</p>
<code><i>variable name = (condition) ? value1 : value2;</i></code>
<h3>Practical Example</h3>
<p>Let write a script to check how experience a web developer is, depending on their years of experience in the industry</p>
<p>Javascript code</p>
<code>
function checkExp() {
var input, output;
input = document.getElementById("expcheck").value;
  output = (input < 2) ? "You're a young developer" : "You're an experienced developer";
document.getElementById("output").innerHTML = output;
}
</code>
<p> Below is the snippet in codepen</p>
{% codepen https://codepen.io/tohbi/pen/KKwEaNV default-tab=js,result %}
<p>This is actually my first post. Thanks for reading!</p>
<p>Free to hit me up in the comment section.</p>
{% user bigg_aji %}
How to build a live, face-to-face video chat app in Ruby on Rails 6.0.2.1 ​
Tags: ruby, rails, webdev
Published: 2020-01-24 18:47:22

DISCLAIMER: This tutorial is not for beginners.

Want to know how to build apps like skype, zoom etc... using Ruby on rails 6? I got you!!

Building a video chat feature on a ruby on rails application is not an easy thing to do. That’s one of the reasons why I decided to do it, another reason being that I didn’t want to build another blog, todo-app etc… I wanted something challenging. 

You can check the app on heroku at https://dev-video.herokuapp.com/.

For a demo, you can either do it yourself (by logging into two separate accounts on different browsers), or check this small demo on youtube at https://www.youtube.com/watch?v=WXouJ8w7rQg.

Here is a link to the first 7 chapters of the tutorial: https://www.dropbox.com/s/2aqdsvm721tr01s/Ebook2020.pdf?dl=0

You can get the full ebook on Gumroad at https://gumroad.com/l/lNEhE/devto .
Export data from a loop
Published: 2020-01-24 18:43:22

<p>Pipedream makes it easy to build event-driven workflows with managed auth (just connect your account and reference tokens and keys in code!). Data is passed between steps in a workflow using <a href="https://docs.pipedream.com/workflows/steps/#step-exports">step exports</a>, which can be inspected and referenced by later steps. In this post, I'll explain how to export data from a loop:</p><figure class="kg-card kg-image-card"><img src="https://blog.pipedream.com/content/images/2020/01/2020-01-23-14.45.51.gif" class="kg-image"></figure><p>There are two ways to export data from a loop in a Node.js code step on Pipedream:</p><ol><li>Use a step export array</li><li>Return an array object after the loop is complete</li></ol><h2 id="use-a-step-export-array">Use a step export array</h2><p>To export data from a loop using step exports:</p><ol><li>Define a step export as an array</li><li>Add the data you want to export for each loop execution to that array</li><li>Export the array </li></ol><pre><code class="language-javascript">this.testExport = []

for (let i=0; i &lt; 5; i++) {
  this.testExport.push(i)
}</code></pre><p>When your workflow executes, the step will export an array at <code>steps.STEP_NAME.testExport</code> with a length of <code>5</code> and values from <code>0</code> - <code>4</code>.</p><p>Copy and run this workflow to test it out. On each loop execution, the code makes an Axios request to the <a href="https://swapi.co/">Star Wars API</a>, and it assigns the response data to <code>steps.example.testExport</code>:</p><p><a href="https://pipedream.com/@pravin/export-axios-response-data-from-a-loop-p_G6C1bG/edit">https://pipedream.com/@pravin/export-axios-response-data-from-a-loop-p_G6C1bG/edit</a></p><h2 id="return-an-array-object-after-the-loop-is-complete">Return an array object after the loop is complete</h2><p>To return an array after the loop is complete:</p><ol><li>Define an array</li><li>Add the data you want to export for each loop execution to that array</li><li>Return the array </li></ol><pre><code class="language-javascript">data = []

for (let i=0; i &lt; 5; i++) {
  data.push(i)
}

return i</code></pre><p>When your workflow executes, the step will export an array at <code>steps.STEP_NAME.$return_value</code> with a length of <code>5</code> and values from <code>0</code> - <code>4</code>.</p><p>Copy and run this workflow to test it out. On each loop execution, the code makes an Axios request to the <a href="https://swapi.co/">Star Wars API</a>, and it assigns the response data to <code>steps.example.$return_value</code>:</p><p><a href="https://pipedream.com/@pravin/return-axios-response-data-from-a-loop-p_NMC2Yy/edit">https://pipedream.com/@pravin/return-axios-response-data-from-a-loop-p_NMC2Yy/edit</a></p>
More About Variables – JavaScript Series – Part 7
Tags: javascript, codenewbie, beginners, webdev
Published: 2020-01-24 18:32:19

In last part we learned about variables right ? Now today we are going to learn a bit more about variables. 

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

We can't start variable name with symbol. Like -

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

Variable can start with a letter than numbers, it's fine. But no way to start numbers 

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

But you can start a variable with _ & $

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

We can't have space in variable name and if we need a long variable name. Then we use camelCase. Which means you'll write in big letter the second word. example -

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

Let do a little easy trick with variable. First we'll get two variable and add them and store it on a new variable, then we'll see if we got the exact value

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

Another thing, we can change the types of variable just by storing that value on there, like -

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

What if we didn't mention any type while initialing a variable. It will be undefined. This is another type of JS, we didn't learn at first. If you never initialize a variable but trying to call it, then it will give you a reference error

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

Do you learn some new stuff today ?


You can see the graphical version here
{% instagram B7tjrY1lHmK %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}


Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-7/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
Jan. 24, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-01-24 18:20:38

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![It’s time to get your learn on](https://media.giphy.com/media/a7NBvg3Ss8UYo/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-jn6 %}


![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
BaseCS Season 2 Video Series Is Coming Your Way
Tags: computerscience, meta
Published: 2020-01-24 18:16:45

---
title: BaseCS Season 2 Video Series Is Coming Your Way
published: false
description: Computer science concepts explained for everyone
tags: computerscience, meta
published: true
---

**BaseCS is back!** I'm thrilled to share that we've got a whole new season of the BaseCS video series for you to enjoy this year.

This season is full of great, fundamental topics, including a friendly introduction to binary, how to use hexadecimals, a deep dive into graph theory, and how to write and implement a depth-first search tree traversal algorithm! As always, BaseCS content is always beginner-friendly, but deeply technical. Whether you're new to computer science concepts, or want a refresher or a quick reminder, this series should help answer some questions.

Our team spent a lot of time planning and producing a season that, in my opinion, is _even better_ that the last. We hope you enjoy watching it as much as we loved making it! ❤️ 

### **🗓 First Episode: Wednesday, January 29th ✨**

This whole series is sponsored by **Heroku**

{% organization heroku %}

A special thank you to Heroku for their ongoing support!
What's one thing about Linux you wish you'd known?
Tags: linux, beginners, webdev, discuss
Published: 2020-01-24 18:12:07

---
title: What's one thing about Linux you wish you'd known?
published: true
description: 
tags: linux, beginners, web-dev, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5mngerahw0cjsb8te8tr.jpg
---
_photo by Uwe Aranas_

‘Linux’ shows up on many lists of skills that new developers should master. But that little name covers a massive scope of technology orders of magnitude more complex than any programming language or framework. When I hear that a new developer is trying to ‘learn Linux’ it sounds as daunting as a history student saying ‘I’m trying to learn everything about Europe.’


What's something you wish you'd known getting started?
CIS 114
Published: 2020-01-24 18:02:36

1 Set the number of columns for the table to be the maximum number of columns from each row. 
2 <! DOCTYPE html><html>  <head>    <title>Dicussion Question</title>  </head>  <body>        <th>Rows</th>      <tr>        <td>Tompkins</td> </tr> <tr> <td>Ramirez</td></tr><tr><td>David</td></tr></table></body</html>
3 <! DOCTYPE html><html>  <head>    <title>Dicussion Question</title>  </head>  <body>    <table border="2">      <th>Rows</th>      <tr>        <td>Tompkins</td>    </tr>    <tr>      <td>Ramirez</td>  </tr>  <tr>    <td>David</td>      </tr>    </table>  </body></html>   
4 table { border-collapse: separate; border-spacing: 10px;}
5 collapse border
6 <! DOCTYPE html><html>  <head>    <title>Dicussion Question</title>  </head>  <body>    <table border="3">      <th>Rows</th>      <tr colspan:"3">        <td rowspan:"2"><i>1: Monday</td></i>      </tr>      </table>  </body></html> 
7 Use colspan
8 Use rowspan
9 Title {caption-side: lower-left}
Which Markdown implementation would you choose, and why?
Tags: discuss, healthydebate
Published: 2020-01-24 17:39:23

Some factors include,

- Programming language of your choice
- Would you write a Markdown extension, if you could?
- Markdown flavors, if your framework allow you to choose

Of course, if not constrained by some factors like,

- Already chosen by your own framework, like Kramdown (Jekyll), Remark (Gatsby)

I have seen [this post](https://css-tricks.com/choosing-right-markdown-parser/), but there is no discussion board on this one.
Wizar devlog 02: Reference implementation
Tags: sam, ravioli, typescript, gamedev
Published: 2020-01-24 17:34:11

This week I have refactored my code to implement reference as first class citizen.

Example :
```ts
test('references', function() {
  const Item = object({
    id: identifier(), // Set an identifier here.
    price: number(),
  })

  const Player = object({
    inventory: array(Item),
    equipedItem: reference(Item),
  })

  const Fraktar = Player.create({
    inventory: [
      {
        id: '42',
        price: 10,
      },
    ],
    equipedItem: '42',
  })
  
  // `equipedItem` is a simple string but will be recognized internally as
  // a reference to a node.
  // It will return the item node with the matching identifier.

  expect(Fraktar .equipedItem.price).toBe(10)
})
```

It is the same system like in Mobx State Tree. Each node of the model tree has an identifier, either given by the factory or generated internaly.

When you hydrate your store with some data which contents some ID. It is easy to reflect the same consistency in the local store. Simply add an `identifier` type to a field and pass in your document id.


## IntelliSense

Code completion is kept between references during code thanks to Typescript.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/sr06zf1me1yrkbu02db5.PNG)

## Next evolution

Mobx State Tree uses reference internally to have better performance on reconciliation. I think I will get a try during the perf optimization iteration.

Also, I will need to add some utilities to make sure references are still alive when used. Or not, maybe it is the dev responsability to check that him/herself.
MongoDB Web-Api Starter Template For `dotnet new`
Tags: showdev, dotnet, mongodb, csharp
Published: 2020-01-24 17:27:05

I've developed a `dotnet new` starter template for scaffolding a web-api project with mongodb. It was designed with ease of development and maintenance in mind. The level of complexity of the architecture is extremely low compared to what you'd typically see with N-tier architecture. The code should be self explanatory. Some features include:

- Vertical slice architecture
- JWT token based authentication
- Claims & permission based authorization
- Input validation
- Password hashing
- Email sending
- Image uploading
- Strongly-typed app settings 
- Integration tests

You can see the source code from the github repository below or simply install and scaffold a new project to play with using the following code:
```csharp
    dotnet new -i MongoWebApiStarter
    dotnet new mongowebapi -n MyAwesomeApp
```

{% github dj-nitehawk/MongoWebApiStarter %}
React TypeError: Cannot read property problem
Tags: react, beginners, state
Published: 2020-01-24 17:15:18

I am trying to access the title tag but I am getting this error

TypeError: Cannot read property 'snippet' of undefined

inside my component I have a 
 state ={
    items:[] 
  }

which I updated via an ajax request to the Google Api.

 
inside my render Method
const { items } = this.state.items ? this.state : [];

please help
Don't use custom hooks as like global state
Tags: javascript, react, beginners
Published: 2020-01-24 17:06:36

yes. look this.

```jsx
const useInvalidHooks = () => {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  return [state, handler];
};

export default function ParentComponent() {
  const [state] = useInvalidHooks();
  console.log(`parent: ${state}`);
  return (
    <div>
      <InnerComponent />
    </div>
  );
}

function InnerComponent() {
  const [state, handler] = useInvalidHooks();
  console.log(`children: ${state}`);
  return <button onClick={handler}>hai</button>;
}
```

Click button in `InnerComponent`. And if you think update ParentComponent `const [state] = useInvalidHooks`, its wrong.
This code is equivalent to the following code.


```jsx
export default function ParentComponent() {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  console.log(`parent: ${state}`);
  return (
    <div>
      <InnerComponent />
    </div>
  );
}

function InnerComponent() {
  const [state, setState] = useState(false);
  const handler = useCallback(() => {
    setState(true);
  }, []);

  console.log(`children: ${state}`);
  return <button onClick={handler}>hai</button>;
}
```

it's obvious.

custom hooks may misunderstanding: custom hooks is globally... isn't it.
custom hooks is **locally**.

If you need global state on custom hooks, use context api. or redux...