ウェブデザイン - ページ 17

3月の間、新鮮な資源の次のラウンドのための時間。この一連のシリーズでは、新進気味のブラウザ、ウェアラブルデバイスのモックアップ、変形可能なアイコンのコレクション、その他いくつかの素晴らしいものがあります。. Web開発者向けのより新鮮なリソースについては、このシリーズに従ってください。. コードパッド CodePadは、コードを保存して共有するために使用できるWebアプリです。それはCSSからXSLTまで及ぶ複数のプログラミング言語をサポートします。自分のコードスニペットを非公開アクセスに設定して、自分だけが表示できるようにしたり、一般公開の状態でアクセスできるようにしたりすることができます。これにより、検索エンジンでも取得できます。. UINames オンラインのサービスのアカウントを開くときにユーザー名を選ぶのが難しい場合は、デザイナーがプロトタイプのコンテンツ入力者またはプレースホルダーとして偽の名前を思いつくことがどれほど難しいかを考えてください。. UINames Lorem Ipsumのように、人の名前の代わりに、ランダムな名前を生成することができます。性別や国（日本、中国、ベトナムなど）に基づいて名前を選択できます。. DevToolsアプリ DevToolsアプリはあなたがあなたのウェブサイトをデバッグすることを可能にするアプリケーションです。これはChromeで見つけることができるDevToolsのように機能します。このアプリは、DevToolsをChromeから分離するための実験的プロジェクトです。Chromeユーザーの大多数はDevToolsを必要としない、または使用しないため、これはかなり合理的なアイデアです。. Is.js Is.js あなたが直感的に評価を実行することを可能にする便利な小さなJavaScriptライブラリです。 です 方法。あなたは文字列、配列、時間、正規表現（正規表現）、さらには環境を含むほとんどすべてのデータ型をテストすることができます。. 次のコード例は、Internet Explorer 6にいるかどうかを評価します。 var IE6 = is.ie（6）if（IE6）//ここで関数を実行 TheatrJS TheatrJSは、類似のライブラリとは異なり、タイピング効果を生み出すためのJavaScriptライブラリです。少し遅れて、誤字を入れて、修正する. TintUI TintUI 複数のソースから派生したカラーパレットのコレクションです。ここでは、iOS、Android Material Design、またはMicrosoft...

今回の新鮮なリソースでは、リストにさまざまなリソースがあります。一部を除いて コードベースのツール 新しいJavaScriptライブラリやフレームワークのように、便利なものもいくつか含まれています。 GUIアプリケーション 開発者と設計者の両方が感謝すると確信しています. リストを詳細にチェックして、下のコメント欄であなたのお気に入りのリストを教えてください。. ユニーク するためのツール ユニークなフォントを探す Uniqueは、ロゴを作成したり、わずか数クリックで簡単にドキュメントの固有の適切なフォントの組み合わせを見つけたりするのに役立ちます。設定を選択したら、次のことができます。 自分のフォントをダウンロードして名前を付ける. かっこいい! ダブルトーン 簡単なWebアプリ 写真をダブルトーンにする;対照的な2色からなるモノクロ写真。あなたはあなた自身の写真をアップロードするか、ツールが結果を編集してダウンロードするために提供する写真を選択することができます。良い あなたのウェブサイトに印象的な背景画像を作成するためのツール. MDX MDXはその仕様です MarkdownとJSXを組み合わせたもの. これにより、Markdownファイルのインポートなど、これまでになかった狂ったことをすることができます。, Markdownファイルをスタンドアロンコンポーネントとして使用する 他のファイルにインクルードし、その中にReactコンポーネントを使用する. FontDrop 便利です フォントに関する詳細情報を表示するためのツール. フォントをドロップするだけで、名前、スタイル、バージョン、著作権情報、グリフ、サポートされている言語などが表示されます。. DOMテストライブラリ DOM（Document Object Model）をテストするためのJavaScriptライブラリ。あなたはこれを使用することができます...

