Frontend – die meistgelesenen Beiträge

Quereinstieg als Frontend Entwickler mit Background in Business Administration fast unmöglich?

Hallo zusammen, ich habe kürzlich meine Weiterbildung als Frontend-Entwickler abgeschlossen und bin nun auf Jobsuche. Trotz des oft berichteten Fachkräftemangels scheint der Markt für Junior-Stellen hart umkämpft zu sein. Meine Bewerbungsunterlagen wurden von der Weiterbildung geprüft, also können sie nicht so schlecht sein.

Ich habe einen B.Sc. in Business Administration und habe vor kurzem meine Weiterbildung zum Frontend-Entwickler abgeschlossen. Ich habe während des Studiums ein Praktikum im Bereich Operations bei einem IT-Startup absolviert und arbeite derzeit wieder dort als Praktikant, diesmal als Frontend-Entwickler. Aus Budgetgründen können sie im Moment keine neuen Mitarbeiter einstellen. Während dieser Zeit plane ich, mich weiter zum Fullstack-Entwickler (TypeScript + React) zu qualifizieren.

Alternativ denke ich darüber nach, ein SAP-Zertifikat zu erwerben, um eine Stelle im SAP-Bereich zu suchen. Hier gibt es wirklich Stellenangebote (Trainee/Junior) ohne Ende.

Eine weitere Option wäre eine Bewerbung als IT-Consultant, obwohl ich das Gefühl habe, dass ich dafür mehr Erfahrung als Entwickler benötige. Wie soll ich Unternehmen beraten, wenn ich selbst keine Ahnung habe?

Es ist frustrierend, nach dem Sparen und Absolvieren der Weiterbildung keine Stelle zu finden, aber ich bleibe optimistisch und offen für Möglichkeiten. Ich hoffe, ihr könnt mir vielleicht ein paar Tipps geben.

Vielen Dank im Voraus

JavaScript, Jobsuche, Webentwicklung, Frontend, Junior

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Quiz Wuiz</title>

<link rel="stylesheet" href="/quiz.css">

</head>

<body>

  <img src="/logo.png" alt="img" id="img" class="img">

  <h1 id="title">Today's Quiz</h1>

  <div id="quiz-container">

    <div class="questions">

      <h2 id="question"></h2>

      <ol type="A">

        <li class="option"><span id="option0" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option1" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option2" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option3" onclick="calcScore(this)"></span></li>

      </ol>

      <h4 id="stat"></h4>

    </div>

    <div class="buttons">

      <button type="button" class="next">Next</button>

    </div>

  </div>

  <!-- scoreboard section -->

  <div id="scoreboard">

    <img src="/logo.png" alt="">

    <h2 id="score-title">Your Score</h2>

    <h2 id="score"></h2>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

    <button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

  </div>

  

  <div id="answerBank">

    <h2>Answers :</h2>

    <ol type="1" id="answers">

    </ol>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

  </div>

  

  <script src="/quiz.js"></script>

</body>

</html>

JAVA SCRIPT:

Bild zum Beitrag
HTML, Webseite, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend

Ab wann beginnt Full-Stack Entwicklung im Webbereich und wie sieht es mit dem Gehalt aus?

Hallo liebe Community,

kurze Einleitung:

Ich bin Junior Webentwickler seit zirka 1 Jahr bei einer (relativ) kleinen Firma. Wir arbeiten viel mit Freelancer zusammen.

Ich bin mit HTML / CSS / JS eingestiegen und programmiere hier jetzt hauptsächlich über Wordpress die Websiten und Plugins.

Dazu wird bekannterweise → php genutzt. Daher geht hier Jquery, PHP, JS, MySQL, Git/hub und das Wissen in vielen bewährten Plugins und derer Programmierung für erweitere Funktionen einher.

