ツールキット - ページ 13

あなたがUIデザインのためのアイコンを探しているなら、今、あなたは特に何かを探して、大きなリストを閲覧する必要はありません。代わりに、あなたはもっと具体的に見えることができます。 Iconfinderはアイコン検索エンジンです。キーワードを入力して検索し、結果を得るのと同じくらい簡単です。 Goolge Imageとイメージ検索はよく似ています. アイコンは.PNG形式ですが、商用に使用する前にそのライセンスを再確認することをお勧めします。. Iconfinderの詳細 フィードを購読する - アイコンの最新情報を入手するには、Iconfinder RSSフィードを購読してください。. Macウィジェット - これがMacOSx用のIconfinderウィジェットです。ウェブサイトに行かずにインコンを検索したい場合に便利です。. 送信アイコン - 投稿するアイコンがある場合は、それらをmartin.leblanc [at] gmail.comに送信してください。”>圧縮フォーマット.

時代遅れのオーディオプレーヤー のおかげで過去のものです 現代のHTML5オーディオ そしてその ブラウザサポートの迅速な採用. しかし、Webデザイナーは、もう一歩進むことができます。 純粋なオーディオライブラリ といった Howler.js. この無料のオープンソースのJSライブラリはあなたをすることができます 標準フォーマットのオーディオファイルを再生する カスタムプレーヤーに埋め込まれています。ハウラーはと来ます フルAPI, だからあなたが構築することができます シンプルなオーディオプレーヤー, ある 大プレイリスト, または ループバックグラウンドミュージック ブラウザ内HTML5ゲーム用. ハウラーは2013年初めに最初に作成されました 何度も繰り返しました. 現在、プロジェクト v2.xに座っている GitHubで7k以上の星を使って. プロジェクトは ゲームスタジオで作成 それは健全なFXとバックグラウンドミュージックのために彼らのウェブゲームでハウラーを使います。それは支えます 幅広いファイルタイプとコーデック 含む...

ブログプラットフォームMediumでは、 カスタム画像ズーム効果 彼らのブログページで。ユーザーが画像をクリックするたびに、自動的に大きなサイズに拡大されます。. これは素晴らしい効果であり、確かにMediumに特有のものですが、簡単にコピーできるものではありませんでした。. 今、 MediumLightbox スクリプト、それは今までよりも簡単です。このJSスクリプトは軽量で、簡単にウェブサイトやブログに追加できます。. これがどのように機能するのかを知りたい場合は、にアクセスしてください。 ライブデモページ 作成者Davide Calignanoによるホスト. 正確なトランジションとカスタムアニメーション効果を Mediumの画像ズームの鏡像を作成する. ライブラリ全体は 純粋なJavaScriptで書かれた, だからそれは3に頼らない第二 jQueryなどのパーティスクリプト. あなたはそれを設定するために少しのJSを知る必要があるでしょうが、あなたは確かに専門家になる必要はありません. 各画像は取ることができます data- *属性 フルサイズの高さと幅を設定するためのものです。 動的に引っ張られる ライトボックスプラグインから。セットアップコードはとてもシンプルで、 画像自体をターゲットにする, または のような容器 素子. これが、プラグインを実行するために必要な単一のコードスニペットです。 MediumLightbox（...

