All Projects → google → Webfundamentals

google / Webfundamentals

Licence: apache-2.0
Best practices for modern web development

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
python
139335 projects - #7 most used programming language
CSS
56736 projects
Handlebars
879 projects
Smarty
1635 projects

Projects that are alternatives of or similar to Webfundamentals

Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (-93.53%)
Mutual labels:  chrome, html5, progressive-web-app
Web.dev
The frontend, backend, and content source code for web.dev
Stars: ✭ 2,370 (-80.79%)
Mutual labels:  web-app, progressive-web-app, mobile-web
Awesome Meta And Manifest
⚡ Awesome collection of meta tags & manifest properties.
Stars: ✭ 499 (-95.95%)
Mutual labels:  chrome, html5, progressive-web-app
quiz-app
🏆 QuizApp is a free and open-source quiz application that lets you play fully customized quizzes right in the browser.
Stars: ✭ 97 (-99.21%)
Mutual labels:  progressive-web-app, web-app, mobile-web
Alumna
[Alpha release of v3] Development platform for humans / Plataforma de desenvolvimento para humanos
Stars: ✭ 32 (-99.74%)
Mutual labels:  web-app, progressive-web-app
Whatwebcando
An overview of the device integration HTML5 APIs
Stars: ✭ 756 (-93.87%)
Mutual labels:  html5, mobile-web
H5ui
Lightweight, elegant open source mobile UI style library.
Stars: ✭ 44 (-99.64%)
Mutual labels:  html5, mobile-web
Scalajs Bootstrap
Scala.js bootstrap components
Stars: ✭ 55 (-99.55%)
Mutual labels:  web-app, html5
Vux
Mobile UI Components based on Vue & WeUI
Stars: ✭ 17,573 (+42.46%)
Mutual labels:  web-app, mobile-web
Awesome Mobile Web Development
All that you need to create a great mobile web experience
Stars: ✭ 1,046 (-91.52%)
Mutual labels:  best-practices, mobile-web
Theorytracker
🎼 HTML5/WebAudio multi-track functional harmony analysis and songwriting app! -- https://hlorenzi.github.io/theorytracker/
Stars: ✭ 62 (-99.5%)
Mutual labels:  web-app, html5
Jspaint
🎨 Classic MS Paint, REVIVED + ✨Extras
Stars: ✭ 5,972 (-51.58%)
Mutual labels:  web-app, html5
Code Standards
Isobar Front-end development coding standards. Memorize them BY HEART.
Stars: ✭ 1,341 (-89.13%)
Mutual labels:  best-practices, html5
Sillynium
Automate the creation of Python Selenium Scripts by drawing coloured boxes on webpage elements
Stars: ✭ 100 (-99.19%)
Mutual labels:  chrome, html5
Theannoyingsite.com
The Annoying Site a.k.a. "The Power of the Web Platform"
Stars: ✭ 446 (-96.38%)
Mutual labels:  web-app, html5
Mopaint
🎨💪 Modern, modular paint and more! (pre-alpha, not much done yet)
Stars: ✭ 50 (-99.59%)
Mutual labels:  web-app, html5
Generator Jekyll Starter Kit
🚀 Jekyll Progressive Web App Generator.
Stars: ✭ 139 (-98.87%)
Mutual labels:  best-practices, progressive-web-app
Frontendwingman
Frontend Wingman, Learn frontend faster!
Stars: ✭ 315 (-97.45%)
Mutual labels:  chrome, html5
Melonjs
a fresh & lightweight javascript game engine
Stars: ✭ 3,721 (-69.83%)
Mutual labels:  chrome, html5
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-99.33%)
Mutual labels:  web-app, mobile-web

Web Fundamentals on DevSite

Build Status License

Welcome to the new Web Fundamentals! An effort to showcase best practices and tools for modern Web Development.

What's changed?

  • We're now using the DevSite infrastructure
    • New style guide
    • New widgets allow inline JavaScript, common links, related guide and more
  • Jekyll has been eliminated. Instead, pages are rendered at request time
  • Front-matter has been eliminated from the markdown, but files now require a simple set of tags

What stays the same?

Cloning the repo

If you have a high-bandwidth connection, I recommend starting with a fresh clone of the repo.

git clone https://github.com/google/WebFundamentals.git

Getting set up

The new DevSite infrastructure simplifies the dependencies a lot. Ensure that you have Python, Node 10-12, and the Google Cloud SDK already installed.

Login to Google Cloud via command line.

  1. Run npm install (needed for the build process)

Building the auto-generated files

Some files (contributors includes, some pages for updates, showcases, etc.) are automatically generated. The first time you clone the repo and run npm install, this is done for you. However, when you add a case study, update, etc., you'll need to re-build those files using:

npm run build

Starting Local Server

To view the site locally, just run:

npm start

Note: The first time you start the server, you may need to run start-appengine.sh and answer any prompts provided by dev_appserver.py.

Updating the code labs

To update the Code Labs, you'll need the claat tool and access to the original Doc files. This will likely only work for Googlers.

  1. Download the claat tool and place it in your tools directory
  2. Run tools/update-codelabs.sh
  3. Check the latest changes into GitHub

Starting the development server

  1. Run npm start in the terminal.

Testing your changes before submitting a PR

Please run your changes through npm test before submitting a PR. The test looks for things that may cause issues with DevSite and tries to keep our content consistent. It's part of the deployment process, so PRs will fail if there are any errors! To run:

npm test
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].