Daher mache ich Backend und Frontend Entwicklung gleichermaßen. Das kann ich auch schon relativ gut, ich musste hier mir alles selbst beibringen und hab hauptsächlich mit Udemy und unserer tollen AI ChatGPT Hilfe mir alles beigebracht.
Die Codereviews hab ich mir von der AI machen lassen, Fehler aufzeigen, den Code bewerten und Verbesserungsmöglichkeiten zeigen.

So bin ich nun der Meinung, ein relativ solides Wissen angeeignet zu haben.
Jetzt zu meinen Fragen:

Frage 1:
Ab wann dürfte ich mich Full-Stack-Entwickler nennen? Ich hab großen Respekt vor erfahrenen Full-Stack-Entwicklern, weil da eine Menge zugehört. Aber ist es schon Full-Stack, wenn man Frontend und Backend macht?

Frage 2:
Ich arbeite in MV und bekomme noch 2600 € brutto gezahlt. Es ist noch relativ niedrig, weil ich zu Anfang viel gelernt habe, die ersten Monate, um den Anforderungen gerecht zu werden. 2400 € in den ersten 6 Monaten und bis jetzt (12. Monat) 2600.

Was wäre so eine faire Preisspanne? Die Firma gibts bald seit 10 Jahren und wir sind kein Start-up mehr. Auch läuft es gerade gut und ich konnte alle Aufgaben bewältigen, die mir seither gestellt wurden. Wenn ich auch für manche länger gebraucht habe (aber dafür bin ich ja auch ein Junior). Mich würde interessieren, wo es fair wäre? Ich möchte bald in die Gehaltsverhandlung gehen und wäre sehr dankbar über Ratschläge und eure Meinungen.

Liebe Grüße

Beruf, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Entwicklung, PHP, Programmiersprache, Webdesign, Webentwicklung, Backend, Frontend

Bootcamp Ja oder Nein?

Hallo zusammen,

Ich bin seit dem 08.01.2024 Fachinformatiker für Anwendungsentwicklung, soweit so gut. Leider habe ich erst mit einer Umschulung begonnen, die in die Hose ging, weil das ein Umschulungsunternehmen war, das einen rein gelockt hat, um an den Bildungsgutschein zu kommen, und das war's dann auch. Dadurch bin ich durch meine Abschlussprüfung durchgefallen. Im Anschluss habe ich direkt eine Ausbildung im 3. Lehrjahr begonnen bis zur Wiederholungsprüfung.

Das Ausbildungsunternehmen hat mich netterweise direkt angenommen. Allerdings war ich der einzige Entwickler vor Ort, und mein Ausbilder war jemand, der vor über 10 Jahren eine Umschulung zum FiAe gemacht hat, dann den Ausbilderschein erworben hat und seitdem keine Zeile Code mehr geschrieben hat. Dadurch konnte er nie meine Fragen beantworten, und ich musste mir eigenständig C# und Winforms aneignen, da das Unternehmen die Arbeiten der Mitarbeiter damit automatisieren / vereinfachen wollte. Ein Jahr lang habe ich für das Unternehmen native Desktop-Apps geschrieben und war für das Updaten der Programme zuständig.

In der Ausbildungszeit merkte ich, dass mich die Web-Entwicklung immer mehr interessiert, weshalb ich nach der Abschlussprüfung einen Udemy-Kurs über Web-Entwicklung begonnen habe. Hier habe ich bereits HTML und CSS durchgearbeitet und bin aktuell bei JavaScript.

Jetzt fragt sich der ein oder andere, warum hast du nicht auf der Arbeit gelernt? Nun ja, der Betrieb war der Meinung, solange er nicht 8 Stunden am Stück Code am Tippen ist, macht er Lagertätigkeiten und befüllt die Maschinen.

Jetzt kommt die Frage auf, dann hätte man das nach der Arbeit machen können. Richtig, jedoch musste ich mir hier die Theorie reinprügeln, die für die Abschlussprüfung benötigt wird, da ich in den 2 Jahren Umschulung nichts erklärt bekommen habe. Das heißt, in dem Jahr habe ich auf der Arbeit eigenständig mir C# und Winforms angeeignet und Lager- / Maschinen-Tätigkeiten ausgeübt und nach der Arbeit für die IHK-Prüfung gelernt.

