Hypercode Blog, #Projekte

Testgeräte, Simulatoren und Browser-DevTools haben wir bei Hypercode reichlich. Doch unterwegs oder beim schnellen Blick aufs iPhone sehen wir meist nur die eine Ansicht, die zum eigenen Display passt. Unsere neue App Views genau schließt diese Lücke: URL öffnen, mehrere Viewports vergleichen und direkt in die Device-spezifischen Details einsteigen.

Ein Gerät. Viele Perspektiven.

Views zeigt eine Website dazu in mehreren Gerätgrößen neben­einander. Mit dabei: Alle iPhones und iPads, aktuelle Macs, ausgewählte Android-Devices, Boostrap-Breakpoints und die Möglichkeit eigene Viewports zu definieren. So seht ihr auf einen Blick, wie sich euer Responsive Webdesign schlägt, wo Texte ungünstig umbrechen oder eine Navigation zu voll wird.

• Viewports nach Wahl: Smartphone-, Tablet-, Foldable- und Desktop-Größen aus einem umfassenden Geräte­katalog, als Bootstrap-Breakpoints oder mit eigenen Abmessungen.
• Interaktive Vorschauen: Scrollen, Klicken, Links folgen, Menüs öffnen – mit synchronisierter Scroll-Position und direkt in den Device-Viewports.
• Live Reload und Auto Reload: Vorschauen aktualisieren sich bei Datei­änderungen über die kostenlose Views CLI für Mac und PC oder in einem festen Intervall.
• Im eigenen Workflow: Safari-Erweiterung, Apple Shortcuts, URL-Scheme, CLI und Markdown-Guides für euren KI-Coding-Agenten sind direkt mit dabei.
• Device-Screenshots: Einzelne Viewports in den Device-spezifischen Größen festhalten, teilen im Team besprechen und fixen waren nie einfacher.

Alle Funktionen und weitere Einblicke findet ihr auf unserer Projekt­seite zu Views.

Kostenlos plus Pro-Features

Views ist für iPhone und iPad kostenlos und zeigt bis zu drei Viewports gleichzeitig. Views Pro schaltet per einmaligem In-App-Kauf für 9,99 EUR unbegrenzt viele Viewports, unbegrenztes Live Reload und Auto Reload sowie Device-spezifische Screenshots ohne Views-Badge frei.

Wir würden uns freuen, wenn ihr Views ausprobiert. Und meldet euch gerne mit Feedback, Ideen oder Fragen!

Viel Spaß beim Perspektiv­wechsel!

Mit der Raycast-Integration hatten wir zunächst das schnelle Suchen und Buchen in awork für uns vereinfacht – und, wie sich heraus­stellte, auch für einige andere. Nun wollten wir die wichtigsten Infos jederzeit sichtbar machen, um Zeit­buchungen und neue Aufgaben stets im Blick zu behalten.

Da wir im Team große Fans des Elgato Stream Decks sind, bot es sich an, beides mit­ein­ander zu ver­binden: Das frei konfigurier­bare Bedien­pult mit kleinen Display-Tasten bringt die awork-Infos direkt auf den Schreib­tisch.

Erfasste Zeit direkt auf der Taste

Mit Tracked Time Today seht ihr, wie viel Arbeitszeit ihr heute bereits in awork erfasst habt. Das Plugin setzt diese Zeit ins Verhältnis zu eurer eingestellten täglichen Arbeits­dauer und zeigt euch den Fortschritt direkt auf der Taste an.

Das ist vor allem dann praktisch, wenn zwischen Meetings und Projekt­arbeit die Frage aufkommt: Habe ich für heute schon alles gebucht? Ein Blick aufs Stream Deck hilft bei der Orientierung; per Tastendruck geht es direkt zur passenden Ansicht in awork.

Die eigenen Aufgaben auf einen Blick

Wie viele Aufgaben sind noch offen? Sind neue dazu­gekommen? Die Aktion Task Count zeigt die Anzahl der Aufgaben direkt auf einer Stream-Deck-Taste. Dafür könnt ihr zwischen den drei persönlichen Ansichten New Tasks, My Tasks und Private Tasks wählen – oder gleich jeder Ansicht eine eigene Taste geben.

awork AI per Tastendruck

Mit der Aktion Open awork AI öffnet ihr awork AI in eurem verbundenen Workspace direkt vom Stream Deck aus. Für jede AI-Taste könnt ihr einen eigenen Prompt speichern. Beim Tastendruck öffnet sich awork AI im Browser mit eurem Text als voraus­gefülltem Prompt für einen neuen Chat. Ohne gespeicherten Prompt gelangt ihr direkt zu awork AI.

