teleren/devto huggingface dataset:
How to save your UpWork connects? What kind of job should you ignore in Upwork?
Published: 2021-08-04 07:30:23

If you are in Upwork you will be familiar with connects. Freelancers need connects to apply for freelance jobs. Upwork Connects are just like coins that are necessary to submit job proposals. Upwork Connects also limit the number of jobs a freelancer can apply for in a month. Up to now, freelancers get 60 connects free each month but the Upwork connects policy has been changed and the connects are paid. Details of their pricing are given in their community blog. Freelance jobs are of 1 to 6 connects depending on the scope of the job. Now freelancers have to buy Upwork connects for 0.15$ each. A freelancer will lose his connects if he applies for a freelance job and the client hires another freelancer. But if the client doesn’t hire anyone then he will get his connects back. So, freelancers have to think more than once before applying for a freelance job.

In this article, we will discuss the points which you have to keep in mind before applying for the job if you want to save Upwork connects. So read carefully and keep the points in mind.
How to create theme relation between components in Angular
Tags: angular, css, javascript
Published: 2021-08-04 07:28:16

When we create a component, you can reuse it in some places, and his style should also relate to his container or the context.

We use the host-context pseudo-selector to create a relation between components and match styles with the container or another component.

> you can read more https://angular.io/guide/component-styles#host-context

For example,  we have a button component in the main app or the product component. The button needs to adapt the styles for both of them.  

If the product or main app components change their colors, it needs to react to them. In short, something like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7nskj6j9ij0pmrlmlde.gif)

Let's build something like this using the:host-context selector.

## The power of :host-context()

The:host-context pseudo-selector help us to create a relation between components, for example, the product component with the my-app component.

```css
//product.component.css
:host-context(my-app.dark) .content {
  background-color: black;
  color: white;
}
```
When the component my-app gets the dark class, the product component applies these styles because the css selector matches.

Also, we can define multiple relations with our components like the following example.
 
## Multiple relations

We already know how to match one selector for the background, so let’s build multiple selectors with the new rules.

- Set background to white smoke when the `app-product` gets the day class.
- Set background to blue, when `app-product` get the .dark class.
- Set background to pink when the `my-app` component gets the .dark class. 

Edit the button.component.css, and add the following lines to affect the `.btn` class selector.

```css
//button.css file.
//Relation with app-product with the day class
:host-context(app-product.day) .btn {
  background-color: whitesmoke;
}

//Relation with app-product with the dark class
:host-context(app-product.dark) .btn {
  background-color: black;
  color: whitesmoke;
}

//relation with my-app with dark class
:host-context(my-app.dark) .btn {
  background-color: pink;
  color: white;
}
```

Perfect! The button component has a relation with the parent and the main app component.

Feel free to play with the demo if you want to see a small real demo and see how child components react to the relations between components.

{% stackblitz host-context-angular-demo view=preview %}

##  Done
That's it! Hopefully, give you a bit of help with link style relations between components using the host-context pseudo-selector.

If you enjoyed this post, share it!

Photo by <a href="https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Annie Spratt</a> on <a href="https://unsplash.com/s/photos/parent-with-childs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Data Structures And Algorithms For Not So 'Algorithmic' Languages 1: Introduction
Tags: php, algorithms, javascript
Published: 2021-08-04 07:08:27

