teleren/devto huggingface dataset:
How to extend built-in types in JavaScript?
Tags: javascript
Published: 2020-08-07 00:00:00

---
  title: How to extend built-in types in JavaScript?
  published: true
  tags: JavaScript
  date: Fri Aug 07 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/extending-datatypes-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-b12eeb21fc9ed1fbad896beb06989902.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/extending-datatypes-javascript)
  
To make a custom datatype or extend a built-in datatype you have to use the `extends` keyword followed by the name of datatype you want to extend.

By this, you inherit the properties and methods of the extending datatype.

Let's make an array of our own,

```javascript
// custom array type
class MySuperCoolArray extends Array {
  // custom array methods and properties here
}
```

Here we have made a class `MySuperCoolArray` and is also inherits the basic functionalities of the normal array in JavaScript.

Let now add a special method that returns the last element of our array.

```javascript
// our own array type
class MySuperCoolArray extends Array {
  // method which returns the last element
  lastElement() {
    // this --> here refers to the array itself
    return this[this.length - 1];
  }
}

// make an array from custom MySuperCoolArray
const arr = new MySuperCoolArray(1, 2, 3, 4, 4);

console.log(a.lastElement()); // 4
```

Yay!. 🚀

The cool part is that we also get all the methods and properties which we were using in the normal array type.

To understand that let's loop through all the elements of the custom array using the normal array `forEach()` method.

```javascript
// our own array type
class MySuperCoolArray extends Array {
  // method which returns the last element
  lastElement() {
    // this --> here refers to the array itself
    return this[this.length - 1];
  }
}

// make an array from custom MySuperCoolArray
const arr = new MySuperCoolArray(1, 2, 3, 4, 4);

// looping using the normal array forEach method
arr.forEach((element) => console.log(element));

/*

OUTPUT
------

1
2
3
4
4

*/
```

By extending the normal types you inherit their properties and methods with it.

### Feel free to share if you found this useful 😃.

---
Vscode Live Share
Tags: vscode
Published: 2020-12-15 06:21:12

<img src="https://dev-to-uploads.s3.amazonaws.com/i/sswrcbt9kyzsxsnimh9a.gif">
Ever want to collaborate on a project remotely or just want to review the code without getting the local copy of the code. Say no more now you can use Vscode live share extension to do just that.
check it out 
https://visualstudio.microsoft.com/services/live-share/
How to clear screen in C++?
Tags: cpp, oop, programming
Published: 2020-12-18 19:52:00

In this article we will discuss the method of clearing the screen or console display. There are more than one method of clearing the console but in this article we discussed only the general ones.
 
---
title: How to clear screen in C++?
tags: cpp
canonical_url: https://kodlogs.com/blog/881/how-to-clear-screen-in-c
---

#Methods
* Using function system()
* Creating new lines
* Using <conio.h>
##system()

The simplest method of clearing the screen is using the function system(). While it is so simple it has some disadvantages.
It is resource heavy.
It defeats security.
Anti-virus programs hate it.
```
#include <iostream>
#include <stdlib.h>
int main()
{
system("CLS");
cout << "Hello"<<flush;
system("CLS");
cout<<"Hello again"<<endl;
return 0;
}
```
**Note:** If you want to clear the screen after cout statement, you have to use flush.
Flush forces the printing to the screen before clearing the screen

##Creating new line

This method is stirring (pathetic) but it can be used. By creating so many new lines the console looks clean but it can be slow.
```
#include <iostream>
#include <string>

void clearscreen()
{ cout << string( 100, '\n' );
}
 #include <stdio.h>

  void ClearScreen()
    {
    int n;
    for (n = 0; n < 10; n++)
      printf( "\n\n\n\n\n\n\n\n\n\n" );
    }
```
##Using <conio.h>

The conio header file is so much popular. It provides the function clrscr() to clear the screen.
```
#include <conio.h>
#include <stdio.h>
#include <string.h>

int main()
  {
  char users_name[ 100 ];

  printf( "What is your name> " );
  fgets( users_name, sizeof( users_name ), stdin );
  *strchr( users_name, '\n' ) = '\0';

  /* Here is where we clear the screen */
  clrscr();

  printf( "Greetings and salutations %s!\n", users_name );

  printf( "\n\n\nPress ENTER to quit." );
  fgets( users_name, sizeof( users_name ), stdin );

  return 0;
  }
```
My javascript / tech / web development newsletter for 19-12-2020 is out!
Tags: node, javascript, webdev, tech
Published: 2020-12-19 10:39:59

