Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:webdev [2015/01/09 12:49]
alfred [Web development tools]
+++ wiki2:webdev [2020/05/24 10:14] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Web development tools ======
-===== Setup a web =====
+===== Node =====
-In Linux we install node and npm:
+==== Install module & save it as dependence ====
 <code>
-$ sudo apt-get install nodejs-legacy npm
+$ npm install <module> --save
 </code>
-When we have the source code from a web we use the next command to install node packages:
+==== Install module & save it as a dev dependence ====
 <code>
-$ npm install
+$ npm install <module> --save-dev
 </code>
-To get the bower components:
+===== Gulp =====
+==== Basic script (gulpfile.js) ====
 <code>
-$ bower update
+var gulp = require('gulp');
+gulp.task('default', function() {
+  // place code for your default task here
+});
+</code>
+Execute it:
+<code>
+$ gulp
+</code>
+If there was not a ''default'' but, for ex., ''deploy'':
+<code>
+$ gulp deploy
 </code>
-===== Bower =====
+==== Indicate src and dest folders ====
+<code>
+var gulp = require('gulp')
-===== Grunt =====
+gulp.task('deploy', function () {
+    return gulp.src('app/*.js')
-Each time ''grunt'' command is run it looks for a locally Grunt instance using node's require() system, so you can run grunt for any sub-folder. The configuration is in files ''package.json'' and ''Gruntfile''. \\
+        .pipe(gulp.dest('dist'));
-===== Yeoman =====
+});
-It will prepare a web project for you. First you must install a project generator: ''npm install --global generator-angular@0.9.2''. You will find generators at: [[http://yeoman.io/generators/]]. \\
+</code>
-===== SaSS =====
+:!: remember to return so there was another task which depended of this could use it
-  * {{:wiki2:webdev:assembling_sass_slides.pdf|Sintaxis}}
-Once SaSS is installed, to compile you will do: ''sass test.scss test.css''. Probably you do not want to compile a file each time you edit it, but do it automatically. For that: ''sass --watch test.scss:test.css''.
+==== Add another command to execute prior to the current ====
-===== Bourbon =====
-To install bourbon: ''gem install bourbon''. \\
-Then to enable it in your project, go to the folder and type: ''bourbon install''. It will add a folder into your project which contains Bourbon files. Now you only have to import it in the sass code:
 <code>
-@import bourbon/bourbon
+gulp.task('deploy', ['prior-task1', 'prior-task2'], function () { ...
-.special
-    @include linear-gradient(#990000, #000000);
-    p
-        color: #ccccff
 </code>
-===== Neat =====
-===== Bitter =====
+===== Tools for web development =====
-===== Refills =====
+==== Automatically reload static pages ====
+  * https://www.npmjs.com/package/reload
-===== Miscellania =====
+With reload installed you can do ''reload -b'' into your root path an it will automatically reload when some of its inner files change.
-==== CSS ====
+==== Emmet ====
-=== Selectors ===
+=== Forms ===
-Element selector:
-<code css>
+<code>
-p {
+form>input[type=text]+input[type=password]+submit
-    text-align: center;
+</code>
-    color: red;
+<code>
-}
+<form>
+    <input type="text">
+    <input type="password">
+    <submit></submit>
+</form>
 </code>
-Id Selector:
+===== Tips and notes =====
-<code css>
+==== Test external authenticator ====
-#para1 {
+You have to prepare one of your servers to accept a connection from the authenticator.
-    text-align: center;
-    color: red;
+For example, in Caddy:
+<code>
+fok.surrealistic.xyz {
+    proxy / localhost:8000
+    header / Strict-Transport-Security "15768000"
 }
 </code>
-Class selector:
+Or in Nginx:
-<code css>
+<code>
-.center {
-    text-align: center;
-    color: red;
-}
 </code>
-Combining and grouping selectors:
+Then you configure the authenticator to your url: ''https://fok.surrealistic.xyz/login''
-<code css>
-p.center {
+And add a tunnel to your server from your machine on the chosen port:
-    text-align: center;
+<code>
-    color: red;
+ssh -R "0.0.0.0:8000:0.0.0.0:8000" codi
-}
-h1, h2, p {
-    text-align: center;
-    color: red;
-}
 </code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página