JavaScriptの非同期処理をじっくり理解する (2) Promise
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先順
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
UIデザインは奥が深い、CSSで美しいシャドウを実装する方法
Webページやスマホアプリなど、UIデザインで使用されるシャドウをより美しく実装するテクニックを紹介します。 シャドウをぼんやりとしたグレーにするだけでなく、美しく最適化して実装します。また、シャドウのサイズで要素に標高差をつけ目立たせたり、彩度と明度の関係など、UIデザインに効果的なテクニックも詳しく解説されています。 CSSでシャドウを実装する前に、一読をお勧めします。 Designing Beautiful Shadows in CSS by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、当記事では画像にしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに シャドウをなぜ使用するのか 一貫性のある環境の構築 美しいシャドウの実装方法1: レイヤー化 美しいシャドウの実装方法2: 色
【前編】開発内製化の5年の軌跡。「消耗戦の悪魔のループ」をどう乗り越えたのか - エス・エム・エス エンジニア テックブログ
大手企業を筆頭に、エンジニア組織の外注依存から内製化にシフトしようとする企業の報道を目にすることが増えてきました。 一方で、実際にエンジニア組織の内製化を進めようとするには、事業構造、事業戦略、企業文化、人材などの所与の条件を踏まえて、最適な方法を実践することが求められる非常に難易度の高い取り組みです。 実際にケースとしても世の中に少ないことなどもあり、エンジニア組織の内製化に関する方法論について紹介されたコンテンツは少なく、各社が手探りの状態でこの内製化に取り組んでいると思われます。 そこで、まさにこれから内製化という難儀な仕事に向き合う技術組織の責任者の方の一助になればと思い、エス・エム・エスが2015年よりエンジニア組織の内製化に取り組んできたプロセスとそこで得られた反省と学びについてを共有したく、50人超のエンジニア組織で技術責任者を務める田辺に内製化の全貌を聞きました。 1. 簡
原作ファン視点『ファイナルファンタジーII ピクセルリマスター』レビュー。理不尽・凶悪・野心的なゲームを、丸めずに現代風に仕立てたファン向けの好移植 - ゲームキャスト
パラメキア帝国が世界制覇をとげようとするなか、プレイヤーは滅ぼされた国の人々が集う反乱軍に身を投じ、それにあらがう……。 1988年にファミリーコンピューター向けに発売された『ファイナルファンタジーII（以下、FF2）』が2021年、『ファイナルファンタジー II ピクセルリマスター(以下、FF2PR)』と名前を変え、装いも新たに登場した。 “ピクセルリマスター”とは、究極の2Dリマスターを掲げるスクウェア・エニックスのシリーズ作。 原作に近い内容で、バランス、見た目、音楽共に現代に通じる形で再生するプロジェクトだ。 しかし、私にとって『FF2』は当時としてもゲームバランスが粗く、同時にその粗さが味であり魅力というクセのある1作。 見た目はともかく、粗い面白さも含めてゲーム内容を現代風になおせるものだろうか？ 今回は『FF2PR』を、『FF2』のファミコン版をリアルタイムで遊んだ私の目線で
コンポーネントを小さく・きれいに設計しよう。Vue Composition APIを活用したコンポーネント分割術 - ICS MEDIA
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか？ なぜ、Vueのコンポーネントは肥大化するのか？ 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
Rust開発時の便利ツールたち
前書き Rustを書くときに便利なツールをまとめた記事が無い気がしたので作成。(ちゃんと探してないので既にあるかも) 公式ツール cargo パッケージマネージャ 基本だけどとても便利なツール 一度はThe Cargo Bookを読んでおくことを推奨。 rustfmt フォーマッター cargo fmt でもフォーマットの修正が出来る。(こっちを使うことが多い) clippy lintツール こう書いたほうが良いよという提案もしてくれるので便利。 cargo clippy --fix を使うと自動で直してくれる。 rust-analyzer Language Server rls もあるが、(最近は?) rust-analyzer の方がメジャーな気がする。 追記 : RLSは非推奨になりました。RLS Deprecation 非公式ツール cargo-watch ソースコードの変更を検知
【2021】モダンなPython開発環境の紹介 - Qiita
📌 はじめに Pythonで開発を行うにあたり、リンタやフォーマッタ、パッケージマネージャ等のツールの選定は非常に重要な問題です。一方で歴史的な経緯もあり、沢山の選択肢から何を選ぶべきか情報がまとまっていないように感じました。この記事では2021年9月時点でモダンと言えるであろう開発環境を紹介します。基本的にはシェアが高いこと、著名なパッケージで使用されていることを主な選定理由としており、また特定のエディタに依存しないことを前提とします。 本記事で紹介する内容は一つのテンプレートに近く、必要に応じてカスタマイズするもよし、そのまま使ってもよし、として参考になればと思います。(CI/CDについてはPythonとは独立した問題なので触れません。またドキュメント生成はSphinxを推しますが、必須ではないので今回は割愛します。) 📄 要約 "モダン"な開発環境を箇条で列挙すると下記の通りです
Cloudflare、CDNエッジで使えるオブジェクトストレージ「R2」発表。Amazon S3互換、読み出しの帯域コストなし、イレブンナインの信頼性
Cloudflare、CDNエッジで使えるオブジェクトストレージ「R2」発表。Amazon S3互換、読み出しの帯域コストなし、イレブンナインの信頼性 Cloudflareは、同社のCDNエッジで実行されるワーカープロセス「Cloudflare Workers」などから使えるAmazon S3互換のオブジェクトストレージ「Cloudflare R2 Storage」を発表しました。 Announcing Cloudflare R2 Storage: Rapid and Reliable Object Storage, minus the egress fees. https://t.co/U2dVhVSb2U #BirthdayWeek — Cloudflare (@Cloudflare) September 28, 2021 Cloudflare R2の特徴は、イレブンナインの信頼性を提
英語の括弧は4種類ある！括弧の使い方を理解して正しく使えるようになろう | English Lab（イングリッシュラボ）┃レアジョブ英会話が発信する英語サイト
英語の文章に触れる機会が増えると目につくのが英語の括弧。「英語で括弧はなんと呼ぶんだろう？」「使い方は日本の括弧と違うのかな？」など、気になっている人も多いのではないでしょうか。実は、日本語で何気なく使っている括弧が英語では使われないなど、両者には違いが見られます。 こちらの記事では、英語での括弧の使い方を徹底解説！よく使われる4つの括弧をはじめ、コロンやセミコロンなどの記号についても紹介します。例文も掲載しているので、括弧がどのように使われるのかしっかりと理解できるでしょう。 English Labは、オンライン英会話「レアジョブ英会話」が運営。英語を「話せる」ようになるには、繰り返しアウトプットする機会が必要です。1レッスン142円のレアジョブ英会話で每日外国人講師と話してみませんか。レアジョブ英会話を見る 英語の括弧は大きく分けて4種類！ 日本語と同様に、英語でも様々な括弧が使われま
2021年版、サーバーレスのテスト手法を考える / Serverless Testing 2021
動画はこちら https://twitter.com/_kensh/status/1468951162053607424?s=20 サーバーレスはサクっと作れるのは良いけれどテストやデバッグが大変だって思うことはないでしょうか？ 難しさの理由としてプログラミングコードのテストだけでなく、サービスを統合した結合部分の設定、分散するコンポーネントの関係性、同期だけでなく非同期的に動作するイベントドリブンなコンポーネントのテストの方法論が浸透していない事にあるのではないでしょうか。このセッションでは実践的なサーバーレスのテスト手法やテストにおける注意点やチップスを含めてお届けします。
【フライパン1枚レシピ】うまーい「ステーキ＆ガーリックライス」のつくりかた - メシ通 | ホットペッパーグルメ
とにかく元気が出るメニュー。その名はステーキ＆ガーリックライス こんにちは。皆さまいかがお過ごしでしょうか。 日暮れとともに涼しげな虫の声が聞こえてくるようになりましたね。 外は秋の気配だというのに、私は常に眠いです。動いてないのにスタミナが切れてます。 自粛続きでかえって疲れが溜まっているような気が。 そんな時こそ補給したいのが、お肉とにんにく！ ということで、今回は、ステーキ＆ガーリックライス（我が家の決定版レシピ）をご紹介したいと思います。 フライパンひとつでできるので後片付けもラク。ビールにもぴったり。 私はこの1皿で350ml缶を2本いってしまうほど。 10分弱で超カンタンに作れますが、これがおいしいんです。 それでは材料から。 【材料】（1人〜2人分） ステーキ用の牛肉 1枚（350gくらい） 玉ねぎ（大）の粗みじん切り 1/2個分 温かいご飯 お茶碗2杯分 にんにく 3片 バ
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「そうだったのか！」「長年の謎がとけた」なぜ蕎麦屋にラーメンがあるのか調べたレポ漫画が圧巻の出来だった
SLOを活用した技術的改善
「それ、どこに出しても恥ずかしくないTerraformコードになってるか？」 / Terraform AWS Best Practices
東京の「カフェ路線図」が見やすくて便利！スタバ、ドトール、コメダなど…多い駅と少ない駅が一目瞭然「やっぱ中央線か」「スタバはすごいな」
アプリケーション開発者は Amazon ECS あるいは Kubernetes をどこまで知るべきか #AWSDevDay / You build it, you run it
「Python」×「株価データ」で学ぶデータ分析のいろは
【朗報】3D制作ソフト「blender」の1400ページにも及ぶ解説書が無償公開 勉強中の人には朗報すぎる : まとめダネ！
