teleren/devto huggingface dataset:
Million Thanks to Brad Traversy
Tags: millionthanksbrad, thankyou, onemillion
Published: 2019-12-19 10:30:40

---
title: Million Thanks to Brad Traversy
published: true
description: Help Brad to get to 1 Million Subscribers
tags: millionthanksbrad, thank you, one million
---

[Brad Traversy](https://www.youtube.com/user/TechGuyWeb) is one of the most appreciated web development teachers on YouTube and he is getting close to 1 Million subscribers. 
We decided to help him reach this goal by the end of 2019.

This is a way for us to thank him for all the hard work that he has done for the community by making hundreds of free YouTube tutorials & courses which impacted thousands of developers all around the world.  

Help us help him reach this goal by subscribing and sharing! Thank you! 🙏

**#MillionThanksBrad**

P.S. We also have a [discord server](https://discord.gg/qtpvFuP) if you want to join and help!

P.P.S. You can subscribe [here](https://www.youtube.com/user/TechGuyWeb?sub_confirmation=1) to his channel!
บันทึกความเข้าใจเรื่อง React.useEffect
Tags: react, hook, useeffect
Published: 2019-12-19 10:24:01

---
title: บันทึกความเข้าใจเรื่อง React.useEffect
published: true
description: 
tags: react, hook, useeffect 
---

* เราใช้ useEffect ใน React functional component แทน componentDidMount
* useEffect คล้ายๆ componentDidMount แต่ไม่เหมือนซะทีเดียว และยืดหยุ่นกว่า 
* componentDidMount ถูก trigger ทุกครั้งที่ component ถูก mount กับ DOM หรือทุกครั้งที่ state เปลี่ยนแปลง
* useEffect ก็จะ trigger ทุกครั้งที่ state หรือ props ของ function เปลี่ยนแปลง แต่เราสามารถกำหนดได้ด้วย ว่าจะสนใจ state หรือ props ไหน
* นอกจากนั้นใน useEffect เองก็สามารถทำ componentWillUnMount ได้ด้วย โดย return function 
* useEffect เหมาะสำหรับเอาไปใช้รอรับ callback จาก ajax หรือทำ redux dispatch 

ท่าในการใช้ useEffect 

```js 
const component = () => {
  // state loaded เอาไว้ render ในกรณีที่ยังไม่ได้ข้อมูลจาก ajax (เช่น loading ก็ได้นะ)
  [loaded, setLoaded] = React.useState(false)
  // state content เอาไว้ใส่ข้อมูล
  [content, setContent] = React.useState('')

  useEffect(() => {
    // ดึงข้อมูลเสร็จแล้วค่อยทำ setContent
    getContent.then(res => {
      setLoaded(true)
      setContent(res)
    })

    // เมื่อทำ unmount ก็ clear state กลับเป็นอย่างเดิม
    return () => {
      setLoaded(false)
      setContent('')
    }
  }, 
  // state ที่เราสนใจจะ subscribe ใน useEffect ตัวนี้
  [loaded, content])
}
```
Xmas Giveaway 🎄🎁
Published: 2019-12-19 09:54:58

In the spirit of Christmas, I'm giving away my used **Macbook Pro 13"**. I am looking for someone who seeks to become a **web developer and cannot afford a computer**.

![Christmas Laptop Giveaway](https://thepracticaldev.s3.amazonaws.com/i/y9j68et9f80irmo1pdt1.jpeg)

- ✍️ Write me a DM on Twitter (_marcba) or mail me at hello@marc.dev explaining why you think you should be the one to get the computer and what you plan on doing with it

- 🚩 Suggest/mention people who might need this

- 🙏PLEASE only apply or suggest people if the person really cannot afford a computer on their own

- 📦 I will it ship anywhere in the world

💻 The laptop is fine. The only catch is, it's a Spanish keyboard
I will announce the receiver on Christmas day

### Merry Christmas
🎉 State of JS 2019 is now LIVE, and DEV.TO is the 2nd most used blog for resources! 🎉
Tags: javascript, webdev, community, meta
Published: 2019-12-19 09:39:00



State of JS 2019 has recently been launched, and you can read everything about it here: https://2019.stateofjs.com/

![Chart](https://i.imgur.com/eD2vFzA.png)

Also want to add that Dev.to is the 2nd most used blog for resources about these technologies!

![Otter proud](https://media.giphy.com/media/ely3apij36BJhoZ234/giphy.gif)
#MillionThanksBrad
Published: 2019-12-19 09:26:14


Brad Traversy (@traversymedia) is one of the most appreciated web development teachers on YouTube and he is getting close to 1 Million subs. 
We decided to help him reach the goal by the end of 2019

Help us help him! Subscribe & RT!
#MillionThanksBrad

https://www.youtube.com/user/TechGuyWeb?sub_confirmation=1
Day 19 of the Visual Studio Tips Advent Calendar is now live
Tags: visualstudio
Published: 2019-12-19 09:17:05

Day 19 of the Visual Studio Tips Advent Calendar is now live. Enjoy! 

Not so fun fact. I originally missed out December 19th and had to go back and record it a week later. 🤦‍♂️

https://visualstudiotips.co.uk/calendar/

#VisualStudio #DevDecember #VsTipsAdvent #Advent
Create content loader animation like Facebook, LinkedIn with only HTML & CSS
Tags: codewithghazi, html, css, tutorial
Published: 2019-12-19 09:08:15


Displaying loader while content is being loaded/fetching is very useful and it gives a nice user experience as it tells users that content is getting loaded.

There are numerous loaders available on internet, we have spinners in bootstrap too which we can use to display loader. In this tutorial I have created a content loader like Facebook, LinkedIn and many other bigger webistes with only HTML and CSS. I have explained each step to create this beautiful animated content loader. Please do have a look.

{% youtube ZGJgXtwXAIc %}

{% github gkhan205/animated-content-loader no-readme %}
Is Anyone Using Server-Sent Events?
Tags: discuss, webdev
Published: 2019-12-19 08:41:11

---
title: Is Anyone Using Server-Sent Events?
published: true
description: 
tags: discuss, webdev
---

A lot of websites are using websockets for real-time communication with the server, even applications that don't need the 2-way communication. Is there a advantage to using Server-Sent Events instead of websockets when you only need one-way communication?
Fast Go Fast - A Fully Featured Game Developed in 6h18m25s
Tags: gml, gamemaker, jam, design
Published: 2019-12-19 08:38:27

I developed an entire game (speedrun style) during a live stream. Planned, programmed, designed, styled, voice acted, and [sourced audio in just over 6 hours](https://www.youtube.com/watch?v=ncsM08o0FQM). After which Fast Go Fast was born, a lowrez dodge game where you play as a block, avoiding other blocks, while accelerating to ludicrous speed. It is a "simple" game, but I put as many features a game like this could have. I made sure to keep it stylistically interesting, doing the art for block generation by hand. The game saves high scores and allows them to be shared with others.

![Title Screen](https://thepracticaldev.s3.amazonaws.com/i/b5xm3jdxxkbhw0i1a2ol.png)

The game itself, after adding the music, turned out to be 178MB in size, because I refuse any game I made to loop audio during gameplay.

![Main Game](https://thepracticaldev.s3.amazonaws.com/i/rh74eh8cb1e0lajsew9i.png)

[You can download the game free from gamejolt.](https://gamejolt.com/games/fgf/456723)
Design Patterns — Composite
Tags: oop, productivity, codequality, java
Published: 2019-12-19 08:19:01

[This has been posted on Medium](https://medium.com/@achillesmoraites/design-patterns-composite-a77e570e9105)

The composite design pattern is about a hierarchy where nodes with children have different behavior than childless nodes.

The pattern consists of three elements:

   * **Component** : a super-class typically an interface
   * **Composite** : a node with children implements Component
   * **Leaf** : a childless node implements Component

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

A typical example is a file system where there are folders and files:

Folders can contain files , other folders or can be empty. On the other hand files don’t contain folders or other files!

  >  Remember , the most important aspect of a design pattern is it’s intent! Once you understand it, you can use the pattern effectively in your projects!

## Project : FileSystem

**[get the source code here](https://github.com/Cyb3rN4u7/DesignPatterns/tree/master/CompositePattern/FileSystem/src)**

Here you will explore a simple file system , where you can see a simple implementation of the pattern.

Here you can see a UML of our File System :

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

Take a moment to explore the code and:

   * note what component of the pattern each class represents
   * observe the output of the code and see the difference between a file and a folder
   * in what scenarios do you think this pattern would be useful?

## Project : Extending our FileSystem

**[get the source code here](https://github.com/Cyb3rN4u7/DesignPatterns/tree/master/CompositePattern/FileSystem/src)**

*Time to get your hands dirty:*

Now that you understand how the composite pattern works , lets extend our FileSystem by adding new file types!

**Take the code and implement a new File type: Img**

General Guidelines:

  *  The Img should implement FileComponent
  *  Img must have a data field, you can use anything you like
  *  You can use the display method of the file to customize it for the new file
  *  Create an Img object and add it to a folder!

By the end of this project you have applied the pattern in an existing code-base and gained practical experience applying it.

**[See the solution](https://github.com/Cyb3rN4u7/DesignPatterns/tree/master/CompositePattern/FileSystem%20-%20Solution/src)**

*Happy coding !!!*
Advent of Code 2019 Solution Megathread - Day 19: Tractor Beam
Tags: adventofcode, challenge, adventofcode2019, spoilers
Published: 2019-12-19 08:03:42

---
title: Advent of Code 2019 Solution Megathread - Day 19: Tractor Beam
published: True
description: What pulls us together tears us apart.
tags: adventofcode,challenge, adventofcode2019, spoilers
series: Advent of Code 2019 Solutions
cover_image: https://i.imgur.com/rxpL0ZV.png
---

Well, if Mark shows up, we have a way to keep him from tearing us apart now! It's an IntCode program!

### [Day 19 - The Problem](https://adventofcode.com/2019/day/19)
After escaping from Triton, we took the tractor beam with us because it probably is going to help us tow Santa back in.

First, lets test the pull on this baby. Part 1 is to find the number of squares affected by the tractor beam. We can do this by sending drones out with our IntCode interpreter.

Now that we have the shape of the beam, lets try to find the closest we need to be to grab a sleigh sized object. Sleighs are probably 100x100, so in Part 2 we need to find the coordinates of the first 100*100 box covered by our beam.

### Ongoing Meta

#### Dev.to List of Leaderboards

* `120635-5c140b9a` - provided by [Linda Thompson](https://dev.to/lindakatcodes) 

 If you were part of [Ryan Palo](https://dev.to/rpalo)'s leaderboard last year, you're still a member of that! 

If you want me to add your leaderboard code to this page, reply to one of these posts and/or send me a DM containing your  code and any theming or notes you’d like me to add. (You can find your private leaderboard code on your "[Private Leaderboard](https://adventofcode.com/2019/leaderboard/private)" page.)

I'll edit in any leaderboards that people want to post, along with any description for the kinds of people you want to have on it. (My leaderboard is being used as my office's leaderboard.) And if I get something wrong, please call me out or message me and I’ll fix it ASAP.

There's no limit to the number of leaderboards you can join, so there's no problem belonging to a "Beginner" *and* a language specific one if you want.
Angular 9 - How to Prepare Yourself to the Ride (The Lazy Dev Addition).
Tags: angular, frontend
Published: 2019-12-19 08:00:44

---
title: Angular 9 - How to Prepare Yourself to the Ride (The Lazy Dev Addition).
published: true
description: How to prepare yourself , your team, your apps easily and lazily 
tags: Angular, frontend
---

I'm going filter some blogs|video to pure actions needed to be taken care so everybody could return quickly to routine, non blocking consumption of joy (and build great apps:)). 

I'm not going to dive into ng-update, it should work but hey - Murphy's law..u know..

  So some changes but not ALL, I try listing only the major ones that can be 
  handle ASAP.

* HTML Class breaking changes 
```<button [class]="'Marry'" class="'Jane'"> </button>```

At V 9 both work but only first one will effect.
TILL NOW IT WAS BROKEN!!!.

* Testing:
   TestBed.inject replacing TestBed.get and require Generic Type.

* Module with Providers - add generics to ModuleWithProvider like:
   ```export class CleanningBowlModule{
      static forRoot(config:BowlConfig}:ModuleWithProviders<MODULE-COME-HERE>)```

* ngForm tag replaced with ng-form.

* Renderer replaced with Renderer2, check the follwing link to more extra info if u use heavily with the Renderer2:
   https://next.angular.io/guide/migration-renderer.

* You cannot any more assign variable to Template Variable such ngIf , ngFor:
```<div ngIf="dabber.isActive"></div>
<button #dabber (click)="dabber.isActive=!dabber.isActive"></button>```
 THE ABOVE  will be break! you should replace all template only variable 
 with real class variables.

For more details and deep dive,  check out the following awesome links:
https://www.youtube.com/watch?v=5wmWtgr7LQ0
https://www.youtube.com/watch?v=AKibI36WNhY&t=5shttps://medium.com/angular-in-depth/all-you-need-to-know-about-ivy-the-new-angular-engine-9cde471f42cf

Enjoy
Singleton, return to javascript basics
Tags: javascript, vanilla
Published: 2019-12-19 07:52:34

#### Simple example of singleton

```javascript
var MySingleton = (function MySingleton() {
 return {
   // YOUR PUBLIC CODE
   myFunction: function() {},
   myVariable: 2020
 };
})();

MySingleton.myVariable; // Outputs: 2020
MySingleton.myFunction(); // Outputs: void
```


#### Combine reactive code and singleton with Rxjs

```javascript
var MySingleton = (function MySingleton(rxjs) {
 var user$ = new rxjs.BehaviorSubject(null);
 return {
   user$
 };
})(rxjs);

MySingleton.user$.subscribe(function(user) { });
```

Simple ;)
Git Rebase vs Merge
Tags: git, tooling, productivity
Published: 2019-12-19 07:36:29

---
title: "Git Rebase vs Merge"
canonical_url: 'https://juristr.com/blog/2019/12/git-rebase-vs-merge/'
published: true
description: Learn about how using ngx-formly can drammatically improve your Angular reactive forms
cover_image: 'https://juristr.com/blog/assets/imgs/merge-vs-rebase.jpg'
tags:
  - git
  - tooling
  - productivity
---

_This post has originally been published on [https://juristr.com/blog/2019/12/git-rebase-vs-merge/](https://juristr.com/blog/2019/12/git-rebase-vs-merge/). Go to [juristr.com/blog](https://juristr.com/blog) for more content_

---

_Git is an "old" technology if you want that has been around for ages now. Still, when speaking or collaborating with other software developers, I always again see them struggle with apparently basic commands. But it doesn't have to be scary. In this article I'm going to quickly walk you through the difference between "merge" and "rebase"._

Before starting, if **Git is something that sounds interesting to you**, where you think you might want to learn more and **dig deeper**, then I have something for you :smiley:. A while ago, I recorded a ~30min course on [Egghead](https://egghead.io/courses/productive-git-for-developers?af=fj2vsx) that walks you through the main commands you need to know to safely use Git on a daily basis. Check out [the course here](https://egghead.io/courses/productive-git-for-developers?af=fj2vsx):

**[Productive Git for Developers](https://egghead.io/courses/productive-git-for-developers)**


## Merge vs Rebase

{% youtube k-ddhtSM8wU %}

## Other Resources

You're more a "book person"? Then you might want to check out the ["Rebase Book"](https://gumroad.com/l/rebase-book) written by my friend [Pascal Precht](https://twitter.com/PascalPrecht).
C++ - Objects & Classes
Tags: cpp, beginners, programming
Published: 2019-12-19 07:31:31

#Class
1. Class is a user defined datatype.
2. It contains variables and functions.
3. It is used to create Objects.

Think of it like a blueprint.

#Object
1. It is instance of a class.
2. One class can create as many objects.
3. It represents **real world entity**.
4. sometime called instance variable.

#Analogy

Let's you are an architect and you designed a blueprint of a house. Your designed blueprint is amazing that so many people want to make house out of it. So you show them your blueprint. Finally everyone have their *dream* houses. In this case your blueprint is called **class** and houses are called **objects**.

#Some Formal Terms
Variable in Object = Member Data
Function in Object = Member Function

(Note:- *some programming languages, member functions called <b>methods</b>*.)

##How to define class?
```cpp
class className {
private:
    // Member Data
    int a;

public:
    // Member Function
    void showdata() {  
    std::cout << a << std::endl;
   }
};

// private and public are called access modifiers.
```

##How to create Object?
```cpp
className objectName;
```

##Calling Member Function
```cpp
objectName.showdata();

/* Here "dot" in between object and member function
called "class member access operator".
*/
```
#Constructor
A Constructor is a member function that is executed automatically whenever an object is created.

##How to define a Constructor?
```cpp
class className {
public:
    classname() {
    // constructor body
  }
};

/*
1. It must be same name as class name.
2. It have no return type.
*/
```
#Destructor
A Destructor is a member function that is executed automatically whenever an object is destroyed.

##How to define a Destructor?
```cpp
class className {
public:
    ~classname() {
    // Destructor body
  }
};

/*
1. It must be same name as class name.
2. It have no return type.
*/
```

References:-
1. [https://www.geeksforgeeks.org/c-classes-and-objects/](https://www.geeksforgeeks.org/c-classes-and-objects/)
2. [https://amzn.to/2PBRuZ6](https://amzn.to/2PBRuZ6)

That's it guys.

If you find anything incorrect or know more about it let me know in the comments.
Data Analytics Vs Data Analysis
Tags: data
Published: 2019-12-19 07:25:12

Hey, Folks, sometimes we misinterpret Data Analytics for Data Analysis. In this video, I explain the difference between Data Analysis and Data Analytics 

P.S don't watch the last scene you might end up laughing 🤣 
Kindly share  🙏 


https://m.youtube.com/watch?feature=youtu.be&v=5liCub_sRj8
How we improved SEO of finotes.com
Tags: seo, digitalmarketing
Published: 2019-12-19 07:12:47

Two months back our website finotes.com never featured in google first 100 pages for any of the common keywords that our target audience would search for. And our (mine and @donpeter06’s) knowledge of SEO is near zero. Tried watching some videos on the topic and started experimenting. Well, the results were hopeless.

Honestly, we were not convinced with some of the expert ‘SEO & digital marketing’ advices that we got (no offence to SEO experts out there). The advices were focused on ‘cheating’ Search Engine algorithms than any real ‘optimisation’ of the website. We decided to do some real hard work and started going deep into SEO concepts.

Our understanding now is that the search engines encourage well-written and reliable content. Search engines are smart and they learn fast when they are cheated and will keep improving their algorithms. So we removed all the ‘claims’ and adjectives like ‘intelligent’, ‘fastest’ and such. Rewrote some of the the content to ensure we showcase exactly what we do. Corrected the spelling mistakes and grammatical errors. Simple things indeed. The focus is now completely on the content.

Soon we noticed we are getting more signups and app integrations every day on an average. Our November numbers showed an average of 1.2 signups per day. For December till date the average has gone up to 2.6.

The results were not surprising. We had already started appearing in first 5 pages for most of the keywords. For keywords like “Detect bugs in iOS”, “Detect frame rate issues in iOS” we are now in page one of Google. DuckDuckGo results are even better. We are getting good results in Bing, Yahoo and Yandex too.

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

SEO is a process. So we keep working on it every single day. It requires lot of effort to be there in the relevant result set, even more effort to continue being there and improving the position is most difficult.

If you are an early stage B2B SaaS founder and would like to know more about how we worked (and continue to work) on our website SEO, feel free to ping. Happy to share whatever little knowledge we acquired.
What happens when I type a URL in browser

Tags: urlinbrowser, url, javascript, browser
Published: 2019-12-19 07:04:38

Ever wondered what actually happens when you type a URL in the browser?

I think this is a very common query that lingers around in our mind every time we type a URL in the browser.

So today am gonna briefly discuss what happens when you type a URL in the browser.

You enter a URL into the browser. It all starts here.

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

Basically, whenever we want to connect to a particular server, for example, let's consider google.com. Here we actually want to reach out to a server where google web services are hosted. As an example, I have given one such server, as google has around one million servers in various locations.

The browser looks up the IP address for the domain name. DNS server which I would call a resolver does look up to find the IP address of the server.

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

DNS lookup proceeds by:

- First checking Browser cache

- If the browser doesn’t contain the record in its cache. It makes a system call to the underlying operating system to fetch the record

- If that also fails, then the search continues to your router which has its own cache

- If everything fails, then the search moves on to ISP. It first tries in its cache, if not found then ISP’s DNS recursive search comes into picture

So the domain name which you have entered gets converted into the DNS number.

After which the browser initiates a TCP connection with the server and sends an HTTP GET request. Now the webserver passes on the request to the proper request handler which will return an HTML response in our case.

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

This HTML data stream response is then sent back to the browser. Now the browser receives the HTTP response and then the browser displays the HTML content. In our case its the google web page.

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

Rendering of HTML content is done in phases. It first gets HTML structure and then sends multiple GET requests to fetch links and other stuff. And there is a lot more after this. And yeah this is just an outline on what happens when you type a URL.

Hope this helps 🙂

[Video on what happens when you type URL in browser. Click to watch](https://www.youtube.com/watch?v=_cRyCo46Oo4&t=6s)
Get several instances of `@material-ui/styles` initialized in this application warning.
Tags: react, npm
Published: 2019-12-19 05:35:45

    I developed my own progress bar npm and publish it. I am using @material-ui/core npm to apply CSS styles on all elements in my progress bar npm.

   After successfully publish my npm and install this npm package into my existing application. But @material-ui/core npm is already installed in my existing application and progress bar npm. So it gives me below warning and my npm functionality not working.

It looks like there are several instances of `@material-ui/styles` initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.

I refer https://material-ui.com/getting-started/faq/#i-have-several-instances-of-styles-on-the-page document also but not get any solution

Anyone, please suggest me a solution.