タグ

ブックマーク / postd.cc (14)

  • @extendを使うべき時、@mixinを使うべき時 | POSTD

    (編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) 私がクライアントからよく受ける質問に 「@mixinと@extend、それぞれどのような時に使うべき?」 というものがあります。 “引数を使わない@mixinは悪である”。 これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使うべき時、@mixinを使うべき時、これらを見極めることにはもっと深い意味があるのです。 それでは詳しく考察していくことにしましょう。 私は普段、@extendは決して使わないようにとアドバイスしています。@extendには、一見したところ魅力的な特徴がたくさんあるのですが、注意しなければいけない点はそれ以上にあります。言ってしまえば 見かけ倒し だということです。 それでも@extendを使い

    @extendを使うべき時、@mixinを使うべき時 | POSTD
    wdr_s
    wdr_s 2018/10/22
  • 「フロントエンド開発者」の終焉 | POSTD

    元記事の著者より:この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます(答えは相手によって変わることもあります)。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです(これに関しては、後に詳しく説明します)。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな

    「フロントエンド開発者」の終焉 | POSTD
    wdr_s
    wdr_s 2018/01/19
    フロントエンドが高度化して、なおかつバックエンドからエンジニアが流入していて、もともとHTMLコーダーな人も混ざっていたりして、同じ肩書でもスキルはバラバラ。
  • さよなら、Firebug | POSTD

    最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSSHTMLJavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい

    さよなら、Firebug | POSTD
    wdr_s
    wdr_s 2017/11/08
    Firebugの存在がなかったら、Webフロントエンド分野の成長はここまで早くなかったかも。いまとなってはChrome開発者ツールばかり使ってるけど、最初はみんなFirebugから。お世話になりました。
  • SQLトランザクション分離 実践ガイド | POSTD

    (注:2017/10/16、いただいたフィードバックを元に翻訳を修正いたしました。) (注:2017/10/11、いただいたフィードバックを元に翻訳を修正いたしました。) データベースのドキュメントで分離レベルを目にして、軽く不安を感じつつ、あまり考えないようにしたことはないでしょうか。トランザクションの日常の使用例できちんと分離について言及しているものはほとんどありません。多くはデータベースの初期設定の分離レベルを利用しており、後は運頼みです。しかし、来、理解しておくべき基的なトピックであり、いくらか時間を投入してこのガイドの内容を学習すれば、もっと快適に作業できるようになるでしょう。 私はこの記事の情報を学術論文、PostgreSQLドキュメンテーションから集めました。分離レベルの 何たる かだけでなく、適用の正確さを保持しつつ最大速度で使うにはいつ使うべきか、という疑問に答えるべ

    SQLトランザクション分離 実践ガイド | POSTD
    wdr_s
    wdr_s 2017/10/11
  • UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD

    ボタンはごく普通の、インタラクションデザインの日常的な要素です。ボタンはとてもシンプルなUI要素に見えますが、過去数十年間でそのデザインはかなり変わってきました。しかし今でもボタンのUXデザインは認識しやすさと明確さについて言及されています。 この記事ではボタンデザインの発展を辿りながら、有効なボタンを作るために何が最も重要で最適なのかを見つけて行きたいと思います。 スタイルの発展 3Dボタン 初期からオペレーティング用のボタンは、周りのコンテキストと区別するために、浮き彫りと影に依存していました。この設計の解決策は枠、グラデーション、ドロップシャドウを使用して、要素を背景やコンテンツから目立たせ、クリック可能な要素だと簡単に認識できるようにするといった単純な原則に基づいていました。 ボタンが浮かび上がっているように見えます。 このWindows95のダイアログボックスは、濃い影とハイライ

    UIデザインにおけるボタン:スタイルの進化とベストプラクティス | POSTD
    wdr_s
    wdr_s 2017/04/20
  • 私たちはなぜReactではなくVue.jsを選んだのか | POSTD

    Qwintryチームは最近、既存のすべてのプロジェクトフロントエンドVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム(qwintry.com) ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム(logistics.qwintry.com) その他、比較的小さめのプロジェクト(ほとんどは、PHPとNode.jsでバックエンドを構築しているもの) プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で

    私たちはなぜReactではなくVue.jsを選んだのか | POSTD
    wdr_s
    wdr_s 2016/12/30
    Reactがぴったりという案件に遭遇したことがないので、きっと違う業界では役立つんだろう、ぐらいに思っている。Vue.jsは学習コスト低くてよかった。
  • H.264の秘密 | POSTD

    (編注:2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) (2016/12/11、いただきましたフィードバックをもとに翻訳を修正いたしました。) H.264は、動画圧縮コーデックの標準規格です。ネット上の動画、Blu-ray、スマホ、セキュリティカメラ、ドローンなどなど、今やあらゆるところでH.264が使われています。 H.264は注目すべき技術のひとつです。たったひとつの目標、つまりフルモーションビデオの送信に要するネットワーク帯域を削減することを目指した30年以上の努力の結晶なのです。 技術的な面でも、H.264はとても興味深い規格です。この記事では、その一部について概要レベルでの知識を得られることでしょう。あまり複雑だと感じさせないようにするつもりです。今回おはなしする概念の多くは動画圧縮全般にあてはまるものであり、H.264に限ったものではありません

    H.264の秘密 | POSTD
    wdr_s
    wdr_s 2016/12/02
    基本的な解説としてわかりやすい。「H.264」固有の「秘密」はよくわかんないけど…
  • Chrome開発者ツールの小技集 | POSTD

    最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました(少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど)。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく

    Chrome開発者ツールの小技集 | POSTD
    wdr_s
    wdr_s 2015/11/04
    おお、これは知っとくべきだけど知らなかったことばかり。
  • 優秀なJavaScriptの開発者になるための5か条 | POSTD

    (注記:7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の

    優秀なJavaScriptの開発者になるための5か条 | POSTD
    wdr_s
    wdr_s 2015/07/14
    今度underscore.jsとbackbone.jsのコードを読んでみようっと。
  • ユーザ・インターフェースのためのイージングカーブをつくる | POSTD

    フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか? イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで

    ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
    wdr_s
    wdr_s 2015/06/27
    うごきの付け方、大切。
  • 分かりやすいWeb入力フォームのための十戒 | POSTD

    1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ

    分かりやすいWeb入力フォームのための十戒 | POSTD
    wdr_s
    wdr_s 2015/06/25
    スマホで指でタッチして操作しているということを、ボタンをデザインするときは意識してるけど、フォームになると抜けたり。ユーザーへの思いやり大事。
  • RESTのベストプラクティス | POSTD

    現在ではREST APIはとても一般的な話題です。ほとんどすべてのWebアプリケーションの一部分となっています。シンプルで一貫性があり実際的なインターフェースは必須です。これは皆さんのAPIを他の人が使うことをとても容易にします。皆さんにとってはRESTの実践が日常的に感じられるかもしれませんが、RESTをあまり尊重しない人々もよく見かけます。これがRESTについて投稿するきっかけでした。 この記事にはRESTfulなAPIを設計する時に考慮すべきベストプラクティスがあります。 注意 : ここでのベストプラクティスは、私が過去の経験に基づいて良いと考える事例です。もし違う考えをお持ちであれば、お気軽にメールをくだされば意見交換できると思います。 APIのバージョンを示す APIのバージョンは必須であるべきです。これがあると時間が経ってAPIが変わっても影響を受けません。その方法の1つはUR

    RESTのベストプラクティス | POSTD
    wdr_s
    wdr_s 2015/01/05
    複数形、か。
  • Angularチームは、どうかしちゃった? | POSTD

    私は 以前の投稿 で、Angularなどのフレームワークがあまり好きではない旨を述べました。宣言的なHTMLのタグや属性、{{二重波括弧}}のプログラミングを開発するということには、 どうも抜け落ちている部分がある ようです。そして、どのフレームワークも独自のやり方で開発されているため、それを理解しサポートするためには、ツールのアップデートに多大な労力を 浪費する 注ぐ 必要があります。 さらに、そんな先入観を抜きにして考えてみても、Angularの今後に関して最近入ってきた情報は、私がますます頭を抱えてしまうような内容だったのです…… ツールに新たに追加される概念は、1つではなく3つ! Angularをサポートするためにはツールのアップデートが必要ですが、今は下記を考慮していく必要があるようです。 Angular v1の構文 Angular v2の構文(従来と 大きく異なる ようです)

    Angularチームは、どうかしちゃった? | POSTD
    wdr_s
    wdr_s 2014/12/21
    このままAngularJSには首を突っ込まないことにした。(後はAngularなプロジェクトにアサインされないことを願う)
  • ある中級プログラマの告白 | POSTD

    私は中級レベルのプログラマです。 基を理解するのは得意です。過去の失敗をきちんと分析できるくらい経験を重ねていますし、もっと知るべきことは山ほどあることも分かっています。 特筆すべきは、自分で身につけるべきことを知ったうえで、それを吸収しようと積極的かつ精力的に取り組んでいる点でしょう。 プログラマとしての能力は平均的なものに過ぎないと、心から納得するまで時間がかかりました。今では、よく理解できないままに誰かの意見を受け売りする必要など感じていません。知らないことがあっても、それを他人に悟られるのは怖くありません。 でも以前は違いました。信じられないかもしれませんが、私はかつてプログラミングの達人だったのです。 自分の能力を誤って評価していたのは、比較的孤独な環境でスキルを学んだためでしょう。当時はコンピュータを持っていることさえ、ちょっと特別なことでした。使い方を知っているとなれば、な

    ある中級プログラマの告白 | POSTD
    wdr_s
    wdr_s 2014/06/24
    いろいろ共感できる部分もあり面白かった。学ぶ意欲を失わないために、常に新しい技術に挑戦したり、自分より優秀な人とつながっておくというのは必要だなぁと思う。
  • 1