Mit welchen Front-End-Tools arbeitet Ihr?

Guten Tag Community,

da ich selbst als Full-Stack-Developer tätig bin würde es mich mal interessieren, was für Front-End-Tools Ihr bei Euren Projekten benutzt. Natürlich möchte ich auch wissen, warum Ihr genau dieses Tool ausgewählt habt.

Unter solchen Tools verstehe ich beispielsweise folgendes:

  • UX/UI-Designer-Anwendungen
  • Frameworks
  • CSS-Erweiterungen
  • JavaScript Bibliotheken
  • Alles andere, was Ihr gerne erwähnen würdet

Mich würde es freuen wenn ich einen genaueren Einblick in Eure Arbeitsweise erhalte und mir eventuell das ein oder andere über Euch und Eure Berufserfahrung verraten würdet.

Als Information und als Beispiel für Euch:

Seit zwei Jahren arbeite ich als Full-Stack-Entwickler und möchte mich in näherer Zukunft mehr auf den Front-End-Bereich spezialisieren. Da mir das erstellen und designen von Websiten mehr gefällt, als das ganze Back-End-Zeug, finde ich, dass mein Plan gut aufgehen könnte.

Wenn ich irgendwelche Privat-Projekte starte, da bei meiner Firma nicht viel Design-Technisches möglich ist, arbeite ich alles von Grund auf neu. Ich benutze neuerdings Bootstrap, welches natürlich einiges erleichtert. Weitere Frameworks benutze ich nicht.

Um spätere Entwicklungsprobleme zu vermeiden, arbeite ich neuerdings auch mit Adobe XD um ein gewisses Template der späteren Website zu erhalten.

Wenn es dann zur Entwicklung kommt, arbeite ich mit CSS ohne irgendwelche Erweiterungen. SASS ist mir bereits bekannt aber findet bei mir nicht wirklich sein Einsatzgebiet.

Bei JavaScript kommt außer jQuery und den Bibliotheken von Bootstrap nicht viel zum Einsatz. Für sämtliche Logos benutze ich fontawesome.

Außerdem arbeite ich mit dem "Desktop-First"-Format in Pixel. Natürlich würde sich em und "Mobile-First" auch anbieten aber da bin ich zu wenig in der Materie.

Es wäre mir bestimmt eine große Hilfe ein paar Tipps und Tricks von ein paar Erfahrenen Front-End-Entwicklern zu erhaschen.

Ich freue mich auf hilfreiche Informationen, Hinweise und Empfehlungen Eurerseits.

Mit freundlichen Grüßen,

RoyBlunk

...zur Frage

Hallo @RoyBlunk,

ich erstelle Designthemen und Plugins für WordPress. Daher schreibe ich Code in HTML, CSS, JS, jQuery, PHP und MySQL.

Deshalb verwende ich die folgenden Werkzeuge:

1) WampServer stellt mir einen lokalen Server mit MySQL und PHP zur Verfügung.

2) SCSS vereinfacht den Code, strukturiert ihn mithilfe von Konstanten und Funktionen und ermöglicht das Speichern von Boilerplate-Lösungen.

3) Gulp führt automatisch alle Routineoperationen mit den bearbeiteten Dateien aus:

  • SCSS to CSS konvertieren
  • auto prefixes für CSS-Eigenschaften hinzufügen
  • die Fehlern in JS suchen
  • JS-Dateien gemäß Styleguide bearbeiten 
  • JS und CSS Dateien minimieren
  • neue Dateien auf den lokalen Host kopieren
  • die Webseite im Browser aktualisieren.

4) Ich benutze auch GitHub oder Bitbucket, um meine Arbeit zu speichern und mit Kollegen zu teilen. Und Sourcetree passt zu mir, um mit beiden Git-Diensten zu arbeiten.

5) Ich habe lange in Notepad++ gearbeitet, weil es schnell ist und viele Optionen wie Emmet oder Macrosen hat. Aber jetzt verwende ich Visual Studio Code, um meine Tools zu modernisieren.

