Categorii
Versuri

Cei care cred că e imposibil…

Săptămâna aceasta revin cu acest gând pozitiv. Vouă când vi s-a întâmplat ultima dată să fiți descurajați de cineva, cu care gând (de exemplu, imagine) ați reușit să mergeți mai departe? Toate gândurile bune!

Sursă: https://www.facebook.com/educatienonformala.xyz/photos/a.663454717353707/1440984396267398/

Categorii
Programare

Limita flexibilității JSX în React

Această limită constă în funcții anonime care autoapelează și execută un bloc întreg de instrucțiuni (sau mai multe incorporate în el).

<div>
  {((y) => {
    const x = 5 + 5 + y;
    return x;
  })(10)}
</div>

În interiorul funcției de mai sus, funcție care primește un parametru y cu valoarea 10 și returnează valoarea finală 5 + 5 + 10, poate fi pusă orice structură logică JavaScript. Această bucată de cod afișează textul „20” (fără ghilimele) în interiorul unui <div>.

Acest fel de funcție se numește IIFE (https://developer.mozilla.org/en-US/docs/Glossary/IIFE).

Dacă în schimb punem {5+5+z} unde z este o variabilă declarată cu var, este posibil să se afișeze doar ultima valoare a lui z în caz că al nostru cod este, de exemplu, într-un ciclu for cu contorul z . Problema nu apare când se folosește let în loc de var . Mai multe informații găsiți aici: https://developer.mozilla.org/en-US/docs/Glossary/IIFE#for_loop_with_var_before_es6 .

{(() => {
  const a = [];
  for (var i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează mereu 5
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

Corectat, codul arată astfel:

{(() => {
  const a = [];
  for (let i = 0; i < 5; ++i) {
    a.push(
      <button
        onClick={() => {
          alert(i); // afișează numerele de la 0 inclusiv la 4 inclusiv
        }}
      >
        Butonul {i + 1}
      </button>
    );
  }
  return a;
})()}

În fine, astfel de expresii pot fi folosite și în interiorul valorii unui prop:

<div
  style={{
    fontSize: ((y) => {
      const x = 5 + 5 + y;
      return x;
    })(1)
  }}
>
  Micul meu div
</div>

Cutie de nisip cu cod: https://codesandbox.io/s/hungry-breeze-qlyi6?file=/src/App.tsx .

Dacă aveți întrebări sau feedback, nu ezitați să scrieți în comentarii mai jos. Toate gândurile bune!

Categorii
Programare

Cum pot avea un al treilea server în Razzle?

În acest articol voi prezenta una din căile de a face un al treilea server într-un proiect Razzle. Mai exact, un server care poate fi HTTP sau WS (WebSockets) sau oricare script Node.js, care poate fi simplu JS sau care se compilează din TS (TypeScript), cu aceleași path alias-uri ca cele pentru serverul principal și care poate folosi sintaxa de importuri din ES6.

  1. Rulează comanda asta (adaptează la yarn dacă e cazul):
npm i --save razzle-start-server-webpack-plugin

2. Adaugă asta în fișierul razzle.config.js la început:

const StartServerPlugin = require("razzle-start-server-webpack-plugin");

3. Adaugă asta în fișierul razzle.config.js ca metodă a lui module.exports:

modifyWebpackConfig(opts) {
  const config = opts.webpackConfig;
  const options = opts.options.webpackOptions;

  if (opts.env.target === 'node') {
    config.entry.secondserver = ['./a/b/c.ts'];

    if (opts.env.dev) {
      config.entry.secondserver.unshift(
        `${require.resolve('webpack/hot/poll')}?300`
      );

      // Pretty format server errors
      config.entry.secondserver.unshift(
        require.resolve('razzle-dev-utils/prettyNodeErrors')
      );

      config.plugins.push(
        new StartServerPlugin(
          Object.assign(options.startServerOptions, {
            entryName: 'secondserver',
            verbose: true,
            debug: true,
            nodeArgs: [],
            killOnExist: true,
            killOnError: true,
            signal: 'SIGTERM'
          })
        )
      );
    }
  }

  return config;
}

unde ./a/b/c.ts este o cale relativă (poate funcționează și cu o cale absolută) la punctul de intrare (entrypoint) în server care poate fi fie .js, fie .ts, fie .tsx (despre .tsx nu știu cât de util este fiindcă n-am folosit JSX în acest al doilea server până acum, dar se compilează ca .ts cel puțin).

4. Pentru ca pasul următor să funcționeze, instalează:

npm i --save-dev concurrently

5. Pentru a putea rula în mediu de dezvoltare acest server e suficient să execuți npm start. Pentru producție mai este o schimbare necesară. În fișierul package.json modifică script-ul următor astfel:

"start:prod": "NODE_ENV=production concurrently \"node build/server.js\" \"node build/secondserver.js\""

Acum pe producție se poate rula cu comanda npm run start:prod.

Notă: noul server folosește același tsconfig.json care e folosit de celălalt server și poate include fișiere (de exemplu, de tip TypeScript) incluse de celălalt server.

Aveți întrebări sau feedback constructiv? Vă rog să scrieți mai jos în comentarii. Mulțumesc.

Categorii
Filme Muzică Versuri

Paraziții – Instigare la Cultură

O melodie care îmi place mult. Videoclipul merită a fi vizionat. Într-o lume ca asta în care sunt acum mi-aș dori să devină viral.

Categorii
Filme

Earth – Our Home – Love and Light

Am distribuit acest video în 12 iun. 2015 pe Facebook la 20:33 și 20:35. Simt în el energii deosebit de pozitive.

Pentru a viziona video-ul vă rog să faceți clic pe link-ul de mai jos. Vizionare plăcută!