タグ

ブックマーク / coliss.com (6)

  • CSSの進化がすごすぎる!新しいレスポンシブデザインの実装方法を解説

    現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり(無くしたり)、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス

    CSSの進化がすごすぎる!新しいレスポンシブデザインの実装方法を解説
    aroechan
    aroechan 2021/05/27
    #普及したら読む / 環境依存性の高いものはこうならざるを得ないよ
  • レスポンシブの確認がこれで快適に!複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App

    レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに命とも言える無料ツールの登場です! Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです! Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ

    レスポンシブの確認がこれで快適に!複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
  • 2019年になってもまだjQueryを使用している理由

    現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例

    2019年になってもまだjQueryを使用している理由
    aroechan
    aroechan 2019/06/06
    “この記事の目的は普通のJavaScriptとjQueryを比較することであり、フロントエンド開発の統一理論を提案することではありません。”みんなが知りたいのはそこなんだよな。そりゃ誰でも生のJSとjQueryだったらjQueryだろ
  • ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs

    フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします(yarn global add codecrumbs)。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト

    ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs
    aroechan
    aroechan 2019/02/25
    今のクライアントからもらってるクソみたいなコードをこれにかけて、どれだけクライアントがゴミを作っているかの証明をさせたい/C#をお願いします
  • 便利なのが登場!フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス

    Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル

    便利なのが登場!フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
    aroechan
    aroechan 2018/10/25
    Webアプリ作成でのバリデーションはほんまつまらないししんどいタスクだから、みんな助かるね
  • デザインの勉強にもなる!ロゴのデザインをさまざまな面から検証し、改善点が分かるオンラインツール -Logo Lab

    あなたのロゴをさまざまなデザイン面から検証し、デザインの改善点が分かる無料オンラインツールを紹介します。 ロゴの視覚的なバランスはどうか、カラーに依存されていないか、大きい小さいサイズでどうかなど、ロゴが使用されるあらゆるシーンで検証することができます。 紛れたコリス Logo Labを利用するのは、簡単です。面倒な登録やメールアドレスなども一切必要ありません。 下記ページにアクセスし、「Upload a Logo」をクリックして、ロゴのファイルをアップロードします。

    デザインの勉強にもなる!ロゴのデザインをさまざまな面から検証し、改善点が分かるオンラインツール -Logo Lab
    aroechan
    aroechan 2018/10/19
    デザインってどうしても定性的にしか評価されにくいから、こうやって多角的に評価できるのは良い
  • 1