6) Ich benutze oft Bootstrap als Framework und für Karussells bevorzuge ich Owl Carousel.

Für die Zukunft plane ich React.js, weil viele interessante Projekte dies benötigen. Und ich möchte das Testen automatisieren, also beherrsche ich Docker und Composer.

...zur Antwort

Ich schlage diese Version des Codes vor. Was halten Sie davon?
https://gist.github.com/glebkema/06501bc196aa48d4639fcba628a0fee9

$queries: ( 
 ( 'xs', 400, 4 ),
 ( 'sm', 550, 6 ),
 ( 'md', 750, 8 ),
 ( 'lg', 1000, 10 ),
 ( 'xl', 1200, 12 )
);

@each $prefix, $media, $columns in $queries {
 @media screen and ( min-width: $media + px) {
  @for $i from 1 through $columns {
   .col-#{$prefix}-#{$i} {
    flex: 0 0 100% / $columns * $i
   }
  }
 }
}

Das Ergebnis können Sie im obigen Link sehen.

-----

P. S. "Sass Maps vs. Nested Lists"

...zur Antwort

Standardmäßig verwendet WAMP die MariaDB. Und WordPress sucht derzeit nach MySQL.

  1. Stellen Sie sicher, dass Sie MySQL installieren.
  2. Schalten Sie den WAMP-Server im Menü von MariaDB auf MySQL um.

Details in Englisch:
"How to switch from MariaDB to MySQL in WAMP server?"

...zur Antwort

Dieser Artikel beschreibt, wie es möglich ist, nur eine oder mehrere Seiten aus Wordpress zu exportieren:
"Export WordPress Pages Either One-By-One, Or Several At A Time".

  1. Erstellen Sie einen neuen Benutzer mit der Berechtigung "Autor".
  2. Legen Sie es als Autor für die Seiten fest, die Sie exportieren möchten. Dies geschieht zweckmäßigerweise mit der sogenannten "Bulk-Aktion".
  3. Wählen Sie diesen Autor beim Export aus.
  4. Importieren Sie die resultierende XML-Datei in eine andere WordPress-Website.

Details und Screenshots finden Sie unter dem obigen Link.

...zur Antwort

Nicht jeder Browser kann als favicon verwenden:
https://caniuse.com/#feat=link-icon-svg

Für mich funktioniert Ihr Code in Chrome gut:

P.S. Auch spricht dieser Artikel über interessante Tricks, die mit SVG-Favicon ausgeführt werden können:
SVG, Favicons, and All the Fun Things We Can Do With Them

...zur Antwort

Sobald Sie Wordpress auf dem Hosting installiert haben, erhalten Sie sowohl eine Website als auch ein Admin-Panel, um Ihre Website einzurichten und Nachrichten und andere Materialien darauf zu veröffentlichen.

Es wird jedoch empfohlen, Ihre Website vor Suchmaschinen zu verbergen, bis alle Materialien fertig sind. Im Admin-Bereich gibt es hierfür eine spezielle Option, eine zuverlässigere Option ist jedoch die Verwendung des Plugins.

Zum Beispiel: https://wordpress.org/plugins/maintenance/

...zur Antwort

"autosize.js" ist das Beste für diese Aufgabe.
Dieses Skript ist klein und gut gemacht.
http://www.jacklmoore.com/autosize

Sie können dieses Skript über CDN verbinden, wenn Sie möchten:: https://cdnjs.com/libraries/autosize.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>

Und dann:

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));
...zur Antwort

Überprüfen Sie die Faktoren, die die Wirkung der z-index Eigenschaft beeinflussen:

1) Der Z-index betrifft nur HTML-Blöcke, deren die position Eigenschaft auf "absolute", "relativ" oder "fixed" festgelegt ist.

2) Wenn zwei Blöcke denselben Z-Index haben, wird derjenige, der später in HTML beschrieben wird, oben platziert.

3) Der Z-Index vergleicht Blöcke, die sich in der Struktur eines HTML-Layouts auf derselben Ebene befinden. Wenn daher ein Block in einem anderen Block liegt, kann der Z-Index des übergeordneten Blocks wichtiger sein.

