🚀ウェブ開発者のためのGithubの上の10の取引プロジェクト


週間のニュースレターとしてご利用いただけますwww.iainfreestone.com あなたが問題を逃すことを確実にするために.

lazysize
LazySizeは高速(ジョンク無料)、SEOにフレンドリーで自己のイメージのためのlazyloader(応答画像/srcsetを含む)、iframe、スクリプト/ウィジェットとはるかに.

aFarkas / lazysizes
画像のためのハイパフォーマンスとSEOフレンドリーな怠惰なローダ(応答と通常)、iframeとより多くの、それは、ユーザーの相互作用、CSSまたはJavascriptを設定せずにトリガされた任意の可視性の変化を検出します.
lazysize
LazySizeは、(ジョンク無料)、SEOフレンドリーで自己のイメージのためのlazyloaderpicture/srcset ), iframe、スクリプト/ウィジェットおよび大いに多く.また、ビュー内の重要性と知覚のパフォーマンスを高速化するために近いビューの要素を区別することによってリソースを優先順位付け.
また、応答画像を統合するあなたのナンバーワンのツールになることがあります.これは自動的に計算することができますsizes あなたの応答画像の属性は、それはあなたのためのメディアクエリを共有することができますmedia あなたのCSSとの属性は、コンテンツ/構造(HTML)から別のレイアウト(CSS)を支援し、それは任意の環境に本当に簡単に応答画像を統合することができます.また、その機能を拡張するオプションのプラグインのセットが含まれます.
ハウツー

  • ダウンロードlazysizes.min.js script そして、あなたのウェブページのlazysizeを含みます.(またはNPM経由でインストールします.npm install lazysizes --save または弓bower install lazysizes --save )
    <script src="lazysizes.min.js" async=""></

  • 2. Slate

    Slate helps you create beautiful, intelligent, responsive API documentation.

    slatedocs / slate

    Beautiful static documentation for your API


    Slate helps you create beautiful, intelligent, responsive API documentation.

    The example above was created with Slate. Check it out at slatedocs.github.io/slate.

    Features

    • Clean, intuitive design — With Slate, the description of your API is on the left side of your documentation, and all the code examples are on the right side. Inspired by Stripe's and PayPal's API docs. Slate is responsive, so it looks great on tablets, phones, and even in print.

    • Everything on a single page — Gone are the days when your users had to search through a million pages to find what they wanted. Slate puts the entire documentation on a single page. We haven't sacrificed linkability, though. As you scroll, your browser's hash will update to the nearest header, so linking to a particular point in the documentation is still natural and easy.

    • Slate is just Markdown — When you write docs with Slate, you're…


    3. Simplefolio

    A minimal portfolio template for Developers!

    cobidev / simplefolio

    ⚡️ A minimal portfolio template for Developers

    Simplefolio ⚡️

    A minimal portfolio template for Developers!


    IMPORTANT NOTE: New fastest version came out, built with React + Gatsby! 🎉🎉🎉 See more: Gatsby Simplefolio


    Features

    ⚡️ Modern UI Design + Reveal Animations
    ⚡️ One Page Layout
    ⚡️ Styled with Bootstrap v4.3 + Custom SCSS
    ⚡️ Fully Responsive
    ⚡️ Valid HTML5 & CSS3
    ⚡️ Optimized with Webpack
    ⚡️ Well organized documentation

    To view a demo example, click here


    Need of portfolio for a developer ☝️

    • Professional way to showcase your work
    • Increases your visibility and online presence
    • Shows you’re more than just a resume

    Getting Started 🚀

    These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

    Prerequisites 📋

    You'll need Git and Node.js (which comes with NPM) installed on…





    4. Skeleton

    Skeleton is a simple, responsive boilerplate to kickstart any responsive project.

    dhg / Skeleton

    Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development

    Skeleton

    Skeleton is a simple, responsive boilerplate to kickstart any responsive project.

    Check out http://getskeleton.com for documentation and details.

    Getting started

    There are a couple ways to download Skeleton:

    • Download the zip
    • Clone the repo: git clone https://github.com/dhg/Skeleton.git (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)

    What's in the download?

    The download includes Skeleton's CSS, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.

    Skeleton/
    ├── index.html
    ├── css/
    │   ├── normalize.min.css
    │   └── skeleton.css
    └── images/
        └── favicon.ico
    
    なぜそれは素晴らしいですか
    骨格は軽量でシンプルです.これは、生のHTML要素のみ(いくつかの例外があります)と応答グリッドを提供します.それ以上.
  • 約400行のCSSの未解決とコメント
  • これは出発点ではなく、UIのフレームワークです
  • コンパイルまたはインストール.ジャストバニラ
  • ブラウザサポート
  • クローム最新版
  • ファイヤーフォックス
  • オペラ.
  • View on GitHub

    devのアイコン
    Deviconは、開発言語やツールを表すすべてのロゴを収集することを目指しています.各アイコンは、いくつかのバージョンが付属しています:フォント/SVG、オリジナル/プレーン/ライン、色/色、ワードマーク/なしのワードマーク.
    Deviconは78のアイコンと200 +バージョンです.そしてそれは成長している!

    devicons / devicon
    プログラミング言語、デザイン&開発ツールを表すアイコンのセット







    Deviconは開発言語やツールを表すすべてのロゴを集めることを目指しています
    Demo
    .
    Request Icon
    .
    Contribute
    TLドクター
    <!-- in your header -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
    
    <!-- in your body -->
    <i class="devicon-devicon-plain"></i>

    Table of Contents

    1. About the project
    2. Getting started
    3. Requesting icon
    4. Contributing
    5. Discord server
    6. develop vs master
    7. Stale pull requests
    8. Go build yourself

    About the project

    Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark. Devicon has 150+ icons. And it's growing!

    See the devicon.json or our website for complete and up to date reference of all available icons.

    All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of

    6. minireset.css

    A tiny modern CSS reset that covers the basics.

    jgthms / minireset.css

    A tiny modern CSS reset

    minireset.css

    A tiny modern CSS reset that covers the basics:

    • resets the font sizes: so that using semantic markup doesn't affect the styling
    • resets the block margins: so that the spacing is only applied when you need it
    • resets tables: so that tabular data only takes the space it needs
    • preserves the inline paddings: so that buttons and inputs keep their default layout
    • sets the border-box box sizing: so that borders and paddings don't affect the set dimensions
    • sets responsive media elements: so that images and embeds scale with the browser width

    Download/Install

    Download the latest version

    npm install minireset.css

    Or clone the repo.

    Options

    It will be available in your modules directory in /node_modules/minireset.css/:

    • minireset.css: CSS rules
    • minireset.min.css: minified CSS rules (recommended for production sites)
    • minireet.sass: CSS rules written in SASS (recommended for SCSS/SASS projects)
    • minireset.css.lit.js: CSS rules…

    7. next-i18next

    The easiest way to translate your NextJs apps.

    isaachinman / next-i18next

    The easiest way to translate your NextJs apps.

    next-i18next

    The easiest way to translate your NextJs apps.

    If you are using next-i18next in production, please consider sponsoring the package with any amount you think appropriate.

    What is this?

    Although NextJs provides internationalised routing directly, it does not handle any management of translation content, or the actual translation functionality itself. All NextJs does is keep your locales and URLs in sync.

    To complement this, next-i18next provides the remaining functionality – management of translation content, and components/hooks to translate your React components – while fully supporting SSG/SSR, multiple namespaces, codesplitting, etc.

    While next-i18next uses i18next and react-i18next under the hood, users of next-i18next simply need to include their translation content as JSON files and don't have to worry about much else.

    A live demo is available here. This demo app is the simple example - nothing more, nothing less.

    Why next-i18next?

    Easy to set up, easy to…


    8. Recharts

    Recharts is a Redefined chart library built with React and D3.

    recharts / recharts

    Redefined chart library built with React and D3

    Recharts

    Introduction

    Recharts is a Redefined chart library built with React and D3.

    The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:

    1. Simply deploy with React components.
    2. Native SVG support, lightweight depending only on some D3 submodules.
    3. Declarative components, components of charts are purely presentational.

    Examples

    <LineChart
      width={400}
      height={400}
      data={data}
      margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
    >
      <XAxis dataKey="name" />
      <Tooltip />
      <CartesianGrid stroke="#f5f5f5" />
      <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
      <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId=

    9. Monaco Editor

    The Monaco Editor is the code editor which powers VS Code, with the features better described here.

    Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module.

    microsoft / monaco-editor

    A browser based code editor

    Monaco Editor

    The Monaco Editor is the code editor which powers VS Code, with the features better described here.

    Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module.

    Try it out

    Try the editor out on our website.

    Installing

    $ npm install monaco-editor
    
    次のようになります.
  • 内部esm : エディタのESMバージョン( webpackと互換性がある)
  • 内部dev : AMDバンドル
  • 内部min : とは、MD
  • 内部min-maps : ソースマップmin
  • monaco.d.ts : これはエディタのAPIを指定します(これは実際にバージョン管理されているものです.他のすべてはプライベートであると考えられており、どんなリリースでも壊れるかもしれません).
  • これは、開発に推奨されてdev バージョンを使用してmin バージョン.
    ドキュメント
  • を統合する方法を学ぶ.
  • View on GitHub

    レッドウッド
    Redwoodは、あなたが簡単にJamstackアプリケーションを構築して、配備することができる独断的で、完全なスタック、Serverlessなウェブアプリケーションフレームワークです.

    redwoodjs / redwood
    Jamstackに完全なスタックをもたらす.

    レッドウッド
    トムプレストンヴェルナー、ピーターピストニウス、ロブカメロン、デビッド価格、および200以上の驚くべき貢献者(フルリストのファイルの最後を参照してください).
    Redwoodは独断的で、完全なスタックで、ServerlessなWebアプリケーションフレームワークです
    これにより、Jamstackアプリケーションを簡単に構築、配備できます.
    反応するフロントエンドを想像してください.
    あなたのバックエンドは、世界中のAWSgit push —それはレッドウッドです.あなたのために多くの決定をすることによって
    あなたは、あなたのアプリケーションを特別なものにする仕事をします
    種々の技術と構成を選択し再循環するサイクルプラス
    レッドウッドは適切なフレームワークですので、継続的なパフォーマンスから利益を得る
    と時間をかけて機能アップグレードと最小限の労力で.
    Redwoodは、トムプレストンWerner(Github(惑星の最も人気のあるコードホスト)の共同創設者)によって始められる最新のオープンソースプロジェクトです.
    View on GitHub
    週間のニュースレターとしてご利用いただけますwww.iainfreestone.com あなたが問題を逃すことを確実にするために.
    あなたは私が定期的にHTML、CSSとJavaScriptに関連するバイトサイズのヒントを投稿するTwitter上でこの記事を楽しむことができれば.