Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03593.jsonl.gz/3199

4/4/2019
Was ist Layout Thrashing?
Layout Thrashing bedeutet, dass der Browser die Positionen und Grössen der DOM-Elemente mehrmals neu berechnen muss, bevor die Seite schlussendlich "geladen" und dem Benutzer angezeigt werden kann. Im optimalen Fall wird die Kalkulation vom Layout nur einmal durchgeführt. Der Ablauf, welcher das Bild zum Benutzer bringt, sieht dann wie folgt aus:
Nehmen wir nun jedoch dieses Beispiel:
Es werden von drei Elementen nacheinander die height verdoppelt. Um die height vom ersten Element zu verdoppeln, wird clientHeight ausgelesen. So weit so gut. Nun wird die height vom element1 gesetzt, indem die zuvor ausgelesene clientHeight verdoppelt wird. Diese Aktion führt dazu, dass das Layout "invalid" wird, da sich ein Element darin verändert hat. Der Browser reagiert jedoch noch nicht, wenn das Layout lediglich invalid ist. Das wird sich aber schnell ändern, denn: Um vom element2 die clientHeight herauslesen zu können, muss das Layout nun neu kalkuliert werden, da es vorher invalidiert wurde - Layout Thrashing passiert. Das selbe Prozedere für das element3. Es wird aus dem JavaScript gezwungen, das Layout neu zu kalkulieren. Der Browser springt vom JavaScript zum Layout und wieder zurück, so viele Male, wie es nötigt ist:
Es gibt viele Fälle, welche Layout Thrashing auslösen. Eine Liste mit allen Umständen finden Sie hier: gist.github.com/paulirish/5d52fb081b3570c81e3a
Layout Thrashing vermindern
Eine einfache Lösung um Layout Thrashing zu vermeiden ist, alle benötigten Werte zuerst auszulesen, und dann erst die Elemente zu ändern:
Zugegebenermassen funktioniert dies in der realen Welt wohl nur in den aller seltensten Fällen so einfach. Aber keine Angst, es gibt auch für komplexere Use-Cases eine Lösung: window.requestAnimationFrame(). Diese terminiert eine Funktion zum ausführen im nächsten Frame, ähnlich setTimeout().
Um zu sehen, wie gross die Performanceverbesserung in einem solchen Fall ist, habe ich eine simple Applikation in StackBlitz erstellt. Diese erstellt zu Anfang 1000 div-Elemente. Die zwei Buttons oben machen grundsätzlich das Selbe - sie iterieren über die Elemente und verdoppeln ihre height. Einziger Unterschied ist, der eine macht es unperfomant, also mit Layout Thrashing, der Andere macht sich der requestAnimationFrame() Funktion zu nutze:
Ergebnis
Mit Layout Thrashing (links) benötigen 1000 Elemente 457.2 ms fürs Rendering, rechts, mit Hilfe von requestAnimationFrame() gerade mal noch 12.1 ms! Überzeugt?
Versuchen Sie selber im Editor und den Performance-Dev-Tools Ihres Browsers herumzuspielen, um die Sache genauer anschauen zu können!
Für Fragen und Anregungen stehe ich gerne zur Verfügung.
20/3/2019
Nach dem intensiven Auswahlverfahren der Bewerbungen und ersten Kennenlerngesprächen, war es in der ersten März Wochen endlich soweit- unsere top 8 Kandidaten traten bei uns zu unseren Schnuppertagen an. Zwei Gruppen junge Talente konnten sich während 3 Tage einen Einblick in den Applikationsentwicklungberuf sowie des internen Lebens in der Talent Factory Einblick erhalten.
Spielerisch erlernten die Kandidaten das Programmieren mit den kleinen mBots Roboter. Die Kandidaten erhielten verschiedene Aufgaben sowie eine Kreativchallenge wobei sie ihrer Inspiration freien lauf lassen konnten. Die mBots Roboter haben verschiedene Sensore zu Auswahl, die man mit Hilfe der Scratch ähnlichen Benutzeroberfläche bedienen kann. Ein Ultraschallsensor ermöglicht die Erkennung von Gegenständen die sich vor dem mBot befinden; ein Lichtsensorevent wird durch Lichtwechsel (hell/dunkel) ausgelöst; der Liniensensor bietet letztendlich die Möglichkeit, Farben auf dem Boden zu unterscheiden. Ein paar farbige LED lampen und ein 8-bit Tonmodul können ebenfalls mit Code angesteuert werden. Dazu bewegt sich der Roboter noch mit Hilfe von zwei grossen Gummirädern in alle Richtungen.
Viele Möglichkeiten, die die Kandidaten mit Hilfe von ein paar Aufgaben kennen gelernt haben. Mit dem Liniensensor einer schwarz gezeichneten Linie folgen? Kein Problem. Ein Labyrinth mit den Ultraschallsensor lösen? Ein Kinderspiel. Naja, vielleicht nicht unbedingt ein Kinderspiel, aber zum Glück hatten wir ja ein paar Twix und Biberli zur Verfügung die bei Frustration helfen konnten.
Bei der Kreativaufgabe war der Auftrag ein wenig Abstrakter. Es brauchte irgend eine gute oder lustige Idee die mit den mBots umgesetzt werden konnte. 3 Stunden um zu denken, skizzieren, googeln, ausprobieren und endlich dem Talent Factory Team vorführen. Alles um den begehrten Preis von... einer Packung Schokolade!
Die mBots waren aber nicht alles, was die Kandidaten bei uns erleben konnten. Jeden Tag wurde nach SCRUM ein Daily Meeting durchgeführt. Am 1. Tag gab es sogar die Möglichkeit bei einem Sprint Review mit dem Kunde mitzumachen sowie an kurzen Schulungen zu LaTeX und Java teilzunehmen. Alles um einen tieferen Einblick in unseren Job zu erwerben.
Am dritten Tag machten die Kandidaten noch an unserem TF Weekly Meeting mit, in dem wir unsere Woche überfliegen, News teilen und verschiedene TF-Kultur Prozesse leben. Im Anschluss gab es beim wochentlichen TF Talk pro Schnupperkandidat je einen Vortrag, die sie über die 3 Tage schnuppern vorbereiten konnten.
Und das war's eigentlich schon! Mit Talent Factory Schnupperzertifikat in der Hand konnten unsere Kandidaten, hoffentlich begeistert und voller neuer Inspiration, den letzten Schnuppertag abschliessen.
Ein besonderes Dankeschön geht an unseren Lernenden Raffaele, der sich bei beiden Gruppen um die technische Unterstützung der Kandidaten gekümmert hat.
Nun ist es soweit: die grosse Entscheidung der 3 top Kandidaten wurde demokratisch im Team entschieden und nun werden die Kandidaten zusammen mit den Eltern zu einem zweiten Gespräch in die Talent Factory eingeladen. Schon bald haben wir unser nächstes nachwuchs Talent rekrutiert.
DoITclever ist ein Schweizer Startup Unternehmen welches ein Editor für individuelle Branchen entwickelt hat. Die Webseiten können direkt online im CMS bearbeitet und auch mit Plugins oder anderen Systemen ausgebaut oder weiterentwickelt werden. Die Talent-Factory hat eine Partnerschaft mit doITclever wobei wir Lernenden die Webseiten für seine Kunden erstellen dürfen.
Als Übung habe ich unsere Talent-Factory Webseite mit dem doITclever Produkt reproduziert. Ich persönlich habe mir das Layout des CMS des Webseiten creators ganz anders vorgestellt als es dann wirklich war. Es ist sehr übersichtlich und einfach gestaltet, man findet was man braucht und das Speichern geht sehr schnell.
Im oberen Bereich des Bildes befindet sich das Menu bei welchem man beispielsweise die Sprache ändern, das Design anpassen, die Plugins installieren (zum Beispiel für einen Webshop), oder ein Backup erstellen kann. Unterhalb dieses Menus befinden sich Inhalte der Webseite welche mit dem normalen GUI oder mittels dem CSS-Stylesheet editiert werden können .
Im obigen Screenshot habe ich euch beispielsweise abgebildet, wie der Header bearbeitet werden kann. Oben links im Editierfeld (unterhalb des roten Speicher Buttons) befindet sich das “Quellcode-Feld” wobei direkt der HTML-Code verändert werden kann. Andere Standardsymbole wie Schrift (Grösse & Font), Bilder, Tabellen, Hintergrundbilder, Emojis oder Links befinden sich auch im Editierfeld.
Die Abbildung oben zeigt mein "Talent-Factory Webseiten Projekt", welches ich innerhalb fünf Stunden reproduziert habe. Somit ist mein Fazit, dass das Produkt von doITclever ein cooler Editor für Webseiten ist. Er ist übersichtlich gestaltet, einfach bedienbar mittels Drag & Drop Funktion und kann somit sehr schnell und effizient für Laien wie auch Erfahrende Anwender erstellt werden. Für Fortgeschrittene Anwender ist es zudem auch möglich am Code individuelle Anpassungen vorzunehmen. Das Produkt ist sehr vielversprechend und von mir sehr empfehlenswert. Ich freue mich auf weiter Aufträge von doITclever.
26/2/2019
ANTLR ist ein Parsergenerator, ein Werkzeug, um einen Parser zu erstellen. Ein Parser nimmt ein Stück Text und transformiert ihn in eine organisierte Struktur, wie beispielsweise einen abstrakten Syntaxbaum (Abstract Syntax Tree).
Stellen wir uns einmal die folgenden Ausdrücke vor, die Teil einer (Programmier-) Sprache sein könnten:
Wie können wir die beiden Zeilen verarbeiten? Mit einem regulären Ausdruck? Nein, den diese Ausdrücke könnten weitaus kpomplexer sein. An dieser Stelle setzen wir ein Werkzeuge wie ANTLR ein, welches uns einen grossen Teil der Arbeit abnehmen wird.
Für den Scanner (lexikalische Analyse) definieren wir in einem ersten Schritt die einzelnen Tokens, welche nach dem Einlesen des Quelltextes dem Parser übergeben werden. Dieser Teil kann durchaus mit der Definition eines regulären Ausdruckes ver-glichen werden.
Im Anschluss benötigen wir noch eine Definition unserer Sprache für den Parser, welcher die Textzeilen interpretieren und anschliessend entsprechend verarbeiten kann.
Selbstverständlich benötigen wir noch ein (kleines) Stück eigener Code, um die effektive Berechnung durchzuführen resp. um den resultierenden, abstrakten Syntaxbaum (AST) abzuarbeiten.
31/1/2019
Einführung
Angular (Nachfolger von AngularJS) ist ein TypeScript-basiertes Front-End-Webapplikationsframework. Es wird von einer Community aus Einzelpersonen und Unternehmen, angeführt durch Google, entwickelt und als OpenSource Software publiziert. Angular wurde im Dezember 2016 angekündigt.
Unterschiede zwischen Angular und AngularJS
Angular wurde als Nachfolger von AngularJS von Grund auf neu geschrieben und unterscheidet sich von diesem in vielerlei Hinsicht:
Geschichte
Ursprünglich wurde die Neuimplementation von AngularJS ”Angular 2” genannt, doch das führte bei Entwicklern zur Verwirrung. Um Klarheit zu schaffen, wurde empfohlen, für die beiden Frameworks unterschiedliche Bezeichnungen zu verwenden, d.h. ”Angular” von ”AngularJS” abzugrenzen und zur Unterscheidung nicht bloss Versionsnummern zu verwenden.
Version 2
Angular 2 wurde auf der ng-Europe-Konferenz im September 2014 angekündigt. Die drastischen Änderungen in der Version 2.0 sorgten für Kontroversen unter den Entwicklern. Im Dezember 2015 erschien die erste Beta-Version und im Mai 2016 der erste Release Candidate. Die endgültige Version wurde am 14. September 2016 veröffentlicht.
Version 4
Am 13. Dezember 2016 wurde Angular 4 angekündigt. Die Versionsnummer 3 wurde übersprungen, da eines der NPM-Pakete von Angular 2 bereits die Version v3.3.0 trug. Die endgültige Version wurde am 23. März 2017 veröffentlicht.
Version 5
Am 1. November 2017 erschien Angular 5. Zu den wichtigsten Verbesserungen von Angular 5 gehören die Unterstützung für progressive Web-Apps, ein Build Optimizer und Verbesserungen im Zusammenhang mit Material Design.
Version 6
Am 3. Mai 2018 erschien Angular 6. Angular Elements ist jetzt im Framework integriert. Alle Framework-Pakete liegen synchronisiert in Version 6.0.0 vor. Es erfolgte die Einführung zweier neuer Command-Line-Befehle: ng update und ng add.
9/1/2019
Raffaele, unser Lernender im 2. Lehrjahr, setzt sich zur Zeit mit der Mobile Entwicklung auf iOS auseinander. Dazu lernt er im Selbststudium ein halber Tag in der Woche die Programmiersprache Swift, und hält dann anschliessend einen kurzen Vortrag über die erlernten Kenntnisse innerhalb unserer Firma. Während der HomeOffice Zeit in den Weihnachtsferien hat er ein Blogbeitrag zu diesem Thema vorbereitet welches wir nachfolgend mit Stolz präsentieren!
Swift ist eine Programmiersprache von Apple für iOS, macOS, tvOS, watchOS und Linux, die auf der Entwicklerkonferenz WWDC 2014 vorgestellt wurde. Swift ist eine leistungsstarke und offene Sprache, mit der man grossartige Apps erstellen kann. Sie ist ausserdem eine robuste, intuitive und ausserdem sehr benutzerfreundliche Programmiersprache mit offenem Quelltext(Open Source).
Bei Swift handelt es sich um eine multiparadigmatische Sprache, die Ideen von Objective-C, Rust, Haskell, Ruby, Python, C\#, CLU, D und anderen Programmiersprachen aufgreift. Sie bietet Mechanismen wie Klassen, Vererbung, Closures, Typinferenz, Funktionen höherer Ordnung, generische Typen und Namensräume sowie multiple Rückgabetypen und -werte. Der Compiler basiert auf LLVM.
Auf der Konferenz wurde das dazugehörige Handbuch angekündigt und im iBooks Store zur Verfügung gestellt.
Die Entwicklung von Swift begann im Juli 2010 durch Chris Lattner, ab Ende 2011 arbeitete eine grössere Entwicklungsmannschaft daran. Eine am 2. Juni 2014 veröffentlichte Aktualisierung der WWDC-App war die erste veröffentlichte Anwendung, die in Swift geschrieben wurde.
Laut Swifts Chefarchitekten, Chris Lattner, soll Swift Objective-C bei Apple nicht ersetzen, sondern eine zusätzliche Möglichkeit zum Entwickeln für die vorgesehenen Plattformen bieten.
Swift ist eine schnelle und effiziente Programmiersprache, die Feedback in Echtzeit gibt und sich nahtlos in bestehenden Objective-C Code einbinden lässt. So können Entwickler sichereren und zuverlässigeren Code schreiben, Zeit sparen und ihre Apps noch besser machen.
Nicht nur Entwickler haben das Potenzial von Swift erkannt. Hochschulen und Bildungseinrichtungen haben Programmierkurse für Swift im Lehrplan und bieten kostenlose Kurse auf iTunes U an. Was den Übergang von Programmieren lernen zum professionellen Programmieren so einfach wie nie macht.
Apple stellt Binärdateien für OS X und Linux zur Verfügung, die Code für iOS, OS X, watchOS, tvOS und Linux kompilieren können. Damit Swift noch leistungsstärker werden kann, hat Apple eine Community geschaffen, in der die Nutzer direkt zum Swift Quellcode beitragen können.
Hier sehen Sie ein Code Beispiel von der Programmiersprache Swift:
20/12/2018
Das Jahr neigt sich langsam dem Ende zu. 2018 war für die Talent Factory kurz und sehr ereignisreich. Einerseits die Firmengründung im November und der Bezug des Co-Working space in der Welle 7, andererseits die Suche nach den neuen Lernenden für die Lehre im Sommer 2019.
Die Talent Factory gönnt sich über die Festtage eine Pause, um mit den Liebsten die besinnliche Zeit zu geniessen und Energie zu tanken. Daher sind wir ab dem 07. Januar 2019 in voller Frische wieder für euch da.
Wir möchten unseren Investoren, Partnern, Freunden und Bekannten besinnliche Festtage und einen guten Rutsch ins 2019 wünschen. Wir danken allen für das Vertrauen und die gute Zusammenarbeit.
Herzlichst, euer Talent Factory Team
Die Talent Factory sucht neugierige, interessierte und wissenshungrige Schul- oder Gymnasiumabgänger die alles über IT lernen wollen. Wenn du zudem noch zielstrebig, motiviert und selbstständig bist freuen wir uns über deine Bewerbung. Nähere Details findest du auf unserer Homepage.
Offene Stellen
Lernender Applikationsentwicklung EFZ
Lernender Applikationsentwicklung Way up
Student für praxisintegrierten Bachelor Studiengang (PiBS)
Die Talent Factory öffnet per 01. November 2018 die Tore! Wir freuen uns auf unsere neuen Mitarbeiter und über unseren zentralen Arbeitsort in der Welle 7, Bern.
Wir sind stolz neben dem Management bereits heute drei Entwickler und zwei Lernende an Bord zu haben. Motiviert und voller Tatendrang arbeiten wir bereits an verschiedenen Projekten. Die Talent Factory schaut enthusiastisch in die Zukunft und freut sich über neue Projekte von bestehenden Kunden und über Anfragen von neuen Partnern.
Somit möchten wir die Gelegenheit nutzen um uns bereits heute bei allen Beteiligten für das entgegengebrachte Vertrauen zu bedanken.
Herzlichst,
Talent Factory
Valentina Lanz