どこでも動くWebフレームワークをつくるYAPC::Kyoto 2023 2023-03-19 Yusuke Wada
0→1のWeb開発においてRDBMSを使った方がその先につながりやすく、Railsが復権したのがSaaS時代のトレンド - algonote
プロダクトの変遷でアーキテクチャーがどう変わったか 前口上 Web開発においてとりうるアーキテクチャーにはいくつかパターンがあります。 サーバー構成をモノリスかマイクロサービスかで分ける場合もありますし、データベースを内製で持つか外部のmBaaSに任せるかで変わる場合もあるでしょう。認証部分をOAuthに切り出したり、全文検索部分だけ外部サービスを使うこともありますね。 とある時は新しい技術Aを使うことがいけてるという時があれば、少し経つとその技術が終わったことにされる場合もあります。 こういった技術のトレンドにはその時にビジネスチャンスが広がったプロダクトのトレンドに影響されていることも多く、サーバー・クライアント比率の観点で見るとうまく整理できることに気づいたのでまとめてみます。 System of RecordとSystem of Engagement のっけから人様の資料で恐縮です
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
どうして未経験者はそんなにWebエンジニアにこだわるんだい？◕‿‿◕
わけがわからないよ。ここ数年で全く関係ない業種から、Webエンジニアになりたい人がかなり増えてるけど、わけがわからないよ。 どうして、君たちはWebエンジニアにそんなに魅力を感じるんだい？ぼくはWebエンジニアをしてるけど、そこまでこだわる理由がわからないよ。 自由な働き方ができて、給料も高く、ストレスフリーで働けるって思いこんでるみたいだけど、そんなのは怪しいインフルエンサーやプログラミングスクールの宣伝文句に過ぎないさ。 解説するよ。よく読んで！ そんな…あんまりだよ、夜間メンテナンスや緊急対応があるって、こんなのってないよ！君たちはソシャゲがメンテナンスになったときに、文句を言ってるけど、 君たちがなりたいWebエンジニアが、メンテナンス中に何をしているか想像したことがあるかい？ メンテナンス中、彼らはプレッシャーに耐えながら必死で働いているんだ。ユーザーのために、早くサービスを再開
仮想スクロールのすヽめ - Qiita
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか？ 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。（絶対に違う） 仮想スクロールの仕組み イカれたメンバーを紹介するぜ！ 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ！ ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数（あるいは
Markdownで年表的なタイムラインを管理するツール
mdlineというMarkdownでタイムライン(年表)を書いて、HTMLなどの形式にしたりできるパーサ、ジェネレーターなどのツールを書きました。 特定の記法で書いたMarkdownから年表的なタイムラインを作成するツール書いた。 $ npx mdline ./timeline.md -o timeline.html 現在はMarkdown to HTMLができる。https://t.co/7Vv0DUmYkX pic.twitter.com/oYJICloElA — azu (@azu_re) January 20, 2019 たとえば、次のようにECMAScriptのタイムライン(年表)をmdlineが決めたMarkdown形式で書きます。 （実際にはただのMarkdownなのですが、次のように 日付: タイトル とHeaderのレベルを合わせるとタイムラインとして扱う感じです) ##
こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材
スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウンロード Symbolsの使い方 Symbolsで作成できるスタイルガイド Symbolsはその名の通り、シンボルで自動更新されるスタイルガイドのテンプレートです。使用するカラー・フォント・ロゴなどを変更するだけで、Webサイトに使用するさまざまなコンポーネントのスタイルを定義できます。
誰もあなたの製品を使いたいと思ってはいない : 製品をデザインするための考え方 | POSTD
毎朝、デザイナーは目が覚めると、喜んで自分の製品に取りかかります。それがデジタル製品であっても物理的な製品であっても、デザイナーは心の中で、人々が自分の製品を使いたがるようになり、楽しんで使うようになると信じているのです。 それはやや一般論かもしれません。しかし、私たちはデザイナーとして、自然と 自分が取り組んでいる各プロジェクトを最高のものにし 、革新的なものにして、そして何より、違いをもたらしたいと考える傾向があります。 ああ、私の製品は素晴らしい物になるはずだ。機能やオプション、設定が充実している。みんなが毎日その製品を使い、愛用するようになるだろう。 – あるデザイナー ここで少し意外な事実をお教えましょう。人々は製品を使用ことにあまり興味はありません。ユーザがインターフェースを操作したり、つまみを回したり、レバーを引いたり、ボタンをタップしたりするのはすべて時間の無駄です。むしろ
voxel.css
var scene = new voxelcss.Scene(); scene.rotate(-Math.PI / 8, Math.PI / 4, 0); scene.attach(document.body); var world = new voxelcss.World(scene); var editor = new voxelcss.Editor(world); editor.enableAutoSave(); if (editor.isSaved()) { editor.load(); } else { editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } View in JSFiddle var voxel = new voxelcss.Voxel(0, 0, 0, 10
Javaですべての上場企業のと地方自治体のサイトをスクレイピングして大変だったこと - Qiita
私は主にJavaを使って大量のサイトからクロールとスクレイピングをしています。 作っているサイトは happyou.info です。上場企業と官公庁と地方自治体とその他1万サイトくらいスクレイピングしています。 このエントリでは、技術的なこと特にめんどうくさかった点を書き残しておきたいと思います。基本的なことかもしれませんが、私自身忘れそうなところもあるので。 1.上場企業は企業が入れ替わる 上場企業は毎日企業が入れ替わります。新規上場、上場廃止、合併、分社化、企業名変更は毎日のことです。この変化にキャッチアップするのが難しかったです。 日本取引所グループ 「よし上場前からきっちりスクレイピングして事前に準備しておくぞ」と思っても、上場にあわせてサイトをリニューアルしたりする企業も多いので油断なりません。 官公庁のサイトは、民間企業に比べるとはるかに移転が少なく落ち着いています。 地方公共
二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]
こんにちは、エンジニアのみどです。 ピクシブは、イラスト1枚で簡単にオリジナルグッズが作れるサービス pixivFACTORY を開発しています。 そのpixivFACTORYのプレビューに焦点を絞った勉強会を社内で行いました。 今回は、その勉強会の内容を公開したいと思います。 プレビューとは pixivFACTORYでは、グッズの仕上がりのイメージを確認する機能を提供しています。 この機能は、チーム内でプレビューと呼ばれていて、pixivFACTORYの売りのひとつになっています。 今回の勉強会では、ピクシブのエンジニアがこのプレビューに関する技術やノウハウについて発表を行いました。 pixivFACTORYのプレビューを支える技術 まず、私がアプリケーションサーバ側の処理について発表しました。 ImageMagickやBlenderといったソフトウェアをどのように使い分けているかが見所
![二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0eaf03191447a1f2ff35760bd0a271a3233031c/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20150924%2F20150924161502.png)
Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft
今日のデジタル社会において、数十億人の人々が仕事や生活の両方でインターネットに接続し、様々なアプリケーションやサービスを利用しています。オンラインのリスクを回避し、高速かつ最適な Web 体験を得るために、モダンなブラウザーを選択することは、ますます重要になってきています。 マイクロソフトは、より安全で高速なブラウザーをご提供し、ユーザーが常に最新バージョンの Internet Explorer を使えるよう継続的な投資を行なってきました。最新の Internet Explorer 11 では、セキュリティの向上やブラウジングの高速化、Web 標準サポートによる Web アプリの互換性向上など、開発者だけでなくユーザーにとっても多くのメリットがあります。 米国時間の 2014 年 8 月 7 日、マイクロソフトは Internet Explorer のサポートポリシーについて、重要なお知ら
Googleが勧める、SEOで今注目の2つの技術はJSON-LDとWeb Components
[レベル: 上級] Googleはウェブマスター向け公式ブログで、JSON-LDとWeb Componentsの2つの技術を共に使うことを推奨しました。 JSON-LDとは JSON-LDは、Linked Data（リンクト・データ）を記述するためのフォーマットです。 SEOにおいては、構造化データのボキャブラリの1つであるschema.orgを記述するシンタックスとして利用できます。 構造化データとしてのschema.orgやJSON-LDについては、このブログで詳しく解説してきましたね。 [構造化データ初級者向け] schema.orgとMicrodata、RDFaって何が違うの？ 【徹底解説】JSON-LDを使ったschema.orgの記述方法 ゼロから始めるセマンティックSEO＆構造化データ at CSS Nite LP36 schema.orgのこれまでと今、そしてこれから at
初めてエンジニア面接をすることになって準備したことと反省 - yashigani?.days
photo by MDGovpics 技術面接を担当する機会があった． 今まで，面接されることはあってもする側になるのは初めて． 短い時間でよい成果を得るため，事前に色々と準備をしてから望むことにした． 最初に 面接といえば質問だ． 逆に言うと質問の集合が面接と言っても差し支えない． そこでなにを質問すべきか考えた． 採用面接の目的は一緒に働く仲間(を増やす|になる)ということだ． つまり，お互いに一緒に働きたいと感じるエンジニアなのかを判断できればパーフェクトコミュニケーションと言えるだろう． 事前準備 会話は3往復くらいさせると深く人となりがわかるらしい． なにも用意しないとそんなのは絶対無理なので，事前に質問を用意しておく． エンジニアの場合，応募資料はだいたい以下の2つがある． ブログやGitHubなどインターネットでの活動 職務経歴書 この2つからエンジニア像を作りつつ，質問した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Macaron | Visual component editor for Web development
ちいさな Web ブラウザを作ってみよう
https://ffmpegwasm.github.io/
Webアプリケーション実行環境におけるセキュリティ - Speaker Deck
MyBatis を利用した web application 開発についてのご紹介
TechCrunch | Startup and Technology News
