JIGSAW

15/04/2020 - PUG ROVIGO

Alessandro Cappellozza

Su cosa si basa?

  • Blade engine (laravel)
  • Webpack
  • Less/Sasss
  • TailwindCss
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Perché?

  • Abbattono il traffico
  • Riproducibilità
  • Supporto JamStack
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Toolchain

  • git
  • node
  • php
  • un editor
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Setup

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza
mkdir my-site

composer require tightenco/jigsaw

./vendor/bin/jigsaw init blog

./vendor/bin/jigsaw init docs

./vendor/bin/jigsaw init

./vendor/bin/jigsaw build

Cartelle

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Concetti

  • Configurazione
  • Variabili
  • Helper
  • Collezioni
  • Eventi
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Configurazione

  • Config.staging.php
  • Confing.production.php
  • Webpack.mix.js
  • Tailwind.config.js
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Deploy: vincoli

  • Usiamo GH Pages

  • Serve un CNAME

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Deploy: metodo 1

  • Ramo a parte

  • Subtree

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Deploy: metodo 2

Cartella docs

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Deploy: metodo 3

Pipeline

(nel nostro caso GitHub Actions)
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Tailwind

CSS

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Un altro?

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Utility Based

They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

Tailwind is different.

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Configurazione

npm init -y
npm install tailwindcss
npm install postcss-cli autoprefixer

npx tailwind init

# .. CONFIG ..

postcss css/tailwind.css -o public/build/tailwind.css
// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

// css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Toolchain: node

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Esempio

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="..IMG.." alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight
    				font-semibold text-gray-900 hover:underline">
    Finding customers for your new business
    </a>
    <p class="mt-2 text-gray-600">
    ..TEXT..
    </p>
  </div>
</div>
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Alternative

Static Content Generators

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Statici

  • Gatsby
  • Vuepress
  • Jekyll
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza
https://dev.to/integridsolutions/best-static-site-generator-to-use-in-2020-4kjk

Static con SSR

  • Next.js
  • Nuxt.js
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Generalmente integrati con un Framework specifico

Hosting

Spazi pensati a posta

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza
  • Client
  • CDN
  • Pipeline
  • Intregrazioni
  • Forms
  • Serverless
  • Auth
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza
  • Client
  • CDN
  • Pipeline
  • Intregrazioni
  • Serverless
  • Provisioning Automatico
15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Ringraziamenti

15/04/2020 - PUG ROVIGO - Alessandro Cappellozza

Riferimenti

https://rovigo.grusp.org

https://grusp.org

Made with Slides.com