私達は中年版のためのリストを広げています。今回の記事では、いくつかのCLI（およびここでコマンドラインを学習する理由についての記事）、いくつかの仕事用のデスクトップアプリケーション、およびいくつかのCSSおよびJavaScriptライブラリを紹介します。また、チェックアウトする必要があるベストプラクティスに関する資料、参照、ガイド、ブックマーク、および場合によっては1日読むことも含まれています. 私はリストの残りを台無しにするつもりはないのであなたが行く。より新鮮な資料については、ここをクリックしてください。. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. CertBot CertBot Let's Encryptから証明書を展開するためのより便利な方法を提供します。 Apache、NGINX、Pleskなどの多数のサーバ設定をサポートする一連のコマンドラインを提供します。そういえば、Let's Encryptは、無料のSSL証明書を提供することによってWebをより安全にするための共同の取り組みです。現在300万以上のWebサイトで使用されています. ものの木 ものの木 コードを表示するために特別に設計されたフォントです。 Mononokiはインストール可能なデスクトップフォントとして利用可能です（.TTF）とウェブフォント（.イート, そして .woff）それは古典的なものに代わる新鮮なものです モノタイプ モナコ、メンロ、クーリエのように. BideoJS ホームページにフルページの自動再生ビデオを表示することは、増加傾向にあるようです. BideoJS それはあなたがより少ないハードルでまさしくそれをすることを可能にするJavaScriptライブラリです。軽量で反応がよく、ニーズに合わせて構成できます。. CSSの削除 CSSの削除 CSSに関する参考文献、記事、および統計のコレクションです。このような有益な情報は、どのCSSメソドロジー、ツール、およびフレームワークをプロジェクトに採用したいかについて、十分な情報に基づいた決定を下すのに役立ちます。. Mailgen Mailgen は、シンプルでレスポンシブなHTML Eメールを生成するためのNodeモジュールです。電子メールのほぼすべての領域をカスタマイズできるように、いくつかのオプションが用意されています。あなたは電子メールを設定することができます...

このシリーズは3年近く続いていると思いますか？その短い間に、私たちはWebデザイナーと開発者のための最も新鮮なリソースの少なくとも30のリストを特集しました。そして、6月の新しい編集でこれを続けます。. 今回の編集では、スライダーの表示、データテーブルのスクロールのスムーズ化、上にスクロールするボタンの効果的なエレベーター効果など、いくつかのJavaScriptライブラリを紹介します。. チェックしてみましょう. 中スタイル確認 ミディアムはそのデザインで賞賛されています。レイアウトとUIは徹底的に考えられているようです。それに加えて、それはまたUIを複製するためにJavaScriptまたはCSSライブラリのどちらかを開発することをウェブ開発者に奮い立たせます。 Medium Style Confirmは、Mediumのポップアップまたはダイアログボックスに似たJavaScriptライブラリです。. ペンギン ペンギンはあなたがあなたのウェブサイトの土台として使用できる新しいフロントエンドフレームワークです。 GruntやSassなどのツールを使用すると、必要のないライブラリやCSSを簡単に追加または削除して、できるだけ軽量にすることができます。それはまたBootstrapおよびFoundationのためのよい代わりです. Elevator.js あなたはあなたがページのトップにスライドすることを可能にするウェブサイトのそのボタンを見ましたか？ほとんどのボタンで一番上に移動できますが、Elevator.jsを使用すると、エレベーター、音楽、 “丁!” 最上階に着いたら鳴ります。すごくいい! Xインスタグラム X-InstagramはInstagramの画像をタグで引き出して表示するPolymerのカスタム要素です。この要素はプロセス全体をずっと簡単にします。通常のHTML要素と同じように要素を追加し、要素の属性としてtagキーワードを指定します。. そして魔法を始めましょう! CamanJS CamanJS 画像操作のための素晴らしいJavaScriptライブラリです。それはあなたが一般的に画像エディタで見つけるであろう機能セットが付属しています。画像をぼかしたり、白黒にしたり、コントラストを上げたりすることができます。. ClusterizeJS Clusterize.jsは、テーブル内の大量のデータを処理するときのパフォーマンスを向上させるJavaScriptライブラリです。たとえばリストの5000とテーブルを下にスクロールすると、通常、エクスペリエンスは遅れてぎくしゃくします。このJavaScriptライブラリはこの問題に対処し、スクロール動作をスムーズに航行するようにします。. テストをする テストをする CSS3、HTML5、およびJavaScriptに関するあなたのスキルと知識を評価するための質問の集まりです。各テストには、いくつかの質問と、これらすべての質問を完了するための限られた時間が与えられます。これらの言語が本当に優れているかどうかを調べるのは良い情報源です。. HTMLの矢 これは、HTMLおよびCSSに埋め込むことができる特別なネイティブUnicodeシンボルのコレクションです。これらの文字には、矢印、通貨、句読点があります。あなたは、時々、あなたはそれらの文字を表示するのにフォントアイコンを必要としないことに気付くでしょう. ちらつき Flickityは、カルーセル、ギャラリー、またはスライダーをWebサイトに表示するためのJavaScriptライブラリです。タッチスクリーン用に最適化されています。ラップトップを使用している場合は、カルーセルを指で、またはトラックパッドで楽にスライドさせることができます。それはまたあなたが好きな方法で完全なカスタマイズを可能にするたくさんのオプションが付属しています....