4) Der Initialwert für "z-index" ist "auto". Wenn der Block jedoch auf "opacity" von weniger als 1 eingestellt ist, zeichnet der Browser ihn als eigenständigen Block mit "z-index: 0". (Erläuterung auf StackOverflow)

Wenn wir uns zum Beispiel dieses Layout ansehen:

<header style="position: fixed; top: 0; left: 0; right: 0;">
	<nav>Menü</nav>
</header>
<main>
	<img src="image.jpg" alt="Bild">
</main>

dann wird das Bild dem Menü überlagert:

  • wenn das <main>-Tag die Eigenschaft "position: relativ;" erhält;
  • oder wenn das <img>-Tag die Eigenschaft "opacity: 0,9;" erhält.

Um dies später zu beheben, ist es sinnlos, einen z-index für das <nav>-Tag hinzuzufügen. Fügen Sie stattdessen einen z-index mit einem positiven Wert für das <header>-Tag hinzu.

...zur Antwort

Sie können auch zwei oder mehr Hintergründe mithilfe der Eigenschaft "background-image" festlegen, wenn Sie sie wie folgt durch Kommas getrennt auflisten:

background-image: url(Name.png), url(Name.gif);

Die Eigenschaft "background-attachment" ist standardmäßig "scroll". Somit können Sie diesen Teil der Anweisung löschen.

Wenn Sie für jeden Hintergrund unterschiedliche Werte für die "background-attachment"-Eigenschaft festlegen wollen, können Sie diese auch mit einem Komma auflisten. Zum Beispiel:

background-attachment: scroll, fixed;

Außerdem können Sie die Eigenschaft "background" benützen, alle Eigenschaften in einem langen Wert festzulegen:

https://developer.mozilla.org/de/docs/Web/CSS/background

background: url(Name.png) scroll, url(Name.gif) fixed;

So kann Ihr Code folgendermaßen umgeschrieben werden:

<body id="overlay" style="background-image: url(Name.png), url(Name.gif); height: 100vh; padding: 0; margin: 0;">
</body>

Ich möchte auch darauf hinweisen, dass es oft bequemer ist, "min-height: 100vh;" anstelle von "height: 100vh;" zu verwenden. Dann kann sich das <body>-Tag in der Höhe dehnen, wenn sich viel Inhalt darin befindet und das Smartphone horizontal gedreht wird.

...zur Antwort

Sie können die jQuery-Methode text() verwenden, um den Text des HTML-Blocks ohne HTML-Markup abzurufen.

  • https://api.jquery.com/text/#text1
  • https://www.w3schools.com/jquery/html_text.asp

Zum Beispiel:

<!doctype html>
<html lang="de">
<head>
	<title>Text</title>
</head>
<body>
	<div id="content">
		<h1>Überschrift.</h1>
		<p>Erster Absatz <b>mit fettem Text</b>.</p>
		<p>Zweiter Absatz <a href="#">mit einem Link</a>.</p>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>
	jQuery(document).ready(function($) {
		var text = $('#content').text();
		console.log(text);
	});
	</script>
</body>
</html>

Infolgedessen wird der AAA-Variablen der folgende Text zugewiesen:

Überschrift.
Erster Absatz mit fettem Text.
Zweiter Absatz mit einem Link.
...zur Antwort

Das window-Objekt ist kein Befehl zum Öffnen eines Popup-Fensters, sondern ein globales Objekt, das eine Website darstellt.

  • https://www.w3schools.com/jsref/obj_window.asp
  • https://developer.mozilla.org/de/docs/Web/API/Window
Das  window-Objekt repräsentiert ein Fenster, das ein DOM Dokument enthält.

setTimeout() ist eine Methode, mit der die Ausführung einer bestimmten Funktion nach einer bestimmten Anzahl von Millisekunden gestartet wird.

  • https://www.w3schools.com/jsref/met_win_settimeout.asp
  • https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout
The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Die von setTimeout() gestartete Funktion kann verschiedene Aufgaben ausführen. Beispielsweise kann ein Popup geöffnet oder etwas auf der Seite oder etwas anderes aktualisiert werden.

