Diferencias

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

--- wiki2:webdev [2014/12/28 18:51]
alfred [Miscellania]
+++ wiki2:webdev [2020/05/24 10:14] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Web development tools ======
-===== Bower =====
+===== Node =====
+==== Install module & save it as dependence ====
-===== Grunt =====
+<code>
+$ npm install <module> --save
+</code>
-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''. \\
+==== Install module & save it as a dev dependence ====
-===== 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/]]. \\
-===== SaSS =====
+<code>
-  * {{:wiki2:webdev:assembling_sass_slides.pdf|Sintaxis}}
+$ npm install <module> --save-dev
+</code>
-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''.
+===== Gulp =====
+==== Basic script (gulpfile.js) ====
+<code>
+var gulp = require('gulp');
-===== Bourbon =====
+gulp.task('default', function() {
-To install bourbon: ''gem install bourbon''. \\
+  // place code for your default task here
-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>
+Execute it:
 <code>
-@import bourbon/bourbon
+$ gulp
-.special
+</code>
-    @include linear-gradient(#990000, #000000);
+If there was not a ''default'' but, for ex., ''deploy'':
-    p
+<code>
-        color: #ccccff
+$ gulp deploy
 </code>
-===== Neat =====
-===== Bitter =====
+==== Indicate src and dest folders ====
+<code>
+var gulp = require('gulp')
-===== Refills =====
+gulp.task('deploy', function () {
+    return gulp.src('app/*.js')
+        .pipe(gulp.dest('dist'));
+});
+</code>
-===== Miscellania =====
+:!: remember to return so there was another task which depended of this could use it
-==== CSS ====
+==== Add another command to execute prior to the current ====
-=== Selectors ===
+<code>
-Element selector:
+gulp.task('deploy', ['prior-task1', 'prior-task2'], function () { ...
-<code css>
-p {
-    text-align: center;
-    color: red;
-}
 </code>
-Id Selector:
+===== Tools for web development =====
-<code css>
-#para1 {
+==== Automatically reload static pages ====
-    text-align: center;
+  * https://www.npmjs.com/package/reload
-    color: red;
-}
+With reload installed you can do ''reload -b'' into your root path an it will automatically reload when some of its inner files change.
+==== Emmet ====
+=== Forms ===
+<code>
+form>input[type=text]+input[type=password]+submit
+</code>
+<code>
+<form>
+    <input type="text">
+    <input type="password">
+    <submit></submit>
+</form>
 </code>
-Class selector:
+===== Tips and notes =====
-<code css>
+==== Test external authenticator ====
-.center {
+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>
-Combining and grouping selectors:
+Or in Nginx:
-<code css>
+<code>
-p.center {
+</code>
-    text-align: center;
-    color: red;
+Then you configure the authenticator to your url: ''https://fok.surrealistic.xyz/login''
-}
-h1, h2, p {
+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
-}
 </code>

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página