フロントエンドエンジニアが知るべきキャッシュを理解する
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
2020年に立ち上げたWebフロントエンド構成の振り返り
こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての
Web framework rankings | HotFrameworks
Measuring web framework popularity so you can find interesting frameworks to check out
たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita
HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？ フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。 しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。 今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。 サンプルを使ってFPSを実際に測定してみる 今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const
ビジネス化の基本。決済APIまとめ | NTT Communications Developer Portal
ここ数年、決済APIが熱いです。APIで提供することで手数料もごく安く、かつすぐに自動化ができるようになります。Eコマースはもちろん、デジタルコンテンツや会員定額決済など様々な使い方が考えられるでしょう。 WebPay とにかくシンプルに決済できるサービスです。PHP/Ruby/Python/Java/Node.jsなど多数のプログラミング言語向けにライブラリが提供されています。スタータープランであれば月額固定費はなく、3.25%の手数料のみとなっています。 coincheck payment ビットコインに特化した決済サービスを提供しています。EC-CUBEなどに組み込んで使うこともできる決済モジュールも用意されています。執筆時点（2015年10月時点）ではβ中とのことです。 SPIKE（スパイク） 決済手数料がなんと0%というのが売りのサービスです（上限は月額100万円まで）。ライブラ
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
【販売終了】初めてのシングルページアプリケーション Vue.jsとFirebaseで作るミニ Web サービス - @nabettu - BOOTH
※内容が古くなってしまったため、販売を終了します。 購入済の方への書籍内容のサポートは行いますので、別途ご連絡ください。 【累計800部を突破】 技術書典4新刊。 冊子版は当日完売、ダウンロード版と合わせて販売数800部を超えました！ありがとうございます。 本書は以下のような方をターゲットとして執筆しています。主に簡単なWebサイトを作った事があるWebフロントエンド初心者の方が、本書を通じてSPAの基本を掴み、簡単なWebサービスが作れるようになることを目的としております。そしてそれらを抑えた上でさらに次の段階へステップアップするための足がかりになるような要素を各所に入れております。 ・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人 ・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人 ・普段デザイナー
Webアプリケーションフレームワーク導入時に考慮すべき22の観点 - Qiita
本記事では、 チームによる持続的に変更可能なWebアプリケーションの開発を目標に、フレームワーク導入時に考慮すべき22の観点を紹介する。 フレームワークによって特徴は異なるが、本番導入にあたって、考慮すべきポイントはあまり変わらないので、極力フレームワーク1に依存しすぎないよう配慮する。また、話をシンプルにするため、REST APIを提供するアプリケーションを題材とする。 前提 ソフトウェアのエントロピー ソフトウェアがエントロピー増大の法則を避けられないことを、体感している開発者は多いだろう2。普通にアプリケーション開発を続けると、開発スピードは鈍化し、品質は低下してバグが増え、開発者からは技術的負債への怨嗟の声が聞かれるようになる。エントロピー増大というフォースは極めて強力で、意思を持って立ち向かわなければ、容易にダークサイドに堕ちてしまう。 関心事の分離 大規模Webアプリケーション
検索サービスにデータ分析、機械学習にも～Webクローラーの基礎知識を『クローリングハック』で解説
ネット上のあらゆるデータを収集するWebクローラーは、様々な検索サービスだけでなくデータ分析や機械学習にも利用されています。クローラーを支える技術はWebエンジニアなら押さえておきたいものばかり。翔泳社では重要なポイントを学べる『クローリングハック』を9月14日に発売しました。 『クローリングハック あらゆるWebサイトをクロールするための実践テクニック』では、大規模なWebクローラーの開発・運用を手がける著者陣が、その豊富な経験をもとにクローリングの手法を解説します。 ネット上には日々大量のコンテンツ、データがアップロードされていますが、これらを自動で収集するのがWebクローラーです。著作権法を守るなどルールはあれど、クローラーを活用すれば検索サービスはもちろん、データ分析や機械学習も行えます。 また、クローラーを開発・運用するにはWeb技術の仕組みや基礎知識をきちんと知っておく必要があ
PythonでWebスクレイピングする時の知見をまとめておく - Stimulator
- はじめに - 最近はWebスクレイピングにお熱である。 趣味の機械学習のデータセット集めに利用したり、自身のカードの情報や各アカウントの支払い状況をスクレイピングしてスプレッドシートで管理したりしている。 最近この手の記事は多くあるものの「～してみた」から抜けた記事が見当たらないので、大規模に処理する場合も含めた大きめの記事として知見をまとめておく。 追記 2018/03/05： 大きな内容なのでここに追記します。 github.com phantomJSについての記載が記事内でありますが、phantomJSのメンテナが止めたニュースが記憶に新しいですが、上記issueにて正式にこれ以上バージョンアップされないとの通達。 記事内でも推奨していますがheadless Chrome等を使う方が良さそうです。 - アジェンダ - 主に以下のような話をします。 - はじめに - - アジェンダ
Getting started with Jekyll, a free and open source static site generator
Jekyll was featured on Opensource.com in February 2016 ("6 reasons to blog in Markdown with Jekyll"). I recently used it to create a website for QEMU, one of the open source projects that I work on at Red Hat. In this article, I will provide tips for first-time Jekyll users, guide readers through the creation of a new Jekyll website, and look at Jekyll's theming and customization features. The sim
業務でWebサービス開発をする際に気をつけたいこと（新卒向け） - Qiita
趣味でも業務でも日々Webサービスを開発しているzaruです。こんにちは。ついにアドベントカレンダーも最終日です。まだサンタとしての仕事が残っています。さて今回は仕事としてWebサービスを開発するときに気をつけたいポイントを紹介します。まぁ仕事に限った話じゃないですが…参考になれば幸いです。特に新卒プログラマあたりに読んでもらえればと思います😀 なお僕の業務上インフラ周りはAWSが多いです。 RASISという指標 RASISという指標があります。コンピュータシステムの評価指標5つの頭文字を取ったものです。 Reliability（信頼性） Availability（可用性） Serviceability（保守性） Integrity（保全性） Security（機密性） 今回はこの5つの指標に沿ってポイントを紹介していきます。RASIS自体については色々なところで解説されていると思うので
【定番】 新しいWebサービスを開発・運営するときに使いたいサービス 【2016年末版】 - Qiita
トレタ アドベントカレンダー3日目担当の増井です。 最近、新しいサービスリリースに少し関わることがあり、そこに向けてオススメした開発で役に立つサービスをここでもまとめてみることにしました。 私が、実際にトレタやキタヨンを作るときに使ったサービスを中心に上げています。特に使った方がいいサービスには [必須]を書いてみました。 他にもオススメのサービスがあったら、コメントで教えていただけると嬉しいです！ BrowserStack [必須] https://www.browserstack.com http://qiita.com/tags/BrowserStack 言うなら"Browser as a service"。色々なブラウザをリモートで操作してWebの動作確認をしたり、指定したURLのスクリーンショットを多種多様なブラウザで撮ってきてくれるサービス。 Chrome Extensionを
第27回 Webアーキテクトの仕事（後編）
Webアーキテクトの成果物と心得 選択した解決策は「アーキテクチャ説明書（記述書）」にまとめ，成果物として残します。 「視点」を意識した説明書に アーキテクチャ説明書はシステム全体の青写真と呼べるもので，家屋の設計で例えれば，基礎構造や柱・梁の設計図に相当すると考えてください。筆者は表1のような構成でアーキテクチャ説明書を作成しています。非機能要件一覧やシステム構成図のほか，アプリケーションのレイヤー図やシーケンス図，ログ出力などの共通設計，認証・権限管理などのセキュリティに関することも記述します。 “良い”アーキテクチャ説明書にするには，ステークホルダーの関心事に合わせた「視点（ビュー・ポイント）」を意識しましょう。そうすると，視点に合わせた項目や表現を盛り込むことになり，ステークホルダーに理解してもらいやすくなります。例えば表1の構成にはPMやSEにとっての関心事である，標準化やビルド
IPA ISEC セキュア・プログラミング講座：Webアプリケーション編 第1章 総論：より良いWebアプリケーション設計のヒント
ここで述べるのは、脆弱性が生まれにくいWebアプリケーションを構築するために設計段階、あるいはそれ以前の段階で考慮しておくとよい事項の例である。 (1) 開発環境の選択 1) プログラマが脆弱性をつくり易い環境を避ける 今日のWEBアプリケーション開発環境は、プログラミング言語の処理系に加えて、開発フレームワークやコンテンツ管理システム（CMS）、さらに外部のテンプレート言語までを加えた総合的な環境となってきている。 短時日で素早くサイトを立ち上げることを目的として、「軽量言語」と呼ばれる各種スクリプト言語が標準で備えているWEBアプリケーションを手軽に開発するための機能やライブラリをそのまま利用することは悪くない。しかし、その手軽さ故に、セキュリティの観点からは多くの脆弱性を生んできた経緯がある。 例えば、下記の事例が挙げられる。 PHPの4.1以前のバージョンの環境は、「registe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Evolution of Web protocols
こいつ動くぞ！商用利用無料、シンプルにデザインされたフォントもSVGも揃ったフリーのアイコン素材 -Box Icons
Kaleido Modeling » rcp-add-01:アーキテクチャ設計書