WebFundamentals - Best practices for modern web development

  •        57

Google Web Fundamentals

https://github.com/google/WebFundamentals

Dependencies:

chalk : ^1.1.3
del : ^2.2.2
fs-extra : ^4.0.1
github : ^8.1.1
globule : ^1.0.0
googleapis : ^12.4.0
gulp : ^3.9.1
gulp-rename : ^1.2.2
gulp-util : ^3.0.7
handlebars : ^4.0.5
handlebars-helpers : ^0.7.5
js-yaml : ^3.6.1
marked : ^0.3.6
mdast-util-to-string : ^1.0.2
minimist : ^1.2.0
mkdirp : ^0.5.1
moment : ^2.14.1
parse-diff : ^0.4.0
remark : ^6.2.0
remark-html : ^5.1.0
remark-lint : ^5.4.0
require-dir : ^0.3.0
rsync : ^0.5.0
run-sequence : ^1.2.2
unist-util-visit : ^1.1.1
vfile : ^2.0.1

Tags
Implementation
License
Platform

   




Related Projects

lighthouse - Auditing, performance metrics, and best practices for Progressive Web Apps

  •    Javascript

Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Lighthouse is integrated directly into the Chrome Developer Tools, under the "Audits" panel.

capacitor - Build cross-platform Native Progressive Web Apps for iOS, Android, and the web ⚡️

  •    HTML

Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom Native plugins that your app might need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores, and the mobile web. Capacitor is being designed by the Ionic Framework team as an eventual alternative to Cordova, though backwards compatibility with Cordova plugins is a priority and is actively being worked on. Capacitor can be used without Ionic Framework, but soon it'll become a core part of the Ionic developer experience.

hindsight - Internet history forensics for Google Chrome/Chromium

  •    Python

Hindsight is a free tool for analyzing web artifacts. It started with the browsing history of the Google Chrome web browser and has expanded to support other Chromium-based applications (with more to come!). Hindsight can parse a number of different types of web artifacts, including URLs, download history, cache records, bookmarks, autofill records, saved passwords, preferences, browser extensions, HTTP cookies, and Local Storage records (HTML5 cookies). Once the data is extracted from each file, it is correlated with data from other history files and placed in a timeline. The only field you are required to complete is "Profile Path". This is the location of the Chrome profile you want to analyze (the default profile paths for different OSes is listed at the bottom of this page). Click "Run" and you'll be taken to the results page in where you can save the results to a spreadsheet (or other formats).

chromedeveditor - Chrome Dev Editor is a developer tool for building apps on the Chrome platform - Chrome Apps and Web Apps, in JavaScript or Dart

  •    Dart

Chrome Dev Editor (CDE) is a developer tool for building apps on the Chrome platform - Chrome Apps and Web Apps, in JavaScript or Dart. CDE is built as a Chrome App written in Dart and uses Polymer. CDE runs on Windows, Mac, Linux, and Chrome OS! CDE supports Git, Polymer, and mobile development. Note: Chrome Dev Editor is no longer being actively developed. We'll do our best to merge your pull requests.

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

  •    TypeScript

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.


web-starter-kit - Web Starter Kit - a workflow for multi-device websites

  •    HTML

Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Helping you to stay productive following the best practices outlined in Google's Web Fundamentals. A solid starting point for both professionals and newcomers to the industry.Download the kit or clone this repository and build on what is included in the app directory.

expense-manager-demo - Progressive Web App (PWA) demo using Vaadin components

  •    HTML

This is an example project for how you can build a Progressive Web Application with Polymer and Vaadin components. The application uses a Service Worker to cache the Application Shell. A Web App Manifest file ensures that the browser identifies our app as a Progressive Web Application and offers the user to install the application through an install banner.

rendertron - A dockerized, headless Chrome rendering solution

  •    Javascript

