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
はじめに 基本的に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
内容 社内でAWS知らない人でもこれだけは覚えていてほしいという動画を作成して欲しいとリクエストあり。その内容を資料化したものです。小学生の子供に説明してみましたがになんとなくAWSが分かったと言っていたので今回は結構分かりやすくまとめられたと思います。 システムを構築する時 システムを構築する際、サーバやネットワークなどのインフラが必要になります。昭和の時代は物理サーバを買ってきてラックマウントしてネットワークに接続してと物理的な作業が多く発生していました。 その後、物理サーバの上に仮想的なサーバを作成できる仮想化技術の発展により、仮想サーバが主流となりました。最初に物理サーバを用意して、仮想化基盤を構築する必要があります。仮想化基盤構築後は、新しいシステムを作りたい場合はすぐに仮想サーバの準備を行うことができ、物理環境の時と比較すると大きな進展がありました。 仮想化基盤を自社で構築する
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パッケージをインポート可能に
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
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
【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
ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルな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となります。 現段階で実装されているブラウザは少ないですが、簡易サンプルを作ったので体験しながら読んでいただくといいかもしれません。
「マンガが快適に読める」を数値化し、SLOをマンガビューワに導入するまで - Hatena Developer Blog
マンガビューワにおけるサービスレベルとは なぜSLOを策定したかったのか サービスレベルを単純に決める 何をサービスレベル指標としてどう計測するか 一般的なSLIの表現 期間を移動しながら集計する アクセスログからサーバーのSLIを計測する PageSpeed Insights APIでフロントエンドを計測 プロダクトオーナーとともにSLOを決定する 決定したSLO どのように監視するか まとめ 株式会社はてなのマンガチームでSREをしているhappy_siroです。 私がチームで担当しているサービスは、いくつかのWebマンガサイトで採用されている「GigaViewer」というマンガビューワです。 GigaViewerチームでは、サービスのSLOを策定しました。 理由は、SLOに基づいて開発速度と信頼性のバランスをとるためです。 この記事では、私がチームメンバーと協力して「GigaView
GoogleがBigQueryを安価に提供できる理由は、Borgによる大規模分散コンテナ環境があるから いまから6年前の2014年、当時ようやくDockerコンテナが世の中に知られるようになってきた頃、Googleはすでに社内のすべてのソフトウェアをコンテナ化しており、毎週20億個ものコンテナをクラウド上で起動していると発表し、多くのエンジニアを驚かせました。 この大規模なコンテナの制御、すなわちオーケストレーションを行っていたのが同社内で「Borg」と呼ばれるソフトウェアです。 そしてKubernetesはこのBorgを基に、Googleがオープンソース化したコンテナオーケストレーションソフトウェアだとされています。 Borgの大規模分散コンテナ基盤でBigQueryが成立する このBorgによる大規模分散コンテナ基盤があるからこそ、BigQueryが安価に提供できるのだと、Google
以下のコードで 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のコードを動かす方法とそのユースケースについて。
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
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 という拡張子で表されるバイナリファイル
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
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ブラウザで実行
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を差分更新する現在の主流のシングルペー
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 ここ最近でMisskeyのユーザー数がさらに急激に増えています。そのため、運営者がより少ないコストでサーバーを維持できるよう、Misskeyのスケーラビリティ改善を急いでいます。 今回は、そういった最近のMisskeyのパフォーマンス改善の取り組みについて、検討中のものも含めて紹介したいと思います。 misskey.ioの登録ユーザー数の推移 Identicon生成の無効化オプション Identiconはユーザーが自身のアイコンを設定していないときに代わりに表示されるアイコンで、これはユーザーごとに異なるようになっています。 仕組みとしては、https://misskey.example.com/identicon/hogeにリクエストされた際に、hoge部分をシー
より良いものをより早く作るのに役立つ、あまり知られていないリポジトリ。 Photo by Juan Rumimpunu on Unsplash はじめに 私たちは、汎用ツールやリソースが数回タップするだけで手に入る時代に生きています。しかも幸いなことに、そのほとんどが無料です。 新しいツールやより簡単な方法が見つかり、面倒で複雑なタスクを実行できれば、誰にとっても、特に開発者には嬉しいことです。 でも、より良く賢い方法があり、予想外の方法で時間を節約できることを知らない場合もあります。 この2年間で見つけたGitHubの素晴らしいリソースは、私をかなり助けてくれました。これらのうちいくつかは、その必要性さえ知りませんでした。 そこで、あなたもおそらく必要になるGitHubリポジトリのリストを作りました。 1. 33 JS concepts ソース 私はプログラミングをJavaで始め、その後
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
のんびりしていたらこんなメンションをもらっていたので、ちょっとまとめてみようと思います。 そろそろ @tk0miya さんがアップしてくる頃。GFMはspecかっちりしてるんでしたっけ(markdown全く詳しくない — Aki Ariga (@chezou) February 1, 2020 かっちりしている? この記事を読んでいる皆さんは Markdown の歴史に精通していると思うので、古い部分はざっくり割愛してしまいますが、オリジナルの Markdown は かっちりしていない ことで有名なマークアップ言語です。 必要最低限のマークアップ要素は規定されていて HTML への変換ツールも完成していた Markdown ですが、マークアップ言語の言語仕様としては貧弱で、インデントのルールやインライン要素をネストしたときの挙動、空行の有無による解釈の違い、などなど、細かい部分のルールにつ
WEB+DB PRESS Vol.136 最終号！---日本のソフトウェア技術を支えてくれた雑誌の休刊 - Magnolia Tech
WEB+DB PRESS Vol.136 技術評論社Amazon 表紙に「最終号」と書かれているのが、ちょいと悲しい。 技術雑誌の存在ってなんだろうなと考えてみると、一つ一つの記事の深掘りは当然単行本に比べると浅い。でもすべての技術にたいして専用の技術書が出る訳でもない中、ブログ記事などに比べると、編集者の目を通っていることと、一回あたりのページ数が少ない分だけ入りやすいことで重宝する。それに「今、こういう技術が話題になっているんだな」って、ざっと理解できるのも良い。目の前で使わない技術でも、いつか使う日がやってくる時に、「そういえば、ちょっと前に特集されていたなー」と思い出せるだけでも知識のインデックスとして有効に機能してくれる。 そんな雑誌が無くなってしまうのは、けっこう寂しいし、何か大きな穴が空いてしまった感じがする。でもそれを実感するのは今日・明日ではなく、ずっと先のことだと思うけ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!ショッピングでシステム開発を担当している村上です。 Yahoo!ショッピングでは数億件にのぼる商品が日々更新されています。 今回はそれを支える巨大なDBの運用の中で遭遇したMySQLのアンチパターンと、回避した方法について紹介いたします。 特定のテーブルをJoinするとすごく遅くなる Yahoo!ショッピングでは商品を出品するためのツールがあります。 商品情報には「商品名」「価格」といった、任意で設定可能な項目のほか、「ブランド」「商品種別」など、製品ごとに入力する内容が決まっている項目を、マスター情報としてテーブルで管理しています。 このマスター情報を利用して、出品の際に入力情報が正確であるかどうか確か
ZennにみるCloudRunとBigQueryによるアプリケーション構築 / zenn-cloudrun-bigquery-serverless
Zennは、クラスメソッドが展開する技術者向けの知識共有プラットフォームです。Cloud Runを中心としたGoogle Cloudのソリューションをメインで使用しており、スケーラブルなWebアプリケーションとなっています。 このセッションでは、「サーバーレスとはなにか」という部分から改めてディス…
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【PHP8.1】PHP8.1の新機能 - Qiita
知ってると得をするReactコンポーネントのイケてる書き方 - Qiita
Web版Excelを自動実行する「Officeスクリプト」がGA
AmazonのAPI設計方針 (The Bezos Mandate) - Qiita
本当のAWS基礎 昭和～平成～令和の時代の変遷システムの変化と今昔物語 - Qiita
音声入力でメモを書けるウェブアプリを書いた、x-callbackを使ったアプリケーション連携
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
GoogleがBigQueryを安価に提供できる理由は、Borgによる大規模分散コンテナ環境があるから
HTML 全体の CSS を取得して Shadow DOM に適用する
Ruby on Rails on Lambda
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
1コマンドでMacBook Proに最低限の開発環境構築 | iret.media
React.js: The Documentaryで振り返るReact普及の歴史 - laiso
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
WebAssembly の過去・現在・未来 - Qiita
import * as 構文とパフォーマンス最適化 - Qiita
【第5弾】少しのコードで実装可能な10のCSS小技集
Misskeyのパフォーマンス改善の取り組み・2023年7月 | gihyo.jp
必要だと気付いてもいなかったフロントエンド用リポジトリ7選 - Qiita
iOS(16.4+)を含むブラウザでWeb Push機能を実装したメモ
GitHub Flavored Markdown は何であって何でないか - Qiita
MySQLの物理削除によるパフォーマンスの悪化とその回避策について
Cookie Store API による document.cookie の改善 | blog.jxck.io
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
europalove2.hatenadiary.com
www.iezo.net
www.lifehacker.jp
kumattaki.hatenablog.com
togetter.com
www.itmedia.co.jp