Skip to content

/ WebFundamentals

Best practices for modern web development
html best-practices javascript css mobile-web chrome chrome-browser html5 web web-app progressive-web-app
HTML JavaScript Python Other
  1. HTML 83.8%
  2. JavaScript 9.1%
  3. Python 6.1%
  4. Other 1.0%
Branch: master
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP

Latest commit

@jpmedley @petele
jpmedley and petele Depsrems (#8734) 
* Deprecations and Removals 84.

* Fix errors.

* typo fix

* Last minute updates.

Co-authored-by: Pete LePage <pete.lepage@pobox.com>
Latest commit 78a7860 May 28, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add guide on JS modules (#6272) Jun 18, 2018
gae Force DevSite v1 styles (#8168) Sep 25, 2019
gulp-tasks Adds support for tools menu (#8735) May 28, 2020
src Depsrems (#8734) May 28, 2020
tools Force DevSite v1 styles (#8168) Sep 25, 2019
.csslintrc Just file moves: Jan 5, 2015
.eslintrc Add Puppeteer to /web/tools/ (#5644) Jan 16, 2018
.gitignore Force DevSite v1 styles (#8168) Sep 25, 2019
.gitlocalize.yml [GitLocalize] Advise contributors that translations are no longer rev… Apr 27, 2020
.gitmodules Fixing the build Sep 9, 2015
.jscsrc Moves next-version into master Oct 12, 2016
.jshintrc Removing existing files, will add under old/ Jun 30, 2015
.nvmrc Update to Node.js v10 (#6769) Oct 30, 2018
.travis.yml Update to Node.js v10 (#6769) Oct 30, 2018
CONTRIBUTING.md Update link to new styleguide in CONTRIBUTING (#4756) Jun 26, 2017
LICENSE Moves next-version into master Oct 12, 2016
README.md docs: remove period (#8202) Oct 8, 2019
TRANSLATION.md Point to new translation guide Jul 6, 2016
WebFu.code-workspace Adds a vscode-workspace file (#7940) Jul 30, 2019
app.yaml Minor tweaks to the updates templates Oct 23, 2018
appengine_config.py Moves next-version into master Oct 12, 2016
appengine_main.py Desktop PWA refactor (#6731) Oct 16, 2018
devsiteHelper.py Propose fix typo for occurred (#5757) Feb 8, 2018
devsiteIndex.py Improved template support (#5656) Jan 17, 2018
devsitePage.py Migrates Hacked guides into WebFu (#5233) Dec 22, 2017
devsiteParseHTML.py Font update & Code Highlighting (#6420) Jul 24, 2018
devsiteParseMD.py Font update & Code Highlighting (#6420) Jul 24, 2018
devsiteParseYAML.py Fixes variable check Sep 19, 2018
gcloud-client-secret.json.enc Migrate to Travis CI from Drone (#4143) Feb 6, 2017
gulpfile.js Makes building RSS/ATOM feeds optional (#6225) Jun 5, 2018
package.json Updats for WB 5.1.2 (#8585) Mar 26, 2020
start-appengine.sh Force DevSite v1 styles (#8168) Sep 25, 2019

README.md

Web Fundamentals on DevSite

Build Status

Welcome to the new WebFundamentals! 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 you have Node 10 or greater, and the AppEngine SDK for Python already installed.

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

Build 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

Start 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.

Update 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

Start the development server

  1. Run npm start

Test 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
You can’t perform that action at this time.