GitHub - Metnew/uxss-db: 🔪Browser logic vulnerabilities :skull_and_crossbones:You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
続・JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita
やりたかったこと： Reactから子に関数参照を渡すのを綺麗に実装したい 前回からの変化 lit-extended を使えば、テンプレートにコールバックを渡せることを知った 子に対して関数参照を渡すのではなく、 CustomEvent を生成するようにして dispatchEvent するようにした 一旦変換用のイベント定義辞書を渡すようにした WebComponent定義 /* @flow */ import { html, render } from 'lit-html/lib/lit-extended' type Props = { onClick?: Function, text: string } const template = (props: Props) => { return html` <button on-click=${props.onClick}>${props.
JavaScript: Reduxが必要なとき/不要なとき（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
エディタの左上にリアルタイムに顔を表示する - hitode909の日記
エディタの左上にワイプでリアルタイプにカメラの入力が出てたらバラエティ番組みたいになって便利かと思ってやってみたけどただ意味不明な状態になるだけでとくに役には立たなかった，リモートペアプロするときにこちらの顔を送れるのは便利かもしれない． Atomのコンソールにこれを貼ればワイプ出せるはず． navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => { const video = document.createElement('video');video.draggable=true;document.body.appendChild(video); video.srcObject=stream; video.style='position: absolute; left: 7vmin
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果 仕事としてどんなプログラミング言語が扱えるかは、プログラマのスキルやキャリアにとって重要事項でしょう。 フリーランスエンジニアのマッチングサイト「CodementorX」は、GitHubやTwitter、Stack Overlowなどのコミュニティサイトにおける人気や、同社の求人データの傾向などを基に、人気が下降し求人も少ないプログラミング言語を、記事「Worst Programming Languages to Learn in 2018 | Codementor Blog」で発表しています。 一方、プログラミング学習サイトの「Coding Dojo」は、求人サイトIndeed.comの情報を基に、仕事の多いプログラミング言語を「Th
フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記
合わせて読んでください：Flashと特定ブラウザの組み合わせでcross originでカスタムヘッダ付与が出来てしまう問題が未だに直っていない話 (2014-02/07) XMLHttpRequestを使うことで、Cookieやリファラ、hidden内のトークンを使用せずにシンプルにCSRF対策が行える。POSTするJavaScriptは以下の通り。(2013/03/04:コード一部修正) function post(){ var s = "mail=" + encodeURIComponent( document.getElementById("mail").value ) + "&msg=" + encodeURIComponent( document.getElementById("msg").value ); var xhr = new XMLHttpRequest(); xhr
Metaballs
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs. From a mathematical perspective they are an iso-surface. They are rendered using equations such as f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2). Jamie Wong has a fantastic tutorial on rendering metaballs with canvas. We can replicate the metaball effect using CSS & SVG by applying both blur and contrast fi
Bundlephobia | Size of npm dependencies
What does Bundlephobia do? JavaScript bloat is more real today than it ever was. Sites continuously get bigger as more (often redundant) libraries are thrown to solve new problems. Until of-course, the big rewrite happens. Bundlephobia lets you understand the performance cost ofnpm install ing a new npm package before it becomes a part of your bundle. Analyze size, compositions and exports Credits
Firefox やめた - @kyanny's blog
blog.kyanny.me 使い物にならない、とは言わないが、おすすめしない。 遅い もっぱら毎日 GitHub や Google Drive にアクセスしているが、どこも Chrome に比べて体感で明らかにわかるほど表示も動作も遅い 速度がウリって、いったいどこのウェブサイトなら速いわけ？ 一番困ったのが Cmd+W に対する反応が遅くて（処理落ちしてる感じ）気持ち長く押してしまうのか、閉じたくないタブまで閉じる操作ミスが頻発した 開発者ツールが使いづらい 慣れの問題もあるけど、機能の少なさはこなれてなさは否めない minify された .js ファイルを prettify してブレークポイントを設定しても、そこで止まってくれない。デバッグが致命的にやりづらい 拡張がめっちゃ少ない Quantum で過去の拡張を捨て去ったので、拡張を探しても軒並み未対応 Trello の公式拡張が未
ECMAScriptの仕様/プロポーザルの調べ方を知る
このステージの詳細についてはThe TC39 Processを参照してください。 2ヶ月に1度行われるTC39のミーティングにおいて、プロポーザルごとにステージを進めるかどうかを議論します。 このミーティングの議事録もGitHub上のtc39/tc39-notesにて公開されています。 ステージ4となったプロポーザルはドラフト版であるtc39/ecma262へマージされます。 そして毎年の決まった時期にドラフト版を元にしてECMAScript 20XXとしてリリースします。 この仕様策定プロセスの変更は、ECMAScriptに含まれる機能の形にも影響しています。 たとえば、class構文の策定は最大限に最小のクラス（maximally minimal classes）と呼ばれる形で提案されています。 これによりES2015でclass構文が導入されましたが、クラスとして合意が取れる最低限の
Angular v6で導入されるTree-Shakable DIの紹介 - 余白
追記: 最新では scope が providedIn に変わってます。 github.com Angular v6では、これまでのDependency Injectionの仕組みをTree-Shaking可能にするためのオプション機能を追加します。 概要を説明するために簡単なスライドを作りました。 現状の問題 現在のDependency Injectionの仕組みでは、Injectionされるサービス（Injectable）はProviderの登録と、Injectorからの参照の2箇所で、静的に参照される必要があります。 たとえどこからもInjectionされないサービスでも、Providerを登録する時点でNgModuleからの参照が発生するため、ビルド時に不要なコードをふるい落とすTree-Shakingの対象にすることができませんでした。 新しいアプローチ Angular v6では
フロントエンドのバリデーションを hapi の joi で行うと手軽で便利 - Qiita
Webフロントエンドの入力とバリデーションは、煩雑なのに手を抜きづらいという、なかなか難しいテーマとして長らく存在し続けています。 最近のSPA開発では、ReactやVue向けに、専用のライブラリが提供されていることも少なくありません。しかしながら、それらは得てして特定のフレームワークに依存しており、かつ解決したい課題に対してオーべースペックであることが少なくありません。 そうして簡単なフォーム作成の時に使える丁度良いフレームワークはないか悩んでいたところ、サーバーサイドJS向けのバリデーションライブラリである hapijs/joi が非常にマッチしていること、そして、その joi が、ブラウザ向けに joi-browser として移植されていることを知り、実際に案件に投入したところ丁度良い塩梅で便利だったのでご紹介いたします。 Joi (オリジナルNode.js版) の特徴と使い方 Jo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodeSandbox: Instant Cloud Development Environments
私が WebComponents ｵﾈｰｻﾝ です
Visualization of npm dependencies
Yarn + CI + GitHub で挑む npm パッケージの定期更新
WebRTCハンズオン 本編 - Qiita
GitHub - fabiandev/ts-runtime: Runtime Type Checks for TypeScript
