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

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/[email protected]. オペラネオン タブベースのブラウザを導入したのは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とアクセシビリティ[ビデオ]...

それはここにあります！私たちは2014年の大混乱の年をようやく去りました、そして私たちが新しい年に新たな始まりを迎えるにつれ、私たちは新しい希望、希望、そして確かに新しい道具を試すことができます。この記事では、まとめました 一握りの完璧なツールとプラグイン この転がりを得るために. 便利なオンラインテストツールからモバイルデザインパターンに簡単にアクセスできるものまで、2015年を正しい軌道に乗せるための選択肢はたくさんあります。. Seti UI Seti UI Sublime Textカラースキームと混同しないようにSublime Textテーマです。 Sublime Textのテーマは、タブやサイドバーなどのアプリのインターフェースに影響します。 Seti UIは移植されたテーマです。その平らな外観は見て本当にいいです。 Windows 8またはOS X YosemiteでSublime Textを使用している場合は、テーマの最適な選択. IXDチェックリスト チェックリストを用意しておくと、何が行われ、何が行われるのかを追跡するのに役立ちます。あなたがUIデザイナーであれば、おそらく追加する必要があります IXDチェックリスト ブックマークに. IXDチェックリストには、チェックする共通のやることリストのコレクションが含まれています。各項目はリンク参照でサポートされているので、なぜリストにあるのかを知ることもできます。あなたが好めば、あなたがページを印刷してオフラインでリストをチェックすることができる左側に小さなボタンがあります. クーラー 配色を選択するためのツールはいくつかあります。しかし、このツールほど簡単なものはありません。 クーラー. スペースキーを押すだけで、新しい配色が表示されます。 Spaceキーを繰り返し押すと、アルゴリズムから派生し、ユーザーの貢献者から外部委託された新しい配色が無限に生成されます。....

このシリーズを何年もの間カバーしてきたので、私はツールが出入りするのを目撃しました。 A 毎週、いくつかの新しいツールがリリースされています。. しかし、ここ数週間で私はそれが少し遅くなっていると思います、それは私をいつもより少し長くしました Githubやその他の情報源を調べて新しいツールを探す それは無料で、オープンソースで、そしてこのシリーズで言及する価値があります. 本日の記事では、JavaScriptフレームワークからのツール、テストツール、そしてWordPressサイトを開発するためのツールをいくつか紹介しました。チェックしてみましょう. クット あ あなた自身のドメイン名でURLを短くするアプリケーション. Node.js、React、Reduxのような最新のスタックの上に構築されています。 パスワードで保護されたURL、RESTful APIなどの組み込み機能, URLを監視するための詳細な統計情報一番いいのは無料だし、自分のサーバーでホストできるということだ。. WordHat WordHatは BehatをWordPressに統合するためのツール. Behatは、より表現力豊かな方法でPHPアプリケーションをテストできる、PHP用のオープンソースの動作駆動開発（BDD）フレームワークです。. あなたのWordPressテーマとプラグインが機能をより複雑にするので、あなたはこのツールが非常に役に立つと思うでしょう。 WordHatとBehatはあなたのテーマやプラグインが期待通りに振る舞うようにします ユーザーが対話したとき. WPブラウザ WordHatと同様に、WP-BrowserはCodeceptionの拡張です。 WordPressアプリケーション、テーマ、そしてプラグインのために特別に設計されています. 共感は実行するためのツールです テスト中 あなたのアプリケーションでは、PHPUnitやBehatと似ていますが、もっとバンドルされています。それで、あなたはすることができます ブラウザテスト、BDD、ユニット統合テスト、およびAPIテスト. ノードWP国際化 その名前はそれ自体を代弁しています。それはあなたのテーマやプラグインを国際化するためにたくさんのことを自動化するNodeJSモジュールです....

Web開発者向けの新しいリソースシリーズは 今から4年くらい走る, そしてこのシリーズを維持することは私が長年にわたってどのようにウェブが進歩するかについての洞察を私に大いに与えてくれました。がある 毎月出てくる新しいツール Web開発を容易にするため. 今回は、まとめました いくつかの新しいツール, JavaScriptライブラリを含む, いくつかのCSSライブラリと参照 あなたのスキルを向上させるために。チェックしてみましょう. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. キャプション JavaScriptは デスクトップアプリケーションを引き継ぐ 異なるプラットフォーム上での移植性のためだけでなく、ネイティブアプリと同じくらいうまく機能するために。このアプリ, キャプション, 例えば 電子の上に建てられた. 字幕ファイルを検索できるシンプルなアプリです（.SRT）あなたが見ているビデオに添付する. 素晴らしいOSXコマンドライン あ macOS用の便利で便利なコマンドラインの膨大なリスト. ここでは、CLIを介して実行できることがたくさんあります。 “プリントキューをクリアする”, “Finderでフォルダを隠す”, そして “システムのスリープを防ぐ”. トレバー...

