タグ

2020年4月16日のブックマーク (10件)

  • React + Firebase + MaterialUI --(webpack + CDN)--> 神 - Qiita

    仮にこれを全部使う場合はバンドル後の出力サイズが約１メガバイトを超えるのは避けられない。Firebase Hostingの無料枠内で運用したい場合、１回のアクセスで１メガバイトもの転送量を消費してしまうのは痛い。 そのため、ファイルサイズの大きい外部ライブラリはUNPKGなどのCDNから<script>タグを通じて利用したいことがある。しかし単純にこの手法を使おうとすると、古いバージョンのJavascriptでグローバルに定義された変数と格闘しながらコーディングすることになる。それはしんどいので、どうにかしてNPMやTypescriptなどの現代技術を活用できるようにしたい。そこで登場するのがwebpackである。 webpackを使った開発では基本的にすべてのライブラリはNPMを通じて管理するが、設定ファイルでexternalsを指定することでファイル出力時にライブラリをグローバル変数か

    React + Firebase + MaterialUI --(webpack + CDN)--> 神 - Qiita
    gt-r-blaze
    gt-r-blaze 2020/04/16
    “ここで注目していただきたいところはexternalsである。firebase以外は素直な感じであるがfirebaseは少し厄介である。firebase/*は読み込まれていれば十分で新たにグローバル変数を作るわけではないので空文字を返している。（
    リンク

  • Firebase+webpack+Vue.jsでチャットを作る方法 - 備忘録

    Ⅰ. はじめに Ⅱ. やり方 1. 必要なCLIツールをインストールする 2. Vueプロジェクトを作成する 3. firebaseをインストールする 4. Firebase でプロジェクトを作成する 5. Firebase の Realtime Database のルールを変更する 6. プログラムを書く 7. 実行する 実行結果 参考 Ⅰ. はじめに タイトルの通り「Firebase+webpack+Vue.jsでチャットを作る方法」です。 Ⅱ. やり方 1. 必要なCLIツールをインストールする npm install -g vue-cli 2. Vueプロジェクトを作成する vue init webpack FirebaseChat cd FirebaseChat npm run dev 3. firebaseをインストールする npm install firebase 4. Fi

  • Cannot find name 'global' · Issue #4196 · angular/angular-cli

  • 【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。

    どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法

    【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。

  • Sass(SASS記法)ってなんのSaっ！！ - Qiita

    <style lang="sass"> = basic-font($font-size: 1.0rem) color: rgb(0, 39, 99) font-size: $font-size font-family: 'Roboto Condensed script=all rev=1', 'Adobe Blank' .text-purple font-style: italic margin-bottom: 0.5rem font-weight: 900 line-height: 1.5 +base-font(2.5) .text-note +base-font(1.0) <style>

    Sass(SASS記法)ってなんのSaっ！！ - Qiita

  • 【リセットCSSとは？】７つのリセットCSSを比較検証！ - WEBCAMP MEDIA

    「リセットCSSが何か知りたい」、「リセットCSSはたくさんあるけど、どれを選べばよいわからない」という方にぜひ読んで頂きたい記事です。 この記事では、7つのリセットCSSを反映したHTMLファイルの実行結果を比較検証します。 （リセットCSSのコードはコピペで使えるので、ぜひ参考にしてください。） 記事の結論部分には、各リセットCSSの特徴とオススメ度をまとめた表も載せているので、結論だけ気になる方はそちらを参照してみて下さい。 また、DMM WEBCAMPではCSSを最短1か月で習得することができます。 「独学でつまづいている」「自分一人では学習が不安…」という方はまずは無料カウンセリングへ！ リセットCSSの基礎知識 まずはじめに、「リセットCSSとは何か？」を解説します。 リセットCSSとは？なぜ必要なのか？ リセットCSSとは、ブラウザがデフォルトで持っているCSSを打ち消すCS

    【リセットCSSとは？】７つのリセットCSSを比較検証！ - WEBCAMP MEDIA

  • [Pug] HTMLを効率よくコーディングする - Qiita

    Pugとは PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。 Pugのインストール Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。

    [Pug] HTMLを効率よくコーディングする - Qiita

  • for ... of 文でインデックス(index)の値を使う方法 - Qiita

    JavaScriptでforループを使いたい時はfor...of文を使うのがES6になってからは定番になってました。 そんな中で通常のfor文ではいつも一緒にいたインデックスを表示したい事案があったのですが、やり方が分からず調べたのでまとめました。 イメージ的には以下のようにforループの中でインデックス番号を利用したい場合です。 const students = [ { name: 'Taro', age: 26 }, { name: 'Jiro', age: 24 }, { name: 'Siro', age: 22 } ] for (let i = 0; i < students.length; i++) { console.log(`${i}: ${students[i].name}`) } // 0: Taro // 1: Jiro // 2: Siro

    for ... of 文でインデックス(index)の値を使う方法 - Qiita

  • [フロントエンド] jQueryのカスタムビルド機能を用いて、小さなサイズのjQueryを使おう！ - YoheiM .NET

    こんにちは、@yoheiMuneです。 Web業界で知らない人はいないんじゃないだろうかというjQuery。実はjQueryの機能を選んで自由にカスタマイズできるって知ってますか？ 今日はjQueryのカスタムビルドを用いて、サイズを減らす試みを紹介したいと思います。 Special Thanks to https://flic.kr/p/7fADmS 目次 この手順説明は、執筆時点で最新のjQuery2.1.1での説明となります。 jQueryは通常、jquery.com/downloadから取得することができます。 しかしjQueryの開発はGithub上で行われており、そちらを利用することでjQueryを自分でもビルドすることもできてしまいます。 そしてそのビルドではカスタムビルドがサポートされており、制作するサイトで必要になる機能のみでビルドすることが可能です。 不要な機能を省くこ

    [フロントエンド] jQueryのカスタムビルド機能を用いて、小さなサイズのjQueryを使おう！ - YoheiM .NET

  • jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた

    「jQuery 3.0 Final Released!」などで報じられているように、2016年6月9日にjQuery 3.0がリリースされました。 詳細は様々なブログ等でレポートされていますが、私はjQuery 3.0のスリムビルド版で使用できないメソッド等を調べてみました。 スリムビルド版の概要 まず、スリムビルド版のリリース記事内にはAll in all, it excludes ajax, effects, and currently deprecated code.とあり、AjaxとEffectsが除かれていることが分かります。jQuery 1.8からGruntを利用して必要なモジュールのみをまとめたカスタムビルド版の生成が行えるようになっているのですが、スリムビルド版もこれを利用して生成されているようなので、実際にコードを見てみると次のように除かれているモジュールが記されています

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.