• Stars
    star
    2,202
  • Rank 20,952 (Top 0.5 %)
  • Language
    CSS
  • Created almost 13 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍟 The definitive front-end performance guide

How to lose weight (in the browser) Build Status

The definitive front-end performance guide.

image

Contributing

If you want to add new tips or edit the existing ones, just go to the src/documents folder. There you can find all of them in Markdown (.md) format. Remember to add references on each tip that you write at References wiki.

Instructions

How can I locally run the project?

  1. Install Git and NodeJS, if you don't have them already.

  2. Open your terminal and download DocPad through this command:

$ [sudo] npm install -g [email protected]
  1. Now clone it:
$ git clone [email protected]:<your-github-username>/browser-diet.git
  1. Then go to the project's folder:
$ cd browser-diet
  1. Install all dependencies:
$ npm install
  1. And finally run:
$ docpad run

Now you can see the website running at localhost:9778 :D

How can I run another language version?

Simply go to the docpad.coffee file and change the value of the currentLang variable.

Then you just need to run docpad run again.

Browser Support

We do care about it.

IE Chrome Firefox Opera Safari
IE 9+ Latest Latest Latest Latest

Structure

This project uses DocPad, a static generator in NodeJS, and here's the basic structure:

.
|-- out/
|-- src/
|   |-- documents
|   |-- layouts
|   |-- partials
`-- package.json

out/

This is where the generated files are stored, once DocPad has been run. However, this directory is unnecessary for versioning, so it is ignored (.gitignore).

src/documents

Contains all tips in Markdown (.md) format, in addition to images, fonts, CSS and JS files.

src/layouts

Contains the default template.

src/partials

Contains reusable blocks of code.

package.json

Lists all NodeJS dependencies.

Team

BrowserDiet was made with love by these people and a bunch of awesome contributors.

Creator

Zeno Rocha
Zeno Rocha
Liferay, Inc.

Design

Briza Bueno
Briza Bueno
Americanas

Authors

Davidson Fellipe Giovanni Keppelen Jaydson Gomes
Davidson Fellipe
Globo.com
Giovanni Keppelen
Planedia
Jaydson Gomes
Terra

Reviewers

Marcel Duran Renato Mangini Sérgio Lopes
Marcel Duran
Twitter
Renato Mangini
Google
Sérgio Lopes
Caelum

Translations

Mike Taylor Emilio Álvarez Lukasz Jakub Fordlee Nicolas Carlo Tomas Dvorak Makoto Tateno
Mike Taylor
English
Emilio Álvarez
Spanish
Lukasz Jakub
Polish
Fordlee
Chinese
Nicolas Carlo
French
Tomas Dvorak
Czech
Makoto Tateno
Japanese

Credits

Fonts

Illustrations

License

Code is under MIT license and content is under Creative Commons BY-SA 3.0

More Repositories

1

clipboard.js

✂️ Modern copy to clipboard. No Flash. Just 3kb gzipped 📋
JavaScript
34,022
star
2

alfred-workflows

🤘 A collection of Alfred 3 and 4 workflows that will rock your world
12,272
star
3

voice-elements

🔈 Web Component wrapper to the Web Speech API, that allows you to do voice recognition and speech synthesis using Polymer
HTML
1,355
star
4

codecopy

A browser extension that adds copy to clipboard buttons on every code block
JavaScript
1,029
star
5

sublime-javascript-snippets

JavaScript & NodeJS Snippets for Sublime Text 2/3
JavaScript
465
star
6

zenorocha.com

My personal website ❤️
JavaScript
404
star
7

jquery-github

A jQuery plugin to display your Github Repositories
JavaScript
276
star
8

diveintohtml5

A portuguese translation of Dive Into HTML5 online book
HTML
200
star
9

delegate

Lightweight event delegation
JavaScript
183
star
10

atom-javascript-snippets

JavaScript & NodeJS Snippets for Atom Editor
168
star
11

select

Programmatically select the text of a HTML element
JavaScript
165
star
12

generator-firefox-os

Yeoman generator for Firefox OS apps
JavaScript
147
star
13

good-listener

A more versatile way of adding & removing event listeners
JavaScript
142
star
14

browser-calories

🍰 The easiest way to measure your performance budget
JavaScript
131
star
15

wormz

HTML5 Canvas Experiment featured in Chrome Experiments
JavaScript
113
star
16

my-coding-style

My own coding conventions for JavaScript development ⚡
77
star
17

ama

💬 Ask me anything!
71
star
18

sublime-preferences

The whole list of plugins, snippets and settings that I use on Sublime Text
60
star
19

14habits.com

The source code of 14habits.com
JavaScript
48
star
20

avatar-elements

Under construction 🚧 Avatars made easy with Web Components
JavaScript
35
star
21

document.queryCommandSupported

Polyfill for document.queryCommandSupported that fixes known bugs on Gecko and Blink
JavaScript
30
star
22

HTML5-Canvas

HTML5 tutorial about Canvas + Three.js
JavaScript
28
star
23

dracula-theme

HTML
24
star
24

talks

Slides (and more) from my presentations
JavaScript
22
star
25

old-dotfiles

My OS X dotfiles.
Shell
17
star
26

Estudos-Java

Resolução de exercícios por Zeno Rocha da matéria de Projeto e Construções de Sistemas, lecionada pelo professor Alexandre Correa na Universidade Federal do Estado de Rio de Janeiro.
Java
16
star
27

browser-calories-api

🍦 Microservice that fetches Web Performance metrics
JavaScript
15
star
28

HTML5-Local-Storage

HTML5 tutorial about the Web Storage API - http://goo.gl/ZDsdz
JavaScript
12
star
29

zenorocha

10
star
30

mintlify-emails

💌 Mintlify Emails
TypeScript
10
star
31

wedeploy-ui

🎨 The new set of UI components behind WeDeploy.com, Console, and Admin
CSS
8
star
32

infisical-emails

💌 Infisical Emails
JavaScript
8
star
33

bytetalk

JavaScript
7
star
34

booth-emails

💌 Booth.ai Emails
TypeScript
6
star
35

HTML5-Script

HTML5 demo testing async atributte on script tag
5
star
36

outerbase-emails

💌 Outerbase emails
TypeScript
4
star
37

web-log

My online trail
3
star
38

sante-emails

TypeScript
3
star
39

infinia-emails

💌 Infinia Emails
TypeScript
3
star
40

spawn-local-bin

A child_process.spawn wrapper that inherits stdio and adds local bin's to the process.env path
JavaScript
3
star
41

vercel-resend-integration

TypeScript
2
star
42

zenorocha.github.io

CSS
2
star
43

react-email-docs

2
star
44

wedocs

Documentation for WeDeploy
2
star
45

railway-emails

TypeScript
2
star
46

raycast-emails

TypeScript
2
star
47

resend-ruby-example

This example shows how to use Resend with Ruby
Ruby
1
star
48

liferay-learn-old

HTML
1
star
49

compound-emails

TypeScript
1
star
50

liveblocks-emails

TypeScript
1
star
51

max-emails

TypeScript
1
star