Displaying 1 to 20 from 29 results

webpack.js.org - New repository for webpack documentation and more!

  •    Javascript

Guides, documentation, and all things webpack.We haven't created issues for the other sections yet, but they will be coming soon. For dev-related work please see General - Current Longterm Plan, which will soon be replaced by a more dev-specific issue.

Webpack - A bundler for javascript and friends

  •    Javascript

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Mozjpeg - Improved JPEG encoder

  •    C

MozJPEG reduces file sizes of JPEG images while retaining quality and compatibility with the vast majority of the world's deployed decoders.MozJPEG is based on libjpeg-turbo. It's compatible with libjpeg API and ABI, and can be used as a drop-in replacement for libjpeg. MozJPEG makes tradeoffs that are intended to benefit Web use cases and focuses solely on improving encoding, so it's best used as part of a Web encoding workflow.

browser-perf - Performance Metrics for Web Browsers

  •    Javascript

Read more on why browser-perf here. Please see the wiki pages for more information. You can find information about supported browsers, getting started, command line usage, reference for the Node API etc.




guess - Libraries & tools for enabling Machine Learning driven user-experiences on the web

  •    TypeScript

Libraries and tools for enabling data-driven user-experiences on the web. Install and configure GuessPlugin - the Guess.js webpack plugin which automates as much of the setup process for you as possible.

quicklink - ⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time

  •    Javascript

This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (< 1KB minified/gzipped). You can also grab quicklink from unpkg.com/quicklink.

Performance - Client side performance tool

  •    Javascript

In short about: This is an npm package to display statistics about your web pages, information such as CSS resources count, Google PageSpeed Insights score, information on how to fix performance issues, HTML errors and more in one custom web page. Tech details: This package mainly uses three plugins w3cjs (HTML test errors, warnings etc), Google PageSpeed Insights (a lot information, for example: how to fix main load/performance issues, load times...) and dev-perf (number of 404 errors, number of images without dimensions etc), The information collected is then displayed in an AngularJS based webpage.

perfjankie - Checking browser rendering performance regression

  •    Javascript

PerfJankie is a tool to monitor smoothness and responsiveness of websites and Cordova/Hybrid apps over time. It runs performance tests using browser-perf and saves the results in a CouchDB server. It also has a dashboard that displays graphs of the performance metrics collected over time that you help identify performance trends, or locate a single commit that can slow down a site. After running the tests, navigate to the following url to see the results dashboard.


yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

guess-next - 🔮 Demo application showing the integration of Guess.js with Next.js

  •    Javascript

Guess.js is a collection of libraries & tools for enabling data-driven user-experience on the web. In this particular example, we combine Guess.js with Next.js to introduce predictive prefetching of JavaScript bundles. Based on user navigation patterns collected from Google Analytics or other source, Guess.js builds a machine-learning model to predict and prefetch JavaScript that will be required in each subsequent page.

aurelia - Aurelia vNext

  •    TypeScript

This is the Aurelia vNext monorepo, containing core and plugin packages, examples, and documentation for the next major version of Aurelia. To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, look around our Discourse forums, chat in our community on Gitter, or use stack overflow.

progress-bar-animation - Making a Doughnut Progress Bar - research notes

  •    Javascript

Looking through the different CSS pie chart implementations I decided that CSS is not fitted for the job. All solutions were hacks that would be hard to control. I was also worried that it will be cumbersome to make it work on all the browsers that we support. Canvas, with almost universal support, seemed more appealing. However, canvas would require me to implement timing (e.g. easing functions) and scaling (to support higher dpis) myself. Besides, I though that it would not utilize GPU as well as CSS transitions/transforms. SVG seemed like the best of both worlds: it's universally supported, doesn't need any hacks to create a required shape, utilizes CSS transitions to create animations and fits all screen dpis out of the box. So, I dusted off my SVG knowledge and started coding. Happy with the result, I sprinkled it with some CSS magic and made a short video showing it in action.

prefetch

  •    JQuery

A jQuery plugin to make it easier to prefetch page assets for priming the browser cache. Speeds up the page load times of subsequent page requests.

perfume

  •    TypeScript

Perfume is a JavaScript library for measuring Short and Long Script, First Contentful Paint (FCP), Time to Interactive (TTI), Component First Paint (CFM), annotating them to the DevTools timeline and reporting the results to Google Analytics.When a user navigates to a web page, they're typically looking for visual feedback to reassure them that everything is going to work as expected.

karma-telemetry - Karma Framework for running performance tasks using Telemetry

  •    Javascript

Adapter for running the Chromium Telemetry performance benchmarks for Karma. This plugin runs with Karma and is ideal for testing the rendering performance of components in frameworks. It reports various rendering metrics like first paint time, mean frame time, load time, etc. It can be integrated with continuous integration systems to ensure that the performance of components do not degrade over time.

perfslides - Slides and demo for PerfJankie/BrowserPerf

  •    CSS

A sample website to demonstrate the use of browser-perf and perfkanie

protractor-perf - E2E test framework to check for performance regressions in Angular apps

  •    Javascript

Just like Protractor is the end to end test case runner for AngularJS to check for functional regressions, this project is a way check for performance regressions while reusing the same test cases. Install protractor-perf using npm install -g protractor-perf.

helium-cli - A tool to detect unused CSS across multiple web pages

  •    Javascript

A command-line tool to discovery unused CSS accros multiple pages based on phantomjs, which is inspired by project helium-css. If you already has phantomjs installed and also curl in your machine, and you really don't want to download phantomjs again due to some reason. Then you can clone this repository and remove the "phantomjs" "request" dependencies in the package.json.

minimalcss - Extract the minimal CSS used in a set of URLs with puppeteer

  •    Javascript

A Node library to extract the minimal CSS used in a set of URLs with puppeteer. Used to find what minimal CSS is needed to render on first load, even with document.onload executed. This minimal CSS is also known as critical path CSS and ultimately a web performance technique to make web pages load faster at initial load.

Surf-N-Perf - Micro-library for gathering web page performance data

  •    Javascript

Micro-library for gathering frontend web page performance data. Surf-N-Perf provides a simple to use API to gather User Timing and other important performance data in any browser.