LogRocket: Record and Replay for Redux apps.Session Replay for DevelopersDOM playback, console and network logs, errors, performance data AI Error TrackingGalileo AI separates signal from noise so you can proactively identify, triage, and resolve the most impactful user issues.
GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. It's also very simple to use and get started with. DOMPurify was started in February 2014 and, meanwhile, has reached version v3.1.6. DOMPurify is written in JavaScript and works in all modern browsers (Safari (10+), Opera (15+), Edge, Firefox and Chrome - as well as almost anything else using Blink, Gecko o
Learning from Lego: A Step Forward in Modular Web Design
With hundreds of frameworks and UI kits, we are now assembling all kinds of content blocks to make web pages. However, such modularity and versatility hasn’t been achieved on the web element level yet. Learning from Lego, we can push modular web design one step forward. Rethinking the status quo#section2 Modular atomic design has been around for a while. Conceptually, we all love it—web components
Sip Color for Mac
Sip is a modern color picker that brings ease to color organization & team collaboration. Try Sip for Free 🍃 No credit card required Menu Bar Edit your color palettes on the fly in our thoughtfully balanced menu bar app that offers essential functionality without being intrusive. Main Window For more advanced color and format management, use the full native app window that empowers all the organi
ここがすごいぞ！ stylelint！ - Qiita
ESLintのようなconfigでPostCSSプラグインとして動くstylelint。 唐揚げチャーハンのような「美味いものと美味いもの組み合わせたら絶対おいしいじゃん！」みたいなプロダクトが実際とても良かったので色々利点を記載。 導入についての手順などはすでに記事があったので、そちらへリンクしたい CSSのLintをstylelintにする ESLintっぽくて良い所 javascriptのLinterとしてスタンダードになってきたESLintに非常に良く似て作られているので、一度そちらを導入していればstylelintの導入はおそらくすんなり出来る。 また、ESLintの持っていた良い所をそのまま持ってきたような良さがある。 config周りがESLintにすごく近いので覚えることが少なめ 肝となるstylelintのconfigは、だいたいこんな感じで、ESLintにかなり近く作ら
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference
理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference 高津戸壮（株式会社ピクセルグリッド） この記事は、Frontrend Conferenceのセッション「Inline layout」でお話させていただいた内容を基に、連載記事（全4回）として書き起こしたものです。今回は第１回目です。 はじめに Frontrend Conferenceでは、皆さんが新しい技術について話していた中、私からはCSS2.1のお話をさせていただきました。私が解説したのは、CSSを書く上で欠かせない、以下の4つについてです。 font-size line-height vertical-align inline-block トレンドとはほど遠い内容ではありますが、多くの人にとって、なんとなく感覚
Why ContentEditable is Terrible
The first time I sat across a table from Jacob (@fat), he asked bluntly, “How do you write a text editor?” I drew a tree structure on the whiteboard, waved my hands, and said “This is a shitty editing surface.” Then I drew a column of boxes with arrows pointing to arrays, waved my hands some more, and said “This is a good editing surface.” Jacob raised an eyebrow. This post is what I would have sa
持続可能な開発を目指す ~ ドメイン・ユースケース駆動（クリーンアーキテクチャ） + 単方向に制限した処理 + FRP
この記事は、開発を持続可能にできるようなアーキテクチャとその適用方法を考察するものです。 骨子はできていますが、実装経験をフィードバックして詳細を若干変更するかもしれません。 勉強不足な点もあるので、意見を歓迎します。 開発においてよくある問題点 ビジネスロジックの本質が何だったか見失う。ソースコードのどこまでが業務上の関心で、どこからがそれを実現するための技術上の関心か分からなくなる。 入出力双方向の処理が散在して処理が追い切れなくなる。特にイベント処理でどこに飛ぶかわからないコールバック地獄になる。 初期化・つなぎ込み・統合者的オブジェクトが小さな機能単位で生まれて統一感が無くなる。 状態を持つ値が大量に散在して副作用を起こしバグを生む。 これらの問題の結果、小さな単位ごとに個人のノウハウで"良い"設計がされ、機能を追加しようとしたときにどういう方針で行えばよいか分からなくなる。 解決
Web・アプリデザイナーがチェックしておくべき企業ブログ10選
Webやアプリに携わるデザイナーにおすすめの企業ブログを厳選しました。各社が提供しているサービスの事例や、ノウハウ、最新トレンドなどあらゆる情報が公開されているので、ぜひチェックしてみてはいかかでしょうか。 dwango creators’ blog http://creator.dwango.co.jp/ 株式会社ドワンゴのデザイナーが運営している、2015年11月にできたばかりのブログです。ニコニコのサービスに関連した記事や、現場で活躍しているデザイナーが実践している便利なTipsが紹介されています。 1pixel http://ameblo.jp/ca-1pixel/ 株式会社サイバーエージェントが運営しているクリエイターズブログです。サイバーエージェントのゲームやWebサービスで使用されている技術や、話題の音楽配信アプリ「AWA」の開発秘話などが掲載されています。 DeNA Cre
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - thedaviddias/Front-End-Checklist: 🗂 The perfect Front-End Checklist for modern websites and meticulous developers
GitHub - typestyle/typestyle: Making CSS Typesafe 🌹
GitHub - nolanlawson/marky: High-resolution JavaScript timer based on performance.mark/measure (491 bytes min+gz)
GitHub - mizchi/promised-reducer: Fold promise queue and detect sync or async
Flexbox Patterns
Facebook Design Resources
css-refresher-notes/README.md at master · vasanthk/css-refresher-notes
GitHub - suitcss/components-test: Component CSS to help test the visual presentation of components
Browser Platform Status Tracker