投稿日：2019-04-17T22:28:38+09:00

An example of #markdown #HTML conversion from standard input / output using #ruker gem's redcarpet / reverse_markdown with #docker

Dockerfile

 FROM ruby RUN gem install reverse_markdown redcarpet

EXE

 docker build . -t ruby-gems

 $ echo '<h1>hey</h1>' | docker run -i ruby-gems reverse_markdown # hey $ echo "abc" | docker run -i ruby-gems redcarpet <p>abc</p>

# Maybe badcase

 $ docker run ruby-gems /bin/bash -c "echo '<h1>head</h1>' | reverse_markdown" # head $ docker run ruby-gems /bin/bash -c "echo '# h1' | redcarpet" <h1>h1</h1>

ref

| Docker Documentation

Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1310

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T21:05:48+09:00

HTMLタグ_1はじめに（覚書）

HTMLタグ−１

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード

<title>　</title> ：ウィンドウの一番上のタイトルバーあるいはタブの部分に表示される
　　　　　　　　　　　　
<body> </body> :ブラウザ画面に表示される文字や画像など本体

<h1> </h1> : 見出し　h１〜h６まで

<p> </p> : パラグラフ

<hr> :　横線（区切り）



記述例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　<h1>見出し１</h1>
　　<p>本文</p>　
　　<hr>
       
   <h2>見出し２</h2>
   <p>本文</p>
</body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T21:05:48+09:00

HTMLタグ1

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード
　　　　　　　　　　　　

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T21:05:48+09:00

HTMLタグ1　（覚書）

HTMLタグ−１

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード

<title>　</title> ：ウィンドウの一番上のタイトルバーあるいはタブの部分に表示される
　　　　　　　　　　　　
<body> </body> :ブラウザ画面に表示される文字や画像など本体

<h1> </h1> : 見出し　h１〜h６まで

<p> </p> : パラグラフ



記述例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　<h1>見出し１</h1>
　　<p>本文</p>
       
   <h2>見出し２</h2>
   <p>本文</p>
</body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T17:21:21+09:00

[2日目]HTML&CSS 2週目　JS1週目

JS 1週目　Ⅲまで修了
HTML&CSS　２週目　初級終わり

2019/04/17 14:00~17:00(3h)

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T16:04:58+09:00

ど初心者がプログラミングを勉強したら・・・

ターミナルを理解する

昨日Rubyの学習に入った途端、立ちはだかったのがターミナル。
なんだこれは・・・動画を見ながら同じようにやっても、何万回読んでもわからん。
フォルダって？ファイルって？で・・・ディレクトリ？
図で説明しますを勘違いし、ターミナルに入力するとフォルダが出てくると思った私は、
何回やってもファイル出てこないやああああんん！！！！
とパニック。なんかエラーにもなるし。
ここで私の人生は終わったと絶望に打ちひしがれた・・・。

とりあえず落ち着こう。よく読んで調べよう。
そしたら、
なんだ。ターミナルいけるわ。
と自分の間違いに気づく。
ごめんターミナル。少しだけ、ほんの少しだけお前とは仲良くなれないと思ってしまった。。。

では、今日私が勉強したことをまとめます。

ターミナルとは

PC自体に命令を出すもの
キーボードから文字を打ち込んでコンピュータをを操作するツール。
ターミナルはキーボードからlinuxコマンドを打ち込んで操作を行う。

lsコマンド
フォルダやファイルの一覧を出す

cdコマンド
カレントディレクトリに移動するときに使う
cd Desktop

文字列は"" ''で囲む

処理の実行はputs

irb
ターミナルから直接Rubyのプログラムを動かすことができる

ここまで来たらあとはできました！

変数

漢字から連想すると全く意味が通じなくなるので注意！
要は置き換え。

今日の感動

getsメソッド
これは凄い！
これを使うとターミナルに入力ができる！
入力したら次に進む！
できた時感動しました！
if文すげえええ！！！！
よくある、値に合わせて文が出る。
これ自分で最初から作ったらかっこいいなと。
明日復習して、これちゃんと覚えてできるようになりたいです。

今日の失敗

””の終わりを入れ忘れているのに気づかず、ターミナルで永遠にエラーが続きました・・・。
やっぱりターミナル無理だと諦めかけましたが、女神五島様が現れ教えてくださいました。
優しい！綺麗！！天才！！！