Aus diesem Grund kann ich auch die Unternehmen verstehen, die Absagen schicken, weil die sehen, ich habe nur C# und Winforms gemacht und Daten an MySQL geschickt und abgerufen "woooow".

Da das Unternehmen auch der Meinung war, dass Git "Mist" sei und nur schlechte Programmierer Fehler machen und unprofessionell sind, wenn sie damit arbeiten, durfte ich das auch nicht während der Arbeitszeit lernen. Ergo eigne ich mir das neben dem Web-Entwickler Kurs auch noch an, in dem ich mit Visual Studio Code committe und pushe. Ja, das ist bei weitem nicht das, wofür Git da ist, aber ich bin noch am Lernen. :D

__________________________

Jetzt wurde es doch wieder ein langer Text, aber nun zu meiner Frage. :D

Ich habe demnächst ein Gespräch mit dem Arbeitsamt bezüglich des Bildungsgutscheins. Sehr wahrscheinlich werde ich einen erhalten, wurde mir im letzten Gespräch gesagt. Für den Fall, dass es funktioniert, will ich nicht viel Zeit verlieren, da ich schon 30 bin und immer noch keinen Job habe.

Deshalb kamen Bootcamps für mich in Frage und wollte euch fragen, ob Ihr selbst Erfahrungen mit einem Bootcamp gemacht habt oder vielleicht jemanden kennt und ein bestimmtes Bootcamp empfehlen könnt.

Ich bedanke mich schon mal im voraus für eure Zeit die Ihr mit dem Lesen der Frage und eurer Antwort investiert habt.

Gar kein Bootcamp, weiter eigenständig lernen 100%
Bootcamp Front-End Ja 0%
Bootcamp Full-Stack Ja 0%
HTML, CSS, JavaScript, Bildungsgutschein, Bootcamp, Programmiersprache, Webentwicklung, Backend, Frontend

Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>
HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend

Action URL in einem PHP-Formular über einen Schalter in Echtzeit dynamisch ändern, wie?

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

HTML, Webseite, JavaScript, HTML5, Datenbank, PHP, Programmiersprache, Webdesign, Webentwicklung, Webserver, Frontend

Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

  • Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
  • Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

Homepage, HTML, Webseite, programmieren, CSS, WordPress, Java, JavaScript, ASP.NET, Datenbank, Express, Hosting, Informatik, PHP, Programmiersprache, Python, Softwareentwicklung, vServer, Webdesign, Webentwicklung, Webspace, Backend, Frontend, Flask

Angular: Wieso wird Component zweimal aufgerufen?

Hi,

ich bin gerade dabei in Angular eine kleine Webseite zu erstellen. Einfach Just for Fun.

Kurz meine Components + Quellcode.

app-component.html

<app-toolbar></app-toolbar>


<router-outlet></router-outlet>

toolbar.component.html

<div class="head" style="background-color: darkgreen;">
    <div class="box">
            <button class="selectionButton" routerLink="/startseite">
                <div class="menuButton"></div>
                <div class="menuButton"></div>
                <div class="menuButton"></div>
            </button>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">TypeScript</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Java</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton" routerLink="/htmluebersicht">
            <font size="5">HTML</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Cypress</font>
        </button>
    </div>
</div>

html-page.component.html

<p>html-page works!</p>

Wenn ich jetzt auf den Button HTML ("/htmluebersicht") klicke, kommt der Text "html-page works!" .... Alles gut, so solls.
Wenn ich jetzt aber wieder auf den Menü Button ("/startseite") klicke wird meine toolbar.component.html irgendwie zweimal auf der Webseite angezeigt.

Weis jemand wieso die toolbar dann zweimal angezeigt wird?

Ich hoffe es ist verständlich was ich meine.

