Skip to content

Commit 5e7e573

Browse files
committed
chore(editor): added .editorconfig and fixed indentation at corresponding files
1 parent 10d3397 commit 5e7e573

File tree

9 files changed

+104
-94
lines changed

9 files changed

+104
-94
lines changed

.editorconfig

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
tab_width = 2
8+
end_of_line = lf
9+
charset = utf-8
10+
trim_trailing_whitespace = true
11+
insert_final_newline = true

public/manifest.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
{
2-
"name": "Codelabs",
3-
"short_name": "Codelabs",
4-
"icons": [
5-
{
6-
"src": "./android-chrome-192x192.png",
7-
"sizes": "192x192",
8-
"type": "image/png"
9-
},
10-
{
11-
"src": "./android-chrome-512x512.png",
12-
"sizes": "512x512",
13-
"type": "image/png"
14-
}
15-
],
16-
"orientation": "portrait",
17-
"theme_color": "#1976d2",
18-
"background_color": "#fff",
19-
"display": "standalone"
2+
"name": "Codelabs",
3+
"short_name": "Codelabs",
4+
"icons": [
5+
{
6+
"src": "./android-chrome-192x192.png",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
},
10+
{
11+
"src": "./android-chrome-512x512.png",
12+
"sizes": "512x512",
13+
"type": "image/png"
14+
}
15+
],
16+
"orientation": "portrait",
17+
"theme_color": "#1976d2",
18+
"background_color": "#fff",
19+
"display": "standalone"
2020
}

src/reset.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,33 @@ article, aside, canvas, details, embed,
1515
figure, figcaption, footer, header, hgroup,
1616
menu, nav, output, ruby, section, summary,
1717
time, mark, audio, video {
18-
margin: 0;
19-
padding: 0;
20-
border: 0;
21-
font-size: 100%;
22-
font: inherit;
23-
vertical-align: baseline;
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font: inherit;
23+
vertical-align: baseline;
2424
}
2525
/* HTML5 display-role reset for older browsers */
2626
article, aside, details, figcaption, figure,
2727
footer, header, hgroup, menu, nav, section {
28-
display: block;
28+
display: block;
2929
}
3030
body {
31-
line-height: 1;
31+
line-height: 1;
3232
}
3333
ol, ul {
34-
list-style: none;
34+
list-style: none;
3535
}
3636
blockquote, q {
37-
quotes: none;
37+
quotes: none;
3838
}
3939
blockquote:before, blockquote:after,
4040
q:before, q:after {
41-
content: '';
42-
content: none;
41+
content: '';
42+
content: none;
4343
}
4444
table {
45-
border-collapse: collapse;
46-
border-spacing: 0;
45+
border-collapse: collapse;
46+
border-spacing: 0;
4747
}

src/step-3/AppShell.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import filmStrip from './filmstrip.png';
77

