フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
Pakyow - デザインファーストなフレームワーク
Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。 そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。 Pakyowの使い方 例えばこんな感じでコンテンツを作ります。とてもシンプルな内容なのが分かります。 <article binding="message"> <p binding="content"> content goes here </p> </article> <p binding="message" version="empty"> nothing here yet </p> <form binding="message"> <input binding="content" type="text"/> <input type="
AWS CDKでWeb3層アーキテクチャを作成してみた | DevelopersIO
はじめに おはようございます､加藤です｡これまで､エンジニアとしてのキャリアは全てインフラエンジニアでしたが､今月からプログラマーとしてのロールを希望してゼロから再スタートしております｡ 今回､AWS CDK(以降､CDK)を使って典型的なWeb3層アーキテクチャを構築してみたので､こだわったポイントや使う過程で理解した事をご紹介します｡ リポジトリはこちらです｡ kmd2kmd/aws-cdk-ec2_web3tier ある程度CDKを理解されている方を前提として書いております｡下記のブログを読む､Workshopを試した経験がある程度の理解が必要です｡ AWS CDK が GA! さっそく TypeScript でサーバーレスアプリケーションを構築するぜ【 Cloud Development Kit 】 ｜ DevelopersIO TypeScript Workshop :: AWS
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
Webサイトマップをビジュアル化して見積もりを計算できる・「Octopus.do」
Octopus.doはWebサイトのサイトマップをビジュアル化して見積もりを計算、シェアできる見積もり計算アプリです。 ページごとに作成する項目を書き、工数を設定すると自動で計算してくれる、というもの。単位は時間となっており、通貨は円にも対応しています。なかなかユニークで便利なツールでした。 というわけで使用感です。 ざっくり使い方 概ね直感で使えると思います。作成予定のコンテンツや作業内容をページ毎に書き、かかる時間を設定します。（※右に0hとあるのは「Oh」ではなくて「0h(0時間)」です。） 各ページに工数を設定したら右上の$マークのボタンをクリックします。メニューが開くのでCurrencyをJapanese YENに設定し、税（TAX）を日本の消費税率の数値に設定します。これで自動計算してくれるようになります。また、別途かかる費用がある場合は項目を追加できるようになっています。 作
Editor.js - ブロック単位で編集するWYSIWYGエディタ MOONGIFT
WYSIWYGなエディタは長い歴史があります。CKEditorのような重厚なものが好まれた時期もあれば、現在はWebページ上でインラインで編集できるものが好まれる傾向にあります。様々なソフトウェアがありますが、今なお決定的なものがありません。 今回紹介するEditor.jsはブロックベースという特徴を持ったWYSIWYGエディタです。 Editor.jsの使い方 Webページです。見た目は普通のHTMLになっています。 マウスを当てると編集ができます。右端では並び替えが可能です。 文字を選択すると装飾が選べます。 文字の追加も可能です。 ブロックを足す際には画像や引用、ヘッダーなどを選べます。 画像の挿入例。 枠で囲んだ画像も使えます。 Editor.jsはJSONで出力されるので、再利用もしやすいのが特徴です。HTMLを記述することもできますが、基本的にMarkdown相当な記法指定にな
知識やコーディング不要で誰でも手軽にWebスクレイピングできるChrome拡張・「Spider」
Spiderは知識やコーディング、学習なども不要で、誰でも手軽にWebスクレイピングできるChrome拡張です。任意のWebサイトでエクステンションを起動し、データとして抽出したい箇所を選択してAdd Sectionを押すだけと、非常に手軽にデータを取り出すことができます。取り出したデータはJSONやCSVでダウンロードできます。こういった仕様なので永続的な抽出は不可となりますが、手軽で学習も不要且つ、ユーザー登録等も不要で無料で利用できるのはとても良いですね。 ParseHubやOctoparseといったツールもありますが、ブラウザの拡張という手軽さがSpiderの魅力という印象でした。昨今、データマイニングは必要不可欠な作業となっていますのである程度限定的な用途であってもそれなりに重宝する気がします。 Spider
Coder - Web上で動作するVisual Studio Code
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました クラウドIDEはすでに誕生して10年近くになります。すでに幾つかの実用的なソフトウェアも出てきていますが、それでもまだまだローカルでの開発が主流です。特にスクリプト言語ではそうでしょう。 しかし、その世界が大きく変わるかも知れません。なぜならスクリプト用のプログラミングエディタとして有名なVisual Studio CodeがCoderによってWeb化したからです。 Coderの使い方 これが最初の表示です。まさにVisual Studio Code（以下VS Code）の画面です。 シンタックスハイライトもちゃんと使えます。 コマンドも出ます。 ターミナルだって使えます。 Coderはリモートサーバ上にインストールして、Webブラウザ経由でVS Codeを使えます。コードはサーバ
Webアプリケーションにおける正しいキャッシュ戦略 - Sansan Tech Blog
こんにちは。プロダクト開発部のサーバサイドエンジニアの荒川です。普段はSansanのスマホアプリのAPIの開発をしています。 今回扱うテーマは皆さん大好きキャッシュ（Cache） です。 Webアプリケーションを開発するエンジニアである以上、キャッシュの存在からは逃れられないでしょう。 例えばパフォーマンスを向上させる手段として、キャッシュを仕込むことは往々にしてあるかと思います。 キャッシュを使えばパフォーマンスが向上しそう、というイメージも強いため安易に選択する戦略になりがちですが、正しく扱うことは本質的に難しいです。 しかしキャッシュを上手に使えば、ユーザ体験を圧倒的に向上させることができます。 そんな諸刃の剣キャッシュ💰について考慮するべきこと、その戦略を改めてまとめてみました。 今回の対象 今回の対象は、アプリケーションレベルでのキャッシュ戦略を取り扱います。 いわゆるキャッシ
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
POSTがGETで再送、、、だと、、: Thief's Guild Blog
なんだかね、そんなのありえないって思うでしょ。 redirectするとPOSTがGETになってしまう、ってのは昔からよく聞く話だけど、 そうじゃないんだよね。(´・ω・｀) IEで回線不安定なとき（WiFiとか）、POST完了前にonline→offline→onlineって ステータスが変化すると、ononLine event がwindowまで伝わって画面のリフレッシュが入り GETでアクセスする？みたいな動きをする。（refererも無しになるから、bookmarkから来たように見える） めちゃくちゃ探したけど、どこにも仕様と書いてないし、新しいめのIEでしか起きない。 WEBの世界は進歩著しいからサボるとすぐに原始人だよ。 https://technet.microsoft.com/es-es/cc304127(v=vs.71) https://developer.mozilla.
WEB上で複雑なレイアウトのページを自由にWYSIWYGで編集できる「grapesjs」:phpspot開発日誌
GitHub - artf/grapesjs: Free and Open source Web Builder Framework. Next generation tool for building templates without coding GrapesJS Demo WEB上で複雑なレイアウトのページを自由にWYSIWYGで編集できる「grapesjs」 ブロックやカラムをドラッグ＆ドロップで自由に配置し、テキストをその場で編集できる高機能なエディタをオープンソースで自分のアプリに組み込めます。 関連エントリ Markdownが書けるWYSIWYGエディタ「TOAST UI Editor」
次世代Webカンファレンス 2019 振り返り
nwc.md 次世代Webカンファレンス 2019 振り返り この文章に関しても所属組織とは関係のない個人の見解です 所感など 本当に全く打ち合わせをしていないので、話題が分散しがちだったかもしれない。 せっかくの所属組織とは無関係のレギュレーションなので、具体名を上げてガンガン治安の悪いことを言うつもりだったのだけど、直前に「具体的な企業名は避けましょう」と言われて若干遠慮した。 マズいことをガンガンしゃべる覚悟で来たので、防刃ベストを着ているが、特に出番は無かった。トイレにも行った。 本当は話す予定だったトピックについて、いくつかは、別途private gistに書く。 話した話題の参考情報 CDN設定の話、request collapsing という名前の機能 https://tech.mercari.com/entry/2017/06/22/204500 http://www.it
次世代Webカンファレンス 2019：HTTPSセッションが面白かった - ろば電子が詰まつてゐる
以前から気になっていた「次世代 Web カンファレンス 2019」を、ようやく聴きに行くことができました。 たくさんのトークがありましたが、ここではHTTPS (hashtag: #nwc_https)をメモしておきます。なお、このセッションが間違いなく一番アツく、一番面白かったです! 当日の動画 https://www.youtube.com/watch?v=_8dCa8wj8QY togetter https://togetter.com/li/1268794 以下、当日参加した、もしくは動画を見たという前提でのメモなので、見てない人はぜひ見ましょう。 PKI 「低レイヤから行きましょう」ということで、はじめはPKI絡み。Symantecのdistrustと、日本のGPKIの話でした。 トーク中に何度か出てきましたが、認証局(厳密にはCAとRAを分けて書くべきですが、どうせみんな一緒な
rrweb.io - Webサイトの操作を記録&再生 MOONGIFT
Webサイトでユーザがどんな操作を行ったのかを解析することによって次の改善策が生まれることがあります。また、ゲームプレイのように後で見返したり、リプレイしてみたいケースもあります。録画しておくことで後で振り返れるようになります。 任意のWebサイトにおいてセッションを記録できるライブラリがrrweb.ioになります。 rrweb.ioの使い方 Webフォームの入力はもちろん、ウィンドウのリサイズも記録されます。 そして保存したセッションを再生できます。1〜8倍で再生可能です。 Ajaxを使うような、後からコンテンツが追加される場合も再生できます。 こちらはゲームの例です。 一倍でも高速に再生されます。 rrweb.ioを使って操作内容を記録し、後はその内容をサーバ上に保存することで、いつでも再生が可能になります。プライバシーの問題もあるので、ユーザの了承は必要ですが、ゲーム動画のようにユー
Kaitai Web IDE - Kaitaiファイルを解析するバイナリエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました テキスト以外のファイルを扱おうと思うと必要になるのがバイナリエディタです。HEXのデータを確認したり、並び方を分析することで正しく情報を扱えるようになります。GUIでは各OSごとに様々なエディタが存在します。 Kaitai Web IDEはWebブラウザベースのバイナリエディタです。特に .ksy という拡張子のKaitaiファイルの構造分析に特化しています。 Kaitai Web IDEの使い方 メイン画面です。ファイルブラウザや構造解析、HEXエディタなどが使えます。 バイナリ部分を選択すれば、どの構造にあたるのかなどがハイライト表示されます。 さらにそのファイルを扱うためのプログラミングコードが生成できます。 例えばPHPを選択した例です。 Kaitaiというのはプログラミン
HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
Webアプリケーションフレームワークの作り方 in Python — c-bata.link
こんにちは、芝田 将 ( @c_bata_ ) です。 この資料はPyCon JP 2016で行った 「基礎から学ぶWebアプリケーションフレームワークの作り方」 の書き起こし資料です。 誤字等があれば、Issue or PRをお待ちしております。 はじめに¶ この資料では200行に満たないシンプルなWebフレームワークの作り方をボトムアップで解説します。 テンプレートエンジンとしてJinja2を使ったりもしますが、基本的にはPythonの標準ライブラリのみを使っています。 FlaskやDjango等を使ったWeb開発の経験があり、基本的なHTTPの知識があれば読み進められるんじゃないかなと思うのでぜひチャレンジしてみてください。 本資料を読み終えた方はBottleやDjango、筆者の公開している Kobin というフレームワークのコードを 読んでみたり、自分でWSGIフレームワークを実
Cookieにかわる Sec-HTTP-State ヘッダの提案 - ASnoKaze blog
20190424 追記 IETFに提案仕様が提出されました https://tools.ietf.org/html/draft-west-http-state-tokens-00 Cookieの様々な問題を解決するために、Webセキュリティー界隈で活躍されるMike West氏から「Tightening HTTP State Management」というCookieに変わるHTTPにおいてステートを扱う仕組みが提案されています。 現在はIETFのHTTPbis WGのMLに投稿されただけで仕様が正式にinternet-draftとして提出されたものではありません。まだまだどうなるかは全然わからない状態です。 この提案では、現在のCookieはセキュリティと非効率性とプライバシーの問題があると言っています。 現在のcookieは、Same-Origin-Policyとは異なりオリジンを超えて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a Tailored Web-Based Excel Report Generator - DZone