Jonas Heuer

Jonas Heuer Ich helfe dir, dein Business sichtbar ins Internet zu bringen
Webseite | App | Branding | Online-Marketing | Corporate Identity

In meinem letzten Post habe ich dir Vite vorgestellt.Vite stellt einen deutlich schnelleren Dev-Server und Build Tools i...
16/12/2022

In meinem letzten Post habe ich dir Vite vorgestellt.

Vite stellt einen deutlich schnelleren Dev-Server und Build Tools im Vergleich zu "Create React App" zur Verfügung.

Zur Erstellung einer React App mit Vite benötigst du genau 5 Schritte.
Nach Eingabe eines "NPM-Commands" in deiner Kommandozeile führt dich Vite automatisch durch die restlichen 4 Schritte und macht dir die Erstellung der React App kinderleicht.




Ich starte morgens meinen Laptop, öffne Visual Studio Code und starte den Dev-Server meiner React App.Die Zeit nutze ich...
09/12/2022

Ich starte morgens meinen Laptop, öffne Visual Studio Code und starte den Dev-Server meiner React App.
Die Zeit nutze ich, um mir in aller Ruhe einen Kaffee zu machen, statt meinen Rechner genervt wegen langer Wartezeiten aus dem Fenster zu schmeißen.

Der Start des Dev-Servers einer React App, die mit Create React App erstellt wurde, dauert bei großen Projekten eine gefühlte Ewigkeit.

Ich bin durch Zufall auf gestoßen. Vite stellt Dir einen deutlich schnelleren Dev-Server und Build Tools zur Verfügung.

Hast du bereits Erfahrungen mit Vite gesammelt?




Sobald Du in die Welt der objektorientierten Programmierung eintauchst, wird dir früher oder später SOLID über den Weg l...
02/12/2022

Sobald Du in die Welt der objektorientierten Programmierung eintauchst, wird dir früher oder später SOLID über den Weg laufen.

💡 SOLID beschreibt 5 Prinzipien zur Erstellung von Code, die in dieser Kombination durch Robert C. Martin bekannt wurde.

🧠 SOLID setzt sich aus den 5 Anfangsbuchstaben der Prinzipien zusammen, die bei der Erstellung von Code beachtet werden sollten:
S: Single Responsibility
O: Open-Closed
L: Liskov Substitution
I: Interface Segregation
D: Dependency Inversion

🏁 Das Ziel von SOLID ist die einfache Erweiterung und Wartung von Software sicherzustellen.





Ein Technologie-Stack ist eine Sammlung von Technologien, die zusammen zur Erreichung eines Ziels eingesetzt werden.Für ...
25/11/2022

Ein Technologie-Stack ist eine Sammlung von Technologien, die zusammen zur Erreichung eines Ziels eingesetzt werden.
Für die Erstellung von Web Apps mit JavaScript erfreuen sich 4 Stacks besonderer Beliebtheit.

Die 4 Stacks bestehen aus je 4 Bausteinen:
1️⃣ Datenbank
2️⃣ Web Framework
3️⃣ Frontend Framework
4️⃣ Webserver

Die Bezeichnungen der Stacks leiten sich aus den Anfangsbuchstaben der verwendeten Bausteine ab:

1️⃣ MEAN - Mongo DB, Express, Angular, NodeJS
2️⃣ MEVN - Mongo DB, Express, Vue, NodeJS
3️⃣ MERN - Mongo DB, Express, React, NodeJS
4️⃣ PERN - PostgreSQL, Express, React, NodeJS





Im laufe des Jahres 2022 sind einige neue JSX-Frameworks vorgestellt und vorhandene deutlich verbessert oder erweitert w...
18/11/2022

Im laufe des Jahres 2022 sind einige neue JSX-Frameworks vorgestellt und vorhandene deutlich verbessert oder erweitert worden.

Meine persönliche TOP 6 der Frameworks, die Du 2023 kennen solltest, habe ich dir zusammengestellt:

1️⃣ React JS
2️⃣ Next JS
3️⃣ Gatsby JS
4️⃣ Astro
5️⃣ Remix
6️⃣ Qwik




