運用出来るWebアプリケーションの作り方
はじめに 先日、下記のようなツイートを見つけて、そういえば趣味で個人開発してたときには然程気にしてなかったけど、仕事で運用するようになって先輩たちから学んだり自分で身につけたチップスってちょこちょこあるよねー、とふと思ったので、Webアプリケーション開発に関わるものをいくつかまとめてみました。 特に体系的/網羅的という程でもないですし、最近はFWや色々な仕組みでカバーされてるものも多いですが備忘録として。 Tips 機械が読めるログを作る これは割と重要なのですが、ログは人間が読むものではなく機械が読むものです。それはZabbixだったりDatadogだったりSplunkだったりgrep/awkだったりツールは何でも良いのですが、古の時代はさておき現代ではログは機械が読めることが最重要です。 まず大前提として構造化されている必要があります。言うまでもないですが「フリーフォーマット」のログの
FastAPI入門 - モダンなPythonフレームワークの特性をチュートリアルで手軽に学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
FastAPI入門 - モダンなPythonフレームワークの特性をチュートリアルで手軽に学ぶ PythonのWebフレームワークとしていま注目を集めるFastAPIは、シンプルにコードが書けるだけでなく、パフォーマンスが高いWebアプリケーションのバックエンドサーバーが構築可能です。同フレームワークの勘所をPythonスペシャリストの杜世橋さんが、初心者向けのハンズオン、そしてより実践的な画像への自動タグ付けサービス実装をとおして解説します。 FastAPIはいま非常に注目されているPythonのWebフレームワークの1つです。Flaskのようにシンプルに書ける一方でPythonのType Hintの機能をうまく活用し、HTTPのリクエスト/レスポンスをPythonの関数の引数/戻り値とシームレスにマッピングして非常に効率的に開発ができるのが最大の特徴です。非同期処理にも対応していてその名
Browser Dev Tools: The Ultimate Guide 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
10年弱エンジニアをやってきてわかった、あなたの開発効率を倍にしてくれるツール37選｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリ、noteの「先週もっとも多くよまれた記事」「先週もっともスキされた記事」に入りました！ こんにちは。 苦しんでプログラミングを学んだ柴犬こと、くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 今年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに6000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022
Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
CSRF(Cross-Site Request Forgery)攻撃について
ふと気になって調べたことの備忘メモです ✍ （2022/11/3追記）ご指摘頂いた内容を踏まえて加筆修正をおこないました なぜ調べたか Webアプリケーションの開発に携わっていると CSRF という脆弱性への対処を求められますが、多くの場合利用しているフレームワークが設定追加だけで対応してくれたり、既に前任者によって適切な処置がされていたりなど、実務上で目を向ける機会はその重要性と比較して少ないのでないかと思います また、Webブラウザの実装やHTTP周辺の関連仕様の変化から陳腐化している情報も多く、現代において全体感と具体的な対処法を理解するには少しばかりハードルが高いように感じていました ですので、自身の現時点での認識を明文化して残しておくことにしました なお、私はWebセキュリティの専門家でなく、一介の開発者のため、誤りが多分に含まれる可能性があります ご指摘を頂ければ修正したいと思
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
はてなサマーインターン2018の講義資料を公開しました。今年はGo言語&新カリキュラム！ - Hatena Developer Blog
Webアプリケーションエンジニアの id:tanishiking24 です。 今年で11年目となるはてなサマーインターンを2018/08/13 〜 2018/09/07という日程で開催しました。 developer.hatenastaff.com はてなサマーインターンの期間は前半と後半に分かれています。前半課程でははてなのサービス開発・運用に必要な技術を習得するための講義パート、後半課程では実際にサービスやシステム開発チームに参加していただいています。 はてなサマーインターンの講義パートで使用している「はてな教科書」はGitHubで公開しておりますが、今年のインターンで利用した講義資料を新たに公開しました。 今年のサマーインターンではカリキュラムを一新し、前半課程で利用するプログラミング言語にはGo言語を採用し、また進化するWeb技術に対応するためにデータベース基礎、インフラ、Webの基
bosyuというサービスを作って譲渡するまでの流れ｜坪田 朋
bosyuをCasterさんに譲渡しました。 bosyuの運営会社についてbosyuは株式会社Basecampのサービスとしてリリースしました。普段はデザイン制作、プロトタイプ開発を仕事にしています。 9月で設立1周年を迎えるのでロゴを新しく作りました。 bosyuを作ろうと思ったきっかけ自分が欲しいと思ったのが一番のキッカケで、MVP開発の事例としても丁度良い規模なので作ることにしました。 ・MVP事例のポートフォリオワーク ・Twitter × OGPサービス増えた時期で自分でも作りたくなった ・規模的に丁度よく初期投資 / インフラコストも低い ・人材領域はマネタイズチャンスが多い ・最悪流行らなかったらクローズしやすい ・自分で使って数人採用できれば採算が合うような気がする ・実際にbosyu経由で複数のフリーランスの方と一緒に仕事してます 「譲渡した場合は折半」の約束でエンジニア
API 設計ガイド | Cloud API Design Guide | Google Cloud
フィードバックを送信 API 設計ガイド コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 変更履歴 はじめに これは、ネットワーク API の一般的な設計ガイドです。2014 年以来 Google 内部で使用され、Cloud API やその他の Google API を設計するときに Google が従うガイドです。この設計ガイドは、外部のデベロッパーへの情報提供と、互いの連携作業の効率化のためにここで共有されています。 Cloud Endpoints のデベロッパーには、このガイドは、gRPC API を設計するときに特に役立つことがあり、そのような場合にはこれらの設計原則を使用することを強くおすすめします。ただし、このガイドの使用は必須ではありません。Cloud Endpoints と gRPC はガイドに従わなくても使用できます。 このガイドは、gR
個人開発のやっていき方
2017年7月20日に行われた Rails Developers Meetup #3 の発表資料です。
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
iPhoneアプリ開発・運用でかかせない、吟味して選んだ便利サービスTOP10
iPhoneアプリを個人で作り始めてから5年ほどになるけど、アプリ開発や運用でかかせないサービスをまとめてみた。 それぞれに競合サービスがあったりするけど、いくつか使ってみて、最終的に本当に使うようになったものだけ書いてみる。プログラミングする時に使うツールというより、アプリを作った後の運用とか、分析とか、そっち系のサービスがメインのランキング。 iOSアプリにしか使ってないけど、Androidで使えるものも多い。 10位 Iconfinder（無料+有料） https://www.iconfinder.com/ アプリはWebサービスに比べて画面が小さいのでビジュアルデザインが楽。実質、フリーのアイコンとか有料のアイコンを利用するだけで事足りることが多い。僕はまず有料のアイコン集を買って、それでカバーできない時はこのサイトから検索してます。 例えば、フラットデザインのリロードアイコンを検
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
ホーム - CloneTracker
当社はCookieを使用して、お客様が当社のWebサイトでより良い体験を得られるようにしています。引き続き閲覧する場合は、プライバシーポリシーに同意したことになります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSRF基礎
Glitch
Postman | API Development Environment
フロントエンドエンジニアも知っておきたいgRPC
