CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012
CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ?」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自
openai-cookbookのサンプルコードを実行してみました。openai-cookbookはOpenAI の公式リポジトリの一つで OpenAI API で一般的なタスクを実行するためのガイド+サンプル コード集です! お疲れさまです。とーちです。 連日、ChatGPT 関連のニュースで盛り上がってますね。 私も OpenAI の API を使ってなにか作ってみたいと思っていたところ、社内からの情報で、 openai-cookbookという git リポジトリがあることを知ったので試してみました。 上記のリポジトリは OpenAI の公式リポジトリの一つで OpenAI API で一般的なタスクを実行するためのガイド+サンプル コード集となっています。 Guides & examples を読んでみる リポジトリのトップページのGuides & examplesから読み進めていくこと
WAF開発を手掛けるEGセキュアソリューションズ(東京都港区)は2月28日、Webアプリケーションの脆弱性について学べる実習用アプリケーション「BadTodo」を無償公開した。同アプリは多くの脆弱性を含んでおり、実際に攻撃したりソースコードを確認したりして実践的に学習できるとしている。 BadTodoは脆弱性診断実習用のアプリ。情報セキュリティの専門家であり同社CTOの徳丸浩さんが制作した。Webブラウザ上で動くToDoリストアプリとして動作するが、情報処理推進機構(IPA)の「IPA ウェブ健康診断仕様」や国際Webセキュリティ標準機構の「OWASP Top 10」で紹介されている脆弱性を網羅的に含む、脆弱性だらけのアプリになっている。 EGセキュアソリューションズによると、BadTodoには各種脆弱性を自然な形で組み込んでおり、脆弱性スキャンで見つかりにくい項目も含んでいるという。 徳
フロントエンド開発のためのセキュリティ入門 2月13日に『フロントエンド開発のためのセキュリティ入門』というタイトルの本を出版します。 www.shoeisha.co.jp 今回は本の内容の簡単な紹介をします。また、今回はじめて本を執筆させていただいたので、熱が冷めないうちに本を書くということについて書き残しておこうと思います。 本の内容について タイトルの通り、フロントエンドエンジニアに向けて書いたセキュリティの入門書です。 筆者はセキュリティの専門家ではありませんが、フロントエンドエンジニアとして働いています。 筆者はフロントエンドエンジニアとしてセキュリティを自ら学びましたが、セキュリティの学習の難しさを常に感じていました。 そういった同じく難しさを感じているフロントエンドエンジニアにとってセキュリティの学習の最初の一歩となる本を目指して書きました。 想定読者 メインターゲットとなる
Take a deep dive into Kubernetes inner components and discover what really powers a Kubernetes cluster. This in-depth guide shines a light on Kubernetes' murky internals, to help you better plan cloud native architectures and ensure the reliability of your systems. In Core Kubernetes you will learn about: Kubernetes base components Kubernetes networking Storage and the Container Storage Interface
ここから「React」や「Vanilla」「Vue 3」などを選択すると、すぐにVisual Studio Code互換環境がWebブラウザ上に立ち上がります。 ここではReactを選択しました。エディタにはReactのテンプレートのコードが表示され、右側のプレビュー画面には結果が表示されています。エディタでコードを書き換えて保存すると、変更内容は瞬時にプレビューに反映されます。 このようにCodeSandboxはローカル環境に依存せず、しかも面倒なフレームワークや実行環境、ビルド環境などのインストールもすることなく、オンライン上ですぐにWebアプリケーション開発に取りかかれます。 また、Webブラウザから利用するだけでなく、Visual Studio Codeから利用するための拡張機能と、iOS用のアプリケーションも提供されています。GitHubとの連係も可能です。 CodeSandbo
教育現場ではこれまでのイメージから、 間違った学習観が広まっています。 その弊害をなくすために、認知科学の視点から 「学び」の実態を科学的に明らかにした一冊『私たちはどう学んでいるのか―創発から見る認知の変化―』(ちくまプリマー新書)より、内容を一部公開します。学校とは違って正解のない日常では、そもそも問題を「作り出す」ことから私たちは始めなければなりません。 問題と正解に関わる素朴理論 教育、学習というと、多くの人の頭の中には連想的に学校でのそれが思い浮かぶ。ここにはとてもたくさんの構成要素からなる素朴理論があるように思う。その中で「問題と正解」について考えてみたい。多くの人は、 •問題は出される(既にある) •正解がある •正解を知っている人がいる(先生) というようなものを典型的な教育・学習場面だと考えるのではないだろうか。確かにそれらは学校では半ば当たり前のことになっている。先生が
Webアプリケーションの堅牢化に欠かせない知識を凝縮! セキュリティ学習のスタートに最適の一冊! 本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」というイメージの強い領域でした。しかし、アプリケーションの安全性を高めるためには、フロントエンドエンジニアにも、セキュリティの基礎知識や具体的な対策の実践が求められます。 本書では、Webセキュリティの必須知識である「HTTP」「オリジン」などの基礎トピックや、「XSS」「CSRF」といったフロントエンドを狙ったサイバー攻撃の仕組みを、サンプルアプリケーションを舞台にしたハンズオンで学びます。 もちろん、攻撃からユーザーを守る防御の手法もしっかりおさえます。個々の攻撃手法に応じた対策のほか、
2022年12月4日よりDocker版実習環境を提供します。オリジナルの実習環境はVirtualBox上の仮想マシンとして提供していますが、M1/M2 MacではVirtualBoxが動作しないことから、Docker版として提供するものです。 元々はM1/M2 Macを想定してARM64アーキテクチャ用に作りましたが、AMD64のWindowsやMacでも動作するように作っています。 Dockerコンテナの起動方法 ダウンロードページから実習用仮想マシン (Docker版)をダウンロードして適当なディレクトリに設置してください。 以下のコマンドによるコンテナーのビルド及び実行をします。 $ cd <wasbook-docker.zip を設置したディレクトリ> $ unzip wasbook-docker.zip # あるいは適当な方法でのzip解凍 $ cd wasbook-docker
はじめに この記事を読んでいるあなたはJWTについて知っているだろうか?JWTは、認証されたユーザを識別するために最も一般的に使用される。JWTは認証サーバから発行されて、クライアント・サーバで消費される。 今回の記事では、Webアプリケーションの認証方法として最も利用されているJWT認証を簡潔に解説する。 本記事の読者の対象 JWT認証について知らない人 JWTのメリット・デメリット、仕組みについて詳しく知りたい人 アプリケーションの認証方法について詳しく知りたい人 JWTとは JSON Web Token(JWT)とは、クライアント・サーバの間で情報を共有するために使われる規格の1つである。JWTには、共有が必要な情報を持つJSONオブジェクトが含まれている。さらに、各JWTはJSONのcontentsがクライアントあるいは悪意のあるパーティによって改ざんされないように、暗号(ハッシュ
ふと気になって調べたことの備忘メモです ✍ (2022/11/3追記)ご指摘頂いた内容を踏まえて加筆修正をおこないました なぜ調べたか Webアプリケーションの開発に携わっていると CSRF という脆弱性への対処を求められますが、多くの場合利用しているフレームワークが設定追加だけで対応してくれたり、既に前任者によって適切な処置がされていたりなど、実務上で目を向ける機会はその重要性と比較して少ないのでないかと思います また、Webブラウザの実装やHTTP周辺の関連仕様の変化から陳腐化している情報も多く、現代において全体感と具体的な対処法を理解するには少しばかりハードルが高いように感じていました ですので、自身の現時点での認識を明文化して残しておくことにしました なお、私はWebセキュリティの専門家でなく、一介の開発者のため、誤りが多分に含まれる可能性があります ご指摘を頂ければ修正したいと思
Amazon Web Services ブログ 「もう悩まない!機械学習モデルのデプロイパターンと戦略」を解説する動画を公開しました! 「ML Max。こんばんは。」 ということで今回はシックなナレーションから始まりました、機械学習の価値を最大化するための解説動画、ML Enablement Series (※)の、 Amazon SageMaker 推論 Part3(前編)もう悩まない!機械学習モデルのデプロイパターンと戦略【ML-Dark-05】【AWS Black Belt】 を公開しました。 ※ ML Enablement Series とは、機械学習プロダクトにかかわる全ての人向けの機械学習の知識をお届けする Light パートと、機械学習のマネージドサービスを活用して MLOps を推進したいエンジニア向けの Dark パート から構成されており、週1回を目安に Light と
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われ…
Except Singapore, we’ve got a world of sub-100 millisecond TTFBs. This is because instead of heading off to Virginia to get the site, each of these locations can use an edge server nearest to them. The edge is about getting 50ms response times vs 150ms response times. You can test this for yourself with a VPN. If you: curl -I https://deno.landYou’ll get the server nearest your location: server: de
Introducing Learn HTML Stay organized with collections Save and categorize content based on your preferences. Today we are launching Learn HTML—the next course in our series to help get you up to speed with modern web development. Today we are excited to announce the latest in our series of courses on web.dev. Learn HTML is a brand new course written by Estelle Weyl that will take you through all
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 最近リリースされたSafariとChromeで、CSSのSelectors Level 4(現時点でドラフト)仕様にある疑似クラス「:has()」が相次いで実装されました。 疑似クラス「:has()」は、カッコ内に要素を書くと、その要素を持つ親要素にのみ指定したスタイルを設定できる、という便利な機能を提供してくれます。 ところがこの「:has()」のChromeにおける実装は、jQueryで似たような機能(カッコ内の要素を持つ親要素を選択する)を提供する「:has()」に悪影響を及ぼし、このjQueryの「:has()」を使っているWebサイトでは、Chromeを利用した場合に一定の条件下でWebサイトが壊れるなどの問題を引き起こすことが分かりました(同じエ
はじめに 今回の記事では、私が実践しているWebアプリを開発するための技術選定のポイントを徹底解説する。一概には言えないが、同時に私が普段個人開発で扱っている技術を中心に紹介する。 今回の記事がプロダクトの技術選定で迷っているプログラマーに届けば幸いである。 技術選定の原則 技術選定する上で重要なポイントは、その技術を学ぶことで得られるメリットや効率化できる部分を徹底的に調べることである。この行為は単なる時間の無駄ではなく、プロジェクトの技術選定の際にもよく実施される。言い換えれば、メリットがない技術は今学ぶべきではないということだ。 調べる方法はQiitaやZennで「技術選定」と検索して、評価の高い記事(Qiitaの場合は「LGTM」が多い記事、Zennの場合は「♡」が多い記事)を中心に調べることを強くオススメする。まずは先人の知恵を徹底的に模倣することから始めよう。 時間は有限で、か
1.数ヶ月ぶりにビルドしたらエラーになる 開発中は問題がないのですが、数カ月ぶりにWebpackなりをつかってビルドしてみるとエラーがでる。 フロントエンド開発者なら一度は経験したことがあるのではないでしょうか? いろんな原因があると思いますが、以下のような条件で起こることが多いのではないでしょうか? ・複数のプロジェクトを開発する端末に直接配置している。 ・nodeenvなどのバージョン切り替えツールをいれずグローバルでnodeを使っている。 ・ライブラリをプロジェクト内で限定せずグローバルでつかっている。 要は、手元のMacやWindows、Ubuntuなど開発端末上に直接、複数のプロジェクトを配置して開発しつつ、nodeを共有したり、安易にバージョンアップとかしているとビルドができないなどのエラーが発生したりします。 2.nodeをつかったフロントエンドのビルドの脆さ (1)特定の団
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く