7月は夏の高さをもたらす月です、そして今月の新鮮なリソースのバッチのために、我々は確立されたそして初心者の開発者からのいくつかの熱い新しいツールを持っています. このリストには、WordPressコミュニティによるSketchライブラリから、WordPressインターフェイスのプロトタイプを作成することを可能にするツールまで、非常に興味深いツールがいくつかあります。 React.jsとVue.jsを拡張するツール, また、開発スキルを向上させるための参考文献もいくつかあります。チェックしてみましょう. WPRIG Morten Rand-Hendriksenandによって作成されたオールインワンスターターWordPressテーマには、 最新のツールを使用してプロセスプリセットを作成 Gulp、Babel、ESLint、およびVisual Studioのコード統合のように。それはあなたが周囲の開発ツールを設定する煩わしさなしで素晴らしいWPテーマを作成するのを助けます. VueNative Vue.js仕様に基づいてコードを書くことを可能にするクロスプラットフォームのモバイルアプリケーションを構築するためのVue.jsに基づくフレームワーク。ツールは React Nativeにコンパイルする あなたのために魔法の仕事をしてください。 ネイティブネイティブ CLI Vue.jsに既に慣れているのであれば、これは モバイルアプリケーションを構築するための適切なフレームワーク. SketchPress 10upの人々は、SketchPressをリリースしたばかりです。 WordPress管理インターフェースのモックアップやデザインを素早く作成するためのスケッチテンプレート. プライマリボタン、メニューバー、Dashicons、Metaboxなどの一般的な管理UIが満載です。SketchPressは、WordPress開発者がプラグインとテーマの設定またはオプションページをWordPress管理UIに合わせるための優れたコンパニオンツールです。. ドク Doczは MDXに基づくドキュメンテーションジェネレータ これはこのシリーズの最後のラウンドで紹介されました。このツールを使用すると、JSXドキュメントを作成するのと同じように、Markdown構文を使用してJSXカスタムコンピテンシーをミックスにインポートして含めることができます。. アニミスタ CSSアニメーションはWebを生き生きとさせます。ただし、互換性のためのブラウザのプレフィックス、パラメータ、およびアニメーションの時間枠を考慮してCSS Animationを作成するのは必ずしも容易ではありません。...

今月の記事では、WordPressでGraphQLを有効にするためのプラグイン、CSVデータをレンダリングするためのデスクトップアプリケーション、およびいくつかのWebサイトのようなすばらしいJavaScriptライブラリの配列をいくつか紹介します。フレームワークチェックしてみましょう. ヒーローパターン のコレクション SVGで作られた繰り返しパターン あなたがあなたのウェブサイトの背景として使うことができるということ。サイトには便利な設定が装備されています パターンの色と不透明度をカスタマイズする CSSに追加するコードをコピーして貼り付けるだけです。. TestCafe TestCafeは エンドツーエンド（e2e）テストツール それはあなたが実際のユーザーによって使用されているかのようにあなたのウェブサイトやウェブアプリをテストすることを可能にします。それはテストを実行するときいくつかのことを自動化します。 ブラウザの起動、指定されたテストユニットの実行、レポートの生成, スクリーンショットとエラーを簡単に解決するためのソースマップ. SugarJS SugarJSはJavaScriptライブラリです。 オブジェクト、配列、日付を操作する より読みやすく、より読みやすい構文です。ライブラリには、いくつかのユーティリティ関数も付属しています。, .escapeHTML（） どちらでしょう HTML要素をそれらのEntityフォーマットに変換する. ミズ に便利なJavaScriptライブラリ 時間、数、通常の文字列をミリ秒に変換する. ミリ秒（2日）, 例えば、に変換されます 172800000. payy 役立つツールの素晴らしいコレクション あなたのウェブサイトのアクセシビリティを向上させる そしてウェブアプリ。...

