teleren/devto huggingface dataset:
Understand providedIn options in angular services
Tags: angular, javascript, typescript, services
Published: 2020-10-25 10:07:05

Angular CLI by defaults creates services in root level of app.module. That is declared in services @Injectable( ) decorator. like... { providedIn:'root' }. As of now angular provides different options of angular services like [a] root [b] any [c] platform. Understand each option using small diagram, and understand what level service is declared and object is live within which level of application. 

### You can support me

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fv8jyjdsb975y5ztsl2e.png)](https://www.buymeacoffee.com/grdtech)

## 1. { providedIn: 'root' }
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f4tnxgcltwozrzi9fpmo.png)

As You can seen above our root module is "app.module.ts", and providedIn: 'root', creates only one singleton object for entire child module and root module too. we simply inject services inside component and same root-level object instance is shared between each component.

## 2. { providedIn: 'any' }
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/knbklj5dziujjvogv4lt.png)

As you can seen in above image, if services are created using providedIn: 'any', Then, each and every module have their own object state and each time new instance of service is created. Each root module has their own instance, and for each lazy module has their own instance.

## 3. { providedIn: 'platform' }
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wiedce0q9oljbwj9ki69.png)

As you can seen in above image, providedIn: 'platform' is new provided by angular, and its creates services instance only once, and then share state in each library and each level down to component tree.

**[ NOTE: ]** We can also declare services inside modules providers:[] arrays. If services defined in providers:[] array then, services are not tree-shakable, and if we declare services as per images shown above, using @Injectable(), decorator then this pattern is tree shakable. Tree-Shakable is when you never reference and used services in any of your component, then final production build will not include that services.

### You can support me

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fv8jyjdsb975y5ztsl2e.png)](https://www.buymeacoffee.com/grdtech)
KICKSTARTING MY OPEN SOURCE JOURNEY
Tags: hacktoberfest, digitalocean
Published: 2020-10-25 10:03:36


I first found out about Hacktoberfest through a post on linked in. I registered for a hacktoberfest meetup and found myself motivated enough to kickstart my journey of open source through Hacktoberfest.

I simply followed the steps for beginners that are mentioned on the Hacktoberfest website.And I was able to complete my 4 Pull requests along with some extras.

 C++ is my strong point so it was only natural to start with it. I found some good issues in CPP on the websites that were given as resources on hacktoberfest website.

 This is a great initiative by Digital Ocean. I learned a lot through this. I would definitely participate again next year.
Getting started with Tailwind CSS - Real quick!
Tags: tailwindcss, css, tutorial
Published: 2020-10-25 10:02:06

You have heard all the great things about Tailwind CSS but getting started seems a bit too much? Well, this article for you.

I have created a quickstart repo with the necessary tools so you don't have to set up and configure TailwindCSS for every project. 

#### 1. Clone the repo
We start by cloning this quickstart repo and changing the directory to that folder
```
git clone https://github.com/inerds/tailwind-quickstart.git'
cd tailwind-quickstart
```

#### 2. Install dependencies
This will install the required packages such as PostCSS, live-server ..etc
```
npm install
```

#### 3. Fire up a live server for preview
```
live-server public
```
This will start a live-server in the /public folder. You can start editing index.html file and changes will be auto refreshed on the browser.

If you are writing CSS run the following watch command and it will watch out for changes in css file in css/tailwind.css and build it to public/css/tailwind.css.

```
npm run watch
```

Enjoy Tailwinding!
Am fumbling all over with my fuctions... mouseover <js>
Published: 2020-10-25 08:57:14

Am trying to add css styles to my classes.... what am i doing wrong???

//In the JS:   
document.getElementsByClassName("header").addEventListener("mouseover", mouseOver);
    function mouseOver() {
    document.getElementsByClassName("header").$("header").addclass("mouseover")}
document.getElementsByClassName("header").addEventListener("mouseout", mouseOut);
    function mouseOut() {
    document.getElementsByClassName("header").$("header").addclass("mouseout");}

 //In the CSS: 
.header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  text-decoration: rgb(108, 141, 240);
  text-transform: uppercase;
}
.mouseover {
  transition: 3s;
  filter: brightness(20%);
}
.mouseout {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  text-decoration: rgb(222, 233, 14);
  text-transform: uppercase;
}
.header:hover {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  /*text-decoration: rgb(151, 160, 189);*/
  text-transform: uppercase;
  transition: 1s;
  filter: brightness(15%);
}
Performance analysis of gRPC and Protobuf
Tags: grpc, protobuf, microservices
Published: 2020-10-25 08:19:02