私は 自動化の大きな支持者 それは人生をそれほど簡単にするからです。コンピュータを使って自分のために物事をこなすときに、生命を奪うような単調で単調な作業に時間を費やすのはなぜですか。これは特にWeb開発に当てはまります。. 多くの開発作業は面倒です。開発中にコードをコンパイルしたい場合があります。開発バージョンをプッシュするときは、ファイルを連結および縮小したり、開発専用リソースを削除したりすることができます。ファイルの大部分を削除したり、フォルダの名前を変更するなど、比較的複雑でないものでも 私たちの時間の大部分を占めることができます. この記事では、JavascriptタスクランナーのGruntが提供する優れた機能を活用して、あなたがどのようにあなたの人生を楽にすることができるかを紹介します。あなたがJavascriptウィザードでなくても心配は要りません。! Hongkiat.comに関するその他の情報： CSSMaticはCSSをWebデザイナーにとって容易にします フォルダアクションを使ってMacのタスクを自動化する アクションを使ってDropboxファイルを自動化する Androidデバイスでタスクを自動化するのに役立つ10のアプリ Webサイトを（自動的に）Dropboxにバックアップする方法 Gruntのインストール Gruntのインストールはノードパッケージマネージャを使うのでとても簡単です。つまり、Node自体もインストールする必要があるかもしれません。端末またはコマンドプロンプトを開き（私はこれからこの端末を呼び出します）、次のように入力します。 nmp -v. あなたが持っているバージョン番号を見れば 午後 インストールされている場合、「コマンドが見つかりません」というエラーが表示された場合は、ノードのダウンロードページに移動して必要なバージョンを選択してインストールする必要があります。. Nodeがインストールされると、Gruntを取得することは端末で発行された単一のコマンドの問題です。 npm install -g grunt-cli 基本的な使い方 プロジェクトごとに要件が異なるため、プロジェクトごとにGruntを使用します。フォルダを作成し、私たちの端末からもナビゲートしてプロジェクトを始めましょう。. Gruntの心臓部は2つのファイルで構成されています。 package.json そして Gruntfile.js....

QRコードを使用して、URLからアプリケーションリンクまでのテキスト情報を保存できます。これらのQRコードはオンラインまたはスマートフォンアプリを介して生成することができます。ほとんどの場合、これらのジェネレーターは基本的な白黒のQRコードのみを作成します。これらは最も安全な設計です。1箱の箱から出して、保存されている情報を翻訳できず、QRコードが役に立たない場合があります。. しかし、それからあなたがこの記事で見るもののような本当に素晴らしいアートワークを作り出すために義務の呼びかけを越えて行く何人かの創造的なデザイナーがいます：40ゴージャスなQRコードアートワーク。あなたはあなた自身のカスタマイズされたそして着色されたQRコードをあなた自身で作成することができます、しかしあなたがデザインに入っていなくても面白いQRコードが欲しいならば、Visualeadは助けることができます. VisualeadでQRコードをデザインする Visualeadを使用すると、デザインやロゴを機能し、スキャン可能なQRコードに変換できます。最初にサイトでアカウントを登録する. 「デザイナー」のQRコードを作成するには3つのステップがあります。 ステップ1：デザインの選択 まず、QRコードで使用したいデザインやロゴをアップロードする必要があります。 5種類の画像フォーマット、すなわちJPG、PNG、TIF、BMPおよびGIF（72〜600 dpi）がサポートされています。. あるいは、Facebook、Twitter、LinkedIn、Pinterestなどの人気ブランドを含む多くの「ストック」デザインから選択することもできます。. ステップ2：QRコードの種類を選択する 画像がアップロードされた後、あなたはあなたのQRコードが運ぶことになっている情報のタイプ（下記参照）を選ぶために編集ページにリダイレクトされます。. 「Facebook」プロフィールを含めることを選択した場合は、あなたのFacebookプロフィールまたはグループIDが必要です。たとえば、hongkiat.comのFacebookページをQRコードで表示するには、完全なURLの代わりに「hongkiatcom」を入力します。「http://www.facebook.com/hongkiatcom」. QRコードは、コード内に「Skypeユーザー名」などの他の連絡先情報を含めることもできます。誰かがそれをスキャンすると、Skypeプログラムが彼らのコンピュータまたはスマートフォンで起動し、あなたのユーザー名が彼らのSkypeアカウントに追加されます。あなたのコードがスマートフォンでスキャンされると、代わりに「電話番号」が付いている場合、あなたの番号は自動的にダイヤルされます。. ステップ3：QRコードを編集する ここでは、QRコードのサイズを変更して移動し、デザインに合わせてブレンドすることができます。ロゴやポスターの戦略的な場所にQRコードを配置して、他のテキストやデザインの邪魔にならないようにすることもできます。 QRコードのサイズを決めたら、をクリックします 次 プレビューする. ステップ4：QRコードを入手する プレビューに問題がなければ、をクリックします。 次 カスタマイズした完全なQRコード画像をもう一度取得する. Visualeadは無料または価格でご利用いただけます。 QRコードあたり14ドルで、あなたは広告なしの経験を得る。コードが生成されている間の無料版では、あなたは数秒間いくつかの広告を提供されます。. 結論 VisualeadはあなたのQRコードに素敵なタッチを加えます。従来のホワイトボックスとは異なり、背景や製品/ロゴのデザインに合わせて色を追加できます。あなたのコードがあなたに明らかにされる直前に、終わり近くにわずかな引っ掛かりがあります、しかし、それは無料トライアルのための掘り出し物です.

