常連

自己紹介

### 前提・実現したいこと

[https://codepen.io/ksyunnnn/pen/aqMKzR](https://codepen.io/ksyunnnn/pen/aqMKzR)
input[type=data]に、デフォルトで表示されるカレンダー制御の矢印アイコンを、別のアイコンに変更するための、上記URLにあるコードを動かしたいです。

### 発生している問題・エラーメッセージ

アイコンが変更されないです。

`input[type=date]::-webkit-calendar-picker-indicator:before`というセレクタが反応していなさそう

### 該当のソースコード

```html
<input type="date">
```

```css
/* スピンボタン（上下ボタン）を非表示 */
input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 無入力時の 年/月/日 を / / にする */
input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}
/* /の色を変える */
input[type=date]::-webkit-datetime-edit-text {
  color: #666;
}
/* clearボタンの非表示 */
input[type=date]::-webkit-clear-button {
  -webkit-appearance: none;
}
/* カレンダーのインジケータ（▼）を非表示 */
input[type=date]::-webkit-calendar-picker-indicator {
  color: transparent;
  position: relative;
}
/* fontAwesomeのカレンダーアイコンをインジケータにする */
input[type=date]::-webkit-calendar-picker-indicator:before {
  color: #666;
  font-family: FontAwesome;
  /*content: "\f073";*/ /* fa-calendar */
  content: "\f133"; /* fa-calendar-o */
  position: absolute;
  left: -5px; /* ここら辺はいい感じの塩梅で */
  top: -5px;  /* ここも */
}
```



### 補足情報（FW/ツールのバージョンなど）

こちらの記事を参考にしています。
[https://qiita.com/MssKnd/items/1e55264b5e3acc609e1f](https://qiita.com/MssKnd/items/1e55264b5e3acc609e1f)

よろしくお願いいたしますm(_ _)m

input[type=date]にfontAwesomeのアイコンを使いたい

Node.jsについて、言語のコアとなるような仕組み（イベントループ、ノンブロッキングI/O）や、最初からあるモジュール群（Streamなど）についてを中心に学べる学習リソースはありますか？

本当に基本の部分をやったあと、ExpressをインストールしてWebアプリ作りましょう、的なものはいくつもあると思うのですが、そういったものではなく、もっと基本というかコアな部分を学びたいと思っています。

書籍でなくても、動画コンテンツでも構いませんし、英語でもOKです。
よろしくお願いいたします。

Node.jsの基本となる部分をしっかり学びたい

expressのapp.jsにルーティングを書き、またsqlのselect文を書いて  取得してindex.ejsにlistsとして渡しました。


```javascript
app.js
app.get('/', function(req, res) {
    client.query(
        "SELECT * FROM fruite",
        (err,results) => {
            res.render('index.ejs',{lists:results});
        }
    )
    
});
```  
ejsでこのような感じでforEachで取ろうとしたんですが、**lists.forEach is not a function**というエラーが出ました。
```ejs
index.ejs
   <ul>
     <% lists.forEach(( list ) => { %>
        <li><%= list.id %> </li>
        <li><%= list.name %> </li>
      <% }) %>
   </ul>
```

テーブルの中にあるものをすべて表示したいのですが、表示されません。
これはどうすればよいのでしょうか、教えてくださいお願いします。

express+ejs+postgre selectでテーブルから取得しejsファイルに渡して、表示させようとしたが表示されない

HTMLとCSSの勉強をしているのですが、
とあるカフェのページを作りながら学んでおります。
今回、レスポンシブデザインが反映されない件について質問させていただきます。

構成は
・トップページ
┣ニュースページ
┗メニューページ

という感じで、現在メニューのレスポンシブデザインが反映されず困っております。
確認はデベロッパーツールのtoggle device toolbarを押下して
スマホサイズとPCサイズを切り替えつつかくにんしております。

ブレークポイントは600pxです。

▼下記CSSは284〜287行目あたりに記載しています。
```CSS
/* モバイル版
最大の幅が600px以下の画面用
------------------------------------- */
@media (max-width: 600px) {
  /* MENU */
  .menu-content {
    margin-top: 20%;
  }
}
```
下記CSSは311〜314行目あたりです。
```CSS
.menu-content {
    max-width: 560px;
    margin-top: 10%;
}
```
デベロッパーツールで確認すると、
レスポンシブの方のCSS（margin-top: 20%;）が打ち消されてしまいます。
![イメージ説明](fe66deba43f9cda5a972962e234b0c9a.png)

解決方法をご教示いただけますと幸いです。

また、メディアクエリーというのは、CSSの一番最後に持ってきた方が良いのでしょうか？
（今回のCSSはstyle.cssという一つのcssに全て記載しています）
こちらもご教示いただけますと幸いです。

拙い文章で申し訳ございませんが何卒よろしくお願い申し上げます。

【CSS】CSSのレスポンシブデザインが反映されない

### ソースコード
```ここに言語を入力
To reload the app press "r"
To open developer menu press "d"

warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Opening developer menu...
warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Opening developer menu...
warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Reloading app...
warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.
info Opening developer menu...

```
接続アプリがないと書かれてますがこの場合の接続アプリとはなんでしょうか

nom start が作動しない

回転するCSSアニメーションが終了し次第、モーダルのアニメーションを始動させたいと思っています。しかし、現状のコードでは同時にアニメーションが起こってしまいます。

## コード
```javascript
class App extends Component {
    state = {
      isOpen: false,
      isAnimated : false,
    };
    onOpenModal = () => {
      this.setState({ isAnimated: true });
      this.setState({ isOpen: true });
    };

    render() {
        return(
          <div className="wrapper">
            <div className="container">
              <div className="center-align">
                <img src={img3} alt="" className={this.state.isAnimated ? "anime-a" : ""} />
              </div>
              <div className="center-align">
                <button onClick={this.onOpenModal}>クリック</button>
              </div>
            </div>
          </div>
          
        );
    }

}

```

```css
.anime-a {
  animation:rotateAnimation 1s;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
```

クリックすると`onOpenModal`関数が動くようになります。その中で、画像の回転アニメーションが起こり、その後にモーダルが開くという形を実装したいです。しかし、これだと同じタイミングでアニメーションが起きてしまいます。回転アニメーション終了のタイミングで次のアニメーションを起こすにはどうすれば良いでしょうか。もっと言うと、アニメーション終了のタイミングで`setState({isOpen: true})`にしたいです。良い方法があれば教えてください。

## 試したこと
###addEventListenerを使ってみました。

```javascript
   onOpenModal = () => {
      var el = document.querySelector('.anime-a');
      this.setState({ isAnimated: true });
      el.addEventListener('animationed', function() {
        this.setState({ open: true });
      });
    }
```

これでうまくいくはず！と思ったんですが、

`Unhandled Rejection (TypeError): Cannot read property 'addEventListener' of null`

というエラーが出てしまいました。おそらくDOMの問題だと思います。この方法ではReactにおいてCSSアニメーションを制御できない。

### onAnimationEndを使ってみた

```javascript
   onOpenModal = () => {
      // this.setState({ isAnimated: true });
      this.setState({ open: true });
    }

   onImageRotate = () => {
      this.setState({ isAnimated: true });
    }

// 略
<button onClick={this.onImageRotate} onAnimationEnd={this.onOpenModal}>クリック</button>
```

しかし、これではなぜかonAnimationEndの方が動かずモーダルが出てきません。

React --- CSSアニメーションの終了を感知して次のイベントを発生させたい

### 前提・実現したいこと

新たにPythonを入れて、以前のPythonでは普通に動いていたプログラムを動かしたら、matplotlibでの出力結果は以前と全く同じで、問題はないのですが、ターミナルのところにエラー？ログ？のようなものが出てしまいます。

このエラーを消したいのでしたのですが、あまり見たことのないエラーで対処法がわかりません。ググっても見たのですが、解決することができませんでした。

よろしくお願いします。

### 発生している問題・エラーメッセージ

```
2020-05-28 08:13:49.304 python[983:13078] imkxpc_getApplicationProperty:reply: called with incorrect property value 4, bailing.
2020-05-28 08:13:49.304 python[983:13078] Text input context does not respond to _valueForTIProperty:
```

### 該当のソースコード

```Python
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(0, 10, 1000)
y = np.sin(x)

fig, ax = plt.subplots()

ax.grid()
ax.set_xlim([0, 10])
ax.set_ylim([-1, 1])
ax.plot(x, y, linewidth=3.0)
plt.show()

```


### 問題の発生した環境
macOS　Catalina 10.15.5
Python 3.8.2
VsCodeを使っています。