var timeoutID = window.setTimeout(myFunction, 2000);

function myFunction() {
  alert('Zeit ist um!');
}
...zur Antwort

Die Spieleentwicklung umfasst Arbeiten in verschiedenen Bereichen:

  • Spielprozess
  • Design
  • Monetarisierung von Verkäufen
  • Erstellung von Spieleservern
  • technischer Support
  • tatsächlich verschiedene Teile des Spiels programmieren

Darüber hinaus impliziert die Programmierung von Spielen eine Affäre mit den technischen Anforderungen, die bei der Herstellung von Spielen gestellt werden:

  • schnelle Grafikverarbeitung
  • Interaktion zwischen Spielern über das Internet
  • und so weiter.
...zur Antwort

Sie müssen zuerst die PHP-Datei mit include in die Datei für die Seite aufnehmen und dann die Funktionen aus dieser Datei verwenden.

https://www.php.net/manual/de/function.include.php

Zum Beispiel:

my_api.php:

<?php

function echo_h1( $text = "H1 Text." ) {
  echo "<h1>$text</h1>";
}

function echo_h2( $text = "H2 Text." ) {
  echo "<h2>$text</h2>";
}

my_page.php:

<?php
include "my_api.php";
?>
<div class="content">
  <?php echo_h1(); ?>
  <?php echo_h2( "New H2 text." ); ?>
</div>
...zur Antwort

1) Es scheint, als würde zufälliger Code auf folgende Weise erstellt:

  1. Das Programm erhält eine zufällige 9-stellige Nummer.
  2. Dann wählt er die Position in dieser Nummer, um zu beginnen.
  3. Und nimmt die nächsten 3 Ziffern als Chiffre.

Versuchen Sie, diese beiden Zeilen in der "slc_output_captcha_code()"-Funktion

  $start = mt_rand( 0, 3 );
  $answer = substr( (string) $answer_pool, $start, 3 );

auf diese Weise zu bearbeiten, um einen 8-stelligen Code zu erhalten:

  $start = mt_rand( 0, 1 );
  $answer = substr( (string) $answer_pool, $start, 8 );

2) Und damit 8 Ziffern in der Datenbank gespeichert werden, nicht 5, bearbeiten Sie diese Zeile in der "slc_create_captcha_db_table()"-Funktion

    . 'answer varchar(5) DEFAULT NULL, '

wie folgt:

    . 'answer varchar(8) DEFAULT NULL, '

3) Da sich die Änderungen auf die Datenbank beziehen, müssen Sie das Plugin entfernen und dann das bearbeitete Plugin installieren.

Speichern Sie dazu den Ordner mit dem bearbeiteten Plugin über FTP, erstellen Sie ein ZIP-Archiv daraus, löschen Sie das Plugin aus WordPress und installieren Sie das Plugin aus Ihrem ZIP-Archiv.

Wenn Fehler auftreten, müssen Sie möglicherweise den Ordner mit dem Plugin erneut löschen, um wieder auf WordPress zugreifen zu können.

4) Wenn das Problem nach der Neuinstallation des Plugins weiterhin besteht, muss nach dem Entfernen des Plugins die vom Plugin erstellte Datentabelle mit phpMyAdmin aus der Datenbank entfernt werden. Dann wird diese Datentabelle bei der anschließenden Installation des Plugins sicher neu erstellt.

...zur Antwort

Zwangsbedingungen werden verwendet, um den Datentyp zu begrenzen, der in eine Tabelle aufgenommen werden kann. Dies stellt die Genauigkeit und Zuverlässigkeit der Daten in der Tabelle sicher. Wenn zwischen der Zwangsbedingung und der Datenaktion ein Verstoß vorliegt, wird die Aktion abgebrochen.

  • https://www.w3schools.com/sql/sql_constraints.asp (auf Englisch)
  • https://wikis.gm.fh-koeln.de/Datenbanken/CONSTRAINT