Rendertron is a dockerized, headless Chrome rendering solution designed to render & serialise web pages on the fly. Rendertron is designed to enable your Progressive Web App (PWA) to serve the correct content to any bot that doesn't render or execute JavaScript. Rendertron runs as a standalone HTTP server. Rendertron renders requested pages using Headless Chrome, auto-detecting when your PWA has completed loading and serializes the response back to the original request. To use Rendertron, your application configures middleware to determine whether to proxy a request to Rendertron. Rendertron is compatible with all client side technologies, including web components.

wpt - Test suites for Web platform specs — including WHATWG, W3C, and others

  •    HTML

The web-platform-tests Project is a W3C-coordinated attempt to build a cross-browser testsuite for the Web-platform stack. Writing tests in a way that allows them to be run in all browsers gives browser projects confidence that they are shipping software that is compatible with other implementations, and that later implementations will be compatible with their implementations. This in turn gives Web authors/developers confidence that they can actually rely on the Web platform to deliver on the promise of working across browsers and devices without needing extra layers of abstraction to paper over the gaps left by specification editors and implementors. Clone or otherwise get https://github.com/web-platform-tests/wpt.

expenses - 💰Expense tracker using Google Sheets 📉 as a storage written in React

  •    Javascript

💰Expenses is a progressive web application on top of Google Sheets 📉 written in React ⚛️. It is only a static HTML that works great on mobile 📱 and can be deployed anywhere.Check out the demo but please be considerate and don't break it for others.

Weex - A framework for building Mobile cross-platform UI

  •    Javascript

Weex provides the ability to publish cross platform, so web, Android, and IOS apps can use the same API development functions. At the same time, it provides a rich extension of the native interfaces. In this way, it will be very convenient when you need to extend native components or modules.

sample-media-pwa - A sample video-on-demand media Progressive Web App

  •    Javascript

Please note: This app is being developed. There may be bugs, and everything is subject to change. This is a sample media app to demonstrate media functionality in the context of a Progressive Web App. The build of this site is being cataloged on YouTube as part of the Chrome Developers Developer Diary series.

crossbuilder - Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack

  •    Javascript

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are synced between background, injected page, app window, extension popup and badge.

optimizedhtml-start-template - OptimizedHTML is all-inclusive, optimized for Google PageSpeed start HTML5 template with Bootstrap (grid only), Gulp, Sass, Browsersync, Autoprefixer, Clean-CSS, Uglify, Imagemin, Vinyl-FTP (+Rsync) and Bower (libs path) support

  •    Javascript

OptimizedHTML is all-inclusive, optimized for Google PageSpeed start HTML5 template with Bootstrap (grid only), Gulp, Sass, Browsersync, Autoprefixer, Clean-CSS, Uglify, Imagemin, Vinyl-FTP and Bower (libs path) support. The template contains a .htaccess file with caching rules for web server. OptimizedHTML Start Template uses the best practices of web development and optimized for Google PageSpeed.

Chrome

  •    C++

Chrome browser is a product from Google and it is based on open source code <A HREF="http://code.google.com/p/chromium/" target="_blank">Chromium</A>.

frontend-bootcamp - Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

  •    TypeScript

In this two-day workshop you'll learn the basics of frontend development while building a working web app. The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.

Framework7 - Full Featured HTML Framework For Building iOS & Android Apps

  •    Javascript

Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping apps tool to show working app prototype as soon as possible in case you need to. The main approach of the Framework7 is to give you an opportunity to create iOS & Android apps with HTML, CSS and JavaScript easily and clear.

react-snap - 👻 Zero-configuration framework-agnostic static prerendering for SPAs

  •    Javascript

Pre-renders web app into static HTML. Uses headless chrome to crawl all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance. Zero configuration is the main feature. You do not need to worry how does it work or how to configure it. But if you are curious here are details.

ionic - Build amazing native and progressive web apps with open web technologies

  •    TypeScript

Ionic is the open-source mobile app development framework that makes it easy to build top quality native and progressive web apps with web technologies. Ionic is based on Web Components and comes with many significant performance, usability, and feature improvements over the past versions.