An IDE built on top of a canvas, Haystack takes care of the tedious and confusing parts of coding for you

フロントエンドカンファレンス北海道2024 で発表させていただきました。 スライド中のリンク一覧

TL;DR 「最短でプロダクションで扱うため」のコンセプトはそのままに 入門 Docker がv2になりました 5年ぶりにのアップデートで、古くなった情報を消し最新の情報の追加をしてほぼ書き直しました。 現代でも残ってしまっているような古いプラクティスについても言及しているので、再読もオススメです。 概要 入門 Docker を5年ぶりにアップデートしました。 deprecatedな部分だけは綺麗にするかと思い、git cloneしたところ筆が乗りだいぶ様変わりしてv2になりました。 変更点 古くなってしまっている情報を修正したことがメインです。 特に以下3点です。 1. DockerfileのDSL 2. compose v2対応 3. Dockerfileのベストプラクティス 他にもいくつか。 現在でも使用されている非推奨な使い方への言及 古くなってしまっているが、現在でも使用されてい

はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ

SENDUNEは簡単にHTMLメールをデザインできるオープンソースのツールとのことなので、実際に使い勝手を確かめてみました。 Open source, drag and drop HTML email designer. | SENDUNE https://designer.sendune.com/ サイトにアクセスするとこんな感じ。あらかじめプリセットが用意されています。 「Your Logo」と書かれた部分をクリックすると左側でロゴの設定を編集できるようになりました。「Upload Image」をクリック。 標準でいくつかの画像が用意されていますが、今回は「Click To Upload JPEG or PNG or GIF」をクリックし、手持ちのGIGAZINEロゴ画像を選択して「開く」をクリックしました。 アップロードされた画像を確認し、「Select」をクリック。 ロゴの下の枠に

2024年度リクルート エンジニアコース新人研修の講義資料です

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ

現在のWindowsのフォントは、アウトラインフォント形式のOpenTypeをメインにしている。OpenTypeは、1997年にTrueTypeの拡張として発表された。TrueType形式のアウトラインデータに加え、CFF/Type2というPostScript用のアウトライン形式を含めることができる点がTrueTypeと異なる。 ここでは、OpenTypeフォントであるCascadia Codeを例に、フォントの概要やアプリケーションからのフォントfeature機能の利用について解説する。 そもそもCascadia Codeフォントとは？ Cascadia Codeフォントとは、Windows Terminalと同時に開発されたオープンソースのフォントである。Windows Terminalと同時にインストールされるが、単体でもインストール可能だ。このフォントを例に持ち出したのは、オープン

Docker社は、デバッグしたいときにDockerコンテナにシェルやデバッグツール群を組み込める「Docker Debug」の正式リリースを発表しました。 これはWindowsやMacなどのデスクトップ環境にDockerコンテナ環境を簡単に導入できるDocker Desktopの最新版として7月29日にリリースされた「Docker Desktop 4.33」に含まれています。 Dockerコンテナを使うとデバッグが難しくなる Docker Debugは、昨年（2023年）10月のDockerCon 23で発表された機能です。 参考：Dockerがコードネーム「Docker Debug」発表、コンテナ内に任意のデバッグツール群を一括導入、効率的なデバッグを実現。DockerCon 23 一般にDockerコンテナは、使用メモリの最小化とセキュリティを高めるなどの目的で、シェルやツールなどを徹

Dockerfileを解析、最適化やベストプラクティスをガイドしてくれる「Docker Buildチェック」機能が正式版に Docker社は、Dockerfileを解析して最適化とベストプラクティスをガイドしてくれるツール「Docker Buildチェック」機能の正式版をリリースしました。 Docker Buildチェックは、WindowsやMacなどのデスクトップ環境にDockerコンテナ環境を簡単に導入できるDocker Desktopの最新版として7月29日にリリースされた「Docker Desktop 4.33」の機能として提供されます。 Dockerfileとは、Dockerコンテナを構成するさまざまなファイルを取得し、ビルドを実行してDockerコンテナイメージを作成する際の手順書といえます。 そのため、Dockerfileはビルドが正常に実行されるようにバグがないように手順を

公開日:2023/10/08 更新日:2023/11/01 先日、GA4のアクセスデータを見ていたときに「平均エンゲージメント時間」が0秒になってしまう、という問題が見つかりました。 サイト全体でも0秒ですし、ページ単位で見ても0秒となっており、エンゲージメント時間の計測自体がうまくできていないように見えます。 原因（仮）：UAから自動作成されていて、かつUAのタグのまま計測しているプロパティで問題が起きている？ 本現象が発生しているサイト（プロパティ）を確認してみると、傾向として↑のような状況のサイトでエンゲージメント時間の計測ができていませんでした。 「自動作成」というのは、既存のユニバーサルアナリティクス用のプロパティから自動的に作成、連携されたGA4のプロパティのことを指します。 自動作成されたプロパティは、ユニバーサルアナリティクスのタグでそのまま計測ができていたので、GA4のタ

