I’m Adam 👋 Developer, Designer & Maker. Founder of Unicorn Club. Design Lead at Spiffy. Find me on Twitter. Unicorn Club The newsletter for design-savvy front-end devs or code-loving designers 🦄 The weekly newsletter goes out to 1,800+ readers.
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 新しいサービスを立ち上げるときにはドメイン名を調べますよね。多くのドメインは取られてしまっているので、色々なキーワードを使って調べることになると思います。 domain-cliはそんなドメインを調べる作業を簡素化できるCLIコマンドです。 domain-cliの使い方 domain-cliは引数ではなく、対話的にドメインを調べられます。以下は yahoo.com で調べた場合です。 $ domain-cli ██████╗ ██████╗ ███╗ ███╗ █████╗ ██╗ ███╗ ██╗ ██████╗ ██╗ ██╗ ██╔══██╗ ██╔═══██╗ ████╗ ████║ ██╔══██╗ ██║ ████╗ ██║ ██╔════╝ ██║ ██║ ██║ ██
Aspect Ratio – Calculator and device resolutions reference for designers and developers. Calculate Aspect Ratio This site uses the calculate-aspect-ratio NPM module that calculates the aspect ratio with the provided width and height. import calculateAspectRatio from 'calculate-aspect-ratio'; const aspectRatio = calculateAspectRatio(1920, 1080); // '16:9' In addition to being able to use it in your
ネットサーフィンをしていると、必ずと言っていいほど出会ってしまう「怪しげなリンク」。クリックすると目的の情報にアクセスできそうですが、フィッシングサイト(詐欺サイト)にアクセスしてしまったり、マルウェアやウイルスに感染してしまうリスクがあります。また、セキュリティソフトが入っていれば、必ずしも大丈夫ということではなく、ソフトによっては検知の精度もバラバラで、知らないうちに被害を受けているなんてことも。無料でインターネットのURLやファイルを検査してくれるウェブサービス「VirusTotal」を使えば、60以上のウイルス対策ソフトやセキュリティソフトで一度に検査してくれますが、怪しいリンクに遭遇する都度、アクセスするのは手間でしかありません。そこで、簡単な操作で怪しいリンクを「VirusTotal」でチェックできる、Chrome用アドオン「VTchromizer」を使ってみました。 VTch
「VirusTotal」はファイルをアップロードするだけで60種類以上のアンチウイルスソフトでまとめてスキャンしてくれるサービスです。無料で利用でき、登録なども一切不要で使える便利なサービスということで、実際に使用してみました。 VirusTotal - ウイルス、マルウェア、URL の無料オンライン スキャナー https://www.virustotal.com/ja/ トップページにいきなりファイルをアップロードでき、64MBまでのファイルをスキャン可能です。「ファイルを選択」をクリックして…… ウイルスかどうかチェックしたいファイルを選択し、「開く」をクリック。ただし、ウイルスチェックのためにアップロードしたファイルはセキュリティベンダーなどに公開されてしまうため、機密情報を含むファイルには使用できません。 ページ下部の「スキャンする」をクリックします。 すると「分析済みのファイル
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの表示速度が遅くて良い理由はありません。ユーザ体験はもちろん、Eコマースサイトなどでは売り上げに直結するほどです。Googleも表示速度を検索順位の指標に組み込んでおり、その指摘を行ってくれるサービスとしてPageSpeed Insightsを提供しています。 しかしこのPageSpeed Insightsは外部に公開した後でしか使えません。そこで開発中でも使えるようにするのがpsi-localです。 psi-localの使い方 psi-localを使ったテストスクリプトです。JSONオブジェクトが次のように返ってきます。 $ node test.js { kind: 'pagespeedonline#result', id: 'https://a335d185.ngr
PCを長く使っているとあちこちに謎のファイルが散乱して保存されていき、各ドライブの容量が切迫してくるものですが、「一体どこにどれぐらいのサイズのファイルがあるのか」というのはなかなかわかりません。しかし各フォルダーのファイルサイズを視覚化して丸わかりにするグラフを自動で描いて可視化してくれるフリーソフト「HDGraph」を使えば、サクっとゴミファイル整理ができるようになります。 HDGraph website : welcome ! http://www.hdgraph.com/ HDGraphをダウンロードするには、トップページの右端にある「Download」をクリック。 ダウンロードボタンをクリック。 ダウンロードされたZIPファイルを解凍します。 展開されたファイル内にある「HDGraph.exe」をクリック すぐさまソフトが開きます。ドライブを丸ごと解析するには、ウインドウ上部に表
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する(カスタムCSSプロパティ) 「filter: invert();」で要素のカラーを反転する C
Advanced usageFor advanced options please consider adding UnCSS to your devstack - Gulp, Grunt, PostCSS. What is this good for?Do you have static 404 or 500 page, bundled styles for the whole site and you need only couple of CSS for these static pages to work? Well, here you have the tool for that. You're welcome.
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
インターネットを利用するのにWi-Fi環境は欠かせませんが、電波は目には見えないので意外な場所でネットワークにつながりにくくイライラすることがあります。そんな目に見えないWi-Fi環境を、IO-DATAのアプリ「Wi-Fiミレル」を使えば、電波強度をスコアで表示したり、ヒートマップで部屋全体の状況を確認したり、他の電波との干渉具合を調べたりして、一目瞭然に「見える化」できます。 Wi-Fiミレル | ネットワーク関連 | IODATA アイ・オー・データ機器 http://www.iodata.jp/product/app/network/wifimireru/ Wi-Fiミレル - Google Play の Android アプリ https://play.google.com/store/apps/details?id=jp.iodata.wififinder Wi-Fiミレルを A
Webページが世界各地のブラウザでどのように見えているか、位置情報を使ったコンテンツのローカライズ、コンテンツが国によってフィルタで妨げられていないかなどを確認できる無料オンラインツールを紹介します。 対応都市の一覧 ワールドワイド ローケーション 世界各地65ヵ所以上のデータセンターに対応。 結果はすぐに サーバーのクラスタはキューを使わずに、直ちにスクリーンショットを生成。 Webkitエンジン レンダリングには、WebFonts/CSS3をサポートしたWebkitエンジンを使用。 マルチデバイス 多数の異なる解像度のデバイスをサポート。 ローカライズ HTTPヘッダーに含まれる言語指定、多言語フォントのサポート。 API スクリーンショットを処理するバッチのAPIを提供。 単に世界各地でどのように見えるかだけでなく、Geo Location(位置情報)を使ったサイトの確認にも役立ちま
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアクセシビリティに注目が集まっています。Webは多くの人たちが使うようになっており、健常者にだけ合わせて情報を発信すれば良いだけでなくなっています。また、幅広い層に提供することによって、新しい価値を生み出せる可能性もあるでしょう。 今回はWebアクセシビリティをチェックするツールとしてChromeLensを紹介します。Google ChromeのDevTools内で動くソフトウェアです。 ChromeLensの使い方 立ち上げたところです。DevToolsのタブとしてChromeLensが追加されます。 視力が少し弱い人が見る状況を再現。 さらに視力が弱い人の場合。 緑の認識が弱い人の視界を再現した例。 青を認識できない場合。文字によっては見づらそうです。 アクセシビリティチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く