皆様のQiitaのように画像を入れて書いてみたいです。
練習します！

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T16:01:05+09:00

HTML超初心者~HTMLを知ろう~

HTMLについて

HTML ( エイチティーエムエル)とは、
ページを構成するための「マークアップ言語」です。

簡単にいうと、HPの文章に意味や役割を持たせる言語です。

段落や見出しなどを明確に分けて、文書の意味を正確に分類、整理して記述します。

今見ているこのホームページもHTMLで書かれています。

HTMLの歴史

HTMLはインターネットを使い世界中の論文をどこでも閲覧することはできないか？という目的で作成されました。

1983年にティム・バーナーズ=リーを中心にバージョン1.0が誕生。

バージョンアップを重ね、機能が追加され、デザインに関する記述までHTMLで行ってきました。

CSSの誕生

構造からデザインまで書いてしまうとHTMLが長くなり複雑になります。

そのためデザイン部分まで抜き出したCSS(シーエスエス)が誕生しました。

文書の構造はHTMLでページの見栄えはCSSの役割が明確に分けられたのです。

HTMLの記述方法

HTMLは文書が書けるソフトとブラウザがあれば作れます。

Windowsは「メモ帳」 Macでは「テキストエディト」というソフトが入っています。

おすすめのテキストエディタ

Atom

Sublime Text

Mi(Macのみ)

TraPad(Windowsのみ)

ブラウザ

ブラウザとはHPを見るためのソフトです。

Windowsは「internet Explorer」というブラウザが入っていますし Macでは「Safari」というブラウザが入っています。これだけでも十分ですが、他によく使われているブラウザをご紹介します。

Google Chrome

Firefox

index.htmlの作成

1. 各OS標準のテキストエディタを起動する

まずはテキストエディタを開きましょう。

2. コードの入力

ひらがな以外のタグは必ず半角半英数字で入力します。

3. ファイルの保存

記述ができたら名前をつけて保存します。

その際、ファイル名の末尾に「.html」をつけます。

例：index.html

4. ファイルの表示

デスクトップに保存したファイルをWクリックすると勝手にファイルが開きます。

画面に何も表示されていない時は、どこかが間違っているので、もう一度確認をしましょう。

5. ファイルの編集

ファイルを編集するときはWクリックではなく、テキストエディタの画面のなかにファイルをドラック＆ドロップすればひらけます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T15:42:18+09:00

長押しボタンを作ってみた【マルチブラウザ対応】

　はじめに

前回作成した記事の続きです。
長押しボタンを作ってみた【円プログレス対応】

今回やりたいこと

前回、 conic-gradient を使って長押しの進捗を表現したのですが、この関数がChrome以外のブラウザだと、利用できないため、それをなんとかします。

調べる

conic-gradient をググると以下の記事がでてきます。
CSS4のconic-gradientを先取りする方法

こちらの記事を読んでみるとpolyfillが存在するらしいので、まずはそれを使ってみます。
CSS conic-gradient() polyfill

polyfillの導入

導入方法は、 polyfill用のjsを読み込ませるだけです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>
conic-gradient.jsは、こちらに落ちているので、落として、読み込ませれば大丈夫です。

Edgeで動かない

ブラウザのコンソールに、以下エラーがでます。
SCRIPT1014: SCRIPT1014: Invalid character
conic-gradient.js内で使われているπとかτとかが、Edgeだとダメみたいです。
なので、πをpai、τをtau、εをepsilonに書き換えました。

これで動きました。

で、css部分を確認してみると、
background-imageとしてjs内で動的に作成したsvgを設定しているみたいです。

svgデータの準備

polyfillの処理でcssに設定されているconic-gradientをbackground-imageに変換しているぽいのですが、
これを連続でリアルタイムに変換する方法がわからないので、あらかじめ、svgのデータを準備して、それをレンダリングする方法を考えました。

また、そのために必要なsvgデータを準備しました。

svg.js

20個のsvgデータ保持しているjsです。色は黒のみ。window.SMART_UIというグローバル変数に格納してあります。

レンダリング処理
index.js
・・・
if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
  var svg = 'url("' + SMART_UI.black[0] + '")';
  outerCircle.style.backgroundImage = svg;
} else {
  outerCircle.style.background = 'conic-gradient(black 0deg,white 0deg 360deg)';
}
・・・
progress = progress + (360 / (LIMIT / 100));
var outerCircle = document.getElementById('outer-circle');
if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
  var svg = 'url("' + SMART_UI.black[progress/18] + '")';
  outerCircle.style.backgroundImage = svg;
} else {
  outerCircle.style.background = 'conic-gradient(red ' + progress + 'deg, white 0deg 360deg)';
} 
・・・
こんな感じでbackground-imageに動的にsvgを設定するようにしました。

