お知らせ Qiitaに 使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 という記事を投稿しました。 使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」 この記事を書いた動機 RSpecはときどき「なんだか難しそう」と思われることが多いようです。 まあ確かに構文は独特なので、難しそうに見えるのは仕方ないかなーと思うところもあります。 ただ、僕自身はRSpecだけが特別難しいとは思わないですし、むしろその昔使っていたJUnitやNUnitに比べると「RSpecってすごく便利！！」って思うことの方が多いです。 というわけで、「なんだか難しそう」と思っている人の気持ちを、僕のように「すごく便利！！」へと変えたいなーと思ったのが、この記事を書いた動機です。 記事を書くに当たって意識したこと 記事を書くときには次のようなことを意識しました。

Let's face facts: media queries can be a pain. They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can use them to simplify your stylesheets. The Basics Let's take a look at a simple example. p { font-size: 16px; } @media (min-width: 768px) and (max-wi

Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images techniques are appearing to serve developers' needs. However, responsive design can seem like a minefiel

DevToolsと言えばこの前Advanced Debugging Techniques with Chromeという動画をご紹介していましたが、DevTools Tipsというブログはその内容を細切れに動画にしてくれている感じです。 DevToolsで編集しているソースとローカルで編集しているソースとで差分が出たときに、任意のバージョンに戻れる機能がある、なんて全然知らなかったです。。

SSL 3.0 の脆弱性 （POODLE） の件で、10月に下記の記事を書いたんですが、その中でも触れた、各主要ブラウザにおける SSL 3.0 無効化タイミングだけ、わかりやすいように抜き出してこちらにまとめておこうと思います。メモ代わり。 SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ Internet Explorer SSL 3.0 が無効になる時期： 正式な時期は不明だが、数ヶ月以内 米国時間の 2015年 4月 14日以降、デフォルトで無効に。 「マイクロソフト セキュリティ アドバイザリ 3009008」 内では、下記の通り、（10月 15日から起算して） 数ヶ月以内に IE の既存設定 （および同社のオンラインサービス） で SSL 3.0 が無効になる旨がアナウンスされています。 マイクロソフト

SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ SSL 3.0 に存在する脆弱性、通称 「POODLE」 に関連して、自分が管理している Web サーバ （Apache） の SSL 3.0 を無効にした際の設定方法と、各ブラウザごとに SSL 3.0 を無効にする方法などをまとめています。 2014年 10月 14日 に発表された「Secure Sockets Layer（SSL）」のバージョン 3.0 （SSL 3.0） に存在する脆弱性 （CVE-2014-3566）、通称 「POODLE （Padding Oracle On Downgraded Legacy Encryption）」 ですが、これに関連して、自分で管理している Web サーバ （Apache） の SSL 3.0 を無効にしました。 そ

PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で作成して見ることができるプラグイン、「Google Pagespeed Insights for WordPress」 を使ってみたので紹介。 Google Pagespeed Insights for WordPress ： WordPress Plugins プラグインのインストール プラグインのインストールは管理画面から 「Google Pagespeed」 などと検索すれば出てくると思いますので、そこから行います。 Pagespeed Insights API キーの取得 ただ、このプラグインを使用するには Google Pagespeed Insights の API キーが必要ですので、そちらを先に取得しておきましょう。 APIs Console に G

全国100万人のデプロイ・プロビジョニング自動化マニアのみなさんこんにちは！ AWSから新たにDeploy用のサービスAWS CodeDeployがリリースされたので早速試してみました。 これを使うと複数のサーバに同時にアプリケーションをリリースするのが簡単にできます。もうCapistranoとかでごちゃごちゃやる必要はない感じです!! 詳細を知りたい方は公式サイトのドキュメントを見てみるとよいです。 ただ、GUIでやるのも面白く無いので、awscliを使ってやっていきましょう!! EC2インスタンスの準備まず、us-west-2でEC2インスタンスを何台か起動しましょう。これがデプロイ先のサーバになります。 デプロイ先サーバの識別にはEC2インスタンスのタグを利用しますので、同時にデプロイする対象には、同じタグを設定します(EC2のタグのFilterと同じ挙動です)。ここでは起動したイン

先日、iOS 8に関する勉強会をヤフーで開催しました。 http://connpass.com/event/8629/ 台風の影響により日程変更となってしまったこのセミナーですが、当日は多くの方にご来場いただきました。 本勉強会で発表された全セッションのスライドを公開いたします！ 発表セッションまとめ 1.iOS 8 / Swift 概要 発表者：平松 亮介 導入のセッションとして、iOS 8 や Swift の概要を振り返りました。 あまり話題になってない API にも重要な変更が多くありますので、公式のAPI Diffをぜひチェックしてみてください！ 発表スライド

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Mobile App Introduction Template A basic template to showcase the best features of your app, enriched with a video slider for a better user understanding. A video is one of the most effective ways to introduce an app to an audience. Users often want to see how the app works before even deciding whether to download it or not. A screenshot could do the work, but with motion being a fundamental part

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

iOS 8 GUI PSD (iPhone 6) A Photoshop template of GUI elements found in the public release of iOS 8. HDownload PSD Updated October 14, 2014 License stuff: The sole purpose of this file is to help you pitch, design and build amazing software. The file nor its elements are to be repurposed as your own. It can’t be broken apart and used to create similar tools. Make good stuff The PSD is a well organi

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Upload your creations for people to see, favourite, and share.

A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips. Today we’d like to share some tooltip styles and effects with you. Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpe

GitHubではタスクやバグをIssuesで管理しています。便利だと思うのですが、Webブラウザ経由でチェックするのは意外と面倒です。さらに移動中などオフラインの時にチェックできないと不便に感じることでしょう。 そこで使ってみたいのがoffline-issuesです。その名の通り、オフラインでIssuesをチェックするためのソフトウェアです。 offline-issuesの使い方 インストールはnpmで簡単にできます。 $ npm install -g offline-issues 終わったらリポジトリを指定するだけです。 $ offline-issues jlord/offline-issues Your GitHub username: moongift Your GitHub password: ✔✔✔✔✔✔ Your GitHub OTP/2FA Code (optional):

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebサイトの特徴としては、一つのHTMLコード、JavaScript、スタイルシートで全てのデバイスに対して情報を配信します。その中でデバイスごとに情報を分ける訳ですが、その中にはあるデバイスにとっては不要な情報が紛れることも多々あります。 その結果パフォーマンスが落ちてしまうケースがある訳ですが、そのチェックを行えるのがRWDPerfです。 RWDPerfの使い方 RWDPerfのインストールはnpmで行えます。 $ npm install rwdperf -g その後、Chromeをサーバモードで立ち上げます。 $ sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remot

Rubyといったオブジェクト指向言語を学ぶと、メソッドの定義方法としてインスタンスメソッドとクラスメソッドという2通りの定義方法があることを学ぶと思います。しかし、言語自体のガイドブックには「定義方法にインスタンスメソッドとクラスメソッドがある」と書いてあるだけで、大抵その使い分けについては書かれていません。 そういう訳で、このエントリではその使い分けについて少し考えてみたいと思います。理論的に厳密な使い分けを目指すというよりは、そもそも使い分けの検討が全くつかない！という方に向けて、その指針の一助となることを目指します。 インスタンスメソッドとクラスメソッドとはそもそものところ、Rubyといった「オブジェクト指向の考え方」を実装した言語の機能です。その機能がなぜあるのか？というそもそものところは、オブジェクト指向の考え方にさかのぼることになります。 そこで、インスタンスメソッドとクラスメ

10up Engineering Best Practicesの「Efficient Database Queries(効率的なデータベースクエリー)」を訳してみた。おかしなところ、より良い訳、誤字脱字がありましたらお知らせいただきたく候。 なお、この訳文のライセンスは原文と同じくMITです。 ※冒頭の「パフォーマンス」の部分を追加で訳しました。さんきゅー、ヒッシー! パフォーマンス 効率の良いコードを書くのは、特にエンタープライズのレベルでは、極めて重要です。高トラフィックな状況用に確実にコードを最適化するため、私たちが採用しなければならない方略やベストプラクティスは多くあります。 効率的なデータベースクエリー WordPressでクエリーを行う場合、通常はWP_Query オブジェクトを使うべきです。WP_Query オブジェクトは多くの有用な引き数を取り、get_posts()などの

はじめに 皆様、Amazon SNS は活用されていますでしょうか？弊社でもモバイルアプリの開発案件において、プッシュ通知機能は要件として挙げられることが多く、実際に数多くのアプリで SNS を用いたプッシュ通知機能を開発してきました。もはやモバイルアプリに必須の機能！と言えるでしょう。 SNS のメリットの1つは各プラットフォーム向けに提供されているモバイルトークンの管理を代わりに行ってくれるという点です。各プラットフォーム向けに自力で管理すると大変面倒な管理が、SNS を使うだけで非常に楽に管理することができます。 そのまま SNS に頼るだけでも大変便利なのですが、最新の登録情報を維持し続けるために行っておいたほうが良い、推奨されるアプローチがあります。 このブログでは SNS のモバイルトークンの管理のノウハウについてまとめられているこちらの記事をベースに、モバイルトークン管理のベ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Linux/Unixを使っている方で、カレンダーが見たいと思ったらcalコマンドを使うでしょう。曜日、日付を確認する程度であれば十分かも知れませんが、日本で使っているのであれば日本のカレンダーが見たいと思うはずです。 そこで使って欲しいのがjcalです。日本の祝祭日をサポートしたカレンダーコマンドになります。 jcalの使い方 コマンドの使い方は次のようになります。 Usage: jcal [options] [yyyy|mm] [yyyy|mm] [yyyy|mm] -y[NUM] List NUM years.(0-10) -m[NUM] Show NUM months.(0-12) Example: jcal # Show monthly calendar of this m

Webアプリケーションを開発する際に厄介なのがUIです。標準では提供されないコンポーネントはもちろんのこと、ちょっとしたエフェクトやアニメーションを作ろうと思うと非常に面倒なことになります。 よりWebアプリケーションを手軽に開発するためにMozillaが開発しているのがMozilla Brickです。多彩なUIコンポーネントで開発を手助けしてくれます。 Mozilla Brickの使い方 Mozilla Brickでは再利用の容易なUIコンポーネントを多数提供しています。これらを組み合わせることでWebアプリケーション開発がスムーズになることでしょう。デザイン全般を提供する訳ではないので、他のフレームワークと組み合わせて使うのが良さそうです。 Mozilla BrickはHTML5/JavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 Mozi

Excel-Writer-XLSX はPerl製のソフトウェアです。ブックやワークシートの生成、印刷設定、書式設定等、Excelで行う作業をコーディングで行うことができます。例えば、 定期的に定型の様式で Excel を用いて資料を作成している。 データベースから検索結果を得て、Excelで資料を作成している。 な感じにExcelを利用して手作業で資料を作成している方々に便利です。 Excelには数式やマクロといった便利な機能がありますが、このソフトウェアを利用することで自動的に資料を作成できるようになります。業務システムの帳票を電子化する場合にも役立つでしょう。 以下はコーディングの例です。 use Excel::Writer::XLSX; # Create a new Excel workbook my $workbook = Excel::Writer::XLSX->new( 'pe

Midnight.js lets you switch fixed headers on the fly Scroll to try it out! The Header Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed. The Sections After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where .your-class is the class you

開発環境と運用環境の差異 Railsアプリの開発をMacでしている人は多いと思います。しかし本番では大抵Linuxマシンで運用するため、実行環境の違いから問題が発生することがあります。特にサードパーティ製ライブラリやツールを使う場合、MacとLinuxで同じ動作をする保証はどこにもありません。また、開発にLinuxマシンを使っていたとしても、本番と全く同じ構成で開発するのは難しいでしょう。 Dockerを使うと開発から運用まで同じ環境を使え、しかもハードウェア仮想化よりも遥かに軽量です。そこで、私が今KRAYで担当しているプロジェクトでは開発から本番まで全ての環境でDockerを使えるようにしました。 それぞれの環境で解決すべき課題がありましたが、今日は本番環境にデプロイする仕組みを紹介します（KRAYでインテグレーション環境と呼ばれる環境についてはDockerホストをプロジェクトや権限で

Take Grunt to the Next Level — Jonathan Suh この記事を見て知ったのだが、jit-grunt というプラグインが中々よい。Just In Time ということで、タスクのロードを loadNpmTasks でまとめて最初にやる代わりに、各タスクの実行時までロードを遅延させるというもの。 npm の jit-grunt ページを見ると相当数がダウンロードされて利用者がいるようだが、検索するとあまり紹介されてないようだったので書いてみる。 効能 17個のタスクをロードしていた手元の環境に導入したところ、単純なタスクを実行した限りでは次のような実行時間の短縮が見られた。計測は例によって time-grunt だ。 Before loading tasks で 625ms かかっていて、全体では 651ms を要した。 % grunt concat:lib

基本的にExcel::Writer::XLSX使うときは my $workbook = Excel::Writer::XLSX->new('yabai.xlsx'); my $worksheet = $workbook->add_worksheet(); ... みたいな感じで使うと思うんですが，素朴にこれでやっていこうとするとExcelの行数が増えた時にメモリをバカ食いしてしまって，最悪の場合死に至ります．実際さっき死んだ． そこでどうするかというと，set_optimization()というメソッドをadd_worksheet()する前に呼んでやると良いです． my $workbook = Excel::Writer::XLSX->new('yabai.xlsx'); $workbook->set_optimization(); my $worksheet = $workbook->a

はじめに 前までは、どちらかというとAPIよりの開発をすることが多く、あんまりフロントエンドのことを気にかけることがあまりなかった。とはいえ、それを知らないのもアレだろうと思ったので、yeomanを使ってみることにした。 とはいえ、何かを作るにしても、「何を作りたいか」という題材が必要かな、と思ったので、そういえば昔にjquery-kabukiというのを作ったときに、やたらと文字をピカピカさせる部分だけ流用されていた。 文字列を気軽にピカピカさせることには本当に一部の需要があるらしく、エコシステムの勉強がてら、その辺について調べることにした。ちなみに、最終的に出来たのは、下のものになる。 esehara/jquery-pikapika · GitHub yeomanについて いわゆる「フロントエンドの雛形全般を作るためのツール」といったほうがいいかもしれない。yeomanのgithub p

DBのスキーマ、皆様どのように管理されているでしょうか。 Railsを利用されている方の多くは、ActiveRecordのマイグレーションを利用して管理をされているかと思います。 私もいままでいくつかのRailsプロジェクトに関わってきましたが、 ほぼ全てのプロジェクトでActiveRecordのDBマイグレーションを利用してきました。 (一部のプロジェクトはActiveRecordを使っていないため、マイグレーションも独自のものを利用しています) ActiveRecordのマイグレーションでは、DBスキーマ変更の差分情報をマイグレーションスクリプトとして保存しておきます。例えば、新しいテーブル「users」を作成する場合は、下記のようなマイグレーションスクリプトを作成します。 class AddUsers < ActiveRecord::Migration def up # ここにマイグ

最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても

第一回Apache Cordova勉強会で「Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜」という題で発表しました 第一回Apache Cordova勉強会にて、「Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜」という題で発表しました。Cordovaでアプリを開発する上で、開発プロセスの中で留意する点についておおまかに説明しています。発表資料は以下になります。 自分以外の発表では、次のようなものがありました。 ・Cordovaの最近ホットな話題と地雷をまとめて紹介 ・Cordovaで業務アプリを作る 〜その事例とノウハウ〜 勉強会に参加された皆さんお疲れ様でした。Apache Cordova勉強会は、毎月行われる予定です。12月2日に行われる第二回Cordova勉強会の募集もすでにdoorkeeperのイベントペー

JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも

Jenkinsのジョブ定義にGitHubのAccessTokenを直接書きたくないときに使えるプラグインがあったのでメモしておきます。 Mask Passwords Plugin 使い方 プラグインをインストールすると、各ジョブ設定のビルド環境にMask passwords (and enable global passwords)という項目が追加されます。 NameとPasswordの組み合わせを追加すると、ビルドスクリプトのなかで${Name}として利用することができます。 AccessTokenを使う 前回のエントリの例だと access_tokenという名前でトークンを保存して、シェル内で以下のように使えます。 curl -X POST -H "Authorization: token ${access_token}" \ https://api.github.com/repos/

Jenkinsのジョブ結果をプルリクエストに表示するときはGitHub pull request builder pluginを使ってますが、単体のジョブでしか利用できなかったので、複数ジョブ（ビルドパイプライン構成）のときに結果を表示する方法をまとめておきます。 ビルドパイプラインの構成 今回のビルドパイプラインはこんな感じを想定しています。 プルリクエストへの更新やコメントをトリガーにジョブが起動し、単体テスト、回帰テストを実行します。 あわせて、実行中、失敗、成功の状態がプルリクエストに表示されます。 成功したらプルリクエストに ╭( ･ㅂ･)و ̑̑ ｸﾞｯ ! って出ます。ｸﾞｯ ! って。 これを満たす以下のジョブをつくっていきます。 ジョブの結果をプルリクエストに表示する 複数のジョブをビルドパイプラインとして実行する GitHub pull request builder

wwwなしドメインをGitHub Pagesで運営しようとAレコードを使って設定すると、全てのリクエストが302 Foundで処理されるようになる。特に実用上の問題はないが、パフォーマンス上のデメリットは大きい。www付きで運営するのが手っ取り早いが、wwwなしでどうしても運営したい場合はCloudflare経由にするのがコストが低い解決法だろう。 CloudflareにはCNAME Flatteningという機能があって、これによりCNAMEレコードを使ってwwwなしドメインを設定できるようになっている。これを使って設定すると302 Foundによるリダイレクト経由になることを回避することができる。設定は特に(GitHub Pagesを使おうというような人には)難しいことはない。 GitHub Pages側が提供するwwwあり→wwwなしへの301 Moved Permanentlyによ

こんにちは、ヒカルよ。Webの記事を読むときはタイトルとURLとシェア数見てから読むタイプです。 こないだね、とあるローンチされたばっかりの話題のメディアを見に行ったらば、サイトトップページの Facebook いいね数がたったの「2」だったのよ。 「このメディアは Facebook で多くの人達が話題にしていたのに、どういうこと？」 とサイトの URL を見てみたら、気になる点が。 http://www.example.com/?hogehogetag=1 んんん？この ?hogehogetag=1 って何かしら？ この謎なパラメータを削除して、 http://www.example.com/ だけの URL にしてアクセスしてみたの。 そしたら、3ケタのいいね数が表示されました。 つまり、同じページなのに URL が違うばっかりに、別のページと見なされてシェアが分かれてしまっているとい

JavaScriptの文字列中では\xという特殊文字が利用できます．ドキュメントによると， \xXX 00 から FF までの 2 桁の 16 進数 XX で指定された、Latin-1 エンコーディングの文字。例えば、\xA9 は著作権記号を示します。 とのことで，まあここに書いてある通りの動作をします． 例: "\xa9"; // => "©" ところでこの\xは文字列連結等では利用できない，つまり "\x" + "a9"; // => ERROR! という風には使えないわけです．そりゃそうだ． どっこい変数の中身を\xに適用したい時などに困るわけですね． そういう時は以下のようにすることで代用が可能です． var charCode = "0x" + "a9"; // <= これは文字列 String.fromCharCode(parseInt(charCode, 16)); 0xから始

var indentation = " "; JSON.stringify(JSON.parse('{"foo": [1, 2], "bar": {"buz": "quz"}}'), null, indentation); みたいに書くと， { "foo": [ 1, 2 ], "bar": { "buz": "quz" } } という風な整形された文字列が返って来て便利だった

Normalize.cssがv3.0.2に更新されていたので、Modularized Normalize.scssも更新した。変更点はmenu要素の追加とIE10でのa要素の背景削除がbackground-colorプロパティーのみに変わったことで、大きな変化はない。で、追随したv3.0.2をリリース後、テストを少し書き換えた。 Modularized Normalize.scssのテストは以下のような単純なものになっている。 最新版のNormalize.cssのリリース・ファイルをダウンロード Sassを使ってリポジトリーからビルド 両者を圧縮 文字列として比較 これでオリジナルのリリース・ファイルとSassでビルドしたものがCSSとして一致するかを確認している。完全なものではないけど、きちんと動作するものをビルド可能かどうかは確認できる。 しかし、今までは圧縮する時にいわゆるバナー・コ

SCSS Lintでは**/*.scssなどといった指定でカレント・ディレクトリー以下のSCSSファイルを一気にチェックできる。けどBowerでインストールしたSassパーシャルなどは通らないことが多いので、bower_componentsディレクトリーは無視する方が効率が良い。その場合は設定ファイルでexcludeを使う。 exclude: - '**/bower_components/**' - '**/node_modules/**' npmでインストールすることも間々あると思うので、ついでに無視しておくと良さそう。ドット・ディレクトリーは無視されないと思うけど、.sass-cacheには*.scssはないのであまり必要ない気がする。 グローバル的に動作するであろう~/.scss-lint.yamlに書いておくと更に楽。 JSONを書かされる毎日だと、YAMLの書きやすさが心地良い。

ビューポートが16:9以上かどうかの判定にaspect-ratioを使って行おうとしていた。が、min-aspect-ratio: 16/9でうまく動かず、もしや未実装かとあーでもないこーでもないと色々やってたら、単にmax-aspect-ratioでやるべきなだけだった。 Demo: Detect viewport ratio is 16:9+ or not aspect-ratio特性では<ratio>という種類の値で指定する。この<ratio>は正の整数/正の整数でしか書くことができない。しかし、min-かmax-プリフィックスをつける場合、比率として少数化した値で扱われる。そのため16:9より縦の比率が大きい16:10や16:12にマッチさせたい場合は、max-プリフィックスを使う必要がある。 aspect-ratio特性を使ったメディア・クエリーの式は縦幅を分母とした分数で記述し

最近のClean CSSには@importで参照しているCSSを読み込んでインライン展開する機能がある。この機能を使うとGitやBowerを使ってNormalize.cssやTwitter Bootstrapをローカルにダウンロードし(、リネームし)ておいて……などとしなくて済むので、CSSライブラリーの管理の手間がだいぶ減る。 デフォルトで有効になっているので、普通に書くだけで展開される。 @import url('http://necolas.github.io/normalize.css/latest/normalize.css'); は、 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{... と展開され、更に圧縮される。Normalize.cssのように最新版を参照するURLが用意されていれば、バー

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert