Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 🌳🚀 CS Visualized: Useful Git Commands by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Gitのマージ（fast-forward, no-fast-forward） Gitのリベース（rebase） Gitのリセット（reset, revert） Gitのチェリーピック（cherry-pick） Gitのフェッチ（fetch） Gitのプル（pull） Gitのリフログ（re

概要 webサービスを公開するにあたって必ず使われることになるのがブラウザです。ブラウザがユーザーにwebページを表示する仕組みを理解することで、フロントエンド開発に役立てたり、ページ表示までのレスポンスの改善などに役立てていきたいと思い、今回ブラウザのレンダリングの仕組みの基本事項についてまとめました。 レンダリングの流れ ユーザーがwebブラウザにURLを入力すると、ブラウザはURLを元に指定のサーバーにTCP/IPプロトコルに基づいてリクエストを送ります。その後サーバはクライアントに対してレスポンスします。以降のレスポンスとして受け取るHTML,CSS,Javascriptをどう処理して画面に表示するのかをレンダリングと定義して、その処理の流れについてみていきます。(この工程はcritical rendering pathと呼ばれています) ブラウザがWebページをレンダリングする仕

以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next

NTT データ数理システムでリサーチャーをしている大槻 (通称、けんちょん) です。今回は計算量オーダーの求め方について書きます。 0. はじめに 世の中の様々なシステムやソフトウェアはアルゴリズムによって支えられています。Qiita Contribution ランキング作成のために用いるソートアルゴリズムのような単純なものから、カーナビに使われている Dijkstra 法、流行中のディープラーニングに用いられている確率的勾配降下法など、様々な場面でアルゴリズムが活躍しています。アルゴリズムとはどんなものかについて具体的に知りたい方には以下の記事が参考になると思います: アルゴリズムとは何か ～ 文系理系問わず楽しめる精選 6 問 ～ アルゴリズムを学ぶと $O(n^2)$ や $O(n\log{n})$ や $O(2^n)$ といった計算量オーダーの概念が登場します。こうした記法を見ると

多くのデザイナーが日々、使いやすいデザインについて模索しています。 WebページやスマホアプリのUIデザインにおいて、使いやすいデザインへの一つの答えとなる記事を紹介します。 すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI！ The Obvious UI is Often the Best UI by Susanna Zaraysky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 下部のナビゲーションバー = 使用率の増加 下部のナビゲーションバーとアクセシビリティ 「明白な」アイコンが「一般的な」アイコンとは限らない 他のUIをコピーしても、明白なデザインは保証されません 明白なものを見つけるには、問題点を見つけること はじめに フランスの哲学者ヴォルテールの言

こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek 少し考えてみてください。あなたがもし健康に関する書籍をたくさん読んだとしても健康になることはありません。実際には、ジムに行き数時間運動をして汗をかかなければ健康は手に入りません。 同じことが開発にも言えます。努力なしに優れたデベロッパーになることはできないのです。 そこで、コーディング力を鍛える8つの素晴らしいプロジェクトを紹介します。 あなたの好きなテクノロジースタックを使っ

UXデザインのコンサルティングではよく品質優先度マッピングというものを行います。これは開発プロジェクトの上流工程において、実装を検討している機能をリストアップし、そのひとつひとつについて想定する利用者の割合や利用頻度の観点からグルーピングし、実装の優先度を決める作業です。 これを行う目的は、UIをできるだけシンプルに保つことにあります。ユーザーが求める機能をすべて盛り込むと、当然UIは複雑になり、誰にとっても使いにくいものになります。また蓋然性のバランスが取れていない要件はプログラムを複雑にし、バグが増える原因になります。 UIデザインにおけるパレートの法則（結果の大部分は全体の一部によって生み出される）は、「ユーザーの80%は全機能の20%しか使わない」というものです。その20%に注力し他の優先度を下げることで、製品の利便性は向上するはずです。 Core, Important, Nice

