リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html

2020年のベストトラックを集計しました。今回は219人分のデータを集計することができました。協力してくださった方々、本当にありがとうございました！来週発表するベストアルバムの1/3ほどの規模ですが、それなりのものができあがったと自負しています。メディアのランキングとはまた一味違った、ネットの音楽馬鹿（の一部）の方々が昨年一年間にどういう曲を聴いていたのか、振り返っていただけると幸いです。 作業量が多すぎるのでレビューをつけるのは断念しましたが（アルバムの方はやります）、ストリーミングとYouTubeのリンクはつけました。使っていただければ幸いです。明日までよろしくお願いします！（ぴっち） 追記（1/22）記事下にSpotifyとApple Musicのプレイリストがついています。よかったらお使いください。 このランキングについて ネットの音楽オタクが選んだベストアルバムは音楽だいすきクラ

当サイトでは、Photoshopの新しい機能テクニックをつかった最新チュートリアル、作り方を定期的にまとめて紹介しています。 この記事では、2020年のあいだに公開された、特に確認しておきたいPhotoshopのデザインチュートリアル、つくり方をまとめてご紹介します。 これまで以上に便利になった新しくアップデートされたPhotoshop 2021の新機能はもちろん、ボタンひとつで完成のお手軽写真やアクション、合成テクニックなど、デザイナーが覚えておくと便利な人気のデザインスタイルのつくり方がずらり揃います。 これからPhotoshopを始めてみよう、というひとにもぴったりなテクニックを揃えています。年末の連休をつかって、新しいテクニックを習得してみてはいかがでしょう。 2020年公開のIllustratorチュートリアル、つくり方も以下の記事でまとめています。 【総まとめ】2020年公開の

この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele

こんにちは、料理研究家のYｕｕです。 あと1週間ちょっとで今年も終わり！ 年末のご準備はお済みですか？ 今日は、直前まで何も準備しなくても大丈夫なくらい簡単で便利、一度作っておけばアレンジ自在の「ゆで鶏レシピ」をご紹介いたします。 しかも、作り方はレシピがいらないくらいとっても簡単。塩をすり込んだ鶏肉を、長ネギとしょうがと共に5分ほどゆで、あとは余熱で火を通すだけ。たったこれだけだけど、鶏肉はしっとりやわらか～。スープにもうま味がたっぷりなので、アレンジが無限大！ 包丁を使うのは、しょうがをスライスする時だけなので、ぜひお気軽にお試しくださいね。 ※今回はもも肉とむね肉をまとめて作っていますが、もちろん、もも肉だけ、むね肉だけでもOKですよ～。 Yｕｕの「香味ゆで鶏」 【材料】（4人分） 鶏もも肉　1枚（300g） 鶏むね肉　1枚（300g） 長ネギ（青い部分）　1本分 しょうが（スライス

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り

私の大好きな数学者の名言で、「音楽は感性の数学であり、数学は理性の音楽である」という言葉があります。 数を原理とするピタゴラス教団がピタゴラス音律を作り出し、そこから純正律という整数比率によるハーモニーを重視した音律が作られたことからも、音楽と数学の関係性は深いと言えるでしょう。 しかし、 実際に数学を多少わかって、音楽を多少嗜んでいる方であれば、音楽で使われる様々な単位への違和感を感じたことがあるのではないでしょうか。 とにかく既存の音楽理論や音楽文化が、「12音種」「7幹音」「5線譜」「1から数える」すべてが噛み合っていない感じがすごい。この噛み合ってない上で究極の覚えゲーを重ねがけして理論作り上げてんのヤバい。 — じーくどらむす/岩本翔 (@geekdrums) July 12, 2020 音楽を取り巻く数への違和感まずこの「12音階」（ド～シまで、＃、♭も含めた1オクターブ以内の

Help us understand the problem. What are the problem?

フリーWi-Fiを提供しているレストランやカフェなどでは、専用のカードにネットワーク名とパスワードが記入されており、これを入力することでWi-Fiに接続することが可能となります。そんなWi-FiのSSIDとパスワードが書かれたカードを手軽に作成できるサービスが「WiFi Card」です。Wi-Fiのネットワーク名とパスワードを入力すると自動生成されるQRコードをスマートフォンなどのカメラで読み取れば、面倒なパスワード入力作業なしで、簡単にWi-Fiにアクセスできるようになります。 WiFi Card https://wificard.io/ 使い方はとても簡単で、WiFi Cardにアクセスすると2つのテキストボックスがあるので、ここにWi-Fiのネットワーク名とパスワードを入力すればOK。今回は架空のネットワーク名として「GIGAZINE_Net」、架空のパスワードとして「HOGEhog

