2018 年の tree shaking - 株式会社カブク
Discussion 1. CommonJS は tree shaking されない ※追記、修正あり すべてのモジュールバンドラーが、 import { isEqual } from 'lodash'; を tree shaking できませんでした。これは、 CommonJS は静的に解析することができない困難または不可能（2018/06/15 修正）なためです。 例えば、 ES Modules の import, export に対応する CommonJS の require、 exports は、それぞれ以下のように動的に書くことが許容されています。 require const fooOrBar = require(Math.random() < 0.5 ? 'foo' : 'bar'); exports for(const name of ['foo', 'bar']) { ex
ブラウザの仕組み: 最新ウェブブラウザの内部構造
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
ウェブブラウザの off-the-main-thread API の話
ウェブブラウザにおいてメインスレッドはとても重要なリソースです。なるべくメインスレッドを使える状態にしておくことが滑らかな UI/UX を実現する上で重要になります。しかし、実際には多くの処理が実装上の理由やブラウザ仕様の不足によりメインスレッドでしか動かせないため、メインスレッドは忙しくなりがちです。特にページロード時は JavaScript の実行やリソース読み込みなどでとても忙しくなります。 とあるページの perf プロファイル。メインスレッドでせわしなく処理が行われている様子が分かる。 これを解消するために、ブラウザの処理をメインスレッド以外 (off-the-main-thread) でも実行できるようにする試みが行われています。 1. Off-the-main-thread とは メインスレッド以外のスレッドに処理を委譲することを off-the-main-thread と呼
CSS アニメーションと JavaScript アニメーションの比較 | Articles | web.dev
CSS アニメーションと JavaScript アニメーションの比較 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ上でアニメーションを作成する方法は主に 2 つあります。CSS を使用する方法と JavaScript を使用する方法です。どちらを選択するかは、プロジェクトの他の依存関係と、実現しようとしている効果の種類によって異なります。 まとめ UI 要素の状態の切り替えなど、単純な「ワンショット」遷移には CSS アニメーションを使用します。 バウンド、停止、一時停止、巻き戻し、スローダウンなどの高度なエフェクトが必要な場合は、JavaScript アニメーションを使用します。 JavaScript でアニメーション化する場合は、Web Animations API や使い慣れた最新のフレームワークを使用します。 ほとんどの基本的なアニメーシ
The 2018 Web Developer Roadmap
Want to learn to code? There is no better time to start than right now. Below is an illustrated roadmap focussed on how to become a developer in 2018. Don’t let these illustrations scare you. You by no means need to understand everything on this map to become a stellar developer. In fact, you don’t even need to take them that seriously if you don’t want to to. Instead, use these maps as a starting
Automagic Podcast
毎年年末に出演してくださっている、フリーランスの web サイトクリエイター 千貫りこさん（@henyorico）がゲスト。働き方は大きく変わらなかったものの、コロナ禍で講師の仕方が変わった千貫さん。Web デザインの敷居がどんどん高くなっている中、どう若手に手を差し伸べたら良いかお話しました。 よかった探し • A podcast on AnchorJimdoSTUDIOコロナ禍で変わったこと100人相手にリモートで教える難しさ教え方・接し方の変化ハンズオンの授業をどう変えたか今でも HTML の学習は重要構造化をすることで変わるデザインの捉え方見積もり / コストを考えるのは難しいあえて運用のことを話さないお客さんに何にお金をかけてもらうか一度にたくさんのことを伝えないまず『泳がす』 STUDIO でデザインエンジニアをされている菅原孝則さん（@oligin020 ）と、作るプロセスに
Balsamiq Mockups | Balsamiq
Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer. It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process. Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and disco
Webデベロッパのためのセキュリティ・チェックリスト | POSTD
安全で堅牢なWebアプリケーションをクラウドで開発するのは 非常に困難 です。それを簡単だと思っているような人は、例えばとんでもない頭脳をお持ちというなら別ですが、遠からず痛い目を見ることになるでしょう。 もし MVP（Minimal Viable Product：必要最低限の機能を備えた製品） のコンセプトを鵜呑みにして、有益かつ安全な製品を1ヶ月で作成できると考えているようなら、プロトタイプを立ち上げる前に一度考え直した方がいいと思います。以下に挙げたチェックリストをご覧いただければ、セキュリティに関するクリティカルな問題の多くをスキップしていることが分かるはずです。あるいは少なくとも、潜在的なユーザに対しては 誠実 であるように心がけ、製品が完全ではないこと、そしてセキュリティが不十分な製品を提供していることを伝えるようにしてください。 このチェックリストはシンプルなもので、決して完
CDN切り替え作業における、Web版メルカリの個人情報流出の原因につきまして - Mercari Engineering Blog
本日コーポレートサイトでお知らせした通り、Web版のメルカリにおいて一部のお客さまの個人情報が他者から閲覧できる状態になっていたことが判明しました。原因はすでに判明して修正が完了しております。また、個人情報を閲覧された可能性のあるお客さまには、メルカリ事務局より、メルカリ内の個別メッセージにてご連絡させていただきました。 お客さまの大切な個人情報をお預かりしているにも関わらず、このような事態に至り、深くお詫びを申し上げます。 本エントリでは技術的観点から詳細をお伝えさせていただきます。 2017年6月27日 CDNのキャッシュの動作について、CDNプロバイダと仕様について確認し検証を行いました。その結果一部記述に実際と異なる箇所があり、加筆修正いたしました。 概要 メルカリWeb版のコンテンツキャッシュをしているCDNのプロバイダ切り替えを行いました。 その際本来キャッシュされるべきでない
Web Audio APIを触り始めた人が最初にハマりそうなところ - O2 Project Blog
初めてWeb Audio APIを用いてサービスだったりアプリを開発する際に、ハマるであろう点を2つほど書きます。ちなみに以下の2点は実際に自分がハマったこととなります。 AudioContextはベンダープレフィックスが必要 Web Audio APIのCan I useを見ると分かるのですが、Safariがまだベンダープレフィックスを必要としています。 どんな場面でベンダープレフィックスが必要かというと、AudioContextのインスタンスを作る際に必要になります。そのため、以下のように一手間加えてあげる必要があります。 // Safariでは動かない var context = new window.AudioContext(); // Safariでも動く var AudioContext = window.AudioContext || window.webkitAudioCo
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
オフライン クックブック | Articles | web.dev
オフライン クックブック コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Service Worker により、オフラインでの解決をあきらめ、デベロッパーが自ら解決できるような移動手段を提供しました。これにより、キャッシュとリクエストの処理方法を制御できます。つまり、独自のパターンを作り出せるということです。考えられるパターンを個別に見ていきましょうが、実際には URL やコンテキストによっては、その多くは組み合わせて使用される可能性があります。 これらのパターンの実際のデモについては、Trained-to-thrill と、パフォーマンスへの影響を示すこちらの動画をご覧ください。 キャッシュ マシン - リソースを保存するタイミング Service Worker では、リクエストをキャッシュから独立して処理できるため、これについて別々に説明します。まず、
Debugging Service Workers
Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such as Android Wear, Google Compute Engine, ARCore, and Google APIs on iOS. Codelab tools on GitHubnorth_east p +��U 0�H��U ��9��U
小悪魔女子大生のサーバエンジニア日記 » Blog Archive » SANsとは？ワイルドカード証明書とは？
13.04.12 / こあくまのSSL日記, 未分類 / Author: aico 社会人になってからあっという間に２週間がすぎました。 覚えることがいっぱいでなんだか毎日があっという間に過ぎていきます。 先日、VeriSignさんと打ち合わせがありました。 VeriSignさんとは何度かお会いしていますが、今回は社会人になって初めての打ち合わせ。 知らない言葉もたくさん出てきたので自分なりに調べてみました。 今回はSANsとワイルドカード証明書についてです。 普通、サーバ証明書はコモンネーム１つにつき、サーバ証明書を１枚申請します。 ワイルドカード証明書とSANsは１枚のサーバ証明書で複数のコモンネームへのSSL通信を可能にする方法です。 ワイルドカード証明書はコモンネームを、「*.usausa.usa」のように アスタリスクをサブドメインに相当する階層に記載した形で申請します。 すると
本当は怖いパスワードの話 ハッシュとソルト、ストレッチングを正しく理解する － ＠IT
PSN侵入の件から始めよう 今年のセキュリティの話題の中でも特に注目されたものとして、4月20日に起こったPSN侵入事件があります。5月1日にソニーが記者会見をネット中継したことから、ゴールデンウィーク中にもかかわらず多くの方がネット中継を視聴し、感想をTwitterに流しました。もちろん、筆者もその1人です。 このときの様子は、「セキュリティクラスタまとめのまとめ」を連載している山本洋介山さんが、Togetterでまとめています。 Togetterのまとめを読むと、漏えいしたパスワードがどのように保護されていたかが非常に注目されていることが分かります。Togetterのタイムラインで、14:48ごろにいったん「パスワードは平文保存されていた」と発表されると、「そんな馬鹿な」という、呆れたり、驚いたりのつぶやきが非常に多数流れます。 しかし、15:03ごろに「パスワードは暗号化されてなかっ
HerokuのAPIデザイン
Herokuが自ら実践しているAPIデザインガイドをGithubに公開した． “HTTP API Design Guide” このガイドは些細なデザイン上の議論を避けて，ビジネスロジックに集中すること目的としている．Heroku特有なものではなく，一般にも十分適用できる知見となっている． 最近は，モバイル向けにAPIをつくることも多いため，勉強もかねて抄訳した．なお内容は，HTTP+JSONのAPIについて基本的な知識があることが前提となっている． 適切なステータスコードを返す それぞれのレスポンスは適切なHTTPステータスコード返すこと．例えば，“成功"を示すステータスコードは以下に従う． 200: GETやDELETE，PATCHリクエストが成功し，同時に処理が完了した場合 201: POSTリクエストが成功し，同時に処理が完了した場合 202: POSTやDELETE，PATCHリク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Push Companion
知っているようで知らないWebサーバアーキテクチャ
Alternatives to Windows, Mac, Linux and online applications | AlternativeTo.net
無効なURLです