サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
レイングッズ
frasco.io
HTML と CSS だけで Todo アプリを作りました。TodoMVC(今回デザインを使用使わせてもらいました)と違って JavaScript は使っておらず、すべてのインタラクションが CSS で動いています。 どういう仕組みなのでしょう?簡単に説明すると、HTML、CSS の一般兄弟セレクタ(~)、CSS カウンタ、それから :checked 、:target、:required 疑似セレクタを組み合わせてできています。詳細についてはこれから説明していきます。 アプリを試してみる ソースを見る できること: Todo の追加(最大50件) Todo の完了 Todo の削除 フィルタリング(完了・未完了) 残りのアイテム数をカウントする 空文字の追加を許可しない できないこと: ページリロード後の永続性の維持 「すべての Todo を完了にする(Mark all as done)」
Git での開発を数年間経験した後、徐々に日々の仕事の一部として、より高度な Git コマンドを使うようになりました。私は Git rebase を見つけてすぐにそれを毎日の仕事に使いました。リベースに精通している人は、どれだけ強力で魅力的なツールであるのか知っているでしょう。しかし、リベースには、初めてリベースを触ったときにはわからなかったのですが、いくつかの課題があることに気が付きました。これを説明する前に、マージとリベースの違いをおさらいしておきましょう。 最初に、feature ブランチを master にマージする例を考えてみましょう。マージすることにより、新しいマージコミット g を作成します。下のコミットグラフではマージした際に何が起こるのかを説明しています。また、開発が盛んなリポジトリでよく見かける「線路」のようなグラフになっているのが見て取れるでしょう。 マージの例 ある
最近 Golang を使っています。開発中、私は go build と go test を繰り返し手入力で実行するのに慣れてしまいました。これはついついやってしまう、私の悪い癖でした。引数がないようなシンプルなコマンドであれば、それほど辛くありません。しかし、タスクが複雑になってくれば、当然苦痛になってきます。逃げ道となりえる選択肢はほとんどありません。bash スクリプトは、あなたの仕事の役に立つでしょう。しかし、私としては makefile が役に立つと言いたいです。make ツールはこういった理由から生まれたものであり、 makefile には普段行う作業をまとめておくことができるからです。私は make の教祖になって、うまい書き方を教えたりすることはできませんが、今回の記事では、私のプロジェクトでよく使っている makefile をまとめておきました。では、やってみましょう。 #
Web の仕事を始めて10年になりました。特別な教育は受けず(学校をサボっていたわけではなく、単にラッキーだっただけです)、フロントエンドの開発も行う .NET 開発者として仕事を始めました。しばらくした後、自分が本当に好きなのはユーザインタラクションだということに気づきました。また、画面上にモノを配置することやアクセシビリティの問題を解決することも好きでした。私にはバックエンドの業務が不向きで、フロントエンドのプロジェクトを終えたとき、バックエンドの業務を行わなければならないことが非常に苦痛でした。 そんな時、同僚(Pascal Vree)がこのようなことを私に言ったのです。 Fronteers Conference に行くべきだ。ホームにいるような気分になれるから。 そういったこともあり、私はそのカンファレンスに行ってみることにしました。そして、フロントエンドしか好きでないのは自分だけ
CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね?そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element(アンダースコアが2つ)、そして最後に Modifier が続きます(ダッシュが2つ)。 画像1:BEM で命名されたコンポーネントの例 Block(ブロック) Block は、独立しており再
先日、世界中の開発者たちの間に衝撃的なニュースが走りました。Facebook が自社開発している複数のライブラリに関するライセンスを変更したというのです。BSD-3+patents から MIT License への変更です。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 一見するとよいことのように思えるのですが、これは一体何を意味するのでしょうか?また、オープンソースライセンスの違いとは一体何なのでしょうか? この記事では、広く普及しているライセンスについて説明します。また、GitHub のオープンソースプロジェクトにそれらを適用する方法についてもご教授したいと思います。 許
私は約7年間、PHP でプログラミングをしてきました。その間に、私が発見したもの。それはフレームワークとライブラリ(コンテンツ管理プラットフォーム周辺のエコシステムなど)、そして、PHP を選んだプログラマーたちの巨大コミュニティです。私と同じツールを使っているにせよ、いないにせよ、プログラマーたちの多くは、本当の友人になりました。私が参加したカンファレンスでの基調講演の多くから判断するに、私たちはお互いに助け合い、学び、成長し、より良いソフトウェアを構築し、キャリアにおいて次のステップを踏み出すときには、一丸となってお互いをサポートしてきたと思います。そう信じているのは、私だけではないでしょう。 言語としての PHP は、「まっとう」なプログラマーたちに、皮肉を言われ、馬鹿にされ、過小評価され、批判され、嘲笑されて、最低の極みともいえるような評価を受けてきました。そのプログラマーたちは、
私は以前の仕事で Docker を使っており、今の会社(eralabs.io)でも顧客のために使っています。そして、これまでの経験により得た Docker の知識を皆さんにシェアしたいと思い、Painless Docker Course を始めました。 私は Docker、コンテナ、オーケストレーション、分散システムが好きです。そして、Painless Docker の多くの読者がその内容に満足していることは嬉しいことでした。 Painless Docker はただの本ではなくコースとなりました。詳しくは、ウェブサイトをご覧ください。 ここで紹介しているのは、 Painless Docker Course の中身の一部です。Git repo でも公開していますので、ぜひご覧ください。 このチートシートは、Painless Docker Course にあるものの一部です。 GitHub の
開発者の間で最も多い問題の一つはネーミングです。どのような名前にしようかと考えるのに何時間費やしたか、また、望ましくない名前を含むコードを理解するのに何時間費やしたか、数え切れません。オブジェクト名、メソッド名、クラス名、その他なんであろうが、そんなことは関係ありません。コードを書くよりも、コードを読む方に時間を費やしているということは証明されているので、良いネーミングをするということは、将来的に応えてくれるということなのです。 好ましい名前を使うことにより、あなたのコードはより良く、また、より簡潔なものとなります。良い名前をつけることで、コードのそれぞれの役割を直観的に識別しやすくなります。そして、将来、あなた自身が読むときと同様に、他の開発者があなたのアプリケーションを読むことを容易にしてくれます。 次の数分で、良いネーミングの重要性を説明し、良い名前を思いつくための有益なコツをシェア
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
Web サイトを開発する際のアーキテクチャ設計において、ユーザーの認証にはメールとパスワードを利用するのが一般的でしょう。この設計は身に染み付いていて、なぜユーザーにパスワードを作成させるのか、考えもしないかもしれません。私たちは慣れてしまったのです。 しかし、ユーザーはパスワードを必要としない可能性があります。 一つの解決策は OAuth 2.0 ですが、すべてのユーザーがSNSのアカウントを持っているわけでもなく、あなたのサイトでそのアカウントを使用したいと考えているとも限りません。 では、あなたはどのようにしてパスワードを使わずユーザーを認証しますか?その回答はこの記事を読めばわかります。 何が問題か? 最も安全なパスワードは、あなたが覚えられないパスワードです Troy Hunt そもそもパスワードそれ自体に問題があります。あなたや、あなたのユーザーにとっても良いものではありません
開発者として、私たちは生産性を妨げる様々な問題をよく知っています。しかし、広い視野で物事を見ることに関して見過ごしがちです。 認知バイアスにより、生産性の低下、バグ、フラストレーションを招く可能性があります。これらの影響を最小限に抑えることができれば理想的です。本記事では、プログラミングする際に知っておくべき5つの認知バイアスを示します。 双曲割引(Hyperbolic Discounting) 後の利益よりも直近の利益を優先する あなたはテストを書くのを遅らせたことがありますか?Vim を使う際、矢印キーを使ってカーソルを移動させたことがありますか?おめでとうございます、それが双曲割引です。HJKL による慣れない操作を覚えるよりも、矢印キーを使用するほうが楽でいいでしょう。しかし、一度 HJKL による移動方法を学ぶと、将来の利益は遥かに高くなります。結果として、あなたは多くの時間を節
背景 本記事では、Rob Pike 氏と Dave Cheney 氏により記述された「Functional Option Pattern」の拡張について説明したいと思います。このパターンに慣れていない人は、まず彼らの記事を読むことをおすすめします。 問題 このパターンの限界を見るために、etcd v3 client について考えてみます。特に、key-value の値を取得したり登録したりするための API である KV インターフェースに着目してください。例えば、Get の API はこのような形です: Get(ctx context.Context, key string, opts ...OpOption) (*GetResponse, error) ここで、opts は functional options のリストです。この API を呼び出すには、以下のように書きます: res
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
もしあなたが冒険好きな人なら(そして起こるかもしれない再起動に対処できる人なら)、この小さなリポジトリをクローンしてください: $ git clone https://github.com/Katee/git-bomb.git クローンできましたか?あなたのマシンが相当なメモリ(RAM とストレージ合わせて)を積んでいない限り、git が殺されたか、メモリ不足になったか、再起動しなければならなかったと思います。なぜでしょう?これは、たった12個のオブジェクトで構成されたリポジトリです。 どのようにして、この小さなリポジトリがメモリ不足を起こすのでしょうか?その秘密は、git が行う blobs(ファイルを保存しておくもの)の de-duplication(重複排除)です。これは、リポジトリを小さく、そしてコミット間でファイルが変更されていない場合に同じ blob を使うようにするためのもの
新しい言語に移行するのは常に大きな決断です。その言語をよく知る人がチームメンバーに1人しかいない時などは特にそうです。今年の初め、我々は Stream の主要言語を Python から Go に切り替えました。この記事では、なぜ私達が Python から Go に移行しようと決断したのか、その理由を説明します。 Go を使う理由 理由1 - パフォーマンス Go は速いです! Go は極端に速い。そのパフォーマンスは Java もしくは C++ に匹敵します。私達のユースケースでは、Go は Python より30倍速いです。Go と Java を比較したベンチマークはこちらです。 理由2 - 言語パフォーマンスの問題 多くのアプリケーションにとって、プログラミング言語は、単にアプリとデータベースを繋ぐものにすぎません。言語そのもののパフォーマンスは通常あまり重要ではありません。 しかしな
iOS SDK がアナウンスされてから数年間、アプリ開発ゴールドラッシュの恩恵を得ようと、開発者たちは Objective-C の世界に群がっていました。しかしその時代は去りました。Swift が我々の前に現れて3年以上、それは古い同種の言語を主役の座から押しやりました。 Objective-C - かつてはアプリ開発の世界で人気急上昇のスター的存在でしたが - は、Apple の開発環境の中では2級の扱いになっていきました。そうです、それは時おり WWDC にて1枚か2枚のスライドに引っ張り出されることはあるかもしれませんが、カンファレンスの大部分は Swift に関してです。Apple は Swift の教育を推進しており、主要な言語の機能はまず Swift に対応するようになっています。 しかし、まだ Objective-C を使ってるなら、あなたは一人ではありません。たくさんの開発
これまでWebアプリのクエリパフォーマンスを最適化してきましたが、それでもクエリ時間が15秒以上のランダムなスパイクが発生していました。そこでデータベースクエリのチューニングを始めました。まず、インデックス および Rack Mini Profiler を使用してホームページを高速化。それから高負荷なクエリを追跡して除去しました。 その結果、平均応答時間は約50ms、perc95は1秒未満と大幅に改善させることができました。しかし、まだ厄介な問題が残っていました。24時間のうちに、perc95の応答時間は15秒または30秒になり、短時間のタイムアウトが始まるのです。この記事では、これらの問題箇所を見つけて解決し、データベース負荷を80%削減させた方法を紹介します。 スパイクが発生したときの、ダッシュボード画面はこのようになります。 この一連のリクエストが非常に遅い理由を調べるために、メトリ
われわれの目はとても奇妙な器官であり、ときどきわれわれ自身に嘘をつきます。ヒトの視知覚の特性を知っていれば、より親しみやすく、よりすっきりとしたデザインの作成が可能となるでしょう。視覚トリックを活用し、読みやすくてバランスのとれたフォントを制作するタイプフェイスデザイナーだけでなく、ユーザーマシンを作るインターフェースデザイナーにとっても役に立つ知識です。 1.整然としたビジュアルサイズ どちらが大きいでしょうか?:400ピクセル四方の正方形でしょうか?それとも400ピクセル四方の円でしょうか?幾何学的に言えば、どちらも幅と高さはまったく同じです。では、下図をご覧ください。われわれの目は、正方形の方が円より重い(大きい)と瞬時に捉えてしまうのです。余談ですが、ビジュアル効果を言い表す際には、重さに関係した単語の方が適切です。 この図形が正しく描かれていると信じられない方たちのために、ガイド
我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での最初のパターンライブラリ開発について、そしてなぜ我々が Atomic Design を使うことになったのかについて著しました。 全般的に、Atomic Design は我々のチーム内でうまく機能しています。それはインターフェイスの理解の共有や、さらなるモジュール化への移行、我々のデザイン言語の進化などに貢献しました。 Atomic Design におけるいくつかのコンセプトについては最初から明確でしたが、その他はあいまいに感じていました。例えば、我々の理解がまだ不十分な分野は、molecules と organisms の違いについてです。 Brad Frost は、molecu
Frasco は、海外で話題の記事を翻訳して届けるエンジニアのためのメディアです。 Categoryフロントエンドバックエンドデザインインフラソフトウェア開発ネイティブアプリセキュリティデータベースプログラミングFrascoAbout usキュレーション利用規約プライバシー翻訳リクエストお問い合わせ
このページを最初にブックマークしてみませんか?
『Frasco - 海外で話題の記事を届けるエンジニアのためのメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く