Computer, Programm, HTML, Webseite, programmieren, Frontend, TypeScript, Angular

Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

JavaScript Vanilla 100%
Framework / Bibliothek (Angular, React, Vue.js) 0%
CSS, JavaScript, HTML5, berufseinsteiger, Frontend, Junior

SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">
HTML, Webseite, CSS, Favicon, Frontend, SVG

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

 (Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

HTML, Webseite, CSS, HTML5, Code, PHP, Programmiersprache, Python, Webdesign, Webentwicklung, Frontend, Python 3, Selenium

Website Programmierung Frontend - Backend Programmiersprache

Hallo alle zusammen,

mich interessiert neuerdings im Bereich der Programmierung das Thema: Welche Programmiersprache für eine dynamische Website? Wenn ich zum Beispiel ein Forum auf einer Website entwickeln möchte, oder NOCH größere Programme, dann interessiert es mich, was man da für Sprachen benutzten könnte.

Außerdem habe ich mitbekommenm, das bei vielen größeren online-Diensten ein Unterschied der Programmierung beim frontend und beim backend besteht. Zum Beispiel habe ich von der Kobination:

Zur Ausgabe der Daten auf der Website(Frontend) --> Phyton Zur Programmierung im Hintergrund(Backend) --> C++

gelesen. Jetzt frage ich mich dazu wiegesagt, welche Programmiersprache für Frontend, und welche für das Backend gut geeignet ist, ich habe mich ein bisschen umgeschaut, und bin zu mehreren Sprachen für das jeweilige End gekommen:

Frontend: -PHP -Phyton -ASP

Backend: -C -C++ -Java

Ihr könnt ja mal ein paar Vorschläge mit euren Meinungen schicken, welche Sprachen in welchen Kombinationen man für größere Website-Projekte gebrauchen kann. Auch wichtig wäre mir, was ich mich auch schon öfters gefragt habe, warum überhaupt eine Programmiersprachen-Unterscheidung zwischen Front- und Backend herrschen muss. Darüber bin ich mir auch noch nicht ganz im Klaren.

Also, ich bitte bitte bitte euch um eure Unterstützung für die Beantwortung meiner Fragen, weil es mir wirklich TOTAL wichtig wäre. Und es mir wirklich interessieren würde.

Ich danke euch allen schonmal im Voraus,

mit vielen Grüßen Ichfragewas

Internet, Webseite, programmieren, Meinung, Programmiersprache, Projekt, Vorschlag, Backend, Frontend

Wie gebe ich Dictionary einer Funktion in Javascript mit?

Hallo, ich kriege folgende Fehlermeldung bei meinem Code: "Uncaught SyntaxError: Unexpected identifier" und weiß nicht wie ich mein dict meine onclick so übergebe, dass ich anschließend damit weiterarbeiten und iterieren kann. Als Beispiel für mein Problem habe ich folgende kleine anwendung geschrieben:

script.js:

function geklickt(dictionary){
$('#Entries').text(dictionary);
}


var dict =
{'lizens':
    {'Apache License 2.0':
        {'value': 23,
         'paths': ['Bernd', 'Hans'],
         'id': '342345'}},
'rechte':
        {'Copyright (c) 2013-2020 the original author or authors': 3},
'authoren':
        {'Bexter': 6, 'senior': 6},
'fileTypes': [0, 21, 0, 0, 0, 0, 0, 0, 44],
}


 $("#buttons").append(`<button href="#"onclick="geklickt(${dict})">drücken</a></button>`);



test.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >

<ul id="buttons"></ul>
<p id="Entries"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='assets/js/scripts.js') }}"></script>
</body>
</html>

Also meine Frage ist wie ich jetzt mein dict der onclick übergebe damit es am ende ausgegeben werden kann. In meiner eigentlichen Anwendung will ich damit natürlich noch weiterarbeiten, also vlt auch so dass ich es anschließend noch iterieren kann. Ich bin recht neu und kenne den Zusammenhang zwischen String und Dictionary noch nicht richtig, kann ich bei einem Dictionary iterieren wenn es als string vorliegt oder ist Dictionary eine art eigene Datenstruktur?
Danke schonmal im Voraus.
Computer, Technik, HTML, programmieren, Java, JavaScript, Technologie, Frontend

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask

