[B! javascript] pastelIncのブックマーク

pastelInc id:pastelInc

javascriptに関するpastelIncのブックマーク (93)

Etsy Engineering | The journey to fast production asset builds with Webpack
Etsy has switched from using a RequireJS-based JavaScript build system to using Webpack. This has been a crucial cornerstone in the process of modernizing Etsy’s JavaScript ecosystem. We’ve learned a lot from addressing our multiple use-cases during the migration, and this post is the first of two parts documenting our learnings. Here, we specifically cover the production use-case -- how we set up
pastelInc 2021/04/06
webpack

javascript
リンク
webpackでfirebaseのconfigファイルをプロジェクト毎に動的に生成する（環境切り替えに使える） - Qiita
firebaseをバックエンドにアプリ開発しててめんどくさいことの１つがconfigファイルをいちいち設定しないといけないということ。環境の切り替えとかも想定するとなんとか簡素化できないかな・・・と思っていたところ、どうやら下記のような形で動的に取得できるらしいことが判明。 .firebasercが設定されている状態で、下記コードを実行すると、 const firebaseTools = require('firebase-tools'); //関数定義 getConfig = async () => { const config = await firebaseTools.setup.web(); console.log(config); } //実行 getConfig(); { projectId: 'staging-xxx', appId: '1:755101150039:web
pastelInc 2021/01/10
javascript

firebase
リンク
webpackでFirebaseのプロジェクトを切り替える方法 – google-cloud-jp – Medium
Firebase Meetup#8 の懇親会のFirebaseケーキ今年のアドベントカレンダーを眺めているとFirebaseのカレンダーじゃなくてもFirebaseを使っている人がすごい増えたなという印象です。まさに今年はFirebaseが広く普及してきたなと感じました。特にWebサービスを気軽に立ち上げるときのデータベースにFirebaseを選択している人が多い印象があり、Webでも普及していますね。来年はWebだけではなくモバイルでもFlutterを通じてFirebaseに触れる人も増えてくるのではと思っていますし、実サービスに投入する企業も増えるのではないかなと考えています。ぜひ皆さんの知見をブログや勉強会でアウトプットしてほしいです。Firebaseのことについて喋りたかったらFirebase Japan User GroupでFirebase Meetupをしているので、ぜ
pastelInc 2021/01/10
firebase

webpack

javascript
リンク
firebase-toolsを8系にバージョンアップしたときにwebpackのビルドがコケた話 - Qiita
経緯個人開発でフロントエンドにVue.js、バックエンドにFirebaseを利用したアプリケーションを作っています。（気が向いたときに作業しているので中々進みませんが。。）最近ふと思い立ってnpmパッケージのバージョンを上げようと思ったところ、firebase-toolsのバージョンアップに苦しんだので供養しておきます。 ※バージョンアップ前は v7.3.2 でした。 ※firebase-toolsv8.0.0のリリースは2020年4月1日なので、投稿時点で約半年経過していることになります。。 firebase-tools の使いどころ firebase-toolsはコマンドラインツールとして、プロジェクトの設定やデプロイなどを実行できます。しかしコマンドラインから操作するだけではなく、webpackでFirebaseのプロジェクトを切り替える方法で紹介されているようにNode.js
pastelInc 2021/01/10
firebase

javascript
リンク
Easier configuration for Firebase on the web
Mature applications separate configuration from code. Doing so lets you easily switch between staging and production, deploy an open-source code sample, or spin up a new QA environment (see also “store config in the environment” from the 12 Factor App pattern). Historically, this has been difficult for Firebase projects on the web, because you needed to keep track of the configuration options for
pastelInc 2021/01/10
firebase

javascript
リンク
Firebase: Separating configuration from code in Admin SDK
Firebase Admin SDKs are used to access Firebase services from trusted server-side environments. However, before any Firebase services can be accessed, one must initialize the Admin SDK with a valid set of Google credentials. Google credentials come in several forms, and they authorize applications to access Firebase and various other Google Cloud Platform (GCP) services. Service account credential
pastelInc 2021/01/10
firebase

javascript
リンク
Is it safe to expose Firebase apiKey to the public?
The Firebase Web-App guide states I should put the given apiKey in my Html to initialize Firebase: // TODO: Replace with your project's customized code snippet <script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', storageBucket: '<you
pastelInc 2021/01/10
firebase

