Nuxtのサードパーティ製Javascriptの読み込む方法を色々試してみた
サードパーティ製Javascriptを読み込ませる方法 Nuxtにサードパーティ製Javascript(以下外部ライブラリと称します）を読み込む方法は三つあります、headメソッドやnuxt.config.jsでの設定とpluginで読み込ませる方法です。 今回は開発中に外部ライブラリの導入にあたってheadメソッドとnuxt.config.jsで設定する方法を試していくつかの問題が起きてしまいまして、最後はpluginで読み込ませる方法を選ぶ経緯をまとめました。 方法１ headメソッド 特定なページに外部ライブラリを読み込ませるには一番手軽な方法です。 こんな感じで書けば外部ライブラリを読み込ませる事ができます。 // layoutsもしくはpagesのvueで head() { return { script: [ { src: 'https://example.com/exampl
Static vs Unit vs Integration vs E2E Testing for Frontend Apps
Static vs Unit vs Integration vs E2E Testing for Frontend AppsJune 3rd, 2021 — 13 min read In my interview "Testing Practices with J.B. Rainsberger" available on TestingJavaScript.com he gave me a metaphor I really like. He said: You can throw paint against the wall and eventually you might get most of the wall, but until you go up to the wall with a brush, you'll never get the corners. 🖌️ I love
jQuery依存を脱した「Bootstrap 5」正式リリース、IEもついにサポート対象外に。右からの横書き「RTL」など新機能
jQuery依存を脱した「Bootstrap 5」正式リリース、IEもついにサポート対象外に。右からの横書き「RTL」など新機能 複雑なHTMLやCSSを記述しなくとも、簡単にWebページをデザインできるフレームワーク「Bootstrap」の最新版、「Bootstrap 5」正式版がリリースされました。 One more time, we're gonna celebrate—Bootstrap 5 has officially arrived! New accordion and offcanvas components, no more jQuery, no more IE, RTL support, new utilities and utilities API, new examples, new docs, and so much more! https://t.co/yWnJv
Start TypeScript Leaving JavaScript as JS
https://jsconf.jp/2019/talk/ginpei-takanashi
Puppeteerで不要なCSSを消す - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
Dynamic Components in Vue.js
I'm writing this tutorial to bring some well-deserved attention to Dynamic Components in Vue.js. I extensively use them when building simple single page applications where including a full-blown routing solution can be unnecessary. Dynamic components in Vue allow you to specify a single mounting point where you can dynamically switch between components in your application. Throughout this tutorial
意外と知らないHTML5 API | 第1回 Drag & Drop APIとは
これらのイベントを使用してドラッグ＆ドロップを実装していきます。まずは最低限の機能を備えたサンプルを見てみます。 実装の最小構成 赤いボックスを下のエリアにドラッグ＆ドロップしてみてください。ドラッグしている要素がエリアに入ると、テキストがonDragOverとなり、ドロップされるとonDropになるのが確認できます。 ソースコード*は次のようになっています。 *注：JavaScriptのソースコード ソースコードの見通しをよくするためにjQueryを使用しています。 ... <div class="box" draggable="true"></div> <div id="dropzone" class="dropzone"></div> ... ... $('#box').on('dragstart', onDragStart); $('#dropzone').on('dragover
Setting a custom ghost image when using HTML5 drag and drop
In the HTML5 spec it's possible to make elements drag-and-drop-able. This is not new news: the excellent HTML5 Rocks and HTML5 Doctor articles cover it well. However. When you drag a thing, what gets dragged is a "ghost image" of it. See for yourself: drag the green box below, and what you see when you're dragging is a green copy of it. What if you want the "ghost image" to be something other than
自社サービス採用へ。本気で作るReact+Reduxのプロジェクト構成 - Qiita
サイバー・バズの@yuinchirnです。 弊社で最近リリースした「Cloud-F」というアパレルのクラウド展示会サービスは、フロントサイドはReact + Redux + Webpack、サーバサイドはScala + Akka HTTPで作られています。 今回は、フロント側のReact + Reduxを使ったプロジェクトの構成について紹介していきます。 React + Reduxプロジェクトを作る上で参考になればと思っております。 下記記事を読んで基本を押さえておくと読みやすいと思います。 React+Redux入門 全体のディレクトリ構成 今回はバイヤー向け管理画面、ブランド向け管理画面という二つの画面を作るため、 両方のプロジェクトで共通で利用する部分は/common バイヤー向け管理画面は/buyer ブランド向け管理画面は/brand という３つのReact ＋ Reduxプロジ
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
JavaScriptを読んでいると、「あれ、、、なにこれ？この書き方。。。」と思うことがたまにあります。この際の厄介なことは、どうやって調べたらいいかわからないことです。Google先生に聞こうにも、その書き方をなんと呼ぶかわからないので聞けない。 そんな「なにこれ？」を厳選してみました。覚えておくと、将来スッキリとする時が来るでしょう。 1. なみなみ、ふにゃふにゃ言ってる
SafariとFirefoxでブラウザバック（戻るボタン）を押した際、前のページの画面効果残っている件ついてを解説 | blog.ks-product.com
SafariやFirefoxを利用している人は以下のようにロールオーバー画像がそのままになってしまう症状に遭遇したことが少なから…2013年11月23日 SafariとFirefoxでブラウザバック（戻るボタン）を押した際、前のページの画面効果残っている件ついてを解説 Web制作テクニック firefoxsafariscriptバグブラウザロールオーバー制作メモ戻るボタン ツイート SafariやFirefoxを利用している人は以下のようにロールオーバー画像がそのままになってしまう症状に遭遇したことが少なからずあるかと思います。（他のサイトでも取り扱われている内容ですがあえて記事にします。） キャッシュが原因？少し違います。 多くのサイトではSafariやFirefoxではページがキャッシュされていることが原因と解説がされていますが少し違います。 ブラウザバック（戻るボタン）した時はIEや
HTMLコード内でアニメーションする超マニアックなJSライブラリ「Dom-Animator.js」
普通にWebサイトを閲覧する人は、HTMLコードを見る機会は少ないと思います。 しかし、今回ご紹介する「Dom-Animator.js」を使う場合、ブラウザのデベロッパーツールなどでHTMLコードを見ないと、何が起きたかまったく分からないという面白いライブラリです。 どんなことが出来るのか？まずは、「Dom-Animator.js」を使うとどんな事が出来るのかを見てみましょう！ 公式サイトへアクセスすると、ブラウザのデベロッパーツールを開くように明記されています。 （参考） Macは、「Command」+「Option」+「I」 Windowsは、「Control」+「Shift」+「I」 で、デベロッパーツールが開きます。 そこで、そのまま開いてみると、コード内にひときわ目立つ「アスキーアート」がアニメーションしているのが分かります！ 分かりやすいように、GIFにしてみました。 このよう
信州FM - サービス終了
信州FMは2021年3月31日をもってサービス終了とさせて頂きました。長きに渡りご愛顧頂き本当にありがとうございました。
AngularJSのDIの仕組み、minify対策は覚えておこう！ - Qiita
DI (Dependency Injection)ってのは日本語では依存性注入とも呼ばれ、大雑把に言うとAngularJSがコントローラなどに必要とされているコンポーネント(オブジェクト)をいい感じに渡してやる機能です。 ここでは特にAngularJSのDIがどのような仕組で動いてるか、そしてその独特なDIの実装にまつわるトラブルケースを説明します。 AngularJSのコントローラの書き方 まずはAngularJSの中心的な機能であるコントローラの書き方には、簡単版と面倒版の複数の書き方があることを抑えておきましょう。 パターン1（グローバル関数パターン） サンプルとかでよく見るのは↓こういうグローバル関数の形のコントローラです。
JavaScript開発ライブラリ - Wijmo（ウィジモ） | Developer Solutions〈開発支援ツール〉 - メシウス株式会社
帳票・レポート 日本仕様の帳票開発に必要な機能を搭載したコンポーネント ActiveReports for .NET ActiveReportsJS 表計算・グリッド Excel風のビューと表計算機能を実現するUIコンポーネント SPREAD for Windows Forms SPREAD for ASP.NET SPREAD for WPF SpreadJS 入力支援 快適な入力を実現する日本仕様入力コンポーネントセット InputManPlus for Windows Forms InputManPlus for ASP.NET InputManPlus for WPF InputManJS 多段明細 1レコード複数行&日付表示に 最適なグリッドコンポーネント MultiRowPlus for Windows Forms 戻る コンポーネントセット Visual Studioで利用す
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
Single-page Application(SPA)でeasymock or stubbyを使ってJSON簡単開発 - albatrosary's blog
Single-page Application(SPA)によりフロント開発にかかる手間が膨大になっています。SPAの開発をするときに通信部分（JSONやJSONPなど）をどうすればいいのかが問題になります。解答としてはスタブAPIサーバを作成し対応します。 画面開発するためにアプリケーションサーバを構築するのは時間の無駄ですのでgruntタスクにモックサーバを構築し簡単実装を行いましょう。 「本物の」APIサーバを使う場合は向きを変えることで簡単に結合テストできますし、CIを使うときはもちろんモックサーバでのテストになりますのでモックAPIサーバは活用するのが良いと考えます。 モックAPIサーバ gruntでモック用APIサーバを立ち上げるためのプラグインとして有名なものとして２つ存在します。 grunt-easymock grunt-stubby easymockはnode-easymo
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/nyarla/items/10f0f3e3c2116417df59