So... I've come to know about gRPC and Protobuf lately and was curious about them. I googled and went on reading blogs and articles and watching talks on Youtube about what people think about gRPC and Protobuf and the impacts on them in the micro-service world. I found out these two things are amusing.

We basically use the REST pattern for micro-services to talk to each other which uses `http/1.0`. `gRPC`, on the other hand, uses `http/2.0`. It brings some nice features like compressing headers, of course, the payload. And with gRPC, a remote call can be placed to a separate micro-service. With the help of Protobuf and gRPC, it's easier to talk to different micro-services, and during this, the payload size decreases because it's compressed. As a result, it takes less bandwidth of the servers. Which without any doubt is a great improvement.

In REST, it's basically a request-response model. gRPC, on the contrary, takes full advantage of http/2.0 and gives streaming features like client streaming, server streaming, bi-directional streaming (both client-server streaming).

And there are many cool features in gRPC and to test it really performs better than JSON based REST, I did a POC. In this Github repo, you can find the stats of the POC. And I first hand observed that compared to JSON based REST, gRPC with Protobuf performs better. 

To conduct the POC, I have two services, namely order service, and payment service. In v1 the order service and payment service talks between them with gRPC and Protobuf. And I tried to load test on them and tried to figure out the average request/sec and the average read size. The result was great. **1000K requests in 329.12s, 318 MB read**.

Then I created v2 of the system and this time I made the services talk to each other with JSON-based REST and load test them. This time **976796 2xx responses, 7465 non-2xx responses, 984k requests in 2449.86s, 312 MB read, 16k timeouts.**



I was amused to see that gRPC based system manage to handle all the **1000K** requests without any time out. Though it may seem like the **"read"** is almost similar in terms of **MB**  in both versions. Yes, it's basically because my payload was not that much large, a bit small to be honest. But when the payload size increases, the difference can be observed and in those cases, gRPC services save lots of bandwidth in the servers/pods.