画像を読み、テキストを自分で引っ張るのは十分簡単です。しかし 動的にテキストを引っ張る 写真からは少し難しい、そしてありがたいことに, imgclip かなり簡単な解決策を提供します. この コマンドラインツール Mac、Windows、およびLinux用の端末で動作します。それは単に言語と共に画像ファイルの引数を取ります。 テキストを返します クリップボードにコピーした. あなたはnpmでライブラリ全体をインストールすることができます 非常に簡単なインストール. ことは わずか数KB GitHubで閲覧できるJSファイルが付属しています. Imgclip Tesseract.jsを使用します 画像処理を自動化し、テキストを引き出すためのライブラリ OCR. これは今日までで最も強力なOCRライブラリの1つであり、imgclipのように完全にオープンソースです。. 私はこのツールの品質とスピードに最も感心していると思います。それは本当に働きます 正確なテキストを引き出す そしてそれは使用する最も簡単なツールの一つです. imgclipコマンドは 端末で直接実行する, 画像への相対パスが続きます。追加することもできます 4つの選択肢 最後に出力をカスタマイズする. -時間, --助けて：...

Chrome DevToolsアプリは、ブラウザからdevtoolsを削除するためにKenneth Auchenbergによって作成されました。この場合はChromeブラウザから削除されます。このアプリケーションはNW.jsに基づいて構築されており、LinuxおよびWindowsと同様にMac OS Xでも実行できます。. メーカーがこれを作成するように促した多くの理由がありますが、彼のビジョンは開発者に 同じ統一されたプラットフォーム（アプリ）からの複数のブラウザにわたるリモートデバッグ. このアイデアは、さまざまな理由（および彼のブログで読み上げることができる耐性）によって、理解され、具体化されるまでにしばらく時間がかかります。. Chrome DevTools Appを簡単に見て、Googleが開発者に提供するものを見ていきます。. Hongkiatの詳細： Chromeデベロッパーツールを始めよう 5つ（もっと）開発者のための役立つChrome DevToolsのヒント Google Chrome DevToolsテーマをカスタマイズする方法 インストール Chrome-Devtools.app.zipをダウンロードして解凍します。ダブルクリックして実行します。 Chromeブラウザを起動してリモートデバッグを有効にする. Macでこれを行うには、端末を開いて以下のコマンドを実行します。 sudo / Applications / Google \ Chrome.app/Contents/MacOS/Google \...

GruntやGulpなどのビルドツールを使用すると、開発段階の時間を大幅に節約できます。 いくつかの繰り返しを自動化する “タスク”. あなたがGo-to-codeエディタとしてVisual Studio Codeを選ぶと、ワークフローはさらに合理化され、最終的にはより生産的になるでしょう。. Node.jsを中心に構築されたVisual Studio Codeでは、次のことが可能です。 エディタウィンドウを離れることなくタスクを実行する. この記事では、その方法を説明します。. さぁ、始めよう. 前提条件 まず最初に、それぞれのビルドツールのNode、NPM（Node Package Manager）、およびCLI（Command Line Interface）をすべてシステムにインストールする必要があります。これらすべてがインストールされているかどうかわからない場合は、コマンドラインを入力するだけで簡単に確認できます。. また、プロジェクト内のファイルとディレクトリは適切な場所にあると仮定します。 設定 などのファイル gulpfile.js または Gruntfile.js 代わりにGruntを使用している場合そしてプロジェクトの依存関係はに登録されています package.json この時点でもインストールする必要があります. 以下は、私たちのプロジェクトのディレクトリとファイルです。 デモンストレーション 記事上で。あなたのプロジェクトは確かに大きく異なります。あなたはより多くのまたはより少ないファイルを持っているかもしれません....