軽い気持ちでLinkedListを使ったら休出する羽目になった話 - Qiita
ざっくり言うと リスト構造のデータに対してランダムアクセスはしちゃだめだぞ。お兄さんとの約束だ！ 発端 数年前に他部署の支援で作ったJavaのシステムに、ちょっとデカめのデータを突っ込んだらありえないほど遅いので助けてくれ、と連絡が入った。 まぁクエリとかインデックスをちょっと見れば直るっしょ・・・と鼻をほじりながら支援に向かった。 処理内容 遅い部分の処理は以下のようなものであった。 処理対象のデータをListで受け取る。 それをforループで1件ずつ前処理する。 処理結果をオブジェクトに格納し、ORマッパーでDBにINSERTする。 これだけ？ そう、これだけだ。並列処理なんて高級なことはもちろんやってない。 インフラ調査 処理中のサーバのようすを調査する。今回のインフラは典型的な3層3サーバ構成。 WEBサーバはなにもかもが余裕。 APサーバではCPUを1つ使い切っている。 14コア
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
CTOのやるべきことは何なのか？（翻訳と考察） - Qiita
【背景】 この記事はQuoraの「What does a CTO do?」という質問に対するAmr-Awadallah氏のよくまとまった回答の翻訳です（本人から許可取得済）。 私はMAMORIO株式会社でCTOをしているのですが、最近自分の仕事が何なのかよく分からなくなってきたことがこの記事を書こうと思ったきっかけです。 私はこの記事でいう所の「雑草CTO」であり、たまたま会社の初期に私以外に適任者がいなかったので成り行きで就任し現在に至ります。 そして、人数もプレッシャーも少ない総初期は来た玉は打つの姿勢でコーディングから渉外まで何でもこなしていましたが、メンバーが増え、それよりも早いペースでユーザーと仕事が増えてくると、自分の職務を定義しやることとやらないことをはっきり分ける必要が出てきます。 この翻訳が同じような状況にあるCTOの助けになればと思いますし、誤訳等があったら指摘してくだ
ISUCON7予選のNode.js参考実装を担当させていただきました - Qiita
ISUCON7のNode.js版の参考実装の作成を担当させていただきました。 参加者のときとは全然別視点で、得られたことが沢山ありました。 Twitterでもつらつらと書いてたのですが、まとめた振り返りを書きたいと思います。 なお参考実装のリポジトリはこちらからご確認いただけます。 — ISUCON7 予選問題の公開と解説 : ISUCON公式Blog 自分のISUCON歴 ISUCON5, 6と二回参加し、どちらも予選敗退してます。 ちなみに過去二回ともGoでの挑戦で、Node.jsで挑んだことはありませんでした。 なぜやったか 自分は参加メンバーを集めきれなかっため、 Node.js版で参加したいという知り合いから「Node.js版に清き一票を！！」と推されて一票入れ、 あとは今年のISUCONには関わらず終わりかなと思っていました。 ISUCON参加予定者にアンケートです。PHP,
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
Webの未来は今。Polymer 2.0とWeb Components。Google I/O 2017 - Qiita
Webの未来は今。Polymer 2.0とWeb Components。Google I/O 2017GooglePolymer Googleが「Google I/O 2017」でW3C標準のWeb ComponentsベースのフレームワークPolymerの2.0のリリースを発表しました。 Polymer Keynote on Day 1の内容を速報します。 プロダクトマネージャーTaylor Savage 今年、SafariがWebコンポーネントをサポートしました。 これによって、10億以上のモバイルデバイスがWebコンポーネントをサポートすることになります。 PolymerはWebプラットフォームを未来に進めるために、Chromeチームと協働で進めてきました。 そして、PolymerはOSSのWebエコシステムと共に進んできました。 ReactやVueはWebに革新をもたらしました。
@akamecoのマイページ - Qiita
posted articles:JavaScript:37%Node.js:25%React:15%babel:10%flow:10%
Polymer 3.0 を始めよう🔰 - Qiita
この記事は、以下の意訳です。 Hands-on with the Polymer 3.0 preview https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview 以下のドキュメントをお読みになる際は、最新の公式ドキュメントの不整合に注意してください。 現在、実験的にPolymer 3.0 プレビューが利用できます。しかし、"実験的"というところに注意してくさい。これは、早期プレビュー版です。間違えなく雑な部分があります。 幸運や成功というものは、何事も恐れずに大胆に行動する人に訪れます。今日も一日がんばるぞい!! ツールを入手 始める前に、Polymer CLIを最新にアップデートする必要があります。 以前、説明したように、コンポーネントをインストールするために Yarn パッケージマネージャをインストールする
Polymer 3.0 Previewについて〜npmとES6モジュールへの移行〜 - Qiita
この記事は、公式サイトのブログ「Polymer 3.0 preview: npm and ES6 Modules(Justin Fagnani,2017-08-22)」を訳したものです。 本日コペンハーゲンで開催されたPolymer Summit 2017において、私たちはPolymerプロジェクトの歴史において一つのとても大きなワークフローの転換を発表しました。それは以下の二つの大きな変更です。： PolymerはBowerからnpmへ移行します。 HTML importsの代わりにES6モジュールを使用するように変更を行っています。 私たちは現在、これらの変更のプレビューを行っています。Polymerの次のメジャーバージョンに含まれるこれらの変更に対して、フィードバックを得ることができるようにプロジェクトは公開しながら開発を行っています。是非プレビューを試してみてください。プロダクショ
やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性 - Qiita
これ以上は長くなるため後述． Chromeは既に，Safariもようやく 上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み． しかしSafariが対応しておらず，世間的にはモチベーションの上がらない状況であった（やちまもその一人である）． Safariにおいて，Service Workersの実装状況 No active development が Under Consideration になったのは2015/12/041のことである． 20ヶ月という永遠とも呼べる時を経て，2017/08/032にようやく In Development となったわけであった． ちなみにMicrosoft Edgeでは既に開発中34である． だから何なのか SafariにService Workersの実装がなされると，一気にウェブアプリへの移行が
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita
大規模アプリケーションを運営するときに、最初にすべてconcatしたファイルをいっぺんに読み込むと膨大なコード量が読み込まれてしまうので、各ルーティングごとに分けて必要のあるときにだけJSを読み込みたいケースがあります。 従来はRequireJSを使えば解決できる話だけど、最近ではwebpackやbrowserifyを使うケースのほうが増えてきたきて併用なんて絶対したくないと思います。なのでwebpackを使った大規模サイト運営におけるDynamic Loading方法をここに書き置いておきます。（知ってる方にはしょうもない話ですが間違ってたら注意してもらえれば助かります。） require.ensureでjsファイルを後から読み込む
[CSS] z-index とスタックコンテキスト - Qiita
z-index を使って要素の重なりを制御するとき、何も考えずに適当に z-index: 100; などと指定したりしていませんか？ このあたりの仕組みをよく理解せずに z-index を濫用していると、いつか怪奇現象に見舞われてつらいことになるかもしれません。 怪奇現象の例 早速ですが、以下のコードを御覧ください。 <div class='boxes'> <div class='box1'> .box1 { z-index: 1 } </div> <div class='box2'> .box2 { z-index: 2 } <div class='box3'> .box3 { z-index: 0 } </div> </div> </div> .boxes { color: white; position: relative; } .boxes div { width: 10em; h
![[CSS] z-index とスタックコンテキスト - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/41e6edbde6e81d388772238765352ac681b35e5b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQ1NTJTVEJTIwei1pbmRleCUyMCVFMyU4MSVBOCVFMyU4MiVCOSVFMyU4MiVCRiVFMyU4MyU4MyVFMyU4MiVBRiVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU4NiVFMyU4MiVBRCVFMyU4MiVCOSVFMyU4MyU4OCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZjI4NjhmYTg1NDA2ZDNjYzEzMjUyMWMwOGY1NTMxNzU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3RvMTcyOTYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEyMjc0M2JmMTI1MGY3OGQzZjM4Mjk2YzE3MGU4ZjNh%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Gh44KF44KJ44OH44O844K_5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D37409b9dfe6d80ad7f0be4d0a58ec3f1)
CSSアニメーション 入門 - Qiita
はじめに CSSアニメーションに関して説明する機会があったため、それらに関してまとめました。 「CSSは書けるがCSSアニメーションがよくわからん!」といった人達向けに書いた記事であり、 CSSアニメーションに関するプロパティを理解できるようになることを目的としています。 デモはCodePen上に置いてあります。編集して変化を見てみると理解が深まると思います。 デモのJavaScriptはjQueryを読み込んでいないと動かないため、ローカル環境でデモを実行する場合はご注意ください。 CSSアニメーションとは 要素をアニメーションさせるCSSの機能。 CSS TransitionとCSS Animationの2つの機能がある。 CSS Transitionとは プロパティに変更があった時に、一定時間でプロパティを変化させる機能。 単純な動きのアニメーションを実装する時に利用する。 CSS
マネージャーと開発者が安心してアプリ開発を続けるための開発ルール - Qiita
@eaglesakura です。 皆さん、進捗どうですか？ お仕事の規模が大きくなれば、参加人数が増えていくでしょう。 参加人数が増えれば、様々な宗教観の人がプロジェクトに参加するでしょう。 お一人様プロジェクトを中心にやっていた人もいれば、大規模案件のソルジャーとしてキャリアを積み上げてきた人もいます。彼らのスキルレベルもまちまちです。 私が参加している（そしてプログラマーに対して強い権限のある立場である）プロジェクトでは、次のようなルールをベースに適用しています。 これはなるべくプログラマーの負担をかけずに管理側（プロジェクトマネージャー＝PM）が開発管理を行える（進捗がブラックボックス化しない）ことを目的とした開発ルールです。 前提ルール ソースコード管理はgit/githubを利用する 1コミット（1ブランチ）に対して、複数Issueを処理しない githubはリポジトリ管理（作成
Code SplittingでどれくらいReactアプリの初回ロード時間を減らせるか試してみる - Qiita
ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。 基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。 この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使うことももちろん可能です) ちな
PageSpeed Insightsで100点を取るためにやったこと - Qiita
はじめに 内部SEOとして、PageSpeed Insightsで高得点をとる……なんて話を昔から、チラホラ聞きます。 ページ速度がSEOにどれほどの影響があるのかはわかりませんが、ページ表示速度の改善を行って悪いことはないはずなので、私が運営している個人サイトをPageSpeed Insightsで100点とれるように頑張ってみました。 本記事では、レンダリングブロック周りを主に取り扱っていきたいと思います。 目標 デザインは崩さない よく見る対応として、「外部CSSをbodyの直後で読み込むようにして……」というのがあるけど、そうすると、一度CSSが当たらないページが出てしまう。美しくないので、ファーストビューではCSSが当たった状態で表示する maxCDN等を利用している部分は、そのまま使う 個人サイトなので、CDNを使用しているのはサードパーティー製のJSやCSSのみだが、これはこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css脱初心者？ :before :after擬似要素の使い方とか基本的なこと - Qiita