完成

https://www.youtube.com/watch?v=gqiTLU8EBUE&t=2538

若干チラチラしますが、一応動きました。

ソースコードは、以下にあります。
https://github.com/takuhou/smart-ui/blob/feature/apply-multi-browser/index.html

今後の対応として、ライブラリ化します。

今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。
【実況】長押しボタンをプログラミング【ブラウザ対応その１】
【実況】長押しボタンをプログラミング【ブラウザ対応その２】
えんじにぁ〜TV

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T13:24:50+09:00

「Front-end Developer Handbook 2019」について超ざっくり翻訳

英語ができないエンジニアのメモです、
もし翻訳に間違いなどありましたら、編集リクエストを投げてもらえると助かります。。。

そもそも「Front-end Developer Handbook」とは

概要

原文はこちら。

何が書いてあるの？

フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。
PDFでダウンロードしたり、Webブラウザ版をオンラインで読むことも可能。

誰が書いたの？

「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」（O'Reilly）や「jQuery Cookbook」（O'Reilly）、「JavaScript Enlightenment」（O'Reilly）などを執筆したCody Lindley氏。
参考：https://github.com/codylindley

0.1 — Recap of Front-end Development in 2018

1. React had several notable releases this past year that included, lifecycle methods, context API, suspense, and React hooks.

Reactは、昨年、lifecycle methods, context API, suspense, React hooksなど注目すべきリリースをいくつか発表した。

2. Microsoft buys Github. Yeah, that happened.

MicrosoftがGithubを買収。

3. Fonts created by CSS became a thing.

CSSによって作成されたフォントが人気になる。

4. What I used to call front-end driven apps, gets labeled "serverless". Unfortunately, this term is overloaded. However, the term JAMstack does seem to be resonating with developers.

私がフロントエンド駆動のアプリと呼んでいたものは、「サーバーレス」というラベルが付けられている。残念ながら、この用語は過負荷である。しかし、JAMstackという用語は開発者に共鳴している。

5. Google offered some neat tools this year to help make webpages load faster, i.e. squoosh and quicklink.

Googleは今年、ウェブページの読み込みを速くするための便利なツール(squooshやquicklink)を提案した。

6. Vue gets more Github stars than React this year. But React remains dominate in terms of use.

Vueは今年、Reactより多くのGithubスターを獲得した。しかし、Reactは依然として利用の面で支配している。

7. A solution similar to React, without a virtual DOM or JSX, is introduced RE:DOM.

仮想DOMやJSXを使用せずにReactに似たソリューションが、RE：DOMとして導入された。

8. Alternatives to NW.js and Electron show up, DeskGap and Neutralino.js.

NW.jsとElectronに代わる、DeskGapとNeutralino.jsが登場。

9. In 2017 the great divide between a front-end HTML & CSS developer v.s. front-end application developer is realized/verbalized. In 2018 that divide has grown wider and deeper and more people start to feel the divide.

2017年、front-end HTML & CSS developer と front-end application developer の間にある大きな格差がはっきり/言語化された。 2018年、その格差はより広く、より深くなり、より多くの人々がその格差を感じ始めた。

.10 This year, like most recent years, was stock full of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue etc...) Let me list them for you. Radi.js, DisplayJS, Stimulus, Omi, Quasar.

ここ数年のように、今年も、主流のJavaScriptアプリツール（React、Angular、Vueなど）と対抗しようとするアプリ/フレームワークソリューションが溢れていた。リストアップしよう。 Radi.js, DisplayJS, Stimulus, Omi, Quasar。

11. JavaScript frameworks start offering their own languages that compile to JavaScript (e.g. Mint).

JavaScriptフレームワークは、JavaScriptにコンパイルされる独自の言語（例えばＭｉｎｔ）の提供を開始する。

12. CodeSandbox evolves to become the dominant solution for online code sharing.

CodeSandboxは、オンラインコード共有のための主要なソリューションになるまで進化している。

13. CSS Grid and CSS Flexbox are fully supported in modern browsers and get taken for some serious rides. But many are left wondering when to use which one and how.

