-
Notifications
You must be signed in to change notification settings - Fork 0
/
aboutjade.html
313 lines (223 loc) · 9.24 KB
/
aboutjade.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!DOCTYPE html>
<!--
Original Design: Spectral by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Jekyll build mod
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Martin Wiesmüller</title>
<meta name="description" content="Full Stack Developer / Application designer
">
<!--[if lte IE 8]><script src="/js/ie/html5shiv.js"></script><![endif]-->
<link rel="canonical" href="https://mwiesmueller.github.io//aboutjade">
<link rel="stylesheet" href="/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="/css/ie9.css" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="Martin Wiesmüller" href="https://mwiesmueller.github.io//feed.xml">
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1><a href="/index.html">Martin Wiesmüller</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutme.html">Aboute me</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="mailto:[email protected]">Contact</a></li>
<li><a href="/feed.xml"
class="icon fa-feed"> RSS Feed</a></li>
</ul>
<br>
<br>
<ul>
<li><a href="de/aboutjade" >Klicke hier um in Deutsch zu lesen</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<article id="main">
<div style='background-color: #091f34; width: 100%; display: block;'>
<img src='/images/code.jpg' style='width: 600px; margin-left: auto; margin-right: auto; display: block;'>
</div>
<header>
<p>Jade / Pug - The unknow creature of web</p>
<p><a href='https://github.com/mwiesmueller/gulp-jade-example', target='_blank'>Example on Github</a></p>
</header>
<section class="wrapper style5">
<div class="inner">
<p>
In the community or in different talks, i have to assert that the syntax JADE is an unknow creature in the web development. Everbody knows it, but nobody wants to use it.
<br />
<p>
But... why... ?
</p>
This syntax looks crazy and it's not the standard of a HTML one. Additional there are concerns in deployment based on terms of performance, because the webserver has to render the JADE syntax. Long time i had the same opinion. But today - for all doubt - theres no reason.
</p>
<p>
<h4>Jade vs Html</h4>
Let's go.. Where are the advantages:
</p>
<pre>
<code>
<xmp>
<html>
<head>
<style>
.container {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div class="container">Hello World</div>
</body>
</html>
</xmp>
</code>
</pre>
<pre>
<code>
html
head
style.
.container {
background-color: yellow;
color: red;
}
body
.container Hello World
</code>
</pre>
<p>
You will notice, the code with the JADE Syntax has 9 instead of 13 lines in the HTML Code. The code is clearly and not overloaded.
<p>
The most differences / advantages:
<ul>
<li>No Brackets</li>
<li>Tags are limited over indentations</li>
<li>The code is clear..</li>
<li>Complete sections are easily to move by the indentations</li>
<li>You can easily open a div container by the class name and dot. (.container)</li>
<li>JADE is cool 😀</li>
</ul>
</p>
The indentations have to be followed strictly. The membership of the separeted tags are defined with this. This is the biggest fault you can use this syntax. But editors called Atom or Sublime have great syntax highlighting tools. I use the Atom editor with the additional "atom-jade" plugin.
</p>
<p>
Let remember: Why? My editor opens and closes the tags automatically.
<br />
<br />
My answer: Yes.. of course. You're right. But i love clearly code and i like to save my lifetime without searching errors in faulty html code... 😀 To use this syntax is the question of faith, a little bit. But i use this syntax in all my projects anyway without problems. There are projects it's not useful to use it but it's also possible.
</p>
<h4>Let's start a new project with jade...</h4>
<p>
We want to start a little project with JADE - step by step. Basically a lot of webserver are avaiabled to deploy JADE Files as direct. An example is <a href="https://www.npmjs.com/package/harp" target="_blank">Harp</a>. But don't use this in live mode. The rendering of JADE Files get's a lot of time - the quality of your page can be bad. So we use this syntax only in development. We move the rendering of this files in the continous delivery process. Here we can use <a href="https://www.npmjs.com/package/gulp" target="_blank">Gulp</a> or <a href="https://www.npmjs.com/package/grunt" target="_blank">Grunt</a>. Additional you can minify all files in this process to ensure minimalize traffic. These are avaiabled in <a href="https://www.npmjs.com" target="_blank">NPM</a> .
</p>
<p>
At first we want to install all needed packages:
<pre>
<code>
npm install --save-dev --save-exact gulp gulp-jade
</code>
</pre>
</p>
<p>
When this process is done, we can add a new file who's called "Gulpfile.js" to configure the taskrunner.
<pre>
<code>
'use strict';
const gulp = require('gulp');
const jade = require('gulp-jade');
gulp.task('renderjade', () => {
gulp.src('./lib/*.jade')
.pipe(jade())
.pipe(gulp.dest('./dist/'))
});
gulp.task('default', shell.task([
'gulp renderjade'
]));
</code>
</pre>
</p>
<p>
You can see the task who's called "renderjade". This task has the job to render all JADE files in HTML files from lib to the dist folder. All HTML files are minified automatically. But when you set the option "pretty" the task outputs a structured html document:
<pre>
<code>
gulp.task('renderjade', () => {
gulp.src('./lib/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('./dist/'))
});
</code>
</pre>
</p>
<p>
<h4>Innovative... Jade in Angular 2 and Webpack</h4>
It's very cool to work with JADE. But i want to work with a framework who's called Angular? You can work with JADE in your project all the time when you insert the rendering process in your deployment. Last year i have to get to know the frameworks webpack and Angular 2. The integration of JADE in these frameworks are be perfect. It's very easy to integrate your JADE files into the components:
<pre>
<code>
@Component({
selector: 'mycomponent',
template: require('!jade!./mycomponent.component.jade')()
})
</code>
</pre>
</p>
<p>
The installation of the <a href="https://www.npmjs.com/package/jade-loader" target="_blank">jade-loader</a> is the requirement to use this function. When this is done, you can very easy "require" your JADE file with the addition "!jade!". Webpack produce a HTML inline component automatically.
</p>
<h4>From Jade to Pug</h4>
<p>
Jade is renamed to Pug since December 2015. The reasons of this in <a href="https://github.com/pugjs/pug/issues/2184" target="_blank">Github Issue 2184</a> documentated.
</p>
</div>
</section>
</article>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a target="_blank" href="https://twitter.com/mwiesmueller" class="icon fa-twitter"
><span class="label">twitter</span></a></li>
<li><a target="_blank" href="https://github.com/mwiesmueller" class="icon fa-github"
><span class="label">github</span></a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/martin-wiesm%C3%BCller-784bbbba" class="icon fa-linkedin-square"
><span class="label">linkedin-square</span></a></li>
<li><a target="_blank" href="https://facebook.com/martin.wiesmuller.98" class="icon fa-facebook-official"
><span class="label">facebook-official</span></a></li>
<li><a target="_blank" href="mailto:[email protected]" class="icon fa-envelope-o"
><span class="label">E-mail</span></a></li>
<li><a target="_blank" href="https://www.xing.com/profile/Martin_Wiesmueller2" class="icon fa-xing"
><span class="label">xing</span></a></li>
</ul>
<ul class="copyright">
<li>©
2016,
2019
Martin Wiesmüller</li>
</ul>
</footer>
<!-- Scripts -->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.scrollex.min.js"></script>
<script src="/js/jquery.scrolly.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<!--[if lte IE 8]><script src="/js/ie/respond.min.js"></script><![endif]-->
<script src="/js/main.js"></script>
</div>
</body>
</html>