javascript
リンク
Keep webpack Fast: A Field Guide for Better Build Performance - Slack Engineering
The build tools of yore: a Loom with Jacquard machine attached webpack is a brilliant tool for bundling frontend assets. When things start to slow down, though, its batteries-included nature and the ocean of third-party tooling can make it difficult to optimize. Poor performance is the norm and not the exception. But it doesn’t have to be that way, and so — after many hours of research, trial, and
pastelInc 2021/01/10
webpack

performance

javascript
リンク
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス技術戦略部ブログ]
パフォーマンスJavaScript HTML フロントエンド cssdomcssom こんにちは、羽山です。今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。皆様はウェブのパフォーマンスを気にしていますか？おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
pastelInc 2021/01/10
javascript

css
リンク
css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~
css-loader と style-loaderを間違えない ~css-loaderを使わずにcssを使ってみる~2020-06-26 css-loader と style-loader どっちがどっちかってたまになるので、そうならないための備忘です。これらは webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。最近は CSS in JS の利用も増え、CSS ファイルを読み込む機会は減ってはきているものの、reset.css を読み込んだり、UI ライブラリが提供するグローバルな CSS を読み込んだりと CSS を直接 JS に import する機会はまだまだ多いと思います。そして 1 ファイルでも CSS を読み込むなら loader にその設定が必要となるので、まだまだお世話になり続けるでしょう。そんな利用
pastelInc 2021/01/10
webpack

javascript
リンク
npm scriptで環境変数を切り換える -Webpack4 -
pastelInc 2021/01/10
javascript
リンク
CodeceptJS
CodeceptJS is opensource MIT licensed testing framework. Works with your favorite frontend frameworks → Scenario Driven Write acceptance tests from user's perspective. Make tests readable and easy to follow. Driver Agnostic Run your tests via Playwright, WebDriver, Puppeteer, TestCafe, Protractor, Appium. The code is the same. Learn More
pastelInc 2020/08/27
testing

javascript
リンク
N文字|要素ごとに改行する正規表現 - Bye Bye Moore
冷静に振り返れば当たり前だったのですが、何故か解決に時間がかかったのでメモ。実際のところ単純にN文字毎に切り分ける世界で一番長い名前らしい「Captain Fantastic Faster Than Superman Spiderman Batman Wolverine Hulk And The Flash Combined」さんの名前を16文字ごとに切り分けてみます。 BBC NEWS | UK | England | Somerset | Teenager's new name is fantastic キャプテン・ファンタスティック・ファースター・ザン・スーパーマン・スパイダーマン・バットマン・ウルヴァリン・ハルク・アンド・ザ・フラッシュ・コンバインド - Wikipedia name = "Captain Fantastic Faster Than Superman Spid
pastelInc 2020/01/24
javascript
リンク
Why is my webpack build slow?
For many of us, webpack is the bottleneck between when we write our code and when we see its side-effects; This is the developer critical path that we feel every single save. The trope of “my webpack build is slow” is well worn into the ethos of modern web development; This does however not lay blame at the feet of any single tool, but rather is a measure of the systemic acceptance and use of webp
pastelInc 2019/11/20
webpack

javascript
リンク
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
pastelInc 2019/09/16
javascript
リンク
Bubbling and capturing
Let’s start with an example. This handler is assigned to <div>, but also runs if you click any nested tag like <em> or <code>: <div onclick="alert('The handler!')"> <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em> </div>
pastelInc 2019/08/09
javascript
リンク
https://github.com/GoogleChrome/lighthouse/blob/master/docs/puppeteer.md
pastelInc 2019/06/12
javascript
リンク
Question: How to test page behind authentication? · Issue #1418 · GoogleChrome/lighthouse
pastelInc 2019/06/12
javascript
リンク
AJAX/HTTP Library Comparison
1 **Chrome & Firefox** are listed separately because they support `fetch()`: [caniuse.com/fetch](http://caniuse.com/fetch) 2 **Native:** Meaning you can just use it - no need to include a library. 3 **Single Purpose:** Meaning this library or techno logy is ONLY used for AJAX / HTTP communication, nothing else. Great Chart, But Which Do I Choose? fetch() is the new standard. It's already supported
pastelInc 2019/06/04
javascript
リンク
JS Recursive object assign
pastelInc 2019/05/28
javascript
リンク
1 2 3 4 5 次のページ