この記事はTLS/SSLを実装してみたいという人が増えるといいな！という気持ちで書いています。実装の詳細は別記事で書こうかと思います。 数年前からいつかTLS/SSLのプロトコルをPHPで実装したいと思い、まずは本で知識を得ようかとラムダノートの「プロフェッショナルSSL/TLS」や 「徹底解剖TLS1.3」を買って読んでみましたが、なかなか頭に入らずに読んでは寝てしまうというパターンに。 やはり自分でTLSを実装してみないとなと思ってたところに、PHPカンファレンス福岡2024で hanhan1978 さんの「PHPでデータベースを作ってみた」を見て大いに刺激をもらい、ついにTLS実装に着手できました。 speakerdeck.com この資料は本当によくて名言の宝庫です。たとえば、 「まじめに作ろうとすると大変な努力が必要になる。もっと迂闊につくりたい」 「不格好でもいいので、動く完成

「JPEG XL(JXL)」は、独自の圧縮アルゴリズムを使用して、画像やイラスト、スクリーンショットを圧縮することができる次世代のJPEG形式です。そんなJPEG XLは従来の圧縮率が高い画像ファイルフォーマットである「AV1 Image File Format(AVIF)」よりもファイルのサイズが約11％削減されるだけでなく、画質の面でも約13％AVIFよりも優れていることが報告されています。 Jon Arne S.: "So Safari will support jxl 🥳 .…" - Mastodon https://mastodon.online/@jonarnes/110514451857948151 2021年10月に規格化されたJPEG XLは、GoogleのPIKやCloudinaryのFUIFを基に開発されました。JPEG XL形式は、オリジナルデータに戻せる可逆圧縮

最近はお客さんとの勉強会でDockerのドキュメントをつまみ食いして読むというのをやっていますが、改めて最新版を読んでみて、いろいろ思考が整理されました。2020年の20.10のマルチステージビルドの導入で大きく変わったのですが、それ以前の資料もweb上には多数あり「マルチステージビルドがよくわからない」という人も見かけるので過去の情報のアンラーニングに使っていただけるように改めて整理していきます。 仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編で触れた内容もありますが改めてそちらに含む内容も含めて書き直しています。 本エントリーの執筆には@tk0miya氏から多大なフィードバックをいただきました。ありがとうございます。 基本的なメンタルモデル現代的な使い方を見ていくために「Dockerを使ってビルドする」というのはどのようなものか考えを整

前書き Raspberry Pi Zero WH (ラズパイゼロ) に SoftEther VPN クライアント (VPN クライアント) をインストール & 設定して VPN クライアントとして使えるかどうか試したくなった。 以下のようなユースケースを想定しています。 ラズパイゼロにカメラを取り付けて遠隔拠点に設置します。自宅などから、遠隔拠点の状況をラズパイが撮る画像を見て確認したい場合に、VPN でつなげれば確認できると思ったわけです。 ただ、わざわざ VPN でつながなくても遠隔拠点にあるラズパイカメラの画像を確認する方法はあります。たとえば以下の記事で書いたような方法です。 カメラ付き Raspberry Pi Zero WH で画像を Dropbox にアップロードする方法 しかしこの方法では、遠隔拠点にあるラズパイカメラの設定を変更したい場合にそれができません。このような場合

はじめに どもども、インフラ案件で奮闘中の井上弥風（いのうえみふう）です。 現在プロジェクトでELB（Elastic Load Balancing）を使用しており、その内部機能を完全に理解したいと思い、この記事を書きました。 この記事について この記事の最終的な目標は、「ELBとは何か？」を深く理解し、それを自信を持って説明できるレベルになることです。 しかし、ELBを完全に理解するためには、まず基本的なロードバランサーの概念を押さえる必要がありました。 そこで、この記事ではELBの根底にあるロードバランサーとは何かという点に焦点を当てていきます。 ELBの詳細については、この記事の後に公開予定の「ELBってなんやねん」という記事で詳しく取り上げます。 ELBに興味のある方は、ぜひそちらもご覧ください。 記事のゴール この記事を通じて、ロードバランサーがどのようにしてトラフィックの負荷分散

はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。

大吉祥寺PM 2024