今回の記事には、多種多様なリソースが付属しています。あなたの次のランディングページデザインを刺激するソース、明白なスクリーンの効果を薄暗くする2つの方法、ドラッグアンドドロップでWebレイアウトを構築するためのプラグイン、あなたのデートピッカーを強化するためのjQueryプラグイン、そしてたくさんのJavaScript開発者を助けるためのライブラリ. また、HTTP 2に関するリソース、活版印刷用語、アクセシビリティ対応サイトの構築、およびプログラミング言語構文の検索エンジンも含まれています。チェックしてみましょう. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. 着陸フォリオ ランディングフォリオは、ランディングページデザインの例を見つけることができる中心的な場所です。このサイトには何百もの例があり、それらのカテゴリに基づいてリストを微調整できます。これはWebデザイナーにとって間違いなくブックマークに値する. 要素クエリ あなたが実行することを可能にするJavaScript 要素クエリ. 要素クエリは次のように表されます。 @素子 とは違って, @メディア, @素子 を超えて多数の条件を認識しています “高さ” そして “幅”. たとえば、要素に含まれる文字数に基づいてスタイルを適用できます。. HTTP2 HTTP2 重要な変更を加えたHTTPの最新の仕様です。それはより良い性能と効率的なデータ転送を約束します。このリソースでは、これらの変更点（詳細）、セキュリティへの影響、速度、およびユーザーエクスペリエンスを見つけることができます。. エレメンター エレメンター あなたがドラッグアンドドロップでWebレイアウトを構築することを可能にするWordPressプラグインです。 Elementorを使用すると、より魅力的なレイアウトを構築できます。それは敏感で、完全にカスタマイズ可能で、そしてユーザーフレンドリーです。. TimeDropper このプラグインは、ウェブ上で日付を選択することをより魅力的にするいくつかのアニメーションを備えています。また、UIの外観を変更するためのオプションもあります。それは愛好家の日付ピッカーのためのjQueryプラグインです。....

Web開発者はオンラインで見つかる無料のツールやリソースに恵まれています。それらは毎月Fresh Resourcesシリーズに忠実に集められています。先月のバッチを見逃した場合は、ここでもう一度訪れるか、今年の初めにまとめた残りの新鮮なリソースをチェックしてください。. 2015年7月のバッチでは、プラグインの更新を非公開で展開できるWordPressプラグインから魅力的なアニメーションを追加するためのWordPressプラグインまで、タスクを容易にするための新しいツールとリソースを取り上げています。. アラジン このプラグインは、OS X Spotlightに似た、WordPress管理に追加機能を追加します。それを使えば、あなたはあなたのMacの中のファイルとフォルダに素早くアクセスすることができます。インストールしたら、Shiftキーを2回押してから、アクセスしたいものを入力します。それはキーボードの使用でWordPress管理をよりアクセスしやすくする. SiteOrigin CSS SiteOrigin CSSはリアルタイムでテーマの外観をカスタマイズするための堅牢なWordPressプラグインです。プラグインはの下に新しいパネルを追加します 外観>カスタムCSS メニュー。そこでは、あなたが使用しているテーマのCSSを上書きするためのカスタムCSSルールを書くことができます。あるいは、CSSパネルを直感的に追加するためにGUIパネルを使うこともできます。. DynamicsJS DynmaicJSは、物理ベースのアニメーションを適用するためのライブラリです。私はPhysicのエキスパートではありませんが、このメニューの例はとても素敵です。それはHTMLとSVG要素をアニメートすることができます、そしてそれはどんな依存性なしであなたに速いパフォーマンスを与えます。 DynamicJSは、Safari 7以降、Firefox 35以降、Chrome 34以降、およびIE 10でテストされています。+. 機内モード このプラグインは、Google Fonts、Gravatar、WordPressアップデータなどのいくつかのWordPress外部HTTPリクエストがプラグインやテーマリポジトリへの更新を試みることを防ぎます。これは、これらの呼び出しが失敗したときにエラーが発生するのを抑制するためのローカル開発用の便利なプラグインです（これは通常、非常に遅いインターネットでローカルに開発しているときに発生します）。. カバーラー あなたのウェブサイトのヘッダーにぴったりのビデオのコレクション。すべてのビデオは無料で、パブリックドメインの下でライセンスされています。をチェックアウトすることを忘れないでください “使い方” あなたのWebページにビデオを追加する方法を学ぶためのセクション. 活気のあるJS VibrantJSは画像から目立つ色をつかみます。また、色形式の切り替えや背景とテキストの適切な構成の決定など、取得した色を処理するためのAPIもいくつか公開されています。動的な色生成を使用してWebサイトのインターフェイスを改善したり、画像がまだ完全に読み込まれていないときに色をプレースホルダ画像として使用したり、色見本を生成するWebアプリケーションを作成したりできます。. GradifyCSS...