Okay so before you say "Not another post about data structures!" stay with me. So i might have to be cliche and say, the importance can never be overemphasized. Algorithms basically controls the world. Okay so not in the way the illuminati does(if you believe in conspiracy theories!) but basically in a "make things run smoothly" manner. Every piece of software out there are working because someone very smart wrote a very efficient algorithm. And contrary to beliefs, it's not that hard to write algorithms. And algorithms can make you lots of money. Yup you heard that right!
![Image Of Money](https://www.investopedia.com/thmb/SppWLpMQCR7dTrHq022rjDAe6TU=/1337x1003/smart/filters:no_upscale()/GettyImages-1054017850-0c7ca7d8368c4ab681a3d9c0fd2892e8.jpg)

So this post and other subsequent post would be to introduce you to the world of data structures and algorithms, but we will be writing looking at them in languages that you'd not normally write algorithms in. I mean languages like java, c++, c# and other *big boys* are the go to languages for data structures and algorithms courses as they have  some of the datastructures we would be looking at out of the box. So people who actually write in the so called low level languages sometimes feel left out. As a PHP and dart developer i feel that way sometimes. 
![sad](https://res.cloudinary.com/jerrick/image/upload/v1576795767/5dfbfe771b356f001cb4f52d.jpg)

So this thread will be for these left out languages. Even though the concepts of data structures and algorithms are the same across all languages, seeing a piece of code in a language you are familiar has this level of peace it gives. The way it will work is any algorithm we are going to look at will first be explained, then we will write the algorithm in php, dart, python and javascript. Also we will look at the big O notation of these algorithms too. Note that these algorithms are usually questions gotten from leetcode, hackerrank and so on.

So sit back, relax and stay tuned. I will try so put out posts regularly. As we all know every developer is busy so indulge me if you can. Also no one is an island of knowledge so if i miss something kindly point me to it in the comments. See you soon!
How I set up AWS Kubernetes Jenkins pipeline?
Tags: aws, terraform, devops, cloud
Published: 2021-08-04 07:03:33

{% youtube ENNBdmNn4r0 %}

In this lab session I will be setting up Kubernetes jenkins pipeline on AWS.

This will be a long session but I will be setting up everything from the scratch.

Here are steps which we will go through  - 

1.  Setting up AWS EC2 Machine - First we need to set up EC2 machine where we will be installing the Jenkins along with Gradle, kubectl, eksctl, docker. We can not use t2.micro instance because we will need more CPU and memory to run Jenkins and Gradle.

2. Connect to EC2 machine - After starting the EC2 machine we will use the private key-pair file to connect to EC2 instance.

3. Install JDK - As we need to install Jenkins so we need to have JDK(https://adoptopenjdk.net/) pre-installed onto the EC2 machine. For this lab session I will be using adopt open JDK 11.

4. Install and Setup Jenkins - In this step we are going to install Jenkins and also going to the setup admin user 

5. Assign administrative privileges to Jenkins user - After installing and setting up the Jenkins on EC2 machine we need to assign root privileges so that we can execute Docker and Gradle commands inside the Jenkins pipeline

6. Install Docker - The next step would be to install docker so that we can create a docker image and push the docker image to docker hub

7. Install and Configure AWS CLI - After installing the docker we need to install and configure AWS CLI so that we can use EKSCTL to set up and start the Kubernetes cluster.

8. Install kubectl - Also along with EKSCTL we need to install Kubectl so that we can view the deployments and services

9. Install eksctl - Now we need to install eksctl so that we can set up and start the Kubernetes cluster without using AWS UI 

10. Add docker hub and GITHUB credentials - As we need to clone the github repo and push the docker image to docker hub we need to store credentials of github and docker inside Jenkins.

11. Jenkins script for stages - Once we are done all the above steps we are going to write the Jenkins pipeline scripts for all the stages
What are terraform Provisioners? 
Tags: aws, terraform, devops, cloud
Published: 2021-08-04 07:00:28

{% youtube xZGO7gYGlQY %}

Terraform provisioners are of three types - 
1. file 
2. local-exec 
3. remote-exec

1.File provisioner - The file provisioner will help you to copy the file securely from the local machine or development machine to the remote Ec2 instance.

2. Local provisioner - The local-exec provisioner invokes a local executable after a resource is created. This invokes a process on the machine running Terraform, not on the resource. It will help you to run the shell command onto your local machine instead of the remote EC2 instance. The local provisioners are  

3. Remote provisioner - The remote-exec provisioner invokes a script on a remote resource after it is created. This can be used to run a configuration management tool, bootstrap into a cluster, etc. It will help you to run the shell command onto the remote Ec2 instance of AWS or virtual machine of Google Cloud

In this lab session, we will go through the following steps - 

1. Create a Virtual ec2 instance on AWS.

2. Write a file provisioner to copy the file from the local development machine to the remote development machine

3. Create a key pair(public and private key) so that we can ssh into the Ec2 machine.

4. Implement a local provisioner to execute a shell command onto the local development machine 

5. Finally implement the remote the provisioner to copy the file as well as the written text into that file
Weekly web development resources #83
Tags: weekly, webdev
Published: 2021-08-04 06:36:55



______

##[Instahues](https://instahues.com/)
[![Instahues](https://wweb.dev/weekly/content/83/instahues.jpg)](https://instahues.com/)
A collection of free color palettes and gradients.

______

##[Wicked Backgrounds](https://wickedbackgrounds.com)
[![Wicked Backgrounds](https://wweb.dev/weekly/content/83/wickedbackgrounds.jpg)](https://wickedbackgrounds.com)
A generator to create Create beautiful SVG backgrounds for your UI designs. 

______

##[Password-protected pages on Netlify](https://www.thomasvantuycom.com/password-protected-pages-on-netlify/)
[![Password-protected pages on Netlify](https://wweb.dev/weekly/content/83/password-protected.jpg)](https://www.thomasvantuycom.com/password-protected-pages-on-netlify/)
A nice article on how to create password protection on Netlify.

______

##[Piped](https://github.com/TeamPiped/Piped)
[![Piped](https://wweb.dev/weekly/content/83/piped.jpg)](https://github.com/TeamPiped/Piped)
An alternative, privacy-friendly YouTube frontend.

______

##[Welcome UI](https://www.welcome-ui.com/)
[![Welcome UI](https://wweb.dev/weekly/content/83/welcome-ui.jpg)](https://www.welcome-ui.com/)
A customizable design system library made with react, styled-components.

______

##[Blobbb](https://www.blobbb.fun/)
[![Blobbb](https://wweb.dev/weekly/content/83/blobbb.jpg)](https://www.blobbb.fun/)
A cool generator for fluffy blobby SVG shapes.

______

##[CSS Modules (The Native Ones)](https://css-tricks.com/css-modules-the-native-ones/)
[![CSS Modules (The Native Ones)](https://wweb.dev/weekly/content/83/css-modules.jpg)](https://css-tricks.com/css-modules-the-native-ones/)
A nice article by Chris Coyier on CSS Modules.

______

##[Next.js Blog Boilerplate](https://bestofjs.org/projects/next-js-blog-boilerplate)
[![Next.js Blog Boilerplate](https://wweb.dev/weekly/content/83/nextjs-starter.jpg)](https://bestofjs.org/projects/next-js-blog-boilerplate)
A boilerplate for a blog based on Next.js 10+ framework with Tailwind CSS 2.0.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
UI Dev Newsletter #68
Tags: html, css, javascript, a11y
Published: 2021-08-04 06:28:15

**Links**


- [There Is No Such Thing As A CSS Absolute Unit](https://bit.ly/3fmlfJV)
Elad Shechter explains why CSS absolute units aren’t so absolute.


- [Accessible Overflow](https://bit.ly/3fmc8Je)
Marcus Herrmann shares his research on containers that harbor content that is either horizontally or vertically too large for its parent and the current state of overflow scrolling affairs.


- [What I Wish I Knew About CSS When Starting Out As A Frontender](https://bit.ly/3jaPKDP)
Nathan Hardy shares three key concepts vital to understanding CSS, especially if you are a beginner.


- [Aligning a Button Label Vertically](https://bit.ly/3ikCptr)
Ahmad Shadeed explains how to achieve a perfect vertical alignment for buttons by adding a pseudo-element with zero width and a fixed height.


- [10 Awesome JavaScript Shorthands](https://bit.ly/3C5bgT4)
Palash Mondal shares ten awesome JavaScript shorthands that will increase your speed by helping you to write less code and do more.


- [Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ...](https://bit.ly/3C9xV0i)
Maël Nison, a Yarn maintainer, highlights changes from a new major version of Yarn.


- [JavaScript Quiz](https://bit.ly/3jgVsUw)
Marko Denic and Oliver Jumpertz created a quiz to check your JavaScript knowledge by having fun.


- [Layoutit grid](https://bit.ly/3C9y2sK)
Quickly drawdown web page layouts with our clean editor and get HTML and CSS code to start your next project quickly.


**Self-promotion**

- [You don’t need React for building websites](https://bit.ly/3jd4jql) 

I published an article about not using React to build websites, which triggered an interesting discussion last week.


Happy coding!

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
Data Structures & Algorithms in JavaScript -- PS-1.
Tags: javascript, algorithms, tutorial, arrays
Published: 2021-08-04 06:20:13

## Given an array, find the first pair whose sum is equal to zero?
### Input = [-5, -4, -3, -2, 0, 2, 4, 6, 8].
### Output = [-4, 4].

**Solution:**
Check the given array is sorted or not. If not sort the array.
##### Approach 1:
We need to traverse the each and every element of the array and compare it with other elements of the array.
We have to apply two loops in it. The first loop (outer one) will start traversing from 0 index of the array and the second loop (inner one ) will start traversing from 1 index of the array. If the sum of  0th index of array and 1st index of array is equal to ZERO then return the pair.
By using this approach we will get **Quadratic Time Complexity O(n²).**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eja9lflw8k0wotvrn8r5.png)

##### Approach 2:
Let's assume to variables and assign them with 0 index and last index of array:
* let left = 0;
* let right = array.length - 1 ;
We need to run a single loop in which we will check if the sum of the left index value and right index value of the given array is equal to Zero, then return that Pair. If sum (left, right) > 0 then decrement the right variable (right--). If sum (left, right) < 0 then increment the left variable(left++).
By this approach we can get the Pair of Sum Zero in only one loop.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9zyjyhpstz1zylhw5dq.png)

By using this approach we will get **Linear Time Complexity O(n).**
Why make a Bootstrapy Website if there's TailwindCss!
Tags: tailwindcss, react, webdev, css
Published: 2021-08-04 06:10:25

**How Tailwind Is Different From Other Frameworks?**

**Tailwind** is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit.

Most UI frameworks like Bootstrap, Material UI, Bulma etc. have pre-designed UI components like cards, buttons, navbars, alerts. You use those components and create designs on top of those components.                                                  

But in **Tailwind CSS**, you don't get a pre-designed set of components. You get utility-classes. You can combine those to create your layout and components.
Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

It doesn't have a default theme, and there are no built-in UI components.    
![frameworks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z433piduf4676m7ykt70.jpg)                          

On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.                                             

If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.                              

But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.       

**Utility-first**                                            

Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.
                                        
Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.          

**Responsive**
If you use Tailwind CSS, you don't need to write **custom styles** for handling responsiveness for different screen sizes. You can use Tailwind's responsive utilities to handle it easily.

Frameworks like **Bootstrap** have one major **disadvantage**. Due to increased growth and usage, they became too big and offer less control over their styles. Learning frameworks like Bootstrap has become increasingly challenging because developers have to learn hundreds of classes.

**Tailwind** and **bootstrap** both have their place in the development landscape, but you’re better off to learn raw CSS as a fundamental skill first, then try and use both of the frameworks and make your decisions in a position of understanding.

So that was it from this article😇.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at [twiter](https://twitter.com/job_pick) , [jobpick.in](https://jobpick.in/)
HTML tags | legend
Tags: html, tags, legend
Published: 2021-08-04 06:05:29

Used to **insert a title in a** `<fieldset>`. It must be inserted just after `<fieldset>`, as the first child.

It is usually rendered centered in the middle of the `<fieldset>` border, it can be repositioned with CSS although depending on the design it can sometimes be a bit difficult to achieve the desired effect.

- Type: *block*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend) | [Support](https://caniuse.com/mdn-html_elements_legend)
Why we need Data Structures and Algorithms 🤔
Tags: algorithms, dsa, datastructures, programming
Published: 2021-08-04 05:32:31

*If you are a student you might have heard many a times from your teachers or your seniors that Data Structures and Algorithms are very important topic and if you want a good job you should definitely learn it, right?.*

In this post we will learn what is this and also why we need to learn it😉

###What is Data Structure?

> In simple words, Data Structure is way to organize data in an **efficient** manner.

*Suppose you have a data of your class (such as id, name, email, etc.) and your teacher told you to store that data in a way so that teacher can easily access and modify that data. What will you do? How will you store that data?*

*Easiest and common way to do this can be to store that data in an Excel file and share that file with your teacher. Nice*

Yeah, now you have understood that why we need this Data Structures i.e *to store the data in a way that is easier to access and modify*.

Now what is this algorithm?

> We can define it as a collection of steps to achieve something.

*Imagine you have to do addition of two numbers. How will start? Will you directly add numbers? or Will you check if we have given two numbers?.*

*This is how I will do it
Step 1: Check if I have two numbers, if not request two numbers
Step 2: Now I have two numbers, so I will add that two numbers and display result on the screen*

Now you might be thinking, why will I waste my energy in writing this steps if I can do it directly. Yes, of course you can do such small operations directly. But when we have to do complex and large operations, it is recommended that we must first decide how our goal can be achieved.

Enjoy!. Now know what is Data Structures and why we need it and you also know about algorithms.

Thankyou for reading my post. If you find it informative, please do follow me, like and share with your friends.



Follow me on Twitter : [Omkar Bhoir](https://twitter.com/Omkar_127_0_0_1)
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 9
Tags: php, javascript, webdev, tutorial
Published: 2021-08-04 05:12:49

Netflix provides streaming movies and TV shows to over 75 million subscribers across the globe. Customers can watch as many shows/ movies as they want as long as they are connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces original content and also pays for the rights to stream feature films and shows.

In this video,we will create a  proxy way to native pdo methods


{% youtube L0XBAWS4KTM %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)