ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロン
クライアントサイド(React)で日本語PDFを出力する。
前書き Reactの案件の中で日本語のPDFを出力する必要があり、 そのためにクライアントサイド(React側)のみで日本語PDFを出力する方法をまとめたので記事にしました。 前準備 今回は、pdfmakeというクライアントサイドでPDFを出力するJavaScriptライブラリを利用します。 npmパッケージでも存在するのでコマンドでインストールできるのですが 日本語フォントを利用するため、Githubからjsファイルを落とします。 bpampuch/pdfmake 上記のリポジトリから以下のファイルを落とします。 - pdfmake.min.js - vfs_fonts.js 日本語PDF出力の準備 pdfmakeは、そのまま利用すると日本語フォントが利用できません。 そのため、独自に日本語のフォントを利用できるようにする必要があります。 ダウンロードしてきた、vfs_fonts.jsに
【販売終了】初めてのシングルページアプリケーション Vue.jsとFirebaseで作るミニ Web サービス - @nabettu - BOOTH
※内容が古くなってしまったため、販売を終了します。 購入済の方への書籍内容のサポートは行いますので、別途ご連絡ください。 【累計800部を突破】 技術書典4新刊。 冊子版は当日完売、ダウンロード版と合わせて販売数800部を超えました！ありがとうございます。 本書は以下のような方をターゲットとして執筆しています。主に簡単なWebサイトを作った事があるWebフロントエンド初心者の方が、本書を通じてSPAの基本を掴み、簡単なWebサービスが作れるようになることを目的としております。そしてそれらを抑えた上でさらに次の段階へステップアップするための足がかりになるような要素を各所に入れております。 ・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人 ・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人 ・普段デザイナー
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
StackOverflowが「給与見積もりサービス」を公開。もしサンフランシスコのフロントエンド開発者だったら、ベルリンのデータサイエンティストだったら、給料はいくらか？
米StackOverflowは、エンジニア向けの給与見積もりサービス「Calculate your salary」を公開しました。職種、勤務地、学歴、経験年数、得意分野を入力すると、どのくらいの給料がもらえそうか教えてくれるサービスです。 例えば、フロントエンドエンジニアで勤務地はサンフランシスコ、学歴は大学卒（学士：Bachelors degree）、経験年数5年、得意分野をJavaScriptと入力すると、全体を100としたときに下位25番目の給与が9万ドル、下位50番目（つまり中央値）が10万8000ドル、下位75番目（つまり上位25番目）が12万9000ドルと表示されます。 勤務地の選択肢は米国、カナダ、英国、ドイツ、フランスとそのいくつかの都市で、東京も含めたアジア圏がないのがやや残念ですが、欧米でエンジニアがどのくらいの給与を得ているのかを知ることができるサービスになっています
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
プログラマーは残業をやめよう！ - JavaScript勉強会
「システム開発を行うIT企業が、残業をやめたら売上がアップした」というお話がありました。 nzmoyasystem.hatenablog.com プログラマーの皆さん、そして経営者の皆さん、もう残業はやめましょう！ 長時間労働に苦しむ経営者&社畜必読の一冊！ 残業をゼロにしたら、売上が増えた 残業をゼロにしたら、優秀な人材が集まってくる もはや残業をゼロにしない理由がない 成果 ＝ 時間 × 密度 スピードは最強の武器 バックキャスティング 重要性の高い仕事を先にやる プログラマーは残業よりも副業をすべき！？ 副業禁止の規定をクリアする方法 オープンソースに貢献 プロボノで社会貢献 やりがい搾取に注意！？ まとめ 長時間労働に苦しむ経営者&社畜必読の一冊！ 完全残業ゼロのIT企業になったら何が起きたか 作者: 米村歩,上原梓 出版社/メーカー: プチ・レトル 発売日: 2017/04/25
Getting Started with Headless Chrome | Blog | Chrome for Developers
TL;DR Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Why is that useful? A headless browser is a great tool for automated testing and server environments where you don't need a visi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
こんな可愛いログインフォームがあるらしいぞｗｗｗｗｗ(※GIFあり) : VIPワイドガイド
知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁
