teleren/devto huggingface dataset:
Animation shorthand property 😘
Tags: css, tutorial, beginners, todayilearned
Published: 2021-02-14 16:10:50

Hey lover people, Happy valentines day 💝💋

Hope you are enjoyed your day with your partner.

This post is a part of our "20 Days of CSS animation post".

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

In this dev post we will learn animation shorthand property, So let do it.

First of all play with this codepen.

{% codepen https://codepen.io/atulcodex/pen/ExNZxLP %}

This is long animation properties

* animation-name: grow;
* animation-duration: 1s;
* animation-timing-function: ease;
* animation-delay: 1s;
* animation-iteration-count: 4;  
* animation-direction: alternate;  
* animation-fill-mode: backwards;

And this is the shorthand of our animation properties. 

* animation: grow 1s ease 1s 4 alternate;


But keep in mind we can't write fill mode in shorthand property. we have to write it in a separate line. like this 

* animation-fill-mode: backwards;

That's all for this post And if you are interested to learn CSS you can join [E-Learning platform](https://www.eduonix.com/UHJvZHVjdC0xMzE1MDIw).
CUPS Yazıcı Sunucusu Uzaktan Yönetme
Tags: cups, yazici, printer, uzaktan
Published: 2021-02-14 16:08:37

Apple'ın açık kaynak kodlu olarak geliştirdiği CUPS yazıcı sunucusu'nun kendi içerisinde uzaktan yönetim arayüzü bulunmaktadır. Kurumsal olarak domain ortamlarıyla entegrasyonu için SAMBA gibi araçlara ihtiyaç duymasına rağmen temel seviyede paylaşım için buna ihtiyaç duymamaktadır.

https://github.com/apple/cups

# CUPS Yönetim Web arayüzü

CUPS servisini kurduğunuzda ki hali hazırdaki bir çok istemci Linux İşletim Sistemi (Ubuntu, Linux Mint, Pardus gibi) CUPS servisi ile birlikte gelmektedir. CUPS servisi yönetimi için bir çok arayüz uygulaması olmasına rağmen yerel makinenizin üzerinde aşağıdaki bağlantı ile web arayüzü ile de yönetim sağlayabilmektesiniz.

```
https://localhost:631/admin
```

Bu adrese uzaktan erişmek isterseniz servis ayarlarından kaynaklı olarak erişim sorunu olduğunu göreceksiniz.

# CUPS Yönetim Arayüzüne Uzaktan Erişim Ayarlarının açılması

Öncelikle yetkili bir kullanıcı ile "**/etc/cups/cupsd.conf**" dosyasınızı herhangi bir editör ile açıp aşağıdaki değişiklikleri yapmanız gerekmektedir.

Dosya içerisindeki aşağıdaki satırın başına aşağıda olduğu gibi diyez koymanız gerekmektedir:

```
#Listen localhost:631
```

Sonrasında ilgili satırın hemen altına sadece yerel makineden erişmeden 631 portundan erişebilmesine yönelik ayarı eklemelisiniz.

```
Port 631
```

Tabi ki bu ayarı eklemek tek başıan yeterli değildir. İlgili dosyada aşağıdaki iki tag'i barındıran satırı bulmanız gerekir.

```
<Location />
<Location /admin>
```

Bu tag'lerin içinde muhtemelen kim tarafından erişilebileceği belirtilmemektedir. Bu erişimi sağlatabilmek için ya bir IP adresi, ya da Subnet aralığı veya herkesin erişmesini istiyorsanız aşağıdaki satırlardan birisini seçmeniz gerekir. 

```
  Allow 192.168.1.12
  Allow 192.168.1.0/24
  Allow from all
```

bu ayarlardan istediğimizi seçip hem / hem de /admin tag'lerinin içine yazdıktan sonra büyük ortanda işimizi tamamlamış olacağız. Bu adımdan sonra cups servisini yeniden başlatabilirsiniz:

```bash
sudo systemctl restart cups
```

Fakat yetki için şimdi de varsayılan olarak **lpadmin** grubuna üye olan kişilerin yönetebileceğini bilmeliyiz. Bunun için hangi kullanıcı adı ve parolası ile yönetmek istiyorsanız onu aşağıdaki gibi terminal ekranına yetkili hesap ile yazmanız gerekmektedir.

```bash
sudo usermod -a -G lpadmin kullaniciadi
```

Bu adım sonrasında artık belirttiğiniz kullanıcı ile uzaktan giriş sağlayabilirsiniz.

```
https://CUPSIPADRESI:631/admin
```

# Ek Ayarlar

Eğer lpadmin grubunun adını değiştirmek isterseniz **/etc/cups/cups-files.conf** dosyası içerisindeki **SystemGroup** geçen satırın yanındaki grubu düzenleyebilir veya yanına yenisini ekleyebilirsiniz. Bu grup cupsd.conf dosyasındaki **@SYSTEM** içeren tüm ifadeleri karşılamaktadır.

SYSTEM kullanıcıları dışında başka kullanıcılar ile çeşitli görevler yapmak isterseniz cupsd.conf dosyası içerisindeki kendi istediğiniz politikaları içeren tag'lerdeki **"Require user"** içeren satırlarda @SYSTEM'in yanında başka kullanıcı ve grup isimleri yazabilirsiniz.
Open Mail: Ask the right questions to the right people and make the conversation public
Tags: startup, feedback, question
Published: 2021-02-14 15:57:12

I would like to share my new side project with you; Open Mail (https://openmail.app). It is a platform that you can ask people their opinions about some ideas. The special side of it; all conversations can be read by anyone. It will be completely open for everyone. Asking a question in a private communication channel, like an email, is not useful for everyone. On the other hand, asking a question on a social media platform has a different problem; everybody can answer your question. But what about the expertise of the person who answers your question?

I want to solve this problem with Open Mail. You can ask a question to get a high-quality opinion from skilled people, and all the conversations between you will be able to read by everybody.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8jq1sz53j6nmzmmcbp30.png)

I continue to develop the Open Mail. But I created an early-access form to give an advantage to people who want to get the simplest or the best username. You can register to get early access with a beautiful username.

Also, I would love to hear your feedback about the idea. Please let me know everything about the product.

Looking forward to reading your answers.

https://openmail.app
Integrate ESLint with Jenkins Multibranch Pipeline
Published: 2021-02-14 15:56:12

A quick overview of ESLint + Jenkins integration, since I haven't seen many examples on internet.

---

For ESLint & Jenkins integration, we can use [Warnings Next Generation](https://plugins.jenkins.io/warnings-ng/) Jenkins plugin.

A partial Jenkinsfile example for Multibranch Pipeline project would be:

```
stage('Install dependencies') {
        steps {
            echo 'Installing dependencies...'
            sh 'rm -rf node_modules package-lock.json && npm install'
        }
}
stage('Build') {
        steps {
            sh 'npm run build'
        }
}
stage ('Static Analysis') {
        steps {
            sh ' ./node_modules/eslint/bin/eslint.js -f checkstyle src > eslint.xml'
        }
        post {
            always {
                recordIssues enabledForFailure: true, aggregatingResults: true, tool: checkStyle(pattern: 'eslint.xml')
            }
        }
    }
}
```

From plugin [documentation](https://github.com/jenkinsci/warnings-ng-plugin) on github:
> **recordIssues** step scans for issues in a given set of files (or in the console log) and reports these issues in your build.


This will enable a CheckStyle Warnings menu on your build #, like this:

![image](https://dev-to-uploads.s3.amazonaws.com/i/wikx8knu364bhv7druy3.png)

---

Questions? Suggestions? Please let me know.
Selenium Python Page Object Model
Tags: python, testing, webdev, tutorial
Published: 2021-02-14 15:55:36

In this post, we will learn what is Page Object Model and how to implement the Page Object Model with Selenium Python. Page Object pattern has been around for many years and is usually considered as one of the best practices to follow in the test automation industry.

### **What is Page Object Model (POM)?**
POM is a design pattern that makes it easier for us to maintain our code and reduce code duplication. It allows you to abstract any page related information away from your actual tests.

So to put it simply, all the selectors that are within your tests, we can extract that away and put it in a separate file which we can then reuse whenever we want.

---

### **Advantages of Page Object Model?**
- **Code separation** – Keep test and locators separately, makes our code clean, easy to understand, and maintain
- **Single source of the repository** – all the locators are stored in one place. Tests become short and optimized as we can reuse locators and page object methods
- **Readability** – improves significantly and makes it easy for new team members to start writing tests by following the existing structure

---

### **POM in Selenium Python**
These are the steps we’ll take to implement POM in Selenium Python:

- Create a new class under a new page_objects directory
Find all the selectors in your test and move them under the page class
- Identify any common methods you can create specifically for that page i.e. opening the page, log in, logout, etc…
- Import the page class in your test and replace selectors with page_object selectors and methods

![POM Code](https://dev-to-uploads.s3.amazonaws.com/i/wwlrs03af32da0c1z0jk.png)

In the code sample above, we have replaced the following selectors – logo_icon, get_started_btn, heading_text, and the copyright_text as well as added the open_page page object method.

Now, your page object class might look something like this –

![POM Code2](https://dev-to-uploads.s3.amazonaws.com/i/s418krexa0g0vc3dgx4r.png)
 
---

### **Check out the video below to learn more about Page Object Model in Selenium Python –**

{% youtube W5wHDPzSl1M %}

To learn more about Selenium Python, check out the full [tutorial series here](https://automationbro.com/blog/selenium-python-tutorial-series/) for free!

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 

👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Local mp3 files to spotify playlist! (own app)
Tags: vue, node, api, spotify
Published: 2021-02-14 15:52:20

For anxious people like me:

YouTube quick demonstration:
https://youtu.be/zv0ewC9OgdE

Link to app:
https://localtospotify.web.app

Github repository:
https://github.com/jarraga/local-to-spotify

Several years ago I uploaded all my photos taken with digital cameras to google photos, my personal files to the drive, and as a programmer I have my repositories saved in GitHub, it feels good to know that everything is safe in the cloud and available from any device.

But these days I was checking my hard drive and I still have about 35 GB of music in mp3 format, since that was the way to have music before, when we got it from some platforms, you know.

And although I wanted to erase them, I didn't want to lose all those songs that I had to work so hard to get, so I thought about making playlists on Spotify, since almost any song can be found in its catalog.

Seeing that this task would be very tedious, I started to investigate the Spotify API, and then I created this web app developed with Vue for the frontend, and node.js in the backend.

I tell you how it works:

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

You can select up to 100 mp3 files, the app reads the metadata and generates a table.
The name of the song and the artist can be edited, only the items that have both data will be searched, you can also play the song or copy the file name.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/823y0hgzfeux05wzllaf.png)

By pressing the search button, the Spotify API is consulted for each song and the most relevant result is displayed.
If no match is obtained, this screen allows you to modify the data and perform an individual search for each item.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2kn1mt2b88194c1456uh.png)

Finally, you can choose the name of your new list and press the create button.
You can see the new list in the embedded preview, or on any of your devices with Spotify.

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

I hope you like it and it will be useful!
👋🏽
Day 1
Published: 2021-02-14 15:45:03

Day 1/100 of #100DaysOfCode

Rotating-Navigation-Animation | Face-Recognition-Brain | Codewars

Hours coded: 3.8
Lines of code: 635
Keystrokes: 4819

1.Completed the Rotating-Navigation-Animation project. It was part of the "50 Projects in 50 Days" Udemy Course.

2.Completed the front-end part of the Face-Recognition-Brain Project. It was part of "The Complete Web Developer in 2021: Zero to Mastery" Udemy Course.

3.I tried to solve the "Easy Balance Checking" problem on Codewars. But I could not.

via @software_hq's #vscode extension https://lnkd.in/ggsUNjy
Roses are red, violets are bigger, I built a website to make your avatar a sticker
Tags: webdev, showdev, watercooler, vue
Published: 2021-02-14 15:13:18

---
title: Roses are red, violets are bigger, I built a website to make your avatar a sticker
published: true
description: My girlfriend made her reddit Snoovatar and I wanted it in sticker form. A few days later, snoostickers.com is born
tags: webdev, showdev, watercooler, vue
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tf723qnjv0c9269020dt.jpeg
canonical_url: https://chrisdermody.com/snoostickers-com-print-your-snoovatar-on-anything/
---

Check it out: [snoostickers.com](https://snoostickers.com?ref=devto)

A few weeks back, my girlfriend (Hey [Catia](https://dev.to/k7y) 😘) showed me the Snoovatar she built. I laughed because it was exactly like her in real life, down to the shoe colour. Immediately, I wanted it as a sticker for my laptop. 

Snoovatars are Reddit's version of Avatars that you can customise the look of. It was announced a few months back. They're pretty fun, and I thought if I wanted my girlfriend's snoovatar as a sticker, maybe others would, too. 

So, like any obsessed product-builder, I started Googling for APIs that I could use that would automate the actual sticker printing, and leave me to worry about the website. Luckily, I found [Zazzle.com](https://zazzle.com). 

Zazzle's API is quite powerful, it has the ability to render images on top of items as if they were already printed on them. Check out the cup below. That's not a photo of a cup I ordered with her snoovatar printed on it - that's an API-generated image. That cup doesn't exist yet!

![Zazzle api-generated image of cup with an avatar projected onto it](https://dev-to-uploads.s3.amazonaws.com/i/esitpy8xobqhqiwjthgm.jpeg)

If I had a criticism of their API, it's that it's documented in PDF form. Really Zazzle, it's 2021, if you want developers to use your API, this needs to be better. 
That said, I was able to cobble together what I needed. A user can now add a link to their snoovatar and see what it'd look like on a range of products (currently just stickers, badges, cups and phone holders, but more to come). 

![Your avatar printed on stickers, badges, cups, phone holders and more](https://dev-to-uploads.s3.amazonaws.com/i/b40e2r1jsfb8gp0zhv0b.png)

## Affiliate
Zazzle also has an affiliate program, so in theory if someone clicks-through and orders something, I get a small commission. Maybe this side project will pay for its own servers! :D 

## The Future
Well, when I finally got this built, I realised it's a bit silly to limit it to reddit snoovatars. It should also be able to show Gravatars, gaming avatars, and more. That's something I'll keep in the back pocket, for now. 

## The Tech
I wanted this as a very simple static page, so I used Nuxt - [everything I make is Vue based now].(https://chrisdermody.com/products/)). I'm hosting it on my own Digitalocean droplet. [Here's a post I made while making this project for my future self so that I remember how to deploy *another* static site to the same server](https://chrisdermody.com/deploying-a-static-website-to-a-digitalocean-droplet/)
How to Handle Multiple Environments in a React App
Tags: reactnative, react, webdev
Published: 2021-02-14 15:11:09

<h1>Use Case</h1>

While developing a web application most of the developers use Create React App. This means that once you start creating a build, it gets created for a specific environment and continues to exist in the same environment. 

```
"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }
```

Developers can only use two environments by default.

* Development — NODE_ENV=development when developing the application locally. Uses .env.development by default, if available.

* Production — NODE_ENV=production when building the application for deployment. Uses .env.production by default, if available.

Imagine my project has four environments:

* Development
* Testing
* Staging
* Production

Suppose you have different API URL for each environment or APPINSIGHTS_KEY which can used for the analytics. You can add the configuration in the .env file. Below are the files which we can used for different environments.

**.env.development**
`REACT_APP_BASE_API_URL = 'https://learning.int.org/'`

**.env.qa**
`REACT_APP_BASE_API_URL = 'https://learning.qa.org/'`

**.env.candidate**
`REACT_APP_BASE_API_URL = 'https://learning.candidate.org/'`

**.env.production**
`REACT_APP_BASE_API_URL = 'https://learning.production.org/'`


**Note: Prefix “REACT_APP_” is required for creating custom variables in React.**

Now we need to change the build script in package.json file.

```
"scripts": {
    "start-js": "run-s react:start lint",
    "react:start": "react-scripts start",
    "start:development": "env-cmd -f .env.development npm run-script start-js",
    "build:integration": "env-cmd -f .env.integration npm run-script build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:candidate": "env-cmd -f .env.candidate npm run-script build",
    "build:production": "env-cmd -f .env.production npm run-script build",
    "build": "set \"GENERATE_SOURCEMAP=false\" && rimraf ./build && react-scripts build",
  }
```


*Access the variables in-app* : **process.env.REACT_APP_BASE_API_URL**

Note: Though we have added four different environments and when you build the app NODE_ENV will be production. To distinguish the builds, you can add REACT_APP_ENV and specify your environment there.


Hope this article solves some of the problems that occur on day to day basis.
We Lunched Frontendor 2.0 on ProductHunt
Published: 2021-02-14 14:52:23

Hello 👋,

We are excited to announce that we launched Frontendor V2.0 on ProductHunt.

👉 Visit: https://www.producthunt.com/posts/100-ui-blocks-with-copy-paste-tool

We appreciate your support 
Frontendor Team
Don't give up.
Tags: career, webdev, advice, entrepreneur
Published: 2021-02-14 14:43:33

It may feel disheartening when you continue to throw new ideas at the wall and none of them stick.

It may feel disheartening when you work your ass off for days and weeks and months and no one seems to notice or care.

Don't give up hope, do not stop persisting.  Keep throwing ideas at the wall, keep trying to be the change you want to see in the world.

People will notice. Maybe not today, maybe not tomorrow, but someday, for sure, people will notice.
Mobile Application Hacking HaxorKit, Toolkit For Pentester
Published: 2021-02-14 14:33:35

Haxorkit Toolkit for pentester or hacker, this for purpose learning only.

Whats Feature?
- Admin Finder,
- Dir Scanner
- Subdomain Scanner,
- Google Dork,
- Sql Scanner,
- Reverse Ip,
- Dns Lookup,
- Email Spider,
- Nmap,
*and more

Download : https://play.google.com/store/apps/details?id=com.haxorkit
Day 51 Of 100DaysOfCode: Sum Of Two Numbers
Tags: womenintech, codenewbie, beginners, womenwhocode
Published: 2021-02-14 14:25:11

Today is my 51th day of #100Daysofcode and #python learning. Today I started to studied Algorithmic Toolbox. First course of Data Structures and Algorithms Specialization. I want to learn algorithms before diving into projects so I am doing this course.
#Python code
Here is python code for today,
```python
def sum_of_two_digits(first_digit, second_digit):
    return first_digit + second_digit

a, b = map(int, input().split())
print(sum_of_two_digits(a, b))
```
Output of above code is,
```python
100 200
300
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 51 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* [Algorithmic Toolbox](<a href="https://t.co/UxGBUoj3Rw">https://t.co/UxGBUoj3Rw</a>)<br>* Sum Of Two Digit<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://t.co/iPRFVc3Efo">pic.twitter.com/iPRFVc3Efo</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1360954843968327684?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Tailwind Nextjs Starter Blog v0.1.2
Tags: nextjs, javascript, sideprojects
Published: 2021-02-14 14:14:46

Tailwind Nextjs Starter Blog V0.1.2 now comes with a project page.

Also fixed a few flex bugs on Safari. 

Really enjoying developing on nextjs so far, especially with next/image which makes image optimization pretty straightforward. 
The only difficulty is parsing the image dimensions. This is solved over here: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/lib/img-to-jsx.js where I used the `image-size` library to get the file dimensions.

_Feature List_
Tailwind 2.0
Near perfect lighthouse score
Preact in production build
Mobile-friendly view
Light and dark theme
MDX - write JSX in markdown documents!
Server-side syntax highlighting with rehype-prism
Math display supported via KaTeX
Automatic image optimization via next/image
Flexible data retrieval with next-mdx-remote
Support for tags - each unique tag will be its own page
Projects page
SEO friendly with RSS feed, sitemaps and more!

Here's how the new projects page looks like:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sgiy8ifsgpfng6tk2t18.PNG)


And here's how the current blog posts looks like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mqerzqwjhgqrqxeof7hg.PNG)

Let me know if you are using the template / planning to use the template and what other features would you like to see!
Dos & Don'ts For Resetting CSS
Tags: css, uiweekly, webdev, javascript
Published: 2021-02-14 13:30:52

#### Why reset CSS ?
> Main reason is to fix any inconsistencies with default styles between different browsers.

_Save It For Later!_ Let's begin...
<br/>

### 1. DO reset box sizing
```
* {
   box-sizing : border-box;
}
```

###<br/> 2. DO reset margins & paddings
```
* {
   margin : 0;
   padding : 0;
}
```
_or_
```
body {
   margin : 0;
   padding : 0;
}
```

###<br/> 3. DO reset form elements
```
button,
input,
optgroup,
select,
textarea {
   font-family : inherit;
   font-size : 100%;
   line-height : 1.15;
   margin : 0;
}
```

###<br/> 4. DON'T remove list styles
❌
```
ul, li {
   list-style : none;
}
```
_instead remove from specific elements within_
✅
```
.navigation {
   list-style: none;
}
```

###<br/> 5. DON'T remove focus styles
❌
```
:focus {
   outline : none;
}
```
_instead you can change it's style_
✅
```
:focus {
   outline: none;
   box-shadow: 0 0 0 2px #565663;
}
```

<br/>They are definitely useful for consistent styling & also gives you a clean slate to work with.

Do you use reset CSS in your projects? 
Share your thoughts and let's chat in the comments!

<br/>P.S. Want the next post to be on something specific? Do let me know in the comments.

🤘🏻
<br/>
Connect with me : [Github](https://github.com/deyRupak) | [Tutoring](https://www.fiverr.com/share/V763ld) | [Freelance Web Dev](https://www.fiverr.com/share/Rld9Y8)