[OldSkool] CSS3Maker - Free CSS3 Generator Tool
Eure Hilfe benötigt: Sammlung der besten Links für HTML Profis
- Ersteller admin
- Erstellt am
Adobe Color | Farbpalleten-Generator
Page Speed Tools
Apple Touch Icon / Favicon
Icon Font | SVG Icon Sets
Isotope | Layout modes
Validator | HTML & CSS
Internet Archive | Wayback Machine
Sempervivum
Senior HTML'ler
Ein bewährtes Hilfsmittel um Tabellen zu erweitern, z. B. mit Suchen und Sortieren, ist Datatables:
datatables.net
Vor kurzem bin ich darauf aufmerksam geworden, dass es auch schlankere Alternativen gibt:
github.com
https://tabulator.info
Diese habe ich bisher noch nicht ausgetestet, werde es aber tun, wenn sich ein Anlass dafür ergibt.
DataTables | Javascript table library
datatables.net
Vor kurzem bin ich darauf aufmerksam geworden, dass es auch schlankere Alternativen gibt:
Home
A lightning fast JavaScript grid/spreadsheet. Contribute to 6pac/SlickGrid development by creating an account on GitHub.
github.com
Diese habe ich bisher noch nicht ausgetestet, werde es aber tun, wenn sich ein Anlass dafür ergibt.
Sempervivum
Senior HTML'ler
Selects haben den Nachteil, dass sie nur sehr eingeschränkt zu stylen sind. Und hin und wieder sind die Optionen so zahlreich, dass eine Suchfunktion nötig ist.
Beides liefern diese beiden Bibliotheken:
select2.org
Beide hervorragend aber keine Leichtgewichte. Daher bin ich vor kurzem daran gegangen, für den einfachsten aber häufigsten Fall, keine Gruppierung, keine Mehrfachauswahl und kein Suchen, eine schlanke Alternative zu programmieren. Hier eine Demo:
Beides liefern diese beiden Bibliotheken:
Getting Started | Select2 - The jQuery replacement for select boxes
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.
select2.org
Beide hervorragend aber keine Leichtgewichte. Daher bin ich vor kurzem daran gegangen, für den einfachsten aber häufigsten Fall, keine Gruppierung, keine Mehrfachauswahl und kein Suchen, eine schlanke Alternative zu programmieren. Hier eine Demo:
Zuletzt bearbeitet:
Sempervivum
Senior HTML'ler
Hier werden Möglichkeiten des Stylings mit Flexlayout beschrieben, die nicht sofort auf der Hand liegen. Insbesondere
stackoverflow.com
margin: auto; kann man in manchen Situationen mit Vorteil verwenden:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Consider the main axis and cross axis of a flex container: Source: W3C To align flex items along the main axis there is one property: justify-content To align flex items along the cross axis the...
stackoverflow.com
Sempervivum
Senior HTML'ler
Hier kann man "eben schnell" tabellarische Testdaten in allen erdenklichen Formate erzeugen:
Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel
A free test data generator and API mocking tool - Mockaroo lets you create custom CSV, JSON, SQL, and Excel datasets to test and demo your software.
www.mockaroo.com
Sempervivum
Senior HTML'ler
Was einen Ersatz für das select von HTML betrifft (siehe #32), habe ich vor kurzem eine sehr gute Alternative zu Select2 und Selectize gefunden, und zwar Slim-Select:
Wirklich ein Leichtgewicht und viel einfacher und übersichtlicher zu handhaben.
Sempervivum
Senior HTML'ler
Nicht unbedingt ein Tool aber ein Verfahren im Bereich der Datenbanken, das stärkere Beachtung und Anwendung verdient:
Es ist relativ neu, wird wenig angewendet und verfügt über eine geringe Akzeptanz: Das Speichern von Datenstrukturen in einer Zeile einer Tabelle in Form eines JSON-kodierten Strings.
Relationale Datenbanken sind weit verbreitet und gut eingeführt. Sie haben jedoch eine gravierende Beschränkung: Die Struktur der Daten ist auf zwei Dimensionen beschränkt. Häufig ist es jedoch erforderlich, eine dritte Dimension hinein zu bringen, wenn eine Anzahl von gleichartigen Elementen in einem Datensatz gespeichert werden soll. Unerfahrene lösen das häufig, indem getrennte Felder mit einer Nummer als Suffix angelegt werden: element1, element2, element3, usw. Die Nachteile liegen auf der Hand:
Entweder man verschwendet Elemente, wenn man sehr viele anlegt.
Oder die, die man mal angelegt hat, reichen irgend wann nicht mehr aus.
Außerdem ist es nicht möglich, z. B. über die Elemente zu iterieren oder auf ein Element mit dem Index in einer Variablen zuzugreifen.
Die eingeführte Lösung besteht darin, dass man eine weitere unabhängige Tabelle mit diesen Elementen einführt. Hat den Vorteil, dass man auf die Elemente mit einem einfachen Select zugreifen kann, die Anzahl ermitteln, darüber iterieren etc. Jedoch den Nachteil, dass die Zugriffe komplizierter werden, wenn Verknüpfungen zwischen den Tabellen erforderlich sind, es sind Joins oder Subqueries erforderlich. Ebenso die Pflege: Will man von Hand die Elemente ermitteln, die zusammen gehören, wird es ebenfalls kompliziert. Objektiv betrachtet, muss man diese Lösung als Workaround betrachten, um die Beschränkung der Datenbank auf zwei Dimensionen zu umgehen.
Durch das Einführen der JSON-Kodierung von Arrays und komplexeren Strukturen ist jetzt eine elegante und einfache Lösung verfügbar. Diese können problemlos in einem Datensatz untergebracht werden ohne die Probleme, die man früher hatte. Mindestens MySQL und MariaDB unterstützen das ausdrücklich indem sie einen Datentyp JSON bereit stellen. Sollte das nicht der Fall sein, genügt ein Feld vom Datentyp String um die JSON-kodierte Struktur zu speichern.
Für die Arbeit damit steht eine Vielzahl von Funktionen zur Verfügung, so dass in den aller meisten Fälle auf das (De)kodieren mit PHP verzichtet werden kann.
Ein Beispiel habe ich in der Schublade: Eine Datenbank mit Schauspielern und Filmen, jeweils in einer Tabelle abgelegt. Eine n:m-Beziehung weil ein Schauspieler in mehreren Filmen mitgespielt hat und an einem Film mehrere Schauspieler beteiligt waren. Wenn ich richtig informiert bin, besteht die konventionelle Lösung darin, eine Verweistabelle einzuführen, die in beiden Richtungen über die IDs die Beziehung herstellt zwischen der Tabelle mit den Schauspielern und der mit den Filmen.
Beim Einsatz von JSON kann man diese Hilfstabelle einsparen, indem man die IDs der Filme beim Schauspieler in einem JSON-Array ablegt und ebenso in der entgegen gesetzten Richtung. Z. B. hat dann beim Schauspieler ein Feld movies den Inhalt [8,9,10]
Die Abfrage, um die Filme den Schauspielern zuzuordnen, konnte ich dann sehr einfach und intuitiv formulieren:
($ ist hier die Wurzel der Datenstruktur im JSON)
Mit der Verweistabelle wäre mir das nicht so leicht von der Hand gegangen und hätte mehr Gedankenarbeit und wahrscheinlich ein weiteres Join gebraucht.
Es bleibt zu hoffen, dass diese fortschrittliche und elegante Methode in Zukunft größere Anwendung und Akzeptanz findet.
Es ist relativ neu, wird wenig angewendet und verfügt über eine geringe Akzeptanz: Das Speichern von Datenstrukturen in einer Zeile einer Tabelle in Form eines JSON-kodierten Strings.
Relationale Datenbanken sind weit verbreitet und gut eingeführt. Sie haben jedoch eine gravierende Beschränkung: Die Struktur der Daten ist auf zwei Dimensionen beschränkt. Häufig ist es jedoch erforderlich, eine dritte Dimension hinein zu bringen, wenn eine Anzahl von gleichartigen Elementen in einem Datensatz gespeichert werden soll. Unerfahrene lösen das häufig, indem getrennte Felder mit einer Nummer als Suffix angelegt werden: element1, element2, element3, usw. Die Nachteile liegen auf der Hand:
Entweder man verschwendet Elemente, wenn man sehr viele anlegt.
Oder die, die man mal angelegt hat, reichen irgend wann nicht mehr aus.
Außerdem ist es nicht möglich, z. B. über die Elemente zu iterieren oder auf ein Element mit dem Index in einer Variablen zuzugreifen.
Die eingeführte Lösung besteht darin, dass man eine weitere unabhängige Tabelle mit diesen Elementen einführt. Hat den Vorteil, dass man auf die Elemente mit einem einfachen Select zugreifen kann, die Anzahl ermitteln, darüber iterieren etc. Jedoch den Nachteil, dass die Zugriffe komplizierter werden, wenn Verknüpfungen zwischen den Tabellen erforderlich sind, es sind Joins oder Subqueries erforderlich. Ebenso die Pflege: Will man von Hand die Elemente ermitteln, die zusammen gehören, wird es ebenfalls kompliziert. Objektiv betrachtet, muss man diese Lösung als Workaround betrachten, um die Beschränkung der Datenbank auf zwei Dimensionen zu umgehen.
Durch das Einführen der JSON-Kodierung von Arrays und komplexeren Strukturen ist jetzt eine elegante und einfache Lösung verfügbar. Diese können problemlos in einem Datensatz untergebracht werden ohne die Probleme, die man früher hatte. Mindestens MySQL und MariaDB unterstützen das ausdrücklich indem sie einen Datentyp JSON bereit stellen. Sollte das nicht der Fall sein, genügt ein Feld vom Datentyp String um die JSON-kodierte Struktur zu speichern.
Ein Beispiel habe ich in der Schublade: Eine Datenbank mit Schauspielern und Filmen, jeweils in einer Tabelle abgelegt. Eine n:m-Beziehung weil ein Schauspieler in mehreren Filmen mitgespielt hat und an einem Film mehrere Schauspieler beteiligt waren. Wenn ich richtig informiert bin, besteht die konventionelle Lösung darin, eine Verweistabelle einzuführen, die in beiden Richtungen über die IDs die Beziehung herstellt zwischen der Tabelle mit den Schauspielern und der mit den Filmen.
Beim Einsatz von JSON kann man diese Hilfstabelle einsparen, indem man die IDs der Filme beim Schauspieler in einem JSON-Array ablegt und ebenso in der entgegen gesetzten Richtung. Z. B. hat dann beim Schauspieler ein Feld movies den Inhalt [8,9,10]
Die Abfrage, um die Filme den Schauspielern zuzuordnen, konnte ich dann sehr einfach und intuitiv formulieren:
Code:
SELECT actor.actor, movie2.title, movie2.year, movie2.land
FROM actor LEFT JOIN movie2 ON JSON_CONTAINS(actor.movies, movie2.id, '$')Mit der Verweistabelle wäre mir das nicht so leicht von der Hand gegangen und hätte mehr Gedankenarbeit und wahrscheinlich ein weiteres Join gebraucht.
Es bleibt zu hoffen, dass diese fortschrittliche und elegante Methode in Zukunft größere Anwendung und Akzeptanz findet.
martinreuter
Neues Mitglied
CSS Verlauf/Gradient Generator:
https://www.masterfunnels.io/css-gradient-tool/
https://www.masterfunnels.io/css-gradient-tool/
