teleren/devto huggingface dataset:
Keypresses
Published: 2021-05-27 14:44:02

---
title: Keypresses
published: true
description: From emails to (internal) blog posts
tags: 
cover_image: https://raw.githubusercontent.com/StacyCash/blog-posts/main/general/keypresses/cover-image.jpg
---

A while ago Scott Hanselman wrote a blog post about the amount of keystrokes you have left, and how to make them count. You can find it [here]
(https://www.hanselman.com/blog/do-they-deserve-the-gift-of-your-keystrokes)

Fast forward to today and I have problems 😊

We pass information around internally using emails...
So many emails...
And they always get lost.
Which means that people ask for the same information again.
And so people end up typing that information again.

So, time to listen to Scott, remembering these points:

* When you are writing something that you recognise as information people are going to need in the future
* When you are typing more than a couple of lines of information for someone
* When you can get way more value from what you are doing sharing it to a larger group

Don't send it in an email!

Write a blog post

* Internal blog post for that information that shouldn't leave the company
* External if this is information that you think could help people outside of the company

Share the link to the post, instead of writing that email

And so that is what I have started to do. This blog post will be shared internally, as well as in my site to try and help people stop wasting those precious keypresses

Thank you Scott for the idea!
指定したURLのHTTPステータスを一括でチェックするPythonスクリプト
Tags: python, japanese
Published: 2021-05-27 14:35:14

[![Image from Gyazo](https://i.gyazo.com/a1874c975d1c6d46cce071dc5a8be813.png)](https://gyazo.com/a1874c975d1c6d46cce071dc5a8be813)

こんにちは。shootaceanです。

CSVファイルに定義したURLを元にGETリクエストを行い、レスポンスのHTTPステータスをチェックするPythonスクリプトです。

運営しているWEBサービスの検証をする際に利用しました。

## pandasのインストール

```shell
$ pip3 install pandas
```

## Pythonスクリプト

`host`, `csvFilePath`, `csvColumnName` という変数を変更すれば、ご自身の環境に合わせることができると思います。

```python
import urllib.request
import pandas as pd


host = "https://shootacean.com"
csvFilePath = "urls.csv"
csvColumnName = "uri"


def checkUrl(url):
    """指定したURLにGETリクエストした際のHTTPステータスをチェックする"""
    try:
        # GETリクエストをしてレスポンスを受け取る
        with urllib.request.urlopen(url) as response:
            # HTTPステータスが正常だった場合
            return True, response.code, url
    except urllib.error.HTTPError  as e:
        return False, e.code, url
    except urllib.error.URLError as e:
        if hasattr(e, 'reason'):
            return False, e.reason, url
        elif hasattr(e, 'code'):
            return False, e.code, url


if __name__ == "__main__":
    # CSVファイルを読み込む
    csv = pd.read_csv(csvFilePath)
    # CSVのレコード数分、チェックを繰り返す
    for uri in csv[csvColumnName]:
        url = host + uri
        # チェックを行う
        ok, code, url = checkUrl(url)
        if ok:
            # チェックが成功した場合
            print(code, url)
        else:
            # チェックが失敗場合
            print(code, url)

```

## CSVレイアウト例

使うのは１カラムだけなのでレイアウトは何でも大丈夫です。
１レコード目はヘッダーとして利用します。

```csv
uri
/
/contact
/privacy-policy
```

## 参考
- [urllib.request --- URL を開くための拡張可能なライブラリ — Python 3.9.4 ドキュメント](https://docs.python.org/ja/3/library/urllib.request.html#urllib.request.urlopen)
- [windows - To print http status code in Python 3 (urllib) - Stack Overflow](https://stackoverflow.com/questions/37779795/to-print-http-status-code-in-python-3-urllib)
- [Python の HTTP クライアントは urllib.request で十分 - Qiita](https://qiita.com/hoto17296/items/8fcf55cc6cd823a18217)
- [PythonモジュールRequestsのHTTPステータスコードについて | DevelopersIO](https://dev.classmethod.jp/articles/python-requests-status-code/)
- [pandas.DataFrameのforループ処理（イテレーション） | note.nkmk.me](https://note.nkmk.me/python-pandas-dataframe-for-iteration/)
Reliable cross-browser testing with Comparium
Published: 2021-05-27 14:34:49

Cross-browser testing ensures the greatest amount of accessibility and visibility, giving viewers a positive experience across many popular browsers. 

Nevertheless, let's talk about one of the best tools for cross-browser testing Comparium. Сomparium is an online web browsers emulator to test any website. Here you can find Firefox, [Chrome emulator] (https://comparium.app/chrome-emulator.html), Internet Explorer and other popular browsers emulators. It performs interactive tests on any operating systems and any display resolutions. Also, It gives access to all browser versions to check and functionality of your web resource.
🖥 Get Better Angular UX Using 4 Animation Techniques
Tags: angular, ux
Published: 2021-05-27 14:26:24

#### ⌨️ Improve the User Experience (UX) of an e-commerce application by implementing animations utilizing Angular animations, CSS animations, and Web Animation APIs.

### <br>
Developers can use animations in meaningful and non-distracting ways to significantly improve their application's user experience (UX). This blog post discusses four effective techniques to animate your application's user interface, covering popular use cases. You'll learn how to transform bland experiences into memorable ones for your users.

<include src="WistiaVideo" id="vj9xvnb00i" padding="53.13" />

## Getting Started Quickly

I created a demo application to help you focus on adding animations to Angular. You'll add animations to a starter app as you progress through this tutorial. The starter application uses Tailwind to take care of its style and layout, but none of the animations discussed here are dependent on it.

Follow this tutorial without cloning any repo, right in the browser using [Stackblitz](https://stackblitz.com/github/auth0-blog/angular-animations-storefront/tree/starter) or [CodeSandbox](https://codesandbox.io/s/github/auth0-blog/angular-animations-storefront/tree/starter).

If you prefer to work locally in your IDE, clone the demo app and check out its starter branch:

```bash
git clone -b starter git@github.com:auth0-blog/angular-animations-storefront.git
```

Once you clone the repo, make `angular-animations-storefront` your current directory:

```bash
cd angular-animations-storefront
```

Install the project's dependencies:

```bash
npm i
```

Run the project locally:

```bash
npm run start
```

## Brief Overview of Angular Animations

Angular comes with a powerful animation module that lets you quickly add motion to your application: `BrowserAnimationsModule`. Under the hood, this module uses the Web Animations API (WAAPI) to create motion and interactivity. Whenever WAAPI isn't available, `BrowserAnimationsModule` falls back to using CSS keyframes. Angular animations give you the option to use their abstraction layer to animate any properties that the web considers animatable such as positions, sizes, colors, and many more.



[Read more...](https://auth0.com/blog/get-better-angular-ux-using-animation-techniques/?utm_source=content_synd&utm_medium=sc&utm_campaign=angular)
Controlling global decorators via Storybook `args` and `parameters`
Tags: storybook, react, typescript, javascript
Published: 2021-05-27 14:15:17

[Storybook](https://storybook.js.org) [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) (in React) provide a powerful way to reuse component environments across multiple stories. However, there aren't any off-the-shelf levers to manipulate global decorators from individual stories.

At work ([we're hiring!](https://www.process.st/jobs/)) I recently cleaned up our many context providers into one `Base` decorator. Here is a simplified example.

```tsx
// .storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  return (
    <TestReactRoot {...options.args}>
      <Story {...options} />
    </TestReactRoot>
  );
};

// .storybook/preview.js
import { Base } from './decorators/base';

export const decorators = [Base];
```

`TestReactRoot` encapsulates a few providers, including the classic `react-redux` provider. So now we can easily write stories that have `useSelector` and other Redux hooks with minimal boilerplate. But how do I, say, set the initial Redux state from a story, when there is no visible reference to the global `Base` decorator? Specifically, I want to use Storybook [controls](https://storybook.js.org/docs/react/essentials/controls) to dynamically set the Redux state.

I couldn't find any existing strategies for this in the Storybook community, so I ended up using [inversion of control](https://kentcdodds.com/blog/inversion-of-control): individual stories supply a function to the `args` config, which the global decorator invokes.

```tsx
// ./storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  const { args, parameters } = options;

  if (parameters.modifyArgs) {
    Object.assign(args, parameters.modifyArgs(args));
  }

  return (
    <TestReactRoot {...args}>
      <Story {...options} />
    </TestReactRoot>
  );
};

// src/components/user-avatar.stories.tsx
export default {
  title: "User Avatar",
  args: {
    admin: false,
  },
  parameters: {
    modifyArgs: (args) => {
      return {
        reduxState: generateReduxState({ admin: args.admin })
      }
    }
  }
}
```

Boom! The story config just knows it can pass a pure function to `modifyArgs`, and the `Base` decorator decides what do do with the return value.

So there you have it: if you want to influence global decorator/provider state via Storybook controls:

1. Use a good ol' pure callback function in the `args` config that takes the `args` as a value and returns a partial of the `args` object.
2. Check for that callback function in the global decorator
3. If the callback is there, invoke it and assign the result to the `args` object (or whatever part needs mutation).
4. Pass around your updated data accordingly.

Enjoy!
Python read and write files
Tags: python
Published: 2021-05-27 14:10:46

There are many great use-cases to read and write data to a local file.
It might be for crawling purposes, price checks, logs, or whatnot.

Today I'll be exploring the basics of reading and writing data to a file in Python.

## Read files in Python

The first part of file interaction would be to read data from an existing file.

Let's create a basic `txt` file called `text.txt` at the root of our project.

```text
Hi there

How cool of you to try and read me
Hope you have fun
```

To read this file in Python, we can use the `open()` function built into Python.

After opening the file, we can use the `file.read()` function to see what's in it.

```python
file = open('test.txt', 'r')
print(file.read())
```

This will print the exact content of our file.

## Write data to a file in Python

Now that we know how to read a file let's see how we can write data to that same file.

There are two options when we open a file for writing.

- `a`: Append data to the existing file
- `w`: Write, this option will overwrite any existing content

Let's first try the append option:

```python
file = open('test.txt', 'a')
file.write("I'm an extra line of content")
file.close()
```

If we now check our file, it shows:

```text
Hi there

How cool of you to try and read me
Hope you have fun
I'm an extra line of content
```

Now let's use the write function and see what happens.

```python
file = open('test.txt', 'w')
file.write("I have new content now")
file.close()
```

Checking the file now shows us:

```text
I have new content now
```

As you can see, the old content is gone now.
So choose wisely which of the two options you wish to use.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Custom Radio Button With HTML & CSS
Tags: html, css, webdev, javascript
Published: 2021-05-27 13:52:49

Today I created a Amazing Custom Radio Button With HTML CSS & JS. I use JavaScript to toggle class between light and dark theme also this a custom radio button label for custom button. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

{% codepen https://codepen.io/NikhilBobade/pen/qBrXJBe %}
How to see all AWS services currently in use
Tags: aws, billing
Published: 2021-05-27 13:52:02

---
title: How to see all AWS services currently in use
published: true
description: Sharing an AWS Bills page I recently found where I spotted unused services in my account, maybe you can spot them in your account too
tags: aws, billing
canonical_url: https://1ma.dev/how-to/2021/05/23/how-to-cleanse-your-aws-bill
//cover_image: https://direct_url_to_image.jpg
---

Ever wondered what a black hole looks like? My AWS Billing—or yours—might be one of the closest things to a black hole on earth. So scary, and so hard to remove things from it, firstly because we don’t know what services to remove nor the regions for those unwanted services.

Let’s focus on how to remove things from the AWS bill, which is the main task that will definitively cleanse our bill. It’s so easy to spin up new services in AWS and forget about them, some might be cheap some others might not be that cheap; and given that AWS—at the time of this writing—provides over 175 services in several regions each, it becomes quite a task to manage all of your services in all of the regions you used.

Enter the Bills page. Go to your Billing Dashboard, and then on the left sidebar, under the Billing section, click on Bills. Below AWS Service Charges you can see all of the services you have signed up for, and inside each of them, you can see the incurred costs per region. This way you just need to figure out what services are not in use, then go to their regions and remove them.

![Billing page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhr9b98txb013vma4u2v.png)

This way I was able to spot an unused RDS instance and a very old Amplify instance, both burning money with no returns.
Create fancy borders for your images.
Tags: css, html, webdev
Published: 2021-05-27 13:48:42


Recently I needed to make odd shaped borders for some images in a card UI. Most of the times you would create these images in photoshop or some other imaging software. So I looked into border radius and its advanced features. 

{% youtube XA7ZGWY2kOY%}

Most developers know that in CSS you can achieve rounded corners by applying border-radius:

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

here I have 2 values for border-radius which are 10% and 20%.

But you can have upto 8 values, below is a list of configurations for border-radius values and how those are applied:

```
/* Radius is set for all 4 sides */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;
``` 

The above values are from MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius. Here they try to explain how these values are applied. But the problem is when you apply two values to a single corner. This makes it very confusing. This configuration is achieved by separating values with a single '/' (slash).With this configuration, You can create complex borders like :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v3izq4b5rxrrzec39h5.PNG)


There is an article that explains this further https://9elements.com/blog/css-border-radius/ .

##But how can you practically use this?
I have come to the conclusion that you have to be a genius to create meaningful shapes from the top of your head with the 8 value configuration. But luckily there is a border radius generator you can use here https://9elements.github.io/fancy-border-radius/

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

Here you can graphically adjust the borders with the little handles and you copy and paste the border-radius values into your CSS styles.
What are some of the important features of React?
Tags: react, javascript
Published: 2021-05-27 13:32:21

op 4 important features of React

    Component-based
    JSX
    SEO friendly
    Virtual DOM

Let’s know here more features with details:

1. Easy to catch up

React happens to be a JavaScript library that is maintained by an extensive community. Therefore, any JavaScript developer will find it quite easy to develop a mobile app

using it. There are quite a few video tutorials on React JS which will help developers get the job done easily. React is not an all-inclusive framework, and so it minimizes the coding load. One more advantage happens to be its open-source community. There are lots of contributors who constantly provide React JS with new updates.

2. The potency of the JavaScript library

React JS happens to be an integral component of the JavaScript library. A programmer working on this particular technology will not be confined to any set of templates, patterns, or structures. There is ample freedom to modify the structures for creating a robust mobile app. It will be possible to request your React JS development company to add the essential features. This technology helps to create an interactive interface while following your requirements.

3. SEO friendly

SEO has always proved to be a problem for JavaScript frameworks. (https://medium.com/javascript-in-plain-english/4-javascript-frameworks-you-should-consider-for-your-next-web-app-6feceefc0ae0) Thus, applications based on Java are not amongst the top charts of the search results. React JS solves this issue since it is SEO friendly. For this reason, React JS development services happen to be more useful with better rates of conversion.

4. Component recycling

Recycling as well as saving component reusability is of prime importance for developing mobile apps. Component recycling will help to lessen the efforts and time of the developers. And this particular thing is likewise loved by any React JS development firm regarding React JS. It will allow the developers to use identical components that are being used by other apps with similar functions and features. React JS's property will come of use to developers and companies with the rapid development of apps.

Learn more features here: https://qr.ae/pGKadr
Advantage of Hiring an Ecommerce Website Development Company for Your Ecommerce Business.

Published: 2021-05-27 13:02:52


<p>When it comes to eCommerce development, it has become a prime need for every eCommerce business. The reason is probably known to all – online shopping enjoys having a good craze among people.  They prefer to buy their favorite products online rather than visiting their nearby physical stores. It not only helps them in getting their products easily but also helps them in buying top-quality products at extremely affordable costs.</p>

<p>This is the reason why they prefer to <a href="https://www.webomindapps.com/ecommerce-website-development-company.html">hire an experienced eCommerce website development company in Bangalore</a> that can create the right products while ensuring to match their requirements. Let’s discuss why customers prefer to buy any products from eCommerce website.</p>

<h3>Availability of Wide Category of Products</h3>

<p>The first reason is that the eCommerce website serves as a one stop-destination for people for exploring and buying a wide range of products. Whether you are looking for electricity, electronics, clothing, or other items, you can get everything.</p>

<h3>Get Enough Details about Products</h3>

<p>Irrespective of the type of products customers seek to buy online, they get the facility to go through in-depth information regarding it. It helps them in making the right decision in terms of whether they should purchase products or not.</p>

<h3>Get Lucrative Details</h3>

<p>Another reason why people prefer online shopping is they can grab lucrative deals and discounts while purchasing products online. It helps them even purchasing those of expensive products even at affordable rates.</p>

<h3>Go through Reviews</h3>

<p>Buyers can go through various reviews about products before purchasing to verify whether they are purchasing a product that is the right to match their needs. The reviews are written by users who write reviews based on their own experience of using the product.</p>
18 Cards with form design tips
Tags: webdev, design, ux, tutorial
Published: 2021-05-27 12:57:34

Hey devs!

I made 18 cards with tips of common mistakes when designing web forms.

I've also posted [them on Twitter](https://twitter.com/vponamariov/status/1397891520263512066), so if you're a Twitter user you can make a bookmark there.

Here we go

![Card number 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnpzwman9l4ca9nniqu8.png)

![Card number 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/niafrjf459u7dmei70p6.png)

![Card number 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwenkty8y3w09uu35ghb.png)

![Card number 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sn2uvw4v9kh2o0rk4po.png)

![Card number 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ta680enr234788v7k8y.png)

![Card number 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgas2qyvwkug7vgsri0f.png)

![Card number 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fe5zpvul0c0542l2u41.png)

![Card number 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk791259e99bcmncce5e.png)

![Card number 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmopswtabydob8b38mt1.png)

![Card number 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cphf1b1vz80iov4ivx3v.png)

![Carb number 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo0gie5xvnkp8k6rsw21.png)

![Card number 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q08wh32tubvqflz4jahh.png)

![Card number 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj9h00unkr36mtfszlcw.png)

![Card number 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4qk7h0lempf04jrs0ph.png)

![Card number 15](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd5j81que6m48ooqhif6.png)

![Card number 16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsr8zx4ixwc3bui30a89.png)

![Card number 17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kewinah6c84u6f2gzs2p.png)

![Card number 18](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w57wjc13xdyyjis5zjt9.png)
Die 13 besten Bildschirm-Recorder für Windows in 2021
Published: 2021-05-27 12:41:26

Haben Sie jemals versucht, Ihren Bildschirm aufzunehmen? Oder sind Sie ein erfahrener Benutzer und möchten Ihre Rekorder-Erfahrung mit einem neuen Tool verbessern? Wir haben die 13 besten kostenlosen und kostenpflichtigen Bildschirm-Recorder für Windows recherchiert und verglichen, um Ihnen zu helfen, eine ideale Lösung für Ihre spezifischen Anforderungen zu finden.

Obwohl sich verschiedene Bildschirmaufnahme-Tools in Preis und Funktionalität unterscheiden, haben die meisten eine Reihe von gemeinsamen Merkmalen, wie zum Beispiel:

Einstellbarer Videoframe
Cut-und-paste Bearbeitungsoptionen
Unbegrenzte Aufnahmezeit
Mit welchem Tool sollten Sie ein effektives Video-Tutorial oder einen E-Learning-Kurs erstellen, Ihr Unternehmen an Online-Kunden vermarkten oder sogar ein neues Vorgehen in Ihrem Lieblingsspiel aufzeichnen? Diese Auswahlliste bietet alles, was Sie benötigen, um eine fundierte Entscheidung zu treffen und mit der Erstellung zu beginnen.

Mehr lesen > https://www.ispringlearn.de/blog/bildschirmaufnahme-software