「FinOps、アプリケーション単位の経済性、クラウドコストの最適化について、ロワ・ラヴホン氏語る」 このエピソードでは、Finoutの共同設立者兼CEOであるRoi Ravhon氏が、InfoQポッドキャストの共同ホストであるDaniel Bryant氏と対談し、FinOpsの出現と業界の採用について議論した。この対談では、FinOpsを採用するメリット、クラウド・コストについてもっと知りたいと考えている組織の典型的な道のり、実装を成功させるために必要な様々な文化やツールといったトピックが取り上...

現在のインターネットの基本をなしているIPv4というプロトコルには、広く知られた大きな欠点がある。パケットのアドレスフィールドの幅が32ビットなので、ネットワークに接続可能なホスト数の上限が2³²（約43億）になってしまっているのだ。その欠点を修正するために、1990年代後半にIPv6という新たなプロトコルが設計されたのだけど、いまだにインターネットではIPv6は少数派で、主流ではいまだにIPv4が使われている。 1990年代当時は、IPv6は規格を策定すれば比較的すぐに普及するはずで、それによってインターネットが抱えているアドレス枯渇の問題が解決されるという雰囲気だったように思う。1998年にタイムトラベルして、20年たってもまだIPv4を置き換えることに成功していないと当時の人のIPv6推進者たちに教えたら、多分すごくびっくりされるだろう。一体どうしてこんなに普及が遅れてしまったのだろ

とある日... 👨‍💻エンジニア 「おはようございます〜！」 🙍‍♂️上司 「おはよう！」 👨‍💻エンジニア 「今日も開発するぞ〜！...ん？」 👨‍🦳偉い人 「👨‍💻さんにエンジニア採用お手伝いいただくことになりました！来週からです！」 👨‍💻エンジニア 「...（間違いメールかな？)...上司さん〜これって間違いメールですかね？」 🙍‍♂️上司 「間違いじゃないで。来週からエンジニア採用手伝ってな。」 👨‍💻エンジニア 「...。（急に決まってて草）」 急に「来週からエンジニア採用業務手伝ってね！」と上司から言われた、全てのエンジニアが路頭に迷わないために。 これは何？ 普段採用のことなんて1bitも考えていないエンジニアに向けた、エンジニアのエンジニアによるエンジニアのための採用業務チュートリアル的なものをまとめておきます。 「採用業務で迷惑をかけないよう

