React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
Headless CMSとは Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。 これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。 動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。 Micro CMSとは Micro CMSは国産のHeadless CMSです。 これまでのHeadless CMSというと「Contentful」が主流な気がします。 Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。 使い方 登録 上記画面の「無料ではじめる」または「新規登録」
この記事はCSS Advent Calendar 2022の9日目の分です。 CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。 クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときで
Google DomainsがSquarespaceに買収されるので、持っているドメインとカスタムドメインのメールアドレスをCloudflare Registrarに移管した。 Cloudflare Registrar · Cloudflare Registrar docs 基本的にはCloudflare Registrarに表示される手順でやっておけば、問題は起きなかったので、よくできてると思った。 次のような手順で順番に移管していたので、移管時のメモ。 手順 Google Domainsの移行準備 Cloudflareのname serverを使うように移行する ドメインの移管 メールの転送設定 Google Domainsの移行準備 移管する前に、Google Domainに登録しているドメインの設定を変更しておく。 それぞれONになってると移管時に問題が発生する。 DNSSECを無
タイトルにもあるとおり, N予備校の 「プログラミング入門 Webアプリコース」を修了しましたので, 完走した感想を書きたいと思います. プログラミング入門 Webアプリコース とは まずはじめに, 今回終了したN予備校の「プログラミング入門 Webアプリコース」(長いので以下 入門コース と略します) がどんなコースなのかというのは, N予備校公式サイトから引用すると, 完全な未経験者向けのプログラミング入門講座です。 JavaScriptというプログラミング言語でセキュリティ上の問題のないWebサービスが開発できるようになります。他にも数値集計プログラム、Slackのボットなどを作成しながら、エディタやLinuxの開発環境などの基礎知識を身につけます。なお学習にはPCが必要です。 www.nnn.ed.nico とのことらしいです. 他にも 「大規模Webアプリコース」 や 「スマート
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 完成したデザインをWebサイトとしてWebブラウザーに表示するためには、コーディングが必要になります。 コーディングを勉強中だったり、コーディング経験がまだあまり多くない方によくある悩みとして以下のようなものがあります。 どこから作業を進めていけばいいのか分からない同じようなスタイルを持ったclassが増えていってしまうスマホサイトのデザインが用意されていない時にどうすればいいのか分からない こ
HTML Living Standard の5月2日付けの更新で <select> 要素の子要素として <hr> を含めることができるようになりました。 Proposal: Allow adding separator rows to <select> boxes using <hr> · Issue #3410 · whatwg/html Allow <hr> to be used inside <select> as a separator by annevk · Pull Request #9124 · whatwg/html 4.4.2 The hr element 4.10.7 The select element <select> 要素の中をグループ化する方法としては、従来から <optgroup> 要素が存在しますが、これは label 属性による可視ラベルの設定が必須なため
PHP8.2 / PHP8.1 / PHP8.0 / PHP7.4 2021/11/26にリリースされました 2021/07/20、PHP8.1がフィーチャーフリーズしました。 言語機能に関わるような機能の追加・変更が締め切られたということです。 今後はデバッグを繰り返しながら完成度を高めていき、2021/11/25にPHP8.1.0がリリースされる予定です。 というわけでPHP8.1で実装されるRFCを見てみましょう。 RFC Fibers 賛成50反対14で受理。 Fiberです。 PHPで非同期コードを書けるようになります。 $fiber = new Fiber(function (): void { $value = Fiber::suspend('fiber'); echo "レジュームした。$value: ", $value, "\n"; }); $value = $fiber
この記事のモチベーション 「php-fpmとはなにか？」を知るため、PHPのドキュメントを見ました。 しかし、ここに書いていることはまあそうなのですがあまりに焦点が絞られ過ぎてて「php-fpmとはなにか？」に対する答えとしては少し不十分な気がしていました。 例えるなら数学の問題に答えるにあたって、途中式を飛ばしたり証明の過程を飛ばしたりというような感じ。 不十分というのは、それを理解するための段階をすっ飛ばして答えだけが書かれている状態のことを指しています。 その不十分なところを自分も曖昧にしか理解できていない気がしており、いい機会なので整理しておこうというのがこの記事のモチベーションです。 そのためこの記事は、「php-fpmとはなにか？」をプロセス→Webサーバー→実行方式と順を追って説明していく構成になっています。 「細けぇこたぁいいんだ、おらぁ今すぐ答えだけ知りてぇンダ」という方
はじめに 基本的にReact + TypeScriptでフロントの開発をしているんですが、実際にコードを書いている時に気をつけていること、便利な書き方として知っておくと得をするReactコンポーネントの書き方を紹介します。 Propsが多くなりすぎたら やたらpropsが多くなってしまうことありませんか？しかも同じような名称ばっかりを何回も書くことになるという。そうゆうときはできる限りショートハンドで書きましょう。 return ( <SampleComponent type={user.type} name={user.name} email={user.email} image={user.image} /> )
Microsoftは米国時間2021年5月27日、Microsoft 365 for the webのExcel Onlineで、「Officeスクリプト」が利用可能になったことを公式ブログで発表した。OfficeスクリプトはExcel Onlineの操作を記録して自動実行を可能にする機能で、テキストエディターでいえばキーボードマクロを連想すると分かりやすい。具体的には複数セルの計算やグラフ作成といった操作をTypeScriptのコードに置き換える。筆者が確認した限りでは日本語環境でも利用可能だった。 Excel Online上の操作をTypeScriptコードに変換する(画像はすべて公式ブログより抜粋) 作成したOffceスクリプトはPower Automate経由で自動実行できる。より詳細を確認するには、公式ドキュメントやサポートページ、サンプルコードに目を通すことをお薦めしたい。近年
はじめに The Bezos Mandateという文書があります。日本語に訳すと「ベゾスのお達し」とか「ベゾスの勅令」でしょうか。 言わずと知れたAmazon.comのCEO、ジェフ・ベゾスが開発チームに通達した内容です。 これが（元Amazon.com従業員によって）公開されたのは2011年ですが、ベゾスがこのお達しを出したのは2002年前後です。17年経過した現在でも真理をついているどころかようやく時代がベゾスに追いついたかという感想です。 この記事ではThe Bezos Mandateの紹介と、僭越ながら補足説明も行います。 お達しの内容 原文は元Amazon.com従業員のGoogleエンジニア（公開当時）、Steve Yeggeによって公開されました。 Google+にStevey's Google Platforms Rantというタイトルで、Amazon.comと比べたGoo
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新
Denoが大幅な方針変更を発表。3カ月以内にnpmパッケージへの対応を実現、最速のJavaScriptランタイムを目指しHTTPサーバを刷新 オープンソースのJavaScript/TyeScriptランタイム「Deno」を開発するDeno Landは、「Big Changes Ahead for Deno」（Denoの方向性の大きな変更）という記事を公開し、Denoのnpmパッケージへの対応や高速化などの新たな取り組みを発表しました。 Big changes ahead for Denohttps://t.co/Q5xKz3bJLg — Deno (@deno_land) August 15, 2022 今回の発表では、npmへの対応、最速のJavaScriptランタイムを目指す、企業向けサポート、という3つの大きな取り組みが示されています。 3カ月以内にnpmパッケージをインポート可能に
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
内容 社内でAWS知らない人でもこれだけは覚えていてほしいという動画を作成して欲しいとリクエストあり。その内容を資料化したものです。小学生の子供に説明してみましたがになんとなくAWSが分かったと言っていたので今回は結構分かりやすくまとめられたと思います。 システムを構築する時 システムを構築する際、サーバやネットワークなどのインフラが必要になります。昭和の時代は物理サーバを買ってきてラックマウントしてネットワークに接続してと物理的な作業が多く発生していました。 その後、物理サーバの上に仮想的なサーバを作成できる仮想化技術の発展により、仮想サーバが主流となりました。最初に物理サーバを用意して、仮想化基盤を構築する必要があります。仮想化基盤構築後は、新しいシステムを作りたい場合はすぐに仮想サーバの準備を行うことができ、物理環境の時と比較すると大きな進展がありました。 仮想化基盤を自社で構築する
voicodという音声入力でメモを書けるシンプルなウェブアプリケーションを書きました。 音声入力でメモができるシンプルなアプリケーションを書きました。https://t.co/EHSKnNKNaL x-callbackを使ってショートカット.app 等と連携すれば、入力内容をNotionに保存したりできます。 Note: SpeechRecognitionに対応したブラウザ(ChromeやSafari)が必要 Source: https://t.co/NnzXVjlGnF pic.twitter.com/yzoA3VIzzl — azu (@azu_re) February 10, 2022 SpeechRecognitionというウェブブラウザで音声認識をするAPIを使っているので、このAPIに対応しているブラウザが必要になります。 具体的にはGoogle ChromeやSafariなど
マイクロソフトの「Blazor」が正式版に、まずサーバサイドで。C#と.NET Core 3.0に対応したWebアプリケーションフレームワーク
マイクロソフトの「Blazor」が正式版に、まずサーバサイドで。C#と.NET Core 3.0に対応したWebアプリケーションフレームワーク マイクロソフトのWebアプリケーションフレームワーク「Blazor」が、.NET Core 3.0のリリースと同時に、本番環境に投入可能な品質に到達したことが明らかになりました。 Blazorは、JavaScriptとReactやAngularなどのフレームワークの代わりに、C#と.NET Coreフレームワークなどを用いてWebアプリケーションの開発を可能にするフレームワークです。 Blazorは、WebAssembly上に.NETフレームワークやランタイムを実装することで、Webブラウザで.NET対応のWebアプリケーションを実現するフレームワークとして登場しました。 この実装は「Blazor WebAssembly」あるいは「Client-s
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ - Qiita
ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が
「マンガが快適に読める」を数値化し、SLOをマンガビューワに導入するまで - Hatena Developer Blog
マンガビューワにおけるサービスレベルとは なぜSLOを策定したかったのか サービスレベルを単純に決める 何をサービスレベル指標としてどう計測するか 一般的なSLIの表現 期間を移動しながら集計する アクセスログからサーバーのSLIを計測する PageSpeed Insights APIでフロントエンドを計測 プロダクトオーナーとともにSLOを決定する 決定したSLO どのように監視するか まとめ 株式会社はてなのマンガチームでSREをしているhappy_siroです。 私がチームで担当しているサービスは、いくつかのWebマンガサイトで採用されている「GigaViewer」というマンガビューワです。 GigaViewerチームでは、サービスのSLOを策定しました。 理由は、SLOに基づいて開発速度と信頼性のバランスをとるためです。 この記事では、私がチームメンバーと協力して「GigaView
【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークス エンジニアブログ
はじめに こんにちは！ 社会人2年目を頑張っております、エンジニアの@b0ntenmaruです。 今年2月までリファクタリング専門チームにてcrowdworks.jpの技術的負債を返却するために奮闘しておりましたが、そこから現在まではユーザーの皆様に安心安全なサービスを提供するためにクラウドワークス 安心安全宣言のための施策を行っています。 リファクタリング専門チームについては以下をご覧ください。 engineer.crowdworks.jp qiita.com 施策による機能開発を行う際に直面した課題 施策では主にフロントエンドの機能追加をすることになったのですが、技術的負債によりスピードを維持しながら開発を続けることは困難な状態でした。 crowdworks.jpを取り巻くフロントエンドの技術スタックはざっくり書くと下記3つに分類できます。それぞれで発生している問題を簡潔にまとめます。
AWS、自社製品のために開発したデザインシステム「Cloudscape」オープンソースで公開。UIコンポーネント、デザインパターンなど
AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.https://t.co/M8wKGqzH5E pic.twitter.com/9JOtkMF8Bi — A
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
GoogleがBigQueryを安価に提供できる理由は、Borgによる大規模分散コンテナ環境があるから いまから6年前の2014年、当時ようやくDockerコンテナが世の中に知られるようになってきた頃、Googleはすでに社内のすべてのソフトウェアをコンテナ化しており、毎週20億個ものコンテナをクラウド上で起動していると発表し、多くのエンジニアを驚かせました。 この大規模なコンテナの制御、すなわちオーケストレーションを行っていたのが同社内で「Borg」と呼ばれるソフトウェアです。 そしてKubernetesはこのBorgを基に、Googleがオープンソース化したコンテナオーケストレーションソフトウェアだとされています。 Borgの大規模分散コンテナ基盤でBigQueryが成立する このBorgによる大規模分散コンテナ基盤があるからこそ、BigQueryが安価に提供できるのだと、Google
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ（未圧縮）、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン
HTML Standardにpopover属性をはじめとしたPopover APIが正式にマージされました。Open UIによって提案されていた[1]APIで、名前がPopoverなのかPopupなのか紆余曲折の末、やっとHTML Standardとなります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
laravelのヤバい脆弱性をついたkinsing(kdevtmpfsi)というマルウェアに感染した話 CVE-2021-3129 - Qiita
laravelのヤバい脆弱性をついたkinsing(kdevtmpfsi)というマルウェアに感染した話 CVE-2021-3129PHPSecurityLaravelkinsingkdevtmpfsi webサーバー上でlaravelを動かしていれば、ちょっとした設定のミスで誰でもマルウェアに感染する可能性がある激ヤバセキュリティホール(CVE-2021-3129)が2021年1月20日に報告されています！ composerでインストールしたパッケージをバージョンアップせずに使っていませんか？ インターネット上に公開されているサーバー、特にステージングや開発環境でDEBUG=ONにしていませんか？ エラー画面がこんな風に見えますか？ この3つの条件を満たしていると、あなたのlaravelは、今すぐにでもマルウェアに感染する可能性があります。 laravelの脆弱性をついたkinsing(k
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
銀座Rails #35 (https://ginza-rails.connpass.com/event/216491/) AWS Lambdaのコンテナイメージサポートを利用してRailsのコードを動かす方法とそのユースケースについて。
docker-composeを便利にするツール「dip」を使ってみた｜TechRacho by BPS株式会社
更新履歴 2019/11/27: 初版公開 2020/05/01: サブコマンド実行部分に追記 2021/04/14: dip 7.0に合わせて更新 2021/07/16: docker-composeコマンドをdocker composeに置き換え dipとは dipは、Rails開発会社のEvil Martiansのメンバーが作った、docker-composeでの作業を能率的に行えるツールです。dipはDocker Interaction Processの略だそうです。 dipはRubyで書かれているのでRuby実行環境が必要です。元々Rails向けに作られたツールのようですが、Evil MartiansのReactアプリにもdip.xmlがあることからわかるように、Railsに限らず一般のdocker-composeでも使えます。私の場合はローカル開発環境でのみ使っています。 追記
使っていた端末の調子が悪くなって端末交換したので、開発環境構築のお時間です。 できるだけ簡単に旧端末の設定を引き継ぎつつセットアップしたかったので、いろいろと調べてまとめてみたら、1コマンドでできるようになりました。(準備は含めず) 旧端末を環境構築したときとだいぶ変わりました。 5分でできるMacBook Proに最低限の開発環境構築 – Qiita https://cloudpack.media/42029 手順 ターミナルを立ち上げて、 > sh -c "$(curl -fsSL https://gist.githubusercontent.com/<GitHub UserID>/<Gist ID>/raw)" おーかんたん。これで必要なアプリがだいたいインストールされます。 ※コマンド実行中、パスワードを求められることがあります。 何をしているのか？ セットアップに必要なコマンドを
www.youtube.com Meta(当時Facebook)のReact Core Teamの主要人物たちに直接インタビューしたドキュメンタリー動画 タイムライン 2012年まで 最初はFacebook社内でReactが普及するまでの道程。 当時世の中的にはクロスブラウザの解決策はjQueryに落ち着き、モバイルアプリ化の流れでAPIサーバーとViewは切り離される傾向にあり、JavaScriptのクライアントサイドで大きいアプリケーション作るためにMVCフレームワークとか取り入れないとね〜という雰囲気だった Facebook社はマーク・ザッカーバーグがHTML5に賭けていた頃*1にBolt.jsというFacebook版Backbone.jsを開発していた 広告プラットフォームのコードは当時Bolt.jsを中心に構成されていたが、Jordan Walkeが関数型プログラミングのアイデア
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
はじめに WebAssembly (略して Wasm) では WASI や WIT、 Component Model など様々な仕様があります。 それぞれが登場した背景、モチベーションなどを理解することでなんとなく概要を掴んでいくことができるのではないかと考えたため、過去・現在・未来と時間軸で整理してみました。 まず Wasm とその特徴に関して簡単に紹介した後、Wasm の過去として生まれた背景やモチベーションを紹介します。 そして現在の Wasm がなぜ注目を集めているのか、そして現在策定中の仕様と目指している未来について紹介します。 WebAssembly とはなにか WebAssembly はスタックベースの仮想マシン用バイナリ命令フォーマットの仕様です。Wasm と略されます。 Wasm ファイル(Wasm モジュール)は一般に .wasm という拡張子で表されるバイナリファイル
WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど
WebAssemblyをあらゆるプラットフォームでセキュアに実行できるようにする「Bytecode Alliance」発足。インテル、Mozilla、Red Hatなど WebAssemblyは、Webブラウザ上でネイティブコードのように高速に実行できるバイナリフォーマットして策定された標準仕様で、すでにChromeやFirefox、Edge、Safariなどの主要ブラウザでサポートが実現されています。 このWebAssemblyをWebブラウザだけでなく、デスクトップPCやサーバ、IoTデバイスなどあらゆる環境で、セキュアに実行することを目指した団体「Bytecode Alliance」が発足しました。 Bytecode Allianceの創立メンバーは、インテル、Mozilla、Red Hat、Fastlyの4社。 前述したように、WebAssemblyはもともと、Webブラウザで実行
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
Hotwireの感想 - laiso
Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 Hotwireというライブラリがあるわけではない 役割としてはMicro FrontendsとかReactのlearn once, write anywhereなどに似ている アプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想 アプリケーション開発者の生産性を上げることを目的にしていること サーバーサイド言語でフロントエンドを実装したいアレではなかった プログレッシブ(段階的に利用可能)であること 必要な技術だけを使い無駄なことをしないことで効率化する Hotwireが列挙する技術は1つづつ有効にできる クライアントサイドでViewを差分更新する現在の主流のシングルペー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)
国産Headless CMS 「Micro CMS」を試してみた - Qiita
「Firefox」が「IE 11」と誤認されてしまう悲劇発生……開発チームが対応に追われる／期間限定でUA文字列が「凍結」【やじうまの杜】
CSSでスクロールバーの有無によるがたつきをなくす: Days on the Moon
Google DomainsからCloudflare registrarにドメインとメールを移管した
N予備校 「プログラミング入門 Webアプリ」を修了した. - JUNのブログ
Webサイトのコーディングで困る前に知っておきたい3つのポイント
HTML で `<select>` 要素を `<hr>` でセパレートできるようになった
【PHP8.1】PHP8.1の新機能 - Qiita
Re: WebサーバーアーキテクチャとPHP実行方式の理解から始めるphp-fpmとはなにか？
知ってると得をするReactコンポーネントのイケてる書き方 - Qiita
Web版Excelを自動実行する「Officeスクリプト」がGA
AmazonのAPI設計方針 (The Bezos Mandate) - Qiita
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
本当のAWS基礎 昭和～平成～令和の時代の変遷システムの変化と今昔物語 - Qiita
音声入力でメモを書けるウェブアプリを書いた、x-callbackを使ったアプリケーション連携
GoogleがBigQueryを安価に提供できる理由は、Borgによる大規模分散コンテナ環境があるから
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
HTML 全体の CSS を取得して Shadow DOM に適用する
Ruby on Rails on Lambda
1コマンドでMacBook Proに最低限の開発環境構築 | iret.media
React.js: The Documentaryで振り返るReact普及の歴史 - laiso
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
WebAssembly の過去・現在・未来 - Qiita
import * as 構文とパフォーマンス最適化 - Qiita
【第5弾】少しのコードで実装可能な10のCSS小技集