So bekommen auch wieder­kehrende Prompts einen festen Platz auf dem Schreib­tisch: Legt mehrere AI-Tasten an, hinterlegt die jeweiligen Texte und gebt den Tasten passende Namen. Eure häufig genutzten Prompts sind damit jederzeit griffbereit.

Setup & Download

Das Plugin läuft unter macOS und Windows. Für die Einrichtung legt ihr zunächst einen API-Client in awork an; dafür können Adminrechte nötig sein. Die einzelnen Schritte findet ihr in unserer Setup-Anleitung. Anschließend legt ihr fest, welche Infos und Aktionen auf welchen Tasten erscheinen. Wie häufig die Aufgaben- und Zeitwerte aktualisiert werden, lässt sich für jede dieser Tasten einzeln einstellen. Für Open awork AI tragt ihr euren optionalen Prompt in den Ein­stellungen der jeweiligen Taste ein.

Ihr findet das Plugin im offiziellen Elgato Marketplace, über den ihr es kostenlos auf eurem Stream Deck installieren könnt. Viel Spaß damit und möget ihr immer alle Buchungen und Tasks im Blick haben!

Dies ist das erste einer Reihe von Stream-Deck-Plugins, die wir für Professionals (und uns) entwickelt und veröffentlicht haben. Bereits online sind außerdem:

• Web Analytics for Stream Deck, das diverse Website-Metriken von den beliebten, DSGVO-konformen Analytics-Diensten Matomo, Plausible und Fathom darstellt.
• Feed Key for Stream Deck, unser Take eines Feedreaders für Elgatos Hardware-Steuerung, der per Badge über neue Inhalte in RSS-/Atom-Feeds, YouTube-Kanälen, GitHub-Releases und Podcasts informiert und die Quelle bei Tastendruck öffnet.

Auch diese stellen wir später hier im Blog nochmal genauer vor.

Seit wir unsere awork-Extension für Raycast vorgestellt haben, begleitet sie uns und viele andere Teams jeden Tag bei der Arbeit. Projekte finden, Aufgaben öffnen und Zeiten erfassen – direkt im Launcher und am Keyboard, mit wenigen Tasten­drücken. Jetzt legen wir nach: Das neue Update bringt einige Neuerungen, die awork und Raycast noch enger verbinden.

Für Raycast 2 und Windows

Mit dem Release der großen, neuen zweiten Version von Raycast sowie Raycasts Windows-Support haben wir das ebenfalls nachgezogen und die Extension für v2 und Windows fit gemacht (und sicher­gestellt, dass sie auch noch in v1 reibungslos weiterläuft).

Project & Task Keys

Vor Kurzem hat awork mit den Project und Task Keys ein auch von uns oft gewünschtes Feature geliefert: eindeutige IDs für Projekte und Aufgaben. Selbst­redend haben wir diese gleich in unsere Extension aufgenommen, voraus­gesetzt, ihr habt sie bereits in awork aktiviert. Ansonsten bleibt alles beim Alten.

Create Task / Edit Task

Der meist­gewünschte Feature-Request an uns war, dass wir bitte die Möglichkeit zum Erstellen und Editieren von awork-Aufgaben in die Extension integrieren sollen. Das haben wir nun getan: Create Task lässt sich neben Search Projects, Search Tasks und Log Time nun als gleich­wertiges Command aufrufen. Ist ein Projekt markiert, lässt sich per Submenü oder ^C bzw. – Grüße an die neuen Windows-Nutzer­*innen! – CTRL+C die Create-Maske voraus­gefüllt öffnen. Gleiches gilt für Tasks, die sich nun per Edit Task im Submenü oder per ^E bzw. CTRL+E direkt editieren lassen. Auch Unter­aufgaben lassen sich genauso erstellen – sofern es selbst noch keine Unter­aufgaben sind.

awork trifft Raycast AI

All diese Features lassen sich jetzt auch in sämtlichen AI-Funktionen von Raycast verwenden. Über @awork können Projekte und Aufgaben in natürlicher Sprache gesucht, Zeiten erfasst und Aufgaben angelegt oder bearbeitet werden. Bevor die AI eine Aufgabe erstellt oder ändert, werden die gewünschten Details Raycast-typisch nochmal zur Bestätigung angezeigt.

Ihr findet die aktualisierte Extension ab sofort im offiziellen Raycast Store.

