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

今月のFresh Resoucesは、前の月とは少し異なります。私たち、Web開発者は、急速に変化する業界で活躍しています。Google、Microsoft、Firefox、PHPなど、いくつかの大手テクノロジー企業から発表があり、それによって私たちの構築方法が変わります。ウェブ.

今回の記事では、私たちのリストの半分は、これらの発表に関するものです。だから、未来に挨拶する準備をしなさい!

必須画像の最適化

それは Web用に画像を最適化するための包括的な記事 Addy Osmaniによって書かれました。ハウツーを中心に展開している他の記事のようなものではありません。.

この記事では、実際に技術的な詳細と、 最適化の背後にある科学. また、いくつかの最適化方法と画像フォーマットに関する詳細な情報もあります。, ツール、ヒント、そして実例.

PHP 7.2

包括的な PHP 7.2にやってくるものに関するリファレンス. PHPアプリケーションのパフォーマンスを向上させる追加機能以外に、PHP 7.2にも付属しています。 いくつかのものが削除される予定の減価償却 そしてもう使われるべきではない.

PHP 7.2では、廃止予定の2つの関数があります。 create_function（） そして __autoload（）. あなたがWeb開発者なら, コードを確認して必要な変更を加える. 私はまだこれら二つの機能を使用している数多くのWordPressプラグインを見ました.

Web共有API

私は正直にしてこのAPIがWebに登場するのを見ませんでした。ただし、Web上での対話の半分は “分かち合う”, このAPIは物事を大きくするでしょう Web開発者がネイティブ共有エクスペリエンスを構築するのがより簡単に, 特にモバイルプラットフォームでは.

このAPIは現在Google Chrome for DesktopおよびAndroidでのみ利用可能です。実際にそれを見るためにこのYouTubeのビデオをチェックしてください.

画像非同期属性

ウェブに革命をもたらすもう一つのことは、 非同期 img要素の属性です。これを書いている時点では、いくつかのアプローチがあります。 画像を非同期的にロードする. すぐに追加できるようになります async = on に img 素子.

Firefox Quantum

Mozillaはコードネームといういくつかの改良を加えてFirefoxに積極的にアップデートを進めています。 “プロジェクト量子”. これにはQuantum CSSが含まれています。 非常に速いCSSレンダリング、新しいUI、そして新しいDevTools.

リリースは Web開発者に牽引力を得る メインブラウザをFirefoxに切り替えた人もいます。 Quantum DOMやWebRenderなど、このプロジェクトには他にもたくさんあります。 Firefox QuantumエンジンをベースにしたNode.jsの候補が登場するのでしょうか。ええ、おそらくそうです.

iOSおよびAndroid用のMS Edge

Microsoftが発表したばかり 最新のブラウザEdgeをiOSとAndroidにリリース. これはあなたのウェブサイトがもう一つテストするブラウザがあることを意味します。.

グーテンベルク

WordPressは現在野心的なプロジェクト、コードグーテンベルグに取り組んでいます。グーテンベルクは ほぼ完全にJavaScriptで構築されたWordPressエディタへの改装.

この時点で、グーテンベルクは Reactで構築された しかし、プロジェクトはPreact、Vue、または何か他のもののような別のフレームワークを検討しています。今のところ複雑な状況です。そのため、テーマやプラグインを作成するWordPress開発者にとっては、次のようにプロジェクトに注目してください。 それはWordPressの作り方を永遠に変えるでしょう.

FoitFout

FoitFoutは、FOITとFOUTと呼ばれる2つの異なるアプローチを比較するのに便利なツールです。 Webにカスタムフォントを読み込む. このツールを使用すると、2つのアプローチをエミュレートし、どちらのアプローチが自分のサイトに最も適しているかを判断できます。.

ブエラ

Vueraは VueとReactを一緒に使用できるようにするJavaScriptライブラリ. からVueコンポーネントを含めることができます。 .ヴュー またはVueのReactコンポーネントを使用してください。あなたのチームは今することができます どのフレームワークでもより生産的 彼らが使うのを好むこと.

ドラッグ可能

“ドラッグ可能” Shopifyから素晴らしいライブラリです。ネイティブブラウザ上に構築されています ドラッグアンドドロップAPIを使用すると、幅広いAPIを使用できます。. 場合によっては、それはあなたが必要とする何かを提供しません、あなたは書くことができます 機能を拡張するためのカスタムモジュール. デモをチェックして動作を確認してください。.

フローチャートJS

その名前が示すように、FlowchartJSは PowerPointのようにフローチャートを作成できるライブラリ. 同様に、円、楕円、正方形、菱形、三角形など、さまざまな形のチャートを作成できます。.

クイック請求

軽量で 請求書を作成する簡単なWebアプリケーション. ネイティブのブラウザテクノロジとAPIを使用して実行するため、アカウントは必要ありません。 Webサイトにアクセスして請求書にアイテムを追加し、PDFファイルを生成するだけです。それでおしまい!

モッカ

モッカは Webサイトのプロトタイプ作成に使用できるコンテンツプレースホルダ. 500バイトしかなく、完全にカスタマイズ可能です。 Sass mixinを使用すると、プロジェクトのCSSファイルに簡単に含めることができます。.

の CSSはいくつかのクラスを提供します 含む モッカメディア 画像プレースホルダーを作成する, モッカ見出し 見出しを作成する モカテキスト 任意のテキストを作成する.

VueStar

VueStarは アイコンをクリックしたときに輝く効果を追加するVueコンポーネント, Twitterがすることに似ている “心臓” 彼らの携帯アプリのアイコン。コンポーネントは、という名前の新しい要素を導入します。 ヴュースター あなたがウェブ時代にそれを加えることができるところ。そして、あなたは終わりました!

グリッドプレイグラウンド

CSS GridはWeb上にレイアウトを構築するための新しい概念を導入し、それが持っている多数の新しい特性を考えると、一見するとそれは一種の複雑なものです。.

GridPlaygroundは基本的には CSSグリッドを教え、CSSグリッドの採用を推進するMozillaのイニシアチブ. Firefoxでもグリッドレイアウトを検査するための新しいツールがDevToolsに用意されています.

スニペットマネージャ

“スニペットマネージャ” 簡単です コードスニペットを保存および管理するためのアプリ. 新しいアイテムを作成し、コードを貼り付けて、ポイントを設定できます。この時点では、それほど派手ではなく、NPMを使用してコンパイルする必要があるソースコードのみが提供されています。.

タブ付きインタフェース

素晴らしい JavaScriptを最小限に抑えてプログレッシブでアクセス可能なタブナビゲーションを構築するためのウォークスルー. アクセシブルデザインについてもっと知りたい人のための素晴らしいリソース.

SwissInCSS

SwissInCSSは、CSS以外のものを使用しない、いくつかの古典的なスイスのポスターデザインを展示しています。ソースコードはCodePenで利用可能です.