すべての記事 - ページ 1563

このシリーズは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...

2018年の新年はここにあります。 5年前のWeb開発の進歩を見てみると、今日のものとはまったく違います。今日は新しい 方法、ツール、そしてまったく新しいパラダイムさえも それは私たちが今日ウェブサイトを構築する方法を変えます - そしてVirtualDOMはそれらの一つです. DOM（Document Object Model）は Webサイトの構造を定義するツリーモデル. DOMを選択し、トラバースし、そして操作することは、非常に高価な操作になるかもしれません。 あなたのサイトのレンダリングパフォーマンスを妨げる. ただし、この記事ではVirtualDOMがどのように機能するのかについては説明しません。代わりに、他のツールと合わせて検討します。 VirtualDOMを実装できるようにするライブラリ 直ちに。チェックしてみましょう. MaquetteJS あ VirtualDOMの実装 それはあなたがそれの周りのデータで更新され続ける流動的なユーザーインターフェースを構築することを可能にします。純粋なJavaScriptです 無人の それゆえ、ライブラリ CoffeeScript、TypeScript、JSXなどの合成言語と一緒に使用する. React.jsに代わる素晴らしいライブラリ。 MaquetteJSはサイズがずっと小さいです（のみ 3キロバイト）同等に. ReDOM これは私のお気に入りのVirtualDOMライブラリの1つです。構文を見るだけで簡単に取得できるためです。. わずか2Kbと, 高速レンダリングWebページまたはカスタムHTMLコンポーネントを作成できます。ライブラリは 2つの主要機能...

このシリーズは私たちが目撃した長い道のりを歩んできました Web開発ツールは行き来します;一度輝いた、数ヶ月後彼らは他の最新のツールで時代遅れにされています。それにもかかわらず、私達は私達の開発者が今月探検するためのリストにいくつかの新しいツールを持っています。 レスポンシブUIデザインのためのSketchプラグイン, そしていくつかのCSSフレームワーク. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. iTyped JavaScript あなたが提示することを可能にするライブラリ タイピング テキストリストの効果;最近Web上で見られたような種類の影響。このJavaScriptライブラリは 効果をカスタマイズするための少数のオプションで実装が簡単. あなたはNPMを通してこのライブラリをインストールするか、またはCDNを通してそれをロードすることができます。 https://unpkg.com/ityped@0.0.7. オペラネオン タブベースのブラウザを導入したのはOperaが最初でしたが、それ以降は、 いわゆるタブとスピードダイヤルのあるブラウザ. Operaは最近、Opera Neonという新しいイニシアチブをリリースしました。いわゆる新鮮なインターフェースを備えた新しいブラウザ アドレスバー、分割画面モード、および美しい壁紙 選択それでは、Opera Neonは再びブラウザスペースを変更することができますか？これは見なければならないでしょう. At.js At.jsは、あなたができるJavaScriptライブラリです。 スマイリーを追加する、友達に言及する、タグ付けする; Slack、Twitter、そしてFacebookで見たようなもの。このプラグインにはjQueryが必要です。 Internet Explorer 7で作業する...

Web上で見つかった開発者向けのツールやアプリの多くはトレンドに合わせて進化していますが、より実用的なソリューションに進化しているものもあります。 、 それでも それぞれのカテゴリーで際立っている. 私たちはあなたのかもしれない素敵なフォントを持っています Helvetica Neue 代替品、タッチ圧力をテストするためのJavaScriptライブラリ、およびJavaScriptエラーロギングのための便利なツール。チェックしてみましょう. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. OverPassフォント オーバーパス fontは、Highway Gothicに着想を得たフリーフォントです。 Highway Gothicは多くの国で広く採用されている書体です。 距離を超えて高速で読みやすいため、道路標識用. OverPassフォントには、4種類の太さ（細字、標準、半太字、太字）、大文字、小文字があり、Webフォントに変換することもできます。. ライセンス：OFL（オープンフォントライセンス） Pa11y Pa11y です あなたのウェブサイトのアクセシビリティをテストするためのツール ある美しさを通して、手間をかけずに オートメーション. カラフルでインタラクティブなインターフェースを好む場合は、コマンドラインインターフェースを使用するか、ダッシュボードから設定することができます。 Pa11yはレポートを作成し、あなたが様々な障害に対してあなたのウェブサイトのアクセシビリティを改善したい場合に修正すべき分野を示します. アクセシビリティに関するより多くのリソース： 現代のWebとアクセシビリティ[ビデオ]...