Amazon Web Services ブログ “アカウント作成後すぐやるセキュリティ対策” 編を公開しました！- Monthly AWS Hands-on for Beginners 2020年4月号 こんにちは、テクニカルソリューションアーキテクトの金澤 (@ketancho) です。先月末に「はじめの一歩」ハンズオンを公開したのですが、皆様ご覧いただけましたでしょうか？ちょうど春先の時期だったこともあり、多くの AWS 初学者の方にご視聴いただけているようでありがたい限りです。 さて、この記事ではアカウントを作った次のステップとしてぜひご覧いただきたい新作ハンズオン「アカウント作成後すぐやるセキュリティ対策」ハンズオンを紹介します。「不正な操作/動作を継続的にモニタリングする方法は？」「コストレポートってどうやって設定すればいいの？」といったアカウント開設直後にまずは抑えておきたい考

初心者が見た瞬間になるもの特集です。 小テクだったり、省略記法だったり、、 実際私も出会ってになりました！ 追記 即時関数のところで説明にある 他には、+や-等でも動きます。 の"等"が気になった方に朗報です。こちらの記事で"等"を知ることができます！！ [JavaScript] "!function() {}()"以外の即時関数を紹介するぜ よろしければ覗いてみてください！ !! is 何 booleanへの型変換。 例 const obj = { hoge: "hoge" } function hasHoge() { return !!obj.hoge // => true } 論理否定（！）を二つ繋げて、boolean への型変換をしています。 !の結果を!で評価しているんですね〜。 JSON.parse(JSON.stringify(obj)) is 何 ディープコピー。 例

みなさんTypeScriptでサーバアプリケーション（Node.js）のロジックを書く時に、異常系の表現をどのようにされていますでしょうか？ここでいう異常系とは、仕様上想定される異常のことです。準正常系と言ったりもするかと思います。 私はJavaScriptの延長でTypeScriptをはじめたので、最初は null や undefined を返したり throw を用いるやり方をしていましたが、次第にTypeScriptが持つ型を生かし、できるだけ型安全に異常系を表現したいと考えるようになりました。そして試行錯誤した結果、いい感じの落とし所に落ち着いたので、その内容についてお伝えしたいと思います。 また記事の後半では、異常系の型を実装する中でハマった点についてもお伝えしたいと思います。 TypeScriptの異常系表現について 1. nullやundefinedを返す 冒頭でも述べたよう

↓新作もよろしくやで！ ジェネリクスをもう少しだけ使いこなす。 コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった 36歳ザコーダーの休日 ワイ「何やこのコード、全然動かへんやん」 ワイ「怖いな～怖いな～…なんか嫌だなあ～」 よめ太郎「（何で自分が書いたコード見て稲川淳二みたいに怯えとんねん・・・）」 よめ太郎「（そんな鳥肌立つようなクソコード書いてんのかいな・・・）」 娘（4歳）「ねぇ、パパ」 ワイ「なんや、娘ちゃん」 娘「ちょっと、作ってほしい関数があるの」 ワイ「またかいな」 ワイ「娘ちゃんはホンマに関数が大好きやなぁ」 ワイ「しゃあない、パパはプログラミング苦手やけど、頑張って作ったるわ」 娘「ありがとう、パパ」 今回の要件 ワイ「ほんで、今回はどんな関数を作ればええんや？」 娘「えっとね」 娘「'あ'という文字列を渡したら」 娘「['あ', 'あ

機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜　ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜　クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん

コミュニケーションが生まれるツイートまとめツール

みなさんはHomebrewをお使いでしょうか。macOSをお使いの多くの開発者が使っていると思います。 HomebrewのインストーラーはRubyで書かれており、次のコマンドでインストールするようになっていました。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" HomebrewがRubyに依存していることは良いのですが (formulaの書きやすさはRubyならでは)、インストーラーの話になると事情が変わってきます。HomebrewのインストールコマンドはmacOSの工場出荷状態でも動く必要があります。こういうものにRubyを使っているのはリスクがあります。 将来的にmacOSデフォルトにRubyやPythonが含まれなくなる (参考リンク

Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

上記の画像を見ると分かる通り、カラフルで見やすいですね。右図のようにディレクトリのツリー表示にも対応しています。さらに --icons オプションを付けると、ファイルタイプに応じたアイコン表示も可能です。 bat 続いて cat コマンドの代替である bat の紹介です。 ファイルの拡張子に応じてソースコードを色付けして表示してくれます。また less のようなページャの機能も持っており、行数の長いファイルを渡すと自動でページャモードで開いてくれます。 hexyl hexyl はバイナリダンプコマンド od の代替コマンドです。bat の開発者と同じ方が開発しています。

ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン