teleren/devto huggingface dataset:
Exploring the EyeDropper API
Tags: javascript, css, webdev, eyedropper
Published: 2021-10-26 14:34:00

The [EyeDropper API](https://github.com/WICG/eyedropper-api) has landed in [Chrome and Edge 95](https://www.chromestatus.com/feature/6304275594477568)! This is a simple promise-based API that lets you select a color from anywhere on the screen. Let's dive in and see how it works.

To start, we'll add a button that activates the eye dropper.

```html
<button type="button">Select a color</button>
```

When the button is clicked, we'll launch the eye dropper. As soon as the user selects a color, we'll update the page's background to match.

```js
const button = document.querySelector('button');

if ('EyeDropper' in window) {
  const eyeDropper = new EyeDropper();

  button.addEventListener('click', () => {
    eyeDropper
      .open()
      .then(colorSelectionResult => {
        document.body.style.backgroundColor = colorSelectionResult.sRGBHex;
      })
      .catch(() => {
        // The user canceled selection
      });
  });
} else {
  // The EyeDropper API isn't supported
}
```

{% codepen https://codepen.io/claviska/pen/OJjmMgz %}

## Breaking it down

Here's what's happening in the code above:

1. Feature-detect the API
2. Instantiate an EyeDropper object
3. Listen for button clicks
4. Call the eye dropper's `open()` method, which returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
5. Wait for the promise to resolve (the user selected a color) or reject (the user canceled selection)
6. On resolve, grab the hex value and set the background
7. On reject, do nothing (the empty `catch` will prevent an error hitting the console)

Note how I'm feature-detecting the EyeDropper API. This is important because, at the time of this writing, Firefox and Safari don't support it. That doesn't mean you can't use the API to progressively enhance your users' experience, though!

For example, I'm using it in [Shoelace's color picker](https://twitter.com/claviska/status/1452990807640875011?s=20) to show an eye dropper if the API is available. Otherwise, I don't show the eye dropper but everything else still works.

## Another Example

I whipped up another example that's a bit more practical. Play around with it and let me know what you think!

{% codepen https://codepen.io/claviska/pen/ExvmjqQ %}
EKS - Disk configuration
Tags: aws, sre, devops
Published: 2021-10-26 14:30:55

Here is something little tricky that I learned which is not really clear in the AWS documentation.

## Problem
When you have a Kubernetes cluster in AWS *(EKS)*, you will need to have a lot of space for each node's disk. 
If not you will have some **PLEG is not healthy** errors.

## Solution
Following advices of the AWS support, *(in my case)* I need to set this value to **150Go** to let some space for all your pods/images/deployments...

The weird thing is that I haven't seen any documentation which explain how much we need to define for each kind of EC2 instance.

If you have this link, please send it to me.

### Monitoring
Also you can monitor some values in Cloudwatch *(if you have a cloudwatch agent on your cluster)* to check if everything is alright, and set up some alerts to be aware if something wrong is happening.

Link : [AWS Documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/metrics-collected-by-CloudWatch-agent.html)

---

I hope it will help you!
Saving Time as a Freelancer
Tags: productivity, cloud, devops, webdev
Published: 2021-10-26 14:26:54

Written by Dan Parry.

---

>I was sick of working 9–5 so I quit my job and went freelance, now I work 24/7 - Unknown freelance dev, 2021

Freelancing in tech can be both rewarding and highly demanding. You're hired to deliver and you need to come up with the goods to earn your paycheck. Your work needs to be high quality and on time if you want to keep getting hired. 

But when you're just one person, delivering a consistently high standard can be a challenge, especially when you're using the wrong tools. So today we want to tell you how we're trying to help…we've built an all in one online code editor, GitOps manager and Cloud provider.

![webpages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b7xagn2qhvcpgcyr87w.png)

---

###How does that help me as a freelancer?
Time is a resource to us all, but freelancers know this pain more than most. With multiple clients asking for last-minute changes or updates of projects, anything that can save you time is an invaluable weapon in your arsenal. 

Codesphere puts your entire development pipeline in one place, so you don't need to sign up and into multiple tools for each stage of the development process. It comes with automatic CI/CD and managed infrastructure with no config required, so you can spend more time coding and building your projects. 

---

###Keep your projects live and make changes on the fly

The product you deliver to your client very likely needs to be live all the time. If it goes down, you can expect some angry phone calls, and no excuse you give will be good enough; You are expected to provide consistent and reliable service. Deploying and hosting on Codesphere is all taken care of, so you don't have to worry about it.

Your project is live, but what if you need to make changes? You have to bring it offline, make the change, push the master, rebuild the image and then redeploy. But what if you could make changes to the live app? Codesphere lives in your browser and deploys, tests, and scales as you type.

![key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc2slt5bftyebts2u9sk.png)

---

###It works on my machine

Like debugging, handing over the project to your client also needs to be seamless, and it needs to work every time. Coding to the cloud guarantees what you coded is what your client sees when it's time to present it. No environmental constraints to deal with and no unexpected deployment surprises, it always works on their machine… 

---

###What's your take?

We know we're tooting our own horn here, but we want you to know what Codesphere actually is. We're still trying to find the people we can best help, so give us your feedback, tell us what you want to see in a product like ours. What problems are you facing that we can help solve?

Don't believe us? [Try us out](https://link.codesphere.com/EW) and help us build a better product - we're still trying to solve the DevOps problem…and maybe you don't even have a DevOps problem. Then again, no one had a problem with horses until the car came along.
Fazendo deploy de sites Nuxt no Github Pages
Tags: vue, github, webdev, tutorial
Published: 2021-10-26 14:11:41

## Introdução

Seja uma landing page, site pessoal ou até mesmo um portfólio, em todos estes casos o que você precisa é de um site estático. Neste tutorial eu vou mostrar como você pode publicar um site criado com Nuxtjs no Github Pages de uma forma bem fácil.

## Criando o projeto

Para criar um novo projeto nuxt execute o comando abaixo no seu terminal:

```bash
npx create-nuxt-app nome-do-projeto
```

Assim que o CLI iniciar você pode selecionar as opções conforme desejar. Atente-se apenas à última etapa, que é referente à forma de renderização. Você deve selecionar a opção **Static**.

## Configurando o Projeto

Para que seja possível publicar o projeto no Github Pages precisamos fazer algumas configurações. Primeiramente é preciso definir o "rootPath" da aplicação, para isso abra o arquivo `nuxt.config.js` e adicione esta linha de código:

```javascript
router: { base: '/nome-do-projeto/' },

```

Substitua **/nome-do-projeto/** pelo nome do repositório que você criou no Github. Caso ainda não tenha feito isso, crie um novo repositório e vincule-o ao seu projeto seguindo as instruções que o próprio Github te fornecerá.

Em seguida abra o arquivo `package.json` e adicione na lista de scripts o comando abaixo:


```json
"scripts": {
  ...
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
```

Por fim instale o pacote `push-dir` como dependência de desenvolvimento com o comando:

```bash
npm install push-dir --save-dev
```

Este pacote será responsável por pegar os arquivos compilados  do site no diretório `/dist` e publicar no Github.

## Configurando o Github Pages

Acesse o repositório que você criou no Github e crie um novo branch chamado `gh-pages`. Este branch será utilizado para armazenar os arquivos compilados do seu site.

Depois de criar o branch acesse a aba **Settings**, clique na opção **Pages** no menu lateral e na sessão **Source** selecione a branch `gh-pages` conforme descrito na imagem abaixo:

![Configurações Github Pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljxblub2ky7ygoufxp4w.png)

## Fazendo o Deploy

Agora que você já configurou o projeto e o Github Pages, basta rodar estes comandos:

```bash
npm run generate
```

Este comando vai compilar o projeto e jogar os arquivos finais no diretório `/dist`. Caso você queira testar o resultado final antes de publicar o site é só rodar o comando `npm start`.

Agora para publicar o site execute este comando:

```bash
npm run deploy
```

Vale ressaltar que sempre que você fizer alterações no site será necessário executar os comandos `npm run generate` e `npm run deploy` para atualizar a versão publicada.

E assim chegamos ao fim deste tutorial, espero que tenha gostado ;)
My First Job Offer 
Tags: accenture
Published: 2021-10-26 14:05:13

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dchmi944o4m9j59ycepi.png)

# 19-10-2021(10:20 PM)😎

I was quite normal and started watching "The journey to the center of the earth" movie and suddenly after 2 mins I got the message from my TPO in placements group in whatsapp.

"""

Congratulations! 
 The list of students selected in Accenture 

 Saicharan Gouru
	Advanced ASE

"""

This was the time I was waiting from long ago and finally my TPO announced that I was selected for Advanced ASE role in Accenture company.

This was very important, crucial and much needed moment for me and finally it's in my hand now finally.

This was the day and this was the moment I was waiting from long ago 😀.

I'm very excited that I got this job offer in very starting of my final year in B.Tech.

The most awful thing is the first company for which I gave interview is Accenture and I got selected for it.

This became even more special because I got selection mail from
Accenture on 20-10-2021, Which was my mom's birthday 💖😍. I can't forget the smile which came from my mom and brother when I conveyed this to the. It will be in my mind forever.

The journey was not at all easy and hoping for the best in my future with Accenture.🤗
Linux Azure DBA Tools
Tags: linux, azure, sql
Published: 2021-10-26 13:56:34

Theoretically, Azure Data Studio is all you need to manage Azure SQL databases on Linux, but it doesn't seem to work that way. I frequently end up with "login failed for token-identified-principal" after being connected for only a few minutes. This makes using Azure Data Studio an exercise in frustration, wondering what combination of operations will result in ADS just conking out on you until your token expires.

Azure SQL doesn't support the standard T-SQL `BACKUP` and `RESTORE` commands, so getting a copy of your database for local development is somewhat challenging. The Azure Portal requires the AAD admin credentials, not something I want to give out to developers. Enter SqlPackage, which I have started preferring to both the Azure portal and ADS. SqlPackage for Linux is available at https://aka.ms/sqlpackage-linux.

A first attempt at copying the database from Azure might look like this:

`sqlpackage /a:export /scs:"Data Source=...Initial Catalog=..." /ua:true /tid:"mytenant.onmicrosoft.com"`

Indeed, that's what I attempted. But UniversalAuthentication (required to authenticate with MFA) doesn't seem to work as expected on Linux. You would expect that a browser would be launched to login to the application (since MFA won't work without a browser). However, the command above doesn't work.

Looking through the SqlPackage help, I see that there is a `/AccessToken` option. We can manually obtain an access token and use it to authenticate. Access tokens can be obtained using the Azure CLI, using the command `az account get-access token --resource https://database.windows.net/`. This will return a JSON body containing (among other things) the access token to use. Copy and paste this into an environment variable `ACCESS_TOKEN`, and then the full sqlpackage invocation becomes:

`sqlpackage /a:export /at:"$ACCESS_TOKEN" /scs:"Data Source=..." /ua:True ...`
Angular and React fun way 😄
Tags: angular, react, discuss, programming
Published: 2021-10-26 13:37:36

There is no doubt companies are putting everything and constantly upgrading but, finally It's up to developer who decides which is best suitable for their application.


![Lets chill](https://cdn.pixabay.com/photo/2015/07/10/17/53/beer-839865_960_720.jpg)

It's just for fun! Let's say if they're film actors and meet at some big film premiere party &#127867; &#127870;

*Angy - Hello Re, wassup!!!*


Re - Hey Angy, Long time how are you doing buddy!

Re - All good men.

*Angy - Dude, You know what, I want to buy you a drink.*

Re - No, You're the man. Drinks on me. 

*Angy - You sure?*

Re - Yeah dude. Let's chill. Howz life men.. You alright?

*Angy- Yep, Recently bought new big Villa on 12th street shifted there. Let's chill sometime at my place.*

Re - cool, Interesting. I've also recently moved to 17th street nice cool apartment very dynamic functional cool design. Decided to move to modern but, I'm keeping old classy traditional too at 15th street.

*Angy - Nice! You know let's order something.*

Re - Sure, What you will prefer. I know Mc Thnuder NgRx 1!!!

*Angy - You got it! men... but, I don't know yours Is it MxContext, Redux Pt. which one I forgot.
You always make me difficult to chose as you've many options.*

Re - Haha, Me and you are totally different men but, I like your choice. You know what recently got this contract with production house. Nextjunction. One more on the way Remix production.

*Angy - Howz things are going for you in industry? What do you think your fans are liking it your style your recent work? From media I hear that people are going crazy.*

Re - It's alright I can say. Last few years you've also done some very good projects. You've very huge fan following.

*Angy - yeah yeah...but, sometimes it is very difficult to hold and make it up mark. nowadays you're killing it. You're very close to your fans. We both are flexible but, my director demand mostly in Big leading roles.* 

Re - Thanks Angy! Yeah it's always up to our directors and fans what kind of role they want us to play. I Can say just go with the flow. I've observed many times you do big interesting stories where I do more of content driven very different stories. You know what..like in this party my wife always asks me to wear casuals as I looks good on me so usually i prefer casuals and I believe your wife must be likes you in formals. You know this new guy Vu is also in market and people also going crazy behind him.

*Angy - Yeah men, we both know.. I've started hitting gym and taking this IVY pills helping me a lot.. feeling better nowdays. we both are trying hard from performance side but, its up to fan to decide*

Re - Yeah mate, finally It's up to fan to decide. I also have this contract with multiple third party agencies which helps me in my makeup touchup and improving my acting and skills.

*Andy - Cool, that looks interesting. I need to talk to manager about it.*

Re - It was nice seeing you Andy. Let's hangout some other day.

*Andy - Yepp men.. definitely.. bring that dude (vu) as well.*

Understand dContext &#128516;
I hope you like it
Wine Spectator's Top 100 Wines - Ruby CLI Project
Tags: ruby, gem, programming, bootcamp
Published: 2021-10-26 13:18:59

For the first project in Flatiron School's Software Engineering Bootcamp, students are asked to build a Command Line Interface (CLI) to an external data source. The CLI should be composed of an Object Oriented Ruby application, and demonstrate knowledge gained during the Ruby Module of the program. 

For my project, I scraped data from Wine Spectator's list of [Top 100 Wines of 2020](https://top100.winespectator.com/lists/) and created an app that allows users to interact with the information provided.

_____________________________________________________________

#PLAN

Being that this was my first full-scale project build, I spent a considerable amount of time in the planning phase. I studied the requirements, watched live build videos, and explored code from other projects to visualize how I wanted to structure my own. 

**REQUIREMENTS**

+ Provide a CLI
+ CLI application must provide access to data from a web page
+ The data provided must go one level deep - where a user can make a choice and receive detailed information on their selection
+ Use strong Object Oriented design patterns - data should be stored in a collection of objects, not hashes

**OUTLINE**

The goal of the Top 100 Wines CLI App is to output a numbered list of wines by rank, allow the user to select a wine that they're interested in, provide the details of that wine, and then either loop back to the list or exit the program based on user input. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79oweuhqvnaizzqgxuvo.png)
_____________________________________________________________

#BUILD

After creating the skeleton of my application (bin files, gemspec, environment, etc.), I focused on the structure and responsibilities of my Class files.

**SCRAPER CLASS**

The Scraper Class is responsible for scraping data from the Wine Spectator website. 
{% gist https://gist.github.com/katherine-walendzik/fa96ab632e1a4c22f00db6a8c9cc7bd2 file=scraper %}

**WINE CLASS**

The Wine Class is responsible for creating and storing wine objects. 

{% gist https://gist.github.com/katherine-walendzik/fa96ab632e1a4c22f00db6a8c9cc7bd2 file=wine %}

**CLI CLASS** 

The CLI Class is responsible for all operational functionality. In addition to listing the wines numerically by rank, I implemented a method asking the user which group of wines they would like to view in intervals of 20. I also utilized the Colorize gem to add some visual depth to the program. 

{% gist https://gist.github.com/katherine-walendzik/fa96ab632e1a4c22f00db6a8c9cc7bd2 file=cli %}

_____________________________________________________________

#EXECUTE

The video below demos the app at runtime. 

<a href="http://www.youtube.com/watch?feature=player_embedded&v=ClrY_aHCvmQ
" target="_blank"><img src="http://img.youtube.com/vi/ClrY_aHCvmQ/0.jpg" 
</a>

_____________________________________________________________

######[cover photo by Mathilde Langevin on [Unsplash](https://unsplash.com/photos/IGJ_21drT3g)]
Getting Started with Hacktoberfest
Published: 2021-10-08 22:27:58

It's not impossible to nail a `good first issue` this Hacktoberfest. Even if you have almost zero experience with coding, you can still find a solvable issue. I hope this example below should encourage you a bit.

## The Issue
I found a small issue with `package.json` file in the [Telescope repo](https://github.com/Seneca-CDOT/telescope). Because there had been some changes to the project structure, two scripts included in that file became obsolete. The [issue](https://github.com/Seneca-CDOT/telescope/issues/2212) clearly describes what the problem is and how you can resolve it.

![Screen Shot 2021-10-07 at 6.03.25 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcjho3izpjflmqlf9ov8.jpg) 

## The Solution
To resolve this issue, I literally just had to remove the 2 redundant lines below in `package.json` file.

```
"api:start": "docker-compose -f ./src/api/docker-compose-api.yml up --build -d",
"api:stop": "docker-compose -f ./src/api/docker-compose-api.yml down",
```

That already solved the issue, but I ran all the tests just to make sure everything was working fine. Fortunately, the tests passed, so I quickly made a [PR](https://github.com/Seneca-CDOT/telescope/pull/2327) 🥳. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wkltjbthcptplrb35xu.png)

I thought I was done with it, but I was wrong. One of the project members [commented](https://github.com/Seneca-CDOT/telescope/pull/2327#issuecomment-932831576) that some tests failed because of another issue. This required me to rebase my PR after the fix was merged into the `main` branch.

![Screen Shot 2021-10-07 at 6.23.04 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enke8hl3oqihsgvbu7nu.jpg)

Rebasing my PR helped my change include the fix as its base (as older commits), which successfully made all the tests passed. I also noticed [rebasing public history is not recommended](https://www.atlassian.com/git/tutorials/rewriting-history/git-rebasev), but I think it should be fine for a PR. (**Let me know in the comments if you have a better approach to this**)

## Conclusion
Getting started with resolving `good first issue` isn't as terrifying as we imagine. There's always an issue small enough for us to handle, but you certainly have to search for it thoroughly.
Divtober Day 26: Spice
Tags: codepen, divtober, css, art
Published: 2021-10-26 13:16:21

---
title: Divtober Day 26: Spice
description: My entry for divtober day 26 (spice): a bottle of curry powder in CSS and a single HTML element.
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa5stknickho6fos9fmv.png
---

The word of the day in divtober is "Spice." So I drew a bottle of spices using CSS and a single HTML element:

{% codepen https://codepen.io/alvaromontoro/pen/wvqJNGZ %}

It was interesting trying to make it look more realistic (although it seems that the browser struggles a little 😳). I learned a bunch about shadows by tinkering with them (e.g. not all shadows are black or white, multiple shadows from multiple directions make it look nicer... they may be basics for people with experience, but that was _new-ish_ to me.)

And here's a video of how the drawing was done:

{% youtube 1SCCwqehAYA %}