Dank Hydrogen ist es möglich, eine Custom Storefront in einer Headless Commerce Architektur mit Shopify im Backend in nu...
11/11/2022

Dank Hydrogen ist es möglich, eine Custom Storefront in einer Headless Commerce Architektur mit Shopify im Backend in nur 7 Schritten zu erstellen.
Die einzige Voraussetzung ist, dass du dich mit React auskennst.

Die notwendigen 7 Schritte sind die folgenden:
1️⃣ Initialisiere deine Hydrogen App mit npm
2️⃣ Wähle das passende Template für dein Frontend (Ich empfehle dir für den ersten Versuch den Demo Store zu wählen)
3️⃣ Entscheide dich für eine Programmiersprache. Du kannst zwischen TypeScript und JavaScript wählen(Ich empfehle dir TypeScript)
4️⃣ Gib deinem Projekt einen Namen. Die Namingconvention ist identisch zu React
5️⃣ Starte die App im Developer Modus
6️⃣ Verbinde deine Custom Storefront mit Shopify mit Hilfe der Storefront API
7️⃣ Setze deine Vorstellung um und release deine Custom Storefront

Falls du noch nie etwas von Hydrogen gehört hast, empfehle ich dir meinen letzten Beitrag.





Am 31. Oktober gab Shopify überraschend bekannt, dass das React Framework Remix nun Teil von Shopify ist.🏁 Mit Hilfe des...
04/11/2022

Am 31. Oktober gab Shopify überraschend bekannt, dass das React Framework Remix nun Teil von Shopify ist.
🏁 Mit Hilfe des Teams von Remix möchte Shopify die Entwicklung des eigenen React Frameworks Hydrogen vorantreiben
🧠 Ich denke diese Aquise wird positive Effekte auf die Weiterentwicklung von Remix und Hydrogen haben. Außerdem freue ich mich darauf, in Zukunft Custom Storefronts für Shopify mit React und bekannten Patterns entwickeln zu können, während ich auf Shopify im Backend nutze.





Vercel hat am 25.10.2022 in einer Keynote die neue Version von NextJS (NextJS v13) vorgestellt. Diese 7 Änderungen sollt...
28/10/2022

Vercel hat am 25.10.2022 in einer Keynote die neue Version von NextJS (NextJS v13) vorgestellt.

Diese 7 Änderungen solltest du kennen:
1️⃣ Die Ordnerstruktur wird angepasst und nicht mehr länger nur für das Routing verwendet
2️⃣ Das DataFetching wird in einem Hook zusammengefasst
3️⃣ NextJS verwendet nicht mehr Webpack sondern Turbopack (eine eigene Lösung von Vercel)
4️⃣ Die Image-Komponente ist als stable-Version verfügbar und erhält weitere Optimierungen
5️⃣ Es wird eine Font-Komponente als Beta-Version geben
6️⃣ Die Link-Komponente ist in Zukunft noch einfacher einzubinden
7️⃣ Die Middelware-API erhält einige Upgrades





Ein Tool, das mir mein Leben bei der Organisation von Projekten, Vertrieb und Marketing unglaublich erleichtert ist Noti...
21/10/2022

Ein Tool, das mir mein Leben bei der Organisation von Projekten, Vertrieb und Marketing unglaublich erleichtert ist Notion

💡Notion selbst beschreibt sich im Appstore als:
"All-in-one Workspace für Notizen, Aufgaben, Wikis und Datenbanken"

📈Diese Beschreibung zeigt in meinen Augen sehr gut, was die Stärken von Notion sind. Alle Informationen die für dich und deine Arbeit wichtig sind, hast du an einem Ort gesammelt.

Deine Informationen werden in Blöcken auf Seiten gesammelt.

📝Zum Management von z.B. Aufgaben bietet dir Notion verschiedenste Blöcke an:
1️⃣Timeline
2️⃣Kalender
3️⃣Board
4️⃣Card
5️⃣List
6️⃣Table

