teleren/devto huggingface dataset:
Stranger Things Intro
Tags: codepen
Published: 2019-12-06 15:34:39

<p>Source also available on Github, with more information: <a href="https://github.com/wbobeirne/stranger-things" target="_blank">https://github.com/wbobeirne/stranger-things</a></p>

{% codepen https://codepen.io/wbobeirne/pen/pEjqGR %}
Friday Night Deploys: #8 - How Working 80 Hours A Week Made Me A Better, More Miserable Developer
Tags: jokes, webdev, podcast
Published: 2019-12-06 15:26:24

This week the DevPlebs talk about: Ruining another podcast episode! Raising the bar for 2020! Bloodstained! Becoming a professional skateboarder! Trains! Our cold, introverted husk! Ashton Kutcher! My failed dreams as a professional Twitter user! Podcast royalties! Youth being wasted on the young! The secret of being a good developer (cocaine)! Becoming a Lead E-Commerce Developer! Weezers discography! Why working 80 hours a week might not be great!

## Listen to The Full Episode!
{% spotify spotify:episode:5J8aq2GkcWmNpmBsGIDsDn %}

**We're also on...**
**Apple Podcasts:** https://apple.co/2Tcl8pS
**Google Music Podcasts:** https://bit.ly/3a1th6S
**YouTube:** https://bit.ly/2R3FmRW

## Get In Touch With Us!
If you would like to share how miserably you spend 80 hours that you want us to read out in the next episode you can reach us at the following...

**Twitter:** [@DevPlebs](https://twitter.com/DevPlebs).
**Email:** deadbeats@devplebs.tech

## Follow Our Twitters... If You Want!
[DevPlebs](https://twitter.com/DevPlebs).
[Keith Brewster](https://twitter.com/brewsterbhg).
[Phil Tietjen](https://twitter.com/phizzard).

You can also ask questions or give us some feedback about the show!
Design System with Angular & Ant Design
Tags: help, discuss, angular
Published: 2019-12-06 15:26:07

I'm currently experimenting with integrating Ant Design into my current project (which is built with Angular and uses scss for styling). So far, I haven't successfully found a way to integrate Ant Design with Angular (along with customizing the base theme because it uses LESS instead of SASS/SCSS).

Did anyone else face this problem? And if so, did you manage to find a solution?
3 best-read blogs in Angular Weekly #82
Tags: angular, ngrx, rxjs, typescript
Published: 2019-12-06 15:25:43

---
title: 3 best-read blogs in Angular Weekly #82
published: yes
description: Weekly curated blogs and tools for Angular developers. 
tags: angular, ngrx, rxjs, typescript
---

<img src="https://miro.medium.com/max/671/1*T9eAjYxBmznsxzZZq9kT2w.png" />

<h3><strong><a href="https://medium.com/better-programming/how-i-got-rid-of-state-observables-in-angular-2c69cbbbbd0e">1. How I got rid of state observables in Angular</a></strong></h3>

<p><strong>2 minutes —</strong> And I am not going back. <i>By Alessia Amitrano.</i></p>

<h3><strong><a href="https://blog.snowfrog.dev/dependency-inversion-in-angular/">2. Dependency inversion in Angular</a></strong></h3>
<p><strong>3 minutes —</strong> Angular has a powerful dependency injection system. Learn how to use it so that your code complies with the Dependency Inversion Principle. <i>By Philippe Vaillancourt.</i></p>

<h3><strong><a href="https://nirisarri.github.io/2019-12-05-dockerizing-an-angular-application/">3. Dockerizing an Angular application</a></strong></h3>

<p><strong>3 minutes —</strong> In my last project, the UI team decided not to host its Angular app in Docker. I started looking into it, as probably for other projects this will be necessary. <i>By Nicolas De Irisarri.</i></p>

<h2><strong>About the Angular Weekly</strong></h2>
<p><a href="https://www.getrevue.co/profile/AndreyKutsenko">The Angular Weekly</a> is a mailing consisting of the latest blogs and tools curated for Angular pros. I’m <a href="https://github.com/KutsenkoA">Andrey</a>, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called Jexia.</p>
<br></br>
<p>Do you have a question, feedback or you want to notify me about a recent blog for Angular Weekly pros? Reach out to me via andrey at angular-weekly.com.</p>
Day 18 of⚡️ #30DaysOfWebPerf ⚡️: Better dependencies
Tags: webperf, javascript, performance, webdev
Published: 2019-12-06 15:16:44

{% twitter 1202969746897018886 %}
{% twitter 1202969747849175042 %}

---

This article was originally published on [sia.codes](https://sia.codes/). Head over there if you like this post and want to read others like it, or sign up for my [newsletter](https://buttondown.email/sia.codes) to be notified of new posts!
Some use-cases of javascript  .reduce() method
Tags: javascript, node, codequality, functional
Published: 2019-12-06 15:14:35


Most of the examples that are shown, when we search for `.reduce()` method, are simple ones like `sum`, `average`, ...


In this article, we can explore some real programming use-case encounters where `.reduce()` method can be used.


#### Example-1

Flatten the below-given input in the format of provided output, so that it will be easy to display the details in UI.

``` javascript
### Input:

{
  productId:'prd_123',
  price:1499,
  customInfo:[
    {
      'color':['green', 'red']
    },
    {
      'category':'fashion' 
    }
  ]
}
​
### Output:
{ 
  productId:'prd_123',
  price:1499,
  color:['green', 'red'],
  category:'fashion' 
}
```

Here, we can use the `.reduce` method to flatten the object.

``` javascript
### Code Snippet

const {customInfo, ...rest} = object;
const flattenObject = customInfo.reduce((acc, val) => {
  return {...acc, ...val};
}, {});
console.log({...rest, ...flattenObject});
``` 

### Example - 2

```javascript

### Input 

{
  'productId': 'prd_123',
  'name': 'iphone X',
  'variants':[
    {
      'price':'$599',
      'color': 'black'
    },
    {
      'price':'$699',
      'color': 'midnight-green'
    }
  ]
}

### Output

[
  {
    productId: 'prd_123',
    name: 'iphone X',
    price: '$599',
    color: 'black'
  },
  {
    productId: 'prd_123',
    name: 'iphone X',
    price: '$699',
    color: 'midnight-green'
  }
];
```

Given an object which holds the details of multiple mobile variants, but in the form of a nested object. Now, we can use `.reduce()` method to return an array of mobile variants, which will be easy to iterate over.

```javascript
let {variants, ...rest} = object;

let output = variants.reduce((products, variant) => {
  products.push({...rest, ...variant})
  return products
}, [])

console.log(output)
```

Conclusion

The `.reduce()` method allows us to do some pretty neat data manipulation. It is really handy when it comes to making data easier to work with, or easier to represent where it needs to be read by humans.
3 best-read blogs in React Ninjas Newsletter #81
Tags: react, redux, javascript, typescript
Published: 2019-12-06 15:12:51

---
title: 3 best-read blogs in React Ninjas Newsletter #81
published: yes
description: Weekly curated blogs and tools for React developers. 
tags: react, redux, javascript, typescript
---

<img src="https://miro.medium.com/max/1160/1*blbg-3fiLCxDBox_qYm08w.png" />

<h3><strong><a href="https://dmitripavlutin.com/orthogonal-react-components/">1. The benefits of orthogonal React components</a></strong></h3>

<p><strong>8 minutes -</strong> How to design React components that are easy to change, maintain, and test? Strive to orthogonal React components. <i>By Dmitri Pavlutin.</i></p>

<h3><strong><a href="https://www.madebymike.com.au/writing/css-architecture-for-modern-web-applications/?utm_campaign=React%20Ninjas%20Newsletter&utm_medium=email&utm_source=Revue%20newsletter"> 2. CSS architecture for modern JavaScript apps</a></strong></h3>
<p><strong>20 minutes —</strong> My attempt to modernise some learnings from CSS architecture and how to apply them in the context of modern JavaScript applications. <i>By Mike Riethmuller.</i></p>

<h3><strong><a href="https://wanago.io/2019/12/02/javascript-design-patterns-factories-typescript/?utm_campaign=React%20Ninjas%20Newsletter&utm_medium=email&utm_source=Revue%20newsletter"> 3. Design patterns: factories and their implementation</a></strong></h3>
<p><strong>34 minutes —</strong> JavaScript design patterns and their implementation in TypeScript. <i>By Marcin Wanago.</i></p>

<h2><strong>About React Ninjas Newsletter</strong></h2>
<p><a href="https://www.getrevue.co/profile/Andres-from-Jexia">React Ninjas Newsletter</a> is a mailing consisting of the latest blogs and tools curated for React pros. I’m Andrés, your curator, working from the Netherlands to help building a cloud platform for front-end developers that is called <a href="https://www.jexia.com">Jexia</a>.</p>
<br></br>
<p>Reach out to me via andres at weekofreact.com, if you want.</p>
My article about my experience as software engineer
Published: 2019-12-06 15:09:57

Please read & let me know if I miss anything & help me improve my writing skills.


https://medium.com/@jyaswanth12es025/what-my-4-years-experience-as-full-mean-stack-developer-taught-12d7e83938d


Hi Everyone,

It’s been four years that I started my career as a Web Developer. Since then I learned a lot and I am satisfied with it.
The best way to learn is by doing & making mistakes. Since you can’t make every mistake & learn by yourself everything. You need to learn from other experiences too.
What is the best language for scripting?
Tags: discuss
Published: 2019-12-06 15:07:15

---
title: What is the best language for scripting?
published: true
tags: discuss
---


In your opinion, what is the best language for scripting?

# Trade-offs

Here is some trade-offs:

* It MUST be an interpreted language
* It SHOULD be clear to understand
* It SHOULD run in many environments (different OS and versions)
* It SHOULD allow the code express intentions
* It SHOULD be easy to reuse code
* It SHOULD have some minimal libraries (sets, maps, dictionaries, etc...)
* It SHOULD be easy to resolve dependencies

# Some selected

## Bash

* 😃 Yes, is is an interpreted language
* 😔 No, it is not easy to understand what is happening.... 
* 😃 Yes, it run in almost any environment
* 😔 No, it does not express intention
* 😔 No, it is not easy to reuse code
* 😔 No, it is not easy to use libraries
* 😃 Yes, many dependencies are Unix programs


## Python

* 😃 Yes, is is an interpreted language
* 😃 Yes, it is easy to understand what is happening....
* 😃 Yes, it run in almost any environment
* 😃 Yes, it express intention
* 😃 Yes, it is easy to reuse code
* 😃 Yes, it is easy to use libraries
* 😟 Sometimes, some old libraries are difficult to find.

Any other option?
Why React is so popular?
Tags: technology, react
Published: 2019-12-31 09:25:49

---
title: Why React is so popular?
published: true
date: 2019-12-06 14:55:31 UTC
tags: Technology,React
canonical_url: https://khalifa.tn/why-react-is-so-popular/
---

This is not a comparing between Vue, angular and React. This post is according to Indeed.com with over than 60,000 job offers. I’ll talk about why React is the most popular JavaScript library.

![](https://i2.wp.com/miro.medium.com/max/1200/1*fLvLBaoQ4FIt7xf5bY8CBg.png?resize=443%2C274&ssl=1)

All JavaScript developers know how hard is working with DOM API. React make it easy to use them, especially when we talk about Event Listeners. It suggests to take more control and power over when something happens in the virtual DOM when mounting, updating and unmounting components.

This library helps describe the User Interface, each element is a component. It’s a design philosophy with virtual DOM and batched DOM updates makes it really fast and easy to test each component.

With React life cycle, no component will be mounted before each child component of it gets mounted first. And this adds more robustness and more security to an app. For example, We can secure the whole application and have nothing mounted if the user is not logged in.

It’s very hard to write HTML into JavaScript. Personally , I used mustache JS for templates. I remember how it’s complicated to append HTML into DOM. React made JSX very easy to use.

React was hard to understand with complicated standards, Design patterns and its APIs like createRef, createClass and createElement…, etc. It’s harder when developers have to make a huge form with many functions to bind them into the class component. When the React team had announced functional components and hooks, React become easier to understand and very easy to use than before.

For me, as a Lead Front developer in a recent mission, there is no substantial difference in which framework to choose. Vue.js is also on board, every framework has its own pros and cons

 ![Confused Trailer Park Boys GIF](https://i1.wp.com/media.giphy.com/media/YVPwi7L2izTJS/giphy.gif?resize=300%2C167&ssl=1)

Leave a comment if you do not agree ![😒](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f612.png)

 

The post [Why React is so popular?](https://khalifa.tn/why-react-is-so-popular/) appeared first on [C.Khalifa](https://khalifa.tn).
Why is React so popular?
Tags: technology, react
Published: 2020-03-11 12:31:29

---
title: Why is React so popular?
published: true
date: 2019-12-06 14:55:31 UTC
tags: Technology,React
canonical_url: https://khalifa.tn/why-react-is-so-popular/?utm_source=rss&utm_medium=rss&utm_campaign=why-react-is-so-popular
---

This is not a comparison between Vue, angular and React. This post is according to Indeed.com with over than 60,000 job offers. I’ll talk about why React is the most popular JavaScript library.

![](https://i2.wp.com/miro.medium.com/max/1200/1*fLvLBaoQ4FIt7xf5bY8CBg.png?resize=443%2C274&ssl=1)

All JavaScript developers know how hard is working with DOM API. React make it easy to use them, especially when we talk about Event Listeners. It suggests to take more control and power over when something happens in the virtual DOM when mounting, updating and unmounting components.

This library helps describe the User Interface, each element is a component. It’s a design philosophy with virtual DOM and batched DOM updates makes it really fast and easy to test each component.

With React life cycle, no component will be mounted before each child component of it gets mounted first. And this adds more robustness and more security to an app. For example, We can secure the whole application and have nothing mounted if the user is not logged in.

It’s very hard to write HTML into JavaScript. Personally , I used mustache JS for templates. I remember how it’s complicated to append HTML into DOM. React made JSX very easy to use.

React was hard to understand with complicated standards, Design patterns and its APIs like createRef, createClass and createElement…, etc. It’s harder when developers have to make a huge form with many functions to bind them into the class component. When the React team had announced functional components and hooks, React become easier to understand and very easy to use than before.

For me, as a Lead Front developer in a recent mission, there is no substantial difference in which framework to choose. Vue.js is also on board, every framework has its own pros and cons

 ![Confused Trailer Park Boys GIF](https://i1.wp.com/media.giphy.com/media/YVPwi7L2izTJS/giphy.gif?resize=300%2C167&ssl=1)

Leave a comment if you do not agree ![😒](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f612.png)

 

The post [Why is React so popular?](https://dev.to/chokri/why-react-is-so-popular-35bc) appeared first on [C.Khalifa](https://khalifa.tn).
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-12-06 14:45:30

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![cool-friday-cat](https://media.giphy.com/media/xUPN39xtlB15k469TW/giphy.gif)
The Magic Freelance Rate Formula
Tags: freelancing, beginners, career
Published: 2019-12-08 21:19:56

---
title: The Magic Freelance Rate Formula
description: If you're brand new to freelancing as a web developer, one of the first questions you need to answer is, 'How much do I charge?' The fastest, easiest way to answer this question is using the magic freelance rate formula.
published: true
date: 2019-12-06 14:31:00 UTC
tags: freelancing,beginners,career
canonical_url: https://raddevon.com/articles/the-magic-freelance-rate-formula/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/442mj9xhlnw5qephz43o.jpg
---
If you’re brand new to freelancing as a web developer, one of the first questions you need to answer is, **“How much do I charge?”** The fastest, easiest way to answer this question is using the magic freelance rate formula. It’s a two-step process:

1.  Think of a yearly salary **that would allow you to live comfortably**. If you were looking for a full-time job, what would you want to be paid?
2.  Divide that yearly salary **by 1,000**.

That gives you your hourly rate. If your ideal salary is $40,000, you need to charge $40 an hour. If you want to make, $58,000 a year, charge $58 an hour. If you want to cross that six-figure mark and make $100k, charge $100 an hour.

The magic formula **isn’t perfect**, but it gets you pretty close to a rate that should work for you. It has enough headroom built in to account for many of the [costs and factors you might not think of](https://raddevon.com/articles/things-you-may-not-know-about-freelance-web-development-pricing/) when trying to determine your own rate, including allowing you to pay for [your own benefits](https://raddevon.com/articles/how-do-freelance-web-developers-cope-with-losing-their-benefits/).

📗 If you’re looking for more accuracy, or if you want to be absolutely sure you have all your bases covered, the magic formula may not be for you. Check out my soon-to-be-released book [Freelance Web Development Pricing](https://raddevon.com/freelance-web-development-pricing-rates-estimating-projects-and-turning-a-profit/) instead. It’s the definitive guide to all things pricing when it comes to freelancing as a web developer. It will teach you to confidently set and justify your pricing. Hit the link to get a free chapter! 📗
Countdown film clutter in SwiftUI
Tags: ios, swift, swiftui, animation
Published: 2019-12-06 13:55:34

# Countdown film clutter in SwiftUI

After first successful 😎 approach ([FlipClock](https://github.com/elpassion/FlipClock-SwiftUI)) to animations in SwiftUI, I've decided to create the next sample project. Looking for inspiration in the endless Internet, I've found old fashioned countdown film clutter. I realized that it could be challenging to do sth similar in the new Apple UI framework - SwiftUI. Please stop for a moment and take a look at the results of my work.

### [Implementation](https://github.com/elpassion/CountdownFilmClutter-SwiftUI)

![Preview](https://raw.githubusercontent.com/elpassion/Showcase/master/content/CountdownFilmClutter-SwiftUI/countdown_film_clutter.gif)

## License

Copyright © 2019 [EL Passion](https://www.elpassion.com)
Why learning to program is like owning a dog (in some ways)
Tags: beginners, web, webdev
Published: 2019-12-06 13:37:53

So I just recently got a White German Shepherd pup, and within a few days of being with him, I've come to realize that owning a dog is not an easy thing. But then, neither is programming. So here are some parallels I drew from that. Just a fun post :)

#You don't know whether you can do it
My first language was JavaScript, and when I started to learn, I had no idea whether I could make a website. My motivation didn't matter because.. motivation only gets you started. It's the same with owning a dog, you don't know if you can own and care for one, but you want one, so you get a dog. And then you are clueless about what to do next.

![](https://media.giphy.com/media/xkvttzvWDPMEEXAJB1/source.gif)

#You have to take it one day at a time
Owning a dog is a lot of responsibility. And if you think of the big picture, you can end up scaring yourself shitless. There's a lot to learn on how to discipline your dog, what to buy, when to vaccinate, vet schedules, and so on. It's the same with programming, there is a whole lot to learn with no end in sight. So, it's important to know that at this point, you don't need to learn everything on day one.

![](https://media1.giphy.com/media/8YHtCyo0hT7ThZSsnN/giphy.gif?cid=19f5b51a7492d4b5cecc60a446512c87f066c74617c382d2&rid=giphy.gif)

#You can't ignore the ugly parts
Programming is a mentally stimulating activity where you get to learn new things all the time. And we all have a preference for a particular part of it, frontend, backend, fullstack, database, application development, these are just the broader parts of it. And you can go even deeper than that in terms of job titles. But even then, sometimes a part of your job will require you to have some idea of the others too, even if you don't like to do them. Owning a dog means you get to play with it, pet it, go out on walks, have a furry companion who would trust you with their eyes closed, but it also means having to clean up after them, regular vet visits, partly chewed furniture, and so on.

![](https://media.giphy.com/media/3Mi9k7Y5gHMmZv0lin/source.gif)

#You can't slack off
That said, programming is a very demanding field where you have to always keep abreast of the happenings. I remember not coding for about half a year and feeling like a complete newbie because Angular was replaced by React and you could suddenly make apps with web technologies. Your dog is also very demanding by nature, you have to be alert at all times so he doesn't do something you wouldn't want him to, like poop on the carpet.


![](https://media0.giphy.com/media/lcdMStZJGXPSmu8a5c/giphy.gif?cid=19f5b51a066254358a2b81fb91f7d0b3dd7f374a30e19482&rid=giphy.gif)

#Inspite of everything, it's fun and you love it
At the end of the day though, it's still a lot of fun to make things and to have a furball to play with after an eventful day, and you wouldn't want it any other way.


![](https://media0.giphy.com/media/s2qXK8wAvkHTO/giphy.gif?cid=19f5b51a5f3b2af874dad4f18477d4da7a186008681223c7&rid=giphy.gif)

That's all folks!
"Angular[/RxJS] can waste your time" series. Pitfall #6 - RxJS fromFetch vs ajax
Tags: rxjs, angular, webdev
Published: 2019-12-06 13:36:22

---
title: "Angular[/RxJS] can waste your time" series. Pitfall #6 - RxJS fromFetch vs ajax
published: true
description: How RxJS 'fromFetch' and 'ajax' differ and why you should care.
tags: rxjs, angular, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q3zz06gr1cgt1lxu965a.png
---

You decided to omit Angular HttpINterceptor and use RxJS functions to make a network call, like fromFetch or ajax. But there is a possible pitfall here as well. 

Which one? Watch the video ;-)

{% youtube N9CEHvwVXHc %}

This video series will become a part of my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course): http://eepurl.com/gHF0av