Die folgenden Zwangsbedingungen werden häufig in SQL verwendet:

  • NOT NULL
  • UNIQUE
  • PRIMARY KEY
  • FOREIGN KEY
  • CHECK
  • DEFAULT
  • INDEX

Zum Beispiel:

CREATE TABLE CUSTOMERS(
  ID   INT          NOT NULL,
  NAME VARCHAR (20) NOT NULL,
  AGE  INT          NOT NULL,
  PRIMARY KEY (ID)
);
...zur Antwort

Höchstwahrscheinlich reicht es aus, eine der CSS-Dateien auf Ihrer Site zu bearbeiten, um die Richtung der Animation für die Spirale zu ändern.

Hier sind zum Beispiel zwei einfache Spiralen. Eine Spirale dreht sich in die eine und die andere in die entgegengesetzte Richtung.

HTML

<div class="spiral"></div>
<div class="spiral spiral-contra"></div>

CSS

.spiral {
	background: url("https://webstockreview.net/images/circle-clipart-swirl-3.png") center / contain no-repeat;
	width: 100px;
	height: 100px;
	animation: spiral 3s linear infinite;
}
.spiral-contra {
	animation-name: spiral-contra;
}

@keyframes spiral {
	0% { transform: none; }  
	100% { transform: rotate(360deg); }
}
@keyframes spiral-contra {
	0% { transform: none; }  
	100% { transform: rotate(-360deg); }
}
...zur Antwort

Am einfachsten ist es, sich auf Änderungen in CSS zu beschränken.

Sie können beispielsweise zusammen mit der Stilklasse „mega-menu“ dem gewünschten Menüelement eine eigene Stilklasse hinzufügen. Das ist zum Beispiel „mega-menu my-mega-menu“ statt nur „mega-menu“.

https://www.elegantthemes.com/documentation/divi/mega-menus/

Danach können Sie das Verhalten dieses Mega-Menüs mit Hilfe zusätzlicher CSS-Anweisungen neu definieren. Zum Beispiel so:

#et-navigation .mega-menu.my-mega-menu > ul {
	flex-direction: column;
	min-height: 100vh;
	min-height: calc( 100vh - 80px );
}
#et-navigation .mega-menu.my-mega-menu > ul > li.menu-item-has-children {
	position: static;
}
#et-navigation .mega-menu.my-mega-menu > ul > li > ul {
	position: absolute;
	top: 15px; /* = padding of <ul> */ 
	bottom: 15px;
	right: 15px;
	left: 25%; /* = width of the first column */
 	display: none;
	overflow-y: auto;
  width: auto;
}
#et-navigation .mega-menu.my-mega-menu > ul > li:hover > ul {
	display: block;
}

...zur Antwort

Sie können ein Bild als Hintegrund platzieren und seine Position und Größe durch CSS-Eigenschaften definieren:

  • background-image
  • background-position
  • background-repeat
  • background-size

HTML:

<a href="" class="my-button"></a>
<button class="my-button"></button>

CSS:

.my-button {
	display: block; /* oder inline-block, damit die Schaltfläche auf Größe und Hintergrund eingestellt werden kann */
	width: 50px; 	
	height: 50px;
    margin: 15px;

	border: 1px solid green;
	border-radius: 50%;

    /* Farbe des Hintergrunds */
	background-color: white;

    /* Platziere ein Bild als Hintergrund */
	background-image: url("https://www.gutefrage.net/nmms-assets/images/immutable/brand/brand-symbol.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70%;  /* oder 30px, oder contain, oder cover */
}

Das Ergebnis sieht so aus:

...zur Antwort

Verwenden Sie die ":hover"-Pseudoelemente für das "<tr>"-Tag Ihrer Tabelle.

https://developer.mozilla.org/de/docs/Web/CSS/:hover

Die :hover CSS  Pseudoklasse wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren.

CSS

.my-table tr:hover {
	background: #ccc;
	color: red;
}

HTML

<table class="my-table">
	<tr>
		<td>1</td>
		<td>Eins</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Zwei</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Drei</td>
	</tr>
</table>

...zur Antwort