はじめに 注意 CSSiの原理と概要 クラシカルな手法 概要 動作デモ 実装 脆弱なWebアプリケーション(/classic/user/*) 攻撃用CSS生成スクリプト(/classic/attacker/exploit.py) 攻撃者用Webサーバ(/classic/attacker/server.py) Recursive Import を用いた手法 概要 CSSのインポートと攻撃の原理 攻撃フロー 動作デモ 実装 脆弱なWebアプリケーション(/recursive/user/*) 攻撃者用Webサーバ(/recursive/attacker/server.py) おわりに 参考文献 はじめに 本記事ではCSS Injection(以下，CSSi)について解説します． CSSiについて，その原理や攻撃手法の概要を示したあと，実際に攻撃環境を実装して，HTML上に存在する機密情報を窃取す

はじめに 2010年12月に彗星のごとく現れたWebサービス同士のマッシュアップサービスIFTTT。 「if (this) then (that)」と言うシンプル極まる構文で手軽にWebサービスが連携出来るのが特徴です。 IFTTTは様々なWebサービスをサポートしており、ちょっと挙げるだけでもTwitter、Evernote、Google Drive、Skypeなどの有名どころから、ナニコレ？ってものまで実に多彩です。 加えて、IFTTT独自のサービス群も魅力的です。 スマホ通知、Alexa・Google Homeの音声入力、スマホのウィジェット（メモ、ボタン、写真）など。 それらを前述のシンプルな構文で自由に組み合わせられるのが、IFTTTの魅力だと思います。 IFTTTの弱点 シンプルさが売りのIFTTTなのですが、それがそのまま弱点にもなっているという印象です。 例えば「為替の情報

デザイン雑誌はペラペラめくるだけでインスピレーションを刺激してくれますよね。 有名な海外のデザイン雑誌やサイトをご紹介します！ ISSUU 無料で読めるデザイン雑誌を集めたサイト。おすすめ！！ http://issuu.com/ Nest 奇抜で幅広い内容の季刊誌。無料で一部読めます！ http://ideas.thenest.com/the-nest-magazine.aspx Dwell 住宅雑誌。 http://www.dwell.com/magazine How 主にグラフィックデザインに焦点をあてた雑誌。 http://www.howdesign.com/ ID 毎年、ベストデザインを選ぶ「Design Review」は有名。 http://www.id-mag.com/ Metropolis 建造物と資材をメインに扱う雑誌。 http://www.metropolismag.c

ペアワイズ法を使うことで、効率的にテストケースを絞り込めることがわかったかと思います。 --- 2019/10/31 追記 --- どうしてテストケースを絞り込んでも大丈夫なのか？という意見がSNSやはてブのコメントで見受けられたので、フォローアップエントリを書きました。こちらも合わせてご覧ください。 ペアワイズ法は本当に有効なのか？組み合わせテスト技法と上手に付き合う方法 ｜ DevelopersIO ペアワイズ法を支えるツール「PICT」 ペアワイズ法が有効なことはわかりましたが、この組み合わせをどうやって作れば良いでしょうか？条件の数が少なければ前述のように手作業でもやれないことはありませんが、現実の問題はもっと複雑ですので、到底無理でしょう。 そこで役に立つのが、ペアワイズ法のテストケースを生成してくれるツール「PICT」です。 microsoft/pict: Pairwise I

本書の目的 ウェブセキュリティを手軽に学びたいひと向けに、簡単な学習環境の構築方法を紹介する 材料 Java ウェブブラウザ（今回はFirefoxで解説します） ローカルプロキシ「Burpsuite」 アドオン「HakoniwaBadStore」 (https://github.com/ankokuty/HakoniwaBadStore/releases/download/v1.0.2/HakoniwaBadStore.jar) この時点で想像がつく人は、「まとめ」以降を参照ください。 概要 こんにちは、ウェブ共同開発部の堀井です。 東京オリンピックが近くにつれ、「サイバーセキュリティ」というキーワードを目にする機会が増え、「SQLインジェクションによる情報漏洩」や「クロスサイトスクリプティングによるサイト改ざん」といった専門用語を目にする機会も多くなってきました。 開発者がセキュリティを

NTT データ数理システムでリサーチャーをしている大槻 (通称、けんちょん) です。 今回はソートについて記します。 0. はじめに データ構造とアルゴリズムを学ぶと一番最初に「線形探索」や「ソート」が出て来ます。これらのテーマは応用情報技術者試験などでも頻出のテーマであり、アルゴリズムの Hello World とも呼ぶべきものです。 特にソートは、 計算量の改善 ($O(n^2)$ から $O(n\log{n})$ へ) 分割統治法 ヒープ、バケットなどのデータ構造 乱択アルゴリズムの思想 といった様々なアルゴリズム技法を学ぶことができるため、大学の授業でも、アルゴリズム関連の入門書籍でも、何種類ものソートアルゴリズムが詳細に解説される傾向にあります。本記事でも、様々なソートアルゴリズムを一通り解説してみました。 しかしながら様々な種類のソートを勉強するのもよいが、「ソートの使い方」や

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す

こんにちは！広告技術部のUT@mocyutoです！ 最近はスマブラでなんのキャラを使おうか迷っています この記事はGunosy Advent Calender 19日目の記事です。 昨日の記事は@mathetakeのpeer-to-peerはGoogleの夢を見るかでした。 はじめに OIDC ALBの認証機能 一般的な認証機構 ALBを利用した認証 データフローの説明 実際の導入 APIでjwtから認証情報を取得する例 まとめ はじめに みなさんユーザ認証はどうやって作っていますか？ フレームワークを使って実装していますか？ それともイチから自前で作っていますか？ SSOのシステムとかはどうでしょう？ OIDCとAWSのALBを使えば簡単にユーザのログイン管理を作ることができます。 （少し煽り気味のタイトルですいません ;） OIDC OpenID Connect と言って、OAuth2