88
class AppShell extends Component {
99
render() {
10-
const appShellCode =
10+
const appShellCode =
1111
`<!-- Header -->
1212
<header class="header">
1313
<div class="header__container">
@@ -34,8 +34,8 @@ class AppShell extends Component {
3434

3535
return(
3636
<div className="introduction appshell">
37-
<h1>App Shell Architecture</h1>
38-
<p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to power the application user interface.</p>
37+
<h1>App Shell Architecture</h1>
38+
<p>An app shell architecture is minimal level <span className="highlight bold no--bg">HTML, CSS, Javascript</span> required to power the application user interface.</p>
3939

4040
<h3>Components for App Shell</h3>
4141
<ul className="">
@@ -49,7 +49,7 @@ class AppShell extends Component {
4949
<Highlight lang='html' value={appShellCode} />
5050

5151
<i><b>Screenshot:</b></i>
52-
52+
5353
<div className="offline__container">
5454
<img src={appShellImg} alt="app shell" />
5555
</div>
@@ -63,7 +63,7 @@ class AppShell extends Component {
6363
<div className="offline__container">
6464
<img src={appShellRepeated} alt="devTools network panel" />
6565
</div>
66-
66+
6767
<b>Test 2: Webpagetest</b>
6868
<p>In webpagetest, we measured the same site in <span className="highlight bold no--bg">Chrome - 3G</span>. Load time for repeat visits was <span className="highlight bold no--bg">3.015s</span> Results are below.</p>
6969

@@ -79,8 +79,8 @@ class AppShell extends Component {
7979
<li><a href="flipkart.com" target="_blank">Flipkar Lite</a></li>
8080
<li><a href="housing.com" target="_blank">Housing.com</a> mobile site</li>
8181
</ul>
82-
83-
<Note type="facts">
82+
83+
<Note type="facts">
8484
<p><span>Facts: </span> Using app shell model, <a href="housing.com" target="_blank">Housing.com</a> were able to load the page 30% faster than before. Read thier full case study <a href="https://developers.google.com/web/showcase/2016/pdfs/housing.pdf" target="_blank">here</a>.</p>
8585
</Note>
8686
</div>

src/step-5/Offline.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import Note from '../Note';
66

77
class Offline extends Component {
88
render() {
9-
const offlineEvent = `/* app.js */
9+
const offlineEvent = `/* app.js */
1010
1111
//After DOM load
12-
document.addEventListener('DOMContentLoaded', function(event) {
12+
document.addEventListener('DOMContentLoaded', function(event) {
1313
var headerElement = document.querySelector('.header');
1414
var menuElement = document.querySelector('.menu__header');
1515
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
2828
headerElement.style.background = '';
2929
menuElement.style.background = '';
3030
});
31-
31+
3232
//To change the header colors
3333
function goOffline() {
3434
var greyColor = '#9E9E9E';
@@ -55,11 +55,11 @@ document.addEventListener('DOMContentLoaded', function(event) {
5555

5656
<p>More details about <a href="https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage">Cache API</a>.</p>
5757

58-
<h2>Offline/Online Events</h2>
59-
<p>By using <span className="highlight bold no--bg">offline/online events</span>, we can let the user know when he is offline or call an API when he has connectivity again.</p>
60-
61-
<Highlight lang='javascript' value={offlineEvent} />
62-
58+
<h2>Offline/Online Events</h2>
59+
<p>By using <span className="highlight bold no--bg">offline/online events</span>, we can let the user know when he is offline or call an API when he has connectivity again.</p>
60+
61+
<Highlight lang='javascript' value={offlineEvent} />
62+
6363
<b>Screenshot when user is offline:</b>
6464

6565
<div className="offline__container">
@@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
6969
<Note type="tips">
7070
<p><span>Tips:</span> Emulate offline in Devtools by opening <span className="highlight bold no--bg">Chrome Dev Tools > Network > Offline</span>.</p>
7171
</Note>
72-
72+
7373
</div>
7474
);
7575
}

src/step-6/AppLike.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import manifest from './manifest.png';
55

66
class AppLike extends Component {
77
render() {
8-
const manifestJson = `{
8+
const manifestJson = `{
99
"name": "Application Name",
1010
"short_name": "App Name",
1111
"icons": [{
@@ -18,37 +18,37 @@ class AppLike extends Component {
1818
"background_color": "#fff",
1919
"display": "standalone",
2020
"orientation": "portrait"
21-
}`;
21+
}`;
2222

23-
return(
23+
return(
2424
<div className="introduction">
2525
<h1>AppLike</h1>
2626
<p>Using <span className="highlight bold no--bg">web manifest</span>, gives you extra control over the add to homescreen, splash screen experience. Add to homescreen gives us the ability to install the web application quickly without having to worry about the size of the application.</p>
27-
28-
<p>Manifest.json should contain the following criteria.</p>
2927

30-
<ul>
31-
<li>Site should be in <span className="highlight bold no--bg">HTTPS</span>.</li>
32-
<li>Should have a <span className="highlight bold no--bg">registered service worker</span>.</li>
33-
<li>Should contain a <span className="highlight bold no--bg">name</span>, <span className="highlight bold no--bg">short_name</span> to display in banner and homescreen.</li>
34-
<li>Icon should be <span className="highlight bold no--bg">PNG</span> image and at least <span className="highlight bold no--bg">144px</span> in dimension.</li>
35-
<li><span className="highlight bold no--bg">Add to homescreen</span> banner will show when user should visits your site at least twice with some time intervals in between.</li>
36-
</ul>
28+
<p>Manifest.json should contain the following criteria.</p>
3729

38-
<Note>
39-
<p><span>Note: </span>Above listed criertia's will change over the time, for more info <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android#criteria-faq">Google Developers Site</a>.</p>
40-
</Note>
30+
<ul>
31+
<li>Site should be in <span className="highlight bold no--bg">HTTPS</span>.</li>
32+
<li>Should have a <span className="highlight bold no--bg">registered service worker</span>.</li>
33+
<li>Should contain a <span className="highlight bold no--bg">name</span>, <span className="highlight bold no--bg">short_name</span> to display in banner and homescreen.</li>
34+
<li>Icon should be <span className="highlight bold no--bg">PNG</span> image and at least <span className="highlight bold no--bg">144px</span> in dimension.</li>
35+
<li><span className="highlight bold no--bg">Add to homescreen</span> banner will show when user should visits your site at least twice with some time intervals in between.</li>
36+
</ul>
4137

42-
<b>Sample Manifest</b>
43-
44-
<Highlight lang="json" value={manifestJson} />
38+
<Note>
39+
<p><span>Note: </span>Above listed criertia's will change over the time, for more info <a href="https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android#criteria-faq">Google Developers Site</a>.</p>
40+
</Note>
4541

46-
<p>More about manifest in <a href="https://w3c.github.io/manifest/">W3C Specification</a>.</p>
42+
<b>Sample Manifest</b>
43+
44+
<Highlight lang="json" value={manifestJson} />
45+
46+
<p>More about manifest in <a href="https://w3c.github.io/manifest/">W3C Specification</a>.</p>
4747

4848
<h2>Cross Browser</h2>
4949
<p>Add to homescreen, splash screen are supported in <span className="highlight bold no--bg">Chrome</span>, <span className="highlight bold no--bg">Mozilla Firefox</span>, <span className="highlight bold no--bg">Opera</span> and <span className="highlight bold no--bg">Safari</span> as well.</p>
5050

51-
<div className="offline__container">
51+
<div className="offline__container">
5252
<img className="" src={manifest} alt="Manifest File" />
5353
</div>
5454
</div>

src/step-7/Finish.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@ import Note from '../Note';
44

55
class Finish extends Component {
66
render() {
7-
const surgeInstall = `$ npm install --global surge`;
8-
const finalDir = `$ cd final`;
9-
const surgeDeploy = `$ surge`;
10-
const surgeDeployHTTPS = `$ surge --domain https://my-project.surge.sh`;
7+
const surgeInstall = `$ npm install --global surge`;
8+
const finalDir = `$ cd final`;
9+
const surgeDeploy = `$ surge`;
10+
const surgeDeployHTTPS = `$ surge --domain https://my-project.surge.sh`;
1111
return(
1212
<div>
1313
<h1>Deploy</h1>
1414
<p>The final step of this codelabs is deploying our github cards with HTTPS server.</p>
1515
<h3>Follow the below steps.</h3>
16-
<p><span className="highlight bold no--bg">Step 1</span> - Install surge via npm.</p>
17-
<Highlight lang="bash" value={surgeInstall} />
16+
<p><span className="highlight bold no--bg">Step 1</span> - Install surge via npm.</p>
17+
<Highlight lang="bash" value={surgeInstall} />
1818

19-
<p><span className="highlight bold no--bg">Step 2</span> - Go to <span className="highlight bold no--bg">final directory</span> in sample repository.</p>
20-
<Highlight lang="bash" value={finalDir} />
21-
22-
<p><span className="highlight bold no--bg">Step 3</span> - Type the below command to deploy.</p>
23-
<Highlight lang="bash" value={surgeDeploy} />
19+
<p><span className="highlight bold no--bg">Step 2</span> - Go to <span className="highlight bold no--bg">final directory</span> in sample repository.</p>
20+
<Highlight lang="bash" value={finalDir} />
2421

25-
<p>After successful deployment, you will get an url in your terminal. Copy it and open in your desktop and mobile browsers :D</p>
22+
<p><span className="highlight bold no--bg">Step 3</span> - Type the below command to deploy.</p>
23+
<Highlight lang="bash" value={surgeDeploy} />
2624

27-
<h3>What next?</h3>
28-
<p>Everything is perfect, except the deployed site is loading in HTTP unless we change the url to HTTPS. So lets fix it by forcing HTTP to redirect to HTTPS.</p>
29-
30-
<Highlight lang="bash" value={surgeDeployHTTPS} />
25+
<p>After successful deployment, you will get an url in your terminal. Copy it and open in your desktop and mobile browsers :D</p>
3126

32-
<Note type="tips">
33-
<p><span>Tips: </span> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Our application score was <span className="highlight bold no--bg">91/100</span>.</p>
34-
</Note>
27+
<h3>What next?</h3>
28+
<p>Everything is perfect, except the deployed site is loading in HTTP unless we change the url to HTTPS. So lets fix it by forcing HTTP to redirect to HTTPS.</p>
3529

36-
<p>Thats it all done!!</p>
30+
<Highlight lang="bash" value={surgeDeployHTTPS} />
31+
32+
<Note type="tips">
33+
<p><span>Tips: </span> <a href="https://chrome.google.com/webstore/detail/blipmdconlkpinefehnmjammfjpmpbjk" target="_blank">Lighthouse</a> analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices. Our application score was <span className="highlight bold no--bg">91/100</span>.</p>
34+
</Note>
35+
36+
<p>Thats it all done!!</p>
3737
</div>
3838
);
3939
}

src/syntax.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111

1212
.hljs::selection,
1313
.hljs span::selection {
14-
background: #d4d4d4;
14+
background: #d4d4d4;
1515
}
1616

17-
.hljs::-moz-selection,
17+
.hljs::-moz-selection,
1818
.hljs span::-moz-selection {
19-
background: #d4d4d4;
20-
}
19+
background: #d4d4d4;
20+
}

yarn.lock

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
22
# yarn lockfile v1
3-
4-
53
abab@^1.0.0:
64
version "1.0.3"
75
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -5537,3 +5535,4 @@ yargs@~3.10.0:
55375535
cliui "^2.1.0"
55385536
decamelize "^1.0.0"
55395537
window-size "0.1.0"
5538+

0 commit comments

Comments
 (0)