Webudvikling – NerdGirl

Igang med Angular 13 på Linux

Posted on 9. august 20229. august 2022 by jette

Det er længe siden jeg har oprettet et helt ny projekt i Angular, og faktisk har jeg ikke skrevet om det siden Angular 6. Så her får du en hurtig intro til at oprette et helt nyt Angular 13 projekt med Bootstrap 5.

ng new --skip-install
? What name would you like to use for the new workspace and initial project? mitNyeProjekt
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]

ng new --skip-install

? What name would you like to use for the new workspace and initial project? mitNyeProjekt

? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]

Med --skip-install bliver projektet blot oprettet. Der installeres ingen pakker. Det […]

Installer DBeaver på Fedora

Posted on 23. marts 202231. marts 2022 by jette

DBeaver er et fantastisk værktøj til administration af databaser. Det er open source software og gratis i ‘Community’ udgaven som du henter på dbeaver.io (‘Enterprise’ udgaven findes på dbeaver.com og kræver betalt licens). Hvis du bruger et webbaseret GUI som f.eks. PhpMyAdmin så skynd dig at afinstallere den. Det er ikke et spørgsmål om HVIS […]

Node Package Manager (npm)

Posted on 3. maj 2021 by jette

Hurtigt nedfældede noter om npm (node package manager) Installering af pakker med npm Lokal Installerer <pakkenavn> lokalt i mappen node_modules (mappen oprettes på den aktuelle lokation hvis den ikke eksisterer) og tilføjer pakken som afhængighed i package.json filen. npm install <pakkenavn> –save-dev Global Installerer <pakkenavn> globalt hvor node er installeret. I mit tilfælde ligger node […]

PHP: Horde Text_Diff

Posted on 9. december 20209. december 2020 by jette

Horde Text_Diff er et fantastisk redskab når du skal finde forskellen mellem 2 tekster og præsentere det. Installation på Ubuntu 20.04

apt install php-pear

pear channel-discover pear.horde.org

pear install horde/horde_text_diff

apt install php-pear

pear channel-discover pear.horde.org

pear install horde/horde_text_diff

Herefter findes filerne under /usr/share/php/Horde Brug af Text_Diff Jeg illustrerer her hvordan du bruger Text_Diff ved hjælp af en php funktion:

function diff_render($txt1,$txt2,$style) {
  //Hvis txt1 er tom returner da blot txt2
  if (!isset($txt1) || strlen($txt1) == 0) {
   return $txt2;
  }
  //Hvis txt2 er tom, returner den
  if (!isset($txt2) || strlen($txt2) == 0) {
    return $txt2;
  }
  //Hvis der ingen forskel er på de to tekster, returnér
  if ($txt1 == $txt2) {
    return $txt2;
  }
  //Inkluder horde filerne
  //(Det kan sikkert gøres smartere med noget autoload)
  require "Horde/Text/Diff.php";
  require "Horde/Text/Diff/Op/Base.php";
  require "Horde/Text/Diff/Renderer.php";
  require "Horde/Text/Diff/Renderer/Inline.php";
  require "Horde/Text/Diff/Engine/Native.php";
  require "Horde/Text/Diff/Op/Copy.php";
  require "Horde/Text/Diff/Op/Change.php";
  require "Horde/Text/Diff/Op/Delete.php";
  require "Horde/Text/Diff/Op/Add.php";
  require "Horde/String.php";

  $txt1Ary = explode("\n",$txt1);
  $txt2Ary = explode("\n",$txt2);

  //Udfør diff 
  $diff = new Horde_Text_Diff('auto',array($txt1Ary, $txt2Ary));
  //Formater med html
  $renderer = new Horde_Text_Diff_Renderer_inline(array('ins_prefix' => '<span style="'.$style.'">','ins_suffix' => '</span>'));
  //Returner det endelige resultat
  return $renderer->render($diff);
}

