タグ

2020年9月26日のブックマーク (6件)

  • CSS Flexboxでヘッダを実装する最近のテクニックのまとめ

    CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ

    CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
    kyaido
    kyaido 2020/09/26
  • autofocusがグローバル属性になったのでなんか書く | きるこの日記帳

    2019 年 8 月末、HTML LS で、autofocus 属性がグローバル属性となった。 ブラウザの対応が進めば、全ての要素で autofocus を使用できる。 autofocus属性とは autofocus 属性は、ページの読み込み時に自動的にフォーカスする要素を指定するもの。 これまで autofocus は、button, input など、フォーカス可能な要素でしか使用できなかった。 一方で、全ての要素は、tabindex または contenteditable 属性を追加することでフォーカスが可能である。 したがって、autofocus は全ての HTML 要素で使用できるべき、という内容の Issue が 4 月に上がってた。 Move autofocus content attribute to HTMLElement · Issue #4563 · whatwg/h

    autofocusがグローバル属性になったのでなんか書く | きるこの日記帳
    kyaido
    kyaido 2020/09/26
  • 「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog

    「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要

    「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
    kyaido
    kyaido 2020/09/26
  • React17におけるJSXの新しい変換を理解する

    今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換

    React17におけるJSXの新しい変換を理解する
    kyaido
    kyaido 2020/09/26
  • なぜ我々は頑なにforを避けるのか - Qiita

    動機 前回の記事を投稿したことを某SNSで通知したところ、そのSNSでこんなコメントをいただいた。転記する許可を取ったわけでは無いので私なりに要約させていただくと、 なぜそんなトリッキーな書き方をしてまでforを使うのを避けるのか そんな書き方をして可読性を下げるくらいなら素直にforを使う方が良い ということだと理解している。 なるほど、一理ありそうだ。しかし一方で、前回貼ったStackOverflowのQ&Aはなかなかの人気記事(質問に1243ポイント、回答に最大で1559ポイント)なので「多少トリッキーなことをしてでもforを書きたくない!!」という意見をもつプログラマも一定以上いるのだろう。当然私もその1人だ。 ということで、この記事で「なぜそこまで意固地になってまでforを書きたくないのか」を説明することにする。 尚、今回は前回の記事つながりで言語はJavaScriptを使うが、

    なぜ我々は頑なにforを避けるのか - Qiita
    kyaido
    kyaido 2020/09/26
  • 分配金を出さないインデックスファンドには複利効果がないのでは?

    ブログでは記事中にPRを含む場合があります ブログ読者のかたから、よく同じようなご質問をいただくので、ブログで取り上げて回答してみたいと思います。 Aさん(仮名)からのご質問より インデックスファンドを少し持っています。書籍等で分配金を再投資すると複利効果があるのは理解できるのですが、持っている投信はもう何年も分配金をだしていません。再投資できていないような気がします、複利効果は出でいるのでしょうか?貴殿ブログなどでは頻繁に分配金は出さない方が良いと書いておられます。この辺がよく理解できません。 要するに、「分配金を出さないインデックスファンドには複利効果がないのでは?」というご質問です。 自分なりの回答としては、 「分配金の有無に関係なく、インデックスファンドに複利効果はある」 です。なんだと!?と思われるかもしれませんが、まあ聞いてください。 インデックスファンドの値動きは単利では

    分配金を出さないインデックスファンドには複利効果がないのでは?
    kyaido
    kyaido 2020/09/26