定量と定性で見る！デザイナーが実践するユーザー理解へのアプローチ【プロデザ！BYリクルート第26回】 2025.09.03 デザイン デザインディレクター プロダクトデザイン
React製のSPAのパフォーマンスチューニング実例
定量と定性で見る！デザイナーが実践するユーザー理解へのアプローチ【プロデザ！BYリクルート第26回】 2025.09.03 デザイン デザインディレクター プロダクトデザイン
noteと"contenteditable"｜ct8ker｜note
この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する
この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
Web ページを高速化して ユーザーに価値を届けたい 制作者のための セミナー＆ワークショップ資料公開
Web ページの高速化セミナー WCAN 2018/09/15「Web ページを高速化してユーザーに価値を届けたい制作者のためのセミナー＆ワークショップ」 - WCAN | Doorkeeper 先日、2018年9月15日にひっさびさに WCAN に登壇させていただいて Web パフォーマンスチューニング....のなかでもページロード速度の高速化を中心にセミナーとワークショップを行わせていただきました。 下記はそのときの資料です。今回は Web サイト制作者向けのセミナーとして企画したので、Web アプリ開発勢が好きそうなテクニカルな話はすべて割愛しています。 ウケが良かったような気がするネタ なにがウケるか読みがつかなかったので、とりあえず色々盛り込んでみました。会場では下記のあたりがウケが良かったような....気が...する。 格安 SIM の回線は、大手キャリアのプロパー回線と比べる
PHPで動くファミコンエミュレータを作った
TL;DR PHPで動くファミコンエミュレータを作った php-terminal-nes-emulator画面描画は点字を使って文字出力コントローラは標準入力からfread() 経緯 2016年の2月にPHPで動くゲームボーイのエミュレータ、php-terminal-gameboy-emulator に衝撃を受けて、その実装の解説を勉強会やカンファレンスでトークしたりSoftware Design誌に書いたりしました。(*1) カンファレンスでのトークでは時間の都合もあって全体のごく一部しか話が出来ないのですが、Software Design誌では誌面をたっぷり頂いてCPU、メモリアクセス、画面表示とphp-terminal-gameboy-emulator のほぼ全域を解説出来たので満足し、その熱は落ち着いていました。 そんな中、9月に開催されたbuilderscon tokyo 201
MTC2018 カンファレンスLPの裏話 〜インフラ編〜 - Mercari Engineering Blog
こんにちは、メルペイのバックエンドエンジニアの @kazegusuri です。 2018年10月4日にMTC (Mercari Tech Conf) 2018 が開催されました。ご来場された皆様、楽しんでいただけたでしょうか？ 今回は皆様が最初に目にしたであろうカンファレンスLPの裏側について紹介したいと思います。 実はこのページはGitHub上でPublicなリポジトリとして公開されています。 気づかれた方もいらっしゃるかもしれませんが、これはイベント後に公開したわけではなく、リポジトリ作成時からずっとPublicな状態で開発を続けていました。 チーム構成 MTC2018では最初からWebでの公開だけではなくカンファレンスアプリを作ろうというのを決めていました。 そのため大きく分けてwebチームとappチームに分けて開発をすすめることになりました。 web/appチームはメルカリグループ
Kotlin/Nativeがベータに到達、Kotlin 1.3にバンドル。Win/Mac/iOS/Android/WebAssemblyのバイナリ生成。KotlinConf 2018 － Publickey
Kotlin/Nativeがベータに到達、Kotlin 1.3にバンドル。Win/Mac/iOS/Android/WebAssemblyのバイナリ生成。KotlinConf 2018 KotlinはJavaVM上で動作するプログラミング言語として登場しましたが、それ以外にも以前からKotlinのコードからネイティブコードを生成する「Kotlin/Native」の開発も進められていました。 オランダのアムステルダムで10月3日から5日まで開催されたプログラミング言語Kotlinのイベント「KotlinConf 2018」の基調講演で、この「Kotlin/Native」がベータに達し、Kotlin 1.3の一部としてバンドルされることが発表されました。 Kotlin/NativeがKotlin 1.3の一部としてバンドル Kotlin/NativeはWindows、macOS、Linux、iO
Angular v6.1で導入されるRouter Scrollerの紹介 - 余白
こんにちは、lacoです。 Angularの次のマイナーアップデートで、久しぶりに新機能らしい新機能が増えます。 その名もRouter Scrollerです。 長くAngularを使っている人には涙が出るほど嬉しい待望の機能です。 この記事ではRouter Scrollerの紹介と、来週のbeta.1まで待てない！今すぐ試してみたい！という奇特な方のために、最新のビルドで試す方法も紹介します。 Router Scroller Router Scrollerは、Angular Routerにスクロールに関連する機能を与えるものです。 Router Scrollerを使うと、次のようなことができます。 ブラウザバックしたときに遷移前のスクロール位置に復元する #foo のようなフラグメント付きのURLで、対応するIDを持つ要素まで自動でスクロールする どちらも、静的なHTMLページであればブラ
WebGL Water
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） Mac OS X → OS X → macOS iPad OS18 → iPadOS 1
さいきょうの二重サブミット対策 - Qiita
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
Content Security Policy Level 3におけるXSS対策 - pixiv inside
こんにちは、セキュリティエンジニアのkoboです。ピクシブには2018年4月に入社しており、セキュリティ観点でのアプリケーション開発や脆弱性報奨金制度の運用などを行っています。 本記事では、現在ピクシブの一部のサービスで取り組んでいるContent Security Policyについて知見を共有します。 概要 Content Security Policy (CSP) は、XSSを主としたウェブアプリケーションセキュリティの問題を軽減するために考案されたブラウザのセキュリティ機構です。 ウェブアプリケーションは、 Content-Security-Policy ヘッダをHTTPレスポンスに含めることで、意図していないJavaScriptの実行やリソースの読み込みをブラウザ側で制限することができます。 CSPは2012年頃よりブラウザに実装されていますが、2016年のGoogleの調査によ
JavaScript とクロスブラウザでの IME event handling (2017年) - たにしきんぐダム
この記事は CAMPHOR Advent Calendar 2017 22日目の記事です。 昨日は @ryota-ka による Type-level TypeScript - ryota-ka's blog でした。 CompositionEvent が多くの主要ブラウザでサポートされた2017年冬なら、JavaScriptで日本語入力に対応したちょっとした入力補完機能の実装はシュッとできると思ったのですが、ブラウザによって細かい実装が異なっていてちまちまとしたworkaroundが必要になったのでメモ 検証環境 Windows10 / Microsoft Edge 41.16299.150 Windows10 / InternetExplorer11 バージョン: 11.64.16299.0 macOS Sierra 10.12.6 / Google Chrome バージョン: 63.0
サイボウズの給与交渉戦 - Boss Side -
Le document aborde une seconde ronde de négociation salariale chez Cybozu, discutée lors d'un meetup à Osaka en octobre 2018. Il mentionne des aspects techniques et statistiques, dont des performances mesurées entre 2007 et 2016, ainsi que des interactions sociales observées. Les contributions d'un participant identifiable par le pseudonyme @teppeis sont également notées.
半年間、自分を騙しながらアウトプットに積極的になってみた - valid,invalid
この半年間はソフトウェアエンジニアとしてのアウトプットに積極的になるよう意識的に行動してみたので振り返ってみます。長くなってしまったので3行でまとめるとこんな感じです。 成長と刺激を求めて OSS contribution や登壇やイベント運営を頑張ってみた 成長したかはわからないが、知り合いが増えたりして刺激を受けることが多くなった これからも続けていくが持続可能なペースにしたい この半年間、登壇とかイベント運営とかに積極的になるよう"試験運用-セルフコントロール-"してきたのでそろそろ振り返ってまとめたい— 広島の粗大ゴミ (@ohbarye) 2018年9月27日 だいたい2018年上半期の話ですが一部期間外の話もあります。 なぜアウトプットを増やすか 唐突ですが、現職では日常の業務を漫然と続けるだけで成長するフェーズは終わったのかなぁと思っています。新しく何ができるか、何をすべきか
turtleDB: A JavaScript Framework for building offline-first, collaborative web apps
Too Long; Didn't ReadBuilding an offline-first, collaborative web app can be done in 2 easy steps: Building an offline-first, collaborative web app can be done in 2 easy steps: npm install turtleDB npm install tortoiseDB Done! Before we get into what turtleDB and tortoiseDB are… Offline first AND collaborative? What does that even mean? In this day and age, those of us who live in modern, heavily-
Node.jsでのイベントループの仕組みとタイマーについて - 技術探し
イベントループ イベントループとは？ イベントループとは、JavaScript がシングルスレッドなのにもかかわらず、効率よくノンブロッキング I/O を実行できるようにする仕組みです。 イベントループはメインスレッドで実行されます。 ブラウザのイベントループとは異なるので注意が必要です。 Node.js のイベントループは libuv に基づきます。 ブラウザのイベントループは html5 に基づきます。 libuv Node.js の非同期はカーネルと会話するために libuv を使います。 もともと、Node.js のために作られたものですが、今は様々なところで使われています。 libuv とは、非同期 I/O に強く、クロスプラットフォーム対応の抽象化ライブラリです。 基本的には、イベントループと非同期処理を行います。 libuv は、Node.js にイベントループ機能全体を提供
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - suchipi/fs-remote: 📡 Drop-in replacement for fs that lets you write to the filesystem from the browser
GitHub - mdx-js/mdx: Markdown for the component era