CSS GridとCSS Flexboxは最近のブラウザで完全にサポートされており、いくつかの深刻な問題に対応している。しかし、それらをどのように使用するのか、多くの人が疑問に思ったままである。

14. Many realize the long terms costs of bolted on type systems (e.g. TypeScript and Flow). Some concluded bolted on systems are not unlike bolted on module systems (i.e. AMD/Require.js) and come with more issues than solutions. Minimally, many developers realize that if types are needed in large code bases, that bolted on systems are not ideal in comparison to languages that have them baked in (e.g. Reason, Purescript, Elm).

多くの人が、型（TypeScriptやFlowなど）を導入することによる長期的なコストを認識している。
一部では、システムに固定されるのと、モジュールに固定される(AMD/Require.js)では違わず、解決よりも多くの問題があると結論づけた。
多くの開発者は、大規模なコードベースで型が必要な場合、システムで固定されていることが、それらを焼き付けた言語（Reason、Purescript、Elmなど）と比べて理想的ではないことを認識している。

15. CSS Variables gain browser support among modern web browsers

CSS Variablesは最近のウェブブラウザの間でブラウザサポートを得る

16. The flavors of CSS in JS exploded and some question the practice.

CSS in JSの人気は爆発的であり、そのプラクティスに疑問を抱く人もいる

17. ES modules are now usable in modern browsers and dynamic imports are close behind. We are even seeing a shift in tooling around this fact.

ESモジュールは現在、最新のブラウザで使用でき、動的インポートはすぐ後ろにある。

18. Many realize that end to end testing is the starting point of doing tests correctly in large part due to Cypress (i.e. Cypress first, then Jest).

多くの人が、E2EテストがCypressによるテストの大部分を正しく行うための出発点であることを認識している（Cypressが最初、次にJest）。

19. While Webpack was heavily used again this year, many developers found Parcel to be easier to get up and running.

Webpackは今年も頻繁に使われるようになったが、多くの開発者はParcelの方が起動しやすく実行しやすいと感じた。

20. One of the most important questions asked this year was, what is the cost of JavaScript.

今年の最も重要な論点の1つは、JavaScriptのコストである。

21. Babel 7 was released this year. That's a big deal because the last major release was almost three years ago.

Babel7は今年リリースされた。最後のメジャーリリースはほぼ3年前だったので、それは大事件である。

21. The reality of too much JavaScript change too fast is realized and people start talking about what you need to know before you can even learn something like React. The fight is real.

JavaScriptの変更が早すぎるという真実が現実のものとなり、Reactのようなことを学ぶ前に、知っておくべきことについて人々が話し始めている。戦いは本物だ。

22. Most developers found GraphQL, via Apollo, and see it as the next evolution for data API's.

ほとんどの開発者はApolloを介してGraphQLを見つけ、データAPIの次の進化と見なしている。

23. Gulp and friends definitely took a back seat to NPM/Yarn run. But this did not stop Microsoft from getting in the game with Just.

Gulpと友達は間違いなくNPM / Yarn runに後部座席を取った。しかし、これはMicrosoftがJustに参戦するのを妨げるものではなかった。

24. This year, one can not only lint/hint HTML, CSS, and JavaScript they can lint/hint the web itself.

今年は、HTML、CSS、およびJavaScriptだけでなく、Web自体をlint/hintにすることができる

25. The 2018 Front-End Tooling survey is worth reading if only to realize just how much jQuery is still used.

2018年のFront-End Tooling調査は、どれだけのjQueryがまだ使用されているかを理解するためだけに読む価値がある。

26. It can't be denied TypeScript gained a lot of users this year.

TypeScriptが今年多くのユーザーを獲得したことは否定できない。

27. VScode, dominates as the code editor of choice.

VScodeは、選択のコードエディタとして優位。

0.2 — In 2019, Expect...

1. Hopefully, more of this to come. "Stepping away from Sass".

うまくいけば、もっとくるだろう。「Sassから離れる」

2. Still a good idea to keep an eye on and learn about the up coming additions (and potential additions) to CSS via https://cssdb.org

https://cssdb.org を通じて、CSSに今後追加される機能（および将来追加される可能性のある機能）について注意を払い、学習することをお勧めする。

The WebP image format from Google could reach support from all modern browsers this year.

3. GoogleからのWebP画像フォーマットは、今年、すべてのモダンブラウザからの支持を得ることができた。

