mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
オリジナルのJavaScriptライブラリを公開しよう
オリジナルのJavaScriptライブラリを公開します！ ライブラリの作り方よりかは、実際に公開する手順やCI/CDについて解説します。 【技術】 ・ JavaScript ・ Node.js ・ npm/yarn ・ Mocha ・ Chai ・ Git/GitHub ・ GitHub Actions
あなたの window.open はなぜ開かないのか，Chrome で - マンガ〜ノ伊藤ノ〜ト
先日 window.open をしようとしたらポップアップブロッカーに阻まれて open することができなかった． Blocked まあ，これならよくあることなのだが，いかんせん自分の記憶では onClick のようなユーザーのアクション内で開かれた window.open は阻まれないことになってると思っていた．だからそのときも onClick のイベントハンドラ内で window.open したから大丈夫だろう，と思っていたら，見事にブロックされてしまったのでなぜだろう，となっていた． 検証 なので，検証するために 3 つのケースを用意してみた: 検証ページを用意したのであなたの環境でも試してみてね♥ 今回試すブラウザは Google Chrome を前提にしてます ケース1 const immediate = () => { window.open('https://www.goog
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
GitHub Issuesでブログを作る - Qiita
GitHubのIssueをNuxtとNetlifyでブログ化するというのをやってみたので解説します。 デモサイト： https://gh-blog.netlify.com/ Issues： https://github.com/miyaoka/gh-blog/issues Headless CMS はじめにHeadless CMSについて解説しておきます。旧来のAPI無しのWordPressのような一体型CMSではなく、コンテンツ管理部分を切り離してAPIでやりとりできるようにするのがHeadlessなCMSです。これによりフロントの実装やデプロイが疎結合になり、好きにできるようになります。 例としてCMSにContentful、デプロイにNetlifyを使う構成だとこんな感じになります。 参考） 次世代Headless CMS「contentful」事始め - Qiita Nuxt.js
Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog
LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event
コスパで学ぶ自動テストのはじめ方 - 若くない何かの悩み
Qiita 週間ランキング1位を獲得しました Kuniwak です。ご愛顧ありがとうございます。 qiita.com さて、本題に移りたいと思います。 つい最近ですが、勤め先の別チームに向けて自動テストの導入を支援するための資料を作成しておりました。こちらを共有したいと思います。 speakerdeck.com 資料中にある「仕様化テストを推奨しない」という決断には賛否両論あるかと思います。仕様化テストを推奨しなかった理由は、仕様化テストにかかるコストは相当に高く、本当に余裕があるときでないと選べない選択肢だったからです。今回自動テストを導入しようとしているチームは、見るからに余裕のない状況だったので仕様化テストからやれとは言えませんでした。 もし、「自分だったらこうする」等のアドバイスがあれば、ぜひ参考にしたいと思います。コメントなどに書いていただけると嬉しいです。
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
優秀なプログラマになるために - @ledsun blog
みんな良いこと言うので、刺激を受けて考えたことを記録します。 生きてるだけで丸儲け ストレス対処法 撤退戦術 タスク殺すマシーン 人間に戻る儀式 運 技術力を身につける方法 車輪を再発明する 脱ゴールデンハンマー病 学習の助 優秀なプログラマとは？ おまけ 生きてるだけで丸儲け 優秀なプログラマーになるためのコツ · GitHub 優秀なプログラマーに「育つ」んだし、それには時間が必要 優秀なプログラマーになるということは、上記の通り長時間を要するということも踏まえると、メンタルヘルスにリスクがある環境に長時間暴露されることが不可避である 業界で長きにわたり活躍し続けている人というのは、それだけですでにひとかどの人物 すごく良いです。 優秀なプログラマになる前に、死んでしまっては元も子もありません。 生き延びることはなにより大切です。 幸か不幸か現状のIT業界はハードなストレスにさらされや
今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい - Qiita
趣味で作ったwebサービスのリポジトリをgithubに公開して2ヶ月くらい フロントエンドのソースが雑だったので、リファクタリング中にした対応を紹介 前記事：Go + react + ansibleでサービスを作ってOSSにしてみた http://qiita.com/wheatandcat/items/66d72445ad0c5df2a8be github 記載している内容は、下記のリポジトリに取り込み済みの内容です。 うまく動かなかったら、こちらから動きを見てもらえたらと思います。 ■dotstamp_client https://github.com/wheatandcat/dotstamp_client flow javascriptでも型が使えるようになるライブラリ。 ファイル単位で実装していけるから、稼働中のプロジェクトでも柔軟に導入していけるのが魅力。 導入的にはファイルの頭に
JavaScript開発はこれ1つでOK！超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開！ - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
javascriptのライブラリを一覧にしてまとめてみた
自分用にまとめていたけどせっかくなので公開。 なるべくフロントエンドで完結してライセンスも使いやすいものを選択したつもり。 全部で100個超。 １番目のURLが本家 or GitHubのページ、2番目のURLが比較的わかりやすいと思った日本語の解説ページになっています。 Node.jsのライブラリもまとめたので合わせて見るといい感じ accounting.js金額のフォーマットを行う カンマ区切りや小数点n桁までなど https://josscrowcroft.github.io/accounting.js/ ace.jsテキストエディタ ハイライト・文字列畳み込み・ショートカットキー 組み込むのが簡単で機能もひと通り揃ってる https://ace.c9.io http://qiita.com/naga3/items/1bc268243f2e8a6514e5 AlertifyJSダイアロ
【GitHub】1年以内に作成された人気リポジトリ20個をまとめました | HRナビ by リクルート
コードレビューや情報収集など、エンジニアの開発シーンに欠かせないGitHub。 技術者の興味関心や開発トレンドが詰まったサービスなので注目が集まることも多々。今年に入ってからはFreeCoodCampの総スター数が、長年トップだったbootstrapを上回ったことが話題になっています。 今回は、2015年9月30日〜2016年9月30日に作成されたリポジトリのなかでスター数が多いリポジトリ上位20個を集めました。 本稿のスター数、フォーク数は2016年9月30日9時現在の数値、メイン言語にはリポジトリ内の上位2言語を表示しています。 スター数が多い上位20リポジトリ 第1位：swift 2015年12月にオープンソース化したSwiftがスター数トップに。2016年9月13日にはSwift3.0がリリースされている。
JavaScript 製ファミコンエミュレータを公開しました - まるまるこふこふ
公開しました(過去系) github.com Demo FaithJS Screenshot 作ろうと思ったきっかけ コンピュータの仕組みについて知りたいなら NES エミュ作るのが手っ取り早いと、 優秀な人が強い事を言ってて、僕もコンピュータの仕組みについて知りたかったので、 実装しようと思いました。 まず読んだ本 コンピュータシステムの理論と実装 ―モダンなコンピュータの作り方 CPUやメモリの仕組みを大まかに知ることができる 30日でできる! OS自作入門 OSの仕組みやアセンブラの基本がわかる 自作エミュレータで学ぶx86アーキテクチャ コンピュータが動く仕組みを徹底理解！ こちらもアセンブラに慣れるために読んだ たのしいバイナリの歩き方 バイナリに慣れるために読んだ コンピュータの仕組みについて何も知識がなかったので、上記の本を読んで勉強しました 参考にしたサイト NES on
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
夏のインターン講義「1営業日で書くJavaScriptコンパイラ」の設計と実装 - クックパッド開発者ブログ
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし（青木）はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
Electronでメディアファイル用のファイルブラウザ「BlackAlbum」を作った - joker1007’s diary
Electronで動作する動画ファイル及びJPG in Zip向けのファイルブラウザを作ってみました。 構成としてはElectron+React+Reduxで、gulpfile以外はbabelを使って書いてます。 そこそこ今風な感じを目指して、一部flowtypeとかも取り入れてますが、割と適当な感じで使ってます。 実は以前Node.jsで同じもの作ってたんだけど、せっかくちゃんとデスクトップアプリとして作れるようになったしReactにも慣れたのでElectronと今の技術で作り直してみたのがこれです。名前も同じだったりする。 https://github.com/joker1007/blackalbum https://github.com/joker1007/blackalbum/releases/download/v0.2.0/BlackAlbum-darwin-x64-0.2.0.
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mohayonao/web-audio-lesson
yoshiko-pg.github.io