The Github repository can be found here:
[gRPC + Protobuf POC](https://github.com/SamsadSajid/order-payment-microservice-poc)

Let me know what you think about this and if you have observed the same or interested in talking stuff about gRPC and Protobuf.
Global Coding Challenge 2020- Credit Suisse
Tags: hiring, computerscience
Published: 2020-10-25 07:49:08

Registrations are now open for the annual Credit Suisse Global Coding Challenge!

The competition will run from October 19th to November 9th! University students across the globe will attempt to code their most efficient algorithms to nine coding problems ranging from EASY to HARD.
 
The student at the top of our global leaderboard will be crowned our Global Coding Champion and walk away with a Macbook Pro. Exciting prizes also up for grabs in the other categories include the iPhone, iPad Pro and much more. In the past competitions, students who have participated in the competition and have done well have joined the Credit Suisse team on a Summer Internship or as Technology Analysts.

Here is the [registration link](https://www.credit-suisse.com/pwp/hr/en/codingchallenge/#/howtoplay/?promocode=krritik)

Hope to see you all participate and win. :)

Ritik
What content do you post on LinkedIn?
Tags: watercooler, linkedin, content
Published: 2020-10-25 07:42:28

---
title: What content do you post on LinkedIn?
published: true
description: 
tags: watercooler, linkedin, content
cover_image: https://www.classcentral.com/report/wp-content/uploads/2020/06/linkedin-learning.jpg
---
I recently created an [account](https://www.linkedin.com/in/madzadev/) on LinkedIn based on the responses of [discussion](https://dev.to/madza/linkedin-is-it-useful-for-devs-in-2020-9hd) a month ago. Thanks everyone for the responses! 🙏❤ 

I'm starting to get around and understand the principles behind the site. I'm aware you can post any type of media there like quick updates, post images, videos, events, polls, and even write expanded articles.

What type of content do you usually post there and what gives the best engagement rates from your experience?
Shopify host an App
Tags: shopify, webdev, react, node
Published: 2020-10-25 07:35:38

Hi there! I have been working on Shopify theme developement for a long time. There I just have to customize the front-end. But one of my clients asked for a Shopify App. Where I have to design and develop an Image Editor for a product page.

Now I have to take image in raw form and i'm gonna save it on my hosting( I'm gonna use one of mine ) database. 

Is this an efficient way or there any better way for hosting my media content?
Starting as a Developer...🚀
Tags: codenewbie, beginners, devops, webdev
Published: 2020-10-25 07:32:39

# **Hey guys**👋🏻

- I'm Tushar👨‍💻, from India.
- I've recently completed my graduation in Electrical Engineering and a few months old in front-end field. 
- My hobby is singing but I was always curious about tech and coding stuff so pandemic gave me that opportunity to explore that side of me.
- Currently, I'm searching for a job and hope to get one soon.✌️

## **Path I followed 🗺️**
- At the start, I just went ahead with this [YouTube](https://www.youtube.com/watch?v=6mbwJ2xhgzM&list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg) playlist. He is a genius guy.
- For JavaScript, I'm currently using [freeCodeCamp](https://www.freecodecamp.org/) platform which everybody knows is amazing.
- During the course of my learning, I made a few projects and uploaded them in [Github](https://github.com/tusharkandpal) account via Git. My portfolio link is [here](https://tusharkandpal.github.io).
- Just a week ago, I started contributing to an open-source project which is beginner-friendly and learning a lot from mentors and other experienced devs. They all are from around the globe and fantastic in their own ways.😎
- For the future, I planned to go with ReactJS next. What's your take on this?

Well, this is my Intro, you can tell me about yourself below.😀
say, **How coding and you met for the first time?**
My Hacktoberfest 2020 experience
Tags: hacktoberfest
Published: 2020-10-25 07:25:19

 ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ 

### Who am I
 
I'm Matteo Ruggiero from Italy and i joined DEV community and GitHub in general for studying purpose...i then saw Hacktoberfest 2020 on my explore tab and decided to participate 

### Progress

I started on October 10th and my contributions ended the review period today...i'm so excited to share this!!

### Contributions

I followed the video instructions of DigitalOcean and did my first contribution to [cloud haiku] 
(https://github.com/do-community/cloud_haiku) getting in touch with this japanese type of poetry and even translating their README.md in Italian to help new non-english speaker italian users understand how to write a correct Haiku (we have difficult syllabation).
After my first days on GitHub i found a project of game development fully dedicated to Hacktoberfest 2020 that i'm currently contributing to: [crystal-bit](https://github.com/crystal-bit/hacktoberfest-2020) and helped composing some music themes and coding easy things (it was a good experience because i'm learning a lot)


### Reflections
Overall, my Hacktoberfest 2020 experience has been very productive and challenging... I think i'll participate in the next years #hacktoberfest #opensource
Have you ever made money by selling domains?
Tags: discuss, business, domain, trading
Published: 2020-10-25 07:21:35

---
title: Have you ever made money by selling domains?
published: true
description: 
tags: discuss, business, domain, trading
cover_image: https://www.dooot.com/wp-content/uploads/2018/06/Domain-profit.jpg
---
Think of the domain industry like any commodity, or stocks, or real estate, whichever works for you. If there is a market there is the potential to make money.

It really boils down to you have to be able to buy a domain that someone will want and be able to sell it at some point for more.

Have you ever considered domain flipping as a side-business?
Is it worth getting involved in today's market?
flex your FlexBox skillls
Tags: hacktoberfest
Published: 2020-10-25 07:17:40

FlexBox is one of the popular CSS properties you can use to arrange all the divs into a certain order you prefer. Since FlexBox is one-dimensional you only need to deal with rows or columns.FlexBox provides many features that allow you to adjust the divs into a row, column, or top and bottom.

Follow this link to enhance your skills on FlexBox and make your HTML prettier.
https://flexboxfroggy.com/
Week 2 Reflections
Tags: beginners, ruby, webdev
Published: 2020-10-25 07:00:27

Week 2, what happened to week 1? I like it when films start in media res. The audience gets drawn in when they're not drip fed the story and have to piece it together along with the protagonist. If I had more cunning I'd pretend that I'd adopted this tactic to draw you in. The truth is that this weekend is the first time I've had enough room in my head to think about writing anything that doesn't begin with **def** or **puts**. Week 2 of a 9 week full stack web development bootcamp. Not even one third of the way through and I feel like the galaxy brain meme. Every day starts the same: a zoom lecture on today's learning objectives, then buddy up and start chomping on some problems. Pseudo, code, push, repeat. Le Wagon are running the course as a hybrid, half of our cohort are stuck outside mainland China. Some are in Hong Kong, maddeningly close but in the current situation they may as well be remoting in from the moon. One classmate is in London. Every day we can see him in his living room working with us through the night until by the evening's live code there's full-on daylight streaming through his curtains. And I thought I was resilient.
We spent Day 1 setting up our environments and, I suppose, quietly appraising ourselves. Did we belong here? How long until a teacher or fellow classmate pointed at us and said "they can't do this"? Perhaps this is just me. I've read up on imposter syndrome, but I think this was just first day trepidation. I needn't have worried anyway. The instructors had a graph in the classroom showing how our moods would peak and trough throughout the course. It's seemed pretty accurate so far but no matter how drained and stupid we might feel at the end of the day, no-one has had a cross word to say and the team spirit and good humor have been great.
We've started with Ruby, as someone who self-taught the basics of Python last year it's been a confidence-booster to begin with another high level dynamically typed language, even if I still try and use **randint()** for a random integer half the time. Then last week we moved into OOP with class inheritance. A friend back in London went through the same camp and said that the start is just you "drowning in a sea of knowledge". I don't feel that; everything so far has fitted into place like it was meant to be there. Not always immediately, but usually after a decent sleep. I'm finally starting to internalize that sleep is important after 28 years. 
The trough will come, I'm not arrogant enough to think it won't. I'll bang my head against a concept at some point and I'll feel like crap. But my teammates will be there for me as will the teachers. I'm where I want to be and I'll trust the process.
 
 This is the first blog post I've ever written so I'm going to be finding my style/voice for a little bit. Going forward I'm going to try and post as often as I can and get a little more into the technical side of what we're learning. For now it's been enough to barf some words up and clear my head a little. Stay safe and thanks for reading x
FlexBox Check it out
Published: 2020-10-25 06:53:03

Sometimes you're just stuck with all your divs, and you really just want to put them all into a certain order, wether it on the top or bottom, in a row or in a column, or even if you would want to reverse and put it at the end of the page, you can use an easy tool called flexbox, here is a link to get used to it and get into practice.
https://flexboxfroggy.com/
React Testing Crash Course for Beginners
Tags: react, showdev, javascript, beginners
Published: 2020-10-25 05:56:21

---
title: React Testing Crash Course for Beginners
published: true
description: Quick beginner tutorial on writing tests for a React application
tags: react, showdev, javascript, beginners
---

In this video I go over the basics of testing a React.js application using Jest and React Testing Library. I go over how to structure your tests, how to query various elements in your components, and how to perform user events like clicking and typing.

Let me know what you think! 

{% youtube KiOKre80oNc %}
3 Rules That Helped me write better Code
Tags: cynojine, developer, betterdeveloper, lovetocode
Published: 2020-10-25 05:39:41

---
title: 3 Rules That Helped me write better Code
published: true
description: 
tags: cynojine, developer, betterdeveloper, lovetocode
//cover_image: https://direct_url_to_image.jpg
---

I have been coding for over 5 years now and over the years i have learnt a lot and still learning.
When i started my journey in software development ‘Coding’ i made  mistakes which i have learnt from, and still learning. Now one of my focuses has been on reading and learning a lot. I reached a point where i have learnt so much that i realized how bad some of my early code is, So i tried to find ways to improve the. So i started researching on ways and ideas to help me improve my coding skills and how to write better code

## Write code that is self explanatory
My code where never organised and i comment almost everywhere on my code because my code is hard to read and understand. So i use this guide to help me avoid over-reliance on comments and to put comments in their place and where they are necessary.
i made my code more expressive instead of depending on comment to functions, variable etc.
Example this is more clear
```php
$sms_body = array(
    'api_key' => $api_key,
    'to' => $destination,
    'from' => $from,
    'sms' => $sms,
    'unicode' => $unicode,
);
```
than this, which requires a comment to explain the code
```php
// Create SMS Body for request
$sms = array(
    'api_key' => $api_key,
    'to' => $destination,
    'from' => $from,
    'sms' => $sms,
    'unicode' => $unicode,
);

```
dont just go overhead with long variable or function names either try to go for clarity and understanding.

## Learn to collaborate
One major thing i came across is collaborating with other people on a shared code base. I am a fan of the open source. It took me some time to get used to it but it had the most impact on my effectiveness in writing better code.
Collaborating with others opened my mind to a whole world of learning especially on GitHub Opensource. I became better at writing better code by also contributing to other peoples work and seeing how others get to write there code and studding them.

## Stick to the language or languages you are comfortable with.
There are many good Languages, PHP, Java, Python etc. Choose whichever you like best, and stick to it. Don’t confuse yourself with every new technology that comes around learn to grow and be better at what you already know.
Note: That dose not stop you from trying to understanding how other languages work. but find you base and stick to it.

## Conclusion
This is not a perfect rule but its something that has helped me in becoming a better coder and I’ve never encountered a programmer who just doesn’t care. I am sure this few Rules will help someone staring out in the coding world.
What is your team code review process?
Tags: codequality, productivity, discuss, question
Published: 2020-10-25 05:24:09

In my last five years, I have been working in different dev teams, and each one has a different code review process. I am interested in know-how is the code review process of your team.

A couple of questions could provide more information:

- Do you use an integrated tool in Slack to notify a new pull request? Witch one?
- What is the minimum of approvals needed in a pull request?
- How the reviewers are assigned?
- Do you use a pull request template?
- Are you evaluating unit test cases automatically in your PRs?
- What other automated tools are you using?
- After approving the PR what happens?
- Is your current process working fine?
- How is this process?
- How do you manage your development environments?
Add Remove Multiple Input Fields Dynamically With Jquery - Step By Step 
Published: 2020-10-25 04:56:45

we learn to add/remove input fields dynamically with jquery. this form submit is very useful many times bulk data needs to be submitted at once. If you have a requirement to add/remove multiple input fields dynamically with jquery, the input group makes it easy for you. we will easily Example from scratch how dynamically add/remove multiple input fields and submit to the database with jquery.

**[Add Remove Multiple Input Fields Dynamically With Jquery - Step By Step ](https://www.phpcodingstuff.com/blog/add-remove-multiple-input-fields-dynamically-with-jquery.html)**


```
<h2>Add Remove Multiple Input Fields Dynamically With Jquery - phpcodingstuff.com</h2>
<form method="post" action="submit.php">
            
    <div class="form-group fieldGroup">
        <div class="input-group">
            <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
            <div class="input-group-addon"> 
                <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
            </div>
        </div>
    </div>
    
    <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
    
</form>

<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
    <div class="input-group">
        <input type="text" name="name[]" class="form-control" placeholder="Enter name"/>
        <div class="input-group-addon"> 
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>


```