Webデザイナーおよび開発者向けの新鮮なリソース（2018年4月）

今月は、著名人からの技術的発表がいくつかありました。たとえば、Appleは新しいデータベースシステムをオープンソース化し、GoogleはモバイルでのWebサイトの速度を測定するための新しいツールをリリースし、GithubはGit、Github、およびコーディング全般を開始するための無料コースを備えています.

また、今日の記事では、私も 現在増加している新しいツールの数を特色にする. リストにもっとあるものにジャンプしましょう.

VuePress

Vueの作成者からの新しいツール、VuePressは 静的サイトジェネレータ Vue.jsを念頭に置いて設計されています。各ページの静的HTMLを生成して事前レンダリングします。 SPA（シングルページアプリケーション）として動作. これには、Google Analytics ID、検索、次へと前へのナビゲーション、サイドバー、および追加機能が含まれています。 PWA.

IMG-2

を紹介するJavaScriptライブラリ カスタム要素, img-2. 新しい要素は、標準には含まれていないいくつかの最適化を追加します。 img 素子, ユーザーへの画像のロード方法を改善する. カスタム要素では、画像は事前にキャッシュされます。 遅延負荷 画像とサーブは、画像がユーザのビューポートに入るときにのみキャッシュから読み込まれます。デモをチェックする.

タブレット

エレガントなダッシュボード/管理パネル ブートストラップ4に基づく. ダッシュボードには、チャート、フォーム、ギャラリー、価格表などの既成のコンポーネントが含まれています。 カスタムアイコンのコレクション. 開発者が管理パネルをすばやく構築できるようにするための素晴らしい出発点です。デモをチェックする!

DayJS

DayJS 日付と時刻をフォーマットするためのJavaScriptライブラリ. さらに、DayJSはMoment.jsと同様のAPIを備えていますが、サイズは2Kbです。それを考えると、それは Moment.jsの素晴らしい代替, もっと軽いライブラリが欲しいけれど、あなたがすでに知っているものの親しみやすさを維持したいのなら.

統一アーカイブ

UnifiedArchiveは、圧縮ファイルを扱うためのPHPライブラリで、次のような幅広いフォーマットをサポートしています。 RAR、Zip、Gzip、Tar, そして他にもたくさんの圧縮タイプがあります。このライブラリを使用すると、ファイルやディレクトリをアーカイブして抽出することができます。それは提供します ファイルを操作するための少数のAPI アーカイブから抽出された後。 UnifiedArchiveはComposerパッケージとして入手可能です。.

Githubラーニングラボ

Githubはたった今発表しました GitでGitを主にカバーする無料コース. 現時点では5つのコースがあり、次のようないくつかの便利なことを学ぶことができます。 Githubの使い方 コードをホストする, Githubページの使い方 あなたのプロジェクトのための無料のサイトやブログを入手する方法、そしてあなたがプロジェクトで多くの開発者と仕事をしているときに起こることが多いMergeの衝突を管理する方法.

WordPress UnitTest DOMパーサー

宮内貴之のすてきなヒント WordPressアプリケーションでUnitTestを実行するときにDOMElementをテストする. 私は個人的にこれが本当に便利だと思った。あなたはそれが同じことを願っています.

ポップモーション

Web上のバタースムーズアニメーション用のJavaScriptライブラリ, “ポップモーション” 現実に近いアニメーション効果で作成できるPhysicsというAPIを提供します。それは無関心です。単純にライブラリ 設定の特定のセットに基づいて値を出力します. これにより、CSS、SVG、Three.js、さらにはReact.jsを含むあらゆるメディアをアニメーション化するためにこれらの出力を適用することができます。.

Driver.js

あなたを可能にするJavaScriptライブラリ “ドライブ” ユーザーがページにフォーカスする. 特定の機能を紹介したり、ページ上の特定のタスクにそれらを導きたい場合、これは特に便利です。 Driver.jsは サイズ4 KB、カスタマイズ可能、およびキーボード対応.

アニメーションGIFをビデオに置き換える

GIFは、素晴らしい復活を遂げた後、至るところにあります。しかしGIFに関する問題は、それが通常非常に大きいということです。それは帯域幅の浪費です、それでもグラフィック品質はひどいことが多いです。この グーグルからのガイドラインはどのように示しています “ビデオ” アニメーショングラフィックを表示するためにGIFを置き換えることができます.

テキストマスク

JavaScriptライブラリ 特別なフォーマットを必要とするテキストを変換する 電話番号、通貨、またはクレジットカード番号のように。ユーザーがテキストを入力すると、自動的に適切なフォーマットに変換され、ユーザーエクスペリエンスが向上します。 TextMask React、Vue、または単に普通のJavaScriptで使用できます。.

携帯サイトの速度を比較する

これはGoogleのもう1つの便利なツールです。このツールはあなたを可能にします 携帯から読み込むときは、Webサイトの速度を確認してください また、Webサイトの読み込みが遅いときの総収入損失を見積もります。あなたはできる 国とスピードを選択 あなたのウェブサイトはに対してテストされます.

VueNut

Vue.jsとVuexを使ってWebアプリケーションを構築するときの開発仲間、VueNut 保存されているデータ状態を簡単に調べることができます。 開発中にデータを簡単に操作できます。クール!

FoundationDB

最近AppleはGithubでFoundationDBをオープンソースにしました。それは キーバリューペアデータベースシステム それはスケーラビリティとパフォーマンスを約束します。大手技術企業が自社製品の一部をオープンソースに専念し始めているのはクールです。.

絵本

StoryBooksは、 単独でReactコンポーネントを構築する. それはあなたが同様に各コンポーネントの異なる状態を見ることを可能にするブラウザ上のUIを提供します コンポーネントをテストする.

GhostText

ブラウザの拡張機能 ブラウザで書いたものをテキストエディタに同期する またはその逆。あなたがあなたのコードエディタの便利さと機能でウェブサイトに書くことができることを望むならば、私はこれが究極的に有用であるとわかりました。 GhostTextはChrome、Firefox、およびOperaで利用可能です.

コアラ

コアラは 使用されている言語に関係なく、コードのリンチと修正のためのインタフェースを提供するCLI. コードエディタ内でCoalaを使用し、それをCI（Continuous Integration）と統合し、それを次の構成構文でカスタマイズできます。 .共ファイル. Coalaは、CSS、JavaScript、PHPなどの多くの言語をサポートしています。このディレクトリには、さらに多くの言語があります。.

ReactStrap

ReactStrapは再利用可能なReactコンポーネントに変換されたBootstrap 4コンポーネントのコレクションです。古いBootstrapベースのWebサイトを近代化したい場合は、このライブラリを調べてみてください。.

Reacto

もう一つのReact関連のツール、Reactoは IDEはElectron上に構築され、ReactJSを使用してWebアプリケーションを開発するために設計されています. あなたの開発プライマリがReactJSを中心に展開している場合、これは本当に便利に見えます。.

PicoJS

JavaScriptライブラリ 顔検出を有効にします. 静止画や内蔵カメラで動作します。ここ数年でWeb技術がどのように進化するかは、本当に魅力的です。.