Welche verschieden Arten von Systemen gibt es (eingebettete Systeme etc)? Wer kann kontrollieren ob ich die Systeme richtig zugeordnet hab (siehe Foto)?

Ist die Tabellenkalkulationssoftware auf dem PC ein System von Systemen oder ist es eine eigenständige Anwendung?
Und was für ein System ist das Blutdruckmessgerät?

Mit freundlichen Grüßen

1 Eigenständige (stand-alone) Anwendungen: Dies sind Anwendungssysteme, die auf einem lokalen Rechner wie einem PC laufen. Sie besitzen alle nötigen Funkti- onalitäten und müssen nicht mit einem Netzwerk verbunden sein. Beispiele sol- cher Anwendungen sind Office-Anwendungen auf einem PC, CAD-Programme, Software zur Fotobearbeitung usw.

2 Interaktive transaktionsbasierte Anwendungen: Diese Anwendungen werden auf einem entfernten Computer ausgeführt. Die Benutzer können entweder von ihren eigenen PCs aus oder über Terminals darauf zugreifen. Hierzu gehören sicherlich Webanwendungen wie E-Commerce-Anwendungen, bei denen man mit einem entfernten System verbunden ist, um Waren und Dienstleistungen zu kaufen. Diese Anwendungsklasse enthält auch Geschäftssysteme, wobei der Zugang zu diesen Systemen über einen Webbrowser oder über spezielle Client-Programm- und Cloud-basierte Dienste wie E-Mail und Foto-Sharing erfolgt. Interaktive An- wendungen benötigen häufig einen großen Datenspeicher, auf den bei jeder Transaktion zugegriffen wird und der dabei jeweils aktualisiert wird.

3 Eingebettete Steuerungssysteme: Dies sind Softwaresteuerungssysteme, die Hard- waregeräte steuern und verwalten. Zahlenmäßig gibt es wahrscheinlich mehr ein- gebettete Systeme als irgendeine andere Art von System. Beispiele für eingebet- tete Systeme sind die Software in einem Mobiltelefon, Software zur Steuerung des Antiblockiersystems im Auto und Mikrowellensoftware zum Steuern des Kochvorgangs.

4 Unterhaltungssysteme: Dies sind Systeme, die in erster Linie für die private Nut- zung gedacht sind und die zur Unterhaltung ihrer Nutzer dienen. Die meisten dieser Systeme sind Spiele. Die Qualität der angebotenen Benutzerinteraktion ist das wichtigste Unterscheidungsmerkmal von Unterhaltungssystemen.

5 Datenerfassungssysteme: Dies sind Systeme, die mithilfe von Sensoren Daten aus ihrer Umgebung sammeln und diese Daten an andere Systeme zur Verarbeitung senden. Die Software muss mit Sensoren interagieren und wird oft in einer le- bensfeindlichen Umgebung oder unter extremen Bedingungen installiert wie bei- spielsweise innerhalb eines Motors oder an einem unzugänglichen Ort.

6 Systeme von Systemen: Diese sind Systeme, die aus vielen anderen Softwaresys- temen zusammengesetzt sind. Einige davon können allgemeine Softwarepro- dukte wie ein Tabellenkalkulationsprogramm sein. Andere Systeme in dem Ver- bund sind eventuell speziell für diese Umgebung geschrieben worden.

Bild zum Beitrag
PC, Computer, Software, Technik, Hardware, programmieren, System, Java, Elektrotechnik, compiler, datenerfassung, Datenbank, Informatik, Python, Softwareentwicklung, Technologie, Datenbanksystem, Frontend, IT-Studium, Backend-Developer

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Programmiersprache, Webentwicklung, Frontend, node.js