---
title: My javascript / tech / web development newsletter for 19-12-2020 is out!
published: true
description: 
tags: nodejs, javascript, webdev, tech
---
In this week’s edition:

Valley exodus, Slack, cool repos, personal websites, knowing shell, Tesla huge, Torvalds-style, Amazon Robotaxi, Privacy, MDN Jamstack, MS on M1, EU rules, Facebook Super, FB vs Apple, videos+podcasts

https://markjgsmith.substack.com/p/mark-smiths-newsletter-19-12-2020

I hope you enjoy the links!

[@markjgsmith](https://twitter.com/markjgsmith)
[presentation] PhpStorm aime Joomla!
Tags: blog
Published: 2021-03-18 11:40:24

---
title: [presentation] PhpStorm aime Joomla!
published: true
date: 2020-12-19 11:48:16 UTC
tags: Blog
canonical_url: 
---

![](https://coderparlerpartager.fr/images/phpstorm-aime-joomla.png)

Salut super joomlers!

Découvrez dans cette courte présentation vidéo comment mettre en place un projet joomla dans PhpStorm 2020.3

Voici la présentation [vidéo](https://youtu.be/pWkF3wlTOwo "Vidéo sur la configuration d'un project joomla dans PhpStorm 2020.3").
🔥 Create number ranges in JavaScript
Tags: javascript, webdev
Published: 2020-12-19 19:15:25

To get a range of numbers in JavaScript, initialize an array by spreading the keys of another array into it. You can shift the range up or down, or do things like have it contain only even numbers.

```js
const range = [...Array(5).keys()] // ⇒ [0, 1, 2, 3, 4]

// the number in `Array(number)` describes how many values you want
[...Array(7).keys()] // ⇒ [0, 1, 2, 3, 4, 5, 6]

// you can `map` the values to shift or otherwise manipulate the range
[...Array(4).keys()].map(n => n + 3) // ⇒ [3, 4, 5, 6]
[...Array(4).keys()].map(n => n - 3) // ⇒ [-3, -2, -1, 0]
[...Array(4).keys()].map(n => n * 2) // ⇒ [0, 2, 4, 6]
```
物件導向 - 減少重複的程式碼 Inheritance v.s. Composition
Tags: oop
Published: 2020-12-21 23:43:09

_Composition over inheritance_

有個題目是這樣的:
我有兩個類別，在類別裡面有相同（實作內容一模一樣）的方法_method_。為了減少重複的程式碼，我為這兩個類別創造了一個共同父類別，並且把相同的方法_method_放在父類別，這樣好嗎？
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/biivbqq9w36wpalp1wm6.jpg)
How to watch a directory in Java?
Tags: java, programming
Published: 2020-12-23 12:40:23

You can watch a folder/directory on your server or computer easily using Watch API provided by Java.

Below is the algorithm:
STEP1: Create a watch service

          WatchService watchService = FileSystems.getDefault().newWatchService();

STEP2: Get the path of the folder you want to monitor

STEP3: Register the folder path with the service

STEP4: Poll for events in an infinite loop

STEP5: For each event get the file name from the event context

STEP6: For each event check its type

STEP7: For each type of event perform the action you want.

STEP8: Reset the watch key used to poll events.

Explained in detail with code here:
https://fullstackdeveloper.guru/2020/12/23/how-to-watch-a-folder-directory-or-changes-using-java/
The Maker Show: IoT powered holiday lights 🎄
Tags: themakershow, iot, azure, powerapps
Published: 2020-12-26 17:13:35

We have just kicked off the very first episode of The Maker Show! This show is series of monthly one hour show for developers hosted by [Sherry List](https://twitter.com/sherrrylst) and [Goran Vuksic](https://twitter.com/gvuksic). On each episode we will highlight tools and projects from the community that can inspire new creations and inventions.

In this episode we had [Jim Bennett](https://twitter.com/jimbobbennett) as a guest speaker about "IoT powered holiday lights 🎄". 

![The Maker Show](https://dev-to-uploads.s3.amazonaws.com/i/f6ksiiljdx4o20bhfael.jpg)

Jim does things with IoT and Azure in the Developer Relations team at Microsoft, mainly creating content for students and faculty to help them be successful with Microsoft technologies.

As an IoT enthusiast, Jim has wired up his lights to a Raspberry Pi, and he controls them using cloud IoT Services with no code apps. This allows him to turn lights on and off, or to change the color via a mobile app.

Feel free to check out recording here:

{% youtube NUhGyqfv-dQ %}

Resources from the show are available at the following link: [http://aka.ms/Jim/MakerShow](http://aka.ms/Jim/MakerShow)

Follow us on our [ForDevs Twitter](https://twitter.com/fordevs_) account if you would like to be notified when our next show will be announced. You can also join our [Meetup group](https://www.meetup.com/ForDevs) and subscribe to our [Youtube channel](https://www.youtube.com/channel/UCedB8U57bDW8WqH0_eQ4jag).
Created my first CSS UI library.
Tags: css, webdev, webdesign, framework
Published: 2020-12-24 05:52:33

I have created a CSS UI library named '**Scratch**' for creating websites and giving users a jump-start for creating website.

Scratch provides all major components and utilities to create a website and all components are made with pure CSS.

link to website is given below:

https://css-scratch.netlify.app/ 

**Please do give your reviews and all suggestions are welcomed.**
#Day 15: Insert, Delete, find max in Stack
Tags: 100daysofcode
Published: 2020-12-25 18:51:17

The days when you are unable to solve sufficient problems turns out really disappointing.
It wasn't a great day. I just solved only one question related to insertion, deletion and finding maximum element in Stack. I am stuck in 4 questions and this is kind of disappointing. The fact that they are labelled Easy on GFG is making me feel more sad. I'm unable to meet the Time and Space complexity of these questions. I hope I'll be able to solve these questions by tomorrow.
Task.Factory ile Asenkron Örneği
Tags: c, asenkron, async, task
Published: 2020-12-26 13:43:30

---
title: Task.Factory ile Asenkron Örneği
published: true
date: 2020-04-10 12:55:04 UTC
tags: C,asenkron,async,Task
canonical_url: 
---

Merhaba, bugün öğrendiğim bir yordamı burada küçük bir örnek ile paylaşmak istiyorum.

> Örneğe geçmeden önce işin mantığını kavramak adına [bu](https://medium.com/@atarikguney/asenkron-asynchronous-programlama-nedir-296230121f9d)linkteki makaleyi mutlaka okumanızı öneriyorum.

Makalede özetle anlatılmak istenen: A işleminin, B işleminin sonucu ile işi yoksa A işlemi B işlemini neden beklesin? A işlemi vakit kaybetmeden işlerine devam edebilir.  
  
Senaryo şöyle; hali hazırda metodunuz işlemine devam ederken sizin aralara log satırları eklemeniz lazım ama loglama işlemini hali hazırda ki metodunuz beklememeli, normal hayatına devam etmeli.

``` csharp

  static void Main(string[] args)
        {
            Logla();
            BirseylerYap();
            Console.ReadKey();
        }

        public static void BirseylerYap()
        {
            Console.WriteLine("Diğer işlemlere devam ediliyor...");
        }

        public static void Logla()
        {
            Console.WriteLine("Loglamaya başlandı.");
            Task task = Task.Factory.StartNew(() =>
            {
                //Asenkron çalışalacak kodlar buraya yazılacak.
                Thread.Sleep(3000);
                Console.WriteLine("Loglama tamamlandı.");
            });
        }

```

<amp-fit-text layout="fixed-height" min-font-size="6" max-font-size="72" height="80"><strong>Kaynaklar</strong><br><a href="https://medium.com/@atarikguney/asenkron-asynchronous-programlama-nedir-296230121f9d">https://medium.com/@atarikguney/asenkron-asynchronous-programlama-nedir-296230121f9d</a><br><a href="https://enginpolat.com/tpl-task-parallel-library-task-class/" rel="nofollow">https://enginpolat.com/tpl-task-parallel-library-task-class/</a><br><a href="https://seesharpdili.blogspot.com/2015/02/task-baslatma.html">https://seesharpdili.blogspot.com/2015/02/task-baslatma.html</a></amp-fit-text>
quiz clone react
Tags: react, help
Published: 2020-12-28 07:02:23

Guys, I am pretty new to react; am trying to practice react by remaking the google word coach, or just a simple quiz. In terms of the UI, not much has been done, but I have focused to see whether I can do the functionality bit. I don't know the actual problem, I would really like some assistance as to knowing how to validate the answer when the button is clicked, because right now, The code I have written on the validateAnswer() seems to freeze my computer or sth. Please help.

You can find the link to my code on StackBlitz:  https://stackblitz.com/edit/react-o4hlnd
Understanding Docker: part 26 – Docker components
Tags: docker, devops, beginners, cloud
Published: 2021-01-11 07:29:52

---
title: Understanding Docker: part 26 – Docker components
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9ktykligj5zatlzw70vz.jpeg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with an explanation about Docker Engine components.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ktykligj5zatlzw70vz.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/37xpeg3s5mcj2y5555ay.jpeg)

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
Goals for 2021: Learning Go and Rust
Tags: go, rust, course
Published: 2020-12-31 05:51:12

---
title: Goals for 2021: Learning Go and Rust
published: true
date: 2020-12-31 05:03:02 UTC
tags: go,rust,golang,course
canonical_url: https://danielesalatti.com/learn-go-and-rust-2021/
---

![](https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxMTc3M3wwfDF8c2VhcmNofDJ8fHByb2dyYW1taW5nfGVufDB8fHw&ixlib=rb-1.2.1&q=80&w=2000)<figcaption>Photo by <a href="https://unsplash.com/@ffstop?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit">Fotis Fotopoulos</a> / <a href="https://unsplash.com/?utm_source=ghost&amp;utm_medium=referral&amp;utm_campaign=api-credit">Unsplash</a></figcaption>

I'll keep this short. In the past 6 or so years in Amazon I've been mostly working with Java and sometimes a little bit of Python. There's nothing wrong with that. I'm not against any of these languages, I might even enjoy working with them - at least when people don't abuse design patterns just for the sake of it and use 75 levels of indirection because "best practices", ending up with code that is impossible to maintain. And unlike what some think, I believe both languages are going to be around for a long time - their market share is far too big and they are far too widespread to be disappearing any time soon.

But I'm digressing and I said I was going to keep this short.

Like many other developers I like to spend time researching new technologies, look at new programming languages, and just experiment with things in my free time. Over the years two languages caught my attention, and I figured this is as good a time as any to start picking up on a couple of them. I'm talking about [Go](https://golang.org/) and [Rust](https://www.rust-lang.org/).

Now, to be honest: I hate new years resolution, and I don't believe they make much sense. It's something you commit to and then just drop a few weeks later... (fun fact: I do have some sort of yearly cycle analysis that I do regularly - e.g. around finances - but I use my birthday as a "fiscal year" of sorts). I do want to learn these two new (to me) languages though, and I figured I'd try to use this blog as an "accountability buddy". So here we go.

I'll be posting my notes and progress while I try to learn Go and Rust, in a format that can be used by others to learn as I go. If it ends up being decent enough it might even become a little course in Go and Rust programming. And I will release anything I end up building while learning as open source on [my GitHub profile](https://github.com/DanieleSalatti).

So there it is. Stay tuned and follow along :)
Introdução ao HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2020-12-31 23:26:50

O HTML á abreviação para **Hyper Text Markup Language**, ou seja é uma Linguagem de marcação de hipertexto, que utilizar um conjunto de _tags_ para construção de sites para _web_, foi desenvolvido a primeira versão em 1991 pelo cientista Tim Berners-Lee. 

Inicialmente a linguagem HTML teve o proposito de interligar instituições de pesquisas próximas para compartilhar documentos com mais facilidade.

Os navegadores _web_ interpretam os códigos em **HTML** e renderizam, ou seja, exibir o conteúdo na tela. São utilizadas _tags_ para construção do site, geralmente as _tags_ têm uma abertura e fechamento.

A estrutura de uma _tag_ de abertura:

`<elemento>`

A _tag_ de fechamento adiciona o sinal de barra:

`</elemento>`

Para navegar entre as páginas _web_ utilizamos a leitura não linear (hipertextos).

![Leitura não linear](https://dev-to-uploads.s3.amazonaws.com/i/3m9ujcag55spfvxy5z4e.png)

Atualmente o HTML está na versão 5, e essa nova versão trouxe novas funcionalidades, como a melhora na semântica para escrita das _tags_.
First Javascriptmas
Published: 2021-01-01 06:21:34

In December 2020, I participated in Scrimba's Javascriptmas. 

### **Why I enrolled:** 

For the chance at the prizes (i.e. I love raffles) AND to get back into JavaScript.

I started learning JavaScript earlier in 2020, but I took time off to research the various fields in tech. The Javascriptmas challenge helped me to get back into a coding routine. 

### **Favorite challenges:** 

The Dice game, Day 23's challenge, and Day's 24 challenge. I love animation so being able to practice JavaScript in addition to HTML and CSS was a win-win for me.

### **What I learned:** 

I need to practice coding on a routine basis, at least JavaScript, HTML, and CSS interchangeably, and build projects that would introduce me to new techniques. 

For 2021, one of my resolutions is to be more involved in the tech community.     

__*My Javascriptmas Challenge's Solutions:*__

Day 1: https://t.co/HNfpJGVEQI?amp=1

Day 2: https://t.co/Oakw1Elhe8?amp=1

Day 3: https://t.co/4pFlh31fdj?amp=1

Day 4: https://t.co/v6PfspQHJe?amp=1

Day 5: https://t.co/bAY95NFW39?amp=1

Day 6: https://t.co/ChRN6uJLcW?amp=1

Day 7: https://t.co/RDFQFDjoOw?amp=1

Day 8: https://t.co/l5f53hhZK9?amp=1

Day 9: https://t.co/NyWbO6u0DJ?amp=1

Day 10: https://scrimba.com/scrim/cdqa97Ak

Day 11: https://t.co/NiXnmQjKjU?amp=1

Day 12: https://t.co/UdJooFxgdk?amp=1

Day 13: https://t.co/6OPmUWXC4j?amp=1

Day 14: https://t.co/0bBhWfUeOC?amp=1

Day 15: https://t.co/A9zwB8FCRe?amp=1

Day 16: https://t.co/RHIsJHbbAb?amp=1

Day 17: https://t.co/PHt47GXk4P?amp=1

Day 18: https://t.co/Mz5Bs5P7eC?amp=1

Day 19: https://t.co/uxdMfiVYSM?amp=1

Day 20: https://t.co/Ac6nDJVUhB?amp=1

Day 21: https://t.co/ukUDKmpDSt?amp=1

Day 22: https://t.co/gDKT13doM5?amp=1

Day 23: https://t.co/2bqBZHPXG2?amp=1

Day 24: https://t.co/wWm4SgGOK4?amp=1
Developer Portfolio with React.js
Tags: react, portfolio, webdev, 100daysofcode
Published: 2021-01-01 16:22:51

![Main img](https://dev-to-uploads.s3.amazonaws.com/i/p8okja00qmsdatymvqob.png)

I build my developer portfolio using react.js and I would like to have it reviewed by our awesome community.

I have tried to keep the design and code minimalistic so that others can customize it easily to build their own.

Website Link:- [https://soumyajit.tech](https://soumyajit.tech)

Source Code:- [https://github.com/soumyajit4419/Portfolio](https://github.com/soumyajit4419/Portfolio)

Any feedback, suggestions, or comments are welcome.
If you like the website please give a star to it on github.
Thank You!
A lesson learnt about design from card making
Tags: design, webdev
Published: 2021-02-06 19:03:21

I took up card making as a hobby years ago, partly because buying cards in shops always seemed so expensive and it was hard to find any I liked. And partly because it looked fun. I like a hobby that's creative and useful.

The lesson I learnt is: **less is more**.

When I make cards I find a good-looking sticker or print out a picture related to the recipient's interests, slap it in the middle of a the card and put a Happy Birthday sticker on the top.

It looks basic, maybe even bare. But most people are excited to get a card that relates to something they like and have no idea how to make cards and think you're a genius/have taken ages on it. It does the job it needs to, they're happy.

You could make that design better, but you can also make it worse. Very easily. By slapping more stickers on.

Maybe it would look better with some stars in the corners. And it's still looking bare, so let's add some present stickers around the middle. And now it's full of stickers and looks terrible. It doesn't take many stickers to be too many stickers. And stickers are hard to unstick without making everything look worse.

In web development, making something that looks amazing is hard, unless you're a designer. Making something that looks terrible is easy. Making something that looks ok is also easy. And something that looks ok but is readable is better than something that looks amazing but is an unreadable mess.

So if your design has a bit too much going on, maybe try taking some things out of it, chances are, it'll look much better.
⚛️ I'm a professional React developer, and this is the directory structure I use for my production projects. ⚛️
Tags: react, javascript, webdev, tutorial
Published: 2021-01-03 08:37:53

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

Many people have asked me to share the directory structure that I use for my React applications. I tend to stick to what works well for me, and keep it relatively consistent between applications; that way, I have a good structure that is replicated across my projects, making it easy to switch between them as necessary.

In this video, I provide a full breakdown of the hierarchy using a sample React app, and explain how I would scale it up as the app grows in the future. I hope you enjoy!

{% youtube 0P4-cKutZZc %}

Here's the code on GitHub, if you would prefer: https://github.com/lucaschen/react-app-structure-demo

Happy coding!