Warum awork für uns so gut funktioniert und wie wir es gemeinsam mit unseren Kund­*innen einsetzen, zeigt unser awork-Videoporträt. Die Extension ist für uns die passende Ergänzung dazu: ein kleines Tool, das aus unserer täglichen Arbeit heraus entsteht und sich mit ihr und den wachsenden Funktionen von awork & Raycast weiter­entwickelt.

Die neue hypercode.de ist kein Relaunch um des Relaunches willen. Sie ist das Ergebnis der Frage, wie wir das, was uns und unsere Arbeit ausmacht, noch besser sichtbar machen können. Denn es ist einiges passiert: Hypercode ist gewachsen, unser Portfolio hat sich weiter­entwickelt und unser Anspruch an die eigene Außen­darstellung ebenfalls¹. Die neue Website greift das auf: Sie erzählt direkter, zeigt mehr und spricht klarer aus, was wir für unsere Kund­*innen leisten.

Show, don't tell

Was schon in der Vorgänger­version angelegt war, haben wir konsequent weiter­gedacht: Hypercode ist ein Digital Product Studio mit eigenem, hohem (Qualitäts-)Anspruch – und genau das soll die Website vom ersten Moment an vermitteln. Der neue Auftritt setzt auf mehr Kontrast, stärkere Akzente und eine Bild­sprache, die unsere Arbeit unmittelbar erlebbar macht. Weniger erklären, mehr zeigen.

Deshalb zeigt die neue hypercode.de deutlich mehr Bewegtbild – direkt aus unseren Projekten, nicht aus Stock-Archiven. Ergänzt wird das durch zahlreiche neue Case Studies, die unsere Projekte von Strategie über Konzeption bis zur Umsetzung konkret nach­vollziehbar machen. Vom Showreel auf der Startseite bis zu jedem einzelnen Projekt-Screencast: Die neue Website macht unsere Arbeit so greifbar wie nie zuvor.

Spotlight: Unsere Leistungen

Ein zentraler Bestandteil der neuen Informations­architektur sind unsere neu gedachten Leistungs­seiten, die präzise aufzeigen, wie wir arbeiten und was dabei entsteht. Das gliedern wir in What We Do, also wo unsere Expertise liegt, und What We Create, welche Outcomes für und mit unseren Kund*innen wir damit erreichen:

What We Do

• Produkt­strategie & Architektur – Wir helfen bei der Entwicklung der Digital­strategie und Produkt­idee, beraten bei der Technologie­auswahl und Architektur und identifi­zie­ren frühzeitig Lösungs­ansätze durch die Analyse angrenzender Geschäfts­prozesse.
• Konzeption & Design – Durch eine auf Kund­*innen abgestimmte Design­sprache schaffen wir ansprechende User Experiences. Unsere Nähe zum Development ermög­licht uns dabei die verlust­freie Realisierung komplexer Design­anforderungen.
• Software- & Web-Entwicklung – Als tatkräftiger Implementierungs­partner entwickeln wir hoch­performante, intuitiv bedienbare Mobile Apps, Web-Apps, Konfiguratoren, Websites und Web-Services, die ihre Nutzer­*innen begeistern.

What We Create

• Mobile Apps für iOS & Android – Wir entwickeln mobile Anwendungen, die auf allen Plattformen überzeugen – technisch präzise, gestalterisch klar und optimal integriert. Von hybriden Architekturen bis zur nahtlosen Nutzung nativer Funktionen.
• Corporate Websites – Wir gestalten und entwickeln individuelle Web­auftritte, die komplexe Inhalte klar strukturieren, technologische Exzellenz vermitteln und durch beste Performance und spannende Interaktionen in der Nutzer­führung überzeugen.
• Web-Apps & Produkt­konfiguratoren – Interaktive Tools, die Entscheidungen erleichtern und Prozesse beschleunigen: modular, skalierbar und optimal integriert in bestehende Systeme und Geschäfts­modelle.
• Individual­software – Wenn Standard­lösungen an Grenzen stoßen, entwickeln wir maßge­schneiderte Software, die genau auf die jeweiligen Anforderungen zuge­schnitten ist. Modular gedacht, skalierbar umgesetzt – mit klarem Fokus auf Wart­barkeit und Effizienz.

Dazwischen findet ihr das ein oder andere Easter Egg, denn auch ein Business-Auftritt sollte unserer Meinung nach Spaß machen. 🐣 Viel Spaß beim Erkunden der neuen Inhalte – und wie immer freuen wir uns über Feedback und Anregungen!