function diff_render($txt1,$txt2,$style) {

//Hvis txt1 er tom returner da blot txt2

if (!isset($txt1) || strlen($txt1) == 0) {

return $txt2;

}

//Hvis txt2 er tom, returner den

if (!isset($txt2) || strlen($txt2) == 0) {

return $txt2;

}

//Hvis der ingen forskel er på de to tekster, returnér

if ($txt1 == $txt2) {

return $txt2;

}

//Inkluder horde filerne

//(Det kan sikkert gøres smartere med noget autoload)

require "Horde/Text/Diff.php";

require "Horde/Text/Diff/Op/Base.php";

require "Horde/Text/Diff/Renderer.php";

require "Horde/Text/Diff/Renderer/Inline.php";

require "Horde/Text/Diff/Engine/Native.php";

require "Horde/Text/Diff/Op/Copy.php";

require "Horde/Text/Diff/Op/Change.php";

require "Horde/Text/Diff/Op/Delete.php";

require "Horde/Text/Diff/Op/Add.php";

require "Horde/String.php";

$txt1Ary = explode("\n",$txt1);

$txt2Ary = explode("\n",$txt2);

//Udfør diff

$diff = new Horde_Text_Diff('auto',array($txt1Ary, $txt2Ary));

//Formater med html

$renderer = new Horde_Text_Diff_Renderer_inline(array('ins_prefix' => '<span style="'.$style.'">','ins_suffix' => '</span>'));

//Returner det endelige resultat

return $renderer->render($diff);

}

Du bestemmer selv hvordan det skal formateres. Som standard vil Horde_Text_Diff_Renderer […]

Skifte php version på Ubuntu

Posted on 5. august 2020 by jette

Det er en fordel at have mulighed for at installere flere forskellige version af php, og skifte mellem dem forholdsvist nemt. På den måde kan man hurtigt fortryde, hvis man får skiftet til en version der viser sig ikke at være kompatibel med ens kode. De fleste har både php til Apache og php til […]

Angular 8

Posted on 9. marts 2020 by jette

Jeg har fornylig opdateret et projekt til Angular 8 og har i den forbindelse opdaget et par signifikante ændringer: Fejlen “More than one module matches…”

$ ng g directive sti/til/nyt/modul/some-name
More than one module matches. Use skip-import option to skip importing the component into the closest module.

1 2	$ ng g directive sti/til/nyt/modul/some-name More than one module matches. Use skip-import option to skip importing the component into the closest module.

I Angular 7 blev nye moduler blot automatisk tilføjet i app.module.ts, men i Angular 8 er det åbenbart nødvendig at angive hvor det skal tilføjes. Løsningen er derfor (såfremt […]

Angular 7: Glem ikke versionsnummeret

Posted on 11. november 2019 by jette

I mine projekter viser jeg altid et versionsnummer et sted i app’en, så folk kan tjekke om de har seneste version. Det er derfor ekstremt vigtigt at jeg husker at ændre det versionsnummer hver gang jeg bygger projektet. Derfor at jeg lavet byggeproceduren således at den automatisk beder om version som det første. Herefter skrives […]

Apache, Varnish, Nginx og SPA app: Undgå at cache index.html

Posted on 23. august 201923. august 2019 by jette

SPA står for “Single Page Application”, for den består fysisk kun af een side, nemlig index.html. Dvs. alt der har med brugerfladen at gøre hentes første gang hjemmesiden besøges, og herfra foregår al kommunikation via Ajax kald til en backend. Inde i index.html filen er der referencer til alt det andet hjemmesiden skal bruge. Disse […]

Angular: Browser webpush- og desktop notifikationer

Posted on 18. februar 2019 by jette

Dette er mine noter om implemententering af push- og desktop notifikationer i en Angular 7 PWA. Se den fulde beskrivelse på engelsk her: Angular Push Notifications – a Complete Step-by-Step Guide Web Push notifikationer: Notifikationer der sendes fra en server til en browser, også når hjemmesiden ikke har fokus og endda når browseren er helt lukket. […]

Angular 6: Font Awesome

Posted on 11. oktober 201811. oktober 2018 by jette

Font Awesome er en samling af ikoner baseret på en font. Den indeholder pt. knap 4000 ikoner hvoraf ca 1300 er gratis. Jeg bruger ikonerne i et Angular 6 projekt og lagde ud med at benytte dem via angular-font-awesome …. lige indtil jeg skulle bruge thumbtack ikonet, som ikke blev vist. Men det er hvad […]