2015年はWebにとって素晴らしい年でした。 WebサイトやWebアプリケーションを構築するために、さまざまなフォームファクタで採用されています。. 多くのモバイルおよびデスクトップアプリケーションは現在、HTML、CSS、およびJavaScriptを使用して構築されています。これは、WebテクノロジとReact.js、Angular、Node.jsなどのライブラリの移植性によって実現されています。. この連載の今日の記事では、JavaScriptライブラリーとCSSライブラリーをいくつかまとめました。. その他のリソースはこちら その他のリソースはこちら 推奨されるリソースの全コレクションと、利用可能な最高のWebデザインおよび開発ツールを見つけてください。. フラットスライダー jQuery UIには、Sliderを含む一般的なWebインターフェースのコレクションが付属しています。これは、ユーザーが数値の範囲を選択できるようにするUIです。の フラットスライダー jQUeryのUIスタイルをカスタマイズするためのWebツールです。. ユーティリティオープン型 ユーティリティオープン型 ドロップインクラスのコレクションです。 高度なCSSの文字体裁機能を適用する そのようなフォントの合字、小さな大文字、そしてもっとたくさん。彼らは基本的にあなたのユーザーに可能な限り最高の読書体験を詳細に提供します。古い、サポートされていないブラウザではうまく劣化します. ResponsifyJS レスポンシブイメージが直面する悪名高い制約の1つは、通常イメージを適切にスケーリングすることですが、ビューポートサイズを非常に小さくすると、イメージの主焦点がそらされます。. ResponsifyJS 使用できる軽量のJavaScriptライブラリです。 画像の焦点を維持するための座標を設定 サイズ変更中. リニア リニア Mac用の定規アプリです。ルーラーを使用して、Webページを測定したり、DevToolsを開いたりしなくても要素のサイズを調べたり、要素が完全に中央に配置されているかどうかを判断したりできます。あなたは複数の支配者を持つことができ、ユニットをPXからEMに切り替えることができます. StickyStack StickyStack パネルがビューポートの最上部に到達したときにスタックスクロールエクスペリエンスを作成するためのjQueryプラグインです。さらにスクロールすると次のパネルが表示されます。これは、ページコンテナ、スタックセクション、およびスタックのボックスシャドウを設定するためのいくつかのオプションを備えた軽量のプラグインです。デモをチェックする. 視聴者...

1年以上これをやった後、デザイナーと開発者のためにこの毎月のリソースパイルを書くことについての最も難しい部分は紹介です。私たちが話題にしている間に、あなたのようなウェブ開発者のための2015年2月のあなたの最も良いそして最も新鮮なリソースの要約をここに示します. 今回の記事では、特別な記事を見ています。 コードスニペットを見つけるための検索エンジン, 非常に機知に富んだ Flexboxモジュールの問題に対処するための参照, より良い管理のための開発ツール 色、書体およびグラデーション. グラデーションアニメーター CSS3グラデーションを使用すると、画像を読み込まなくてもWebサイト上で画像のないグラデーションを作成できます。さらに魅力的な効果を得るために、CSS3アニメーションと組み合わせることもできます。ただし、コードが多すぎる場合は、よりシンプルなGradient Animatorルートを使用して、素敵なインターフェイスを持つものを生成してください。. SVGポケットガイド SVGポケットガイド Joni Trythallによってコンパイルされています。 SVGの基本（図形やテキストの作成など）から高度な機能（グラデーションの作成、パスやパターンのクリッピングなど）までを順を追って説明するのに役立ちます。この本はMarkdown形式で提供され、英語とポルトガル語で利用可能です。. Flexbugs FlexboxはCSS3の非常に有望な新しいモジュールで、Webレイアウトの構築方法を完全に変えます。しかし、それはまたそれ自身のクロスブラウザ互換性の問題もあります。このリポジトリ, Flexbugs, これらのバグとそれらに対処するための回避策のコレクションです。これは、Webの最先端に住んでいる人にとって非常に役に立つリソースです。. イコノ 1つの要素だけで完全に見やすいアイコンを作成するのと同じように、CSSだけで実現できることは驚くべきことです。. イコノ これを行うライブラリです。このライブラリには、単一の要素とCSSだけで作成されたよく知られたアイコンのコレクションがあります。これらのアイコンは画像ベースのアイコンよりも速くロードされ、よりカスタマイズ可能です。. ディリンジャー ディリンジャー 目を楽しませるMarkdownエディタです。ここであなたはMarkdownフォーマットで書くことができ、そして即座に右側のタブの出力を見ることができます。あなたの便宜のためにDillingerはあなたがHTML、PDF、またはあなたがした後にMarkdownファイルフォーマットにあなたの作品をエクスポートすることを可能にします。あるいは、DropboxやGithubなどのサードパーティサービスに接続してファイルを保存することもできます。. HTML5Up HTML5Up 無料のHTML5ベースのテンプレートのコレクションです。ビジネス、ポートフォリオ、または単純なブログなど、さまざまな種類のWebサイトに対応するレイアウトがいくつかあります。すべてのテンプレートはレスポンシブであり、さまざまな画面サイズでコンテンツとWebサイトのレイアウトを楽しむことができます。. CSSの色...