🧠Zum Erstellen von z.B. Wikis sind in Notion diverse Blöcke vorhanden:
1️⃣Blöcke zur Darstellung von Code, CodePens und GitHub
2️⃣Blöcke für Figma, Sketch, InVision, Miro, GoogleDrive
3️⃣Klassische Textblöcke
4️⃣Einbindung anderer Seiten aus deinem Notion

🗃Des Weiteren bietet Notion eine Vielzahl von kostenlosen, fertigen Templates für die verschiedensten Anwendungsfelder an.

Hast du schon mal etwas von Notion gehört oder benutzt du es bereits? Dann schreib mir gerne in die Kommentare, wofür du es benutzt.






Das Landgericht München I hat am 20.01.2022 in seinem Urteil (Az.: 3 O 17493/20) die Rechtswidrigkeit der Remote-Einbind...
14/10/2022

Das Landgericht München I hat am 20.01.2022 in seinem Urteil (Az.: 3 O 17493/20) die Rechtswidrigkeit der Remote-Einbindung von Google Fonts im Rahmen der DSGVO bestätigt.
❗️ Findige Kanzleien nutzen dieses Urteil um Webseiten und Webapps abzumahnen, die weiterhin die GoogleFonts-Api zur Einbindung von Fonts benutzen.
💡 Damit du deine Webseiten und Webapps auch weiterhin mit Google Fonts DSGVO-Konform erstellen kannst, zeige ich dir, wie du Google Fonts lokal in dein Projekt integrieren kannst.






Standest du auch schon vor der Frage, mit welchem Designidee mehr Kunden den Checkout beenden?Dann solltest du auf A/B-T...
07/10/2022

Standest du auch schon vor der Frage, mit welchem Designidee mehr Kunden den Checkout beenden?
Dann solltest du auf A/B-Testing setzen.

Bei den FANG-Firmen ist A/B-Testing das Mittel der Wahl, wenn es um die Gegenüberstellung von verschiedenen Designs oder User Journeys geht.
Somit ist eine datenbasierte Auswahl der besten Option möglich.

Wie A/B-Testing funktioniert, erkläre ich dir im heutigen Post.

Setzt du A/B-Testing bereits ein? Lass es mich in den Kommentaren wissen.






Visual Studio Code ist mein liebster Code-Editor. Er ist kostenlos und durch unzählige PlugIns kannst du ihn an deine Pr...
30/09/2022

Visual Studio Code ist mein liebster Code-Editor. Er ist kostenlos und durch unzählige PlugIns kannst du ihn an deine Programmiersprache anpassen.

💡 Meine Top 5 PlugIns um Visual Studio Code für die Entwicklung mit React zu konfigurieren sind:

1️⃣ ES7+ React/Redux/ReactNative snippets
Dieses PlugIn vereinfacht dir dein Leben ungemein. Es liefert dir Snippets für die Autovervollständigung und Shortcuts zum schnellen erstellen von Komponenten
2️⃣ Prettier - Code formatter
Mit Prettier ist dein Code immer perfekt eingerückt und gut leserlich
3️⃣ Auto Rename Tag
Mit diesem PlugIn werden immer automatisch der öffnende und schließende Tag gleichzeitig angepasst
4️⃣ VSCode React Refactor
Mit nur wenigen Klicks erstellst du aus einem Teil deines Codes eine neue Komponente, die sofort automatisch eingebunden ist
5️⃣ Live Share Extension Pack
Das ultimative PlugIn um im Team am gleichen Code zu arbeiten oder fürs Pair Programming






Adresse

Leipziger Str. 15
Schwetzingen
68723

Öffnungszeiten

Montag 08:00 - 18:00
Dienstag 08:00 - 18:00
Mittwoch 08:00 - 18:00
Donnerstag 08:00 - 18:00
Freitag 08:00 - 18:00

Telefon

+4917631426630

Benachrichtigungen

Lassen Sie sich von uns eine E-Mail senden und seien Sie der erste der Neuigkeiten und Aktionen von Jonas Heuer erfährt. Ihre E-Mail-Adresse wird nicht für andere Zwecke verwendet und Sie können sich jederzeit abmelden.

Service Kontaktieren

Nachricht an Jonas Heuer senden:

Teilen

Kategorie