4. Prepack will continue to cook.

Prepackは調理を続けるでしょう。

5. GraphQL will continue to gain massive adoption.

GraphQLは大規模的に採用され続けるだろう。

4. The, "State of JavaScript" survey authors will add a "State of CSS" survey in 2019.

"State of JavaScript"調査の著者は、2019年に "State of CSS"調査を追加する予定だろう。

5. Keep an eye on Web Animations API.

Web Animations APIに注目。

6. Someone you know will try and convince you to use TypeScript.

あなたの知っている誰かが、TypeScriptを試して、あなたに使うように説得するだろう。

7. Babel will get some competition from swc-project.

Babelはswc-projectとの競争をある程度受けるでしょう。

8. The case for, JAMStack's will continue.

JAMStackのは続くだろう。

9. Chasing the one code base to many platforms will continue.

1つのコードベースを多くのプラットフォームに追いかけるのは続くだろう。

10. More developers will turn to languages like ReasonML over JavaScript/TypeScript for large code bases.

より多くの開発者は、大きなコードベースのためにJavaScript/TypeScriptよりもReasonMLのような言語に目を向けるだろう。

11. More, largely used projects will start to shed jQuery in favor of native DOM solutions.

さらに、主に使用されているプロジェクトはネイティブDOMソリューションを支持してjQueryを脱ぎ捨て始めるだろう。

12. Web Components! At this point, I have no idea how Web Components will play out. Reality is they are not going away, and they have not gained a lot of momentum/usage once the hype ended.

Webコンポーネント！現時点では、Webコンポーネントがどのように機能するかはわからない。実際に、それらは消え去っていないし、誇大宣伝が終わっても多くの勢い/用法を得ていない。

　 Tweet
Qiitaで続きを読む

投稿日：2019-04-17T00:35:12+09:00

jQuery(mouseover, mouseout, focus, blur, change)を使ってみた

昨日、動きを制御したナポレオン周りを少しいじってみた。いじってみて思ったが、この感じでどんどん動きを増やしていくと、idがかぶりそうで、お友達から聞いたVue.jsとかを使った方がいいのかなと感じた。早々にjQueryのお勉強は終了し、Vue.jsに移りたい。

本日の作業

ボタンにマウスオーバー、ボタンからマウスアウトした時のボタンの背景色の変化をつけた。
テキストボックスをフォーカスした時に背景色が変わるようにし、テキストボックスから出たら元に戻るようにした。
セレクトボックスの選択肢を変えたらアラートが出るようにした。
追加箇所のレスポンシブ対応

indexhtml

<main>
    <section id="top">
        <div class="container">
            <h2 class="topTit">X Characters</h2>
            <div class="img"><img id="napo" src="./img/napoleon-bonaparte-67784_640.jpg" alt="ナポレオン" width="273" height="320" class="imgR"></div>
            <div class="btn">click here !</div>
            <form action="" method="POST">
                <div class="box">
                    <input type="text" id="name" autocomplete="off">
                    <select name="members" id="members">
                        <option>napoleon</option>
                        <option>perry</option>
                        <option>織田信長</option>
                    </select>
                    <div class="submit">
                        <input type="submit" value="コメントを送信">
                    </div>
                </div>
            </form>
        </div>
    </section>
</main>

scriptタグ内

    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script>
        $(function(){
            var cancelFlag = 0;
            $('.btn').click(function(){
                if( cancelFlag == 0 ){
                    cancelFlag = 1;
                    $('#napo').toggle(1500);
                    $('#napo').toggle(1500);
                    setTimeout(function(){
                        cancelFlag = 0;
                    },3000);
                }
            });

            $('.btn')
                .mouseover(function(){
                    $(this).css('background', '#FF00FF');
            })
                .mouseout(function(){
                    $(this).css('background', '#696969');
            });

            $('#name')
                .focus(function(){
                $(this).css('background', '#E0FFFF');
            })
                .blur(function(){
                $(this).css('background', '#FFF');
            });

            $('#members').change(function(){
                alert('ちゃんと我輩を選んだだろうな？');
            });
        });
    </script>

修正後のWebサイト

こちら

参考

ドットインストール jQuery入門 (全20回) #13 イベントを使ってみよう
 ドットインストール jQuery入門 (全20回) #14 focus､blur､changeを使おう

20190417のHTMLに関する記事は10件です。

An example of #markdown #HTML conversion from standard input / output using #ruker gem's redcarpet / reverse_markdown with #docker

Dockerfile

EXE

ref

Original by Github issue

HTMLタグ_1はじめに（覚書）

HTMLタグ−１

記述例

HTMLタグ1

HTMLタグ1 （覚書）

HTMLタグ−１

記述例

[2日目]HTML&CSS 2週目 JS1週目

ど初心者がプログラミングを勉強したら・・・

ターミナルを理解する

ターミナルとは

変数

今日の感動

今日の失敗

HTML超初心者~HTMLを知ろう~

HTMLについて

HTMLの歴史

CSSの誕生

HTMLの記述方法

おすすめのテキストエディタ

ブラウザ

index.htmlの作成

1. 各OS標準のテキストエディタを起動する

2. コードの入力

3. ファイルの保存

4. ファイルの表示

5. ファイルの編集

長押しボタンを作ってみた【マルチブラウザ対応】

はじめに

今回やりたいこと

調べる

polyfillの導入

Edgeで動かない

svgデータの準備

レンダリング処理

完成

「Front-end Developer Handbook 2019」について超ざっくり翻訳

そもそも「Front-end Developer Handbook」とは

概要

何が書いてあるの？

誰が書いたの？

0.1 — Recap of Front-end Development in 2018

1. React had several notable releases this past year that included, lifecycle methods, context API, suspense, and React hooks.

2. Microsoft buys Github. Yeah, that happened.

3. Fonts created by CSS became a thing.

4. What I used to call front-end driven apps, gets labeled "serverless". Unfortunately, this term is overloaded. However, the term JAMstack does seem to be resonating with developers.

5. Google offered some neat tools this year to help make webpages load faster, i.e. squoosh and quicklink.

6. Vue gets more Github stars than React this year. But React remains dominate in terms of use.

7. A solution similar to React, without a virtual DOM or JSX, is introduced RE:DOM.

8. Alternatives to NW.js and Electron show up, DeskGap and Neutralino.js.

9. In 2017 the great divide between a front-end HTML & CSS developer v.s. front-end application developer is realized/verbalized. In 2018 that divide has grown wider and deeper and more people start to feel the divide.

.10 This year, like most recent years, was stock full of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue etc...) Let me list them for you. Radi.js, DisplayJS, Stimulus, Omi, Quasar.

11. JavaScript frameworks start offering their own languages that compile to JavaScript (e.g. Mint).

12. CodeSandbox evolves to become the dominant solution for online code sharing.

13. CSS Grid and CSS Flexbox are fully supported in modern browsers and get taken for some serious rides. But many are left wondering when to use which one and how.

15. CSS Variables gain browser support among modern web browsers

16. The flavors of CSS in JS exploded and some question the practice.

17. ES modules are now usable in modern browsers and dynamic imports are close behind. We are even seeing a shift in tooling around this fact.

18. Many realize that end to end testing is the starting point of doing tests correctly in large part due to Cypress (i.e. Cypress first, then Jest).

19. While Webpack was heavily used again this year, many developers found Parcel to be easier to get up and running.

20. One of the most important questions asked this year was, what is the cost of JavaScript.

21. Babel 7 was released this year. That's a big deal because the last major release was almost three years ago.

21. The reality of too much JavaScript change too fast is realized and people start talking about what you need to know before you can even learn something like React. The fight is real.

22. Most developers found GraphQL, via Apollo, and see it as the next evolution for data API's.

23. Gulp and friends definitely took a back seat to NPM/Yarn run. But this did not stop Microsoft from getting in the game with Just.

24. This year, one can not only lint/hint HTML, CSS, and JavaScript they can lint/hint the web itself.

25. The 2018 Front-End Tooling survey is worth reading if only to realize just how much jQuery is still used.

26. It can't be denied TypeScript gained a lot of users this year.

27. VScode, dominates as the code editor of choice.

0.2 — In 2019, Expect...

1. Hopefully, more of this to come. "Stepping away from Sass".

2. Still a good idea to keep an eye on and learn about the up coming additions (and potential additions) to CSS via https://cssdb.org

3. GoogleからのWebP画像フォーマットは、今年、すべてのモダンブラウザからの支持を得ることができた。

4. Prepack will continue to cook.

HTMLタグ1　（覚書）

[2日目]HTML&CSS 2週目　JS1週目

　はじめに